VirtualMV/Flash12 (CS6)/Basic/Animation/Motion Guide/Content

From WikiEducator
Jump to: navigation, search

Overview

VmvIcon Objectives.png

By the end of this page you will be able to:

  • Develop a motion path to move a symbol along a predetermined path.


What is a motion guide

A motion path allows you to move a symbol along a predefined path.

This tutorial will show you how to move a ball along a predefined path in CS4.

Resources

  • Tutorial based on a Flash MX2004 tutorial by Entheos (2008)[1]
  • For CS3 and more details about Motion Guides refer to Reinhardt and Dowd (2007, p. 387)[2]

Tutorial

  1. Create a new (ActionScript 2.0 or 3.0) movie
  2. Use the oval tool and create a ball (Set the outline to null, and the fill to a gradient ball, and use the shift key to keep it a circle)
  3. Use the Selection tool to draw a box around the ball, and right click > Convert to Symbol
    1. Name: Ball (type:Graphic), and add to the library
  4. Change the name of the Layer (Layer 1) to Ball (right click on Layer 1 > Properties >Name:Ball)
  5. Right Click on the word Ball (Layer label)> Add classic motion guide. This will add a new layer, where we will draw the path for the ball to follow.
  6. Click on the Guide layer, and using the pencil tool draw a path.
  7. Select frame 40 of the guide layer, right click > Insert Frame (or press [F5])
  8. Click on Frame1 of Layer Ball. Now drag the ball onto the start of the path (when the bubble attaches itself to the path)
  9. Click on Frame 40 of Layer Ball, and insert a keyframe ([F6])
  10. Now drag the ball to the end of the path (or if it is a circle leave it where it is!).
  11. Select any frame of the Layer Ball and right click and select "Create Classic Tween".

    If you have put the ball at the start and the end at the same place nothing will happen if you run the movie), so lets insert some keyframes to the tween.
    ...
  12. Click on Frame 10 of the Layer Ball, and drag the ball to a new position along the path, Click on Frame 20 of the Layer Ball and drag the ball to the next position, do the same for frame 30.

Flash10 AnimMoGuide.png

Now run the movie and you should have a ball following a path.

Video tutorial

For a video tutorial (1min:36sec @ 3MB) click here..
Cite error: <ref> tags exist, but no <references/> tag was found