Animation - Motion Tweening	Home • Members • Tutorials • Forum • iSnapChat • Contact Us

Animation - Motion Tweening

Free Flash Tutorial

The aim of the tutorial is to show people who are new to Flash how to create a simple animation using technique called Tweening. Tweening enables you to move objects, change their colour, size and transparency. In this tutorial I will show you how move text around. This tutorial is designed to teach the beginner fundamental processes used in creating Flash Movies, in particular an introduction to Motion Tweening, the Timeline and Symbols.

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

My Example: Download the Flash file  Beg 002a

Example of a Flash Movie with a Tweened Animation.

More Examples: To view additional examples of the type of animation that you will learn to do in this tutorial: Motion Tween Animations

Before I dive in I would like to say that even though this tutorial is quite long the tutorial has two sections:

• How to make a Motion Tween Animation (Steps 1 to 6)
• Optional Extras (Steps 7, to 13)

It is not essential to cover every option and you may want to jump to a particular option. To help you select the options I have placed the following Quick Links:

Quick Links: 01. Start the Tutorial

Quick Links: 07. Changing the Animation Speed
Quick Links: 08. Ticker Tape - On and Off Stage Animation
Quick Links: 09. Changing the Symbols Properties: Free Transform Tool
Quick Links: 10. Changing the Symbols Properties: Transform Panel
Quick Links: 11. Changing the Symbols Colour
Quick Links: 12. Easing
Quick Links: 13. Rotation

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

Examples of each Option: Sample Movies

Step One: Setting up the Document

1. Go to: File > New > General Tab > Flash Document > OK (Ctrl N)
2. We are now ready to customise the document. Go to: Modify > Document (Ctrl J)
3. Type in the dimensions that you want for your Movie. The one above is: 550 x 400 px
4. Select a: Background Color


Setting up the Document Properties.

5. Click: OK
   
   
6. Go to: File > Save

   Note: It is always best to save a Flash file at the beginning of any new project. My experience is that Flash is more stable when working with a saved file.

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. Motion Tweened animation only use Symbols.

1. If the Edit Bar is not open, open it: Window > ToolBars > Edit Bar

Note: You will need the Edit but shortly as it helps you see what location you are working in. On the Main Stage or inside a Symbol:


The Edit Bar.

2. Go to: Insert > New Symbol
3. Give your Symbol a name: Bounce Grafx
4. For behavior select: Graphic


Create New Symbol Dialog Box.

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 will have changed colour and the new Symbol name will be visible:


The Edit Bar enables you to see that you are working in a Symbol called: Bounce Grafx.

6. Select the Text Tool:
7. Click on the Stage and Type: Bounce

Note: I typed the word Bounce but you could type something else or draw something. As long as you have something to animate. I used the Text tool to type the word: Bounce


My Text.

8. Once you have finished typing (or drawing) go back to the Selection tool:
9. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
10. Select any Font, text styles or colour that you might want: Font Styles
11. It is usually better to use: Static Text


My text properties.

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

When you return to the Main Stage, your work area should be empty. Don't panic you haven't lost your Symbol. It will be in the Library.

1. If the Library is closed, open it: Window > Library

Note: You should be able to see your new Symbol in the Library. If you can't see it click on the Symbol's name:


My Symbol in the Library.

2. Drag your Symbol onto the: Main Stage

   You will see that Frame 1 in the Timeline will now have a solid dot in it representing that there is an object in that Keyframe:

   
   Keyframe with a Symbol.

3. Drag the Symbol to the left side of the Main Stage: Move left

   
   The Symbol is dragged to the left of the Main Stage.

Step Four: Animating your Symbol

1. Right click (Mac Ctrl click) in Frame 10 in the Timeline and select: Insert Keyframe

Note: This copies and pastes whatever is in Frame 1 into Frame 10:


New Keyframe (the solid dot) in Frame 10.

2. Select the Instance of your Symbol that is on the Main Stage: Bounce Grafx
   
3. Drag the Symbol (in Frame 10) to a new position: Move Right


The Symbol in Frame 10 has been moved to the right.

Note: This will not move the Symbol in Frame 1.

• If you wish to see that the Symbol in Frame 1 is still in its original location click on the Onion Skin Button at the bottom of the Timeline:

You should now be able to see several Frames simultaneously:


Using the Onion Skins lets you see more than one Frame at once.

• Important: Switch off the Onion Skins by clicking the Button again:
  
  
4. Return to Frame 1 by clicking in: Frame 1


