L'IDE de macromedia

Pour que vous puissiez convenablement suivre ce tutoriel, on va essayer de se mettre d'accord sur la disposition des différentes fenêtres de Flash.

Utilisez le menu Fenêtre dans la barre des menus du haut, pour disposer les fenêtres de la façon suivante :


En plein milieu, le gros carré blanc, représente la Scène. C'est ce que verra l'utilisateur de votre animation, et c'est là que nous dessinerons et jouerons avec des formes.

On remarquera le panneau Actions tout en haut, dans lequel nous écrirons le code ActionScript.
Juste en dessous se trouve le Scénario (souvent appelé timeline en anglais). Il permet de naviguer dans le temps et dans les calques, nous reviendrons dessus plus loin.

Tout en bas, deux panneaux très importants :
- L'aide de Flash, qui est extrêmement claire et détaillée. Quand je vous présente une nouvelle fonction ou une nouvelle classe, n'hésitez pas à aller voir ce qu'en dit l'aide qui apportera un complément d'informations ainsi que des exemples pratiques.
- Les propriétés, qui permettent de modifier justement les "propriétés" des objets que l'on peut manipuler dans Flash.

A gauche vous trouvez comme d'habitude la classique barre d'outils, très similaire à celle de logiciels comme photoshop, par exemple.

Et enfin à droite encore d'autres fenêtres. Celle qui nous intéresse étant la Bibliothèque.

Ainsi se termine le petit tour d'horizon des différentes fenêtres de Flash.

Maintenant, mettez votre casquette, Spielberg n'a qu'à bien se tenir !
Nous allons attaquer le scénario ! Le gros bloc plein de carrés noirs et blancs en haut.

Nous avons vu que la scène permettait de dessiner en deux dimensions : largeur et hauteur.

Le scénario rajoute deux dimensions :

• La profondeur
• Le temps

La profondeur

La profondeur se gère à l'aide des Calques, à gauche dans le scénario. Vous pouvez en créer autant que vous le souhaitez, mais vous devrez toujours en garder un au minimum.

En fait, leur utilisation est toute simple : vous pouvez dessiner sur chacun, mais les formes(=les dessins) de chaque calque sont indépendantes entre elles. Elles ne peuvent donc pas "s'écraser" mutuellement. Essayez donc de dessiner un carré plein dans un calque et un disque dans un autre et superposez les deux formes. Elles se chevauchent sans problème et ne s'effacent pas comme elles l'auraient fait si elles avaient été sur un seul calque.

Vous remarquerez aussi que la forme qui est dans le calque du dessus, est aussi au dessus dans la scène. L'ordre dans lequel vous rangez vos calques permet donc de gérer la profondeur de vos formes les unes par rapport aux autres.

Si vous mettez un calque au dessus de tous les autres, alors les dessins placés sur ce calque seront au dessus de tous les autres dans la scène.

Le temps

Chaque petite case que vous voyez est une image, que nous appellerons quelques fois frame ("trame" en anglais) pour éviter les confusions. Le curseur rouge contrôlable à la souris permet de se déplacer dans le scénario : c'est à dire dans le temps.
Il existe plusieurs types de frames.



Dans l'image ci-dessus, vous pouvez voir en position 1 ce qu'on appelle une image-clé pleine. Je sais qu'elle est clée parce qu'elle a un petit point noir et qu'elle est pleine parce qu'elle est grisée.
Je suppose que vous avez compris que pleine signifie que dans cette frame on a dessiné quelque chose. Cette image-clé continue jusqu'en position 16, le carré blanc en indiquant la fin. Toutes les images entre le point noir et le carré blanc sont donc les mêmes.


Une image-clé vide ! Qui se termine en position 40.



Il faut bien comprendre que chaque image correspond à la scène à un instant donné.

On va prendre l'exemple d'un petit dessin-animé avec un bonhomme en fil de fer :
Mettez vous à la position 1 (avec une image-clé vide) et dessinez un personnage à tête jaune.
Créez une nouvelle image-clé en position 6 et changez la couleur de la tête du personnage pour du rouge. Ajoutez une image simple à la position 10 pour que le personnage rouge reste quelques instants et ne s'en aille pas tout de suite à cause de la lecture en boucle de l'animation.

