Préparation
Plutôt que d'expliquer les déclarations de variables, de fonctions ou de classes, ce qui peut vite se réveler rébarbatif, nous allons construire de petites animations très simples utilisant principalement ActionScript, en tentant de mettre en avant les spécificités de Flash. Nous ne parlerons pas ici des capacités d'animation du logiciel, comme les interpolations, car nous partons du principe que les lecteurs de cet article se sont déjà penchés sur ce coté de Flash; par ailleurs, ces capacités ne sont que très rarement utilisées dans le cadre d'applications professionnelles...

Nous travaillerons directement dans l'interface de Flash (accessible via la touche F9 ou le menu "Fenêtres/Actions"). En effet, s'il est possible de créer son code dans un éditeur de texte exterieur puis d'importer le fichier fichier.as lors du test, de la publication ou de l'exportation de l'animation via la commande #include "fichier.as", l'environnement de Flash MX dispose d'un vérificateur de syntaxe, d'un affichage de conseil de codes et d'un débogueur. Depuis Flash 5, vous pouvez aussi accélerer l'écriture de code en utilisant les raccourcis-clavier: taper la touche d'échappement (Esc.) puis "d" et "m" affichera ainsi directement la fonction duplicateMovieClip(). Quasiment toutes les fonctions possèdent ainsi un raccourci...

Première approche
Pour présenter la manière de programmer en ActionScript dans Flash, nous allons commencer par un petit programme extrêmement simple, pour les bases, puis passerons à des exemples plus proches de ce qu'un développeur peut attendre de Flash.

Nous allons créer une horloge analogique simple. Cela nous permettra d'aborder l'utilisation de clips, de variables, de classes et des méthodes d'objets, ainsi que la gestion du scénario.

Sous Flash, commencez un nouvelle animation et créez des symboles (ctrl-F8 ou pomme-F8) de type "clip", un cercle plein et un trait vertical, à l'aide des outils de dessin situés sur la gauche de l'interface. Nommez-les "fond" et "aiguille".
Pour aiguille, utilisez le panneau Info (Flash 5) ou l'inspecteur de propriétés (Flash MX) pour donner au dessin les coordonnées x = 0 et y = -(la hauteur (h) du dessin) au sein de son clip, ou utilisez le panneau Aligner (ctrl-K) et, après avoir sélectionné "aligner vers la scène", cliquez sur "aligner les bords gauche" et "aligner les bords inférieurs". De même, pour fond, utilisez le panneau Aligner pour centrer le dessin avec "aligner les centres horizontalement" et "aligner les centres verticalement". Vous comprendrez que le petit "+" au centre de la scène corresponde au "centre de gravité" du clip.
Ne vous souciez pas de leur taille ni de leur couleur, et n'en glissez pas d'occurence sur la scène principale. C'est tout ce dont vous aurez besoin pour l'interface, le reste sera fait via ActionScript.

Pour pouvoir créer dynamiquement leurs occurences sur la scène, il faut les lier à la scène, ou les "exporter". Pour chaque symbole de la bibliothèque, sélectionnez-le puis dans Options (Flash 5) ou avec un clic droit (Flash MX), sélectionnez "Liaison", puis "Exporter ce symbole" (Flash 5) ou "Exporter pour ActionScript" (Flash MX), donnez le nom du symbole comme identifiant (fond et aiguille), validez. Retournez sur la scène principale.

Rédaction du code
Le scénario ne comprend pour l'heure qu'un calque appellé "Calque 1", avec une image clé vide (un petit cercle blanc, indiquant que la scène ne contient aucun élément). Nous allons créer deux autres images-clés afin d'y mettre notre code.
Renommez le calque en "scripts": c'est une méthode à laquelle il faut s'astreindre dès le début afin de prendre l'habitude de ne pas éparpiller son code sur plusieurs calques...
Sélectionnez l'image-clé vide, et appuyez deux fois sur la touche F6: cela crée deux images-clés vides à coté de la première.
Sélectionnez à nouveau la première image-clé, et appuyez sur F9: cela ouvre l'éditeur ActionScript. Dans les options d'affichage, passez en mode Expert (autre habitude à prendre dès le début). Nous sommes maintenant prêts à taper le code qui se trouvera sur la première image-clé. Etant la première image à être lue, elle contiendra l'ensemble du code d'initialisation ainsi que les principales fonctions utilisées par l'animation.

