Shape Tweening
This lesson will teach you how to create a "shape tween" by taking two shapes and using them to morph from one shape to another and back again. Shape tweening is a term used in Macromedia Flash to refer to the transition from one shape to another.
Draw a shape
![Picture](/uploads/1/3/6/6/13661277/6649690.png?77)
Before we can create our tween we are going to need the shapes that will be used to produce the tween effect. First, create a simple rectangle like the one here, in frame 1 of your timeline.
Add a keyframes
![Picture](/uploads/1/3/6/6/13661277/1525805.png)
Inserting KeyFrames
Select frame 25 in the timeline window and insert a KeyFrame. Select frame 50 and insert another KeyFrame. Notice that there is a shaded area from frame 1 to 50. This is your "active" area and the animation is going to occur within this area.
Select frame 25 in the timeline window and insert a KeyFrame. Select frame 50 and insert another KeyFrame. Notice that there is a shaded area from frame 1 to 50. This is your "active" area and the animation is going to occur within this area.
Add another shape
![Picture](/uploads/1/3/6/6/13661277/9527402.png?73)
We want our shape to morph from one shape to another. For contrast let's have our red box morph into a blue circle.
Select the keyframe on frame 25, and delete the red box, Now you have a BLANK KEYFRAME. Using the Oval Tool in frame 25, hold shift, left-click and drag to create a large blue circle. Your stage should now look like this for frame 25.
Select the keyframe on frame 25, and delete the red box, Now you have a BLANK KEYFRAME. Using the Oval Tool in frame 25, hold shift, left-click and drag to create a large blue circle. Your stage should now look like this for frame 25.
Insert the shape tweens
![Picture](/uploads/1/3/6/6/13661277/1347659173.jpg)
In the timeline window, click anywhere between the keyframes at frame 1 and 25. On the properties Tab (at the bottom the screen) choose SHAPE from the tween menu
Do the same thing to add a shape tween between frames 25 and 50
Examine your timeline
![Picture](/uploads/1/3/6/6/13661277/1347659338.jpg)
If you have a dotted line, rather than a solid line in your Timeline window, be sure that you followed the instructions up to this point exactly. It should look like this.(green frames with black arrows).
Hit CTRL -ENTER keys to test out your first shape tween. Save your file.
Hit CTRL -ENTER keys to test out your first shape tween. Save your file.
Create something more advanced
![Picture](https://www.editmysite.com/editor/images/na.png)
Using this animation technique, demonstrate your understanding by creating a more impressive shape tween. Save it in your folder.