CIS 421Flash>Motion Tweening

Draw an object and tween it

  • Open Flash.
  • Save the movie (File>Save) as animation in your student folder

Change the properties of the movie

  • Click the movie stage
  • Change the background color in the property inspector
  • Change the frame rate to 21 fps

document property inspector

Change the name of Layer 1 to circle

Image Properties

Draw a circle to animate it through tweening

  • Select the oval drawing tool on the toolbar
  • On the toolbar under colors, click the Stroke Tool, click the color well & select the square with the line through it so the circle does not have an outline
  • On the toolbar under colors, click the Fill Tool, click the color well & select yellow or red or a color that contrasts with your background
  • Draw a circle in the upper left corner of the stage

draw circle

If you do draw an outline color (stroke) for your circle (a color selected in the stroke tool

  • You have to click both the circle fill and the stroke outline
  • Press Ctrl+G to group the two together and create one object
  • The outline and the fill are two different objects

Select the circle so that it has a line with squares around it, as in the figure

  • Click F8 to turn it into a symbol
  • You can only tween an object if it is a symbol
  • Click the Graphics radio button to make it a graphics symbol
  • Name it ball
  • Click OK to save the red circle as the symbol ball in the movie library
  • The circle now has a square around it and a centerpoint

symbol

  • Click File>Save to save your movie

library

Open the movie library

Type Ctrl+L to open the library for this movie

You will see the circle graphic symbol listed in the library

library

Animate the ball by tweening it in the Timeline

Click on Frame 30 in the circle layer of the timeline

Click F6 to change frame 30into a keyframe

  • You will see a blue dot in the keyframe
  • Frame 1 is a keyframe by default
  • you can tween a symbol between two keyframes

Drag the circle symbol to a new location in Frame 30

Select the arrow tool, and then select the circle by clicking on it

Drag the circle to the lower middle of the stage

Rightclick the layer timeline anywhere between keyframes 1 and 30

  • Select Create Motion Tween on the popup menu
  • A straight line appears in the timeline -- if it is dashed the tweening didn't work
  • Play the movie by clicking the Enter key
  • Create a keyframe in Frame 15
  • With keyframe 15 selected, drag the circle to the lower middle of the stage
  • Click Enter to see the movie play
  • Click Control>Test movie to see how it will play in the player or Flash viewer
  • Save the movie

To make the ball rotate

  • Click in the timeline between the two keyframes
  • In the property inspector for the tween
  • Select CW (clockwise) or CCW (counterclockwise)
  • Type in the number of times you want it to rotate during the movie

Draw another object & tween it

Click the Insert Layer symbol on the lower left corner of the Timeline to create a new layer

  • Rename the layer triangle
  • Click the lock button on the circle layer to prevent accidentally changing it

insert layer

Create a new symbol in the symbol editing window

  • Click Insert>New Symbol (Control + F8) to open the Create New Symbol dialog box
    • Name the symbol triangle
    • Behavior graphic
    • Click OK to open the Symbol Editing Window (NOT the stage)
  • Change the stroke color to light green in the Stroke panel and the fill color to green in the Fill panel
  • You can draw a vector-based triangle in different ways.
  • pen tool - draw a triangle around the registration point
    • Click the pen tool
    • Click again to draw one side of triangle
    • Click again to draw second side
    • click on first point to finish triangle
  • Brush tool
    • Select the brush tool
    • select an appropriate brush shape and brush size at the bottom of the toolbar
    • Draw a triangle around the registration point
    • To straighten it, choose Modify>Shape>Straighten or Optimize (which reduces numbers of corners)
  • Rectangle Tool
    • Draw a rectangle around the registration point
    • Select the line tool
      • Draw a line from one corner of the rectangle to the opposite corner to divide it into two triangles
    • With the select tool, click outside the shape to deselect it.
    • Click on one of the triangle shapes and delete it.

Click on frame 30 of the triangle layer, hit F6 to turn it into a keyframe

  • Click on keyframe 1 of the triangle layer
  • Drag the triangle from the Library onto the stage into the upper right corner (Control L opens the library)
  • Click on keyframe 30, and drag the triangle to the lower left of the stage
  • Click Modify>transform>scale and drag the corner of the triangle to make it larger
  • Right click on the timeline in the triangle layer between Keyframes 1 and 30 & create a Motion tween
  • Select Keyframe 15 & drag the triangle elsewhere on the stage
  • Experiment with modify>transform which will let you flip the object, change the shape and the size.
  • set up tweening animation between each of your triangle keyframes
  • Play the movie and notice the independent animation of each layer.
  • Save the movie