Croquis animation Inkscape + The Gimp

animation marche 1
english There is an english translation of this tutorial.

françaisLes croquis de l’animation sont réalisés avec Inkscape, puis assemblé avec le greffon d’animation GAP pour The Gimp.

Sous Inkscape :
Vignette espace de travail animation
* On va utiliser le gestionnaire de calque (menu Calque=>Calques… (CTRL+MAJ+L)) pour travailler 1.
* Le premier calque d’Inkscape est utilisé pour le « décor ». 2
* Ensuite un calque est ajouté pour chaque étape croquée3.
* Les calques sont utilisés comme des pelures d’oignon (l’opacité du calque peut être réglé en bas à gauche de la fenêtre de travail, entre la couleur active et le nom du calque (o : 1,00 par défaut)).4
* Lorsque l’animation est prête, un rectangle vide avec bordure est ajouté pour préciser le champ de vue, il restera sélectionné pour faciliter le travail.5
* A chaque étape, le rectangle est déplacé avec l’outil transformation (menu Objet=>Transformer), ici verticalement.6
* Puis le calque à utiliser est affiché en ouvrant l’œil dans la fenêtre des calques, (les autres étant rendus invisibles en y fermant l’œil).9
* L’image est sauvegardée avec le menu Fichier=>Exporter en Bitmap, en choisissant l’option sélection dans la boite de dialogue ouverte.10
* On donne un nom contenant plusieurs chiffres representant les étapes (j’ai par exemple utilisé marche1.xx.png où xx va de 01 à 18).11

On passe alors sous The Gimp :
* On ouvre le fichier marche.01.png (dans mon cas).
* Puis on va dans le menu Video=>Frames flatten… (je ne sais pas pourquoi ca n’est pas traduit dans ma version, j’avais pourtant participé à la traduction de GAP en français ??? La traduction doit être quelque chose du genre aplatir les images ?) Toutes les frames contenant des numéros placés de la même façon que la première image seront automatiquement aplaties.

Et voila on à de quoi sortir une animation.

Pour sortir un gif animé comme je l’ai fait :
* On fait alors dans le menu VIdeo=>Frames to Image….
* On peut éventuellement réduire le nombre de couleur afin d’alleger le gif (j’ai fait du n&b 4 couleurs indéxées ici).
* De l’image « aplatie » multicalque crée, il suffit de faire Fichier=Sauvegarder (comme gif), puis de choisir animation. J’ai mis 250 millisecondes de pause pour chaque image, afin d’avoir 4 image par seconde.

This entry was posted on Friday, September 22nd, 2006 at 0:08 and is filed under Animation, Didacticiel, Gimp, Inkscape, vectoriel. Find similar posts by selecting any of the following tags: . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Comments so far

  1. Merci, super bon tuto.
    Toujours rien que le SVG animé?
    Parce que quand ça va marcher, on pourra enfin oublier Flash!

  2. Bon, visiblement, le SVG animé est en cours d’implémentation sous firefox :

    http://www.mozilla.org/projects/svg/status.html

    Et plus précisément, le suivit de l’implementation de l’animation :
    http://brian.sol1.net/svg/status.php

    Par contre, Inkscape ne le gère pas du tout pour le moment, et ca n’est à priori prévu que dans quelques versions (si personne ne met la main dans le cambouis avant ;) ), la conceptualisation étant prévu pour inkscape 0.51 (au rythme actuel de 2 inkscape par an, dans 3 ans et demi donc ;) :

    http://wiki.inkscape.org/wiki/index.php/Roadmap#Milestone_17_-_Animation_Conceptualization_-_Inkscape_0.51

Have your say

This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)

You must read and type the 5 chars within 0..9 and A..F, and submit the form.

  

Oh no, I cannot read this. Please, generate a

Fields in bold are required. Email addresses are never published or distributed.

Some HTML code is allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
URIs must be fully qualified (eg: http://www.domainname.com) and all tags must be properly closed.

Line breaks and paragraphs are automatically converted.

Please keep comments relevant. Off-topic, offensive or inappropriate comments may be edited or removed.

  1. July 2008
    M T W T F S S
    « Jun «-»  
     123456
    78910111213
    14151617181920
    21222324252627
    28293031  
  2. Categories

  3. Pages

  4. Recent Posts