CIS 421Flash › Guide Layer Tweening

Flash Guide Layer Tweening

  • Create a new movie in Flash CS3.
  • The movie contains no actionscript so the verison of ActionScript does not matter.
  • However, the Flash player setting should be Flash 9 so that the page in which the Flash movie is embedded can be modified to make it XTHML valid.
  • Create a new graphic or movieclip symbol, such as bluebird.
    • Import a graphic into the symbol
    • Do Trace Bitmap to vectorize the image
    • Delete any background pixels that are not necessary
  • Create a second graphic symbol with flamigo, in the same way

Put the symbols into the movie:

  • Edit the movie
  • Rename layer1 as bluebird
  • Import the bluebird symbol into keyframe 1
  • Make frame 40 an ending keyframe (f6)
  • Select the bluebird layer
    • Rightclick the layer in the area where the layer name is
      • Click Add Motion Guide
      • or Insert>Timeline Effects>Motion Guide
    • Flash inserts a motion guide layer above the bluebird layer

Draw the guide

  • Select the pencil
  • In the Guide layer, start drawing a line along which the dogbert symbol will move from frame 1 to frame 40
  • Place the cursor in frame 1 of the dogbert layer
  • Drag the bluebird symbol to the beginning of the guide line
  • The symbol should snap to the line
  • use the arrow keys to move the symbol crosshairs right over the line
  • Click in frame 40 of the bluebird layer
  • Drag the bluebird symbol to the end of the guide line
  • The symbol should snap to the end of the guide line
  • Place the cursor in the bluebird layer between the beginning and ending keyframes
  • Open the frames property inspector
  • Select motion tween
  • Select orient to path
  • if you want symbol to rotate, select one of the rotate options and indicate number of times

Test the movie

  • Control>Test to generate the SWF version of the movie -- the symbol should move along the guideline
  • The guidelines will be invisible in the SWF version

Repeat for the flamingo symbol except draw a circular guideline

  • Click in keyframe one of the flamingo guideline layer
  • Click on the oval tool on the toolbar
  • Change the fill color to none on the tool options bar
  • Draw a circle in the flamingo Guide layer
  • Click Keyframe 1 in the Boss layer
  • Drag Boss onto the circle
  • Click keyframe 40 in theflamingo layer
  • Drag Boss to a different place on the circle
  • Flash will animate the tween in the most efficient way, so it will move the flamingo symbol the shortest distance.
  • To move the symbol the longest distance, select the eraser tool on the toolbar and erase a small section of line between the beginning and ending positions of the symbol, on the side that is not the one you want it to travel
  • Click inside the timeline of the flamingo layer between the two keyframes
    • In the Frames Property Inspector, select Motion Tween and Orient to Path
    • Rotate if you like
  • Save the Movie
  • Hit Control>Play Movie to see the animation