Vous êtes ici : Accueil - Ressources Flash - Motion tween et easy-equation de R. Penner.
Cette article reprend le tutorial de Flash Forum écrit par Ekameleon et se base sur les réflexions et développements abordés dans le post sur les equations de mouvement de Robert Penner.
Pendant près d'un an et demi, j'ai utilisé la classe de Eka, plus particulièrement sa classe multi-propriétées qui se trouve quelque part sur le forum Flash.Médiabox avant de me dire qu'elle était vraiment trop statique et le moindre changement dans le code se répercutait dans la totalité du code d'un projet. Comme tout code fournit sur un forum d'entraide, je ne pouvais m'en prendre qu'à moi même. \*O*/
Les principaux besoins de modification qui se sont fait sentir au fil du temps concernait le nombre indéfini de propriétées à "tweener" et le déclanchement d'un callback en fin de tween. En plus de cela, j'avais vraiment envie de propriétées plus souple pour gérer la vitesse et le tween de chaque Movieclip.
A partir de ces 4 contraintes, j'ai pu réellement recodé la totalité du code, virer les classes Property et Multiproperties présentent dans le script originel , et réduire le code à deux propriétées et deux méthodes, tous prototype de la classe MovieClip.
/* Prototypes motiontween pour la classe MovieClip
* Nécessite les easing_equations de Robert Penner
* #include "easing_equations.as"
* Motion.as © 2005.1. Roikku.com / Mushi-crew.com */
// méthodes de création de Tween.
MovieClip.prototype.createNewMotion = function () {
this._mp = new Object(), this.time = 0 ;
ASSetPropFlags(this, "time,_mp", 3, 0);
for ( var i in _a=arguments[0]) {
if (i == "callback") {
this.callback = _a[i];
ASSetPropFlags(this, "callback", 3, 0);
} else {
var prop = "_"+i, change = _a[i]-this["_"+i];
this._mp["p"+prop] = { prop:prop, debut : this[prop], change : change };
}
}
this.onEnterFrame = this.onMotion;
}
// méthodes de rafraissiment des propriétées.
MovieClip.prototype.onMotion = function () {
for ( i in m=this._mp ) {
this[ m[i].prop ] = Math.round( Math[ this.tween ] (this.time, m[i].debut ,
m[i].change, this.duree)) ;
if ( this.time > this.duree ) delete m[i] ;
}
if ( this.duree < ++this.time ) {
delete this.onEnterFrame;
if (this.callback != undefined) {
var c = this.callback.c, f = this.callback.f, a = this.callback.a;
(a == undefined) ? c[f]() : c[f].apply(c instanceof MovieClip ? c : null,a);
}
}
}
// valeurs par défaut de la vitesse et du tween.
MovieClip.prototype.duree = 10;
MovieClip.prototype.tween = "easeOutExpo";
// protection des méthodes
ASSetPropFlags( MovieClip.prototype, "createNewMotion,onMotion", 7, 0 );
// protection des propriétées
ASSetPropFlags( MovieClip.prototype, "duree,tween", 3, 0 ); /* Exemple d'utilisation */
// fonction callback de test :
function onEnding () { trace ( arguments ); }
// attach d'un clip situé dans la librairie :
this.attachMovie("clip", "clip", 1, { _x : -20, _y : -20, _alpha : 0 } );
// création du conteneur des variables d'arrivée pour le clip
var conteneur = { x : 250, y : 200, alpha : 100,
// déclaration du callback (facultatif)
callback : { c:_global, f:"onEnding", a:["fin de transition"] } };
// application d'un motiontween avec les paramètres du conteneur
this.clip.createNewMotion( conteneur );
/* Dans cet exemple, les propriétées duree et tween ne sont pas redéfinies pour réutiliser celles déclarées par défaut dans Motion.as */
Quelques précisions sur l'utilisation des propriétées dans le motion-tween :
Ces prototypes marchent avec toutes les propriétées de la classe MovieClip acceptant un nombre et uniquement un nombre comme variable. Cela s'étend bien sûr aux propriétées créées spécialement comme les propriétées de couleurs de Robert Penner. Mais il faut garder en mémoire que les propriétées créées à l'aide de addProperty sont, et resteront plus lentes qu'un setter tout seul.
Les propriétées définies dans l'objet conteneur ne doivent pas avoir de underbarre "_" afin que les valeurs réelles de départ et d'arrivée de s'écrasent pas dans la méthode createNewMotion. A l'inverse, les propriétées créées à l'aide de addProperty doivent en contenir un si elles sont destinées à servir dans le motion-tween.
L'argument callback dans le conteneur est facultatif. S'il est présent, il doit être une occurence de la classe Object et définir le namespace où se trouve la fonction à appeler et la fonction elle-même. Il est possible de passer des arguments au callback; ceux-ci doivent être contenu dans un tableau.