Les bases d’ActionScript – Part I – Introduction et interface

Durant ce premier tutoriel 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 tutoriel sur les bases d’Action Script et mettrons dans le troisième tutoriel quelques exemples en application.

Avant de commencer, vous pouvez également parcourir cette série de tutoriels sur ActionScript. Cela 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érentes versions, tous les fichiers sont enregistrés en version CS3. Si vous souhaitez les obtenir en une version différente, 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 d’écart trop marqué 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 : 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 longtemps et si vous n’avez pas 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’appuie sur le standard ECMA 262, et ressemble à s’y méprendre à du JavaScript. De ce fait, ceux qui parmi vous connaissent déjà le langage JavaScript n’auront aucun mal à basculer sur ActionScript.

La syntaxe

La syntaxe utilisée pour ActionScript est une syntaxe pointée, décrite plus loin au cours de ce tutoriel. 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’inconvénient de l’outil de formatage automatique du code, est que celui-ci n’accepte pas une ligne contenant plusieurs instructions 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 parallèle de l’interface d’écriture de code, il existe deux outils de débogage par défaut, qui sont le débogueur (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 variable. Une façon d’obtenir le débogueur 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 tutoriel complet à elle seule. De manière rapide et simplifiée nous pourrions dire qu’il est possible d’utiliser 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 ensuite de relancer le player ou d’exécuter le code pas à pas, ligne après ligne, instruction après instruction, 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êts 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 indiquant 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 remplaçons toutes les articulations démonstratives, possessives, relatives…. par des points et nous partons de l’objet extérieur. Cela donne 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 bâtiment 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 quelque 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 bâtiment, 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-là que certaines animations qui font référence à leur _root, perdent 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 pour l’instant, en fonction du schéma ci-dessus, si notre observateur 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 par rapport à 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 relatifs 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 relatifs 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 accessible 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’occurrence, 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. Ils 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épétez 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 tutoriel 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ènements 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. Pourquoi me direz-vous ? : 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 dédié.

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 utilisant 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 reprenons les deux exemples abordés 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 leurs était affectés, 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 tutoriel, mais nous pouvons voir d’ores et déjà, qu’un des principal avantage de cette méthode est de pouvoir 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é est 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ée précédemment. Pour le vérifier et 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");
}