Boîte à Pixels - [Flash MX] Animation de base

[Flash MX] Animation de base
Aller à la page 1, 2 Suivante

Boîte à Pixels Index du Forum -> Tutos Graphisme

Boîte à Pixels

Voir le sujet précédent :: Voir le sujet suivant

Auteur

Message

Miccagrassu
Occasionnel(le)

Inscrit le: 03 Nov 2005
Messages: 7
Localisation: Bastia

Posté le: 03 Nov 2005 20:28 Sujet du message: [Flash MX] Animation de base

Bonjour à tous
Au sommaire de ce super tuto, l'animation pour les débutants, ou plutôt l'interpolation de mouvement !

Eh ouais, les bases avant tout !

Citation:

Qui veut gravir une montagne commence par le bas - Proverbe Chinois

Après cette somptueuse partie théorique, on passe directement à la pratique !
Banane

On commence par ouvrir flash et créer un nouveau document, soit pas l'écran d'accueil, soit par le bien connu Fichier->Nouveau->Document Flash

Ensuite, on choisit un outil au pif, perso je prends le pinceau. Peu importe de toute façon, c'est juste pour voir comment marche l'animation.
On fait un joli dessin... perso, ça donne ça:

Notre dessin terminé, on va le convertir en symbole, afin de pouvoir le faire gambader sur le document.
Pour cela, on va le sélectionner, avec l'outil de sélection (encadrez votre dessin pour que tous soit pris en compte; sur mon exemple, ça permettra de sélectionner le corps + les yeux + la bouche).
Une fois selectionné, aller dans Modification->Convertir en symbôle.
Dans la fenêtre qui s'ouvre, renommez votre symbôle, puis cochez Graphique (eh oui, c'est un dessin, donc un graphique Sourire

), puis OK.

Si tout s'est bien passé, votre dessin sera maintenant encadré de bleu:

On va double cliquer sur une case de la ligne du temps.La ligne du temps, c'est quoi ? C'est ça:

On va donc faire un clic droit sur la case 30, totalement au pif sachant qu'on est là pour apprendre et qu'on a pas besoin que l'animation ait une durée précise.
Libre à vous de prendre la case 10,12,56,12 000... mais bon 30 ça devrait être convenable hein Clin oeil

Une fois le clic droit effectué, on va selectionner, dans le menu qui vient de s'ouvrir, insérer une image clé, afin d'obtenir ceci:

Si vous cliquez sur n'importe quelle case entre 1 et 30, vous verrez que notre dessin est présent. Flash sait que dans cette case, il doit y avoir le dessin, vu qu'il est dans la case 1 et que rien n'a changé entre la case 1 et la case 2,3,4...29
En revanche, si je déplace le dessin dans la case 1, le dessin dans les cases 2 à 29 sera au même endroit que dans la case 1.
Mais je vous conseille de rien déplacer pour l'instant, ça peut porter à confusion pour la suite.

Mais dans la case 30, le dessin reste à l'endroit où il se trouvait au moment où on a créée l'image clé.
Et il ne changera de place que si on le déplace dans la case 30 !
(Hésitez pas à répondre si vous avez pas tout compris, c'est peut être pas super clair Invisible

)

On va maintenant déplacer notre dessin ,en ayant pris soin de s'assurer qu'on travaille bien sur la case 30 (elle doit être sélectionnée dans la ligne du temps). Ce sera sa position à la fin de l'animation.

NB: Le trajet du dessin durant l'animation ne sera pas celui que vous avez effectué pour déplacer le dessin. Vous pouvez faire 50 tours, la seule position prise en compte sera celle où vous déposez votre dessin.

Maintenant que notre dessin sait où il doit se rendre, il ne reste plus qu'à lui donner l'ordre d'y aller, sachant qu'il prendra le chemin le plus court (feignasse !) pour s'y rendre : la ligne droite.

Pour lui donner cet ordre, on faire un clic droit sur n'importe quelle case dans la ligne du temps entre 1 et 29.
Au pif, la case 20, clic droit, Créer une interpolation de mouvement

Si tout s'est bien passé, une flèche s'affiche dans la ligne du temps, allant de la case 1 jusqu'à la case 30:

C'est gagnayyyyyyyyy !

Testons tout de suite notre magnifique animation (Contrôle->Tester l'animation)

Ca marche, c'est parfait, vous avez créé votre 1ère animation Flash ! Banane

Pour l'enregistrer en fichier shockwave, que vous pourrez envoyer à tous vos amis afin de leur montrer que le boss de l'animation, désormais, c'est vous (ou tout simplement pour la placer sur un site, après tout, laissez le monde entier profiter de cette victoire !)

... Fermez le test, allez dans Fichier->Exporter->Exporter l'animation.

Mission accomplie Sourire

Pour voir ce que ça donne chez moi, cliquez ici.
[lien alternatif pour télécharger l'animation]

Attention, le fichier .swf n'est pas modifiable, vous ne pourrez pas travailler dessus... Pensez à enregistrer votre fichier en .fla (modifiable), en utilisant le célèbre Fichier->Enregistrer sous.