(actions pour l'image-clé 1 du calque "scripts")
//création des occurences sur la scène
attachMovie("fond", "fond", 0);
attachMovie("aiguille", "heures", 1);
attachMovie("aiguille", "minutes", 2);
attachMovie("aiguille", "secondes", 3);

Nous voilà d'entrée de jeu plongés dans une spécificité de Flash, avec la fonction/méthode de clip attachMovie. Cette fonction permet de créer une nouvelle instance d'un symbole depuis la bibliothèque de l'animation. Elle s'utilise de la manière suivante: attachMovie("symbole", "identifiant", profondeur); où symbole est le nom du symbole à instancier et identifiant le nom de l'occurence créée. De son coté, profondeur permet de placer une occurence sur un calque donné, afin de la placer devant ou derrière d'autre objets. Ainsi, nous avons ici placé fond au plus bas niveau, heures au niveau supérieur, minutes au-dessus de heures et secondes au-dessus de minutes. secondes sera donc toujours au-dessus de minutes, et ainsi de suite...
Notez que l'ActionScript requiert le respect de la casse: attachmovie() sera considéré comme une fonction utilisateur, tandis que attachMovie() sera reconnue en tant que fonction interne.

Ces occurences sont pour l'heure placées au point d'origine de la scène, c'est-à-dire en haut à gauche. Il nous faut donc les positionner sur la scène. Nous complétons le code de la première image-clé:

(actions pour l'image-clé 1 du calque "scripts", suite)
//positionnement des éléments
fond._x = 275;
fond._y = 200;
heures._x = fond._x;
heures._y = fond._y;
minutes._x = fond._x;
minutes._y = fond._y;
secondes._x = fond._x;
secondes._y = fond._y;

Les méthodes _x et _y sont des propriétés de la classe MovieClip, et sont donc disponibles dans tous les clips. Ce sont des entiers qui définissent une coordonnée du clip par rapport au clip parent (ici, la scène principale).
Nous plaçons donc ici tous nos éléments aux mêmes coordonnées, qui correspondent au centre d'une animation Flash de base (550*400). Etant donné que nous avons placé l'axe de fond au centre du cercle, et l'axe de aiguille à l'extrêmité inférieure du trait, nous obtenons un cercle situé au centre de l'animation et des aiguilles (identiques pour l'heure) qui partent du centre de ce cercle. Pour tester l'animation, faites ctrl-Envoi ou pomme-Envoi.

Il nous faut maintenant différencier les aiguilles entres-elles. Nous allons donc changer leurs tailles et leurs couleurs.

(actions pour l'image-clé 1 du calque "scripts", suite)
//taille des aiguilles
heures._height = fond._height / 4;
minutes._height = fond._height / 3;
secondes._height = fond._height / 2;

_height est une autre propriété de la classe MovieClip, qui donne le hauteur en pixels. Pour obtenir/modifier la largeur d'un clip, on utiliserait la propriété _width.
Partir de fond._height nous permet de faire en sorte que les aiguilles ne dépasseront pas le fond. secondes, l'aiguille la plus longue, sera donc égale au rayon du cercle fond (sa largeur divisée par 2), et les deux autre aiguilles seront plus petites encore...

(actions pour l'image-clé 1 du calque "scripts", suite)
//couleur des aiguilles
coulF = new Color(fond);
coulH = new Color(heures);
coulM = new Color(minutes);
coulS = new Color(secondes);
coulF.setRGB(0xBBBBBB);
coulH.setRGB(0x0000FF);
coulM.setRGB(0x00FFFF);
coulS.setRGB(0xFFFFFF);

Nous abordons avec Color le domaine des classes intégrées. Le langage ActionScript comporte des classes permettant de manipuler certaines données, à l'aide de méthodes et des constantes propres. Les classes de base sont celles issues de la norme ECMA (Math, Date, Array...), mais Flash dispose aussi de ses propres classes spécifiques: les classes d'animation (Color, MovieClip, Sound...), les classes client/serveur (LoadVars, XML et XMLSocket) et les classes "Auteur".
Certaines méthodes de classes peuvent être appellées directement, par exemple Math.abs(x); donne la valeur absolue de x. D'autres, comme setRGB, exigent la création d'une nouvelle occurrence de leur classe pour permettre leur emploi, par le biais de l'opérateur new : c = new Color(objet) créé un objet gérant la couleur de objet.
Nous avons donc ici construit quatre gestionnaires de couleur pour notre fond et nos trois aiguilles. Nous pouvons ensuite faire appel à la méthode setRGB pour leur donner une couleur (en hexadécimal): gris, bleu, cyan et blanc.

Page 1 | 2