ITP DriveBy: Flash Motion

Timeline Animations

Timeline animations are the traditional way of authoring motion in Flash. When creating cel animations and streaming audio to sync with motion, use of the timeline remains the preferred method of animating.

Flash 8 Filters

filters palette

New in Flash 8 is the filters menu, which allows for dynamic drop shadows, blur, bevel and emboss, and glow effects. These types of effects previously had to be created in a bitmap editor and imported in as a bitmap image. Animators would create several tweens to emulate an effect. Timeline tweening of these properties is easy; simply add the desired filter with the plus (+) and make sure different properties are set from one tweened keyframe to the next.

The Timeline's Limitations

The limitations with timeline animations become clear when looking for more complex motion. Timeline animations using random equations are impossible, and easing is limited to the basic slider on the properties panel. Furthermore, to create an ease-in to ease-out effect would mean creating two separate tweens.

From a file size perspective, every frame in the timeline adds to the final swf's file size. Although each additional frame is usually nominal, it begins to add up (You can view a breakdown of the swf’s size by generating a size report under File > Publish Settings > Flash: Options Generate Size Report), not to mention make the application more cumbersome to edit. I have often used the block of code below to pause the timeline, a common requirement when working with long Flash movies.

Download Source Download Source

/*
this function pauses the movie for a set number of seconds (sec)
targMC represents the MovieClip timeline the function is called on.

Example of applying function
pauseTime(this,5);
*/
function pauseTime(tMC:MovieClip, sec:Number):Void {
tMC.stop();
sec *= 1000;
var wait:Number = setInterval(paused, sec);
function paused() {
clearInterval(wait);
tMC.gotoAndPlay(tMC._currentframe+1);
}
}

Another trick that can be used with the Flash timeline is reversing the timeline with code. By dynamically rewinding an animation, we are effectively recycling the timeline tween and preventing unnecessary frames.

Download Source Download Source

/*
When called, this function attaches an empty MovieClip
and places an onEnterFrame action on the empty MC, which tells its _parent
MovieClip to start playing backwards until it reaches a certain framenumber
If it reaches the frame number, then it removes the action and the empty MovieClip
*/
function rewinder(tMC:MovieClip, frame:Number):Void {
tMC.createEmptyMovieClip("rewinder_mc", tMC.getNextHighestDepth());
tMC.rewinder_mc.onEnterFrame = function():Void {
var path:MovieClip = tMC.rewinder_mc._parent;
path.gotoAndStop(path._currentframe-1);
if (path._currentframe<=frame) {
delete this.onEnterFrame;
this.removeMovieClip();
}
};
}

Next, creating motion with ActionScript ->

Presented by