Ma première animation !

Commencez par ouvrir Flash.

Nouveau document

Si vous n'avez pas devant vous une nouvelle scène vierge, nous allons nous même créer une nouvelle animation.
Allez donc dans Fichier->Nouveau...
Cette boîte de dialogue devrait s'ouvrir :



Sélectionnez Document Flash dans la liste si ce n'est pas déjà fait, puis cliquez sur OK.

Propriétés du document

Normalement, en cliquant sur un espace vide de votre scène, vous devriez avoir un panneau Propriétés ressemblant à celui ci-dessous :


Il contient plusieurs informations importantes sur votre animation. Déjà vous trouvez sa taille. Ça tombe bien, j'aimerais bien la réduire un peu. Cliquez donc sur le bouton indiquant la taille de l'animation pour ouvrir la boîte de dialogue suivante :



Vous pouvez mettre un titre si vous le souhaitez, je me suis contenté de mettre 300pixels en largeur et 100pixels en hauteur pour mon animation.
Si vous le désirez vous pouvez aussi changer la couleur d'arrière-plan pour des tonalités plus exotiques.

Dessine moi une balle

Sélectionnez dans la barre d'outils à gauche l'outil ovale :





Ensuite avant de dessiner votre balle, choisissez les couleurs qui vous plaisent.

La couleur du haut, avec le petit crayon à côté, représente la couleur de la bordure de votre futur cercle. Dans notre exemple nous prendrons un bleu foncé.

La couleur du bas, avec le seau de peinture à côté, représente la couleur de remplissage, c'est à dire de l'intérieur de votre cercle. Prenez un bleu clair/turquoise.

Maintenant, vous pouvez dessiner votre ovale sur la scène, si vous enfoncez la touche Majuscule pendant que vous tracez l'ovale, celui-là deviendra un cercle.

Voilà à quoi ressemble notre balle :

Lui mettre un numéro

On va dessiner un petit numéro sur notre balle. Il faut donc utiliser l'outil texte juste au dessus à droite de l'outil ovale qu'on vient d'utiliser. Il est représenté par un A majuscule.

Vous pouvez alors écrire un 1 sur la balle, comme ci-dessous :


Sélectionnez votre champ de texte, vous pouvez modifier ses propriétés en bas. Comme dans n'importe quel éditeur de texte, vous pouvez choisir une police, une taille, une couleur... Je pense que vous êtes en terrain connu !

Transformation !

Par la suite, je voudrais que la balle puisse bouger sur la scène pendant l'exécution de l'animation. Une forme ne peut pas bouger, on va donc devoir transformer notre balle en symbole !

Sélectionnez donc la forme plus la zone de texte, et cliquez sur Modification->Convertir en symbole (ou faites F8 tout simplement).



Ici, un simple graphique suffira pour ce que nous voulons faire ! Cliquez sur OK.

Imaginez que vous ayez un clip dans une position à un moment puis dans une autre plus tard, et que vous vouliez créer une transition entre les deux états ? Oui, vous avez deviné, c'est l'interpolation de mouvement qui va s'occuper de ça !



Placez votre graphique "balle" tout à gauche de votre animation.
Votre scénario devrait ressembler à ça pour l'instant :



Il n'y a qu'une seule image clé, nous allons en créer une seconde en position 10.
Pour cela, cliquez sur la case 10 avec le bouton droit de la souris et cliquez sur Insérer une image-clé.
Voilà à quoi ressemblera votre scénario :



Pour l'image-clé 1, laissez votre balle à gauche de la scène. Pour l'image-clé 10 mettez la balle complètement à droite.

Maintenant, cliquez avec le bouton droit sur l'espace grisé entre les deux images-clés, et dans le menu sélectionnez Créer une interpolation de mouvement. L'espace devrait devenir bleu avec une flèche continue, comme ci-dessous :



Si vous appuyez sur Entrée, vous pourrez voir le déplacement de la balle de gauche à droite !

Tester l'animation

Flash possède un outil complet pour tester votre animation. Pour compiler puis prévisualiser l'animation, vous pouvez soit cliquer sur Contrôle->Tester l'animation soit utiliser la combinaison de touches Ctrl+Entrée.



Comme vous pouvez le constater, la lecture de l'animation se fait en boucle.

Il serait dommage de ne pas parler d'ActionScript dans ce chapitre d'introduction. Je vais donc montrer les deux, trois trucs à absolument connaître.

Arrêter la lecture

On va voir comment arrêter la lecture en boucle de l'animation. Placez-vous sur la dernière image-clé (en position 10).

Ouvrez le panneau Action en haut de votre IDE si vous l'avez placé comme moi.
C'est là que l'on va taper notre code :





Tapez ce code tout simple :
Code : Autre

Et lancez votre animation (Ctrl+Entrée).
Vous devriez voir que la balle arrête sa course une fois à droite.

C'est normal, stop() est une fonction d'ActionScript qui arrête la lecture de l'animation. Vous remarquez aussi que la ligne se termine par un ;

Pour l'instant, ne vous attardez pas sur les détails, ça sera le contenu des prochains chapitres. Essayez seulement de retenir comment on écrit du code et de comprendre son domaine d'action.

Un bouton pour la suite

Créez un second calque "Action" dans votre scénario et créez une seconde image-clé aussi en position 10.



Vous remarquez au passage la présence du petit a sur l'image-clé où nous avons écrit le code.

Supprimez le stop(); de là où il est, et mettez le sur l'image-clé 10 du calque "Action", car c'est là que nous mettrons tout le code.



Bien entendu, cette manipulation n'a strictement rien changé dans l'animation. Elle permet juste de centraliser le code pour une meilleure organisation.

Sélectionnez l'image-clé 10 du claque "Action" et dessinez sur la scène un petit carré.


Transformez ce carré en bouton :


Puis retournez sur la scène principale en double-cliquant sur un espace vide de la scène.
Et donnez à ce bouton un nom d'occurrence, en le sélectionnant puis en allant regarder dans ses propriétés. Appelez le : monbouton


Maintenant, allez dans l'onglet Action où vous aviez déjà écris stop();.
En dessous rajoutez ce code :
Code : Autre

Vous ne pouvez pas encore comprendre tout le code. Sachez que monbouton.onRelease va exécuter le code entre les crochets { } quand on cliquera sur monbouton.
Entre les crochets on a la fonction play() que vous devez connaître, qui va reprendre la lecture de l'animation.

En gros, ce qui se passe si vous exécutez l'animation :
- lecture de l'animation
- arrêt à l'image 10 car rencontre du stop();
- apparition du bouton rouge car positionné sur une image-clé en position 10
- si on clique sur le bouton, exécution de play(), qui reprend la lecture.