X Course Advisor FREE Course Advisor
Watch Tutorials
Making Your First Animation in the Adobe Flash Motion Editor

Flash's Motion Editor makes it super-easy to visualize and edit your animation sequences. With it, we can control things like motion, color, effects, easing, and more. I'll spare you any more preamble; let's dive right into it!

Step 1 - Getting Things Set Up

To get started, apply a Motion Preset to a symbol on the Stage (Window > Motion Presets). If you don't have a symbol, paste in or create some content, convert it to a symbol by choosing Modify > Convert To Symbol. Next, let's pop open the Motion Editor panel by choosing Window > Motion Editor.

Step 2 - Touring the Motion Editor

As you can see, there's a whole lot going on inside the Motion Editor. But let's try to simplify things here and divide the panel vertically. On the right you'll see a timeline with a red playhead. Go ahead and grab the playhead and drag it left and right to preview the animation you applied above via the Motion Presets panel.

On the left you'll see various categories like Basic motion, Transformation, and so on. You can "twist" these categories open and closed using the disclosure triangle to the left of each property. To simplify things, twist them all closed except for Basic motion (the first one). Notice too that on the right, each of these categories contains various properties (like X, Y, and Rotation Z within Basic motion, for example), and that each of these properties has its own timeline on the right, which is revealed or hidden when we expand or collapse the category. Horizontal lines on each property's timeline means that property isn't being used; there's nothing happening there. But property timelines that have sloping or angled lines indicate that that property is in use. Green dashed lines represent Easing.

Furthermore, across the top of the Motion Editor window, we see headings for Property, Value, Ease, Keyframe and Graph. The parameters for each heading appear directly under those headings.

Step 3 - Applying a Simple Effect

Now let's apply a simple color effect to our animation. In addition to the Motion Preset that we applied earlier, let's have the entire animation sequence fade in from 0% to 100%. Here's how to do it:

Look for the Color Effect category on the left. In my example, I can't expand it because my animation sequence doesn't contain any color transitions. To add a transition I'll click the Add button,  which is located towards the center of the panel (see screenshot below).

From the choices that appear, choose Alpha. Next, make sure the red playhead in the timeline is positioned all the way to the right (this is the end of the animation sequence). Now set the Alpha amount to 100%. Then drag the playhead all the way to the left—the beginning of the sequence—and change to Alpha amount to 0%.

That's it! Try playing your movie back, or even better, choose Control > Test Movie > Test. I know this has been a brief introduction to Flash's Motion Editor, but I hope it puts you well on your way. 

Have fun!

Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.


You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.