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

Flash Tutorial - Tweening with Motion Guides

Free Flash Tutorial

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.

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

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 109a


Movement of the electrons has been created with motion guides.

For this 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 Selection 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.
   
   a. Go to Window > Design Panels > Align
   b. Select the To Stage button:
   c. Click the Align Vertical Centre:
   d. Click the Align Horizontal Centre:
   
   
5. If the Edit Bar is closed, open it: Window > Tool Bars > Edit Bar
6. When you have finished return to the main stage by clicking on the Scene 1 button:

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. In the Timeline 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.
   
   
8. Rename Layer 1. In the Timeline double click on the words Layer 1 and type: Tween
   
   For the moment we are done with the Tween.

Step four: The Motion Guide

1. In the Timeline click on the Button: Add Motion Guide
   
   
   The new Guide Layer above the Tween.
   
   
2. If your Tools are not open, open them: Window > Tools
3. Select the: Pencil Tool
4. In the Options section at the bottom of the Tool Panel select: Smooth
   
   
   Selecting the Smooth setting for the Pencil tool.
   
   
5. In the Guide Layer select: Frame 1
   
   
   Frame 1 of the new guide layer selected.
   
   
6. 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.

7. Go to the Selection tool:
8. Click on the spiral line to select it.
9. If the Property Inspector is closed, open it: Window > Property
10. The Property Inspector will now display information about the Pencil tool. If it is not set to a line width of 1 point (or less), select: 1
    
    
    Setting the Pencil tool to a Stroke Height (width) of 1 point.
    
    
11. In the Guide Layer click on the: Lock Button
    
    
    The Guide Layer is padlocked.
    
    This is done to ensure that the spiral guide drawing is not selected by mistake.
    
    
12. Go to: View > Snapping > Snap to Objects
    
    Snap to Objects should be ticked: 

    Note: This is not essential, but it makes it easier because you will clearly see the Spiral Symbol snap onto the guide line.
    

13. With the Selection Tool grab the centre point of the 'Spiral: text and drag it onto the beginning of the spiral line. You should see the text jump as the text symbol snaps onto the guideline.
    
    
    The Spiral text centre point 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. It is easiest to pick up the symbol by the registration point.

14. Move the Playhead to: Frame 40
    
    
    Playhead on frame 40.
    
    
15. 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.
    
    
16. The Motion guide is now complete. To test the movie, on the keyboard press: Enter
    
    The word "Spiral" should move in around the spiral guide.

    Note: The guideline will not be visible in the final published movie. To preview what it will look like when finished 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 or other shape.
6. Save and test your movie.
   

Note: In the Illustration above the Layer name 'Background' is indented to the left of the Layer labeled 'Tween'. If your labels are not indented but straight in-line one under the other as in the illustration below, the two layer are part of the same group.



If the under the guide are in a in-line they are part of the guide group. It does not need part of this group. Drag the Label 'Background' down and to the left. This will remove in from the group like this:



To place a layer back the group drag it slightly up and to the right. In this way you can have more than one object attached to the same guide, each with its own individual Tween

Example: Download the Flash file Beg 003b


An example of a single guide layer with two separate tweened layers attached.


Example: Download the Flash file Beg 003c


An example of a movie with two separate guide layers each with it's own Tween attached.