Tweening with a Path

In this assignment, we will see an example of applying a path for the graphic to follow as it tweens.


Here are the steps for creating a path for a tween to follow:
1. Create a symbol and apply a tween
2. Create a guide layer
3. Drag the symbol to the guide layer (both at the start and end)

Create a Basic Motion Tween:

  1. Double-click on Layer 1 and name it Moon.
  2. Click in Frame 1 of the Moon layer.
  3. Draw a small moon with no stroke (i.e., outline).
  4. Click on the moon and select Insert - Convert to Symbol.
    1. Name: moon
    2. Behavior: Graphic
  5. In Layer 1: Add a keyframe to Frame 20.
    (Click in Frame 20 - Insert - Keyframe)
  6. In frame 20 move the moon to another location on the stage.
  7. Click on any frame in between frame 1 and 20 and then right click and select Create Motion Tween.
  8. Test your scene to be sure the tween is working properly.
  9. At this point the moon should be moving in a linear fashion across the screen.

Create a Guide Layer and Path:

  1. Select the Moon layer and right click and select Add Motion Guide or click on the motion guide button (See the Flash screen at the bottom of this page for the position of the motion guide button.)
  2. Click on the Motion Guide Layer.
  3. Draw a large oval with NO fill.
    (This will be the "path." You will not see it in the Flash movie.)
  4. Erase a small piece of the oval on the left side.

Connect the Moon to the Guide :

  1. Click in Frame 1 of the Moon layer.
  2. Drag the moon symbol to the end of line used for the path. The very center of the moon must be centered on the end of the path.
  3. Click in Frame 20 of the Moon layer and center the moon on the other end of the path.
  4. Test your movie: Control - Test Movie.
    You should see a moon following an invisible oval path.

To Create a Planet:

  1. Click on the Moon layer and insert a new layer.
  2. Double-click on the new layer and name it planet.
  3. Click on the planet layer.
  4. Draw a large circle with no stroke in the center of the oval path, covering the back part of the pathway and leaving the front part visible.
  5. Test your movie again.
    (Control - Test Movie)
    You should see a moon circling a planet.
Save in your Flash folder as path.fla.

Back to Flash Index