Bonjour à tous !
Aujourd'hui, je vais partager avec vous ma façon de procéder pour créer un .gif animé facilement.
Le tutoriel sera en deux partie car j'utiliserais deux programmes, mais avant tout, il faut les télécharger
Game Maker :
Game Maker est un logiciel destiné à la création de jeux-vidéo, mais son éditeur de sprite va nous être très utile pour créer nos .gif animé
Télécharger Game Maker 6.1
Télécharger Game Maker 7
Si vous êtes sur Vista, téléchargez Game Maker 7 car Game Maker 6.1 ne fonctionne pas sous Vista.
Microsoft Gif Animator :
Microsoft Gif Animator est un logiciel gratuit qui permet d'assembler des images .gif afin d'en faire un .gif animé.
On pourra choisir la durée de chaque frame, si l'animation doit se répéter et s'il y a de la transparence ou non.
Télécharger Microsoft Gif Animator
Une fois les logiciels téléchargés, installez-les évidemment
Partie 1 -- Assemblage du .gif avec Game Maker
Ici, je vais me servir de ce sprite set pour faire mon .gif animé :
/!\ : Notez l'affreuse couleur flashy qui pique aux yeux en arrière plan. C'est fait exprès, ça va me servir pour plus tard.
Un conseil donc, si vous comptez mettre un fond transparent, je vous conseil d'utiliser une couleur très repérable en fond, ça vous évitera bien des soucis par la suite.
Voila, maintenant, ouvrons Game Maker.
Vous avez ceci :
Faites un clic droit sur le dossier
Sprites et sélectionnez
Create Sprite.
Une petite fenêtre s'ouvre. Cliquez sur
Edit Sprite. Une autre fenêtre s'ouvre encore (le
Sprite Editor), c'est ici que tout va se passer.
Je ne vais pas vous détailler toutes les options, je vais vous parler seulement des fonctions qui nous intéresse ici.
Cliquez sur
File, voici le menu :
Voila tout ce que nous allons utiliser, rien de plus
New... : Ici on laisse tomber. C'est seulement utile si vous voulez dessiner vos frames directement sur Game Maker. Mais le plus simple, ça reste quand même d'importer des images
Create form File... : Pas très intéressant, laissez tomber.
Add form File... : Idem, oubliez.
Save as Gif... : Une fois votre sprite animé créé, faudra l'enregistrer grâce à cette commande.
Save as Sprite... : Si jamais vous avez envie d'enregistrer votre sprite animé sous la forme d'un sprite set, hé bien cette fonction est faite pour vous x)
Create form Sprite... : Ah, voila qui est bien utile ! C'est ça qu'on va utiliser
On utilise cette option pour créer le sprite, si après on veut rajouter des images, on utilisera plutôt la fonction suivante.
Add form Sprite... : même chose que
Create form Sprite sauf qu'il sert à rajouter des sprite à l'animation et non à créer une animation (vous ne pourrez pas redéfinir la taille d'un sprite avec cette option par contre).
Close saving changes : C'est pour sauvegarder les changements de ce sprite sous Game Maker. Si vous utilisez Game Maker juste pour les .gif animé, faite pas attention.
On clique donc sur
Create form Sprite et on va cherchez son image.
Voila ce qu'on obtient :
Les paramètres important ici sont
number of images (le nombre de frame que compose votre sprite animé),
image per row (je sais pas exactement ce que ça signifie, mais ça correspond au nombre de colonne qui compose votre sprite set),
image width (largeur en pixel d'une frame) et
image height (hauteur en pixel d'une frame).
Les autres options servent à séparer vos frames (essayez si ça vous intéresse).
Une fois que c'est bon, on clique sur OK.
On reviens à l'éditeur de sprite, on a nos frames, et si on coche
Show Preview, on a une idée de ce que donne l'animation (on peut régler la vitesse avec
Speed évidemment).
/!\ : Notez que c'est le pixel le plus en bas à gauche qui définit la transparence sur Game Maker. Mais ceci n'a aucune importance pour un .gif animé (donc, ne vous en faite pas si le pixel en bas à gauche n'est pas de la couleur souhaité).
Si rien qu'avec ça, votre animation est fini, ok, reste plus qu'à l'enregistrer en cliquant sur
Save as Gif.
Autrement, si vous avez des choses à rajouter, utilisez maintenant
Add form Sprite et allez chercher ce qui vous manque.
Remarquez aussi qu'on peut couper/copier/coller les frames et les réorganiser en cliquant sur les flèches bleus.
Une fois votre sprite enregistré en .gif, vous en avez terminé avec Game Maker.
/!\ : Ce n'est pas fini, regardez le résultat obtenu avec simplement Game Maker :
Pas de fond transparent, pas de répétition, aucun contrôle sur la vitesse, bref, pas brillant du tout, n'est-ce pas...
Passons donc à la deuxième partie, histoire d'avoir un bien beau .gif animé et tout et tout =D
Partie 2 -- Finalisation du .gif animé avec Microsoft Gif Animator
Lancez
Microsoft Gif Animator et ouvrez le .gif que vous venez de faire avec Game Maker.
Tout d'abord, on va choisir si l'animation se répète ou non.
Cliquez sur l'onglet
Animation.
Looping n'est pas coché par défaut, cochez-le si vous voulez qu'il y ait répétition.
Entrez un nombre dans
Repeat Count si vous voulez que le .gif animé se répète un nombre de fois, ou cochez
Repeat Forever si vous voulez qu'il se répète à l'infini.
Maintenant, passons à la transparence et à la durée des frames.
Cliquez sur l'onglet
Image.
Ici, on peut définir frame par frame la vitesse et la transparence.
Mais bon, imaginez qu'il y ait 58 frames à votre animation, va vous falloir de la patience de faire frame par frame hein...
Vous pouvez toujours cliquez sur
Select All (c'est trois petites étoiles blanches, le raccourci clavier correspondant est
Ctrl+L).
Maintenant, voyons les paramètres.
Duration : C'est, en centième de seconde, la durée d'une frame. Si vous sélectionnez toutes les frames, elles auront toute la même "duration" (oh lol).
/!\ : Bien que la vitesse est censé être en centième de seconde, ce n'est pas la réalité exacte. De plus, la vitesse d'un .gif animé varie parfois d'un navigateur web à l'autre.
Undraw Method : Ici, c'est pour la transparence.
Si vous voulez mette une couleur en transparence, choisissez
Restore Bakground plutôt que
Undefined, et cochez
Transparency.
Quand vous cochez
Transparency, se met en évidence. C'est ici que le gros défaut de Microsoft Gif Animator réside... Vous devez choisir la couleur de transparence, mais impossibel de le faire si vous avez sélectionné plus d'une frame... Il va falloir le faire frame par frame (ce qui peut prendre beaucoup de temps si vous avez beaucoup de frames :x).
Sélectionnez donc frame par frame votre couleur de transparence (il faut cliquez sur le carré noir pour avoir une liste de couleur, vous devez choisir dans cette liste la couleur de transparence, ce qui n'ets pas toujours évident... D'où le fait d'avoir une couleur bien flashant comme couleur de transparence peut aider ici =D Je vous l'avez dit
).
Voici la palette de couleur de mon exemple :
Sachez que les couleurs que vous utilisez pour vos sprite son en générale ceux de la premières lignes.
Enfin, plus vous utilisez de couleur, plus ça devient compliqué à s'y retrouver... Encore un autre défaut de Microsoft Gif Animator... Mais vu qu'il est gratuit et qu'il fait bien son boulot, moi, je lui pardonne
Et voila le résultat =D
Bon, le tutoriel est très long, mais en pratique, ça prend très peu de temps, et c'est pas dur.
Si vous avez des questions/suggestions, n'hésitez pas.
Comme vous pouvez vous en apercevoir c'est une photo de renard ce qui n'est pas un pixel-art mais ça va bientot en devenir un!
Et si possible détails y compris!
Voila a présent commencer a faire les détails....
Voila vous pouvez a présent colorier avec remplissage l'image que vous avec crée si possible créer des ombrages!Et voila le résultat!
~~~ 
~~~ 
