Créer son site Gratuitement : Service / Outils webmaster gratuit
Mon Site Gratuit
Contactez nous
Nos partenaires
Scripts
Tutoriaux
Nos services
Forums
Accueil
[Flash] Créer une animation Gore[Flash] Créer une animation Gore
 
[Flash] Créer une animation Gore

Autres Tutoriaux | [Flash] Créer une animation Gore

Tutoriel crée par boulledogue le 08-06-2009.

SocialTwist Tell-a-Friend

Ce tutoriel de Boulledogue vous permettra de réaliser toute sorte d'animation Flash sans beaucoup de connaissance, juste en utilisant les interpolations de mouvements et le pinceau!

Bonjour à tous les membres de MonSiteGratuit!
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)

http://stocks.monsitegratuit.com/upload ... o/tuto.swf




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


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.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/1.jpg


Etape 2:

En bas de la fenêtre, changez la taille du document en cliquant sur le bouton suivant...
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/2.jpg


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 :-)
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/3.jpg


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.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/4.jpg


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!
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/5.jpg


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!
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/6.jpg


Etape 7:

Sélectionnez tous les petits rectangles jusqu'au numéro 160 (la 160ième image).
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/7.jpg


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.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/8.jpg


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:
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/9.jpg


Etape 10:

Nommez ce calque "Perso" pour vous y retrouver par la suite, comme je l'ai dit plus haut.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/10.jpg


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.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/11.jpg


Etape 12:

Décidez de l'endroit où sera votre personnage à cette image numéro 15.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/12.jpg


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.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/13.jpg


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!
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/14.jpg


Etape 15:

Mettez le bonhomme sur la route, entre deux maisons, à l'image-clé 85.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/15.jpg


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.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/16.jpg


Création de l'arme

Etape 17:

Créez un nouveau calque appelé Arme.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/17.jpg


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à?)
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/18.jpg


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.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/19.jpg


Création des impacts et déflagrations

Etape 20:

Créez deux nouveaux calques: Impacts et Déflagration.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/20.jpg


Etape 21:

A l'image 10, insérez une image clé aux deux calques que nous venons de créer.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/21.jpg


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).
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/22.jpg


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.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/23.jpg


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.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/24.jpg


Etape 25:

Voilà où nous en sommes à l'arrivée de notre bonhomme sur la route entre les deux maisons:
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/25.jpg


Création de la grenade

Etape 26:

Créez un nouveau calque nommé Grenade et faites de l'image 105, une image-clé.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/26.jpg


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:
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/27.jpg


Etape 28:

A la 112ième image, la grenade est à ses pieds, comme ceci:
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/28.jpg


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 :-)
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/29.jpg


Création de l'explosion

Etape 30:

Créez un nouveau calque, nommé "Explosion".
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/30.jpg


Etape 31:

A l'image (116 pour moi) où la grenade disparaît, insérez une image-clé pour le calque Explosion.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/31.jpg


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.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/32.jpg


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.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/34.jpg


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 :-)
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/33.jpg


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)...
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/35.jpg


Etape 36:

...puis qui disparaît!
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/36.jpg


La mort d'un Héro

Etape 37:

Dans le calque du Perso, insérez une image-clé au moment de l'explosion.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/37.jpg


Etape 38:

L'image suivante, créez aussi une image-clé.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/38.jpg


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.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/39.jpg


Etape 40:

Quelques images plus tard, insérez à nouveau une image-clé.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/40.jpg


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!
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/41.jpg


Etape 42:

Testez maintenant votre animation pour régler les derniers bugs et pour voir si vous pouvez la publier.
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/42.jpg


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!
http://stocks.monsitegratuit.com/upload/boulledogue/anim_flash_perso/43.jpg


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


Poster un commentaire

Commentaire :

*Vous devez être connecté pour pouvoir poster un commentaire
Si vous n'êtes toujours pas inscrit, cliquez ici !

Commentaires

Eh bien oui j'ai vu absoluflash. Mais j'osais pas en parler car très violent.
Assez en tout cas pour ouvrir le site sur une fenêtre d'avertissement. Mais j'ai apprécier leur travail.

Ok d'accord pour ta proposition « hébergement », je te tiens au courant.

++

boulledogue

Eh bien oui j'ai vu absoluflash. Mais j'osais pas en parler car très violent.
Assez en tout cas pour ouvrir le site sur une fenêtre d'avertissement. Mais j'ai apprécier leur travail.

Ok d'accord pour ta proposition « hébergement », je te tiens au courant.

++

zardoz

Salut!
Il y en a encore ici en fin de page:
@+ et merci
Boulledogue

boulledogue

J'en prépare un autre plus court mais, mieux orienté vers l'interface et les captures explicatifs.
Si j'en préparais un comme le tiens j'aurais consommer tout mon espace serveur sur hiboox.

En effet depuis leur offre en illimité « moyennant des euros/mois » ils ont aussi réduit ...

zardoz

Ainsi à plusieurs membres nous pourrions en faire plus car
l'idée du développement en scénario est quand même une très bonne idée.

Lol on va se faire un petit film, productions MonSiteGratuit Century Fox
Merci pour vos commentaires
++
Boulledogue

boulledogue

En effet.

J'aimerais bien voir toute l'énergie consommer à créer de toute pièce un tel tuto.
C'est vraiment hors prix. Cà je te le jure. Mais quelle fierté quand même.

Je te suggère donc des animations ayant plusieurs éléments visuels
mais de plus courte duré ...

zardoz

j'avoue que plus c'est illustré, plus c'est simple ! Et ce qui est sur, c'est qu'il vaut mieux trop d'images que pas assez !
mais parfois certain se découragent rien qu'en voyant la longueur du tuto ... MDR

Cclleemm

Soumettre un tutoriel Autres Tutoriaux

*Vous devez être connecté pour pouvoir soumettre un tutoriel
Si vous n'êtes toujours pas inscrit, cliquez ici !