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...
|