Si vous exécutez l'animation (Contrôle->Tester l'animation), vous verrez que chaque personnage reste affiché le temps de 5 frames.

Si vous avez un peu de mal au début, vous pouvez vous aider du mode Aperçu du scénario. Il faut cliquer sur le petit bouton en haut à droite du scénario comme ci-dessous et sélectionner Aperçu. Vous devriez obtenir un scénario semblable à celui ci :


Ce mode est pratique pour débuter, mais pas vraiment pour travailler .

J'en profite pour vous parler des ips (images par secondes) ou encore en anglais : fps (frames per seconds).
Sur la photo ci-dessus, on peut lire en bas : 12.0 ips.
Cela signifie, que durant 1 seconde, Flash lira 12 images. En clair une frame durera 1/12 = 0.083 seconde !

On estime la durée de la persistance rétinienne à 50ms, ce qui donne 40 images par secondes pour avoir une fluidité quasi-optimale.
Personnellement j'utilise souvent 24 ips dans mes animations, c'est d'ailleurs la fréquence utilisée à la télévision.
Pour modifier cette valeur dans votre animation, il vous suffit de double-cliquer dessus.

Tous les objets présents dans la scène sont :

• soit des formes
• soit des symboles

Les formes

Je passerai rapidement dessus, car je pense que vous savez déjà dessiner . La particularité des formes dans Flash, c'est qu'elles sont vectorielles.

Les images Bitmaps

Prenons un exemple : ouvrez paint, dessinez une droite, puis zoomez à fond dessus !

Vous remarquez que la droite est "crénelée", ou "pixelisée" : on peut distinguer chaque pixel aisément.
C'est ce qu'on appelle une image bitmap, qu'on peut traduire par "carte de bit" en français.
C'est vrai que ce n'est pas beaucoup plus parlant . En fait, il faut se représenter l'image comme une grille, où chaque case possède des coordonnées. Ensuite dans votre image Bitmap, à chaque case, c'est à dire à chaque pixel, on associe une couleur.

Donc en clair, plus on zoom, plus c'est moche

Les images vectorielles

On peut bien sûr importer des images Bitmaps dans Flash, mais non seulement c'est moche quand on zoom dessus, mais en plus ça prend beaucoup de place, car il faut stocker la couleur de chaque pixel de l'image !
A la base, les animations Flash sont censées être très légères, car elles sont faites pour le Web, et tout le monde ne possède pas du 100Mbit/s comme connexion internet .
En Flash on dessine donc avec des vecteurs. Vous pouvez dessiner une droite dans Flash, et vous verrez que même en zoomant à fond, elle reste lisse !

Dans une image vectorielle on ne stocke donc pas la couleur de chaque pixel, mais seulement les coordonnées d'un vecteur et de son origine. Si vous regardez le schéma à côté, le vecteur est représenté par la flèche orange. Son origine correspond au point A.
On a juste besoin d'enregistrer la position du point A et les coordonnées (la longueur et l'orientation si vous préférez) du vecteur. Ensuite, le lecteur Flash interprétera les données et dessinera une droite partant de A et suivant le vecteur.

Le principe reste le même si vous dessinez des courbes ou des formes complexes, les vecteurs permettent alors d'indiquer en plus la "courbure" d'une droite.

A vous de jouer

Maintenant que vous savez ce qu'est une image vectorielle, je vais vous laisser jouer avec les pinceaux et stylos de la barre d'outils. Ils se manipulent presque comme ceux de Paint ou de Photoshop, mais vous devez garder à l'esprit qu'ils fonctionnent avec des vecteurs, vous ne pourrez donc pas faire de Pixel-Art dans Flash .

Les symboles

Tout ce qui n'est pas une forme est nécessairement un symbole. Première particularité des symboles : ils sont tous listés dans la bibliothèque.

Prenons un exemple. Dessinez un carré rouge sur la scène avec l'outil rectangle, sélectionnez votre joli carré et cliquez dans les menus sur Modification -> Convertir en Symbole.



