d.c.Holth

Flash applications often (always?) need moving and changing MovieClip properties dynamically. This often requires the user to write multiple lines of tweening code to achieve a very simple result. For example, to move a MovieClip from its current position to point 0, 0 of the stage would require at minimum, two lines of code, two Tween objects and four referances to the target MovieClip.

// Tween the x value
var myTweenX:Tween = new Tween(myMovieClip_mc, “_x”, mx.transitions.easing.Regular.easeOut, myMovieClip_mc._x, 0, 8);

// Tween the y value
var myTweenY:Tween = new Tween(myMovieClip_mc, “_y”, mx.transitions.easing.Regular.easeOut, myMovieClip_mc._y, 0, 8);

This lead me to develop the EasyTween class. The EasyTween takes a target MovieClip and tweens its properties from their current values to new ones. To accomplish the same move as created above with the easy tween class is simply one line of code.

var et:EasyTween =
new EasyTween(myMovieClip_mc, “moveTween”, [0, 0]);

To tween a filter without the EasyTween class is an even more arduous process. The code below will create and tween a purple GlowFilter on MovieClip where none was before.

// Create the initial GlowFilter and apply it to the MovieClip

var myGlowFilter = new GlowFilter(0xFF00FF, 0, 0, 0, 1);
myMovieClip_mc.filters = [myGlowFilter];

// Now tween all the variables in the GlowFilter
var myTweenAlpha:Tween = new Tween(myGlowFilter, “alpha”, mx.transitions.easing.Regular.easeOut, myGlowFilter.alpha, 1, 8);
var myTweenBlurX:Tween = new Tween(myGlowFilter, “blurX”, mx.transitions.easing.Regular.easeOut, myGlowFilter.blurX, 50, 8);
var myTweenBlurY:Tween = new Tween(myGlowFilter, “blurY”, mx.transitions.easing.Regular.easeOut, myGlowFilter.blurY, 50, 8);

// Update and reapply the filter to the movieclip everytime the variables change
myTweenAlpha.onMotionChanged = function() {
myMovieClip_mc.filters = [myGlowFilter];
};

Now lets convert that same filter tween to one line of code using EasyTween:

var glowEasyTween:EasyTween = new EasyTween(myMovieClip_mc, “filterTween”, [new GlowFilter(0xFF00FF, 1, 25, 25)]);

The EasyTween class takes care of all the tweening needed for the filter. It will even examine the target MovieClip to see if a GlowFilter is already applied. If one is found, it will use the variables from that GlowFilter to start at. If no filter exists already, it starts all the values from zero, thus giving the effect of a filter appearing on a MovieClip.

It also keeps track of any other filters that are applied to the MovieClip so you don’t need to worry about overwriting other filters.
The six different tween types available in the EasyTween class are::

• moveTween: Moves a MovieClip from its current _x, _y values to new ones.
• scaleTween: Scales a MovieClip from its current _xscale, _yscale values to new ones
• dimensionTween: Changes a MovieClip’s _width, and _height values from its current
• alphaTween: Changes a MovieClip’s _alpha value to a new one
• filterTween: Changes a MovieClip’s current version of the filter to a new one. If none exist, it will create a new filter with 0 values and tween up from there. Filters supported are Blur Filter, GlowFilter, DropShadowFilter, BevelFilter, ColorMatrixFilter.
• tintColorTween: Tints a target MovieClip to the desired colors. Users can enter in a hex color value or choose enter a string value for RED, GREEN, BLUE, PURPLE, YELLOW, CYAN, GREY, NEGATIVE or ORIGINAL.
• brightnessTween:Adjusts the brightness of the MovieClip

An EasyTween has three required parameters, and three option parameters. The required parameters (in order) are the target MovieClip, a String denoting the tween type (as listed above) and the arguements. The arguments are passed in brackets as an array. For example, if using a moveTween the arguments array woudl be [x, y]. If using a filter tween there is only the filter passed in the array, [new BlurFilter(15,15)]. The tintColorTween has the option of stating the color value and the amount of color to add. If you wanted the entire MovieClip to be pure red, one would use [”RED”, 1], or if one doesn’t want quite as much red tint one could pass [”RED”, .5].

The three option parameters (option only because they have default values), are duration, ease function and whether or not to use seconds. Duration is the speed of the tween, which defaults to 8 (purely a personal preferance). The ease function, similar to how Adobe’s Tween class works, is something like mx.transitions.easing.Bounce.easeOut (Devon from One-By-One Design has a great tutorial on the different easing options) The final parameter is whether or not to use seconds for the duration. Passing True to this value will cause the duration parameter to read as the number of seconds the tween should take, where it now is the number of frames.
You can download the EasyTween class in the downloads section.