Tweening with Motion Guides	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Tweening with Motion Guides

Free Flash Tutorial

Intro

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.

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

 

Cross Ref: If you are not familiar with Tweening it would be better to start by looking at a standard Tween. See tutorial: Animation Tweening

Example: Download the Flash file Beg 003a

Example of spiraling Tween.

Demo: See Flash MX04 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: 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: Animation - Atom

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. For Dimensions type: 200 x 160 px
4. Select a: Background Color.
   
   
   Setting up the Document Properties.
   
   
5. When everything is correct click: OK

Step Two: Create a Symbol

As with all Motion Tweens you will need a Symbol to animate.

1. Go to: Insert > New Symbol (Ctrl F8)
2. Give the symbol a name: Spiral
3. Select Behavior: Graphic



4. Click: OK
   
   
5. Select the Text tool:
6. Type: Spiral


My Typing.

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.

7. When you have finished typing (or drawing) go back to the Selection tool:
8. Move the text 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:

1. With the Selection tool select the: Text
2. Go to Window > Align (Ctrl K)
3. Select the Align to Stage button:
4. Click the Align Vertical Centre:
5. Click the Align Horizontal Centre:
   
   
   
9. If the Edit Bar is closed, open it: Window > Tool Bars > Edit Bar
10. 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 (Ctrl L) or (F11)
2. Drag the symbol Spiral out of the Library and onto the: Main Stage


Drag the Spiral Symbol onto the 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 > Properties > Properties (Ctrl F3)
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
   
   
   Layer re-named to: 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. Select the: Pencil Tool
3. Make sure the Stroke colour is something you can see like: Black (unless your background is black)


Stroke (line) colour.

4. In the Options section at the bottom of the Tool Panel select: Smooth


Selecting the Smooth setting for the Pencil tool.

5. Also in the Options section turn: Object Drawing OFF

On

Off

6. In the Guide Layer select: Frame 1
   
   
   Frame 1 of the new guide layer selected.
   
   
7. With the Pencil tool still selected: Draw a spiral

Note: Make sure that your curve does not cross over itself.


The Stage with both Layers.

8. Go to the Selection tool:
9. Double click on the line to select the: Spiral Line

   
   Guide Line selected.

10. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)

Note: The Property Inspector will now display information about the line.

11. If the line is not set to 1 point width, set it: 1 (or less)


Setting the Pencil tool to a Stroke Height (width) of 1 point.

12. If the line is not solid, set it to: Solid


Setting the line to Solid.

13. In the Timeline click the dot next to the Guide Layer name under the lock: Lock Button


Locking the Guide Layer.


The Guide Layer is padlocked.

This is done to ensure that the spiral guide drawing is not selected by mistake.

14. Go to: View > Snapping > Snap to Objects

Snap to Objects should be ticked: 

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

15. With the Selection Tool select the Spiral Text

Note: When a Symbol is selected you will be able to see the round centre point (which is not always in the centre!)



16. Grab the centre point of the:
17. Drag the Symbol onto the beginning of the spiral line:

Note: You should see the symbol outline (dotted line) and the centre point will jump as the symbol snaps onto the guideline.


The Spiral text centre point snaps onto the guideline.

18. Move the Playhead to: Frame 40
    
    
    The Playhead on Frame 40.
    
    
19. Drag the "Spiral" Symbol onto the: End of Guideline

You should see the text jump as the text symbol snaps onto the guideline.


Symbol snaps onto end point of the guideline.

The Motion guide is now complete. You now need to test the Movie.

20. 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 see what the final Movie will look like you need to view the Movie in the Test Window.

21. Go to: Control > Test Movie

Note: You should be able to see the animation and not see the guideline:

22. When finished close the Test Window:

Step Five: Creating a 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:


Both Layers are locked.

2. In the Timeline click on the Button: Insert Layer


The new Layer is named: Layer 3

3. Re-name this Layer: Background

The new Background Layer is sandwiched in the centre of the other Layers.


The new Layer needs to be moved to the bottom of the Stacking order.


4. Drag this new Layer so that it is underneath the others.


All three Layers are in the correct order and the top two are locked.

5. Select the the Brush tool:
6. Paint a: Spiral


A spiral painted with the Paint Brush tool

Note: you can change the way your spiral looks in the Property Inspector:



7. Save your Movie: File > Save (Ctrl S)
   
   
8. Test your Movie: Control > Test Movie (Ctrl Enter)
   

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 in a in-line they are part of the guide group. To remove the Background from the group drag the Layer: Down and to the Left   

This will remove the Layer from the group:


Background is no longer in-line with Tween Layer.

To place a Layer back the group drag it: 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.

Have Fun