advertisement
Premier Club Log In/Registration
  Include Code  Search Tips
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   SKILLBUILDING  |   TIP BANK  |   SOURCEBANK  |   FORUMS  |   NEWSLETTERS
Browse DevX
Download the code for this article
Sample Animation Colors
This is the second of a series of Flash MX tutorials. Were you able to work through this tutorial by following the example? Did you find it helpful? What other topics do you think merit a Flash tutorial? Let us know in the web.design discussion group.
Partners & Affiliates
advertisement
advertisement
advertisement
Average Rating: 3.7/5 | Rate this item | 79 users have rated this item.
Learning to Animate in Macromedia Flash MX (cont'd)
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.)
advertisement


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.
Previous Page: Creating Keyframes and the Animated Elements Next Page: Create a Motion Tween Animation


Page 1: IntroductionPage 4: Create a Shape Tween Animation
Page 2: Organizing Layers and Setting TypePage 5: Create a Motion Tween Animation
Page 3: Creating Keyframes and the Animated Elements 
Please rate this item (5=best)
 1  2  3  4  5
advertisement
Advertising Info  |   Member Services  |   Permissions  |   Help  |   Site Map  |   Network Map  |   About


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers