First time here? First time here? Newsletter Signup Newsletter
Login | Register | 651326 Members and growing! | Flash Jobs
Search tutorials
Author: Tim Murray | Website: http://www.gmg.com.au

Getting the sound to play, pause and rewind

First, we'll get the container movie out of the way. Create a layer in test.fla for our controls. I put the layer at the bottom and named it "controller". Select the "Insert > New Symbol..." command (Ctrl+F8) and name it "media-controls", giving it a Behaviour of Movie Clip.

Select the controller layer you created and drag the media-controls movie clip on to the stage just under your waveform image. All right, you may put it wherever you want. It doesn't make much difference for now.

Open your media-controls movie and create three buttons: "play", "pause", and "rew". We gave them some standard-looking icons and some clicky sounds for mouse-overs and presses. And I'm not going into details about how to make buttons. That stuff is in your help files - just don't use components. They are rather large (too many bytes) and tend to load in the first frame.

Put your buttons on layers named "play", "pause", and "rew", and align them with your sample waveform as you like! This is what I did:

I have placed the buttons on the right to leave room for the slider that we will add later.

Now for the button code. Because our sound is streaming on the timeline of our parent movie, all we have to do to control our sound is to control our parent movie as we would for any other movie.

Paste this code on the Rewind button:

on (release) {  //rew
        _parent.gotoAndStop(1);
}

Paste this code on the Pause button:

on (release) {  //pause
        _parent.stop();
}

Paste this code on the Play button:

on (release) {  //play
        _parent.play();
}

All of this is standard movie clip control code.

Test your movie (Ctrl+Enter). The sound should play and animate the waveform as it goes along. And the three buttons should operate as expected. This will give you the basic functionality, but we can do better than this. Let's make the Play/Pause buttons seem like one button that toggles between play and pause states, and get the Rewind button to rewind-and-play (if the sound is currently playing) or rewind-and-stop (if the sound is paused).

What we will do is hide the Play button (set its _visible property to false) if the sound is playing or show the Play button (set its _visible property to true) if the sound is paused. If we align the Play and Pause buttons so that the Play covers the Pause, we will get our toggling effect!

Because we will be accessing the Play button's _visible property, we need to give our Play button an Instance Name. Select the Play button on the stage and look at your Properties panel. You will see a text box with "" greyed out. Click on the grey text and type in the name for the button that you want to use in your code to access the button's properties and methods. We named it "playBTN".

Make the changes to the code for our three buttons.

Paste this code on the Rewind button:

on (release) {  //rew
        if (playBTN._visible) {  //paused
                _parent.gotoAndStop(1);
        } else {  //playing
                _parent.gotoAndPlay(1);
        }
}

Paste this code on the Pause button:

on (release) {  //pause
        _parent.stop();
        playBTN._visible = true;
}

Paste this code on the Play button:

on (release) {  //play
        _parent.play();
        playBTN._visible = false;
}

Then realign the buttons by dragging the Play button over the Pause button.

Now test it. Working? Really? Here's the problem: the parent movie (our sound) starts out playing, but the Play/Pause button defaults to a state that is appropriate for a paused parent movie.

We have two options: (1) only add code to stop the parent movie and just leave the rest as it is, or (2) put the Pause button above the Play button in the layers and recode to show and hide the Pause button. I chose the first option, added an actions layer and put a stop command in frame 1 to stop the parent movie from playing. Like this:

Test it now! And save.

» Level Advanced

Added: 2004-02-17
Rating: 8 Votes: 63
(10 being the highest)
» Author
Tim is a co-director of the Glasson Murray Group, providing quality graphic design, illustration, 3D visualisation, interactive environments, virtual reality, multimedia and website services.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.