[MotionPlayer] - La maitrise des animations
Par Laurent Deketelaere le mercredi, novembre 14 2007, 16:09 - Flash plateforme - Lien permanent
Salut
Je ne sais pas vous, mais je suis régulièrement confronté au problème de devoir gérer les animations (transitions) que les créas ont fait, enfin surtout gérer les événements de fin d'animation.
Voici ma solution :
Dans un premier temps, je plaçais un appel de méthode global sur la dernière image clé de l'animation, que je récupérai au sein de mon application (cf. [pixLib] - communication entre un graphiste et un développeur).
Mais dans ma quête du «plus de code pour les graphistes!» je n'étais pas satisfaits. J'ai donc opté pour une deuxième solution qui est de jouer l'animation à partir d'une Tween! Cette solution apporte en plus la possibilité de gérer le temps des animations sans tenir compte du FPS.
La semaine dernière, je me suis enfin décidé à créer une classe qui automatise la deuxième solution, au lieu de chaque fois créer une Tween par animation. :p
Alors voilà :
[actionscript] import com.bourre.log.PixlibStringifier; import com.bourre.transitions.ITweenListener; import com.bourre.transitions.TweenEventType; import com.bourre.transitions.TweenMS; /** * @author [ali_o_kan] - Laurent Deketelaere */ class org.triptyk.components.MotionPlayer { public static var onStartEVENT : TweenEventType = TweenEventType.onStartEVENT; public static var onStopEVENT : TweenEventType = TweenEventType.onStopEVENT; public static var onMotionFinishedEVENT : TweenEventType = TweenEventType.onMotionFinishedEVENT; public static var onMotionChangedEVENT : TweenEventType = TweenEventType.onMotionChangedEVENT; private var _mcMotion : MovieClip; private var _tPlayer : TweenMS; public function MotionPlayer( mcMotion : MovieClip, nSec : Number, fE : Function) { _mcMotion = mcMotion; _tPlayer = new TweenMS(this, _play, _mcMotion._totalframes, nSec * 1000, 1, fE); } private function _play( nKey : Number ) : Void { _mcMotion.gotoAndStop(Math.round(nKey)); } public function start() : Void { _tPlayer.start(); } public function stop() : Void { _tPlayer.stop(); } public function revert() : Void { _tPlayer.yoyo(); } public function setDuration( nSec : Number ) : Void { _tPlayer.setDuration(nSec * 1000); } public function setEasing( fE : Function ) : Void { _tPlayer.setEasing(fE); } public function getView() : MovieClip { return _mcMotion; } public function addListener(oL : ITweenListener) : Void { _tPlayer.addListener(oL); } public function removeListener(oL : ITweenListener) : Void { _tPlayer.removeListener(oL); } public function addEventListener(e : TweenEventType, oL) : Void { _tPlayer.addEventListener.apply(_tPlayer, arguments); } public function removeEventListener(e : TweenEventType, oL) : Void { _tPlayer.removeEventListener(e, oL); } public function toString() : String { return PixlibStringifier.stringify(this); } }
Et son utilisation :
[actionscript] var _animIntro : MotionPlayer = new MotionPlayer(resolveUI("mcIntro"), 1); _animIntro.addEventListener(MotionPlayer.onMotionFinishedEVENT, this, _onFinishIntro); _animIntro.start();
Un autre avantage non négligeable de cette solution est qu'en période de dev on est plus obliger de se taper toutes les transitions en temps réelle, vous avez celle qui vous ne pouvez plus voir en peinture après une nuit de charrette. :p
++
Laurent
Commentaires
Cette solution n'est valable que pour pour des animations "linéaires", où la dernière frame représente la fin de l'animation.
Le problème c'est qu'en flash il n'y a pas réellement de fin.
Lorsque l'on a des MovieClips imbriqués, qui eux même en ont d'autres, et ainsi de suite, la fin logique n'est pas pré-déterminable.
Je n'ai pas trouvé mieux que de demander à l'auteur d'indiquer (avec du code) la fin de son animation, ou alors de ce plier à certaines contraintes.
J'avais essayé l'introspection de l'animation pour déterminer sa fin mais certains cas continuaient à m'échapper.
Bref si tu peux t'assurer de la façon dont sont construites les animations, ta solution est bonne.
Hello
en AS3 c'est plus trop un problème car on peut écouter une frame avec MovieClip.addFrameScript(frame:uint,notify:Function)
Pour moi la solution au dessus est sympa en AS2 mais en plus du soucis avancé par Damo... il y a un problème aussi avec les animations contenant du son
Donc conclusion vaut mieux faire de l'AS3 dans ce genre de cas ?
EKA+
damo < Effectivement, cela fait partie des contraintes qui sont imposé au graphiste.
Eka < Je n'ai pas encore eu la possibilité de faire de l'AS3 en production. Encore aujourd'hui je démarre un projet en AS2.
Moi non plus je suis pas encore en full production AS3 mais sérieux c'est qu'une question de temps
EKA+