Frame 1 is selected.

5. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
   
6. In the Property Inspector Select: Tween > Motion

Your Keyframe must be select for this option to be available:


Selecting Motion Tween from the Property Inspector.

Note: If you have placed the Tween correctly you should now see an arrow between the two keyframes in the Timeline. This will have a light blue background colour:


How a Motion Tween should look in the Timeline - An arrow with light blue background.



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


Important: Motion Tweens cannot ever be mixed with other objects. They break:


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

A Motion Tween always 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:

Note: If you want to have more than one object being animated in different directions each Motion Tween needs to have its own layer:


A Timeline with several Tweens each in its own Layer.

Step Five: Test your Animation

1. If the red Playhead is not in Frame 1, Click on Frame 1 to place it back at the beginning of the Movie.


Red Playhead is in Frame 1.

2. On your Keyboard press: Enter

   Your animation should play once and stop at Frame 10. To Play again press Enter again. Your animation should look similar to this:

Step Six: Extending your Animation

1. Right click on Frame 10 and select: Create Motion Tween


Selecting Motion Tween from the Context Menu.

2. Right click on Frame 20 and choose: Insert Keyframe


Insert a new Keyframe in Frame 20.


You now have an additional section in the Motion Tween.

3. Drag the Symbol in Frame 20 to a new position: Move Symbol
   
   
4. Test your Movie by pressing on your Keyboard: Enter
   
   
5. Right click on Frame 35 (or similar) and choose: Insert Keyframe

   Note: You do not need to add the Motion Tween any more. You should find that the Blue Arrow is already in place:

   

   When you select the last Frame of a sequence and add the Motion Tween before adding the Keyframe the Motion Tween will then be in place for every subsequent Keyframe in that Layer.

   Important: Even though the Motion Tween is in place you still need to drag the Symbol to a new position!

6. Drag the Symbol in the last Frame to a new position: Move Symbol
   
   
7. Continue to repeat this:
   
   
• Insert Keyframe
• Move Symbol
• Press Enter to Test
  

Step Seven: Changing the Speed of your Animation

There are two ways of changing the speed that your animation plays. Global change and Local change.

Global Change
The simplest is to change the Frame rate of the Movie. This is a global change and will effect the entire Movie. The default is 12 Frames Per Second (fps). If you want to change this goto the document set up: Modify > Document (Ctrl J)

Local Change
The longer the Timeline is the longer it takes for the Playhead to get to the end. So slow animations have long Timelines. To slow the animation down you need to insert more Frames between the two Keyframes. Two do this:

Slowing Your Animation Down

1. Go to the Timeline and click in-between two Keyframes: Select Between Keyframes
2. On your Keyboard press: F5 (press repeatedly or continuously)

This will add Frames to your Tween and the more Frames there are the slower the Movie will play.

Large gaps between Keyframes slows the animation down.

To speed up an animation you need to remove Frames and make the Timeline shorter:

Speeding Your Animation UP:

1. Go to the Timeline and click in-between the any two Keyframes: Select Between Keyframe
2. On your Keyboard press: Shift F5 (press repeatedly or continuously)

Small gaps between Keyframes gives fast movement.

Tip: Before deleting Frames select near the left Keyframe (then press F5) otherwise you will find that you run out of Timeline and may inadvertently delete the right Keyframe. If you do go to Edit > Undo (Ctrl Z)

Step Eight: Ticker Tape - On and Off Stage Animation

The Stage is the rectangle that is your normal work area. By default it is white unless you have change the background colour. The Stage is the area that will become the visible Movie on the web page. If you change your document size (Ctrl J) you are changing the size of the Stage. The gray section just outside the Stage can be referred to as: Off Stage

Definition: Stage

You can use this off Stage area so that your Symbols animate onto the Stage. In the animation below the Symbol starts its journey off Stage to the right, animates across screen and ends off Stage to the left:

My Example: Download the Flash file  Beg 002b

Ticker Tape animation created with the extra space off Stage.

To create such an effect place your symbol off Stage. I have placed my Frame 1 symbol off to the right:

The white rectangle is my Stage. The Symbol (text) to the right is not visible in Frame 1 because it is off Stage!

In my final Frame I have moved the Symbol over to the left:

In the final Frame I have moved the Symbol far off to the left of the Stage.

Tip: The more you Zoom out the more of the Off Stage area you can see: View > Magnification > 25%

25% Zoom: The Black line defines the end of the Off Stage area.

