Introduction aux bases d'Action Script - Part I
Durant ce premier groupe de tutoriaux sur les bases d'ActionScript, nous allons aborder les bases du langage en approchant l'interface de programmation, les outils, la syntaxe, les variables, les boucles, les tests de condition... Nous aborderons la programmation orientée objet au cours du second groupe de tutoriaux sur les bases d'Action Script et mettrons dans le troisième tutorial quelques exemples en application.
Avant de commencer, vous pouvez également parcourir cette série de tutoriaux sur ActionScript. Cette série de tutoriaux devrait vous permettre de prendre en main, les bases de la programmation avec Flash que cela soit en ActionScript 1.0, 2.0 ou 3.0. Pensez à venir la consulter de temps à autres, les exercices risquent fort de s'améliorer ou de se compléter en fonction de vos remarques et de vos demandes. Bien que le code soit exploitable en différence version, tous les fichiers sont enregistrés en version CS3, si cela vous cause soucis et que vous souhaitez les obtenir en version différentes, faites nous le savoir.
Présentation de ActionScript
Les versions du langage
Les diverses versions du langage dépendent de la version du player ou de Flash utilisé. S'il n'y a pas de différence trop profondes entre AS 1.0 et AS 2.0, la venue de AS 3.0 apporte une différence notoire au niveau de la gestion évènementielle, et tous les bouts de code utilisés jusqu'à présent, de type onPress() deviennent inutilisables. Il est certain que les animations utilisant un code antérieur à AS 3.0 continueront à fonctionner encore bien logntemps et s'il n'est de raisons impératives d'utiliser la dernière mouture du langage, encore grand nombre d'animations pourront être développées en utilisant AS 2.0 voir AS 1.0.
Depuis Flash 6, il existe une autre possibilité d'exporter les animations qui utilise un player pour appareil mobile. Les versions d'exportation sont Flash Lite 1.0, 1.1, 2.0, 2.1.... Ces versions là utilisent des versions d'ActionScript de Flash 4 (soit Action) pour Flash Lite 1 et Flash MX 2004 (soit AS1.0 ou AS2.0) pour Flash Lite 2.
Le standard
Le langage s'appui sur le standard ECMA 262, et reseemble à s'y méprendre à du JavaScript. De ce fait, ceux qui parmi vous connaissent déjà le langage JavaScript auront n'aucun mal à basculer sur ActionScript.
La syntaxe
La syntaxe utilisée pour ActionScript est une syntaxe pointée, décrite plus loin au cour de ce tutrorial, chaque ligne d'instruction doit être terminée par un point virgule ou par un retour chariot. depuis la version AS 2.0 le code est sensible à la casse, donc une variable nommée unNombre sera différente d'une variable unnombre.
var destination:String = "label"; _root.clip.gotoAndStop(destination);
Chaque ligne de code peut être terminée soit par un retour chariot, soit par un point virgule. L'inconvenient est que du fait de l'outil de formatage automatique du code, celui ci n'accepte pas une ligne contenant plusieurs instruction séparées par des points virgule sur une seule et même ligne... par exemple :
var uneDonnee = 4; var uneAutreDonnee = "4";
sera automatiquement formaté comme ceci :
var uneDonnee = 4; var uneAutreDonnee = "4";
L'interface de programmation, les outils à disposition
La fenêtre d'Action
La fenêtre Action accessible depuis le menu Fenêtre > Action, ou du raccourci clavier F9, est contextuelle et s'adapte en fonction de l'objet sélectionné sur lequel est appliqué l'action. Image, Bouton, Clip. Au travers de l'animation ci dessous, parcourez en cliquant et en survolant l'ensemble de l'interface. Vous devriez alors pouvoir en comprendre les diverses parties et fonctionnalités.
Les outils de débogage
En parrallèle de l'interface d'écriture de code, il existe deux outils de débogage par défaut qui sont le débogeur (Maj - F4) et la fenêtre de sortie. Tous les deux sont accessibles depuis le menu Fenêtre. Nous verrons ultérieurement la console de débogage et la fenêtre de variabble. De manière pour obtenir le débogeur le plus simple reste aussi de le lancer en même temps que l'animation, au lieu de Contrôle > Tester l'animation (Ctrl - Entrée), Déboguer > Déboguer l'animation (Ctrl - Maj - Entrée).
Le débogueur
La fenêtre de débogage mériterait un tutorial complet à elle seule. De manière rapide et simplifiée nous pourrions dire qu'il est possible d'uitliser des points d'arrêt dans le code afin de pouvoir inspecter des valeurs d'objets ou de variables à cet instant là. Il est possible en suite de relancer le player ou d'éxécuter le code pas à pas, lignes après lignes, instructions après instructions afin de voir exactement ce qu'il se passe sous le capot juste avant que l'erreur n'apparaisse.
De plus et c'est là un des autres intérêt de cette fenêtre, il est possible de déboguer à distance et en ligne. Toutefois, ce mode est protégé par un mot de passe afin de minimiser l'accès au code... :)
La fenêtre de sortie
La fenêtre de sortie est une alternative au débogueur. C'est une fenêtre qui réagit d'une part aux erreurs en idiquant souvent le type d'erreur occasionnée et d'autre part à la fonction trace(). Créez une animation, tapez trace("coucou") puis trace(4 + 3) dans la fenêtre d'Action d'image. Lancez votre animation.
Une fois votre animation exécutée dans le player SWF, regardez de plus près les menus disponibles. Il en est deux Déboguer > Lister les objets, et Déboguer > Lister les variables, qui sont souvent de précieux alliés, lors du débogage.
Les chemins de cible
Le chemin de cible est le chemin qui permet d'atteindre un objet pour le pointer. La syntaxe pointée sépare les éléments de l'arborescence par un point. Par exemple si on humanise le chemin et qu'on parle de la couleur du pullover de Bob, en humain nous dirions :
La couleur du Pullover de Bob
en Action Script, nous remplacerions toutes les articulations démonstratives, posséssives, relatives.... par des points et nous partons de l'objet extérieur. Cela donnerait en ActionScript
Bob.Pullover.couleur
Les chemin de cible absolu vs relatifs
Nous venons de voir le principe des chemins de cible, en gros cela correspond à l'adresse de l'objet destinataire. Mais en terme d'adresse, il existe deux manières pour l'indiquer. Imaginons que nous indiquions l'adresse d'un lieu ou d'un batiment qui se trouve à 200 mètres à droite... nous pourrions répondre.... "cela se trouve à 200 mètres à droite".... mais cette adresse serait alors relative à l'endroit où nous nous trouvons au moment de la question / réponse. Si nous souhaitons répondre de manière précise et ce quelques soit le lieu où nous nous trouvons au moment de la question / réponse, il faut alors indiquer l'adresse absolue de ce lieu ou batiment, sous la forme par exemple 7454 Haskell Apt 14, Van Nuys CA 91406, USA. De ce fait peu importe où nous nous trouvons, avec cette information 'absolue', nous trouverons toujours la destination.
Imaginons l'imbrication suivante, la scène contient le MovieClip Clip_A et Clip_B. Le MovieClip Clip_B contient lui le MovieClip Clip_C. Enfin, positionnons deux postes d'observations A et B.
Le chemin de cible absolu
En Action Script, et donc en Flash, l'adresse absolue se base toujours par rapport à la racine de l'animation. La racine d'une animation est la scène de cette animation. Flash l'identifie par le mot clé _root. Par contre, et cela perturbe un peu au départ, le player lui l'interprète par _level0. Nous explorerons ce comportement un peu plus loin au moment du chapitre sur l'arborescence d'une animation. De même nous verrons à ce même moment que certaines animations qui font référence à leur _root, perde cette référence si elles sont chargées au sein d'un clip d'une autre animation. (voir la page suivante)
Quoiqu'il en soit, et pour l'instant, enfonction du schéma ci-dessus, disons que si notre obsertvateur se place en A ou en B, les chemins de cible absolus des MovieClip Clip_A et Clip_C sont
_root.Clip_A; _root.Clip_B.Clip_C;
Le chemin de cible relatif
A la différence du chemin de cible absolu, le chemin de cible relatif, se base en fonction de l'emplacement de départ de l'information. ActionScript utilise le mot clé this pour représenter la TimeLine de l'objet qui contient l'instruction. Nous verrons également lors de l'approche de la programmation orientée objet, que le mot clé this peut également représenter l'instance dans laquelle il est utilisé.
Pour notre exemple, en fonction du schéma ci dessus, si l'observateur se place en A, les chemins de cible relatif des MovieClip Clip_A et Clip_C sont :
this.Clip_A; this.Clip_B.Clip_C;
Si l'observateur se place en B, les chemins de cible relatif des MovieClip Clip_A et Clip_C sont :
this._parent._parent.Clip_A; this;
La fenêtre Insérer un chemin de cible
Il existe une fenêtre qui peut parfois s'avérer utile en cas de doute sur l'imbrication d'un chemin. Cette fenêtre est accéssible depuis la fenêtre d'Action, et permet de nous aider à définir les chemins de cible aussi bien en relatif qu'en absolu.
Un des intérêts de cette fenêtre est que si dans votre chemin, une des instances n'a pas été nommée, une boite de dialogue s'ouvre et permet de renommer l'instance inconnue. Ceci évite de devoir retourner dans l'imbrication, rechercher l'occurence, lui donner un nom, puis revenir dans le script où nous étions pour continuer l'écriture du chemin de cible.
Les types d'adressage
La but de notre chemin de cible est de pouvoir, comment son nom l'indique cibler un objet et intervenir sur cet objet, soit :
- en lisant ou en initialisant une de ses propriétés
- en lui affectant une action
- en écoutant un de ses gestionnaires d'évènement
Les actions d'image
Les lignes de code à exécuter s'écrivent directement dans la fenêtre d'Action, et seront interceptées par le passage de la tête de lecture du clip dans lequel le code a été placé. Si la TimeLine possède plusieurs images et que le script est placé sur la première image, le code sera exécuté à chaque boucle de lecture. Si la TimeLine ne possède qu'une image, le script sera exécuté qu'une fois.
Pour tester votre script, créez une interpolation sur la scène, lancez là... elle devrait se reproduire continuellement. Maintenant sur la dernière image clé, ajoutez une Action - Image et tapez le code suivant, répetez l'opération et constatez le résultat :
this.stop();
Les types d'action d'objets
Si vous n'utilisez pas AS 3.0 il est possible de placer des scripts directement sur les objets, qu'ils soient des MovieClip de type Bouton ou Clip. Depuis AS3.0 il faut utiliser une autre approche évènementielle. Voir le tutorial de migration AS1.0 ou AS2.0 vers AS3.0. Pour toutes vos animations qui n'utilisent pas AS3.0 vous pouvez donc continuer à placer des scripts sur vos objets. Est ce bien ou pas c'est un autre débat.
Les actions de bouton 
Pour intercepter le code il faut passer par un gestionnaire d'évènement de type on, on place le ou les types d'évènements, séparés par des virgules entre parenthèses, enfin, on place le code à exécuter à l'intérieur des accolades.
Il est préférable, comme nous le verrons plus loin d'éviter les évènements de type KeyPress et utiliser pour cela des écouteurs. Par contre dans certains cas, ne surtout pas oublier de doubler le release, par un releaseOutside.
Pour tester le fonctionnement du bouton, créez un bouton sur la scène, sélectionnez le et apposez lui une Action - bouton, contenant les lignes de codes suivantes, puis testez votre animation :
on (press, release){
trace("coucou");
}
Les actions de clip 
En ce qui concerne les clips, le gestionnaire d'évènement est basé sur l'instruction onClipEvent, entre les parenthèses on place le type d'évènement, et entre les accolades les instructions à exécuter une fois l'évènement intercepté.
Pour tester ce type d'action, créez un symbole de type clip, placez le sur la scène et apposez lui une Action - Clip contenant les lignes de code suivantes. Nous détaillerons le code dans un chapitre ultérieur, pour l'instant le but est de constater son utilisation et son fonctionnement, donc, lancez votre animation :
onClipEvent (enterFrame) {
this._x += 10;
}
Là encore, il est préférable d'éviter les types dévènements autre que load et enterFrame. Pour vous en démontrer le pourquoi. Placez un clip sur la scène et affectez lui les lignes de code suivantes dans une fenêtre Actions - Clip. Ensuite testez, cliquez sur le clip, première remarque le curseur n'apparait pas, ensuite cliquez n'importe où ailleurs sur la scène.... convaincu ?... :) Comme pour les boutons, nous verrons comment créer d'une manière mieux adaptée des écouteurs, dans un chapitre consacré à cela.
onClipEvent (mouseDown) {
trace("coucou");
}
Les types d'actions ciblées
Il existe une autre manière pour affecter des actions à tous types d'objets, les actions ciblées. C'est à dire en utilant un chemin de cible et en plaçant un gestionnaire d'évènement directement sur une fonction anonyme. Que vous utilisiez un bouton, un clip, un champ texte, peu importe l'utilisation et l'affectation sont les mêmes. Par exemple, si nous reprennons les deux exemples abordées dans le chapitre précédent sur le bouton et le clip, il nous faudrait tout d'abord donner un nom à nos deux instances, chose qui n'était pas nécessaire tout à l'heure. Appelons les inst_bt et inst_mc. retirez les codes qui leur était affecté, et placez vous directement sur la TimeLine principale. Nos actions ciblées s'écrivent directement sur une Action - Image. Placez le code suivant :
this.inst_bt.onPress = function(){
trace("coucou");
}
this.inst_clip.onEnterFrame = function(){
this._x += 10;
}
Nous explorerons les fonctions dans une autre partie de ce tutorial, mais nous pouvons voir d'ores et déjà qu'un des principal avantage de cette méthode est que nous pouvons centraliser l'ensemble de nos scripts sur une seule et unique ACtion - Image. Les principaux évènements qui sont disponibles sont :
- onPress, onRelease
- onRollOut, onRollOver
- onLoad, onUnLoad
- onEnterFrame
Une grande particularité et que si vous utilisez cette méthode, vous pouvez placer des évènement onPress par exemple sur une instance de Clip, chose qui n'était pas réalisable avec la méthode approché précédement. Pour le vérifier et le mettre en pratique, ajouter les lignes de code suivantes sur la TimeLine principale à la suite de ce que vous avez tapez précédemment, puis testez à nouveau l'animation et cliquez sur le clip qui se déplace :
this.inst_clip.onPress = function(){
trace("Vous venez de cliquer sur le clip");
}
