Lab 7 : Shape Tween

shape tween in basically to morph one shape to another, for example we can draw a oval shape on stage and morph it to a star on stage. Now lets draw a oval shape on stage, by selecting the oval tool, draw a oval shape on stage by choosing a fill color and do not use a stroke color. When you want to morph two different shapes on stage, make sure that both the shapes are on the center of the stage, you can do that by selecting the shape, click on the windows tool bar and click on Align, you can select the horizontal and vertical align so that the shapes are centered on stage, now go to frame 12 and press F7 to create a blank key frame, now by selecting the polystar tool, select the star with lets say 8 points and draw a shape on the centre of stage, you can repeat the align tool bar to make sure that the star drawn on stage on the twelfth key frame is centered. Now click in-between the two key frames and select the shape tween, now press Ctrl+enter to test your movie, you will notice that the oval shape slowly starts converting into a star shape.

How to create a shape tween in flash CS4.

Shape tween in flash is basically a way to morph one shape into another shape, for example we will take an oval tool and draw an oval shape on stage and morph it to the shape of a star.

We will start in frame 1 and grab the oval tool

and draw a circle in the center of the stage like this one below.

Make sure it is snapped right in center of the stage, because if you want to morph it from one shape to another shape, we do not want to be moving around much while we are doing that. So go to your align panel (Ctrl+k) on the right and choose the horizontal and vertical center tool and it will make sure that it is aligned to the center of stage like this one below

So, now that you have centered it to the stage, so when you create the next shape you can do the same alignment so that it centers to stage. So let us say that we want it to take one second ie:12 keyframes. So go to the 12th keyframe and hit F7 to add a blank keyframe there. The reason you hit F7 is because you do not want the orange circle anymore. Let us draw a star in frame12, so choose the polystar tool

and to your right under the tool settings click on options and change the tool settings there to star and make the number of sides to 10 and leave the star point size to 0.50, now press OK.

Now draw a star on stage, and center it on stage by using the align horizontal and vertical alignment as discussed above, so that it will be in the same spot as the circle is in on frame1.

So we have drawn our beginning and ending keyframes, so we know how it is going to start up and how it is going to end up, now we need to create a shape tween. So click anywhere inbetween 1st and 12th keyframes and right click on your mouse and select the Create Shape Tween.

Now scrub across your time line to see how it works. You will notice that your circle morphing into a shape of a star. And that is how you create a shape tween in flash cs4.
Let us do something a little more difficult, like morphing one letter into another, so open a new document and start fresh.




------


Let us morph letter “B” to letter “W”
So select your font, I have chosen font Ariel, Size =200 px and color Black as shown below.

Choosing the text tool write letter “B” on stage on frame1 like this one below.

Now break it down to a raw shape using CTRL+B, now that you have a raw shape on stage, you can morph it either on the center of stage or to any part of the stage, in this case let us morph it, to the left of our screen, so let us pull down some rulers and mark the exact place where we want it to morph, so go to View on the main menu, and select rulers, click on the rulers and drag it to the stage, you will see a fluorescent blue line you can make your own markings and you can have as many ruler guides as you want on stage.

you will find a scale on the left and top of your stage, just click on the scale and drag it down and right to get the lines on stage like this one below.

Now go to frame 12, and click on F7 to create a blank keyframe, now chose the text tool and write “W” using the same font, size and color. You will have “W” on stage in frame12. now select any keyframe between 1 and 12 and right click on your mouse and select the select the shape tween, now as you scrub across the timeline you will see the shape of “B” changing into “W” and you may not like the way you are animating, you can actually morph it exactly the way, you intend to.
For that you have to bring in the shape hint on to the letters, you can do so by clicking on the Modify menu on the main menu, select shape and click on the Add Shape Hint, or the shortform is Ctrl+Shift+H

Go to frame1 and press Ctrl+Shift+H, you will find a red button, now click on it and drag it to the top left of the letter “B”, now go to frame12 you will find the same red button, click on it and drag it to the top left of the letter “W” , as you do this you will find that the red button in frame12 turns green, that means Flash CS4 is recognizing the shape hint you intend to do, you can have as many shape hints as you want, ideally you would like the top left, top right, bottom left, bottom right and the center, to have a smooth animation from “B” to “W” after you are finished scrub the timeline and see the effect, it is very much the way you intended to be.
That is it, you now know how to do shape tween in Flash CS4.