This is an introduction to using behaviors in Flash. We're going to build a simple
movie with next and back buttons to jump between different frames in a timeline.
We're going to be using a couple of Flash's built in behaviors to make this happen.
Ok, take a look at what we're going to build:
As you can see this is a very basic movie but as we construct it you'll learn
quite a bit about building movies and basic ActionScript.
1. Create a new Flash movie. Just keep the default settings, 550 X 400 pixels,
however change the background to black.
2. Now we're going to Import the two photographs into the library so we can
use them in our movie. You can download these two photo here if you do not
have anything to work.
To Import the files go to File > Import > Import to Library...
Browse to the first image and import it in and do the same thing for the second
image. Now open up the library (Window > Library or CTRL+L) and you should
see that both images are there.
3. Drag the first one listed onto the stage and align it to the center of
the stage both vertically and horizontally. Name the layer you placed this
in (should be Layer 1) to PHOTOS.
Now click on Frame 10 and insert a Blank
Keyframe (Right-Click > Insert Blank
Keyframe). Now go to your library and drag out the second image on to the stage
and align it. Just make sure that you have placed the second image in Frame
10. Move the playhead back to Frame 1 on the timeline and you should see the
first image. You'll also notice that the first image is also in frames 2-9.
This is fine, you'll see why I did this in a moment when I place labels on
the timeline.
4. Now create two buttons. I just made two very simple buttons, one labeled
"Next" and the other labeled "Back".
5. Back in Scene 1 (after you have created the buttons), create
a new layer. This should be on top of the "PHOTOS" layer. Name the new layer "BUTTONS".
Place the "Next" button on top of the first image in the lower right-hand
corner. Click on Frame 10 in the buttons layer and insert a Blank Keyframe.
Now drag out the second button labeled "Back" and again place it in the lower
right-hand corner.
6. Now insert a new layer. This is going to be our "LABELS" layer. It isn't
necessary to include this layer but it helps organize what we have on our timeline
visually. Just as importantly we can use Frame Labels in ActionScript. In more
complex movies, labeling important keyframes is going to make our life a lot
easier so we might as well get in the habit!
Click on Frame 1 of the LABELS layer and go down to the Properites Panel and
enter in ROSE for the Frame Name.
When you do that, you'll notice that back up in the Timeline, Flash now has
our frame label on the timeline with a little red flag next to it. Do the same
thing for Frame 10 except name it BENCH. (Or whatever you want!)
This is what your LABELS layer should look like.
7. We're now going to apply behaviors to our two buttons. So click on the
first button ("Next"). If your Behaviors Panel isn't showing go to Window
> Development Panels > Behaviors.
While you still have the button selected click on the plus button on the Behaviors
Panel. Go to Movieclip > Goto and Stop and frame or label.
You'll now see this:
Flash asks us for the movie clip that we want to stop playing. Since we're
not working with any outside files we can leave the "Relative" path selected.
Type in our second frame label "BENCH" (without the quotes) in the text box.
We could have also just typed in "10" for frame 10 but it makes a lot more
sense in the ActionScript for the movie if we use labels to tell us what we're
talking about - espiecially if this was a larger movie.
Click OK.
In the Behaviors Panel you'll notice that Flash has added the behavior. However,
we want to set what Event we would like trigger the behavior. I want to set
this to an "On Release" event. This means that after we click on the "Next"
button we'll be taken to the frame labeled "Bench". Notice that there are several
different events that could trigger this.
8. Now we want to do the same thing for the "Back" button. Move the playhead
in the Timeline to Frame 10 or just click on Frame 10 in the BUTTONS layer.
The only thing that we're going to do different in this step is enter in a
different Frame label to goto and stop at. So type in "ROSE" (without the quotes)
in the text box and click OK.
Now we have all the ActionScript we need for the buttons. To see what ActionScript
Flash has added with these behaviors, click on the "Next" button and open up
the Actions Panel and take a look at the ActionScript applied to the button.
9. We could test our movie now but if we did we probably wouldn't like the
result. That's because Flash automatically begins playing our timeline. To
stop this from happening we need to tell Flash not to play through the timeline.
So create a new layer (it can be whever you want) and name it ACTIONS. Click
on Frame 1 and make a Blank Keyframe, then open up the Actions Panel. Go to
Timeline Control and double-click on stop. This adds a stop action to Frame
1.
Notice this action is being applied to a Frame. The previous actions we applied
to Buttons.
10. Now test out your movie (Control
> Test Movie). Click on the "next" button
it should take you to the second photo. Click on the "back" button and it will
take you back to the first photo.
Now the only thing that's left to do is publish our movie and we're done!
I know this wasn't the most exciting Flash movie to create but it does teach
quite a bit about basic movie construction and how to add behaviors so that
we can move between different frames in a movie.