« Tutoriel GreenSock GSAP pour AS3 » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
 
(14 versions intermédiaires par 3 utilisateurs non affichées)
Ligne 30 : Ligne 30 :
== Introduction ==
== Introduction ==


La librairie Tweening Platform v11 offre des fonctions permettant d'accomplir de nombreuses actions.
La librairie Tweening Platform v11 offre des fonctions permettant d'accomplir de nombreuses actions d'interpolations à l'aide de la timeline de flash comme, par exemple, déplacer un objet.<br />
Une fois que vous avez téléchargé et extrait la librairie sur votre ordinateur, pensez bien à ce que votre animation soit fait dans la racine du fichier.
<br />
 
Après avoir téléchargé et extrait la librairie sur votre ordinateur, pensez bien à ce que votre animation soit faite dans la racine du fichier. (Voir [[Flash CS4 - Utilisation de librairies]] pour plus d'informations)
<br /><br />
Grâce aux tweens il est possible de lancer plusieurs animations simultanément, d'animer des objets et d’enclencher des actions diverses.<br />
Voici un exemple d'une animation flash faite avec la librairie TweenLite [http://Http://tecfa.unige.ch/guides/flash/ex5/greensock/canon.swf animation canon].


== Fonctionnalités ==
== Fonctionnalités ==
Ligne 39 : Ligne 42 :


[[Fichier:P1.jpg]]
[[Fichier:P1.jpg]]


=== Génération automatique du code ===
=== Génération automatique du code ===


IL y a également une deuxième solution, un outil interactif à été développé pour "voir" le résultat d'une fonction, il génère même le code ! Il n'y a qu'à spécifier les paramètres et à copier le code Action Script dans votre animation ! Vous pouvez trouver cet outil sur le [http://www.greensock.com/get-started-tweening/ site de greensock] dans la section [http://www.greensock.com/get-started-tweening/#plugins plugins].
Il y a également une deuxième solution, un outil interactif à été développé pour "voir" le résultat d'une fonction, il génère même le code ! Il n'y a qu'à spécifier les paramètres et à copier le code Action Script dans votre animation ! Vous pouvez trouver cet outil sur le [http://www.greensock.com/get-started-tweening/ site de greensock] dans la section [http://www.greensock.com/get-started-tweening/#plugins plugins].


[[Fichier:P2.jpg]]
[[Fichier:P2.jpg]]
Ligne 59 : Ligne 61 :
On peut également modifier les options en leur passant directement une variable comme paramètre.
On peut également modifier les options en leur passant directement une variable comme paramètre.
Par exemple dans le code généré ci-dessus :
Par exemple dans le code généré ci-dessus :


<source lang="ActionScript">
<source lang="ActionScript">
TweenMax.to(mc, 3, {bezierThrough:[{x:300, y:345}], orientToBezier:true, ease:Bounce.easeOut});
TweenMax.to(mc, 3, {bezierThrough:[{x:300, y:345}], orientToBezier:true, ease:Bounce.easeOut});
</source>
</source>


on peut contrôler l'option <code lang="ActionScript">orientToBezier</code> en lui passant une variable qui a comme valeur le booléen <code lang="ActionScript>true</code> ou <code lang="ActionScript>false</code>, c'est-à-dire :
on peut contrôler l'option <code lang="ActionScript">orientToBezier</code> en lui passant une variable qui a comme valeur le booléen <code lang="ActionScript>true</code> ou <code lang="ActionScript>false</code>, c'est-à-dire :


<source lang="ActionScript">
<source lang="ActionScript">
Ligne 75 : Ligne 74 :
TweenMax.to(mc, 3, {bezierThrough:[{x:300, y:345}], orientToBezier:isOrientToBezierTrue, ease:Bounce.easeOut});
TweenMax.to(mc, 3, {bezierThrough:[{x:300, y:345}], orientToBezier:isOrientToBezierTrue, ease:Bounce.easeOut});
</source>
</source>


aura le même effet que le code plus haut.
aura le même effet que le code plus haut.
La différence étant que si on veut changer le paramètre, il suffira de changer la valeur de <code lang="ActionScript">isOrientToBezierTrue</code>.
La différence étant que si on veut changer le paramètre, il suffira de changer la valeur de <code lang="ActionScript">isOrientToBezierTrue</code>.


==== Fonction de callback ou rappel (à exécuter à la fin du tween) ====
==== Fonction de callback ou rappel (à exécuter à la fin du tween) ====
Ligne 86 : Ligne 83 :


'''Remarque :''' c'est le cas des fonctions que l'on passe comme argument pour [[Flash_AS3_-_Objets_interactifs#La_fonction_de_gestionnaire_d.27.C3.A9v.C3.A9nement | gérer les événements]], techniquement il s'agit donc de fonction de callback qui est appelée une fois que la fonction "addEventListener" a terminé son travail avec comme argument l'objet événement (Event) généré par "addEventListener".
'''Remarque :''' c'est le cas des fonctions que l'on passe comme argument pour [[Flash_AS3_-_Objets_interactifs#La_fonction_de_gestionnaire_d.27.C3.A9v.C3.A9nement | gérer les événements]], techniquement il s'agit donc de fonction de callback qui est appelée une fois que la fonction "addEventListener" a terminé son travail avec comme argument l'objet événement (Event) généré par "addEventListener".


La fonction de callback la plus utilisée pour les tween fait avec GreenSock est sans doute <code lang="ActionScript">onComplete</code>, voici sa syntaxe :
La fonction de callback la plus utilisée pour les tween fait avec GreenSock est sans doute <code lang="ActionScript">onComplete</code>, voici sa syntaxe :


<source lang="ActionScript">
<source lang="ActionScript">
TweenMax.to(mc, 3, {bezierThrough:[{x:300, y:345}], orientToBezier:isOrientToBezierTrue, ease:Bounce.easeOut, onComplete: myFunction});
TweenMax.to(mc, 3, {bezierThrough:[{x:300, y:345}], orientToBezier:isOrientToBezierTrue, ease:Bounce.easeOut, onComplete: myFunction});
</source>
</source>


Comme vous le voyez, on rajoute simplement avant la fin de l'accolade <code lang="ActionScript">onComplete: myFunction</code> et la fonction "myFunction" va être exécutée en callback.
Comme vous le voyez, on rajoute simplement avant la fin de l'accolade <code lang="ActionScript">onComplete: myFunction</code> et la fonction "myFunction" va être exécutée en callback.


Vous pouvez trouver un exemple "en contexte" de l'utilisation du callback onComplete [[GreenSocks_tweening_platform ici]].
Vous pouvez trouver un exemple "en contexte" de l'utilisation du callback onComplete [[GreenSocks_tweening_platform ici]].
Il est également possible d’agir pendant l’animation elle-même, avec l’attribut <code lang="ActionScript">onUpdate: myFunction</code>.


==== Contrôler un tween ====
==== Contrôler un tween ====
Ligne 104 : Ligne 100 :
Pour cela il faut d'abord avoir un moyen de référencer le tween, donc l'assigner à une variable.
Pour cela il faut d'abord avoir un moyen de référencer le tween, donc l'assigner à une variable.
On doit donc le créer avec le code suivant :
On doit donc le créer avec le code suivant :


<source lang="actionscript">
<source lang="actionscript">
Ligne 111 : Ligne 106 :
</source>
</source>


 
Remarquons que l'on doit directement spécifier un objet (existant) auquel le tween va être attaché ainsi qu'une durée pour le tween dans l'instruction "var myTween:TweenMax = new TweenMax('''''mc''''','''''1''''',{});". Mais pas d'inquiétude, on pourra toujours mettre d'autres valeurs dans l'instruction d'après.
Remarquons que l'on doit directement spécifier à quel objet le tween est attaché dans l'instruction "var myTween:TweenMax = new TweenMax('''mc''',1,{});".
 


On peut alors contrôler le tween avec les méthodes suivantes (disponibles en détails dans la section [http://www.greensock.com/get-started-tweening/#controling controling tweens du tutoriel de TweenMax].
On peut alors contrôler le tween avec les méthodes suivantes (disponibles en détails dans la section [http://www.greensock.com/get-started-tweening/#controling controling tweens du tutoriel de TweenMax].


<source lang="actionscript">
<source lang="actionscript">
Ligne 144 : Ligne 136 :
</source>
</source>


On peut aussi utiliser <code lang="actionscript">TimelineLite</code> ou <code lang="actionscript">TimelineMax</code> pour inclure plusieurs tween à la suite dans la timeline.
Pour cela, voir le tutoriel sur la page [[GreenSocks tweening platform]].
=== Création d'une animation avec TweenLite ===
==== Importer la librairie TweenLite ====
<source lang="actionscript">
import com.greensock.TweenLite;
</source><br />
==== La méthode TweenLite.to ====
La méthode statique “to” de la classe TweenLite créera une instance d'un objet de type TweenLite.
<source lang="actionscript">
import com.greensock.TweenLite;
TweenLite.to(mc, 1, {x:100, y:200});
</source>
* Le premier paramètre ('mc' dans l'exemple) est la cible du Tween, c'est l'objet qui sera interpolé.
* Le second paramètre correspond à la durée en secondes de l'interpolation (1 seconde dans l'exemple).
* Le troisième paramètre est un objet qui contient la liste des valeurs finales d'un ensemble de propriétés de l'objet cible. Dans l'exemple il s'agit de la position de l'objet (x=100 et y=200)<br />
'''Liste des propriétés'''
Il est possible de définir plusieurs propriétés à la fois. Dans cet exemple l'objet "clip:mc" va se déplacer à la position x=120, son opacité sera de 50%:
<source lang="actionscript">
TweenLite.to(clip_mc, 1.5, {alpha:0.5, x:120});
</source>
; <code>alpha:Number</code>
: C'est le niveau d'opacité de l'objet à la fin de l'animation (ou au début si vous invoquez la méthode TweenLite.from()). par example, si l'objet a sa propriété target.alpha à 1 au début de l'animation alors le code suivant le fera évoluer jusqu'à la valeur 0.5 durant l'animation:
TweenLite.to(clip_mc, 1.5, {alpha:0.5});
; <code>autoAlpha:Number</code>
: Même effet que la propriété <code>alpha</code> avec en plus le basculement de la propriét "visible" à faux si alpha vaut zéro.


On peut aussi utiliser <code lang="actionscript">TimelineLite</code> ou <code lang="actionscript">TimelineMax</code> pour inclure plusieurs tween à la suite dans la timeline.
; <code>timeScale:Number</code>
Pour cela, voir le tutoriel sur la page [GreenSocks tweening platform].
: Accélère ou ralentie l'animation ( 0.5 est la moitié de la vitesse courante, 2 est le double, etc.)
 
; <code>x:Number</code>
: Définit la valeur finale de la position en x (ou au début avec la méthode TweenLite.from()).
 
; <code>y:Number</code>
: Définit la valeur finale de la position en y.
 
; <code>scaleX:Number</code>
: Redimensionnement selon l'axe X
 
; <code>scaleY:Number</code>
: Redimensionnement selon l'axe Y
 
; <code>rotation:Number</code>
: rotation horaire en degrés.
 
; <code>delay:Number</code>
: Nombre de secondes avant de démarrer l'animation.
 
; <code>ease:Function</code>
: Il est possible d'atténuer les effets de changements de vitesses d'une animation en utilisant des classes appropriées. Par exemple on peut utiliser la fonction fl.motion.easing.Elastic.easeOut qui amorce le mouvement rapidement, puis le ralentit progressivement au cours de son exécution.
: On peut utiliser toutes les méthodes de AS3 [http://livedocs.adobe.com/flash/9.0_fr/ActionScriptLangRefV3/fl/motion/easing/package-detail.html fl.motion.easing] et[http://livedocs.adobe.com/flash/9.0_fr/ActionScriptLangRefV3/fl/transitions/easing/package-detail.html fl.transitions.easing]
 
; <code>easeParams:Array</code>
: Permet de passer des paramètres à la fonction 'ease'
TweenLite.to(my_mc, 2, {_x:200, ease:Elastic.easeOut, easeParams:[1.5, 2.45]});
 
; <code>volume:Number</code>
: Permet de définir le niveau de volume d'une animation.
 
; <code>tint_Color:uint</code>
: Valeur de la couleur en hexadécimal de teinte au format 0xRRVVBB à définir pour la fin de l'animation(ou au début si vous utilisez TweenLite.from()). Pour enlever la couleur utilisez la valeur ''null''.
 
; <code>onStart:Function</code>
: Permet d'appeler une fonction dés le démarrage de l'animation.
 
; <code>onStartParams:Array</code>
: Un tableau de paramètres à passer pour la fonction onStart.
 
; <code>onUpdate:Function</code>
: Permet d'appeler une fonction dés le changement de valeur d'une propriété.
 
; <code>onUpdateParams:Array</code>
:  Un tableau de paramètres  à passer pour la fonction onUpdate.
 
; <code>onComplete:Function</code>
: Permet d'appeler une fonction à la fin de l'animation.
 
; <code>onCompleteParams:Array</code>
: Un tableau de paramètres  à passer pour la fonction onComplete.

Dernière version du 21 janvier 2014 à 17:54

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Objectifs d'apprentissage

  • Apprendre à utiliser la librairie Greensock GSAP dans Flash CS4/CS3/CS5/CS6

Prérequis

Matériel (fichiers *.fla à manipuler)

Qualité et niveau

Ce tutoriel aidera les adeptes de la technique à démarrer. Le niveau de ce tutoriel est un peu haut pour les novices, mais peut servir comme fiche pratique dans un atelier.

Prochaines étapes


Autres versions


Introduction

La librairie Tweening Platform v11 offre des fonctions permettant d'accomplir de nombreuses actions d'interpolations à l'aide de la timeline de flash comme, par exemple, déplacer un objet.

Après avoir téléchargé et extrait la librairie sur votre ordinateur, pensez bien à ce que votre animation soit faite dans la racine du fichier. (Voir Flash CS4 - Utilisation de librairies pour plus d'informations)

Grâce aux tweens il est possible de lancer plusieurs animations simultanément, d'animer des objets et d’enclencher des actions diverses.
Voici un exemple d'une animation flash faite avec la librairie TweenLite animation canon.

Fonctionnalités

Une fois que vous être prêt à écrire dans votre script, vous pouvez lire sur le site du développeur quelles sont toutes les fonctions possibles exécutables grâce à cette nouvelle librairie : liste des fonctionnalités.

P1.jpg

Génération automatique du code

Il y a également une deuxième solution, un outil interactif à été développé pour "voir" le résultat d'une fonction, il génère même le code ! Il n'y a qu'à spécifier les paramètres et à copier le code Action Script dans votre animation ! Vous pouvez trouver cet outil sur le site de greensock dans la section plugins.

P2.jpg P3.jpg

Utilisation dans Action Script 3

Modification dynamique d'un paramètre

Une fois le code généré on peut très bien le modifier, regardez les paramètres spécifiques dans le Plugin Explorer ci-dessus (dans la partie encadrée en rouge). Faites des essais pour voir où dans le code se situe le paramètre dans le code.

On peut également modifier les options en leur passant directement une variable comme paramètre. Par exemple dans le code généré ci-dessus :

TweenMax.to(mc, 3, {bezierThrough:[{x:300, y:345}], orientToBezier:true, ease:Bounce.easeOut});

on peut contrôler l'option orientToBezier en lui passant une variable qui a comme valeur le booléen true ou false, c'est-à-dire :

var isOrientToBezierTrue:Boolean = new Boolean();
isOrientToBezierTrue = true;

TweenMax.to(mc, 3, {bezierThrough:[{x:300, y:345}], orientToBezier:isOrientToBezierTrue, ease:Bounce.easeOut});

aura le même effet que le code plus haut. La différence étant que si on veut changer le paramètre, il suffira de changer la valeur de isOrientToBezierTrue.

Fonction de callback ou rappel (à exécuter à la fin du tween)

On peut aussi ajouter une option pour exécuter une fonction à la fin du tween. Ce genre de fonction s'appelle une fonction de Callback (ou fonction de rappel en français), car elle est appelée une fois l'instruction principale effectuée. Si l'instruction principale génère une variable "retour" (comme par exemple l'indication d'un état d'erreur), cette variable est passée en argument à la fonction de callback.

Remarque : c'est le cas des fonctions que l'on passe comme argument pour gérer les événements, techniquement il s'agit donc de fonction de callback qui est appelée une fois que la fonction "addEventListener" a terminé son travail avec comme argument l'objet événement (Event) généré par "addEventListener".

La fonction de callback la plus utilisée pour les tween fait avec GreenSock est sans doute onComplete, voici sa syntaxe :

TweenMax.to(mc, 3, {bezierThrough:[{x:300, y:345}], orientToBezier:isOrientToBezierTrue, ease:Bounce.easeOut, onComplete: myFunction});

Comme vous le voyez, on rajoute simplement avant la fin de l'accolade onComplete: myFunction et la fonction "myFunction" va être exécutée en callback.

Vous pouvez trouver un exemple "en contexte" de l'utilisation du callback onComplete GreenSocks_tweening_platform ici.

Il est également possible d’agir pendant l’animation elle-même, avec l’attribut onUpdate: myFunction.

Contrôler un tween

Pour cela il faut d'abord avoir un moyen de référencer le tween, donc l'assigner à une variable. On doit donc le créer avec le code suivant :

var myTween:TweenMax = new TweenMax(mc,1,{});
myTween=TweenMax.to(mc, 3, {bezierThrough:[{x:300, y:345}], orientToBezier:true, ease:Bounce.easeOut});

Remarquons que l'on doit directement spécifier un objet (existant) auquel le tween va être attaché ainsi qu'une durée pour le tween dans l'instruction "var myTween:TweenMax = new TweenMax(mc,1,{});". Mais pas d'inquiétude, on pourra toujours mettre d'autres valeurs dans l'instruction d'après.

On peut alors contrôler le tween avec les méthodes suivantes (disponibles en détails dans la section controling tweens du tutoriel de TweenMax.

//pause
myTween.pause();

//reprends(conserve la direction - inversée ou non)
myTween.resume();

//inverse (va toujours un arrière dans la direction du départ)
myTween.reverse();

//lire (va toujours en avant)
myTween.play();

//recommence (depuis le départ)
myTween.restart();

//invalide (annule les valeurs de départ et force le tween à se réinitialiser)
myTween.invalidate();

//"tue" le tween immédiatement (en cours de lecture ou non)
myTween.kill();

//"tue" tous les tweens d'un objet
TweenLite.killTweensOf(mc);

On peut aussi utiliser TimelineLite ou TimelineMax pour inclure plusieurs tween à la suite dans la timeline. Pour cela, voir le tutoriel sur la page GreenSocks tweening platform.

Création d'une animation avec TweenLite

Importer la librairie TweenLite

import com.greensock.TweenLite;


La méthode TweenLite.to

La méthode statique “to” de la classe TweenLite créera une instance d'un objet de type TweenLite.

import com.greensock.TweenLite;
TweenLite.to(mc, 1, {x:100, y:200});
  • Le premier paramètre ('mc' dans l'exemple) est la cible du Tween, c'est l'objet qui sera interpolé.
  • Le second paramètre correspond à la durée en secondes de l'interpolation (1 seconde dans l'exemple).
  • Le troisième paramètre est un objet qui contient la liste des valeurs finales d'un ensemble de propriétés de l'objet cible. Dans l'exemple il s'agit de la position de l'objet (x=100 et y=200)

Liste des propriétés Il est possible de définir plusieurs propriétés à la fois. Dans cet exemple l'objet "clip:mc" va se déplacer à la position x=120, son opacité sera de 50%:

TweenLite.to(clip_mc, 1.5, {alpha:0.5, x:120});
alpha:Number
C'est le niveau d'opacité de l'objet à la fin de l'animation (ou au début si vous invoquez la méthode TweenLite.from()). par example, si l'objet a sa propriété target.alpha à 1 au début de l'animation alors le code suivant le fera évoluer jusqu'à la valeur 0.5 durant l'animation:

TweenLite.to(clip_mc, 1.5, {alpha:0.5});

autoAlpha:Number
Même effet que la propriété alpha avec en plus le basculement de la propriét "visible" à faux si alpha vaut zéro.
timeScale:Number
Accélère ou ralentie l'animation ( 0.5 est la moitié de la vitesse courante, 2 est le double, etc.)
x:Number
Définit la valeur finale de la position en x (ou au début avec la méthode TweenLite.from()).
y:Number
Définit la valeur finale de la position en y.
scaleX:Number
Redimensionnement selon l'axe X
scaleY:Number
Redimensionnement selon l'axe Y
rotation:Number
rotation horaire en degrés.
delay:Number
Nombre de secondes avant de démarrer l'animation.
ease:Function
Il est possible d'atténuer les effets de changements de vitesses d'une animation en utilisant des classes appropriées. Par exemple on peut utiliser la fonction fl.motion.easing.Elastic.easeOut qui amorce le mouvement rapidement, puis le ralentit progressivement au cours de son exécution.
On peut utiliser toutes les méthodes de AS3 fl.motion.easing etfl.transitions.easing
easeParams:Array
Permet de passer des paramètres à la fonction 'ease'
TweenLite.to(my_mc, 2, {_x:200, ease:Elastic.easeOut, easeParams:[1.5, 2.45]});
volume:Number
Permet de définir le niveau de volume d'une animation.
tint_Color:uint
Valeur de la couleur en hexadécimal de teinte au format 0xRRVVBB à définir pour la fin de l'animation(ou au début si vous utilisez TweenLite.from()). Pour enlever la couleur utilisez la valeur null.
onStart:Function
Permet d'appeler une fonction dés le démarrage de l'animation.
onStartParams:Array
Un tableau de paramètres à passer pour la fonction onStart.
onUpdate:Function
Permet d'appeler une fonction dés le changement de valeur d'une propriété.
onUpdateParams:Array
Un tableau de paramètres à passer pour la fonction onUpdate.
onComplete:Function
Permet d'appeler une fonction à la fin de l'animation.
onCompleteParams:Array
Un tableau de paramètres à passer pour la fonction onComplete.