New Timeline Animation in Flash CS4

CATEGORIES: Flash, Tutorials | Lee Brimelow | March 29, 2009

If you’re already familiar with how to animate things in both Adobe After Effects and Adobe Flash, you’ll know just how primitive the old method of animating things in Flash used to be. Luckily, things have changed in a huge way with the release of Flash CS4. Much like After Effects, Flash now has auto-keyframing, a full-featured motion editor, and—most importantly—the ability to animate each property of an object separately from one another.

If you’d like to download the files used in this tutorial to practice these techniques, just click here. All files are for personal use only.

1 OPEN A NEW FLA FILE
…or download the FLA from the Layers magazine website and open it. The download is an ActionScript 3.0 Flash document that’s set to publish to Flash Player 10. If you want to be able to take advantage of some of the cool new features such as 3D, you’ll need to obtain this new version of the Flash Player. But the new Timeline and animation features can be used no matter what player you’re publishing to. This FLA file has a single movie clip of the Flash icon that we’ll use for our animation on the Stage.

2 SIMPLE POSITION ANIMATION
Let’s start out with the easiest possible animation where you simply animate the X and Y position of an object. With the new Timeline there’s no need to manually create or delete keyframes. Simply Control-click (PC: Right-click) the movie clip on the Stage and choose Create Motion Tween. This creates a motion tween on the Timeline and puts down one second’s worth of frames. Since our movie is set to 30 fps, you should now see 30 frames on the Timeline. Now simply move the subject (in this case the butterfly) to a new position to create the animation. Hit the Return (PC: Enter) key to preview the animation.

3 MOTION PATHS
In Flash CS4 there’s no need to use motion guide layers like in previous versions of Flash, as a motion path is automatically created for every animation. In the previous step, you should’ve seen the green motion path after you created your animation. You can easily click-and-drag on that path to modify the route that the movie clip takes to get to a new position. With the clip not selected, click-and-drag on the green path to create a curved motion path and hit Return (PC: Enter) to preview the animation.

4 ADD SOME COMPLEXITY
Now that you have a nice curving animation, let’s add another keyframe in the middle to make the curve a little more interesting. Move the Current-Time Indicator (CTI) in the Timeline to frame 15 and then move the clip to a different position. Notice how the motion path adjusts nicely to make the animation as smooth as possible. Move the clip to new locations and take note of how the motion path is redrawn. To finish, make a motion path similar to the one shown in the screenshot above.

5 ADJUSTING ANIMATION LENGTH
This is an area that was very frustrating in previous versions of Flash. Imagine you have an animation with 50 perfectly laid out keyframes. Then you’re asked to slow down the animation a little without affecting the rest of the movie. There goes your lunch hour. With Flash CS4 all you have to do is grab the end of a motion tween in the Timeline and adjust its length; all of the keyframes inside of it will be adjusted for you. So place the mouse over the end of the motion tween in the Timeline until you see the scrub icon. Now click-and-drag to adjust it so that it takes 50 frames to finish.

6 TRANSFORMING AN ANIMATION
What if you want to resize or move an animation without affecting the movie clip? Good luck to you if you’re using an earlier version of Flash. With Flash CS4, you can use the Free Transform tool to easily modify an animation’s size or position. Hit the Q key to get the Free Transform tool and then click on the motion path of your animation, not on the clip itself. From there try scaling the animation up and down as well as moving the entire animation to a new position. When you’re finished, press Return (PC: Enter) and observe the animation. Very cool stuff!

7 THE THIRD DIMENSION
One of the most exciting new features of Flash CS4 is the built-in support for manipulating objects in 3D space. This support takes the form of two new tools: the 3D Rotation tool (W) and the 3D Translation tool (G). Hit the W key to activate the 3D Rotation tool. Now click on the movie clip on the Stage and you’ll see the rotation handles that allow you to rotate the object on the X, Y, or Z axes. Move your mouse over the green handle and drag it clockwise to rotate the clip on the Y axis.

8 EXPLORING THE MOTION EDITOR
The real power of animation in Flash CS4 comes when you use the new Motion Editor panel. Choose Motion Editor under the Window menu to launch the editor. Now select your movie clip on the Stage to see the properties for your animation. You may need to expand the panel so you can see it better. At the bottom of the panel you can adjust the viewable frames so that your whole animation is shown. You should be able to see the keyframes that were created for the X, Y, and Rotation Y properties.

9 ADJUSTING ANIMATIONS IN THE MOTION EDITOR
Once you’ve done your rough animation on the Timeline, you can easily fine-tune it using the Motion Editor. You can even do all of your animation inside of the editor and bypass the Timeline altogether if you wish. With your animation selected, place the CTI at frame 25. Click in the Rotation Y section to maximize this property so you have more room to work. Now scrub the value slider shown in the screenshot to a new value. Notice how a new keyframe was automatically created for you at frame 25.

10 ADD SOME EASING
For more life-like animation you’ll want to apply some easing effects to the animation. Flash CS4 comes stocked with a bunch of easing effects to choose from. Scroll to the Eases section at the bottom of the Motion Editor panel and click on the plus sign. From here you can select one of the available easing types. Choose Stop and Start (Fastest) for this example. Now scroll to the top of the panel, and in the Basic Motion section, select your new ease type from the Ease pull-down menu and test your movie to preview it. What’s really powerful is that you can apply different easing effects to each property creating really complex animations.

11 CUSTOM EASING
While the eases that come with Flash CS4 are nice, you may decide that you want to create your own effect instead. Expand the Eases section of the Motion Editor and click the plus sign again. Choose Custom as the ease type and Flash will then create a blank easing curve for you to tweak. Click the Custom ease section to expand it and then click on the left-most point of the curve to expose the Bezier handles. From here you can tweak the curves to create any effect you want. Apply it to your animation the same way you did in the last step.

12 ACCESS MOTION PRESETS
Let’s say you just created an incredibly complex animation using the Motion Editor. It would be nice if you could save that work so you can apply it to other objects later on. The Motion Presets panel allows you to do just that. Open the Motion Presets panel by selecting Motion Presets from the Window menu. In the panel you’ll see a bunch of presets provided by Adobe to help get you started.

13 SAVE YOUR OWN MOTION PRESETS
To save your own preset, Control-click (PC: Right-click) on the motion tween up in the Timeline and choose Save as Motion Preset. You’ll be asked to provide a name for the preset, so name it, and then click OK. That’s all there is to it.

Share This

Back to Top

1. Photoshop
2. Illustrator
3. Indesign
4. Dreamweaver
5. Fireworks
6. Premiere
7. Flash
8. After Effects
9. Lightroom
10. Acrobat

Featured Partner

• 
• Dragging an Object Between Documents
• TV Scanline Effect
• Trick to the Glossy Effect
• 3D Text
• Changing Type on a Path
• more tips