Activate Your Flash Animations with ActionScript

he last lesson in this series introduced you to Button symbols and showed how to use them to create interactivity via ActionScript, Macromedia’s programming language for Flash MX. In this tutorial, you’ll delve deeper into ActionScript to create more complex animated buttons using more sophisticated ActionScript commands.

If you don’t have Flash MX, you can download a free 30-day trial version that you can use to explore Flash’s capabilities.

Setting Up the Flash MX Work Area
As in the previous tutorials, you’ll begin by setting the Panel layout to Designer mode. Click the Window menu and then click on the Panel Sets item. From the options available in PanelSets, select Designer [1024 X 768]. You should be familiar with the Color Mixer, Tools, Timeline and Properties panels by now. Now go back to the Window menu and open the Library panel so that you can create and store Symbols for this project. Then go back to the Window menu again and open the Actions panel. As you know from the last lesson, the Actions panel is the method by which you issue script commands for movie objects and timeline frames.

What You Need
Flash MX running on a Win 98 SE/Me/NT4/2000/XP computer with at least a 200 MHz Intel Pentium processor and 64 MB of RAM (128 MB is preferable) and 85 MB of available hard drive space. A 1024 x 768, 16-bit (thousands of colors) color display is also required.

Now that the panels are set up, go to the Properties panel and click on the Size button. In the dialog box that appears, enter a width of 300 pixels and a height of 200 pixels. Select a background color other than white. If you don’t want to choose your own colors for the objects in this movie, refer to the sidebar Color Values Used in the Sample Movie, for the exact color values used in the sample movie for this lesson. Make sure that the frame rate is set to 12 fps (frames per second) and then click OK.

You’ll create a Flash file that demonstrates how animated buttons can issue dynamic commands to movie clips (see the Flash movie shown in Figure 1).

Figure 1: The sample Flash movie for this lesson. Clicking on the buttons toggles the visibility of the two movie clips embedded in this animation.

Creating the Movie Clips
Start by going up to the Insert menu and selecting the New Symbol option. In the dialog box that appears, click the Movie Clip option and name it “Shape Tween.” After you click OK, the “Shape Tween” movie clip appears in the Library window and its timeline opens on the stage (see Figure 2).

Figure 2: When you create a new movie clip symbol for the Library, its timeline appears on the stage.

In frame 1 of the movie clip timeline, draw a circle with a solid color fill and no stroke with the Oval tool. Next, insert keyframes at frames 12 and 24 of the timeline. Select keyframe 12 and delete the oval. While still in keyframe 12, draw a square with the Rectangle tool, making sure that its fill color is different from the circle’s. Leave the circle in keyframe 24. Select keyframe 1 and create a Shape Tween in the Properties panel. Create another Shape Tween at keyframe 12 (see Figure 3).

Figure 3: Converting the letterforms into a Graphic Symbol for the Library.

Return to the main timeline and rename Layer 1 “Shape movie clip.” Place the “Shape tween” movie clip you just created on the layer, near the left side of the stage. Deselect all objects on the stage and from the Insert menu, create a new movie clip symbol named “Bouncing ball.” (see Figure 4).

Figure 4: The settings for the “Bouncing ball” movie clip symbol should look like this.

After you click OK and are in the timeline for the new symbol, create a circle with the Oval tool and fill it with a radial gradient to give the circle a 3D appearance. Select this new circle with the Arrow tool and from the Insert menu, choose the Convert to Symbol option and make it a Graphic symbol named “ball.” Refer to Figure 5 to view the Gradient settings in the Color Mixer panel.

Figure 5: Here’s how you should set the options for the Radial Gradient in the Color Mixer.

Place the new Ball symbol on the stage in frame 1 of the movie clip timeline. You now need to create a motion path for the bouncing ball to follow. In the timeline panel, click on the Add Motion Guide button. A motion guide layer (see Figure 6) will appear directly above Layer 1.

Figure 6: When you click the Add Motion Guide button, a motion guide layer appears.

Use the Pen tool to draw a path for the “ball” symbol to trace. Click and drag up and to the right, then release the mouse. Click again and drag down and to the right to create the first arc. Then take the Arrow tool and select the arc. Copy and Paste it into keyframe 1. Select the copy of the arc and place it end to end against the original. This will form the path that the ball will follow as it “bounces” across the stage. Refer to Figure 7 to get an idea of how the Motion Guide should appear.

Figure 7: Here’s how the Motion Guide should appear after you create the path.

Insert a keyframe at frame 24 on the Motion Guide layer. Insert keyframes at frames 12 and 24 of the ball layer. Position the ball at the starting point of the arcs at frame 1. Place it where the two arcs meet in the center at frame 12. Finally, place it at the right endpoint of the second arc at keyframe 24. Select keyframe 1 in the timeline and create a Motion tween using the Properties panel. Create another Motion Tween at keyframe 12. Press the Enter key to preview the animation.

Return to the main timeline. Create a new layer and name it “Bouncing ball movie clip.” Place your new movie clip on the new layer. You may have to experiment with the placement of the movie clip on the stage until you get it positioned properly. Use the Test Movie feature on the Control menu until you’re satisfied with the placement of the movie clip. Save your file.

Creating Animated Buttons
Now it’s time to create the animated buttons that you will use to control the visibility of the movie clips. Add another layer to the timeline and name it “Shape tween button.” Begin by creating capsule shapes with the rectangle tool, just as you did in the last tutorial. Double-click the Rectangle tool and in the dialog box that appears, enter a value of 20 for the corner radius and click OK (see Figure 8).

Figure 8: Use the Rectangle tool Option Dialog box to create a rectangle with rounded corners.

Select the new capsule shape with the Arrow tool, and then, from the Insert menu, convert it to a Graphic Symbol named “Button Shape.” Deselect all the items on the stage. Go back to the Insert menu and create a new Movie Symbol clip called “Button Over animation.” This new movie clip will function as the “Over” state for the buttons. After you click OK and Flash opens the Movie Symbol timeline, insert the “Button Shape” graphic from the Library and place keyframes at frames 12 and 24. Using the Properties panel, adjust the brightness of the “Button Shape” symbol by 60 percent at keyframe 12 then create Motion Tweens at keyframes 1 and 12 (see Figure 9).

Figure 9: Use the Properties panel to adjust the brightness of the button shape and to insert Motion Tweens on the timeline.

Select keyframe 24 in the timeline. Go to the Actions panel and click on the Actions index in the left subpanel to open the ActionScript directory. Then click on the Movie Control option to see the available script commands for keyframe 24. Double-click the “gotoAndPlay” command to assign it to the selected keyframe. The gotoAndPlay command tells the movie clip to play to the end and then loop back to the beginning, replaying continuously (see Figure 10). Press the Enter key to preview the animation.

Figure 10: Assigning the gotoAndPlay script to keyframe 24.

Return to the main timeline. From the Insert menu, create a new movie clip symbol called “Button Down animation.” This movie clip will function as the “Down” state for the buttons. Click OK to open the movie clip timeline. As before, insert the “Button Shape” graphic from the Library. Place a keyframe at frame 3. Using the Properties panel, adjust the brightness of the “Button Shape” symbol by minus sixty (-60) percent at keyframe 3 and create a Motion Tween at frame 1. Select keyframe 3 in the Timeline and go to the Actions panel. This time, you want to assign the “Stop” command to the keyframe. Note that the animation for the “Down” state is quick and runs only once. That’s because the user will have only a short time span to view an animation that occurs on a mouse down event. Save your file and return to the main timeline.

Delete the “Button Shape graphic symbol that’s on the stage of the Main timeline. Create a new layer and name it “Shape Tween button.” From the Insert menu, create a new button symbol and name it “Toggle Shape.” After you’re in the Button symbol timeline, rename Layer 1 to “Button.” Place the “Button shape” graphic symbol on the center of the stage by dragging it from the Library. Select the Magnifying Glass tool and zoom in on the button shape graphic. Place guides at the edges of the bounding box of the symbol. You will use these guides to ensure that the movie clips in consecutive frames line up with the graphic. Refer to the first Flash MX tutorial if you don’t remember how to create a guide (see Figure 11).

Figure 11: Drag guides from the Rulers to the bounding box of the graphic symbol to ensure that movie clips in consecutive frames line up properly with a graphic.

