• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 5. Symbols and the Library > Creating Interactivity with Buttons

Creating Interactivity with Buttons

For true interactivity, the end user must have some input as to how the Flash movie or animation will unfold. The easiest way to do this is with buttons. Buttons can control certain elements in a Flash movie. For example, a button can play or stop an animation. Buttons can also trigger other events, such as opening up a browser window, setting volume for a sound, or even controlling a spaceship in a video game. Understanding how buttons work and how buttons interact with different Flash objects is fundamental to interactive Web design.

Controlling the Animation with Buttons

When you're adding interactivity, it is important to allow the end user to control how an animation is played. Here are the steps to follow to control an animation with buttons:

Open mtween.fla, the file you created earlier in this chapter. Create a new layer and name it Button. Lock the animation layer so that you don't edit it by accident. Create a new button symbol by choosing Insert, New Symbol. Make sure to choose Button for the behavior and name the symbol button. Then add keyframes to all the button's states.

Return to the main timeline. If the library isn't already open, choose Window, Library or press Cmd+L (Mac) or Ctrl+L (PC) to open it. Drag out two instances of button and place them anywhere on the stage on the Button layer.

With the Type tool, type Play over the first button and Stop over the second.

With the Play button selected (be sure to have the button selected and not the text Play), select Window, Development Panels, Behaviors. This will bring up the Behaviors panel, as similar to Figure 5.15.

Figure 5.15. The Behaviors panel.

In the Behaviors panel, click on the plus sign to add some actions to the play button. Select Movieclip, Goto and Play at Frame or Label. When that is selected, a window will appear with options similar to Figure 5.16. The options include the frame number we want to start on, and the path to the movie clip we want to play. For this example, the defaults are fine, so click OK. The action will now be in the Behaviors panel.

Figure 5.16. Options for the Goto and Play at Frame or Label behavior.

This will have placed actions in the button. To see the actions, make sure the play button is still selected, and open up the Actions panel by going to Window, Development Panels, Actions (PC–F9, Mac–F9). Then you will see the actions in the play button like these:

on (release) {
    //Movieclip GotoAndPlay Behavior

    //End Behavior

The event handler on (release) can be changed. At this point, the release of the mouse will trigger the event (in this case, play). If you want to change this to press or some other event, simply go back to the Behaviors panel, and you will see the action that has been placed in the play button. In the Behaviors panel, there are two columns, Event and Action. Under the Event column, you will see On Release. To change this, click in that column, and a drop-down menu will appear with several choices as shown in Figure 5.17.

Figure 5.17. Additional events in the Behaviors panel.

Before we test the script, the animation will automatically start playing. All movies in Flash will play and loop by default. Therefore, you need to fix this so that the Play button will actually serve a purpose.

Highlight frame 1 in either layer and choose Window, Development Panels, Actions. Notice that the Actions panel reads “Actions – Frame.” In the Actions `panel, type these actions to stop the movie from automatically playing:


Now you can test the movie. Choose Control, Test Movie. Notice that the animation does not start playing by default. Click the Play button. Your animation should now be playing!

Watch the entire animation.

This animation looks okay; however, the movie will stop playing, even though we didn't ask it to. The reason why it has stopped is that the play head is looping. Looping simply means that when the play head reaches the end of the animation, it will come back to the beginning. In our case, the first frame has a stop action causing the animation to stop.

Therefore, we need to come up with a workaround for this problem. We can't remove the stop action from the first frame because it is stopping the animation from playing automatically.

Highlight the last frame in your animation. With it highlighted, open the Actions panel. In the Actions panel, type these actions:


This will fix the problem because when the play head hits the last frame, the play head will read the script and send it back to frame 2, thus avoiding frame 1 altogether.

It's important to point out that when you're dealing with ActionScript, you should test your movies often. From this one example, you can see the benefit of testing frequently. It is easier to build on good scripts and make minor adjustments where needed, as opposed to debugging longer ActionScript code.

All you need to do now is add functionality to the Stop button. This task is a bit easier. Highlight the button with the Arrow tool. With the Stop button selected, go to the Behaviors panel, and click the plus sign again. This time choose Movieclip, Goto and Stop at Frame or Label, and click OK.

Test your movie! See how easy that was?

Save this movie as control1.fla.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint