Aller au menu - Aller au contenu

Icône Ma première animation !

Par Avatar SuprazZz
Mise à jour : 08/07/2010
4 613 visites depuis 7 jours, dont 262 sur ce chapitre classé 39/786
Nous allons créer votre toute première animation avec un soupçon d'ActionScript. Je vous guiderai surtout pas à pas avec un maximum d'images pour que vous ne vous perdiez pas.
Ce premier tuto vous permettra donc de vous familiariser de façon concrète avec Macromedia Flash 8.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Un nouveau document

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 :

Image utilisateur


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 :
Image utilisateur


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 :

Image utilisateur


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. :p
Retour en haut

Dessine moi une balle

Dessine moi une balle



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

Image utilisateur


Image utilisateur


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 :

Image utilisateur


Lui mettre un numéro



Image utilisateur

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 :
Image utilisateur


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 !

Image utilisateur


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

Image utilisateur


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

Interpolation de mouvement

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 !

Il existe aussi une interpolation de forme, qui comme son nom l'indique permet de modifier une forme. A l'inverse une interpolation de mouvement ne peut s'appliquer que sur un symbole !


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

Image utilisateur


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 :

Image utilisateur


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 :

Image utilisateur


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

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.

Image utilisateur


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

Un soupçon d'ActionScript

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 :

Image utilisateur


Attention ! Le code que vous tapez là appartient à l'image-clé 10. Si vous revenez à la position 1, le panneau Action sera vide. Le code que nous allons donc taper en position 10 s'exécutera quand cette image sera lue !


Tapez ce code tout simple ;) :
Code : Actionscript
1
stop();


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.

Image utilisateur


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.

Image utilisateur


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é.
Image utilisateur


Transformez ce carré en bouton :
Image utilisateur


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
Image utilisateur


Maintenant, allez dans l'onglet Action où vous aviez déjà écris stop();.
En dessous rajoutez ce code :
Code : Actionscript
1
2
3
monbouton.onRelease = function() {
        play();
};


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. :D
Retour en haut
Voilà, c'est tout pour ce court, mais très imagé, mini-tuto.
Ce que vous devez avoir absolument retenu, c'est comment écrire du code dans Flash !
Vous devriez aussi savoir, de façon très rapide et sans explication, créer un nouveau symbole : graphique, bouton ou clip. Je ne l'expliquerai plus. ;)
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
21 commentaires pour "Ma première animation !"
Note moyenne : 3.24 / 4 (137 votes)
Pseudo Commentaire
Hors ligne LeonLecamet # Posté le 12/03/2010 à 17:37:42

Mais il n'y a donc personne pour mettre le tuto à jour avec AS3 ???

Disposer d'un tutoriel, c'est bien, mais d'un tutoriel qui marche pas, ça n'apprend pas grand chose !

pas glop !
Hors ligne LeonLecamet # Posté le 16/03/2010 à 10:21:24

Pour les suivants:

Depuis CS4, l'interface a un peu changé. Pour faire une interpolation de mouvement, n'essayez pas avec "interpolation de mouvement", ça marche pas.

Il faut faire "interpolation classique", et ça fonctionne.

Par ailleurs, pour tout ce qui est graphisme, et pour se familiariser avec l'IDE, je conseille l'excellent site:
http://www.tuto-flash.com/formation/10.html

Malheureusement, là-bas il n'y a rien sur le code (pas encore ?).
Hors ligne Froze # Posté le 10/11/2010 à 19:38:30

Salut tres bon tuto , néanmois est-il normal que lorsque je test l'animation à la fin et que clique sur le bouton, elle ne se relance pas comme prévue ?(j'ai bien mis un document AS 2.0 et je suis sous flash cs5) Mais bon à part celà tout fonctionne à merveille merci :)
Hors ligne toto_toto69 # Posté le 13/03/2012 à 18:52:25

Avis : Très bon

A propos d'une utilisation ratée de Flash : Spiral Connect http://spiralconnect.univ-lyon1.fr/
Ce site est l'exemple typique de ce qu'il ne faut pas faire. Ca rame et c'est moche, l'Université Lyon1 a payé très cher pour un boulet inutilisable.
Hors ligne albert_albert69 # Posté le 26/03/2012 à 15:50:02

Avis : Très bon

Je ne sais pas si le lieu est approprié mais je confirme que c'est un site très moche

Voir tous les commentaires