Add a keyframe in the Over frame of the Button timeline. Delete the “Button Shape” graphic symbol and drag the “Button Over animation” movie clip on to the stage from the Library, aligning it with the guides to ensure placement. Add a keyframe in the Down frame. Delete the “Button Over animation” movie clip and place the “Button Down animation” movie clip in the frame, being careful to align it to the guides. Finally, add a keyframe in the Hit frame, but leave the Movie clip in place, since the Hit state of a button is not visible.

Add another layer to the Button timeline and name it “Text.” Take the Text tool and in 18 point Bold Arial, type the word “Shape.” Use the Arrow tool to position the copy in the center of the button as best you can. Break Apart the type twice from the Modify menu, turning the type into letterforms, and return to the main timeline.

Drag the “Toggle Shape button” onto the stage from the Library, placing it in the lower left quadrant of the stage. Create a new layer and name it “Motion Tween button.” Instead of building another button, you’re going to take advantage of Flash’s Duplicate function to clone the button you just created. Then you’ll tweak the cloned button to create a Motion button. In the Library window, right-click on the “Toggle Shape” button symbol and from the pop-up menu, select Duplicate. In the dialog box that appears, rename the duplicate Symbol “Toggle Motion” (see Figure 12). The new button appears in the Library. Double-click the new “Toggle Motion” button in the Library to open its timeline.

Figure 12: Duplicating a button symbol can save you time and effort.

On the Text layer, select and delete the word “Shape,” and then use the Type tool to replace it with the word “Motion.” As before, use the Break Apart function to break the text apart twice, and then return to the main timeline. Drag the “Toggle Motion” button onto the stage in the lower right quadrant. Save your file.

Assigning ActionScript to the Buttons
The final step in creating this movie is to program the buttons onstage with ActionScript so that clicking on them causes the movie clips to disappear and reappear. Start by assigning names to the instances of the movie clips so that your ActionScript commands have an object name to refer to (see Figure 13). Select the Shape Tween movie clip on the left side of the stage. In the Properties panel name the instance “shape.” Then select the Motion Tween movie clip and name its instance “motion.”

Figure 13: You assign names to Instances of Symbols using the Properties panel.

Select the Toggle Shape button on the stage and go to the Actions Panel. In the Actions panel, open the “Actions” index at the top of the left subpanel, and then open the “Miscellaneous Actions” index and drag the “Evaluate” action to the blank Script subpanel. Adding the Evaluate action to your script code implements an event handler that looks like this:

   on (release) {      ;   }

The preceding code causes the button to execute a command after the user has released the mouse button while over the button. The next step is to type

   _root.shape._visible = ! 

in the Expression text field in the Actions panel. You may get a message having to do with a syntax error. Ignore it for now.

The line of code _root.shape._visible = ! breaks down as follows: _root. is the path of the Movie clip symbol as it relates to the parent movie. Shape._visible is the name of the movie clip and the property (visibility) that the script is controlling. The exclamation point (!) is a logical NOT operator. Enter _root.shape._visible again in the Expression text box after the exclamation point as well. The final line of command code:

   _root.shape._visible = !_root.shape._visible;

Tells Flash to toggle the visibility of the “shape” instance. If the “shape” instance is visible, make it invisible, and if it’s invisible, make it visible again. See Figure 14 for an example of how the final code should appear in the Actions panel.

Figure 14: Here’s how the visible/invisible toggle code for the Shape button should look.

Repeat this scripting process for the Motion Toggle button, but this time replace the word “shape” in the code with the word “motion.” Doing that tells Flash to issue a visible/invisible command to the “Motion” movie clip when a user clicks the Motion Toggle button.

Publish
To preview your movie as it will appear in a stand alone Flash file, select the Test Movie option from the Control menu. When you’re finished previewing the movie, simply close the window. To create a final Flash file and embed it in an HTML page click on the Arrow tool, go to the Properties panel, and then click on the button labeled “Flash Player 6.”

In the dialog box that appears, click the “Publish” button. Clicking the Publish button creates an HTML file with your animated movie embedded in it, located in the directory where you saved your .fla file. To see the completed movie, load the generated HTML file into your browser.

From this lesson, you can see how Flash MX’s simple scripting language can issue dynamic commands depending on the states of independent objects. This tutorial is the last to heavily feature art elements and animation, so you may want to practice creating more elaborate animations for buttons and movie clips. The rest of this series will focus on ActionScript and interaction among UI elements and external HTML coding.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

Recent Articles: