TweenLite: How to Tween an Animation by use of frames and frameLabels

When working with tweens in Flash we often create custom time-line based animations for various elements of the project. These time-line animations can sometimes need to be played in reverse by the frame count and not by a time duration. If one utilizes the TweenLite or TweenMax Tweening Framework this task can easily be completed by use of the frameLabel and useFrames parameters.

The frameLabel property defines the name of the frame that the movie clip should be tweened to enabling us to tween a movie clip both forward and backwards.

TweenLite.to( movieclip, 1.5, { frameLabel:"intro" } );

The above example will tween to the labeled frame over 1.5 seconds. If instead we want our animation to play over 60 frames we would use the useFrames property which treats the second parameter as the number of frames and not number of seconds.

TweenLite.to( movieclip, 60, {frameLabel:"intro", useFrames:true} );

Lastly we may want to have the animation play back to a previous label using the exact animation duration that it was created with. This task although more complicated can be accomplished the first step is to set the ease type to Linear.easeNone which will make the animation play uniformly. The second step is to know the exact number of frames between the current frame of the movie clip and the desired frameLabel. Flash does not provide an interface for obtaining the frame number of a labeled frame and instead you will have to create your own utility and formulas for determining the duration. A simple method would be to have an associated array or dictionary of the frame labels with their corresponding frame number that you can then get the difference of the current frame and that value.

TweenLite.to( movieclip, frameDiff, {frameLabel:"intro", useFrames:true, ease:Linear.easeNone} );
// Flash // Tips & Tricks //

Comments & Questions

Add Your Comment