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


Learning to Animate in Macromedia Flash MX  : Page 3

Lesson two of this Flash Tutorial Series shows you how to create smooth and detailed Flash movies superior to almost any animated GIF file. Learn to create lightweight and dynamic animations using Flash MX.

Creating Keyframes and the Animated Elements
Now you are going to create the objects you'll animate and mark the timing of the animation by placing keyframes in the timeline. Begin by selecting the letter "A" and cutting it to the clipboard (Ctrl+X.) Select the layer labeled "Shape Animation," and then choose Paste in Place from the Edit menu. Paste in Place is a Clipboard function exclusive to Flash that lets you drop an item in the exact position that you cut or copied it from. Placing the letter "A" on a separate layer lets you create the "morphing" animation. Select the "Motion Animation" layer and use the Oval tool to create a small, (about 5-pixel-diameter) circle with a solid color fill and no stroke. Since you'll animate this circle with a motion-based animation, you'll need to convert it to a graphic symbol in the same manner as you converted the "Motion Tween" text. Select the circle with the Arrow tool and from the Insert menu select Convert to Symbol. In the dialog box that appears, name the Symbol Sphere symbol and click the Radio button labeled "Graphic" under the Behavior option. Click OK.

Look at your Timeline panel. It should resemble Figure 5, with a solid black dot inside the first frame next to each layer name. The dots represent an object or objects present in each layer. You will now add Keyframes to the timeline, which will allow you to animate your movie

Figure 5: The Timeline panel, ready for animation scripting.
When you look at the Timeline panel, you are looking at a snapshot of time. The frame rate for this movie is 12 frames per second; therefore, Flash will play 12 frames every second. The numbers at the top of the Timeline panel mark frames in the movie. The 12th frame equals one second of elapsed time. The 24th frame represents two seconds of elapsed time, and so on.

This movie will be only three seconds long; but major image changes will occur during each second. These changes are delimited by Keyframes. A Keyframe is a frame that contains a milestone change in a graphic around which the rest of the animation will be built. Follow the next steps closely to see how to build a Flash animation around keyframes. In the Timeline panel, position your cursor in the top layer anywhere in the 12th frame, and then click and drag your mouse from the top layer all the way to the bottom layer and release the mouse button. All four layers should have the 12th frame highlighted, as in Figure 6.

Figure 6: Click and drag across all four layers to select the 12th frame.
From the Insert menu, select the Keyframe option. Doing that causes frame 12 to become a keyframe in all the layers. You can differentiate keyframes from non-keyframes visually; notice that the IDE places black dots in frame 12 on all four layers and fills the in-between frames with a gray color. Repeat the click and drag selection process across all four layers at frames 24 and 36, inserting keyframes at those intervals as well. When you are finished, your Timeline panel should look identical to Figure 7.
Figure 7: The Timeline panel, with all keyframes in place.
Now you will put the shapes in place for the letter "A" to morph into during the Shape Tween. In the Timeline panel, click on keyframe 12 in the "Shape Animation" layer. Refer to Figure 8 to ensure that you select the proper keyframe in the correct layer.

Figure 8: Here's how the Timeline looks when you select keyframe 12 in the "Shape Animation" layer.
Author Note: When you select a keyframe within a layer, Flash automatically selects all the objects on that layer at that keyframe.

Delete the "A" and replace it with a circle with a solid fill and no stroke using the Oval tool. Return to the Timeline panel and click on keyframe 24 in the "Shape Animation" layer. Delete the "A" and replace it with a square with a solid fill and no stroke using the Rectangle tool. Tween Animations
You are now ready to animate the movie. Flash has two ways of generating automatic animations: Shape Tweening and Motion Tweening. The term "Tweening" refers to the process of generating the visual content for the frames that exist "in-between" keyframes. Shape Tweening basically involves morphing one shape into another. Motion Tweening is much more common and consists of moving an art object through space or different visual states.

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