In this movie we will look at frame by frame animation, shape tweening and motion tweening.

Frame by Frame Animation

Draw a circle towards the left hand side of the stage, without fill

From the menus choose Insert > Keyframe (shortcut F6)

Frame 2 now has an exact copy of frame 1

Erase part of the circle with the eraser

 

Make a new keyframe

Erase more of the circle with the eraser.

Continue inserting keyframes and erasing the circle until there is nothing to see in frame 10.

We started with a whole circle and ended up with no circle. We want our animation to go in the opposite order.

Select the whole layer by clicking on the layer icon

From the menus choose Modify > Frames > Reverse

Our animation now starts with no ball and ends up with a whole ball

Motion Tweening

In frame 10 fill the ball with a gradient

Use the bucket fill tool

Choose the fill colour as gradient (see left)

 

Next select the whole object (the outline and the fill) by double clicking

Note: You can also use the select tool and draw a box around it OR use shift while you click on the parts

We are now going to convert it to a symbol

From the menus, choose Insert > Convert to symbol

Name it Ball and make sure it is set to graphic

 
 Why Convert it to a Symbol?

Symbols help keep file sizes small (and make your movie run more efficiently).  A symbol is a master recipe. Imagine you are making muffins.  You might have recipes for plain muffins, chocolate muffins and banana muffins.  The basic recipe is just the same, but you add cocoa and choc bits for chocolate muffins and banana for banana muffins.  It is much more efficient to write out one recipe for basic muffins and then add variations at the bottom rather than writing out the recipe in full for each sort of muffin. 

Symbols in Flash are similar.  The main recipe is stored in the library and each instance on the stage just knows which basic recipe to use and what to change for it.

Next click on frame 30 and insert a keyframe (F6)

Remember a keyframe is a point of change in your animation

Move the picture of the ball from the left side of the stage to the right side of the stage

 Next select the timeline between the two keyframes by double clicking

 

Right click on your selected timeline and select Create Motion Tween.

An arrow appears in the timeline and it turns blue

Click on frame 1 and press Enter to play your movie.

 Move the read head to 20 (the little red box above the timeline)

Drag the ball to the bottom centre of the stage

Click on frame 1 and press Enter to play your movie

Shape Tweening

 
Shape tweening is similar to motion tweening, but you use it to change the shape of an image over time.  Unlike in motion tweening, you must use ungrouped graphics to tween shapes.  Flash cannot shape tween a group or symbol.  

Click on frame 31 and make a new keyframe

We can’t morph a symbol so we have to break it apart

From the menus choose Modify > Break Apart

Click on frame 40 and make a new keyframe

Change the ball into a heart (See First Movie if you can't remember how)

Double Click on the timeline between the keyframes

In the Properties window, set tweening to shape

 An arrow appears in the timeline and it turns green

Play your completed movie

 
For a motion tween
  • Put your object on a layer by itself
  • Convert it to a symbol
  • Insert a new keyframe further along the timeline.
  • Move your object to its new position
  • Create the tween

For a shape tween

  • Put your object on a layer by itself
  • Break it apart
  • Insert a new keyframe further along the timeline
  • Change your object's shape
  • Create the tween

 
You can use the free transform tool to make your motion tweens more elaborate.

This video will show you how.

Make a movie of your own that incorporates frame by frame animation, motion tweening and shape tweening.

 

 

 

This page has been adapted for Flash MX by Margaret Meijers from a tutorial written for Flash 5 by Andrea Munro, Sacred Heart College, New Town.