[Flash] Créer une animation Gore
Flash est un logiciel assez compliqué à utiliser, je suis souvent le premier à le dire. Mais il y a tout de même moyen de faire de belles animations réussies rien qu'en utilisant l'interface et sans s'y connaître en code, ni quoi que ce soit
Mon but aujourd'hui est de vous apprendre à créer une animation facilement, et rapidement, où le petit bonhomme se fait tirer dessus et finit par exploser avec une grenade.
Résultat final:
(Résultat simple améliorable facilement, le but du tuto ici est de vous montrer les principaux outils de Flash pour faire une animation rapidement. A vous ensuite d'aller plus loin si vous en avez l'envie ou le besoin)
Informations
Niveau: débutant-intermédiaire
Temps: 30min
Matériel nécessaire: Ordi + Macromedia/Adobe Flash + Neurones
Voici le fichier .fla pour vous inspirer:
http://stocks.monsitegratuit.com/upload ... o/tuto.fla
http://stocks.monsitegratuit.com/upload ... o/tuto.fla
Créer une animation gore
Création du document
Etape 1:
Let's go! Ouvrez le programme Flash et créez un nouveau document (Ctrl+N). Prenez Document Flash comme type et poursuivez en cliquant sur OK. Vous aurez un document Flash par défaut dont nous changerons les paramètres ensuite.
Etape 2:
En bas de la fenêtre, changez la taille du document en cliquant sur le bouton suivant...
Etape 3:
Entrez un titre, une description, et les dimensions (tâchez d'avoir un document plus haut et plus large). Pour suivre le tuto, essayez de suivre mes formulaires, sinon faites à votre guise
Etape 4:
Renommez votre seul calque en double-cliquant dessus et nommez-le "(Fond)". Pensez toujours bien nommer vos calques pour vous y retrouver quand vous en aurez plusieurs. C'est très utile, prenez donc bien cette bonne habitude.
Le fond
Etape 5:
Nous allons faire notre fond! Sélectionnez le pinceau, couleur noire, et une petite taille! Nous allons dessiner des maisons comme fond!
Etape 6:
J'obtiens l'image si dessous. Un fond simple pour le tuto, mais vous pouvez améliorer le fond en insérant des images, vidéos etc. De belles petites maisons et une petite rue peuvent très bien faire l'affaire!
Etape 7:
Sélectionnez tous les petits rectangles jusqu'au numéro 160 (la 160ième image).
Etape 8:
.Cliquez avec le bouton droit de la souris et cliquez sur "Insérer une image ". Vous aurez maintenant cette même image de fond jusqu'à la 160ième image.
Création du héro
Etape 9:
Nous allons créer un personnage simple en bâtonnets. Pour ce faire, commencez par créer un calque en cliquant sur le bouton encadré en rouge ci-dessous:
Etape 10:
Nommez ce calque "Perso" pour vous y retrouver par la suite, comme je l'ai dit plus haut.
Etape 11:
A l'image numéro 15, cliquez avec le bouton droit de la souris (dans la barre de Perso) et choisissez "Insérer une image-clé". Cela veut dire qu'à l'image 15 le personnage pourra être à un autre endroit qu'à l'image 0.
Etape 12:
Décidez de l'endroit où sera votre personnage à cette image numéro 15.
Etape 13:
Sélectionnez les images allant de 1 à 15 inclus, cliquez avec le bouton droit de la souris et faites "Créer une interpolation de mouvement". Cela fait en sorte que Flash va décider des images à faire entre la première et la quinzième, et mettra votre personnage en mouvement.
Etape 14:
Continuez ainsi pour déplacer votre personnage (je conseille le zig-zag) et ce en intervalle de 15 images, jusqu'à la soixantième. Faites ensuite une image-clé à la 85ième!
Etape 15:
Mettez le bonhomme sur la route, entre deux maisons, à l'image-clé 85.
Etape 16:
Ensuite, en plusieurs interpolations rapides de mouvements (quelques images), faites en sorte qu'il fasse une rotation. Celle-ci se fait en plusieurs étapes, avec un besoin de plusieurs images-clés.
Création de l'arme
Etape 17:
Créez un nouveau calque appelé Arme.
Etape 18:
Dessinez une sorte d'arme. Faites bien en sorte qu'elle dépasse de l'image en dessous car par la suite elle pourra monter dans l'écran et devra donc être plus grande (on me comprends toujours là ?)
Etape 19:
Faites en sorte qu'une image avant une image clé du personnage, l'arme doit tenter de suivre le personnage pour faire exprès qu'elle le rate toujours de peu. Faites ainsi jusqu'à la 84ième image, avant le saut du bonhomme.
Création des impacts et déflagrations
Etape 20:
Créez deux nouveaux calques: Impacts et Déflagration.
Etape 21:
A l'image 10, insérez une image clé aux deux calques que nous venons de créer.
Etape 22:
Les impacts resteront. Donc la ligne après l'image de l'impact doit être grisée vu qu'elle reste affichée. Par contre, pour les déflagrations, elles devront JUSTE s'afficher quand le fusil tire, et être effacée après (Sélection des images où le feu doit être absent>clic droit>effacer les images).
Etape 23:
Créez un feu simple avec le pinceau et mettez le au bout de l'arme aux images-clé, sur le calque de Déflag. aux moments ou un impact s'ajoute aux impacts précédents.
Etape 24:
Continuez ainsi pour le reste en gardant bien cette idée de supprimer les images de déflagration quand aucun impact n'apparaît. Continuez donc pour les autres impacts que vous souhaitez créer.
Etape 25:
Voilà où nous en sommes à l'arrivée de notre bonhomme sur la route entre les deux maisons:
Création de la grenade
Etape 26:
Créez un nouveau calque nommé Grenade et faites de l'image 105, une image-clé.
Etape 27:
Créez une grenade avec le pinceau. en quelques images faites lancer la grenade de l'extérieur aux pieds du personnage. Voici une capture d'une des images clés nécessaire à la réalisation de cette partie d'animation:
Etape 28:
A la 112ième image, la grenade est à ses pieds, comme ceci:
Etape 29:
Laissez deux ou trois images avec la grenade et effacez toutes les images, car nous allons créer une explosion, et évidemment pendant et après celle-ci, cette grenade devra ne plus exister
Création de l'explosion
Etape 30:
Créez un nouveau calque, nommé "Explosion".
Etape 31:
A l'image (116 pour moi) où la grenade disparaît, insérez une image-clé pour le calque Explosion.
Etape 32:
Nous allons utiliser 6 images pour l'explosion. La première: une petite boule orange avec un peu de feu fait au pinceau autour.
Etape 33:
A la 119ème image (3 images après) transformez librement votre boule de feu de tout à l'heure pour qu'elle soit plus grande.
Etape 34:
Créez ensuite une interpolation de mouvement et voyez la boule qui grossit très rapidement en l'espace de deux trois images
Etape 35:
Redimensionnez ensuite la boule le plus petit possible deux images après, et faites une interpolation de mouvement. En gros, les gens devraient voir une grenade, puis une explosion qui grandit et qui rétrécit très vite (en l'espace de quelques images)...
Etape 36:
...puis qui disparaît!
La mort d'un Héro
Etape 37:
Dans le calque du Perso, insérez une image-clé au moment de l'explosion.
Etape 38:
L'image suivante, créez aussi une image-clé.
Etape 39:
C'est sur cette image-clé que vous venez de créer que nous allons modifier la position de notre héro. Mettez le de côté, les jambes se dirigeant vers l'explosion de la tête vers la gauche.
Etape 40:
Quelques images plus tard, insérez à nouveau une image-clé.
Etape 41:
A cette image, placez votre personnage la tête vers le bas tout à l'extérieur de l'image, comme s'il avait été expulsé hors de l'écran!
Etape 42:
Testez maintenant votre animation pour régler les derniers bugs et pour voir si vous pouvez la publier.
Enrégistrement
Etape 43:
Aucun souci? Parfait! Enregistrez donc votre travail en .fla au cas où vous devriez modifier quelque chose par la suite. Exportez-le (Fichier > Exporter > Exporter l'animation) ensuite en .swf pour le web, en .avi pour l'ordi, à vous de voir!
Voilà le tutoriel est terminé, j'espère que je vous aurai appris comment faire de grandes choses avec peu de connaissance!
A bientôt
Boulledogue
Mais c'est vrai que pour les bases de Flash, c'est le top, simple à comprendre et clean au niveau des captures !
