Blog graphique 2

Classé dans : animation, nouvelles

En ce moment, c’est la fête de l’animation en France et un peu partout dans le monde. Au centre Pompidou, à Paris, une expo organisé par une multinationale italienne fabricante de vêtements en laine, à financé la mise à disposition (expo en sous-sol) de flipbook numériques utilisant des tabletPC dans des pupitres en bois, avec projection sur des écrans plus grand.

Le logiciel utilisé est celui ci : flipbook de fabrica.it. C’est du flash, il permet de sauvegarder (sur leurs HDD) l’animation au format flash, ou de sauvegarder en local au format PDF (afin de l’imprimer et découper pour faire un petit flipbook).

Au passage Gnash un lecteur flash libre à bien évolué ces derniers temps (surtout en version svn) et est beaucoup plus rapide que le client de Macromedia(R)(TM)(…) grâce à l’utilisation de l’accélération matérielle OpenGL. Il peut également être utilisé en plugin pour les produits utilisant Gecko comme Mozilla, Firefox, Seamonkey et autres Iceweasel.

L’impression d’animation faite numériquement est une chose à laquelle je suis déjà en train de penser depuis quelques temps pour Inkscape (pourrait aussi être appliqué a Gimp). La technique consisterais, en gros, a imprimer calque par calque, ou bien a réordonner les calques sur une feuille A4 de façon a n’avoir plus qu’a imprimer et redécouper pour un petit format type flipbook.

Si quelqu’un se sent motivé pour le réaliser je suis preneur :).

Classé dans : animation, nouvelles

« U » comme unicorne comme you, est un excellent film de l’excellent réalisateur de cinéma d’animation Serge Elissalde et de l’illustrateur Grégoire Solotareff visiblement très prolifique et tres populaire dans le jeune public, qui est sorti au cinéma ce soir.

Portrait de Serge Elissalde dans l’émission Court-circuit d’Arte et sur AWN

Entretien avec Grégoire Solotareff
Les couvertures de ses ouvrages.

Je suis content de voir que Serge Elissalsde à réussi à tenir la qualité de ses courts métrage, avec un style encore différent (comme à chacuns de ses excellents courts).

Ce qui m’a étonné, c’est le générique de fin, l’animation à été co-réalisée en France, au Vietnam, en Ukraine, et en Chine. Cela a du être difficile à coordoner.
D’après une personne de la salle de cinéma (l’excellent studio des Ursulines avec des infos qu’on aura pas dans un UGC/Gaumont/MK2) qui avait eu la présence du réalisateur en avant première, la coordination s’est faite principalement par internet.

En tout cas et malgrès cet assemblage Euro-Asiatique assez dispersé, cela donne un résultat cohérent, intéressant et novateur.

animation marche 1
françaisIl y a une traduction française de ce didacticiel.

englishAnimation sketchs are done with Inkscape and assembled with Gimp GAP animation plugin.

With Inkscape :
Inkscape animation workspace
* Use layers manager(menu Layers=>Layers… (CTRL+SHIFT+L)) for this work 1.
* The first Inkscape layer is used for background (« décor » in screenshot). 2
* Next, one layer is added for each sketched step3.
* Layers are used as onionskin (layer opacity can be set at the left bottom of the document window, between active color and layer name (défault is o : 1,00)).4
* When animation is finished, an empty rectangle with border is added as caméra view, it will be selected until the end to work easier.5
* At each frame, the rectangle is moved with transformation tool (menu Objext=>Transform), vertical move here.6
* at each animation step, layer is activated by opening eye in the Layers window (others are hidden by closing layers eyes).9
* The picture is saved by using menu File=>Export bitmap…, choosing selection option in the export bitmap dialog window.10
* Give filename containing several numbers used to save each frame (Here, I used marche1.xx.png where xx run from 01 to 18).11

We can now use Gimp :
* First step file is opened ( marche.01.png in my case).
* Then go to menu Video=>Frames flatten… Every frames containing same numbering scheme that first one, will be automagically flatened.

Et voila on, everything is ready for output an animation.

Fro outputing an animated gif, I do:
* menu VIdeo=>Frames to Image….
* Size of picture followed by number of color can eventually be reduced to reducs gif file size (I used 4 black and white colors here).
* From flatened multilayer picture created, it left to do File=Save as… (gif format), then to choose animation. I set 250 milliseconds for each frame to obtain 4 frames by second.

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 représentant 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 ça 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’alléger le gif (j’ai fait du n&b 4 couleurs indexé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.

Classé dans : Gimp, animation

français Cliquez sur l’image pour voir l’animation
english Click on picture to see animation.
中文 点选图案,看动画。
La pâte gonfle

Animation faite avec Gimp
Gimp made animation.
动画作用Gimp

« Articles plus récentsArticles plus anciens »

Propulsé par WordPress

Switch to our mobile site