View Ladislav Zigo's profile on LinkedIn

 
laco.wz.cz
Web


MovieClip.tween()

Availability

Flash Player 6.

Usage

my_mc.tween(property, pEnd, seconds, animType, delay, callback, extra1, extra2)

Parameters

property property(ies) to be tweened (string, array of strings)

pEnd end property value(s) (number, array of numbers)

seconds
seconds to reach the end value, /duration of tween/ (number) defaults to 2

animType
animation equation type (string, function or object from custom easing tool) defaults to "easeOutExpo"

string as animType

You can use following strings as types of animation (easing equations by Robert Penner)

"linear",
"easeInQuad","easeOutQuad","easeInOutQuad","easeOutInQuad"
"easeInCubic","easeOutCubic","easeInOutCubic","easeOutInCubic"
"easeInQuart","easeOutQuart","easeInOutQuart","easeOutInQuart"
"easeInQuint","easeOutQuint","easeInOutQuint","easeOutInQuint"
"easeInSine","easeOutSine","easeInOutSine","easeOutInSine"
"easeInExpo","easeOutExpo","easeInOutExpo","easeOutInExpo"
"easeInCirc","easeOutCirc","easeInOutCirc","easeOutInCirc"
"easeInElastic","easeOutElastic","easeInOutElastic","easeOutInElastic"
"easeInBack","easeOutBack","easeInOutBack","easeOutInBack"
"easeInBounce","easeOutBounce","easeInOutBounce""easeOutInBounce"

example:
my_mc.tween("_x",100,3,"easeOutElastic")

function as animType:

you can use easing function generator from Timothee Groleau to generate your function: e.g.:

waveEasing = function(t,b,c,d){
    // ... code from generator 
}; 
my_mc.tween("_x",100,3,waveEasing);
   

object as animType:

you can use custom easing tool from menu window->other panels ->custom easing tool
object must have properties pts (list of control point),ease (function) e.g.:

customEasing = {};
// ... copy and paste here generated code
my_mc.tween("_x",100,3,customEasing);

*this easing is bit slower than previous two methods

delay delay in seconds to start animation (number) defaults to 0

this parameter allows you create cool sequential tweens:

my_mc.('_x', 200,0.5);
my_mc.('_x', 400,0.5,'easeoutcirc',0.5)
my_mc.tween('_width', 300,1,'easeoutelastic',1);
my_mc.tween('_height', 300,1,'easeoutelastic',2);
my_mc.colorTo(0xFF0000,1,'easeinexpo',3);


callback function to be called when finished (function or object with scope, func and args or string)

function as callback

function onEnd(){
trace("onEnd");
}
my_mc.tween("_x",100,1,"linear",0,onEnd);

// scope of function is my_mc._parent

object as callback

You can pass as callback object with properties

func - function to be called when tween is finished
scope - scope of function (this in called function)
args - array of arguments passed to function

updfunc - reference to function to be called on every update
updscope - scope of update function (this object)
updargs - array of arguments passed to update function

startfunc - reference to function to be called on start of tween
startscope - scope of start function (this object)
startargs - array of arguments passed to start function

* internal mechanism is: func.apply(scope,args)

// on _root
game={};
game.players = ["john","steve"];
game.showScore = function(id, score){
trace("(this==_root.game) is "+(this==_root.game));	
trace(this.players[id] + " has " + score + " points");
}

// somewhere in nested movieclip
var callback = {scope: _root.game, func: _root.game.showScore, args:[1,39]};
my_mc.tween("_x",100,1,"linear",0,callback);
/* or in 1 line:
my_mc.tween("_x",100,1,"linear",0,{scope: _root.game, func: _root.game.showScore, args:[1,39]});
*/

//output after finishing tween:

(this==_root.game) is true
steve has 39 points

string as callback

callbacks can be too defined as strings

my_mc.tween("_x",100,1,"linear",0,'_root.gotoAndPlay(8)');

it is very problematic determine type of primitive parameters(number, string, boolean), in this case is 8 string

for save type of passed argument use references:

function callMe(my_obj, my_nr, my_bool) {
trace(my_obj +">> typeof(my_obj) is "+ typeof(my_obj));
trace(my_nr +">> typeof(my_nr) is "+ typeof(my_nr));
trace(my_bool +">> typeof(my_bool) is "+ typeof(my_bool));
}

test_obj = {name: "test", id: 10};
test_bool = true;
test_nr = 99;

my_mc.tween("_x",100,1,"linear",0,'_root.callMe(test_obj,test_nr,test_bool)');

Do not add spaces between argumets

extra1 optional animation parameter.
means AMPLITUDE (a) when animType *elastic
means OVERSHOOT AMMOUNT (s) when animType *back

extra2
optional animation parameter.
means PERIOD (p) when animType = *elastic

Returns

Nothing




download | examples | installation | custom Easing Tool | links