Animation - Tweening

This tutorial is designed for people who have little or NO Experience of using Flash. The aim of the tutorial is to:

Show you how to create a simple animation with a technique called Tweening.

New: See Flash Demo Movie of how to build this Flash file

Step One: Setting up the Document

1. Go to: File > New > General Tab > Flash Document > OK
2. We are now ready to customise the document. Go to: Modify > Document.
3. Type in the dimensions that you want for your movie. The one above is: 200 x 130 px
4. Select a background colour by clicking on the coloured swatch.
5. Click: OK
6. Go to: File > Save

Step Two: Creating a symbol

In Flash whenever you use an object more than once you create a symbol. This saves on download time as the symbol downloads only once. Even though you may use it many times the original symbol is simply repeated as many times as need be without repetitive downloads. In Flash when you animate with a technique called tweening you must use a symbol. Tweened animation only use symbols.

1. If the Edit Bar is not open, open it: Window > ToolBars > Edit Bar
2. Go to: Insert > New Symbol
3. Give your symbol a name: Bounce Grafx
4. For behavior select: Graphic
5. Click: OK

   Note: This takes you to a new work area to create your symbol. This is not the main stage.

   
   

   The Edit Bar enables you to see that you are working in a symbol called: Bounce Grafx.
   
   
6. Create your new symbol in this work area: You can type a word or draw something simple. As long as you have something to animate. I used the Text tool to type the word: Bounce
7. Once you have finished typing (or drawing) go back to the: Selection tool
8. Return to the main stage by clicking on the Scene 1 button in the Edit Bar:

   Note: Scene 1 is the main stage or main work area.

Step Three: Placing your symbol on the main stage

1. The main stage should be empty. Don't panic you haven't lost your symbol. It should be in the library. Click on: Window > Library
2. Drag your symbol onto the main stage.

Step Four: Animating your symbol

1. Go to frame ten in the Timeline and right click. Select: Insert Keyframe
   This copy and pastes whatever is in frame 1 into frame 10.
   
2. Use the Selection tool to drag the symbol (in frame 10) to a new position on the main stage. This will not move the symbol in frame 1.
   
3. In the Timeline right click (Mac: Ctrl click) the Keyframe (black dot) in frame 1 and select: Create Motion Tween

   Note: In the TimeLine you should now see an arrow between the two keyframes. This will have a mauve background colour.

   

   How a Motion Tween should look in the timeline - An arrow with mauve background.
   
   
   

   There is no Tween here so there is no arrow or mauve background.
   
   
   

   A broken Tween has a dotted line instead of an arrow.

   Note: A Motion Tween has the same symbol in each end of the Tween or in each Keyframe. The most common reason for a broken Tween is that there is the symbol plus an addition object in one of the Keyframes. If you need a button or additional text or drawings these should be placed in a different Layer to the Tween. To create a new Layer click on the Insert Layer button:

   Remember: Tweens cannot be mixed with other objects.

Step Five: Test your animation

1. If the red Play Head is not in frame 1, Click on frame 1 to place it back at the beginning of the movie.
2. Press Enter on the keyboard to test your animation.

Step Six: Extending your tween

1. Right click on frame 20 and choose: Insert Keyframe
2. Drag the the symbol in frame 20 to a new position.
3. Right click in frame 10 and select: Create Motion Tween

Continue to repeat this every time you want the symbol in a new position.

Extending or reducing the Tween

To slow the animation down go to the Timeline and click in-between the any two Keyframes and press F5 on your keyboard. This will add frames to your tween and the more frames there are the slower the movie will play.

Do the same but use Shift F5 to delete frames in the Tween, which speeds the animation up.

Free Transformation Tool

Try changing the size of the symbol with the Free Transformation Tool. To do this click on your symbols with the Free Transformation tool and drag one of the little square handles. You can also rotate and shear a symbol with this tool.

Transform Panel

You can change how a symbol looks in the Transform Panel. Try and change the width, height, rotation and skew using this panel. The change will be incorporated in the animated Motion Tween.

1. Go to: Window > Design Panels > Transform
2. Select the symbol on stage with the Selection tool:
3. Change some of the settings in the Transform Panel
   
   

   The Transform Panel
   
   
4. Move the Play Head back to: Frame 1
5. Test your movie by pressing: Enter

Properties

The Property Inspector also enable you to change how your symbol looks. You can change: Width, height and X Y axis (position on the stage). You can also change the colour or transparency of your symbol.

The Property Panel.

To change the colour or transparency of a symbol:

1. Go to: Window > Properties
2. Select the symbol on stage with the Selection tool:
3. Select the drop down arrow next to the word: Color

   

4. Select: Either:
   * Brightness: To make a symbol dull or bright.
   * Tint: This will effect the colour of the symbol.
   * Alpha: This will effect the transparency of the symbol.
   * Advanced: You can set both Tint and Alpha at the same time.

Remember to keep testing your work: Control > Test Movie