The New Motion Tween

November 2nd, 2008 | Posted in Blog

One of the biggest changes in Flash CS4 is the way that motion tweens are created. Rather than inserting keyframes along the timeline to control your animation, you simply tell Flash where you’d like to use a motion tween, and the program creates the keyframes for you. It’s a pretty radical departure from the old animation workflow, but as I played with the new feature set I found it to be much faster and quite intuitive once you’re familiar with the object-driven approach.

It works like this: you add a symbol to the stage, right click, and choose “Create Motion Tween.” Then, scrub the timeline to the place where you’d like the symbol to move, and drag it to a new position on the stage. Flash automatically creates a keyframe, which is noted in the timeline by a small black diamond, and the animation is complete. You’ll also notice that a motion path appears on the screen connecting the two points, and here’s where things get interesting: you can edit the motion path using the selection tools to create any type of curved motion that you like. Dots along the path indicate where the symbol will be in each frame, and give you a sense of the speed of the animation.

Once a motion tween is added, the path can be adjusted to create a curve.

Once the animation is created, it can be modified by either dragging the endpoints of the motion path, by dragging the tweened frames in the timeline to automatically scale and adjust the tween to be longer or shorter, and by selecting the entire motion path and moving the entire animation as one unit. These abilities promise to save many hours adjusting and tweaking animations that in a keyframe-based timeline would have taken a great deal of time and patience.

The new system is not limited to position either: every attribute of an object can be tweened, such as its skew, color filters, alpha, and even its three-dimensional rotation and position (which I’ll look at a little later). All of these features allow you to create some fairly complex animations in a matter of minutes, leaving more time for experimentation and fine-tuning. I think this is an excellent new feature, but if you’re not convinced, you can still add motion tweens the old-fashioned way by selecting “Create Classic Tween” instead.

Next up: a look at some more new animation tools, including 3D position and rotation, and the new Motion Editor.