Difference between revisions of "Tweener"

From Wikicliki
Jump to: navigation, search
 
(11 intermediate revisions by 2 users not shown)
Line 2: Line 2:
  
 
*[http://hosted.zeh.com.br/tweener/docs/en-us/ Tweener Documentation]
 
*[http://hosted.zeh.com.br/tweener/docs/en-us/ Tweener Documentation]
 +
*[http://www.zedia.net/2007/actionscript-3-tweener-basic-tutorial/ Tweener AS3 Tutorial]
 
*[http://tweener.googlecode.com/svn/trunk/examples/ Examples (along with source fla)]
 
*[http://tweener.googlecode.com/svn/trunk/examples/ Examples (along with source fla)]
 +
 +
== Blur ==
 +
 +
 +
<pre>import caurina.transitions.Tweener;
 +
import caurina.transitions.properties.FilterShortcuts;
 +
FilterShortcuts.init();
 +
 +
Tweener.addTween(contact_btn,{_Blur_blurX:5,_Blur_blurY:5,  _Blur_quality: 2, time:1, transition:"easeInOutExpo"});
 +
</pre>
 +
 +
''' _Blur_quality: 2''' - is to attain a high quality, which gives an almost gaussian blur effect! otherwise you just have some wanky looking motion blur in each seperate x & y direction.
 +
 +
== My sample implemenation (very simple example) ==
 +
 +
<pre>import caurina.transitions.Tweener;
 +
 +
invest_mc.onRollOver = function () {
 +
invest_mc.gotoAndPlay("open");
 +
Tweener.addTween(save_mc, {_x:168.5, time:0.3, transition:"easeInOutExpo"});
 +
Tweener.addTween(protect_mc, {_x:58.5, time:0.3, transition:"easeInOutExpo"});
 +
};
 +
 +
invest_mc.onRollOut = function () {
 +
invest_mc.gotoAndPlay("close");
 +
Tweener.addTween(save_mc, {_x:376.4, time:0.3, transition:"easeInOutExpo"});
 +
Tweener.addTween(protect_mc, {_x:266.5, time:0.3, transition:"easeInOutExpo"});
 +
}
 +
</pre>
 +
 +
== Referencing the parent / main timeline ==
 +
 +
<pre>Tweener.addTween( this.parent.getChildByName('save_mc'), {x:430, delay:3, time:1,  transition:"easeOutBack"});</pre>
 +
 +
== onOverwrite ==
 +
 +
VERY USEFUL!
 +
 +
<pre>
 +
// Applies two tweenings on a movieclip, warning when the first is overwritten (AS2)
 +
onOvr = function() {
 +
trace ("A tweening has been overwritten at " + this);
 +
delete init;
 +
};
 +
function init(){
 +
Tweener.addTween(myMovieClip, {_x:100, time:1, onOverwrite:onOvr});
 +
}
 +
 +
init();
 +
 +
</pre>
 +
 +
== base==
 +
 +
groups of tweens can have the same base:
 +
 +
http://hosted.zeh.com.br/tweener/docs/en-us/parameters/base.html
 +
 +
[[Category:Programming]]

Latest revision as of 08:44, 12 April 2010

Tweener is an actionscript class library which lets you make all sorts of amazing easing in and out animation effects.

Blur

import caurina.transitions.Tweener;
import caurina.transitions.properties.FilterShortcuts;
FilterShortcuts.init();

Tweener.addTween(contact_btn,{_Blur_blurX:5,_Blur_blurY:5,  _Blur_quality: 2, time:1, transition:"easeInOutExpo"});

_Blur_quality: 2 - is to attain a high quality, which gives an almost gaussian blur effect! otherwise you just have some wanky looking motion blur in each seperate x & y direction.

My sample implemenation (very simple example)

import caurina.transitions.Tweener;

invest_mc.onRollOver = function () {
invest_mc.gotoAndPlay("open");
Tweener.addTween(save_mc, {_x:168.5, time:0.3, transition:"easeInOutExpo"});	
Tweener.addTween(protect_mc, {_x:58.5, time:0.3, transition:"easeInOutExpo"});	
};

invest_mc.onRollOut = function () {
	invest_mc.gotoAndPlay("close");
	Tweener.addTween(save_mc, {_x:376.4, time:0.3, transition:"easeInOutExpo"});	
	Tweener.addTween(protect_mc, {_x:266.5, time:0.3, transition:"easeInOutExpo"});	
}

Referencing the parent / main timeline

Tweener.addTween( this.parent.getChildByName('save_mc'), {x:430, delay:3, time:1,  transition:"easeOutBack"});

onOverwrite

VERY USEFUL!

// Applies two tweenings on a movieclip, warning when the first is overwritten (AS2)
onOvr = function() {
	trace ("A tweening has been overwritten at " + this);
delete init;
};
function init(){
Tweener.addTween(myMovieClip, {_x:100, time:1, onOverwrite:onOvr});
}

init();

base

groups of tweens can have the same base:

http://hosted.zeh.com.br/tweener/docs/en-us/parameters/base.html