ACTIONSCRIPT 3 ET MOTION DESIGN

À côté du dossier gs que vous avez téléchargé, figurent des documents au format SWF, respectivement nommés PluginExplorer.swf et TweenLiteBasics.swf. Ces fichiers vous assisteront sur l’édition des lignes de code pour générer une interpolation de type TweenMax. Ces assistants sont très utiles, notamment pour le calcul d’une trajectoire de mouvement de type Bézier que nous utilisons pour déplacer des objets (voir Figure 2.7). L’assistant TweenMax. Pour utiliser l’assistant TweenMax, ouvrez, avec le lecteur Flash installé sur votre système, le fichier nommé PluginExplorer.swf. Puis, cliquez sur le bouton Example situé près du type d’interpolation de votre choix. Une nouvelle fenêtre apparaît et affiche les lignes de code relatives à la propriété choisie. Vous pouvez alors modifier les réglages dans la partie droite de la fenêtre pour ajuster le script ou déplacer directement les options de contrôle dans la zone d’aperçu située à gauche de la fenêtre (voir Figure 2.8). Pour contrôler une courbe de Bézier, par exemple, cliquez successivement sur le tracé qui figure dans l’aperçu à gauche, puis déplacez les points créés afin Le langage Que faire des classes après compilation des SWF ? Le code contenu dans les classes appelées avec la commande import en ActionScript, à l’intérieur de votre document, sera compilé directement dans le SWF. Il n’est donc pas nécessaire de placer les classes sur le serveur qui héberge votre site avec les fichiers SWF. Néanmoins, il est souhaitable de les conserver près de votre document source Flash (.fla) afin de permettre les éventuelles mises à jour et la recompilation de vos animations au format SWF. Centraliser les classes ajoutées avec les chemins de classe (classPath) Il est possible de centraliser les classes que vous utilisez dans un autre répertoire et de s’y référer pour chaque nouveau document pour lequel vous souhaitez les utiliser, ponctuellement pour le document ouvert ou définitivement pour l’ensemble des nouveaux documents Flash. La première méthode consiste à définir un chemin d’accès automatique pour les classes natives (classPath), chemin invoqué à la publication du document actif en redéfinissant ses paramètres de publication. La seconde méthode consiste à redéfinir ce même chemin de classes natives, directement dans les préférences de l’application Flash, de sorte que chaque nouveau document dispose des nouvelles classes. Dans les deux cas, il devient alors possible d’appeler la classe ajoutée uniquement par son nom, et sans la recopier physiquement dans votre projet, comme nous le faisons déjà avec la classe Tween native. Pour importer une classe pour le document actif uniquement, il faut redéfinir les paramètres de publication du document ouvert. Faites Fichier > Paramètres de publication (ou depuis l’Inspecteur de propriétés, cliquez sur le bouton du haut intitulé Modifer). Au sommet de la boîte de dialogue, dans l’onglet Flash, à droite de la liste de version du langage ActionScript, cliquez sur le bouton Paramètres. Dans la nouvelle boîte de dialogue, en bas, ajoutez un chemin en cliquant sur le bouton plus. Puis, sélectionnez la classe à ajouter en cliquant sur le bouton de sélection matérialisé par un petit dossier, à droite du bouton moins. Confirmez l’importation et validez toutes les fenêtres. La classe est intégrée au document. Pour importer une classe pour l’ensemble des nouveaux documents, vous devrez redéfinir les préférences de Flash. Dans les préférences de l’application (Fichier > Préférences), cliquez d’abord sur la catégorie ActionScript, puis sur le bouton Paramètres d’ActionScript 3.0, situé en bas de la fenêtre. Dans la boîte de dialogue qui apparaît, dans la deuxième liste d’affichage nommée Dossiers, contenant des fichiers de classes ActionScript, cliquez sur le bouton de sélection de répertoire pour sélectionner le répertoire de classes et l’intégrer désormais à vos futurs documents.

Définir les coordonnées d’une courbe de Bézier pour la classe TweenMax

Pour utiliser le paramètre bezier dans une transition TweenMax, vous devez connaître au préalable les coordonnées des points d’inflexion de la courbe (sauf à utiliser l’assistant TweenMax présenté plus haut). Pour connaître les coordonnées des points d’inflexion, utilisez les repères de composition de votre document Flash. Dans le menu principal de Flash, choisissez Affichage > Règles. Puis, glisser-déposez des repères depuis la règle située à gauche, vers un point d’inflexion, pour en connaître l’abscisse x. De même, glisser-déposez un guide de la règle du haut, vers un point d’inflexion, pour en connaître l’ordonnée y. Viennent ensuite les actions relatives à chaque bouton plus et moins, pour chaque propriété : //// actions boutons // Abscisse x plusX_btn.addEventListener(MouseEvent.CLICK,plus1); function plus1 (evt:MouseEvent) { TweenMax.to(monde_mc, 2, {x:monde_mc.x-100, delay:0, ease:Strong.easeOut}); restaurer_btn.visible=true; } Par exemple, le premier bouton, qui permet de modifier la position de la carte en x, attache sur l’objet bouton plusX_btn un écouteur. Cet écouteur associe à un événement souris de type clic une fonction nommée plus1. Dans cette fonction, une autre interpolation non identifiée et non typée apparaît et permet de modifier la propriété x de l’objet monde_mc en incrémentant sa position courante avec monde_mc.x, d’une valeur négative de 100 pixels. À chaque clic sur le bouton, la carte est donc déplacée de 100 pixels en animation vers la gauche. Cette animation contient, en outre, une accélération définie par le paramètre ease.

Définition d’une interpolation TweenMax

La structure d’une interpolation TweenMax est la suivante : • TweenMax.direction(symbole, durée, {propriété, propriété, propriété…, delay, ease}) • TweenMax. Rappelle le nom de la classe importée pour générer une interpolation. • Direction. Indique si l’interpolation doit utiliser les paramètres qui suivent pour démarrer l’animation et terminer sur les propriétés courantes de l’objet dans la scène (dans ce cas, nous inscrivons from), ou partir de la position courante de l’objet dans la scène et terminer l’interpolation sur les valeurs passées en paramètre (dans ce cas nous écrivons le terme to). • Symbole. Indique le nom de l’objet à animer. Par exemple monde_mc. • Durée. Indique la durée de l’animation en secondes. Pour une durée plus courte, utilisez des valeurs décimales. La valeur 0.5 mentionne une demie seconde. • Propriété. Entre les deux accolades, vous pouvez ajouter autant de propriétés que vous le souhaitez. Leur ordre n’a pas d’incidence. Chaque propriété doit être séparée par une virgule. Notez que certaines propriétés adoptent une syntaxe particulière comme le tracé Bézier qui place une série de valeur dans une structure tabulaire composée de crochets et où chaque paire de valeurs placée entre accolades est séparée à nouveau par une virgule. • Delay. Permet d’indiquer un temps avant d’exécuter l’animation. Par exemple, une valeur de 2 retarde le lancement de l’interpolation de deux secondes. L’ordre d’apparition du délai par rapport aux autres propriétés n’a pas d’incidence. • Ease. Définit le type de transition comme vu dans la section consacrée à la classe Tween. L’ordre d’apparition du paramètre ease par rapport aux autres propriétés n’a pas d’incidence.