TUTORIELS 
Introduction à l'ActionScript, langage de script de Flash
Introduction au langage ActionScript sous Flash 5 et MX: adapter ses réflexes à la notion de défilement du temps et appréhender le côté "objet" de Flash.  (18 septembre 2002)
 

Présentation
Il est loin le temps où Flash n'était considéré que comme un logiciel d'animation vectorielle doté de quelques maigres fonctions chichement intégrées dans une interface tenant plus du gadget que de l'application professionnelle. Depuis les premiers pas de l'ActionScript
avec Flash 3 en 1996 (à l'époque, une poignée de fonctions sobrement appellées les "actions" et accessibles depuis un sous-onglet) à Flash 5 en 2000, puis Flash MX en 2002, Macromédia a doté son application la plus connue d'un véritable langage de script complet, et répondant (pour la majeur partie) à la norme ECMA-262, comme son proche cousin le JavaScript.

Flash MX est désormais une application puissante tout en restant simple d'emploi, et promet de devenir partie intégrante de la trousse à outils des développeurs on-line et off-line. Il devient donc nécessaire de se former à cet outil afin d'être en mesure de développer la prochaine génération d'application en ligne.
Cette série d'articles d'introduction à ActionScript est destinée à un public sachant déjà programmer (donc connaissant les divers principes de la programmation) et souhaitant aborder rapidement le développement Flash. Nous nous efforcerons de présenter le langage sans toucher à une version de Flash en particulier. Nous resterons cependant dans les limites de l'ActionScript pur, c'est-à-dire Flash 5 et Flash MX, les versions précédentes du langage étant trop éloignées de la spécification ECMA-262.

Notions fondamentales
L'une des particularités fondamentales de la programmation en ActionScript par rapport à d'autres langages est que Flash est un outil basé sur le défilement du temps (à la manière de Première ou d'After Effects d'Adobe). Il est primordial de comprendre cette particularité, car c'est d'elle que découle l'ensemble du modèle ActionScript, et toute la différence avec les langages "traditionnels".

Du fait de sa définition première en tant que logiciel d'animation, l'outil Flash est entièrement construit autour d'un "scénario" (ou "time-line"), où viennent se greffer les différents éléments du "film" (ou animation) qui est créé: images, textes, (sous)animations et codes. Ce scénario est composé d'images (ou "frames") pouvant contenir son propre contenu (c'est alors une image-clé ou "keyframe") ou le contenu de l'image précédente. Le scénario comporte un ou plusieurs calques (ou "layers") superposés, permettant de définir si un élément est au dessus ou en dessous d'un autre selon qu'il se trouve sur tel ou tel calque. Chaque calque ne peut contenir qu'une seule image-clé à un "moment" donné, mais une image clé peut contenir autant d'éléments que nécessaire.
Quand les éléments sont placés sur le scénario sans code nulle-part, l'animation se joue du début à la fin. Pour dépasser ce stade de l'animation simple, il faut faire appel à la programmation ActionScript...

Parce qu'il est basé sur le défilement du temps, le code ActionScript peut se placer en divers endroits: sur une image-clé du scénario principal, mais aussi sur une image-clé du scénario d'une sous-animation (un "movie-clip" ou "clip" ou "mc") ou sur un symbole "bouton". Ainsi, vu que les évènements ActionScript peuvent être déclenchés à la fois par le scénario principal, un scénario de clip ou par l'intervention de l'utilisateur (clic de la souris sur un bouton par exemple), une application Flash est non-linéaire mais liée au défilement du temps.

Du fait de ces possibilités d'éparpillement de la programmation (un code peut très bien se trouver dans une image-clé du scénario d'un clip, lui même contenu dans un bouton, lui même imbriqué dans un clip), il faut dès le départ adopter une méthode de travail stricte spécifique à Flash. Par exemple, séparer tant que faire ce peut le code des éléments de l'animation, et les regrouper sur un même calque qui ne contiendra que des codes ActionScript.
Une application Flash complète peut être développée en n'utilisant que trois images-clés du scénario principal: la première initialiserait les différentes variables nécessaires à l'application, la deuxième contiendrait tous les scripts principaux, et la troisième renverrait sur la deuxième afin relancer le code. On peut même n'utiliser qu'une seule image-clée pour toute l'application...

Autre aspect fondamental du code ActionScript, lui aussi lié à ce modèle basé sur le temps et au modèle Objet très présent (surtout depuis Flash MX): la portée des variables, fonctions et objets déclarés. En effet, là où, dans les langages traditionnels, une variable ou un objet n'est accessible que depuis une certaines méthode ou classe, Flash ajoute deux niveaux: le rapport au scénario principal (appellé _root), et la hiérarchie Parent/Enfant.
C'est par l'usage de la synthaxe pointée que l'on peut s'y retrouver. Ainsi:

_root.clipA.clipB.goToAndStop("fin"); De n'importe où, appelle l'action goToAndStop du clip enfant "clipB"
clipA.clipB.goToAndStop("fin");
Même action, mais de la scène principale
_parent.goToAndStop("fin"); De clipB, appelle l'action du clip parent "clipA"
_parent.clipB2.goToAndStop("fin"); De clipB, appelle l'action d'un second clip enfant du clip parent "clipA"
this.goToAndStop("fin"); Appelle l'action du clip où se trouve le code


L'aspect "Objet" de Flash et les symboles
Il nous faut partir d'un point qui peut aider à mieux "voir" la construction d'une application Flash: tout est objet. Même si le langage ActionScript n'est pas à proprement parler un véritable langage orienté Objet, le fait de penser à l'ensemble des composants d'une animation comme étant des objets, ou plutôt des occurences d'objets, peut grandement aider à construire l'application dans son esprit.
En effet, tous les éléments utilisés dans l'application sont stockés comme symboles en un point central, la bibliothèque (ou "library"), puis instanciés sur la scène. La scène elle-même est en fait la scène principale (_root): chaque symbole (clip, bouton ou graphique) possède sa propre scène où peuvent être déposé d'autres symbole. Les possibilités d'imbrication sont pour ainsi dire infinies.
Concevoir ainsi le travail sous Flash permet d'en accélérer sa compréhension. Ainsi, on comprendra que pour être appellée correctement, l'occurence d'un symbole doit avoir un identifiant unique. Bien évidemment, la modification du symbole d'origine entraîne la même modification sur l'ensemble de ses occurences...

Flash comprend trois principaux types de symboles, comme nous l'avons vu: le Clip, le Bouton et le Graphique. Ils sont créés une seule fois, automatiquement stockés dans la Bibliothèque et peuvent être réutilisés à l'infini, chaque occurence du symbole pouvant avoir ses propres propriétés (_alpha, _rotation, _visible...). La connaissance de chacun d'entre ces symboles vous permettra de décider lequel répond au mieux à besoin donné.
Utiliser systématiquement les symboles permet non-seulement de réutiliser un travail déjà effectué, mais aussi d'alléger considérablement le poids d'une animation. En effet, un élément placé directement sur un scénario sera enregistré dans le fichier Flash autant de fois qu'il apparaît dans des images-clés de ce scénario; qui plus est, aucune intéraction ne pourra être réalisée avec lui.
Un symbole peut être créé principalement en passant par le menu "Insertion/Nouveau Symbole..." (ctrl-F8 ou pomme-F8) et en créant le symbole dans la nouvelle scène qui est présentée, ou en créant un élément sur la scène principale et en le convertissant en symbole via le menu "Insertion/Convertir en Symbole..." (F8).

Le symbole "Graphique" est le plus basique des trois. Il ne permet que de contenir une seule image statique (vectorielle ou bitmap) et de l'afficher sur le scénario. Il ne permet pas d'utiliser de scripts. Du fait de ses limitations, il est assez peu utilisé...

Le symbole "Clip" est celui qui est le plus souvent utilisé, car s'il ressemble à Graphique, il n'en a pas les contraintes et dispose de nombreux avantages. Un clip est rien moins qu'une animation dans l'animation, avec son propre scénario (qui se joue indépendemment du scénario principal), sa propre scène et une capacité à utiliser ActionScript. Le code peut être placé sur l'occurence du boutons, ou sur un image-clé de son scénario.

Le symbole "Bouton" est le seul a pouvoir utiliser les actions à la souris et au clavier de l'utilisateur: clic, survol, barre d'espace, flêche... Le code est placé sur l'occurence du bouton. Ce symbole possède un scénario spécial à quatre images, correspondants aux trois états possibles du bouton et à sa zone cliquable.

Chacun de ces symboles peut être imbriqué dans un autre symbole, qu'il soi du même type (par exemple, un clip dans un clip) ou non (par exemple, un graphique dans un clip, un bouton dans un clip, un clip dans un bouton, ou même un graphique dans un clip, lui-même dans un bouton, lui-même dans un autre clip...).

Après avoir été créé et stocké dans la bibliothèque, le symbole peut être instancié en cliquant sur son icône dans la bibliothèque et en la faisant glisser sur la scène. Il suffit enfin, pour pouvoir accéder à leurs propriétés et méthodes par ActionScript, de leur donner un identifiant unique.

Nous appliquerons cela dès notre prochain article...

 
[ Xavier BorderieJDNet
 
Accueil | Haut de page