Animation with Flash CS4′s Motion Editor

– taterboy | February 5th, 2009

Filed under: ActionScript 3, Animation, Flash, Tutorials

Was anyone else thrown for a loop as much as I was about Flash CS4s animation system? I knew the basics and played around with the new animation tools before, but then I had my first real animation job with it. Wow! that really sucked.

It is hard to say if the new tools are better then before, that all depends on your needs. If you want to do a quick animation, then stick with the classic tweens. If you want higher quality animation with some real fine tuning then the new tools are for you. I have to admit, if I had written this post just one day earlier, my option of the new animation tools would have been completely 180° opposite. Now I think they are great, so if you are frustrated now, read on and take a deep breath.

Forgetting How to Animate:
My first hurdle was to forget how I animated in the past. Instead of placing a keyframe on the timeline everywhere you want the x, y or z property to change in value, you keyframe the two extremes of your your animation. Everything in-between and easing is handled by custom tween curves.

In this demo we will do a bouncing ball, but this one will animate and bounce off all four sides of the stage. Previously we would place our ball on the stage where we want the ball to hit the sides, maybe add a motion guide for some nice arks to simulate gravity, then tweak the tweens between each keyframe until we have something that looks believable. Now a single tween last the entire length of our animation, so adding those extra keyframes on the timeline will mess up your tween.

Extremes:
We just start with two keyframes, one at each extreme of where we want the ball to travel.
Then with the ball selected, open the motion editor. Here we see our x and y curves, well they are just strait lines. If you apply a tween you will just get a change in the motion dynamics between the two keyframes. Instead scroll down to the Eases row, this is where all the real animation happens now. Click on the plus icon and select custom from the bottom of the list. Do this twice. I hate that we are not able to name our custom tweens, maybe next release, anyway, create one for the x axis and one for the y axis.

By default each curve starts at 0% on the left and goes to 100% on the right. On the right side of the curve, change the value to 0%. Now slide back up to the x and y tween drop downs and select the custom tween you wan to apply to each property. I chose “1-custom” for x and “2-custom” for y. Now slide back down and lets get to work.

If you test out the animation now, nothing will happen, not even the diagonal movement we had before.

Custom Curves:
On each custom curve place four keyframes. Now with the individual keyframes selected, slide the values of each tween until you get the desired placement of the ball on each axis. Now we can mess with the curves to effect the dynamics of how the ball bounces from one side to the next. We can even create nice arc effects to really pull off a convincing animation.

We only need to do this for the x, y and z properties. The other properties like scale, color and filters allow you to apply curves directly in their tween rows. The three “statual” properties do not allow any curves to be applied directly, all you can do is apply an existing tween from the tweens section of the Motion Editor. If you try to keyframe your x and y properties on the timeline and apply a tween, you will notice the tween is applied across all frames and you will not get the desired result. The movement will work, but the easing will not.

I finished off the animation with some blur and a shadow animation. I just copied the ball tween, added an advanced color setting, broadened the x and y extremes and tweaked the blur.

Tip:
Though you cannot save tween curves, (they do this in photoshop, so hopefully on next release) you can copy curves from one object’s Motion Editor to another. Once you have an animation in the can, you can save it as a motion preset. This is really powerful, it even saves the blank keyframe I place at the end of my tweans for tidiness.

Other Pros to the Motion Editor:
You can stretch or condense the animation by dragging the last frame and all the keyframes adjust proportionally. You also can change instance properties like the instance type MovieClip to Graphic, instance name and loop properties once then it applies across the whole tween.

There may be a better way of doing this but if you want to continue an animation and start where the previous tween ended. It may be best to start a new tween instead of stretching things out and adjusting your tween curves inside the Motion Editor to make room. The best way I have figured out how to do this is to grab the tween on the timeline, hold down option (Mac) or alt (PC) as you drag it to an empty spot on the timeline, which will make a copy. Convert the tween to Frame by Frame Animation. Now you can remove all the frames but the last one which is right where the previous tween left off. It would be nice it this was available as a one step command too.

In the sample below, I keyframed the x and y extremes, though I wanted the animation to start a little to the right of extreme left. I understand the tweens start and 0 (extreme left) and end at 100 (extreme right), but these are not really just tweens anymore, are they? To make this work without making two animations, I set frame 1 to the desired x coordinate and the alpha on the previous frame to 0. I then copied the tween, using the method above, and pulled out the second frame to place over the first frame on the timeline.

The new tweening tools are very powerful and will help us produce better quality animations, I am glad they still have the option of a classic tween as I still use that from time to time for really simple stuff (it is just faster) along with shape tweens. I do not look at this as a replacement of the tools I am used to using, but a new really powerful option when animating. You do have to plan ahead a little and it will take a extra time setting up custom tween and tweaking things to look right. We had to do a lot of animation slight-of-hand tricks to get things to look right before, so you have to admit this is cool. Just remember with great power comes great responsibility (Ben Parker).

Download Source

Technorati Tags: , , , , , , ,

| 4 Comments » | facebook:

4 Comments »

  1. Nice tutorial.

    One comment, however. In the Extremes section you write “Instead scroll down to the tweens row…” when I think you meant Eases. Though the UI is familiar (thanks to AE, Final Cut, etc), it took me a while to figure out what you were talking about.

    Thanks again!

    Comment by kasualty — February 23, 2009 @ 3:05 am

  2. Thanks for catching that. Sorry about the confusion.

    Comment by taterboy — February 23, 2009 @ 8:22 am

  3. Say web did a tutorial on it….with Barack Obama….

    Here is the link…
    http://say-web.com/?p=546

    Comment by mrpcsol — June 8, 2009 @ 10:05 am

  4. Thanks for this great tutorial. It was easy to understand and very useful.

    Comment by cyprus law firms — May 9, 2011 @ 1:29 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment

*