geek space web solutions

Créer son propre type de transition Tween en AS3

Friday, 18 November 2011 12:50
There are no translations available.

transition tween
Si vous faites de l'AS3, vous connaissez très probablement les Tweens (Greensock, Caurina), ils vout permettent d'animer des éléments en "pure AS3" (sans Timeline). Dans cet article j'explique comment construire/utiliser une transition personnalisée.

De base, avec les Tweens, il vous est proposé plusieurs types de transition (imaginer une transition d'un point à un autre...), le type "linear" est une interpolation linéaire classique. En revanche, vous pouvez trouver des types de transition comme easeOut, easeIn, easeInQuad, easeInOutQuart, easeInOutBack, easeInCirc... (Je vous invite à vous rendre sur les sites de GreenSock et Caurina...)

transition tween elastic as3

Je me suis intéressé en particulier au type "easeOutElastic", je voulais simplement atténuer l'amplitude de cette transition... Pour cela, j'ai recréé une tranisition personnelle en reprenant le code d'origine de la transition "easeOutElastic".

import caurina.transitions.Tweener;

var myTransition = function(t:Number, b:Number, c:Number, d:Number, p_params:Object = null):Number {
if (t==0) return b;
if ((t/=d)==1) return b+c;
var p:Number = !Boolean(p_params) || isNaN(p_params.period) ? d*.3 : p_params.period;
var s:Number;
var a:Number = !Boolean(p_params) || isNaN(p_params.amplitude) ? 0 : p_params.amplitude;
if (!Boolean(a) || a < Math.abs(c)) {
a = c;
s = p/4;
} else {
s = p/(2*Math.PI) * Math.asin (c/a);
}
return ((a/3)*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);

};


Tweener.addTween($boule1, {y:posY_depart_boule1*s, time:3, delay:0.2, transition:myTransition} );
Dans l'exemple ci-dessus, j'ai simplement divisé par 3 la variable "a" ((a/3) à la ligne où se trouve le return) ("a" correspond à l'amplitude) pour obtenir un effet d'élastique avec moins d'amplitude...

Il est probablement possible d'obtenir le même résultat en étendant l'effet de transition déjà existant de la manière suivante :
import caurina.transitions.Tweener;
import caurina.transitions.Equations;

var myTransition = function(t:Number, b:Number, c:Number, d:Number):Number { var s:Number = 10; // overshoot return Equations.easeOutBack(t, b, c, d, s); };

Tweener.addTween(this.bola2, {_y:200, time:1, transition:myTransition});
 

Add comment


Security code
Refresh

Sections


Last articles

Ouvrir une Squeezebox en jav... Activer le débogage USB sur ... Mobile application and USB D... Scythe Mugen 2 Cooler test... Contrôler un SWF externe - E... Écouter l'événement SOUND_CO... Component 'Classic Contact F... Qu'est-ce que StageVideo ?... Accélérer la fermeture de Wi... Customiser le bouton Retour ...

Sondages

Do you think HTML5 can completely replace Flash ?
 
Would you be interested in an online XML editor ?
 

Paypal

paypal

Code du plugin Joomla AutoSEO 1.2 par www.geek-space.fr