Flash: Motion Tween vs Shape Tween

6 02 2009

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.


  • 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.



3 responses

28 10 2009
Fay Sommer

Great post! I also have an animation class and I am stuggling with the motion vs. shape tween and this tutorial is the best thing I’ve seen so far (my husband is a software developer also but he does embedded systems so he does not know much about Flash) 😦

Since I am still a bit confused, but not totally in the dark anymore, could you help clarify two points? Why do you make a symbol for the shape tween in step 1, but then you indicate that you can only do a shape tween with an object not a symbol (am I missing something)? Then my instructor has us making symbols – graphics not movie clips, so I am not entirely clear on the graphics vs. movie clips thing and why you prefer to just do movie clips? Are graphics limiting in any way or does a movie clip just encompass everything that a graphic can do and more?

Any help here would be greatly appreciated.


19 04 2010

Quite funny that in the age of Flex you essentially write a Flash 3 tutorial. 😉
This simple way of animating is what made Flash popular back then.
Few notes:

-unless you really need a morphing effect avoid shape tweens, since it has to store the vector shape data for each frame, thus increases the swf’s filesize more than motion tweens

-@Fay Sommer
The short answer: If all you do is animating things on the timeline using graphics is fine. MovieClips come into play when you code, you can assign a MovieClip a name and then manipulate if from code.
Longer answer, graphics are actually merged with the main timeline when exporting, but MovieClips are like self-contained, independent timelines, you can nest them and make them control each other with gotoAndPlay(), stop(), etc. … Insanely powerful, allows non-coders to do amazing things, but frowned upon by “real coders”.

19 04 2010
Justin J. Moses


Thanks for the comment – some good insights in there.

As for the Flash 3 tutorial remark, it makes sense when you consider Flex apps still rely on Flash Pro to do much of the creative.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: