Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Activate Your Flash Animations with ActionScript

Not all animations should run automatically and continuously. ActionScript gives you the ability to provide users with control over animations and other Flash actions. In this fifth Flash MX tutorial you'll learn how to create complex buttons that use ActionScript commands to cause movie clip objects to disappear and reappear.

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.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date