Note: If you drag you your Symbol way Off Stage so that it goes beyond the outer edge of the Off Stage area, the Off Sage area will expand and grow as the Symbol moves! In the illustration below I have dragged the Symbol way off to the left:

25% Zoom: An expanded Off Stage area.

Step Nine: Changing the Symbols Properties - 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.

 

My Example: Download the Flash file  Beg 002c

Animation created with the help of the Free Transform tool.

Note: In the animation above the size of my symbol goes from very small to larger than the Stage area!

1. Select the Free Transform tool:
2. Highlight your: Symbol

Then do one or a combination of the following:

Resize:

Drag the corner or side handles to resize:

Note: If you drag the handles towards the center of your symbol you will drag right through and end up with a back to front symbol:


Drag the Symbol through the center and out the other side:


Rotate:

Drag from just outside the handles to rotate:


Skew:


Drag between the handles to skew:

Tip: As you move the cursor the Mouse will change shape so that you know which action is active:

    

Step Ten: Changing the Symbols Properties - 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.

My Example: Download the Flash file  Beg 002d

1. Go to: Window > Transform (Ctrl T)
2. Select the Symbol on Stage with the Selection tool:
3. Change some of the settings in the Transform Panel
   
   
   The Transform Panel
   
   
4. Test your Movie by pressing: Enter

Step Eleven: Changing the Symbols Colour

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). These settings are similar to what you will have tried with the Free Transform tool and the Transform Panel:

The Property Panel.

You can also change the Colour, Tint or Transparency of your Symbol:

My Example: Download the Flash file  Beg 002e

To change the Colour, Tint or Transparency of a Symbol:

1. Go to: Window > Properties (Ctrl F3)
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, Brightness and Alpha at the same time.

     Note: For Advanced you need to click on Advanced then click on Settings

     Alas the Advanced Settings dialog box that comes up is not very intuitive or easy to use. I suggest that you play and see what happens

   Remember to keep testing your work by pressing: Enter

Step Twelve: Easing

Easing is term that refers the speed that an animation moves. It can move at a constant speed (no easing) or accelerate of decelerate. These are called Ease In and Ease Out.

My Example: Download the Flash file  Beg 002f

Ease In - Speeds Up.

 

My Example: Download the Flash file  Beg 002g

Ease Out - Slows Down

To use the Ease effect:

1. Create a: Motion Tween (see beginning of this tutorial)
2. In the Timeline select: Frame 1


Select Frame 1 of a Motion Tween.

3. If the Timeline is closed, open it: Window > Properties > Properties (Ctrl F3)
4. Select the: Ease Option


Ease In is negative and Ease Out is positive.

5. If you wish to customise your Ease press the: Edit Button
6. Drag the: Graph Line


Drag the Graph line to change the Ease.

7. Click: OK
   
8. Test your Movie by pressing: Enter

Step Thirteen: Rotation

There are a number of ways of making objects rotate and in fact in fact it can become complicated. I could write several tutorials on rotation! In this tutorial I am only going to look at rotation as part of the Timeline options.

My Example: Download the Flash file  Beg 002h

1. Create a: Motion Tween (see beginning of this tutorial)

Note: For rotation you might want your Symbol is in the center of the Stage in both the first and last Frame of your sequence. To do this use the Align Panel. make sure Align to Stage is on:

At this point there is no Movement in the animation:


My Motion Tween looks like this.

2. In the Timeline select: Frame 1
3. If the Timeline is closed, open it: Window > Properties > Properties (Ctrl F3)
4. Select the: Rotation
5. Select either: CW (Clockwise) or CCW (Counter Clockwise)

Note: If you wish select to turn your object more than one time.



6. Test your Movie by pressing: Enter

Note: You will notice that in stops every time it gets to the end of the sequence:


Stops briefly at the end of each turn.

This is caused by the fact that Frame 1 and the last Frame are identical. This means that there are two Frames in a row without any change. To resolve this the last Frame needs to be removed. But before you can do that you need to place a Keyframe just before the last Frame.

7. Select the: Second to last Frame
8. Right click and select: Insert Keyframe

This gives you a double Keyframe at the end of the sequence:


There is a double Keyframe at the end of the Timeline.

9. Right click on the last Frame and select: Remove Frames

Note: You will now notice that the new last Frame has slightly rotated text. This means that the last Frame is different to the first and there should no longer be a pause:


Text is now slightly rotated in the last Frame.

10. Test your Movie by pressing: Enter

Have fun !!

Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here