Flash: Motion Tween vs Shape Tween

So I was helping my girlfriend last night with a Flash assignment. You know – make a Flash TV remote and what not. (It’s a painful process, esp when you know you could do it in Flex in 5m).

I was going through the basics of animation when I came up to a wall. I’ve always struggling quantifying how to use the timeline and tweening.

It was then that I really realised that Motion tweens requires a Symbol to animate and Shape tweening requires vectors.

Seems a simple conclusion, but still.

So, I wanted a surefire way to teach her how do make the two different animations, regardless of Flash version so here goes.

Motion Tween

1. Make a new symbol (movie clip) in your library.
2. Insert a new keyframe in frame 1. (Right click frame 1 in the timeline).
3. Either drag something into this frame from the library, OR create a new object by using the toolbox and when done, select the frame, right click on the content and choose Convert to Symbol. (Make it a movie clip – see note #2 below). If you jumped to Step 4 without doing this, Flash would automatically convert the objects to a symbol for you.
4. Now, everything in Frame 1 is a sybmol. Make this frame a motion tween (right click frame in timeline).
5. Create insert a key frame further down the timeline at some point. Obviously the number of frame should be higher for the length of time the animation should take.
6. So now, in the frame you created, making a “keyframe” has copied an instance of your symbol. Now wherever you move this instance, the motion is automatically created.
7. if you want to transform either the start or the end symbol, goto the corresponding frame, select the object, right click and choose free-transform, then do whatever you want to the symbol and see the change.
8. if you want to change the colour channels of either the start or the end, click the start or end frame, click the symbol, in the properties window you should see the properties of the movie clip – if you see the properties of the frame instead, click the symbol again. Now you can modify the Color (sic) settings at your heart’s desire.
9. if you want easing of motion, then click on a frame within the motion tween somewhere and the properties window should show the frame properties and the tween. Here you can add a sound, easing, rotation, and even path orientation (that is another topic).
10. if you want to create another step in between the animation, select some frame within the tween, and either click and drag the symbol somewhere to move it, or simply insert a keyframe up in the timeline.

Shape Tween

1. Make a new symbol (movie clip) in your library.
   
2. Insert a new keyframe in frame 1. (Right click frame 1 in the timeline).
3. Now because it’s a shape tween, you MUST create some objects using the Toolbox. These could be shapes, or text or brush/pencil strokes.
4. When you’re happy, create a shape tween on this keyframe. (rightclick in the timeline)
5. Now insert a frame (not a keyframe) further down the timeline.
6. Notice the … in the frames? that’s because there’s nothing to tween to yet.
7. Now, if you want to morph to a completely new shape, you need to Insert a Blank Keyframe in the last frame (or wherever you want it). Start drawing whatever it is that you want, using whichever colours, and transparency needed.
8. If you want to morph the existing shape, then Insert a Keyframe, and start playing with the shape – free transforming it, selecting parts of it and changing the colour, whathaveyou.
9. If you want to change the easing of the tween or the Blending, click on any frame within the tween in the timeline, see the properties window has the frame selected, and modify the tween options.

NOTES:

• Use the Library.  If you didn’t know this then learn it – everything you make should exist within your library and be dragged into the stage or other items so that your library is a collection of your world objects.
• All new symbols should either be Movie Clip or Button. A graphic is  can be animated in the future if you decide to go down that path. A button is useful for obvious reasons, and you can even import a movie clip onto the button states.
• If you accidentally create a motion tween on an object you want to shape tween, you will find you can’t make it a shape tween again. This is because Flash converts objects to symbols automatically when a motion tween is applied. You’ll need to either go back (Undo) to before the symbol was created or recreate your object.