Tutorial #116

Build A Flash Movie Controller

Level: Intermediate
Requirements:Flash MX
Language: Flash Actionscript

Introduction

Prerequisites for this tutorial should be the Beginning Flash Tutorial and The Flash Lexicon

Step 1:

I will be using FlashMX for this tutorial. The procedure can be applied to any version of Flash but the software interface may be slightly different depending on the version.

Start a new Flash File and set the document size to what you want. I set mine to 200 by 200.

Step 2:

Use the common library symbols in Flash. There are some good ones here and you should get used to them. It can be found under the Window Menu --> Common Library choose Buttons. Drag to the stage the buttons you like. You should have five buttons representing: pause, play, fast-forward, and stop.

Step 3:

Highlight all the buttons and press F8. This will allow you to turn the buttons into a symbol. Create a movie symbol called MovieControl or any name you want.

Now double click you new symbol to bring you to symbol editing mode.

Label the layer with the buttons, Buttons.

Create a new layer and label it actions.

Put a stop action in frame one and label the frame stop.

Click on the frame to reveal the frame properties in the property inspector. Where it says frame, type stop in the field. This is how you label a frame. Open the actions panel and open the first book Actions. Open the next book Movie Control. There is the stop action. Double-click it to enter the action. This is how all other actions and labels will be done. Ok? OK!

Step 4:

Add a keyframe at frame 5. To do this click frame #5 go to the Insert Menu and select Keyframe.

Label this frame fastforward.

Place the below actionscript as is in this frame.

_parent.gotoAndPlay(_parent._currentframe+3);

You could copy and paste it. It may be easier.

This is saying that the parent movie clip (I'll explain later) should play the current frame plus three frames. In other words the parent movie clip should play every three frames. What button do you think this action will work with?

Step 5:

Insert a keyframe in frame 6. Add the following actionscript to frame six.

gotoAndPlay("fastforward");

You could copy and past this one or use the books as we did in step #9.

This action will hold this movie clip symbol in a loop. Moving the timeline to frame 5 and when it gets to frame 6 Bam, back to frame five. Can you guess the button this will be for now? Hold on there's more.

STEP 6:

Create a keyframe at frame 10 and label it rewind.

Place the following actionscript on that frame

_parent.gotoAndPlay(_parent._currentframe-5);

You could copy and paste it if you want.

This tells the parent movie clip to move the playhead back every five frames. Notice the subtraction symbol. Do you need to guess which button this is for?

step 7:

Insert a keyframe at frame 11 and place the following actionscript in that frame

gotoAndPlay("rewind");

You could use the books or just copy and paste this one.

That's it now for the buttons.

step 8:

On the pause button place the following actionscript

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

This will tell the parent movie to stop where it is.

On the play button place the following actionscript

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

This will tell the parent movie clip to play.

On the rewind button place the following action script

on (press) {
gotoAndPlay("rewind");
}
on (release) {
gotoAndStop("stop");
}

This is the peachy part. Holding down the rewind button will rewind the parent movie clip sending it in that rewind loop we created. Once I let go of the mouse the loop is broken and the movie controller goes back to frame one the frame labeled stop. Just like a real rewind button.

The fast-forward button place the following actionscript

on (press) {
gotoAndPlay("fastforward");
}
on (release) {
gotoAndStop("stop");
}

This is the opposite of what the rewind does but it creates the same effect using the same actionscript concept.

I used the term _parent for a good reason. You can now drop this movie controller onto any Flash Timeline an it will control it. Yes in that case the movie controller movie clip symbol is like a child but don't tell him that.

step 9: Next, the finishing touches.

Exit symbol editing mode and your main stage should look like this.

Add a new layer on the main timeline.

Import a MP3 that you have on your computer lying around some where.

To import go to the File Menu and select Import. Select your MP3 and your done.

On the new layer in frame one add the newly imported sound. Click the frame and in the Property Inspector select Sound and your MP3 should be there. Here, on the Property Inspector I like to set the Sync: option to Stream. This will allow the MP3 to start playing before it is all loaded. On a Broadband connection it's flawless. On a dial up it plays right away but every so often it pauses to buffer.

Issue:

If the audio is only one frame how will the fast-forward and rewind work? Elementary my dear Watson, elementary. With the Stream Sync: selected you can now drag out your entire audio along the main timeline to be represented by a sound wave. This is a little annoying especially with a long audio file but its sure worth it once your Sreaming, royalty free, MP3 player is up and running.

At frame 30 of that new layer, the one with the audio, add a frame. Go to the Insert Menu and select Frame. You will now see some of the sound wave represented by a blue color. At least its blue on my computer.

Click, hold, and drag this frame further down the timeline. You will now see more of your sound wave. Do this until there is no more sound wave showing. At that frame put a stop action and you're done. An average MP3 could be 3400 frames so have a little patience and clean up any extra space you don't need. Do this to eliminate dead air.

Tutorial By	Submitted On	Views	Rating
Scott Waldman	29/02/2004	7715	Not Yet Rated Rate Tutorial