Vous pouvez donner un nom à votre symbole. Ce nom permettra de le retrouver dans la bibliothèque, on l'appellera donc nom de bibliothèque.
La fenêtre vous demande aussi l'alignement de la forme sélectionnée dans le symbole. Soit vous centrez le symbole avec la forme, soit vous mettez la forme dans un des coins du symbole. A vous de choisir pour l'instant.



Comme vous pouvez le voir, il existe 3 types de symboles. Nous allons les détailler plus bas.
Pour l'instant votre nouveau symbole apparaît dans la bibliothèque.
Ce qu'il y a sur votre scène n'est donc plus une forme, mais un symbole, vous ne pouvez donc plus le modifier directement avec les outils.
En fait la forme est maintenant contenue dans le symbole. Pour la modifier, il faut rentrer dans le symbole. Vous pouvez pour cela double-cliquer soit sur l'occurrence du symbole dans la scène soit sur son nom dans la bibliothèque.

Maintenant, glissez-déplacez plusieurs fois le symbole de la bibliothèque vers la scène. Vous remarquez qu'on peut en mettre autant qu'on veut ! En fait, le symbole dans la bibliothèque est le "modèle" et tous ceux sur la scène sont des occurrences de ce modèle.
D'ailleurs si vous modifiez un seul de ces symboles, la modification se répercute sur tous les autres !

Il est possible de placer un symbole dans un autre, puis dans un autre, puis dans un autre etc..., à l'infini ! Par contre, n'essayez pas de placer un symbole dans lui même : ça ne fonctionnera pas !






Voyons maintenant les différences entre les différents symboles :

Le graphique

Le graphique est le symbole le plus simple ! Il permet de convertir une forme en symbole et de le réutiliser le nombre de fois voulu sur la scène. Un graphique n'apporte aucune interactivité et doit donc être utilisé décorativement seulement.
Les graphiques peuvent aussi être animés, il faudra alors préciser s'ils doivent l'être en boucle ou pas dans les propriétés de l'occurrence. (Vous sélectionnez l'occurrence sur la scène et vous pouvez modifier ses propriétés dans le panneau justement nommé Propriétés).

Le bouton

Les boutons permettent de rajouter un peu d'interactivité dans votre animation, en permettant à l'utilisateur de cliquer dessus. On peut ensuite lier le bouton à un Script.

Vous pouvez remarquer que le scénario d'un bouton est différent de celui de la scène ou d'un graphique. On ne peut y mettre que 4 images, qui correspondent aux 3 états du bouton plus sa zone de réactivité.



Le premier état Haut correspond à l'aspect du bouton quand on n'y touche pas. Dessus correspond à la forme du bouton quand on passe la souris dessus, et Abaissé c'est tout bêtement quand on clique dessus. Vous pouvez ainsi créer 3 images-clés pour chaque état et constater par vous même.

La dernière image : cliqué, ne sera jamais visible par l'utilisateur, elle permet de spécifier la zone cliquable. Ainsi, si vous n'avez que du texte dans votre bouton, pour cliquer dessus, il faudra viser une lettre précisément, pas à côté ! Alors que si vous rajoutez un rectangle qui encadre le texte dans l'image-clé Cliqué, alors il suffira de passer la souris sur ce rectangle (invisible dans l'animation) pour que le bouton s'active !

Les boutons ne peuvent pas être directement "animés" (avec une seule image, ça va être dur). Mais rien ne vous empêche de créer un graphique animé, et de le placer dans un des états du bouton .

Les Clips

Aussi appelés quelquefois MovieClip, il sont la crème des symboles ! (c'est pour ça que je les garde pour la fin).
Il est en tout point commun avec la scène (d'ailleurs, la scène est un clip par convention...) et c'est celui qu'on utilise le plus. Si on le souhaite, il peut se comporter comme un bouton, on peut aussi lui adjoindre du code, et en plus il peut être animé !

Bref, le symbole à tout faire. Pour l'instant je n'en dit pas plus, vous le découvrirez vous même plus tard.