How to create a trajectory movement based animation (Motion Guide) in Flash CS4

In this example it is presented an animation that uses Classic Motion Tween and Motion Guide Flash CS4 effects to move an object on the screen after a predetermined path, eg a bouncing ball on the screen.Something like this:

[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://www.itcsolutions.eu/wp-content/uploads/2010/01/BouncingFlashMovie.swf” width=”500″ height=”150″ targetclass=”flashmovie”]Get Adobe Flash player

[/kml_flashembed]

To understand this example and the basic concepts of the Adobe Flash CS4, used to do animation, you can read this post Adobe Flash CS3 and CS4 interface, basic commands and concepts.

To make the animation:

  1. Creates a new Flash project (File Flash ActionScript 2.0 or 3.0) by choosing File -> New (Ctrl N) from application menu;
  2. Rename the default layer (double-click on the layer’s implicit name Layer 1) with a new name, let say Ball;this will help later, when you have to manage many layers;
  3. On the new layer, called Ball, draw an oval (to draw a circle, hold down the Shift key while you do it); to draw the circle use the Oval Tool from the Toolbar; before drawing object, select the Oval Tool and set the color (for edge, Stroke Color, set no color), as well as angle corners; all these settings are made in the Properties window;
  4. Create a keyframe at frame 30 on Ball layer (select the 30th frame and press F6), this will multiply the first keyframe over the next 30 frames and create a new keyframe at the end;
  5. Create a Classic Motion Tween effect on the Ball layer between keyframes 1 and 30 (if you do not know how to apply such an effect – Adobe Flash CS3 and CS4 interface, basic commands and concepts);
  6. Add a new Motion Classic Guide layer via context menu; it is added by right-clicking the Ball layer in the Timeline; this special layer, called by default Guide: Ball, is attached to the layer we named Ball;
Insert a Cassic Motion Guide in Flash CS4
Insert a Classic Motion Guide in Flash CS4
Classic Motion Guide layer in Flash CS4
Classic Motion Guide layer in Flash CS4
  1. Select the first frame of the Guide: Ball layer and draw the trajectory for the circle; the trajectory path is drawn using Pencil Tool; to draw a smooth trajectory use the tool Smoothing property; this property is activated by selecting Pencil Mode: Smooth mode from the Toolbar (after selecting Pencil Tool);
Pencil Tool Smooth Mode in FlashCS4
Pencil Tool Smooth Mode in FlashCS4
  1. Select the first frame of the Guide: Ball layer and draw the trajectory for the circle;
Path on a Classic Motion Guide in FlashCS4
Path on a Classic Motion Guide in FlashCS4
  1. Select the first keyframe on the Ball layer using the Selection Tool and define the starting position of the ball from the scene; by Drag & Drop position the circle on the start of the trajectory so its anchor is placed in on the path (the central point is bolded);
Set Object on Path (Motion Guide) in Flash CS4
Set Object on Path (Motion Guide) in Flash CS4
  1. Select the second keyframe on the Ball layer using the Selection Tool and define the final position of the object on the scene; using Drag & Drop, the ball is positioned on the end of the trajectory;
  2. test animation using Ctrl + Enter (Windows)

To better understand the example, you can watch the video version of this tutorial:

[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://www.acs.ase.ro/multimedia/SuportFlash/BallFlashMovieCS4.swf” width=”550″ height=”420″ targetclass=”flashmovie” play=”true” loop=”true”]Get Adobe Flash player

[/kml_flashembed]