Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Les bases de TweenLite / TweenMax

Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par thoutmosis (Legrand), le 19 juillet 2011

Dans le chapitre précédent, nous avons vu ce qu'était un Tween et à quoi cela pouvait nous servir. Nous avons également vu qu'il existait une librairie de Tween propre à flash mais que celle-ci était plutôt pauvre.

Nous nous sommes alors penchés sur les librairies mises à disposition sur internet et avons décidé de nous orienter vers la librairie TweenLite / TweenMax,

Prérequis

Pour suivre ce tuto, vous devez avoir acquis les notions suivantes :

  • Savoir ce qu'est un Tween.
  • Savoir rajouter des sources dans le classpath et ou / linker un fichier .swc

I – Découverte de TweenLite / TweenMax

A - Télécharger et installer la librairie

Tout d'abord il vous faudra vous rendre sur le site de greensock à l'adresse suivante : http://www.greensock.com/tweenlite/ , sur la page en question on vous propose de télécharger la librairie pour les versions as2 et as3, dans ce tuto nous nous concentrerons sur la version as3.

Téléchargez donc le package as3 et décompressez-le, en ouvrant le dossier vous allez découvrir plusieurs petites choses :

  • documentation.html: Comme son nom l'indique, cette page contient la doc du projet au format asdoc ( elle nécéssite le dossier docs pour fonctionner ).
  • greensock.swc: Il s'agit de la librairie compressée au format.swc
  • le répertoire com: contient le code source de la librairie
  • badges : ce répertoire contient des images utilisées par greensock, il ne nous intéresse pas vraiment.
  • demo_swfs : Ce dossier est l'un des plus intéréssants, il contient une liste de swf utilitaires qui nous aident à démarrer avec la librairie.

Pour utiliser la librairie dans vos projets, c'est assez simple, il suffit de copier-coller le dossier ”com” dans votre ”classpath” ou alors vous pouvez directement utiliser le fichier ”greensock.swc”.

Partons maintenant à la découverte du fichier ”Basics.swf” qui se situe dans ce fameux dossier ”demo_swfs” que nous avons cité plus haut.

B – Les basiques à l'aide de Basics.swf

Commencez donc pas ouvrir le fichier ”Basics.swf” qui se trouve dans le dossier ”demos_swf”. Vous devriez avoir quelque chose qui ressemble plus ou moins à ça:

