Free Flash Tutorials	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Tweening with Motion Guides

003 Beginners
Flash Compatibility: MX          For Flash MX 2004 click here

Written by: Phil

Length: 1200 words

Assumed Knowledge : Tweening

The aim of the tutorial is to learn how to tween symbols using motion guides. Ordinarily with a Tween an object moves in a straight line from one point to the next. Motion guides allow you to move an object in a curve or spiral between one point to the next.

Cross Ref: If you are not familiar with Tweening it may be better to look at a standard Tween. See tutorial: Beginners - Animation Tweening

Example: Download the Flash file Beg 003a

Example of spiraling Tween.

Cross Ref: Below is an example from an intermediate level tutorial that uses motion guides to animate the electrons: Intermediate - Animation - Lithium Atom

Example: Download the Flash file Int 009a


Movement of the electrons has been created with motion guides.

For a beginners tutorial I am going to show you how to create something simple such as the spiral animation above. If you want to try and create the atom: click here

Step one: Setting up the Document

1. Go to: File > New
2. Go to: Modify > Document
3. For Dimensions type: 200 x 160 px
4. If you wish change the Background colour.
   
   
   
   
5. When everything is correct click: OK

Step two: Create a Symbol

1. Go to: Insert > New Symbol
2. Give the symbol a name: Spiral
   Select Behavior: Graphic
   Click: OK
3. Use the text tool and type: Spiral
   
   Note: You can of course type anything you like. You could also use a drawing tool like the Brush to draw something. You could also copy and paste from another program. This could be clip art (from a program like Word) or a drawing from a graphics program such as: Freehand, Illustrator or CorelDraw.
   
   
4. When you have finished typing (or drawing) use the Arrow tool to move the text (or drawing) to the centre of the symbol. You will see a cross which is the registration point or centre point of the symbol.
   
   Note: If you want to centre something with accuracy use the Align Panel. Select the object you want to align. Go to Window > Align. Select the To Stage button: . Then click the Align Vertical Centre and the Align Horizontal Centre
   
   
5. When you have finished return to the main stage by clicking on the Scene 1 tab:

Step three: Motion Tween

The next step is to create a standard Motion Tween:

1. Open the Library: Window > Library
2. Drag the symbol Spiral on to the Main Stage.
3. Right click (Mac Ctrl click) on: Frame 40
4. A menu appears - select: Insert Keyframe
   
   You should now have a solid dot at each end of the timeline:
   
   
   Timeline with two keyframes.
   
   
5. If the Property Inspector is closed, open it: Window > Property
6. In the Timeline click on: Frame 1
7. In the Property Inspector select: Tween > Motion
   
   
   
   Your Timeline should now look like this:
   
   
   If the Tween is correct you have an arrow in between the two keyframes (black dots) with a blue background.
   
   For the moment we are done with the Tween.

Step four: The Motion Guide

1. If the Tools are not open, open them: Window > Tools
2. Select the: Pencil Tool
3. In the Options section at the bottom of the Tool Panel select: Smooth
   
   
   Selecting the Smooth setting for the Pencil tool.
   
   
4. If the Property Inspector is closed, open it: Window > Property
5. The Property Inspector will now display information about the Pencil tool. If it is not set to a line width of 1 point, select: 1
   
   
   Setting the Pencil tool to a Stroke Height (width) of 1 point.
   
   
6. In the Timeline click on the Button: Add Motion Guide
   
   
   The new Guide Layer above the Tween.
   
   
7. Rename Layer 1. Double click on the words Layer 1 and type: Tween
   
   
8. In the Guide Layer select: Frame 1
   
   
   Frame 1 of the new guide layer selected.
   
   
9. With the Pencil tool still selected: Draw a spiral
   
   
   The Stage with both Layers.

   Note: Make sure that spiral (or any other curve that you want to draw) must not cross over itself.

10. In the Guide Layer click on the: Lock Button
    
    
    The Guide Layer is padlocked.
    
    This is done to ensure that the spiral drawing is not selected by mistake.
    
    
11. With the Arrow tool Drag the "Spiral" text onto the beginning of the spiral line. You should see the text jump as the text symbol snaps onto the guideline.
    
    
    The Spiral symbol snapped onto the begriming of the guideline.

    Note: It is the registration point in the centre of the symbol which snaps to the guide. The registration point must be directly over the top of the guideline. Which it will be as it is the registration point which snaps to the guide.

12. Move the Playhead to: Frame 40
    
    
    Playhead on frame 40.
    
    
13. Drag the "Spiral" text onto the end of the spiral guideline. You should see the text jump as the text symbol snaps onto the guideline.
    
    
    Symbol snapped onto end point of guideline.
    
    
14. The Motion guide is now complete. To test the movie, on the keyboard press: Enter
    
    The word "Spiral" should move in a spiral towards the centre.

    Note: The guideline will not be visible in the final published movie. To see the finished movie will look goto: Control > Test Movie

Step five: Background

In my example movie at the top of the page I have a spiral background:

Spiral Background.

This spiral is simply drawn in a Layer of it's own and is not related to the Tween or Motion Guide. To create a background do the following:

1. In the Tween Layer click on the: Lock Button
   Both the Tween and Guide Layer should now be locked and you should see the padlock icon in both layers.
2. In the Timeline click on the Button: Insert Layer
3. Re-name this Layer: Background
4. This new Layer will not be in the correct place. It should be at the bottom of the stack of Layers. Drag this new Layer so that it is underneath the others.
   
   
   All three layer in the correct order and the top two locked.
   
   
5. Use the Brush tool to paint a spiral.
6. Save and test your movie.