Animation Tutorials Day 3: Motion Path

Today’s essential question: How can I make an object follow a custom motion path?

motion-path.png

The bouncing ball tutorial taught us how animate an object that moves from one point to another.
Sometimes you may want an object to follow a more elaborate path of motion, such as a race car following a track, or a butterfly fluttering around a screen. In these cases, you would draw a line called a custom motion path for your object to follow.

How to Create a Custom Motion Path in Flash CS5

Part 1: Setting Up the File & Layers
  1. Create a new Flash Document in Actionscript 2.0
  2. Save the butterfly PNG below. (Or download an image of your choice with a transparent background.)
    small_blue_butterfly.png
  3. Import the picture of the butterfly.
    File ->Import-> Import to Library->small__blue_butterfly.png
  4. Go to the timeline at the bottom of the screen.
    Double-click “Layer 1” and rename it “butterfly.”
  5. Click on the Libraries panel.
    Select “small__blue_butterfly.png” and drag it onto the stage.
  6. Right click (or control + click) on the butterfly image -> convert to symbol -> convert to movie clip.
    Name the movie clip “butterfly.”
Part 2: Creating the Motion Path
  1. Create another new layer on the Timeline, select the Pencil tool 1 in the Tools panel,
    and select a stroke color from the Property inspector on the right.
  2. Draw a path on the stage with the Pencil tool.
    2
  3. Switch to the Selection tool 3 and double-click the path you just created.
    4
  4. Choose Edit→Cut to remove the path from the stage temporarily.
    5
  5. Right-click (Windows) or Control-click (Mac) Frame 1 of the layer that contains your symbol and choose Create Motion Tween from the contextual menu that appears.
    6
    A new tween span is created for your triangle symbol.
    7
  6. Choose Edit→Paste in Place to paste the path you created earlier.
    8
    Flash automatically converts the path to a motion path, and your symbol snaps to the path.
    9
  7. Press Enter or Return to play your movie. The symbol follows the path you created.

Today we will:

  • Complete Motion Path tutorial, upload both the flash and swf files to the animation folders in our school Google Drive accounts, and make sure we have shared the folder with Ms. Lawson
  • Upload Motion Path animations to YouTube
  • Create a new blog post with the following:
    • completed Motion Path Animation
    • a few sentences on our blog summarizing any challenges you faced today, how you worked through those challenges, and how you currently feel about computer animation.
    • any other missing or incomplete assignments
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s