[pixLib] - Je tween, tu tweens, nous multi-tweenons…
Par Laurent Deketelaere le jeudi, octobre 11 2007, 15:11 - Flash plateforme - Lien permanent
Aujourd'hui, petit tour du côté des transitions de pixLib.
Avec l'arrivé de Flash MX2004, on a vu apparaître les classes de transitions dans le dossier mx de Flash, pour beaucoup l'utilisation de la classe Tween est devenu quelque chose de courant, pour les autres petits cours accéléré.
Qu'est ce qu'une Tween ?
La classe Tween permet de réaliser une interpolation (modification dans le temps) sur une propriété numérique.
Exemple basic :
var tw:Tween = new Tween(obj, "nProp", null, 0, 100, 2, true);
Dans l'exemple ci-dessus on fait varier la propriété "nPop" de l'objet "obj" de 0 à 100 sur une durée de deux secondes. Sur cette classe vient se greffer, une série d'options, cf. l'API de la classe Tween de Adobe/Macromedia.
// fin du cours
Voyons maintenant ce que nous offre pixLib.
Commençons par le commencement, l'interface ITween < IBasicTween < Command.
Voici liste des méthodes que doit posséder une classe qui implémente ITween :
public function execute( e: IEvent ) : Void;
public function setEasing(f:Function) : Void;
public function start() :Void;
public function stop() :Void;
public function addListener(oL:ITweenListener) : Void;
public function removeListener(oL:ITweenListener) : Void;
public function addEventListener(e:TweenEventType, oL) : Void;
public function removeEventListener(e:TweenEventType, oL) : Void;
Cette interface est implémenté par cinq classes, chacune ayant un but différent : TweenFLV, TweenFPS, TweenMS, MultiTweenFPS, MultiTweenMS.
TweenFPS < BasicTweenFPS < AbstractTween
Hormis le changement d'ordre des paramètres, TweenFPS se construit de la même manière que la classe Tween de Penner (Adobe).
var t : TweenFPS = new TweenFPS(mc, '_alpha', 0, 30, 100);
t.start();
TweenFPS( oT, sP, nE:Number, nMs:Number, nS:Number, fE:Function);
- oT - Objet cible.
- sP - methode ou propriété qui serra modifié.
- nE - valeur finale (but).
- nFps - durée de la transition en images clés.
- nS - (facultatif) valeur de départ (origine).
- fE - (facultatif) fonction de transition (easing).
TweenMS < BasicTweenMS < AbstractTween
Cette classe peut-être comparé à une Tween de Penner qui prend true comme dernière paramètres, en fait la seule différence avec TweenFPS est que la durée est donné en mili-seconde et non pas en nombre d'image clés, ce qui en théorie évite d'avoir la durée de la transition lié au framerate de l'animation. Personnellement c'est le système que je privilégie.
TweenFLV < BasicTweenFLV < AbstractTween
Cette classe n'a pas d'équivalence dans le package d'Adobe, elle a pour particularité d'utiliser un VideoDisplay comme métronome. Ce qui peut-être utile pour synchroniser des animations avec un fichier vidéo.
var _video : VideoDisplay = VideoDisplay.buildVideoDisplay( video );
var t : BasicTweenFLV = new BasicTweenFLV(_video, 0, mc, '_alpha', 0, 2000, 100);
t.start();
_video.load( "video.flv" );
TweenFLV( vd:VideoDisplay, offset:Number, oT, sP, nEnd:Number, nMs:Number, nStart:Number, fE:Function);
- vd - VideoDisplay utiliser comme métronome.
- offset - offset :p
- oT - Objet cible.
- sP - methode ou propriété qui serra modifié.
- nE - valeur finale (but).
- nMS - durée de la transition en mili-seconde.
- nS - (facultatif) valeur de départ (origine).
- fE - (facultatif) fonction de transition (easing).
Voilà pour ce qui est des transitions basic. :)
Voyions maintenant les multiTweens : MultiTweenFPS && MultiTweenMS (Attention: la doc pour les multiTweens n'est pas à jour).
Basé sur le même principe que les tweens précédentes, les multiTweens peuvent recevoir un tableau d'éléments à modifier, Ce qui est très pratique lorsque par exemple on veut déplacer un élément sur la scène en _x et en _y.
exemple :
var t0:MultiTweenMS = new MultiTweenMS( mc, ["_x", "_y", "_alpha"], [600, 500, 0], 1200 );
var t1:MultiTweenMS = new MultiTweenMS( [mc0, mc1, mc2], ["_x", "_y", "_alpha"], [600, 500, 0], 1200, [0, 0, 100] );
var t2:MultiTweenMS = new MultiTweenMS( this, "arrayProperty", [600, 500, 0], 1200 );
Voilà pour le petit tour d'horizon concernant les Tweens dans pixLib.
bye
Pour aller plus loin :
- [pixLib] - métronome et temporisation, les tweens utilise comme système de temporisations les Beacons.
- [pixLib] - Une programmation événementielle typée, pour mieux comprendre le système événementielle de pixLib.
- Introduction à Kairos et au temps réel, Kairos est une extension de pixLib permettant de développer des applications dites temps réel.
Derniers commentaires