Décortiquons un peu cette interface voulez-vous ?

  • Au centre nous avons un petit bonhomme ( il s'agit du logo de greensock ) ainsi qu'une croix rouge ( Target ) que nous pouvons tous les deux déplacer en mode “drag 'n drop”. La croix rouge représentant la destination finale du bonhomme par rapport à son point de départ.
  • A droite nous pouvons voir un panneau avec des propriétés, ces dernières devraient vous dire quelque chose si vous avez déjà codé en actionscript. Il s'agit du panneau dans lequel vous pourrez éditer les valeurs finales des propriétés de votre bonhomme càd celles qu'elles auront lorsque le Tween sera terminé. Et puisqu'on parle de Tween sachez que vous pouvez lancer le fameux Tween en question en cliquant sur le bouton ”TWEEN”.
  • La liste déroulante contient ce que l'on appelle les “easing functions”. Mais qu'est-ce qu'une easing function? Pour résumer ça simplement, il s'agit de la fonction mathématique qui va être utilisée pour interpoler les valeurs des propriétés de l'objet, ne vous inquiétez pas nous y reviendrons plus tard, en attendant je vous laisse les tester par vous-mêmes.
  • En bas nous pouvons voir un panneau sobrement nommé “AS3Code”, il s'agit ni plus ni moins du code actionscript représentant le Tween que l'on est en train de tester. Càd ( accrochez-vous à vos barbes ) que vous pouvez copier-coller ce code dans votre application et cela fonctionnera de suite, impressionnant non ? Bien sur il vous faudra changer probablement ( et uniquement si j'ose dire ) le nom de la variable qui représente la cible du Tween ( ici elle est nommé mc ).
  • Les plus observateurs auront remarqué que l'on peut changer de version d'actionscript ainsi que le ”Engine” utilisé. Pour ce qui est de ce dernier nous avons le choix entre TweenMax et TweenLite. TweenMax est en fait une extension de TweenLite càd qu'il possède toutes les capacités de TweenLite plus les siennes. Ceci a en revanche un coup, en règle générale TweenLite sera plus rapide. Nous verrons cela plus tard dans un tuto entièrement consacré à TweenMax, pour l'instant nous allons nous focaliser sur TweenLite.

Nous allons maintenant attaquer le code, le vrai, celui que vous allez utiliser dans vos applications de tout les jours. Et pour cela nous avons tout les outils en mains à savoir la librairie et notre swf utilitaire ”Basics.swf” que je vous conseille de garder ouvert dans un premier temps afin de vous aider ( il est là pour ça après tout ).

II – Les bases de TweenLite

A - Créer un Tween avec TweenLite, la base

Comme vous pouvez le constater en regardant le swf d'exemple, le code nécessaire à l’exécution et la création d'un Tween avec TweenLite est extrêmement compact. Voyons quelles sont les étapes nécessaires :

  • Importer la classe TweenLite qui se trouve dans le package “com.greensock”
  • Utiliser la méthode statique to de la classe TweenLite.

Plus simple tu meurs” comme dirait l'autre ! La méthode statique “to” de la classe TweenLite va créer pour nous une instance d'un objet de type TweenLite et nous la renvoyer. Les paramètres de base de la classe TweenLite vont faire en sorte que le Tween s'éxécute dès son instanciation, nous verrons plus tard qu'il est possible de changer ce comportement.

Prenons l'exemple simple ci-dessous et analysons-le:

	import com.greensock.TweenLite;
	TweenLite.to(mc, 1, {x:159, y:202});
  • Le premier paramètre correspond à la cible du Tween, çàd l'objet dont les valeurs vont être changées / interpolées jusqu'à atteindre la/les valeur(s) finale(s) spécifiées.
  • Le second paramètre correspond à la durée du Tween càd la durée de l'interpolation, le temps est exprimé en secondes.
  • Le troisième paramètre est un objet de type Object. Les propriétés de cet objet doivent porter le même nom que les propriétés de la cible. Les valeurs des propriétés de l'objet paramètre correspondent ainsi aux valeurs finales que prendront les propriétés de l'objet cible.
  • La méthode de easing, si elle n'est pas spécifiée parmi les propriétés de l'objet paramètre, vaut par défaut Regular.easeOut, les différentes fonctions de easing fournies par greensock se trouvent toutes dans le package ”com.greensock.easing”.

Autre exemple :

Dans l'exemple ci-dessous, je souhaite que les coordonnées x et y de mon clip mc atteignent respectivement les valeurs de 160 et 200 en une seconde à l'aide de la fonction d'interpolation Bounce.easeInOut définie sur la classe Bounce qui se trouve dans le package “com.greensock.easing

	import com.greensock.TweenLite;
	import com.greensock.easing.Bounce;
	TweenLite.to(mc, 1, {x:160, y:200, ease:Bounce.easeInOut});

B – Le delay et la mort d'un Tween

Cette partie sera très courte mais elle introduira pour vous deux notions essentielles à savoir :

Le delay

Comment s'y prendre pour qu'un Tween démarre au bout de n secondes ? C'est simple, il suffit de créer une propriété nommée delay sur l'objet utilisé en troisième paramètre et lui donner une valeur de type Number.

note : N'oubliez pas que le temps est exprimé en secondes.

Exemple :

Ici je veux que mon Tween s'éxécute 1 seconde après sa création.

	import com.greensock.TweenLite;
	import com.greensock.easing.Bounce;
	TweenLite.to(mc, 1, {x:160, y:200, delay:1 });

La mort d'un Tween

Comment s'y prendre pour tuer proprement un Tween avec TweenLite ? C'est très simple, de base, les instances des objets TweenLite se détruisent elles-même une fois que l'interpolation ( le Tween ) est terminée, il se peut cependant que vous souhaitiez vous-même les tuer manuellement.

Dans ce cas la méthode statique de la classe TweenLite nommée ”killTweensOf” qui prend en paramètre la cible du Tween se chargera de tuer pour vous tout les Tweens ayant cet objet pour cible.

Exemple :

Ici je crée un Tween à l'aide de la méthode TweenLite.to et tout de suite après je tue tout les Tweens ayant pour cible l'objet ”mc” avec ”killTweensOf”, ce qui aura pour effet de détruire instantanément l'instance de TweenLite créée à la ligne précédente.

	import com.greensock.TweenLite;
	import com.greensock.easing.Bounce;
	TweenLite.to(mc, 1, {x:160, y:200, delay:1 });
	TweenLite.killTweensOf( mc );

Conclusion

Voilà vous connaissez maintenant les bases de TweenLite. Dans les prochains chapitres nous verrons comment nous servir de cette librairie de manière plus poussée.

En effet TweenLite fournit une multitude d'options et quelques extensions et plugins bien pratiques.En attendant je vous laisse jouer avec les swf de demos, have fun !