Shape Tweening is often referred to as “transforming” when people describe it. It is the process of having a shape transform into a different shape. You place one shape on the first key frame and a different shape on another key frame and Flash can fill in the artwork of the transformation for you.
What is important here is the word shape. Shapes are vector-based objects that have been created using the drawing tools in Flash. Bitmaps, grouped objects, and symbols can not be shape tweened. You can shape tween text but this requires an extra step.
Start by creating a new Flash file and in the property inspector, change the frame rate to 20fps, leave the size as 550 x 400 and the canvas colour white. Save this file as morph.fla in yourDrive or DropBox folder folder.
To Create a Shape Tween
1. Choose the Rectangle Tool and draw a rectangle on the first keyframe of your timeline
Draw the shape as seen below:
3. Choose Frame 30 on the same layer and create a keyframe
Note – Flash automatically assumes that you want to keep the rectangle on this new keyframe. You can delete the rectangle on this new keyframe and the first rectangle will stay.
4. Delete the Rectangle on keyframe 30.
5. Choose the Oval Tool and draw an oval on keyframe 30
Draw the shape as seen below:
4. Select any frame between the two keyframes.
5. Right click on the timeline and choose Create Shape Tween
You will notice that the frames between the two keyframes are now shaded green and have an arrow across them. This is how we know that your shape tween has been successful.
5. Press the <Enter> key to watch the animation.
It should play as seen below:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/morph0.swf” width=”400″ height=”300″ targetclass=”flashmovie”]
[/kml_flashembed]
Not only does flash transform shape and color, but if you draw your oval on the opposite side of the stage, the shape will move from one location to another as it transforms.
This is fine if we are using relatively simple shapes, but how does Flash react when we are using more complex shapes?
6. Right-click on the shape tween in the time line and choose “Remove Tween”
7. Delete the oval on frame 30
8. Use the pen tool to draw the shape seen below.
9. Use the paint bucket tool to fill the the shape with yellow.
10. Right-click on the timeline between the two shapes to add a shape tween then test your movie.
You’ll notice that Flash guesses at how you want the transformation to take place. You do not, however, need to be satisfied with this. There is a way to get exactly what you want.
Using Shape Hints
Shape hints are a feature in flash that give you some control over how one shape will transform into another. It is used primarily to fix a shape tween that doesn’t look good.
To Insert Shape Hints
1. Select key frame 1
2. Choose Modify > Shape > Add Shape Hint or press CMD + Shift + H (shortcut key)
A red oval labelled with the letter “a” will appear as seen below:
4. Click on the Shape Hint and drag it to the upper left hand corner of the oval.
5. Select the last keyframe (with the custom shape on it)
6. Drag the keyframe to the upper left hand corner of the shape.
You will notice below that the shape hint turns green. This means that the shape hints on the two keyframes are now connected.
The animation now appears as seen below:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/morph2.swf” width=”400″ height=”300″ targetclass=”flashmovie”]
[/kml_flashembed]
Normally adding one or two shape hints may be enough to direct the tranformation, but in this case, the irregular shape needs more information to transform the way we want it to.
7. Repeat these steps to make the shape hints seen below.
This will make the transformation more direct.
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/morph3.swf” width=”400″ height=”300″ targetclass=”flashmovie”]
[/kml_flashembed]
****Note**** You can intentionally misalign shape hints to create warped transformation effects. Simple by placing the “b” shape hint in the opposite corner, the Oval with Flip as it transforms into the X.
If the shape hints are set as seen above you will get the following effect:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/morph4.swf” width=”400″ height=”300″ targetclass=”flashmovie”]
[/kml_flashembed]
Keep in mind that if you want to tween multiple shapes at the same time, you should use a new layer for each transformation.
Practice Assignment
Start by creating a new Flash file and in the property inspector, change the frame rate to 20fps, leave the size as 550 x 400 and the canvas colour white. Save this file as puzzle.fla in your DropBox or Drive folder.
Create a self-building puzzle as seen below.
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/images/multipleshapetween.swf” width=”400″ height=”300″ targetclass=”flashmovie”]
[/kml_flashembed]
– Each shape should start as a square and then transform into a puzzle piece.
– You can have each puzzle piece tween at the same time (easy) or one after another (more complicated.
– The sample is not to be copied. Instead, I want you to experiment with your own shapes, colours, etc.
– Don’t forget to use shape hints to help direct the transformations!
– Finally, export the finished product as an .swf