Tweening part 3 – scaling, easing, blur

 

A slightly different approach to the Tweening Class – Now I’m using it to dynamically change the _xscale and _yscale values of a movieclip on roll over. In conjunction with the Elastic.easeOut and BlurFilter we’re getting nice effects needed for juicy user interaction. Experimenting with it is fun.

Click to see it running here.


import mx.transitions.Tween; // first the import
import flash.filters.BlurFilter // some eye-candy
// YourMC needs a filter in the beginning
YourMC.filters=[new BlurFilter((205-100-YourMC._xscale),(205-100-YourMC._xscale),3)];
MovieClip.prototype.expand = function(speed,from,to) //movieclip extended
{
// this needs a name that would be visible in the onMotionChanged
var what = this;
//tweens for both scales and _x for moving MC to center
var scale_x:Tween = new Tween(this, "_xscale",mx.transitions.easing.Elastic.easeOut, from, to, speed, false);
var scale_y:Tween = new Tween(this, "_yscale",mx.transitions.easing.Elastic.easeOut, from, to, speed, false);
scale_x.onMotionChanged = function()
{
// dynamic blurring with _xscale dependency
scx = what._xscale;
what.filters=[new BlurFilter((205-100-scx),(205-100-scx),3)];
}
};
// example usage
somebutton.onRollOver = function()
{
YourMC.expand(70,YourMC._xscale,250);
};
somebutton.onRollOut = function()
{
YourMC.expand(70,YourMC._xscale,100);
};

Note that it is highly important not to use the tweened MC as a button as well – in this case I used a fake button (’somebutton’) in order to avoid glitches (rollouts and rollovers would happen automatically if the MC resized). Stay tuned for the next parts of the Tweening series. You can download the .FLA source here.

Have Fun,
Flaim