Intent

Students learn the basics in Flash. They start their first animation by creating a Basic Motion Tween. This includes resizing an image in proportion and bending the motion path.

What is a Motion Tween?

Motion tween is nothing but tweening a Symbol's movement from one position to another. To implement Motion Tween all that you have to do is, provide Flash with Symbol's initial position and the end position. Rest is taken care by Flash. Isn't it really simple.

Your Task

  • Search for a picture on the internet such as a photo, vector graphic ect or create an own object and create a 2 second motion tween (Picture must be school appropiate!).
  • Your image should move across the stage.
  • Resize, rotate the image and bend the motion path.
  • Save it as: Activity 1_firstlastname.swf

Tools/Commands

  • Selection Tool
  • Free Transform Tool (Scale image)
  • Convert to Symbol
  • Create Basic Motion Tween
external image Selection_Freetransform-Tool.jpg

.

Instructions

1. Open a New Flash File (Ctrl+N).

  • Select "Action Script 3.0" New Document window will appear

2. Insert Picture to Stage:

  • Go to file => Import to stage=> find your picture that you have saved on the hard or your USB drive;
  • Or copy and paste your image on the stage;
  • Or you can even draw your own object, you can either choose Rectangular tool or Oval tool from the tool box and draw your desired shape.

3. Resize the Image in Proportion:

  • Use the free transform tool and hit the shift button to scale your image in proportion.

4. Convert to Symbol

  • Now select your object on the stage => go to Menu bar=> Modify=> Convert to Symbol (or press F8).
  • Convert to Symbol window will pop-up. Name your Symbol what ever you like. Select Graphic behavior and press OK.
Note: You can create motion tween only on symbols. So any object upon which you would want to implement motion tween, First convert the object to a Symbol.

5. Create Basic Motion Tween

  • Now you can see a single Layer called "Layer1" in your timeline Window.
external image layer1.jpg
  • Select the first frame.
  • Right now your Symbol is in frame1 of Layer1. Select frame 24 and press F6 to insert a new keyframe.

  • Select frame 1 => right click => "Create Motion Tween"
  • Now your Layer will look something like the one shown below.

Create_motion_tween_image.png

.

.6. Bend Motion Path

  • Select "Selection Tool" and drag your object anywhere else on the stage.
  • You will see the green motion path.
  • Move your cursor to the path and bend the curve.
  • Now press (Ctrl+Enter) to view your motion tween.

external image Motion-Path-bild.jpg

Congratulations! Your first animation in Flash is done!

courtesy: http://www.entheosweb.com/Flash/motion_tween.asp

Resources

Watch the short video below for visual instructions!




Teachers Exemplar

Animation with 24 frames per second




Animation with 48 frames


Peanutbutter Cup Monster



Assessment