Click to Show Lecture Notes

ANIMATION: Shape Tweens to Morph

The Shape tween is one of the least efficient features of Flash since the file size is larger than other animations, but the effect is nice. This is the only way to get the "Morph" effect in Flash, so bear with me for this chapter.

NEW TERM: Morphing is a kind of animation that naturally changes one shape to another.

Shape tweens are easy to create so don't get carried away, remember they are larger than other animations. Basically, all you do is draw a shape or a few shapes in two keyframes and set the tweening in the first keyframe to Shape.

Before we start, remember one of Flash's rules for Shape Tweens: no groups and no symbols. That's it! Remember this and Shape Tweens will be easy.

Click for Practice Session on Simple Shape Tweens... Make a Simple Shape Tween

TASK: MAKE A SIMPLE SHAPE TWEEN

Just follow these simple steps to get started.

  1. In a new file, draw a circle onstage. (Don't group anything and don't convert anything to a symbol.)


  2. Insert a keyframe in frame 30, press (F6) in frame 30.


  3. Insert a keyframe in frame 15, press (F6) in frame 15.


  4. Use the Arrow tool to first deselect the circle (click off the circle), and then bring the pointer close to the edge until the cursor changes to a curved-tail pointer. Click and drag the center of the circle to reshape it, see below.

  5. Distorting the Circle
  6. Now we just need to set Shape Tweening for the two spans. Click frame 1, hold Shift, and then click frame 15. From the Properties panel select Shape from the Tween drop-down list.


  7. Test the movie, (Ctrl + Enter).


  8. Hide Practice Session

It's rather important to know when a motion tween is better than a shape tween, and vice-versa. If you are keeping it simple and wish to tween colors or transparency of the same shape, motion tween will be the best for you. However, if you wish to tween to entirely different shapes, well that will have to be a shape tween. Let's say going from a circle to a square, that's a morph and shape is the only thing that will let you do it.

Take a look at the following shape tween to get a better idea.

Place Image Name Here

Hide the Image

There will be times when what you expected to see will be a bit of a disappointment for you. You might have to give Flash a bit of help to determine just what part of the image morphs into another part. This will become more clear once you try the next practice session.

What I'm talking about is using Shape Hints for Flash. This is not hard to do, and it will certainly help on those animations that came out a disaster. Basically, there are points on an image that can be mapped to another image, this will help Flash make the morph look quite natural. Do the next practice session now to learn more.

Click for Practice Session Shape Hints... Use Shape Hints for Animation

TASK: USING SHAPE HINTS

Just follow these simple steps to get started.

  1. In a new file, draw a perfect square, (hold the Shift while you drag).


  2. In frame 25 of the Timeline, insert a keyframe (F6).


  3. In frame 25 change the square shape to a triangle, the triangle should be as similar in size as the square, try the tip next to do that.
  4. In frame 25, draw a vertical line that doesn't touch the square. Select the Arrow tool (make sure Snap to Objects is turned on), click once on the line to select it, and click and hold in the center of the line. (Make sure you have the solid circle, indicating that you've grabbed the center—if not, try grabbing the line again.) now drag the line so it snaps in the center of the horizontal top of the square. (Review the image below.)

  5. Click off the line and grab the top-left corner of your square. Drag it until it snaps to this bisecting line. Do the same for the top-right corner of the square.

  6. Reshaping the SquareReshaped to a triangle
  7. Select and delete the excess portions of the vertical line.


  8. Select the first keyframe and use the Properties panel to set Tween to Shape. Scrub and you'll see the results are probably not what you expected. Now's the chance to use Shape Hints.


  9. Place the red current frame marker in frame 1 and select Modify, Shape, Add Shape Hint (or press Ctrl +Shift + H).


  10. Notice a little red circle with the letter a (a Shape Hint). Temporarily move the red current frame marker to frame 25 and notice there's also an a Shape Hint in this frame too.


  11. Make sure you're back in frame 1 and that Snap is turned on (select View, Snap to Objects). Use the Arrow tool and drag the Shape Hint so it snaps to the top-left corner of your square.

  12. Moving the Shape hint to the upper left corner. Setting the Shape Hint to the triangle. All the hints are now applied.
  13. Go to frame 25 and position Shape Hint a so that it snaps to the middle of the left side of the triangle. Notice that the Shape Hints turns green, indicating that it's been mapped. (When you return to frame 1, the Shape Hint is colored yellow to indicate that it's been mapped.)


  14. Scrub to see the results so far—if it looks good, you don't need to add any more Shape Hints.
  15. (Not this time, you've got more to do).

  16. In frame 1, add another Shape Hint (Ctrl+Shift+H), which is automatically given the name b, and position it in the top-right corner of the square.


  17. In frame 25, map the second Shape Hint b to snap to the middle of the right side of the triangle.


  18. At this point the results should be much better than before you added any hints. Test your movie and save if you wish.
  19.  



    Hide Practice Session

Page Updated on January 28, 2003