The Motion Editor

November 12th, 2008 | Posted in Blog

If you’ve worked with video animation programs like After Effects, the new Motion Editor panel in Flash will be a familiar and welcome addition. Animators now have an amazing amount of control over object motion which means that creating lifelike movement is faster and easier.  With Flash CS4, motion animation has grown up.

I am particularly excited by how easy it is to create a looping animation, which is a staple of Flash cartooning and interactive design. In previous versions, it was necessary to carefully create keyframes that matched beginning to end to create a seamless loop. Now, through the use of the new motion tween and a custom Easing curve, a seamless loop can be created in just a few seconds.

Begin with a symbol on the stage. Right click the symbol and select “Create Motion Tween.” Now all you need to do is set the two extremes of the movement in the timeline. In my example of a bouncing ball, the first frame is the ball at its peak height; the last frame is the ball on the floor. This will result in a “dropping” animation, not a bounce, but the looping effect will be handled using the motion editor by creating a custom easing curve.

In the Motion Editor, scroll down to the Eases section and click the plus button to add a “Custom” ease. This will allow you to adjust the curve to whatever shape you like. Adjust the handles and points by dragging, and add new points by CTRL-clicking the line. To create a loop, adjust the curve so that the line begins at 0%, rises to 100%, and drops back again to 0%. The smoother the curve, the more gradual the animation will appear.

Adjusting the custom easing curve.

To apply the custom easing  to the animation, scroll back up to the Basic motion section in the Motion Editor. Select the pulldown menu, and apply the “2-Custom” ease. You’ll see your custom curve superimposed over the original tween as a dotted line in the motion editor. Test the movie with CTRL-Enter to see the loop. In my example, you’ll notice I’ve created a second custom ease to control the transformation effect on the ball.

Select the 2-Custom ease from the pulldown menu.

Spend some time playing with both the built-in easing effects and the custom option to see just how powerful this new tool can be for quickly creating lifelike animations. Have fun!

Download the example file