Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Learning to Animate in Macromedia Flash MX  : Page 4

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.


advertisement
Create a Shape Tween Animation
Start by applying a Shape Tween to the letter "A." Select frame 1 in the "Shape Animation" layer in the Timeline panel. In the Properties panel, select the "Shape" option from the Tween pull-down menu (see Figure 9.)
Figure 9: Select the Shape Tween from the Properties panel
Repeat these steps for keyframes 24 and 36 in the "Shape Animation" layer. When you are finished, note that the timeline for the "Shape Animation" layer has turned light green, with arrows bridging the gaps from keyframe to keyframe. The light green color and arrows indicate that a Shape Tween occurs during those frames. Your Timeline panel should now look like Figure 10.

Figure 10: Here's the Timeline panel after setting a Shape Tween for the Shape Animation layer.
Select the first frame of the timeline and press the "Enter" key. The "A" morphs into other shapes and back into an "A", but the morph is a little sloppy. You can correct this with Shape Hints. Shape Hints are specific points that Flash uses to control Shape Tweens. Select the first frame of the timeline in the "Shape Animation" layer, and from the Modify menu scroll down to Shape and choose Add Shape Hint. A small dot with a lower case "a" will appear on the movie. Click on the dot and drag it into the position shown in Figure 11. Add two more Shape Hints, (they will be labeled "b" and "c") and place them on the letter "A" as in Figure 11. (You may need to zoom in using the View menu to place the Shape Hints accurately.)
Figure 11: Keyframe 1 should look like this after you place the Shape Hints for the tween animation.
Next, select keyframe 12 on the "Shape Animation" layer in the timeline. Flash automatically places Shape Hints in that keyframe for you. The Shape Hints may all be on top of one another though, making them a little difficult to see. These Shape Hints serve as "ending" points for the Shape Hints in keyframe 1. Click and drag all three Shape Hints into place as illustrated in Figure 12. Press the "Enter" key to see the new, smoother shape morph between the letter "A" and the circle.

Figure 12: Keyframe 12 should look like this after you place the Shape Hints for the tween animation.
Select keyframe 24 on the "Shape Animation" layer in the timeline. Set four Shape Hints at each corner of the square and place their corresponding end points in keyframe 36 as shown in Figure 13. Press the "Enter" key to see how the square takes on the shape of the "A" more easily.
Figure 13: Here's how keyframes 24 and 36 should look with the Shape Hints in place.


Comment and Contribute

 

 

 

 

 


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

 

 

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