Synfig Studio :: Documentation - User contributions [en]

Width Tool/fr

2014-01-04T18:17:23Z

Domi:

{{Title|Outil Épaisseur}}

{{Category|Tools}}
{{NewTerminology}}

{{l|Image:Width_icon.png|64px}} '''ALT-W'''
L'outil épaisseur a été conçu pour augmenter ou diminuer la largeur d'une ligne, comme vous le feriez avec un crayon sur papier.
Pour modifier la largeur sur un segment particulier d'une ligne, il suffit de sélectionner le {{l|Outline Layer|calque de contour}}, passez votre souris sur cette ligne, en appuyant sur le bouton gauche de la souris et déplaçant le curseur en arrière et en avant le long de la ligne, comme si vous grattiez quelque chose. La largeur du contour sera augmentée aux endroits où vous aviez déplacé le curseur. Si vous voulez diminuer la largeur, appuyez sur {{Shortcut|Ctrl}}.

L'outil épaisseur a été conçu principalement pour le workflow « tablette », donc vous aurez la meilleure expérience en l'utilisant avec une tablette de dessin. Ça permet de rendre la ligne plus épaisse avec un crayon ou plus mince avec une gomme à effacer (lorsque l'on tient le {{Shortcut|Ctrl}}).
REMARQUE : L'outil de largeur est conçu pour affiner la largeur de la ligne. Si vous voulez fortement augmenter/diminuer la largeur de la ligne, il est préférable
d'utiliser l’{{l|Transform Tool|Outil de transformation}} pour manipuler directement les {{l|Handle|poignées}} de largeur.
Paramètres :
* '''Agrandissement '''- Définit combien un déplacement de souris simple aura d'effet sur la largeur de la ligne. Il doit être différent de zéro pour que cet outil ait un effet sur la spline.
* '''Rayon '''- Définit la taille de la région autour de la position actuelle du curseur, dans laquelle un sommet sera affecté. Cela vous permet d'obtenir un effet perceptible sans devoir suivre la ligne précisément avec la souris. L'outil de largeur fonctionne très bien sur les splines avec beaucoup de segments (par exemple ceux qui sont créés avec l’{{l|Draw Tool|outil calligraphie}}), vous verrez que cela fonctionne sur plus que le premier sommet. C'est une région circulaire entière, mais les autres points peuvent bloquer.
* '''Agrandissement relatif''' - ne fonctionne pas vraiment très bien sauf si le paramètre de {{Literal|rayon}} est défini sur une valeur énorme (comme 1 million).
Si vous ne voulez pas que les {{Literal|poignées de largeur}} soient montrées, tout en utilisant l'outil de largeur, vous pouvez les désactiver en appuyant sur {{Shortcut|Alt|5}}. Vous pouvez les réactiver avec le même raccourci clavier.

Rectangle Tool/fr

2014-01-04T18:13:35Z

Domi:

{{Title|Outil Rectangle}}
{{Category|Tools}}
{{NewTerminology}}

{{l|Image:Rectangle_icon.png|64px}} '''ALT-R'''

L{{Literal|Outil Rectangle}} est un {{l|Category:Tools|outil}} qui crée des {{l|Rectangle Layer|Calques Rectangle}}.

Cliquer (sans relâcher) pour définir un coin du rectangle, puis déplacer la souris jusqu'au coin opposé avant de relâcher.

L{{Literal|Outil Rectangle}} permet la création simple de rectangle composé de splines.

==Options==

Le {{l|Tool Options Panel}} permet de définir:

* Le ''Nom'' utilisé pour le nouveau calque; n'importe quel chiffre dans ce champs sera incrémenté pour chaque calque créé.
* La quantité d ''''Expansion'' (uniquement pour les calques Rectangle).
* La quantité '''Adoucissement'' (pas pour les calques Rectangle).
* Plusieurs cases à cocher permettent de déterminer :
** Si l'on veut ''Inverser'' le calque créé,
** Si l'on veut ''Créer'' un {{l|Rectangle Layer}} et/ou un {{l|Outline Layer|Contour}}, une {{l|Region Layer|Région}}, une {{l|Plant Layer|Plante}} et {{l|Curve Gradient Layer}} (Splines)
** Si l'on veut ''Lier les Origines'' de la Spline

Draw Tool/fr

2014-01-04T18:10:28Z

Domi:

{{Title|Outil Calligraphie}}
{{Category|Tools}}
{{NewTerminology}}

{{l|Image:Draw_icon.png|64px}} '''ALT-D'''
L'{{l|Draw Tool|Outil Calligraphie}} est le pus familier de la plupart des artistes. Cet {{l|Catégorie : Tools|outil}} est mieux utilisé avec une tablette de dessin, bien qu'il puisse être utilisé avec une souris.
L'{{l|Draw Tool|Outil Calligraphie}} peut générer un {{l|Region Layer|Calque Région}}, un {{l|Outline Layer|Calque Contour}} et un {{l|Advanced Outline Layer|Calque Contour Avancé}} avec les données de la pression de la tablette, en relation avec l'épaisseur de la ligne.
==Options==
;'''Créer un Contour'''
;'''Créer un Contour Avancé'''
;'''Créer un Région'''
;'''Fermeture Automatique'''
:Quand le trait de l'{{l|Draw Tool}} se termine vers le début du trait, cette option relie automatiquement la dernière {{l|Handle}} à la première.
;'''Étendre Automatiquement'''
:Quand le trait commence et/ou finit près d'une {{l|Handle}} de terminaison d'un autre {{l|Outline Layer|contour}}, le {{l|Outline Layer|contour}} résultant est simplement ajouté au {{l|Outline Layer}} existant
:Que la largeur du trait soit basée ou non sur la pression d'entrée de la tablette. Si ce n'est pas cochée, le calque sera dessiné à la largeur indiquée dans le section {{l|New Layer Defaults}} de la {{l|Toolbox}}
;'''Lier Automatiquement'''
:Quand le trait commence ou se termine sur ou près d'une poignée de sommet d'un autre {{l|Outline Layer|contour}}, et que le contour n'est pas étendu par l'option {{literal|Étendre Automatiquement}} ci-dessus, le premier et/ou le dernier sommet du {{l|Outline Layer|contour}} résultant est {{l|Linking|lié}} à la poignée de {{l|Outline Layer}} existant .
;'''Exporter Automatiquement'''
;'''Largeur selon la Pression'''
;'''Erreur locale'''
:''Cela affecte le {{literal|Lissage de Spline}} en coordonnées universelles ou non. Mais je ne sais pas ce qu'il mesure lorsqu'il est coché.''
;'''Pression Minimale'''
:La valeur de cette option fixe, à une valeur spécifique, la sensibilité la plus basse de la pression, ssentiellement afin de déterminer l'épaisseur la plus fine possible du segment par rapport au paramètre de la {{l|New Layer Defaults#Brush Size|taille du pinceau}} dans la {{l|Toolbox|Boîte à outils}}.
* '''Lissage de Spline'''
:Détermine combien de tremblements de la tablette sont enlevés, et par conséquent, de combien de sommets les splines résultant sont composées.
* '''Erreur Largeur Maximale'''
* '''Adoucissement'''
:''(à réviser) Il semble avoir quelque chose à voir avec le réglage {{l|Feather Parameter}} du calque, mais il ne semble pas y avoir une connexion claire entre le réglage de ce contrôle et les paramètres qui en résultent.''

==Boutons==
;'''Outil remplissage'''

Circle Tool/fr

2014-01-04T18:06:28Z

Domi:

{{Title|Outil Cercle}}
{{Category|Tools}}
{{Category|Unverified}}

{{l|Image:Tool circle icon.png|64px}} '''ALT-C'''

L'Outil Cercle est utilisé pour créer des nouveaux {{l|Circle Layer|calques cercle}}. Cliquez où vous désirez que le {{l|Circle Layer#Center|centre}} du cercle soit, et déplacez-vous pour définir le {{l|Circle Layer#Radius|rayon}}.

L'outil cercle peut également être utilisé pour créer un calque de {{l|Outline Layer|contour}}, de {{l|Region Layer|région}}, de {{l|Curve Gradient Layer|dégradé}}, ou de {{l|Plant Layer|plante}}, avec des {{l|BLine|BLines}} approximativement circulaires.

Le {{l|Tool Options Panel}} pour le Cercle possède des cases à cocher pour chacun des 5 types de calque (calque cercle plus les 4 calques BLine) pour choisir le(s) type(s) de calque qui sera(ont) créé(s) par l'outil. Il possède également "Points de BLine", ce qui détermine le nombre de points utilisés dans la nouvelle BLine, et "Angle de décalage" qui détermine où seront positionnés les points sur la circonférence.

== Usage ==

Cliquer sur le canevas où vous voulez voir apparaitre le centre du cercle et déplacer pour obtenir la valeur de rayon désirée.

Category:Tools/fr

2014-01-04T18:03:44Z

Domi:

{{Title|Outils}}

Les pages de cette catégorie ont besoin de traduction - Merci de patienter et/ou contribuer

Ci dessous vous trouverez les outils qui sont présents dans la {{l|Category:Toolbox}}. Ce sont des boutons à bascule. Cela signifie qu'une fois sélectionné, l'outil est disponible jusqu'à ce que vous cliquiez sur un autre outil ou que vous effectuiez une autre opération.

L'outil par défaut et l'{{l|Transform tool|Outil de Transformation}}. C'est l'outil qui est automatiquement choisi quand vous réalisez une autre opération (comme par exemple sélectionner un autre calque ou {{l|Group|Grouper}} ceux qui sont sélectionnés).

{{CategoryContents|Tools}}
{{Category|Reference}}

Command:Reference/fr

2014-01-04T18:02:32Z

Domi:

{{Title|Réference}}
{{Category|Toolbox Menu Help}}

'''(PAS DE RACCOURCI)''': Cela ouvre la {{l| Category:Reference | page wiki Référence}} dans votre navigateur internet.

Command:Open/fr

2014-01-04T18:00:34Z

Domi:

{{Title|Ouvrir}}
{{Category|File Menu}}
{{Category|File Menu (Toolbox)}}
{{Shortcut|Control|o}}: Affiche une boite de dialogue de sélection de fichier afin de choisir le fichier sifz que vous voulez ouvrir.

Command:New/fr

2014-01-04T17:59:58Z

Domi:

{{Title|Nouveau}}
{{Category|File Menu}}
{{Category|File Menu (Toolbox)}}
{{Shortcut|Control|n}}: Créé un nouveau fichier. Par défaut, son nom est Synfig Animation # ou # commence à 1 et augmente de 1 pour chaque nouveau fichier que vous créez lors d'une session de Synfig Studio. Cela commence en éditant le canevas "Racine".

Input Devices/fr

2014-01-04T17:59:12Z

Domi:

{{Title|Dialogue Périphériques d'entrée}}
{{Category|Dialogs}}
{{Category|File Menu (Toolbox)}}
Ce menu ouvre une boite de dialogue de paramétrage de périphérique afin de permettre à l'utilisateur de choisir des valeurs personnalisées. Il est recommandé d'avoir un seul périphérique Activé et de désactiver les autres. Choississez le mode Écran pour le périphérique actif.
Généralement il n'y a pas besoin de modifier autre chose.

N'oubliez pas d'enregistrer les paramètres avant de fermer.

Chaque outil peut avoir ses propres paramètres pour chaque périphérique. Donc si vous combinez le pointeur principal -Core pointer- (qui est toujours disponible) et un stylet vous devrez enregistrer un ensemble de préférences (couleur de contour et de remplissage, taille de brosse, outil sélectionné, etc...) pour chaque périphérique.

[[File:InputDevices.png]]

Command:Close/fr

2014-01-04T17:57:42Z

Domi:

{{Title|Fermer}}
{{Category|File Menu}}
{{Category|File Menu (Toolbox)}}
{{Shortcut|Control|w}}: Ferme le document en cours d'édition. Si celui-ci est "sale" (il contient des modifications non enregistrées) il vous sera demandé si vous voulez l'enregistrer.

Doc:How Do I/fr

2013-12-30T14:29:42Z

Domi: /* Remplir un contour */

{{Title|Astuces}}
{{Category|Tutorials}}


'''Traduction en cours !'''

Vous pouvez ajouter votre propre question ici, ou nous {{l|Contact|contacter}} pour poser votre question.
__TOC__

== Ajouter du texte ==

Dans les versions de développement récentes, il y a un outil texte. Si vous utilisez la version 0.61.08 ou une version antérieure, il faut faire un clic droit sur le canevas, puis choisir Calque > Nouveau > Autre > Texte.

== Appliquer un dégradé à un seul objet et non à tout le canevas ==

# Créez la région que vous souhaitez remplir avec un dégradé, ainsi qu'un calque contenant un dégradé.
# Assurez vous que le calque de dégradé se trouve au dessus du calque de région dans le {{l|Layers Panel| dialogue des calques}}.
# Sélectionnez ces deux calques, clic droit, et sélectionnez {{l|Encapsulate|Encapsuler}}.
# Sélectionnez le calque de dégradé, dans l'{{l|Paste Canvas|Inline Canvas}} qui vient d'être créé.
# Dans le {{l|Params Panel|dialogue des paramètres}}, sélectionnez le paramètre de {{l|Blend Method}} (méthode de fusion), and choisissez le mode {{l|Blend Method#Onto|Onto}}.

Le dégradé sera limité à la zone visible de la région en dessous, appartenant au même 'inline canvas' que lui.

== Cacher ou afficher un calque, ou diminuer les effets de certains calques ==
Dans le {{l|Params Panel|dialogue des paramètres}}, cherchez l'option nommée {{l|Amount Parameter|Visibilité (Amount)}} - elle contrôle la visibilité du résultat de la fusion du calque en question avec le(s) calque(s) en dessous.

En d'autres terme, pour un calque "normal", cela va atténuer son effet. Pour un {{l|Blur Layer|Calque de flou}} en mode {{l|Blend Method#Straight|Direct (Straight)}}, cela donnera un effet intermédiare entre la version nette et la version floue du canevas : un flou toujours aussi étendu, mais moins prononcé. (Si vous voulez diminuer l'étendue du flou, il faut ajuster la {{l|Blur Layer#Size|Taille du flou}}.)

== Remplir un contour ==

Il existe plusieur possibilités :
* La facon la plus simple est de lier un nouveau calque de région au contour.
*# Sélectionnez le contour que vous désirez remplir
*# Dans le dialogue des Paramètres, faites un clic-droit sur le param "Vertices", sélectionner "Exporter", entrez un nom et appuyez sur Entrée. Cela va exporter la forme du contour, et la rendre sélectionnable dans le dialogue Enfants (Children Dialog).
*#Dans le dialogue Enfants, ouvrez l'arborescence des Noeuds des valeurs de base (ValueBase Nodes), et sélectionnez le nom sous lequel vous venez de sauver la forme.
*# Depuis le Menu des Calques (clic-droit sur le dialogue des calques, ou à partir du menu disponible {{l|Canvas Menu Caret|en haut à gauche du canevas}}), créez une nouveau calque de {{l|Region Layer|Région}} via "Nouveau calque > Géométrie > Région". Vérifiez que ce nouveau calque est sélectionné dans le dialogue des calques.
*# Dans le dialogue des paramètres, faites un clic-droit sur le paramètre "Vertices" et sélectionnez "Connecter" - ceci va connecter les vertices de la région aux vertices précédément exportées, et sélectionnées dans le dialogue Enfants.
*# Maintenant, si vous n'avez plus besoin de cette forme précédement exportée, vous pouvez la "dé-exporter" : faites un clic-droit sur son nom dans le dialogue Enfants, et sélectionnez "Annuler l'export".

* De même, mais avec une autre méthode:
*# Créer un nouveau calque comme ci-dessus et leaisser le sélectionné.
*# Don't make any changes to the outline layer, which you want to fill! (see the Tier 5 on the {{l|Linking}} page for details).
*# Select both layers in the {{l|Layers Panel}} This will display only the parameters shared by both layers in the {{l|Params Panel}}.
*# Context-click on the {{l|Vertices Parameter}}, and select {{l|Linking|Link}}.
*# The {{l|Region Layer}} will snap to the shape of the {{l|Outline Layer}}.
* When you create an {{l|Outline Layer|outline}} with the {{l|Bline Tool}} that you intend to be a filled area as well, make sure you select the Fill checkbox in the {{l|Bline Tool#Options|tool options dialog}}. Obviously, this doesn't help much if you realise later that you needed a fill here.
* If you are using the {{l|draw tool}}, there is a button at the bottom of the {{l|draw tool#Options|tool options dialog}} labeled "Fill Last Stroke", which creates a new {{l|Region Layer}} and links its shape to the previously drawn outline. Unfortunately, it doesn't work as of Synfig Studio v0.61.04. It has been fixed in the current SVN version of the code.
* Create a {{l|Region Layer|region}} with the same number of ducks, and manually link each duck. If you want a region that depends on multiple outline layers, this is really your only choice for now.
* Use the draw tool, select only the outline to fill, draw a stroke roughly following the outline and make sure you're holding the Control key when you left go of the mouse button at the end of the stroke. This doesn't work 100% right at the moment.

== Dock windows together? ==

*To dock (join) separate windows into one you must drag the tab ''icons'' for each of the tools into another window.
*You can create subdivisions inside the windows by dragging the icons into the side tabs (located around the edges, the look like rectangles).
*Tool tabs inside the window can be arranged by dragging them on top of one another, therefore changing the order.
*''How Do I min/maximize all Synfig windows on a Windows pc''? There must be an easy way/tool to do this?

== Use an external bitmap? ==

* In the image menu (>) choose file-->import. PNG with alpha channel works fine.
* To animate it without accidental stretching, right-click on the layer and choose encapsulate. You can then animate the position of the new "Inline Canvas" layer instead of the bbox.

== Use an external Vector? ==

Synfig doesn't yet support vector import because no-one has written an import process yet. You can use the Svg2synfig {{l|Converters|converter}}, or import it as a bitmap and trace over it in synfig. If you want to implement vector import we would gladly accept your patch.

== Close a bline? ==

* Right click on the starting point and then click on loop bline.

Note: It doesn't work unless the initial point has a tangent - ie the first segment is curved. But you can hide tangent ducks (Alt+3, or "Caret Menu > View > Show/Hide Ducks > Show tangent ducks") and process as described. Don't forget to press (Alt+3) after that to show tangent ducks again.

== How do I transform encapsulated objects? ==

* Right click on the Encapsulated object in the Layer dialog and choose "select all child layers". Then you select the ducks you want to transform (usually just all of them, like for rotating the object), and the rotate or scale tool and do the work.

== Make objects go behind each other, without moving layers? ==

You'll notice each layer you make has a number in the z depth column in the Layers Panel. Say you have 3 layers, they will be numbered 2 (lowest, e.g. a square) 1 (eg a circle) 0 (highest, the default, e.g. a line). In order to make layer 1, the circle, pass behind layer 2, the square, change its z depth to be 3 or more. The z depth of the circle needs to be greater than 2 in order to be behind the square. To make the square on top of everything, you'd change its z depth to -1 or less.

Positive numbers on the z axis go into the screen, and negative numbers go out of the screen, towards the viewer.

It is possible to animate this effect, but each layer is discrete. They seem to go from 0 to 0.9999.

In addition, objects in encapsulated layers can only go behind other objects in the same encapsulated layer. However an encapsulated layer can go behind another encapsulated layer.

== Copy a complex convert combination between parameters of different layers? ==

For example: you want to copy a complicated {{l|Convert|conversion}} type that you have in one parameter from a layer, to other parameter (maybe not a root parameter, but a sub-parameter) of other layer. If you {{l|Export|export}} the complicated conversion type from the original layer and then go to the other layer and select {{l|Connect}} (right click and the exported and the parameter both selected) then you have the parameter form the second layer to be exactly the same than the original one. But there is a drawback: if you modify one of the sub-parameters in the complicated conversion type (e.g. you change the value of one of them) then automatically the same sub-parameter of the other layer is changed.

How can you copy the conversion but allow modify the sub-parameters independently on each layer?

Once you have achieved the complex conversion type in the original layer, don't export the root parameter! If you have done yet {{l|Export|unexport}} it. (Why?. You will understand it later.) Now duplicate the original layer. Then you should obtain the same layer with the same conversion type placed at the same parameter (but not exported). NOW export the parameter from the duplicated layer. Then go to the (sub) parameter of the layer where you want to copy the complex conversion type and Connect it to the just exported parameter form the duplicated layer. Now delete the duplicated layer (!). Then the exported {{l|ValueNode}} still undeleted and the layer where you wanted to copy the complex convert type have a (sub) parameter connected to it. You can {{l|Export|unexport}} the ValueNode or not. It is up to you. But notice that the conversion type is already copied into other (sub) parameter of other layer and they are independent as well as you can change one of them (by modifying the sub-parameters) and the other remains untouched.

== Make an existing animation run at half speed? ==

If you have an animation that runs from 0s to 10s and you want it to run at half speed from 0s to 20s, how can you do that?

* Either: encapsulate it, and use the 'time offset' parameter in the encapsulation layer to slow it down:
** Right-click 'time offset' in the encapsulation layer, convert>linear, rate -0.5 offset 0. That means offset the time by -0.5 seconds per second - or in other words, run at half speed
** Or, putting waypoints on the 'time offset' param would work too: 0 at 0s and -10 at 20s. (The choice between using a linear convert and valuenodes is entirely up to you. They both achieve the same result in this simple case).

* Or: use a {{l|Time Loop Layer}}. The first method seems better and more intuitive in this case, but there are ways of getting the same effect from the Time Loop layer. Perhaps the Time Loop layer is better if the animation doesn't run from 0s, but from some other time. Anyway: put a Time Loop layer over the layers you wish to slow down, and:
** Either: set duration to 0, local time to 0, convert->linear the link time and set rate to 0.5 - this slows the animation down *to* 50% of its original speed; use bigger rates to slow it down less
** Or: set duration to 1h (*), link time to 0, convert->linear the local time and set rate to 0.5 - this slows the animation down *by* 50%; use bigger rates to slow it down more
(*) if your animation is longer than 1h then set this parameter to EOT (End Of Time) what is the same as Infinite (INF) for a real number but for a time parameter.

== Draw a rectangle with a given width and height? ==

I was asked on IRC how to specify the width and height of a rectangle, rather than having to specify the position of two opposite corners. Here's how:

* draw a rectangle
* go to the {{l|Params Panel}}
* right-click the 'point 1' parameter and {{l|Export}}
* give it a name, "p1" say
* right-click the 'point 2' parameter and {{l|Convert}} to {{l|Convert#Add|Add}}
* (that's saying that rather than specifying the absolute position of the other point, you want synfig to calculate it for you)
* (it will make 2 new sub-parameters for 'point 2', and the value used for point 2 will be their sum so we want to tell it to use 'point 1' and your (width,height))
* open up the sub-parameters of 'point 2' by clicking the triangle to its left
* go to the {{l|Children Panel}}, open up the values and select the one you exported earlier (p1)
* right-click the "LHS" parameter in the parameters dialog and {{l|Connect}} it
* then enter the width and height you want in the 'RHS' parameter

== Make linked BLine vertices not affected by Rotate layer? ==
Look at the http://dooglus.rincevent.net/synfig/logs/2008/%23synfig-2008-02-07.log
See also: {{l|Convert}}.

== Create dashed outlines? ==

If you want to make simple dashed outlines the faster way is proceed like this:

* Create a Curve Gradient and an Outline over the same {{l|BLine}} using the {{l|Bline Tool}} options. Check both Outline and Gradient at the {{l|Tool Options Panel}}.
* Raise up the gradient layer (it is created below the {{l|Outline Layer}}).
* Modify the gradient {{l|Blend Method}} parameter to be Straight Onto. That would render the gradient onto the outline width. Also it wouldn't render the outline, so transparent portions of the gradient are transparent.
* Check the 'Perpendicular' parameter of the Curve Gradient Layer.
* {{l|Convert}} the Gradient Parameter of the Curve Gradient Layer to be one of those types: Stripes or Repeat Gradient.
* Modify the properties of the sub parameters to achieve the desired effect.

== Render to AVI with higher quality? ==

=== Using raw video ===
The module used by Synfig to render AVI files is ffmpeg. For the moment there is not interface to control ffmpeg options so you render with a fixed bitrate and quality. If you want the maximum quality in your AVI file, follow these steps:

* Render your animation to yuv420p format. To do that select that target at the drop down list of the render dialog and add the ".yuv" extension to your animation name (without quotes).
* Once rendered (it would produce a huge size yuv file) you can quickly convert it to AVI using this command:

ffmpeg -i animation.yuv -sameq animation.avi

Change the animation file name to your one.

=== Rendering trough png sequence. ===
Render your sif to png sequence
mkdir render
synfig my_animation.sifz -o render/frame.png
Then convert it to movie with ffmpeg
ffmpeg -r <frame rate> -i render/frame.%04d.png <more settings from ffmpeg's manual> my_animation.mov
If you need nice open source format without any tweaks you may try ffmpeg2theora:
ffmpeg2theora render/frame.%04d.png --inputfps <frame rate> -o my_animation.ogg
png takes less disk space then yuv.
--{{l|User:AkhIL|AkhIL}} 21:38, 9 April 2008 (EDT)

==Increase performance by optimizing during compilation time? ==

I would like to know what parameters do I need to apply to configure to improve performance. {{l|User:Genete|Genete}} 11:04, 9 April 2008 (EDT)

To optimize program you should set two environment variables
export CFLAGS=""
export CXXFLAGS=$CFLAGS

First flag will be "-O3" (ow three). "-02" is normal optimization. "-03" is hard optimisation.

Now you should get info about your CPU
cat /proc/cpuinfo

find your cpu model name

now go to man gcc and searc "-mtune"

find your cpu and add "-mtune=your-cpu -march=your-cpu" to CFLAGS.

Then look at flags from /proc/cpuinfo and search it in gcc manual
For example I have 3dnow. So I can find "-m3dnow". For sse I can find "-msse" and "-mfpmath=sse" (can make program unstable).

Finaly you may add "-ffast-math" to disable math checks. But it can make program unstable.

For my AthlonXP I'm using this flags:
export CFLAGS="-O3 -pipe -mtune=athlon-xp -march=athlon-xp -mmmx -msse -m3dnow -mfpmath=sse -ffast-math -funsigned-char -fno-strict-aliasing"
export CXXFLAGS=$CFLAGS
--{{l|User:AkhIL|AkhIL}} 12:05, 9 April 2008 (EDT)

For my Pentium3 i use the line:
export CFLAGS="-O3 -pipe -mtune=pentium3 -march=pentium3 -msse -mfpmath=sse -funsigned-char -fno-strict-aliasing"
export CXXFLAGS=$CFLAGS

The additional switches -mmmx and -ffast-math does seem to '''not''' yield any gain in computing performance! So you could leave them out.
--{{l|User:SvH|SvH}} 03:46, 20 May 2008 (EDT)

== Import a movie into Synfig? ==

To import a movie (image only, not sound) into synfig there is only one option for the moment: Extract an image sequence from the movie and import them using {{l|ListImporter}}. Before you can load the image sequence you have to extract it from the movie. There are several software to do that but a straight and easy way is to use mplayer:

mplayer mymovie.avi -vo png:z=1 -ss seconds-start -endpos duration

where ''seconds-start'' are the seconds where you want to extract form and ''duration'' is the number of seconds you want to extract from ''mymovie.avi''. Also the image format specified in this case is png but jpeg or tga can be used also. See [http://www.mplayerhq.hu/DOCS/man/en/mplayer.1.html mplayer manual page] for more info.

It would extract a set of files of the selected section of the movie. Each file takes the frame number padded with leading zeros as name.

To put all the filenames into a ''.lst'' file just type this in the folder wehre the files are:

ls *.png >> mymovie.lst

and add a line specifying the frame rate at the beginning of the text file:

FPS 25

if the movie was 25 fps.

== Granted Wishes ==

=== MNG target filetype ===

The ability to save as/in the Free/Open MNG (.mng) format [http://libpng.org/pub/mng/]

A partial implementation was committed in SVN r470.

It was implemented in svn 986. See {{l|Render options}}. --{{l|User:Genete|Genete}} 13:12, 29 October 2007 (EDT)

=== Optionally display RGB in Hex in Color dialog ===

(3) When colors are quoted as 3 bytes of hexadecimal, you have to convert them to decimal, divide by 255, multiply by 100 to get a number to type into the dialog box. It's painful to match color schemes for example, with the [http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines Tango Icon Theme style guidelines]. {{l|User:pxegeek|PXEGeek}} 3/16/07

: Added in [http://kibi.dyndns.org:8083/~dooglus/gitweb.pl?p=synfig;a=commitdiff;h=40dda9d27b5249ee32f62d84c819ff569f078929 svn r354]. You can type 3 or 6 digit hex codes and hit return to use. 3 digit code 36a gives colour 3366aa (each digit is duplicated) -- {{l|User:Dooglus|dooglus}} 3/18/07

:: Many thanks - already used many times! PXEGeek.

::: Did you notice that you can use single digit codes too? '5' gives 555555 for instance, giving you 16 equally spaces shades of black through white. -- {{l|User:Dooglus|dooglus}} 17:51, 25 September 2007 (EDT)

=== Restore Default Layout ===

(3) — It's very difficult to put all the dialogs back where they were when you started the program, if you've closed them. In addition, with many programs, if you've done something with your window manager to take a window's position off screen, this command is sometimes the only way to bring them back.
-> I'd like to second this one - especially with the bug where dialog boxes sometime shrink to nothing or offscreen, and no amount of maximizing or minimizing restores them. The only solution is to kill the windows, and none of the combo options in the dialog menu match the default configuration. 4/4/07 PXEGeek

: Implemented in [http://kibi.dyndns.org:8083/~dooglus/gitweb.pl?p=synfig;a=commitdiff;h=036306f3c2c265a604971728d50fcce258766552 svn r757] -- {{l|User:Dooglus|dooglus}} 17:48, 25 September 2007 (EDT)

=== General outline / Polygon-based Outline / "Set Tangents to Zero" button ===
(3.5) I'm no artist, thus my primary form of art is stick figures, not to mention, many interesting animations are done in stick-figure style. Stick figures must be perfectly straight to get the effect across, so when I'm making an outline using B-Curves, it is too time consuming to set the tangents to 0 each time. Similarly, outlines of other shapes like squares, circles and so forth would be very useful. Whichever of the above is easiest, please implement right away. --{{l|User:Dragontamer|Dragontamer}} 02:35, 19 November 2007 (EST)
: For perfectly straight lines, click without moving the mouse. You will get a single point with no tangents. Outline shapes would require some development, particularly with some thought given to backward compatibility. A workaround you might consider is to create a duplicate shape with a different color and make the top one slightly smaller, so the outline of the one below shows. {{l|User:Pxegeek|Pxegeek}} 21:58, 19 November 2007 (EST)
:: Well, in general, whenever I click on a point to edit it (say, to make it move somewhere in animation mode), there is a decent chance that I click on a tangent instead. Then, if I want to right click the point itself, I usually right click the tangent marker instead. It isn't that big a deal, but simplicity at the cost of power generally is a good thing, especially when it will save a few mouse clicks.
:: As for the outlines, yeah, I've tried that and it is a decent solution for now, although it is no replacement for a real outline. I am going to also experiment with a clamp to see if I can make the center of the shape have 100% alpha... but I don't have synfig on the computer I'm on right now. Thanks for the tips Pxegeek. --{{l|User:Dragontamer|Dragontamer}} 01:58, 27 November 2007 (EST)
::: You can press Alt+3 to hide tangent ducks. --{{l|User:Zelgadis|Zelgadis}} 09:27, 27 November 2007 (EST)

=== Copy & Paste/Image Importing ===

(4) I sometimes make graphics in other programs, or use clipart and other images. Would it be possible for Synfig to be able to import images and/or copy and paste them?--Khlieeq 2007-07-19
Well, it doesn't support Copy & paste from the clipboard, but you can import images using "New Layer -> Other -> Import". This will create an Import layer, for which you can then edit the properties to point to the file containing your image. PXEGeek. 2007-07-19

=== Recursive Waypoint Manipulation ===

(4) it is really tiresome to revert changes to waypoints created by manipulating tangent/position ducks or change their interpolation functions. making it possible to right-click-modify the waypoint shown for objects that have some waypoint in a referenced sub-object would be great! -- timonator 2007-06-01
:You can do it in two ways: changing the interpolation method of the waypoint of paste canvas or editing the keyframe properties. The first allow to modify the waypoints interpolation method for all the waypoints of all the parameters of all the layers that are inside the paste canvas layer. You can right click on the left or right part of the waypoint to edit by a context menu the left or the right interpolation method of the waipoints. The second method would add and modify all the parameters that have any waypoint in the animation. See {{l|Keyframe}} for more detail. --{{l|User:Genete|Genete}} 13:10, 29 October 2007 (EDT)

=== Tweening for images developed in other imaging programs ===

It's obvious I am a beginner at image movement, but morphing is not enough: movement across the page is needed. Thanks for listening. {{l|User:Comwell@bellsouth.net|Comwell}} 
Imported images can be moved across the page. They can also be scaled, rotated and deformed. Was there a specific example you had in mind? {{l|User:Pxegeek|pxegeek}} 
:I also would like a way to tween images that have been drawn in other programs. I've had trouble drawing with Bline tool and the drawing tool in Synfig, and I'd rather just draw with a paint brush (like the one in Photoshop). Another problem I have is that Synfig tends to shut down on me every 20 minutes or so, and it's really frustrating even with the auto recover feature, because my sketches disappear. It'd be nice if I'm able to draw all of the keyframes in Photoshop or another image program and import it to Synfig so that Synfig can tween and animate them. Thank you. {{l|User:xychefoo@gmail.com|Huina}}
::You CAN use images, drawn in other programs. Just select "File->Import" from {{l|Canvas Menu Caret|canvas menu}} --{{l|User:Zelgadis|Zelgadis}} 01:39, 24 November 2007 (EST)
:::But how do you animate using images from other sources? I tried to make 2 keyframes with 2 different images, and it doesn't animate. It just stays as 1 picture for the entire render. The closest thing I saw to importing images from another source into Synfig and having it animate is the Walking Cycle Tutorial, but I would still have to trace the images to make it animate. As I said earlier, I'm not entirely fond of using the draw/Bline tool. {{l|User:xychefoo@gmail.com|Huina}}
:::: Huina, there's no way to do what you want right now. Interpolating between two images that are not created in Synfig is well beyond its scope right now. However, what you could do is take an image and separate elements of the picture onto different layers (e.g. have a picture of an arm and another of the rest of the body) and you can move those around, stretch and rotate them. (If you're familiar with the work of Terry Gilliam on Monty Python you'll know what I mean) I don't know how feasible it is to implement your request (I suspect some heavy lifting). We'll keep it on the list, but don't hold your breath. {{l|User:Pxegeek|Pxegeek}} 19:57, 24 November 2007 (EST)

:::: I think, you hardly find any other animation package which allow you to do such things. You could use a special tools for this task, like xmorph (http://xmorph.sourceforge.net/). But to do the tween between two bitmap images you STILL need to set points. It's not tracing, but very similar. Anyway, result may be poor and I'd better suggest to use technique, described in Walking Cycle Tutorial or which the {{l|User:Pxegeek|Pxegeek}} meant. --{{l|User:Zelgadis|Zelgadis}} 02:08, 25 November 2007 (EST)

:::: There is a technique called "optical flow". It takes two input frames and calculates the movement of each individual pixel between the frames, allowing interpolation to be done. Here's an example: http://www.fxguide.com/article333.html. It doesn't require setting of control points, but it has problems it's own set of problems: http://www.fxguide.com/article333.html. --{{l|User:Yoyobuae|Yoyobuae}} 13:32, 3 February 2008 (EST)

=== Auto-link option in {{l|Draw tool}} ===

(4) so that you can draw a line, and have its endpoint automatically link to a duck - or if Auto-connect is off, you can get a line object linked to the end of another line object. / I missed this too, it even should be like that by default I think. {{l|User:Maxy|Maxy}} 13:22, 25 Apr 2006 (PDT)

: Isn't this done already? We don't have line objects, but blines are automatically linked to if auto-connect is on. Am I missing something? -- {{l|User:Dooglus|dooglus}} 17:29, 27 September 2007 (EDT)

::To clarify dooglus' comments - If you have an outline created by the draw tool highlighted in the layer dialog and the auto-extend checkbox is checked, then you can continue drawing with the draw tool in that same layer. Blines created with the Bline tool cannot be extended once a different tool or layer is selected. {{l|User:Pxegeek|Pxegeek}} 23:46, 12 October 2007 (EDT)

::: A line is a line - Synfig doesn't remember whether it was created with the Bline tool or the Draw tool - so you can extend blines created with the bline tool using the draw tool. Just make sure the line is selected (so that its ducks are visible), not looped (so that it has end points to extend from), enable the draw tool, check 'auto extend' and start drawing at one of its end ducks. {{l|User:Dooglus|dooglus}} 05:47, 13 October 2007 (EDT)

So this sounds like it is already done. But on a related note, being able to open an existing bline in the bline tool to extend it would be useful. -- {{l|User:Dooglus|dooglus}} 04:51, 29 January 2008 (EST)

=== Layer hide boolean parameter ===

(3) — An animatable way to remove a layer from visibility and consideration in tools. And as an option, to hide the layer in the layer list while it is invisible. This crosses over functionality from the {{l|Amount Parameter}}, the Show/Hide checkbox in the {{l|Layers Panel}}, and builds upon it as well, allowing the {{l|Layers Panel}} to dynamically unclutter. ''(This feature request is a refactoring of the {{l|Amount Parameter}})''
: With the addition of the {{l|Convert#Switch|Switch}} type conversion it is not needed this feature request. You can convert the Amount parameter to a Switch value and give 0 and 1 to the Linked OFF/ON values. --{{l|User:Genete|Genete}} 13:20, 29 October 2007 (EDT)

=== Riding ducks ===

(2) — Not chocobos. The ability to link a duck from one shape to an arbitrary position on another path, without creating an extra shape duck on that path.
:Already done in SVN.{{l|User:Genete|Genete}} 18:59, 5 April 2008 (EDT)

=== Image filmstrip import ===

(2) — Allow import of a series of images (TGA, etc) as frames of an animation, on a layer. 
Response - 'lst' files of a list of images can be imported. I've used this to develop a walk cycle. See {{l|Walk_Cycle|Walk cycle}} for an example. {{l|user:pxegeek|pxegeek}}

=== Character Animation Tools ===

I have seen some interesting methods for helping character design/animation in different 2d/3d software. Hash's animation master has 'poses' which are extremes of a model, for example smiling and frowning, once you add these extremes ot a set you can use slider to create a pose that somewhere inbetween. The real power of this is when you have serveral different poses on the same object, a face say, you can easily come up with new facial expressions. Maybe something similar could be done with synfig using layers and groups, the implementation could something similar to Moho's switch layers. --{{l|User:Triclops|Triclops}} 09:52, 9 Aug 2006 (PDT)
: Have you read this tutorial? {{l|Reuse Animations}}. It is very close to the Switch layer of Moho/Anime Studio. Also You can change the Canvas parameter to any other canvas dynamically in the time line by clicking on it and selecting other exported canvas. Other option is convert the canvas to a Switch type and alternate between two different canvas. --{{l|User:Genete|Genete}} 13:26, 29 October 2007 (EDT)

=== More Animation Tools ===

{{l|New Animation Tools|Added here}}

=== Improved User Experience for First Contact ===
* Single file download and installer (at least for Windows)
* Ability to draw the first object directly after starting the application (start with an empty document)
* Ability to animate the object directly after drawing the first object (new documents have a say 3 seconds timeline)
In my opinion this is crucial to attract potential users. Because if I see how easy it is to create my first animation I'm going to accept all the bugs and clumsyness. A good example is the Pencil animation software. --{{l|User:Dmd|Dmd}} 13:50, 26 January 2008 (EST)

: I've implemented #2 and #3 above in svn r1519 & 1520. If no files are specified to be opened when running studio, it'll make a new one. It won't pop up the canvas properties dialog when making new canvases by default. And the default end time is 5s (3s is small enough to cause the time slider to show "1s 12f", whereas 5s looks cleaner). -- {{l|User:Dooglus|dooglus}} 04:00, 29 January 2008 (EST)

=== Automatic attach and manipulate a Vertex to a Bline ===

Please see {{l|Inverse Duck Manipulation|this}} page to understand what we want. --{{l|User:Genete|Genete}} 12:43, 3 March 2008 (EST).
:Already done in SVN. {{l|User:Genete|Genete}} 19:00, 5 April 2008 (EDT)

=== Toggle visible ducks ===
(3) So pressing, say, tab while editing a Bline toggles which vertices/ducks are visible - so we can easily move the actual vertices around without having the view cluttered by tangeants (and also make it easier to select 'Loop' rather than 'Split Tangeants' when creating the thing.)

Given that extra ducks such as the width ones listed above may be added, this might become more and more necessary. If too many different sets are added for toggling to be feasible, each visibility for each set can be hotkeyed.

: Synfig already have hotkeys to toggle visibility of the ducks. See {{l|Keyboard_Shortcuts#Hotkeys_Visual_Guide}}. --{{l|User:Zelgadis|Zelgadis}} 00:39, 22 April 2008 (EDT)

Transform tool/fr

2013-12-30T14:02:46Z

Domi:

{{Title|Outil de Transformation}}
{{Category|Tools}}
{{NewTerminology}}


{{l|File:Tool normal.png|64px}} '''ALT-A'''

L'{{Literal|Outil de Transformation}} vous permet de sélectionner un objet et de manipuler ses poignées (déplacement, rotation ou mise à l'échelle).

Cliquez sur un objet dans la [[:Category:Canvas Window|fenêtre canevas]] avec l'{{Literal|Outil de Transformation}} et il sera sélectionné. Plusieurs objets peuvent être sélectionnés en maintenant la touche {{Shortcut|Control}} tout en cliquant sur d'autres objets. 
''Si le calque est un "calque sans limite" (un dégradé par exemple) vous ne pouvez pas cliquer sur les calques en dessous, même si vous avez cliqué sur une zone transparente de celui-ci. Cela permet de sélectionner uniquement les calques visibles. Prenez également en considération que, actuellement, certains calques ne possèdent pas de moyen d'être sélectionné ({{l|Text Layer}} par exemple).'' 
Si, avec l'{{Literal|Outil de Transformation}} vous ne pouvez pas sélectionner un objet car il est positionné derrière un autre, vous pouvez sélectionner son calque dans le {{l|Layers Panel}}.

Une fois un calque sélectionné, ses {{l|Handle}} sont affichées. L'{{Literal|Outil de Transformation}} ne fonctionne que sur les poignées sélectionnées.

Cliquez sur une poignée pour la sélectionner. Une poignée sélectionnée devient plus brillante. Vous pouvez sélectionner plusieurs poignées en appuyant sur {{Shortcut|CTRL}} tout en cliquant sur les poignées. Vous pouvez aussi définir une {{l|Selection box|Boîte de Sélection}} autour des poignées pour les sélectionner.

{{Shortcut|Control|A}} sélectionneras toutes les poignées des calques sélectionnés. ({{Shortcut|Control|D}} dé-sélectionne toutes les poignées)

En pressant {{Shortcut|CTRL}} lors de la définition de la Boîte de Sélection provoquera une inversion de la sélection des poignées. Les poignées déjà sélectionnées de la boîte de sélection seront de-sélectionnées et les non sélectionnées deviendront sélectionnées.

En cliquant sur les poignées sélectionnées avec l'{{Literal|Outil de Transformation}} vous pourrez les déplacer sur le canevas. Soyez sur de bien cliquer sur une poignée, en cliquant à l'extérieur vous de-sélectionnerez les poignées.

En appuyant sur {{Shortcut|Maj}} lors du déplacement des poignées, vous pouvez restreindre le mouvement suivant les coordonnées X ou Y.

En appuyant sur {{Shortcut|CTRL}} lors du clic sur les poignées, vous pouvez faire tourner autour d'un centre calculé pour les poignées actuellement sélectionnées.

Appuyer sur {{Shortcut|ALT}} lors du déplacement des poignées, va les mettre à l'échelle d'un centre commun calculé. En appuyant sur {{Shortcut|Maj}} lors de la mise à l'échelle préservera le rapport d'échelle entre les poignées.

Si vous voulez contraindre une poignée de tangente sur un mouvement X ou Y, pressez la touche {{Shortcut|Maj}} après le début de son déplacement.
Sinon, presser {{Shortcut|Maj}} avant le déplacement de la tangente aura pour effet de la séparer en deux tangentes, droite et gauche.

{{Note|Note pour l'histoire de Synfig|L'"Outil de Transformation" était nommé "Outil Normal" avant la version Synfig 0.62.01 .}}

Transform tool/fr

2013-12-30T14:01:41Z

Domi:

{{Title|Outil de Transformation}}
{{Category|Tools}}
{{NewTerminology}}


{{l|File:Tool normal.png|64px}} '''ALT-A'''

L'{{Literal|Outil de Transformation}} vous permet de sélectionner un objet et de manipuler ses poignées (déplacement, rotation ou mise à l'échelle).

Cliquez sur un objet dans la [[:Category:Canvas Window|fenêtre canevas]] avec l'{{Literal|Outil de Transformation}} et il sera sélectionné. Plusieurs objets peuvent être sélectionnés en maintenant la touche {{Shortcut|Control}} tout en cliquant sur d'autres objets. 
''Si le calque est un "calque sans limite" (un dégradé par exemple) vous ne pouvez pas cliquer sur les calques en dessous, même si vous avez cliqué sur une zone transparente de celui-ci. Cela permet de sélectionner uniquement les calques visibles. Prenez également en considération que, actuellement, certains calques ne possèdent pas de moyen d'être sélectionné ({{l|Text Layer}} par exemple).'' 
Si, avec l'{{Literal|Outil de Transformation}} vous ne pouvez pas sélectionner un objet car il est positionné derrière un autre, vous pouvez sélectionner son calque dans le {{l|Layers Panel}}.

Une fois un calque sélectionné, ses {{l|Handle}} sont affichés. L'{{Literal|Outil de Transformation}} ne fonctionne que sur les poignées sélectionnées.

Cliquez sur une poignée pour la sélectionner. Une poignée sélectionnée devient plus brillante. Vous pouvez sélectionner plusieurs poignées en appuyant sur {{Shortcut|CTRL}} tout en cliquant sur les poignées. Vous pouvez aussi définir une {{l|Selection box|Boîte de Sélection}} autour des poignées pour les sélectionner.

{{Shortcut|Control|A}} sélectionneras toutes les poignées des calques sélectionnés. ({{Shortcut|Control|D}} dé-sélectionne toutes les poignées)

En pressant {{Shortcut|CTRL}} lors de la définition de la Boîte de Sélection provoquera une inversion de la sélection des poignées. Les poignées déjà sélectionnées de la boîte de sélection seront de-sélectionnées et les non sélectionnées deviendront sélectionnées.

En cliquant sur les poignées sélectionnées avec l'{{Literal|Outil de Transformation}} vous pourrez les déplacer sur le canevas. Soyez sur de bien cliquer sur une poignée, en cliquant à l'extérieur vous de-sélectionnerez les poignées.

En appuyant sur {{Shortcut|Maj}} lors du déplacement des poignées, vous pouvez restreindre le mouvement suivant les coordonnées X ou Y.

En appuyant sur {{Shortcut|CTRL}} lors du clic sur les poignées, vous pouvez faire tourner autour d'un centre calculé pour les poignées actuellement sélectionnées.

Appuyer sur {{Shortcut|ALT}} lors du déplacement des poignées, va les mettre à l'échelle d'un centre commun calculé. En appuyant sur {{Shortcut|Maj}} lors de la mise à l'échelle préservera le rapport d'échelle entre les poignées.

Si vous voulez contraindre une poignée de tangente sur un mouvement X ou Y, pressez la touche {{Shortcut|Maj}} après le début de son déplacement.
Sinon, presser {{Shortcut|Maj}} avant le déplacement de la tangente aura pour effet de la séparer en deux tangentes, droite et gauche.

{{Note|Note pour l'histoire de Synfig|L'"Outil de Transformation" était nommé "Outil Normal" avant la version Synfig 0.62.01 .}}

Transform tool/fr

2013-12-30T14:00:54Z

Domi:

{{Title|Outil de Transformation}}
{{Category|Tools}}
{{NewTerminology}}


{{l|File:Tool normal.png|64px}} '''ALT-A'''

L'{{Literal|Outil de Transformation}} vous permet de sélectionner un objet et de manipuler ses poignées (déplacement, rotation ou mise à l'échelle).

Cliquez sur un objet dans la [[:Category:Canvas Window|fenêtre canevas]] avec le {{Literal|Outil de Transformation}} et il sera sélectionné. Plusieurs objets peuvent être sélectionnés en maintenant la touche {{Shortcut|Control}} tout en cliquant sur d'autres objets. 
''Si le calque est un "calque sans limite" (un dégradé par exemple) vous ne pouvez pas cliquer sur les calques en dessous, même si vous avez cliqué sur une zone transparente de celui-ci. Cela permet de sélectionner uniquement les calques visibles. Prenez également en considération que, actuellement, certains calques ne possèdent pas de moyen d'être sélectionné ({{l|Text Layer}} par exemple).'' 
Si, avec l'{{Literal|Outil de Transformation}} vous ne pouvez pas sélectionner un objet car il est positionné derrière un autre, vous pouvez sélectionner son calque dans le {{l|Layers Panel}}.

Une fois un calque sélectionné, ses {{l|Handle}} sont affichés. L'{{Literal|Outil de Transformation}} ne fonctionne que sur les poignées sélectionnées.

Cliquez sur une poignée pour la sélectionner. Une poignée sélectionnée devient plus brillante. Vous pouvez sélectionner plusieurs poignées en appuyant sur {{Shortcut|CTRL}} tout en cliquant sur les poignées. Vous pouvez aussi définir une {{l|Selection box|Boîte de Sélection}} autour des poignées pour les sélectionner.

{{Shortcut|Control|A}} sélectionneras toutes les poignées des calques sélectionnés. ({{Shortcut|Control|D}} dé-sélectionne toutes les poignées)

En pressant {{Shortcut|CTRL}} lors de la définition de la Boîte de Sélection provoquera une inversion de la sélection des poignées. Les poignées déjà sélectionnées de la boîte de sélection seront de-sélectionnées et les non sélectionnées deviendront sélectionnées.

En cliquant sur les poignées sélectionnées avec l'{{Literal|Outil de Transformation}} vous pourrez les déplacer sur le canevas. Soyez sur de bien cliquer sur une poignée, en cliquant à l'extérieur vous de-sélectionnerez les poignées.

En appuyant sur {{Shortcut|Maj}} lors du déplacement des poignées, vous pouvez restreindre le mouvement suivant les coordonnées X ou Y.

En appuyant sur {{Shortcut|CTRL}} lors du clic sur les poignées, vous pouvez faire tourner autour d'un centre calculé pour les poignées actuellement sélectionnées.

Appuyer sur {{Shortcut|ALT}} lors du déplacement des poignées, va les mettre à l'échelle d'un centre commun calculé. En appuyant sur {{Shortcut|Maj}} lors de la mise à l'échelle préservera le rapport d'échelle entre les poignées.

Si vous voulez contraindre une poignée de tangente sur un mouvement X ou Y, pressez la touche {{Shortcut|Maj}} après le début de son déplacement.
Sinon, presser {{Shortcut|Maj}} avant le déplacement de la tangente aura pour effet de la séparer en deux tangentes, droite et gauche.

{{Note|Note pour l'histoire de Synfig|L'"Outil de Transformation" était nommé "Outil Normal" avant la version Synfig 0.62.01 .}}

Terminology/fr

2013-12-30T13:32:20Z

Domi:

{{Title|Terminology}}
{{Category|Glossary}}
{{NewTerminology}}


''a faire, mettre a jour les icônes''

Avec la sortie de la version '''0.64.0''' de Synfig Studio, en Mai 2013, une nouvelle terminologie ainsi que de nouvelles icônes ont été introduites..

Voici la liste des changements:

{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0"

|-style="background:silver"
|'''Ancienne terminologie anglaise'''||'''Nouvelle terminologie anglaise'''||'''Traduction en français'''

|-
||[[Ducks]]
||[[Handle]]
||'''Poignée'''

|-style="background:#eeeeee"
||Curves Panel
||[[Graphs Panel]]
||'''Panneau Graphes'''

|-
||Encapsulate
||[[Group]]
||'''Grouper''' (icône retravaillée)

|-style="background:#eeeeee"
||Paste Canvas/Inline Canvas layer
||[[Group Layer]]
||'''Calque Groupe''' (icône retravaillée)

|-
||Group
||[[Set]]
||'''Lot''' et (icône retravaillée)

|-style="background:#eeeeee"
||Add/remove from Group
||Add/remove from Set
||'''Ajouter/enlever du Lot''' (icône retravaillée)

|-
||BLine
||[[Spline]]
||'''Spline'''

|-style="background:#eeeeee"
||BLine Point
||[[Spline Point]]
||'''Point de Spline'''

|-
||BLine Tool
||[[Spline Tool]]
||'''Outil Spline'''

|-style="background:#eeeeee"
||Params Panel
||[[Parameters Panel]]
||'''Panneau Paramètres'''

|-
||Children Panel
||[[Library Panel]]
||'''Bibliothèque'''

|-style="background:#eeeeee"
||CPoint
||[[Color Stop]]
||'''Stop Couleur'''

|}

Doc:Walk Cycle/fr

2013-12-29T12:37:04Z

Domi: /* Création d'un Cycle de Marche */

{{Title|Cycle de Marche}}
{{Category|Tutorials}}
{{Category|Tutorials Advanced}}


== Le Fichier de Liste ==
Un des aspects les moins évidents de Synfig est contenu dans la calque d'importation des images. En plus d'être en mesure d'importer des fichiers d'image de base, il accepte aussi un fichier "lst". Cette liste de fichiers est tout simplement un fichier de texte qui se compose d'un taux de cadres, suivi d'une liste d'images à afficher. (Si le nombre d'images par seconde n'est pas fourni, il utilise une taux de défaut de 15 images par seconde (FPS).)

Un exemple, fourni par Vorian Studios, prend quatre images fixes à partir d'un personnage à différentes étapes d'un cycle de marche. Ces images sont affichées avec 4 images par seconde pour donner une séquence répétée qui montre un homme qui marche.

Voici les images 
<gallery widths="104px" heights="216px">
Image:frame_01.jpg|Frame 1
Image:frame_02.jpg|Frame 2
Image:frame_03.jpg|Frame 3
Image:frame_04.jpg|Frame 4
</gallery>

Et voici le début du fichier "lst". 
<code>
FPS 4 
frame_01.jpg 
frame_02.jpg 
frame_03.jpg 
frame_04.jpg 
frame_01.jpg 
frame_02.jpg 
frame_03.jpg 
frame_04.jpg 
frame_01.jpg 
frame_02.jpg 
frame_03.jpg 
frame_04.jpg 
...</code> 

== Création d'un Cycle de Marche ==
Voyons comment utiliser ces images pour créer un cycle complet de marche pour un dessin dans Synfig.

Commencer avec une nouvelle toile (Canvas) et ajouter une durée de quelques secondes à raison de 24 images par seconde (par défaut).Sur la toile, sélectionner le triangle dans le coin supérieur à gauche -> Calques-> Nouveau calque, d'autres, l'importation d'image.

Cela crée un nouveau calque de l'image importée, mais rien ne s'affiche tant que vous n'avez pas sélectionné le nom du fichier. Aller à la boîte de Paramètres et faites défiler jusqu'à Nom du fichier. Là, vous pouvez naviguer vers le fichier. "lst" et sélectionner Ouvrir. Vous devriez maintenant voir la première image de la liste. Déplacez-vous dans le temps. Cela affichera les images successives de la liste chaque six cadres. Vous pouvez prévisualiser ou rendre tel qu'il est, et obtenir une animation avec une plage d'images trés faible.

Cependant, le résultat n'est pas très lisse, et les images ne sont pas très flexibles. (Les images peuvent se déplacer, pivoter et s'étirer mais pas les éléments dans les images). Pour avoir un dessin totalement modifiable il faut dessiner par dessus avec Synfig, des éléments tels que des lignes tracées avec l'outil «dessin».

Je travaille avec une tablette graphique, de sorte que la meilleure solution pour moi est d'utiliser {{l|Draw Tool|l'outil de dessin}}. Retourner au point 0f, sélectionner l'outil de dessin et dessiner sur le personnage. J'ai trouvé plus facile de diviser l'image en plusieurs parties (tête, bras gauche, bras droit, tronc, jambe gauche, jambe droite). Si le formulaire ne vous va pas bien, allez dans le menu Calque et décochez la case de la région. Cela vous permet de voir l'image ci-dessous pendant que vous faites glisser les poignées pour corriger la ligne.

{{l|Image:Synfig_walk.png|488x192px}}

Une fois le dessin à 0f fini, alle dans la ligne du temps à 6f. Au lieu d'avoir à les dessiner à nouveau, cette fois nous allons prendre des éléments existants et nous allons simplement les repositionnér pour correspondre à l'image. Encore une fois, si vous désactivez les couches d'une région on peut voir l'image d'édition. Utilisez les outils de rotation et de translation pour déplacer les parties du corps, en adaptant les poignées pour le réglage plus fin (ne pas oublier le changement de "Edit Mode Animation" comme il est décrit dans {{L|Doc:Animation Basics}} ).

Répéter pour les points du temps 12f et 18f, puis éteindre le calque de l'image importée (décochez la case dans la fenêtre de calques). Maintenant, même si nous n'avons que quatre cadres, grâce à Synfig, nous avons 24 images d'un homme qui marche doucement. Ajouter un calque avec un boucle de temps de 1 seconde et l'homme gardera le rythme sur le terrain pour la durée de votre animation.

{{l|Image:walk.gif}}

Ajouter une calque de déplacement permettra que l'image se déplace d'un endroit à un autre sur la toile.(or moonwalk backwards if you're so inclined.)

{{l|media:walk.zip|Voici le fichier comprimé}} avec le list file, les 4 images fixes, et le fichier de Synfig fini. Décompressez dans le même place et ouvrez le fichier newwalk.sif avec Synfig.

Doc:Walk Cycle/fr

2013-12-29T12:31:43Z

Domi: /* Création d'un Cycle de Marche */

{{Title|Cycle de Marche}}
{{Category|Tutorials}}
{{Category|Tutorials Advanced}}


== Le Fichier de Liste ==
Un des aspects les moins évidents de Synfig est contenu dans la calque d'importation des images. En plus d'être en mesure d'importer des fichiers d'image de base, il accepte aussi un fichier "lst". Cette liste de fichiers est tout simplement un fichier de texte qui se compose d'un taux de cadres, suivi d'une liste d'images à afficher. (Si le nombre d'images par seconde n'est pas fourni, il utilise une taux de défaut de 15 images par seconde (FPS).)

Un exemple, fourni par Vorian Studios, prend quatre images fixes à partir d'un personnage à différentes étapes d'un cycle de marche. Ces images sont affichées avec 4 images par seconde pour donner une séquence répétée qui montre un homme qui marche.

Voici les images 
<gallery widths="104px" heights="216px">
Image:frame_01.jpg|Frame 1
Image:frame_02.jpg|Frame 2
Image:frame_03.jpg|Frame 3
Image:frame_04.jpg|Frame 4
</gallery>

Et voici le début du fichier "lst". 
<code>
FPS 4 
frame_01.jpg 
frame_02.jpg 
frame_03.jpg 
frame_04.jpg 
frame_01.jpg 
frame_02.jpg 
frame_03.jpg 
frame_04.jpg 
frame_01.jpg 
frame_02.jpg 
frame_03.jpg 
frame_04.jpg 
...</code> 

== Création d'un Cycle de Marche ==
Voyons comment utiliser ces images pour créer un cycle complet de marche pour un dessin dans Synfig.

Commencer avec une nouvelle toile (Canvas) et ajouter une durée de quelques secondes à raison de 24 images par seconde (par défaut).Sur la toile, sélectionner le triangle dans le coin supérieur à gauche -> Calques-> Nouveau calque, d'autres, l'importation d'image.

Cela crée un nouveau calque de l'image importée, mais rien ne s'affiche tant que vous n'avez pas sélectionné le nom du fichier. Aller à la boîte de Paramètres et faites défiler jusqu'à Nom du fichier. Là, vous pouvez naviguer vers le fichier. "lst" et sélectionner Ouvrir. Vous devriez maintenant voir la première image de la liste. Déplacez-vous dans le temps. Cela affichera les images successives de la liste chaque six cadres. Vous pouvez prévisualiser ou rendre tel qu'il est, et obtenir une animation avec une plage d'images trés faible.

Cependant, le résultat n'est pas très lisse, et les images ne sont pas très flexible. (Les images peuvent se déplacer, faire pivoter et étirer mais pas des éléments au sein des images, qui ne peut pas être changé). Pour avoir un dessin totalement modifiable il faut dessiner dessus avec Synfig avec des éléments tels que les Bllines ou des lignes tracées avec l'outil «dessin».

Je travaille avec une tablette graphique, de sorte que la meilleure solution pour moi est d'utiliser {{l|Draw Tool|l'outil de dessin}} . Retournez à le point 0f, sélectionnez l'outil de dessin et dessinez sur le caractère. Je l'ai trouvé plus facile de diviser l'image en plusieurs parties (tête, bras gauche, bras droit, du tronc, la jambe gauche, jambe droite). Comme un truc utile, si le formulaire ne vous va pas bien, allez dans le menu Calque et décochez la case de la région. Cela vous permet de voir l'image ci-dessous pendant que vous faites glisser les poignées en tant de corriger la ligne.

{{l|Image:Synfig_walk.png|488x192px}}

Une fois le dessin à 0f est finis, allez dans la ligne du temps au 6f. Au lieu d'avoir à les dessiner à nouveau, cette fois nous allons prendre des éléments existants et nous allons simplement les repositionnér pour correspondre à l'image. Encore une fois, si vous désactivez les couches d'une région on peut voir l'image d'édition. Utilisez les outils de rotation et de translation pour déplacer les parties du corps, en adaptant les poignées pour le réglage plus fin (ne pas oublier le changement de "Edit Mode Animation" comme il est décrit dans {{L|Doc:Animation Basics}} ).

Répétez pour les points du temps 12f et 18f, puis éteignez la calque de l'image importée (décochez la case dans la fenêtre de calques). Maintenant, meme si seulement nous avons établi quatre cadres, gràce à le pouvoir de Synfig, nous avons rendu 24 images d'un homme qui marche doucement. Ajoutez une calque avec un boucle de temps de 1 seconde et l'homme garderà le rythme sur le terrain pour la durée de votre animation.

{{l|Image:walk.gif}}

Ajouter une calque de deplacement vous permettra que votre image déménage d'un endroit à un autre sur la toile.(or moonwalk backwards if you're so inclined.)

{{l|media:walk.zip|Voici le fichier comprimé}} avec le list file, les 4 images fixes, et le fichier de Synfig fini. Décompressez dans le même place et ouvrez le fichier newwalk.sif avec Synfig.

Doc:Walk Cycle/fr

2013-12-29T12:29:30Z

Domi: /* Le Fichier de Liste */

{{Title|Cycle de Marche}}
{{Category|Tutorials}}
{{Category|Tutorials Advanced}}


== Le Fichier de Liste ==
Un des aspects les moins évidents de Synfig est contenu dans la calque d'importation des images. En plus d'être en mesure d'importer des fichiers d'image de base, il accepte aussi un fichier "lst". Cette liste de fichiers est tout simplement un fichier de texte qui se compose d'un taux de cadres, suivi d'une liste d'images à afficher. (Si le nombre d'images par seconde n'est pas fourni, il utilise une taux de défaut de 15 images par seconde (FPS).)

Un exemple, fourni par Vorian Studios, prend quatre images fixes à partir d'un personnage à différentes étapes d'un cycle de marche. Ces images sont affichées avec 4 images par seconde pour donner une séquence répétée qui montre un homme qui marche.

Voici les images 
<gallery widths="104px" heights="216px">
Image:frame_01.jpg|Frame 1
Image:frame_02.jpg|Frame 2
Image:frame_03.jpg|Frame 3
Image:frame_04.jpg|Frame 4
</gallery>

Et voici le début du fichier "lst". 
<code>
FPS 4 
frame_01.jpg 
frame_02.jpg 
frame_03.jpg 
frame_04.jpg 
frame_01.jpg 
frame_02.jpg 
frame_03.jpg 
frame_04.jpg 
frame_01.jpg 
frame_02.jpg 
frame_03.jpg 
frame_04.jpg 
...</code> 

== Création d'un Cycle de Marche ==
Voyons comment utiliser ces images pour créer un cycle complet de marche pour un dessin dans Synfig.

Commencé avec une nouvelle toile (Canvas) et ajouter une durée de quelques secondes avec un taux de 24 images par seconde (par défaut).Sur la toile, sélectionnez le triangle dans le coin supérieur à gauche> Calques> Nouveau calque, d'autres, l'importation d'image.

Cela crée un nouveau calque de l'image importée, mais rien ne s'affiche que lorsque vous sélectionnez le nom du fichier. Aller à la boîte de Params et faites défiler jusqu'à Nom du fichier. Là, vous pouvez naviguer vers le fichier. "lst" et sélectionner Ouvrir. Vous devriez maintenant voir la première image de la liste. Déplacez-vous dans le temps. Cela affichera les images successives de la liste chaque six cadres. Vous pouvez prévisualiser ou rendre tel qu'il est, et obtenir une animation avec une plage d'images trés faible.

Cependant, le résultat n'est pas très lisse, et les images ne sont pas très flexible. (Les images peuvent se déplacer, faire pivoter et étirer mais pas des éléments au sein des images, qui ne peut pas être changé). Pour avoir un dessin totalement modifiable il faut dessiner dessus avec Synfig avec des éléments tels que les Bllines ou des lignes tracées avec l'outil «dessin».

Je travaille avec une tablette graphique, de sorte que la meilleure solution pour moi est d'utiliser {{l|Draw Tool|l'outil de dessin}} . Retournez à le point 0f, sélectionnez l'outil de dessin et dessinez sur le caractère. Je l'ai trouvé plus facile de diviser l'image en plusieurs parties (tête, bras gauche, bras droit, du tronc, la jambe gauche, jambe droite). Comme un truc utile, si le formulaire ne vous va pas bien, allez dans le menu Calque et décochez la case de la région. Cela vous permet de voir l'image ci-dessous pendant que vous faites glisser les poignées en tant de corriger la ligne.

{{l|Image:Synfig_walk.png|488x192px}}

Une fois le dessin à 0f est finis, allez dans la ligne du temps au 6f. Au lieu d'avoir à les dessiner à nouveau, cette fois nous allons prendre des éléments existants et nous allons simplement les repositionnér pour correspondre à l'image. Encore une fois, si vous désactivez les couches d'une région on peut voir l'image d'édition. Utilisez les outils de rotation et de translation pour déplacer les parties du corps, en adaptant les poignées pour le réglage plus fin (ne pas oublier le changement de "Edit Mode Animation" comme il est décrit dans {{L|Doc:Animation Basics}} ).

Répétez pour les points du temps 12f et 18f, puis éteignez la calque de l'image importée (décochez la case dans la fenêtre de calques). Maintenant, meme si seulement nous avons établi quatre cadres, gràce à le pouvoir de Synfig, nous avons rendu 24 images d'un homme qui marche doucement. Ajoutez une calque avec un boucle de temps de 1 seconde et l'homme garderà le rythme sur le terrain pour la durée de votre animation.

{{l|Image:walk.gif}}

Ajouter une calque de deplacement vous permettra que votre image déménage d'un endroit à un autre sur la toile.(or moonwalk backwards if you're so inclined.)

{{l|media:walk.zip|Voici le fichier comprimé}} avec le list file, les 4 images fixes, et le fichier de Synfig fini. Décompressez dans le même place et ouvrez le fichier newwalk.sif avec Synfig.

Doc:Following a Spline/fr

2013-12-29T10:41:06Z

Domi: /* Créer des Calques */

{{Title|Suivre une Spline}}
{{Category|Tutorials}}
{{Category|Tutorials Advanced}}
{{NewTerminology}}


Cette page aurait besoin de capture d'écrans en français ... vous pouvez contribuer !

== Introduction ==

Si vous utilisez la version 0.61.08 ou antérieure, regardez s'il vous plaît la {{l|Following a BLine (the old way)|version précédente}} de ce tutoriel, celui-ci est fait pour une version postérieure à la 0.61.09.

Ce tutoriel vous montrera comment faire pour qu'un objet suive le chemin d'une courbe arbitraire, avec une rotation pour rester dans la direction du parcours.

== Résumé ==

Voici ce que nous allons faire:

* {{l|Doc:Following a Spline#Create the Layers|Tracer une ligne courbe et une flèche}}
* {{l|Doc:Following a Spline#Make the Arrow Move and Rotate|Lier l'origine de la flèche et sa rotation}} à la Spline afin que la flèche suive la courbe.

== Tutoriel ==

Il s'agit d'un bref tutoriel qui nous donne un exemple de la façon de faire:

=== Créer une Animation ===

Dans le menu {{c|<Fichier>|Nouveau|}} ou par le raccourci clavier {{Shortcut|ctrl|N}}.

=== Créer des Calques ===

Sélectionnez l'{{l|Spline Tool}}
[[File:Spline-tool-0.63.06.png|frame|none]]

Cochez simplement la case {{Literal|Créer un Contour}}.

Tracez une courbe (Spline) sur laquelle vous souhaitez déplacer la flèche.

Cliquez de nouveau sur l'icône {{literal|Créer une Spline}} en bas à gauche du {{l|Tool_Options_Panel}} pour créer la courbe (Spline).

Ensuite, toujours avec cet outil, cochez les cases {{Literal|Créer un Contour}} et {{Literal|Créer une Région}} du panneau {{Literal|Options des Outils}}.
[[File:Spline-Tool-Options_0.63.06.png|frame|center]]

Tracez une flèche ou autre chose, pointant vers la droite.

Passez à l'{{l|Transform Tool}}.

Sélectionnez le contour, cliquez et glissez la souris pour sélectionner toutes les {{l|Handle|poignées}} sauf la poignée verte de position

Déplacez les poignées afin que la flèche soit centrée autour de la position de la poignée verte.

Ajoutez un {{l|Rotate Layer}} ({{c|<Nouveau calque>|Transformer|Rotation|}}) au-dessus des calques de contour et de région.

{{l|Group|Groupez}} les calques de rotation, de contour et de région.

Maintenant vous avez deux calques : l'un est une trajectoire courbe et l'autre est le calque groupé {{Literal|Sous-canevas}} contenant la flèche et le calque de rotation.

=== Le déplacement et la rotation de la flèche ===

Dépliez le calque groupé (Sous-canevas) dans le {{l|Layers Panel}}, et sélectionnez la ligne {{Literal|Sous-canevas}}.

Sélectionnez sa position - poignée verte en cliquant dessus dans la fenêtre principale.

puis ajoutez à la sélection le calque de rotation en cliquant dessus dans le panneau Calques tout en appuyant sur "contrôle" (bouton gauche de la souris + {{Shortcut|ctrl}}).

Maintenant, sélectionnez dans la fenêtre principale la poignée bleue en appuyant sur {{Shortcut|ctrl}} + bouton gauche de la souris .

Eh bien, maintenant nous avons sélectionné deux calques et une poignée dans chacun.

Maintenant il faut ajouter à la sélection le calque de la courbe Spline (qui devrait être le dernier calque dans le panneau Calques) en cliquant dessus tout en appuyant sur {{Shortcut|Ctrl}}.

Dans la fenêtre principale, clic droit sur la ligne pointillée de la courbe Spline. Ne cliquez pas sur les poignées, mais sur le pointillé entre les poignées.

Dans le menu contextuel qui apparaît, sélectionnez {{Literal|Lier à la Spline}}.
[[Image:Spline-Link-to-0.63.06.png|frame|none]]

Le calque groupe contenant la flèche devrait se placer de telle sorte que la position de la poignée verte soit sur la courbe Spline, et elle devrait se tourner de manière à ce qu'elle pointe le long de la courbe Spline.

Cliquez sur le calque groupe pour le sélectionner lui seul, et faites glisser sa poignée verte dans la fenêtre. Vous verrez que la poignée est liée à la courbe, et que son déplacement affecte aussi la rotation de la flèche comme c'était prévu.

Nous pouvons maintenant animer la flèche. Activez le {{l|Animate_Editing_Mode}} en cliquant sur l'icône en bas à droite de la fenêtre principale {{Literal|Active le mode Edition de la l'Animation}}.

* Au point {{Literal|0f}} dans le temps, faites glisser la position de la poignée verte du calque groupe à une extrémité de la courbe Spline.
* Au point {{Literal|5s}} dans le temps, faites glisser la poignée à l'autre bout de la courbe.

Essayez {{c|<Menu Chevron>|<Affichage>|Jouer|}} pour voir l'animation.

== Résultats ==

Voici l'animation que j'ai obtenue : {{l|Media:Arrow-follows-bline.sifz‎|Arrow-follows-bline.sifz‎}}

== Contrôle linéaire de la vitesse de déplacement ==
Par défaut, la flèche voyage le long de la Spline avec une vitesse constance, indépendamment de la structure de la Spline.

Si vous sélectionnez le Calque groupe et donnez un coup d'oeil au panneau paramètres, vous verrez que le paramètre Origine est {{L|convert|converti}} en un type {{Literal|Spline Vertex}}. Ceci est fait automatiquement lorsque vous effectuez l'action {{Literal|Lier à la Spline}}. Vous pouvez désactiver le sous-paramètre {{Literal|Homogène}}, ainsi la vitesse de la flèche ne dépendra plus de la structure de la Spline - La flèche prend le même temps pour se déplacer le long de chaque segment de la courbe. Donc, si il y a une partie de la ligne longue et droite, puis une partie sinueuse complexe, la flèche se déplace beaucoup plus vite le long de la partie droite (car il y a moins de sommets dans cette partie)... En terme phisique, la vitesse linéaire (et donc, la vitesse le long de la Spline) n'est pas constante.

Pour une illustration de l'effet "Homogène", voir [http://www.youtube.com/watch?v=3PGXroxBcuo cette démo].

Doc:Following a Spline/fr

2013-12-29T10:36:24Z

Domi: /* Créer des Calques */

{{Title|Suivre une Spline}}
{{Category|Tutorials}}
{{Category|Tutorials Advanced}}
{{NewTerminology}}


Cette page aurait besoin de capture d'écrans en français ... vous pouvez contribuer !

== Introduction ==

Si vous utilisez la version 0.61.08 ou antérieure, regardez s'il vous plaît la {{l|Following a BLine (the old way)|version précédente}} de ce tutoriel, celui-ci est fait pour une version postérieure à la 0.61.09.

Ce tutoriel vous montrera comment faire pour qu'un objet suive le chemin d'une courbe arbitraire, avec une rotation pour rester dans la direction du parcours.

== Résumé ==

Voici ce que nous allons faire:

* {{l|Doc:Following a Spline#Create the Layers|Tracer une ligne courbe et une flèche}}
* {{l|Doc:Following a Spline#Make the Arrow Move and Rotate|Lier l'origine de la flèche et sa rotation}} à la Spline afin que la flèche suive la courbe.

== Tutoriel ==

Il s'agit d'un bref tutoriel qui nous donne un exemple de la façon de faire:

=== Créer une Animation ===

Dans le menu {{c|<Fichier>|Nouveau|}} ou par le raccourci clavier {{Shortcut|ctrl|N}}.

=== Créer des Calques ===

Sélectionnez l'{{l|Spline Tool}}
[[File:Spline-tool-0.63.06.png|frame|none]]

Cochez simplement la case {{Literal|Créer un Contour}}.

Tracez une courbe (Spline) sur laquelle vous souhaitez déplacer la flèche.

Cliquez sur de nouveau sur l'icône {{literal|Créer une Spline}} en bas à gauche du {{l|Tool_Options_Panel}} pour créer la courbe (Spline).

Ensuite, toujours avec cet outil, cochez les cases {{Literal|Créer un Contour}} et {{Literal|Créer une Région}} du panneau {{Literal|Options des Outils}}.
[[File:Spline-Tool-Options_0.63.06.png|frame|center]]

Tracez une flèche ou autre chose, pointant vers la droite.

Passez à l'{{l|Transform Tool}}.

Sélectionnez le contour, cliquez et glissez la souris pour sélectionner toutes les {{l|Handle|poignées}} sauf la poignée verte de position

Déplacez les poignées afin que la flèche soit centrée autour de la position de la poignée verte.

Ajoutez un {{l|Rotate Layer}} ({{c|<Nouveau calque>|Transformer|Rotation|}}) au-dessus des calques de contour et de région.

{{l|Group|Groupez}} les calques de rotation, de contour et de région.

Maintenant vous avez deux calques : l'un est une trajectoire courbe et l'autre est le calque groupé {{Literal|Sous-canevas}} contenant la flèche et le calque de rotation.

=== Le déplacement et la rotation de la flèche ===

Dépliez le calque groupé (Sous-canevas) dans le {{l|Layers Panel}}, et sélectionnez la ligne {{Literal|Sous-canevas}}.

Sélectionnez sa position - poignée verte en cliquant dessus dans la fenêtre principale.

puis ajoutez à la sélection le calque de rotation en cliquant dessus dans le panneau Calques tout en appuyant sur "contrôle" (bouton gauche de la souris + {{Shortcut|ctrl}}).

Maintenant, sélectionnez dans la fenêtre principale la poignée bleue en appuyant sur {{Shortcut|ctrl}} + bouton gauche de la souris .

Eh bien, maintenant nous avons sélectionné deux calques et une poignée dans chacun.

Maintenant il faut ajouter à la sélection le calque de la courbe Spline (qui devrait être le dernier calque dans le panneau Calques) en cliquant dessus tout en appuyant sur {{Shortcut|Ctrl}}.

Dans la fenêtre principale, clic droit sur la ligne pointillée de la courbe Spline. Ne cliquez pas sur les poignées, mais sur le pointillé entre les poignées.

Dans le menu contextuel qui apparaît, sélectionnez {{Literal|Lier à la Spline}}.
[[Image:Spline-Link-to-0.63.06.png|frame|none]]

Le calque groupe contenant la flèche devrait se placer de telle sorte que la position de la poignée verte soit sur la courbe Spline, et elle devrait se tourner de manière à ce qu'elle pointe le long de la courbe Spline.

Cliquez sur le calque groupe pour le sélectionner lui seul, et faites glisser sa poignée verte dans la fenêtre. Vous verrez que la poignée est liée à la courbe, et que son déplacement affecte aussi la rotation de la flèche comme c'était prévu.

Nous pouvons maintenant animer la flèche. Activez le {{l|Animate_Editing_Mode}} en cliquant sur l'icône en bas à droite de la fenêtre principale {{Literal|Active le mode Edition de la l'Animation}}.

* Au point {{Literal|0f}} dans le temps, faites glisser la position de la poignée verte du calque groupe à une extrémité de la courbe Spline.
* Au point {{Literal|5s}} dans le temps, faites glisser la poignée à l'autre bout de la courbe.

Essayez {{c|<Menu Chevron>|<Affichage>|Jouer|}} pour voir l'animation.

== Résultats ==

Voici l'animation que j'ai obtenue : {{l|Media:Arrow-follows-bline.sifz‎|Arrow-follows-bline.sifz‎}}

== Contrôle linéaire de la vitesse de déplacement ==
Par défaut, la flèche voyage le long de la Spline avec une vitesse constance, indépendamment de la structure de la Spline.

Si vous sélectionnez le Calque groupe et donnez un coup d'oeil au panneau paramètres, vous verrez que le paramètre Origine est {{L|convert|converti}} en un type {{Literal|Spline Vertex}}. Ceci est fait automatiquement lorsque vous effectuez l'action {{Literal|Lier à la Spline}}. Vous pouvez désactiver le sous-paramètre {{Literal|Homogène}}, ainsi la vitesse de la flèche ne dépendra plus de la structure de la Spline - La flèche prend le même temps pour se déplacer le long de chaque segment de la courbe. Donc, si il y a une partie de la ligne longue et droite, puis une partie sinueuse complexe, la flèche se déplace beaucoup plus vite le long de la partie droite (car il y a moins de sommets dans cette partie)... En terme phisique, la vitesse linéaire (et donc, la vitesse le long de la Spline) n'est pas constante.

Pour une illustration de l'effet "Homogène", voir [http://www.youtube.com/watch?v=3PGXroxBcuo cette démo].

Doc:Animation Basics/fr

2013-12-29T09:46:51Z

Domi: /* Ajouter un mouvement */

{{Title|Bases de l'Animation}}
{{Navigation|Category:Manual|Doc:Adding Layers}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Basic}}
[[Category:Updated]]

{{NewTerminology}}



== Introduction ==

Avec Synfig Studio, créer une animation est vraiment facile. Il s'agit essentiellement de modifier une forme : il ne vous reste plus qu'à créer l'étape initiale et la dernière étape de l'évolution de cette forme et ''Synfig'' s'occupe de calculer les étapes intermédiaires.

Prenons un exemple simple : un phare en mouvement tel que celui de la voiture de Knight Rider. En gros, il s'agit de faire bouger un cercle de gauche à droite et retour. En d'autres mots, vous avez besoin de créer trois "étapes" ou "stades"

# Un cercle à gauche.
# Un cercle à droite.
# Une cercle de retour à gauche.

== Préparation de l'ouvrage ==

Commençons. Ouvrez ''Synfig Studio''. Un nouveau fichier est automatiquement ouvert au démarrage. En cliquant sur la partie monochrome du cadre du canevas (clic droit entre les règles horizontales et le canevas proprement dit) apparaît le {{l|Canvas Menu Caret|menu {{Literal|Chevron}} }}; sélectionnez {{c|Édition|Propriétés}}. La {{l|Canvas_Properties_Dialog|boîte de dialogue propriétés du canevas}} apparait.
Donnez un nom et une description à votre canevas et ensuite cliquez sur {{Literal|Appliquer}} (dans l'immédiat, ne cliquez pas sur {{Literal|OK}} - nous n'en avons pas fini avec la fenêtre des propriétés). Allez dans l'onglet {{Literal|Temps}} et assurez-vous d'avoir édité {{Literal|Heure de Fin}}. Changez "5 s" par "2 s" - ce qui donnera à votre animation une durée de 2 secondes.

[[File:Properties Dialog - End Time 0.63.06.png|center|frame|Boîte de dialogue propriétés du canevas]]

Maintenant, cliquez sur {{Literal|OK}}, sélectionnez l'{{l|Rectangle Tool}} et créez un rectangle noir tout simple qui vous servira d'arrière plan. Il n'est pas utile qu'il recouvre l'ensemble du canevas.



[[File:Animation Basics tutorial 2 0.63.06.png|450px|center|thumb]]

Nous avons besoin maintenant d'un cercle. Changez la couleur de remplissage pour rouge, sélectionnez l'{{l|Circle Tool}} et dessinez un cercle. Si il n'est pas parfait, cela n'a pas d'importance. Vous pouvez le modifier. Sélectionnez l'{{l|Transform Tool}} et cliquez sur le cercle. Apparaît un mode d'édition qu'il est facile de déceler par un petit point vert au milieu de l'image et au fin rectangle blanc qui l'entoure. Vous pouvez déplacer ce cercle en le prenant par ce point vert (l'''Origine'').

[[File:Animation Basics tutorial 3 0.63.06.png|450px|center|thumb]]

Dans ces manipulations, vous avez vu les premières étapes pour dessiner un objet et le déplacer, mais il ne s'agit évidemment pas encore à proprement parler d'animation. Poursuivons pour voir ce qu'il en est.

== Ajouter un mouvement ==

Vous avez au commencement, introduit une valeur de 2 secondes dans la fenêtre de dialogue des Propriétés. Comme la durée de votre animation n'est pas nulle, la fenêtre canevas sur laquelle vous travaillez, présente en bas un curseur de défilement de couleur grise, l' {{l|Timebar}}. Vous pouvez cliquer dessus et un petit indicateur orange apparaîtra pour montrer votre position dans le temps. Essayer de cliquer en différents endroits de la ligne-temps et observez que le champ d'entrée à gauche du curseur se modifie en des valeurs telles que "12f", "1s 15f". Vous pouvez également saisir directement une valeur dans ce champs. Par exemple saisissez "1s" puis validez avec {{Shortcut|enter}}, l'indicateur orange se déplacera au milieu de la ligne-temps. En entrant "2s", il déplacera le curseur à la fin de la ligne-temps.

{{Note|Note|Remarquez qu'à "2s", l'indicateur orange n'est pas visible du fait que, situé à la limite visible de la ligne-temps, il est positionné en dehors du champ de vision.}}

À ce point de l'ouvrage, vous noterez qu'aucun changement ne s'opère. Revenez à "0s" et activez {{l|Animate Editing Mode}} en cliquant le bouton vert situé à droite de la ligne-temps grise. Le canevas montrera alors un contour rouge : il indique que les changements que vous allez opérer modifient dorénavant votre animation.

En mode édition d'animation, chacun des changements de vos objets produira un {{l|Waypoint|Point de Passage}} qui associe le changement au temps actuel. Comme vous allez le voir, Synfig est capable de créer des transitions lissées entre les points de passage et vous pouvez même choisir la manière dont les changements intermédiaires vont ce produire. Vous trouverez probablement cela utile d'associer certains ou tous vos points de passage à des {{l|Keyframe}}.

[[File:Animation Basics tutorial 4 0.63.06.png|450px|center|thumb]]
Précédemment nous avons introduit trois "étapes" ou "stades" à l'animation. C'est ce qui sera nommé "{{l|Keyframe|keyframes}}" ou "image-clé" (Au cas où vous seriez un familier de l'encodage vidéo, il s'agit d'autre chose). Une "image-clé" est une image située à un moment donné du déroulement de l'animation où un événement particulier se passe pour vos objets.

Allez sur le {{l|Keyframes_Panel}} — cliquez dans la table dotée d'une petite icône clé au bas de la fenêtre — pour éditer les images-clé. Pressez maintenant le bouton doté du signe "+" et vous devriez obtenir une nouvelle entrée dans la liste d'affichage {{Literal|0f, 0f, (Saut)}}.

[[File:Keyframes Panel 0.63.06.png|center|frame]]

Pointez maintenant sur la marque "1s" de la ligne-temps. Le petit indicateur orange se reporte à cet endroit. Ajoutez alors une autre "image-clé" en cliquant le petit signe "+". Recommencez le processus en positionnant le curseur-temps à "2s" qui est la fin de votre animation. Vous devriez maintenant avoir trois "images-clé" dans la liste.

[[File:Keyframes Panel 2 0.63.06.png|center|frame]]

== Comprendre la ligne-temps : les "f" (frame = image) et les "s" (seconde) ==

A présent, vous avez dû penser à ce que signifient ces mystérieux pointeurs "1s, 10f". Ils indiquent un point particulier de la ligne-temps, précisément en terme de secondes (s) et d'images (f).

Par défaut, chaque seconde est divisée en 24 images à la manière du mètre qui est subdivisé en 100 centimètres. Le marquage des images commence à zéro (0) et va jusqu'à 23 après quoi commence une nouvelle seconde où la marque d'image commence à 0.

Pour 5 secondes pleines et trois images, par exemple, la notation de la ligne-temps reportera "5s 3f".

== Le panneau images-clé ==

Le {{l|Keyframes Panel|panneau des images-clé}} est moins facile d'approche. Il énumère le {{Literal|Temps}} qui, de fait, est le moment de départ ; la {{Literal|Longueur}} qui semble aller de soi ; le {{Literal|Saut}} dont nous allons parler tout de suite ; et la {{Literal|Description}} qui parle d'elle-même aussi.

Maintenant portons notre attention sur les entrées nommées {{Literal|(Saut)}}. En fait, elles sont des liens, exactement à la manière des liens web : en cliquant dessus, le curseur de votre ligne-temps se positionne exactement à cet endroit.

Vous pouvez l'utiliser pour éditer votre image à un moment donné de l'animation. Par exemple, vous pouvez sauter à la première seconde et bouger le cercle rouge à droite. Et voilà ! Vous avez procédé à votre premier mouvement, vous avez créé votre première animation avec Synfig !

[[File:Animation Basics tutorial 5 0.63.06.png|center|frame]]

Vous vous demandez ou est votre animation ? Cliquez à loisir sur un point de la ligne-temps et vous remarquerez que le cercle rouge (le phare) se place à une nouvelle position que vous n'aviez pas spécifié ! Que s'est-il passé ? ''Synfig'' a interpolé ce que vous vouliez faire - en l'occurrence : bouger le cercle - et a dessiné toutes les images intermédiaires situées entre les étapes. Chaque dessin a produit une image de votre animation et le cercle apparaît comme en mouvement.

Remarquez que vous êtes dispensé d'aller à la dernière image clé "2s" et de faire se mouvoir en retour votre cercle vers la gauche. Les images clés permettent à ''Synfig'' de se souvenir des étapes initialement positionnées dans le déroulement du temps de l'animation. C'est la raison pour laquelle lorsque vous modifiez la position du cercle à "1s", rien ne bouge à "2s" ou à "0s". En revenant au {{l|Parameters Panel}} et en observant le {{l|Timetrack Panel}}, vous noterez que trois diamants oranges (des points verts dans les versions précédentes) apparaissent sur la droite du paramètre {{Literal|Origine}}. Ces derniers sont nommés {{L|Waypoints}} et sont utilisés pour indiquer les changements de valeur dans le temps des paramètres, comme la position ou la couleur, de l'objet.

[[File:TimetrackOriginWaypoints 0.63.06.png|thumb|center|450px]]

== Rendu de votre animation ==

Avant que vous puissiez visionner votre animation, vous devez faire un "rendu" (faire calculer à la machine sa transformation en vidéo, image par image) de votre ouvrage. Il y a deux manières pour ce faire : utiliser ce que vous venez d'utiliser : ''Synfig Studio'' ; ou bien passer par la ligne de commande nommé "synfig".

Faisons cela de la première manière. Quittez le {{l|Animate Editing Mode}} en cliquant sur le bouton rouge du mode édition de la ligne-temps et sauvegardez votre fichier en lui donnant un nom, par exemple : "BasicKnightRider.sifz". Allez ensuite dans le menu de la fenêtre "canevas" (le bouton {{l|Canvas Menu Caret}} au coin supérieur gauche) et sélectionnez {{c|Fichier|Rendu}}. Au même endroit où vous avez sauvegardé "BasicKnightRider.sifz", modifiez le nom du fichier par "BasicKnightRider.gif" en choisissant l'option de format {{Literal|gif}} au lieu de {{Literal|Auto}} et cliquez ensuite sur {{Literal|Rendu}}. En fonction de la vitesse de votre processeur, cela peut demander un moment avant que la barre de statut des images, située en bas de la fenêtre, finisse par afficher "Fichier rendu avec succès" : votre fichier a été correctement rendu.

[[File:Animation Basics tutorial 6 0.63.06.png|618px|thumb|center|On exécute un "Rendu" depuis le menu dans Synfig Studio]]

{{Note|Note|Le bouton "Magic++" (si présent) produit des fichiers "gif" bien meilleurs que le seul bouton "gif" du fait qu'il peut optimiser la palette pour chaque image.}}
Ouvrez BasicKnightRider.gif dans Firefox ou une autre application pouvant lire les gifs animés. Remarquez que Firefox vas la rejouer indéfiniment ce qui rendra votre courte animation relativement longue. Si donc vous voyez un cercle rouge ce déplaçant de gauche à droite et revenir, félicitations ! Vous avez créer votre première animation !

{{Note|Note|Vous avez aussi la possibilité de pré-visualiser votre animation. Pressez le bouton de {{l|Canvas Menu Caret|menu {{Literal|Chevron}} }} situé au coin supérieur gauche de la fenêtre du canevas et choisissez {{c|Fichier|Aperçu}}.}}

Si, pour votre animation, vous préférez mieux utiliser la ligne de commande à la place du menu de rendu, ouvrez alors une fenêtre de terminal, (dans windows faites {{c|Démarrer|Exécuter}}, tapez {{Literal|cmd}} et pressez {{Shortcut|Entrer}}), et déplacer vous dans le répertoire où se trouve votre fichier et tapez quelque-chose comme ceci :

synfig -t gif BasicKnightRider.sif

Un bref message, sans importance pour l'instant, apparaît. En fonction de la vitesse de votre processeur, cela peut prendre un moment avant de voir une ligne telle que celle-ci apparaître :

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

Voilà, c'est fait : vous pouvez visionner l'animation .gif en utilisant Firefox ou un autre programme comme expliqué précédemment.

== Conclusion ==

Il est bien évident que le positionnement d'un objet n'est pas la seule chose qui puisse être modifié avec ''Synfig Studio'', bien d'autres éléments le sont telles que la dimension, la forme, la couleur, etc. ''Synfig'' propose plusieurs fichiers de démonstration qui permettent de creuser plus profondément ces possibilités.

Maintenant, continuons avec le chapitre suivant : {{l|Doc:Adding Layers/fr|Ajouter des Calques}}

Vous pouvez télécharger le projet utilisé : [[File:BasicKnightRider.sifz]]

{{Navigation|Category:Manual|Doc:Adding Layers}}

Doc:Animation Basics/fr

2013-12-29T09:43:14Z

Domi: /* Ajouter un mouvement */

{{Title|Bases de l'Animation}}
{{Navigation|Category:Manual|Doc:Adding Layers}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Basic}}
[[Category:Updated]]

{{NewTerminology}}



== Introduction ==

Avec Synfig Studio, créer une animation est vraiment facile. Il s'agit essentiellement de modifier une forme : il ne vous reste plus qu'à créer l'étape initiale et la dernière étape de l'évolution de cette forme et ''Synfig'' s'occupe de calculer les étapes intermédiaires.

Prenons un exemple simple : un phare en mouvement tel que celui de la voiture de Knight Rider. En gros, il s'agit de faire bouger un cercle de gauche à droite et retour. En d'autres mots, vous avez besoin de créer trois "étapes" ou "stades"

# Un cercle à gauche.
# Un cercle à droite.
# Une cercle de retour à gauche.

== Préparation de l'ouvrage ==

Commençons. Ouvrez ''Synfig Studio''. Un nouveau fichier est automatiquement ouvert au démarrage. En cliquant sur la partie monochrome du cadre du canevas (clic droit entre les règles horizontales et le canevas proprement dit) apparaît le {{l|Canvas Menu Caret|menu {{Literal|Chevron}} }}; sélectionnez {{c|Édition|Propriétés}}. La {{l|Canvas_Properties_Dialog|boîte de dialogue propriétés du canevas}} apparait.
Donnez un nom et une description à votre canevas et ensuite cliquez sur {{Literal|Appliquer}} (dans l'immédiat, ne cliquez pas sur {{Literal|OK}} - nous n'en avons pas fini avec la fenêtre des propriétés). Allez dans l'onglet {{Literal|Temps}} et assurez-vous d'avoir édité {{Literal|Heure de Fin}}. Changez "5 s" par "2 s" - ce qui donnera à votre animation une durée de 2 secondes.

[[File:Properties Dialog - End Time 0.63.06.png|center|frame|Boîte de dialogue propriétés du canevas]]

Maintenant, cliquez sur {{Literal|OK}}, sélectionnez l'{{l|Rectangle Tool}} et créez un rectangle noir tout simple qui vous servira d'arrière plan. Il n'est pas utile qu'il recouvre l'ensemble du canevas.



[[File:Animation Basics tutorial 2 0.63.06.png|450px|center|thumb]]

Nous avons besoin maintenant d'un cercle. Changez la couleur de remplissage pour rouge, sélectionnez l'{{l|Circle Tool}} et dessinez un cercle. Si il n'est pas parfait, cela n'a pas d'importance. Vous pouvez le modifier. Sélectionnez l'{{l|Transform Tool}} et cliquez sur le cercle. Apparaît un mode d'édition qu'il est facile de déceler par un petit point vert au milieu de l'image et au fin rectangle blanc qui l'entoure. Vous pouvez déplacer ce cercle en le prenant par ce point vert (l'''Origine'').

[[File:Animation Basics tutorial 3 0.63.06.png|450px|center|thumb]]

Dans ces manipulations, vous avez vu les premières étapes pour dessiner un objet et le déplacer, mais il ne s'agit évidemment pas encore à proprement parler d'animation. Poursuivons pour voir ce qu'il en est.

== Ajouter un mouvement ==

Vous avez au commencement, introduit une valeur de 2 secondes dans la fenêtre de dialogue des Propriétés. Comme la durée de votre animation n'est pas nulle, la fenêtre canevas sur laquelle vous travaillez, présente en bas un curseur de défilement de couleur grise, l' {{l|Timebar}}. Vous pouvez cliquer dessus et un petit indicateur orange apparaîtra pour montrer votre position dans le temps. Essayer de cliquer en différents endroits de la ligne-temps et observez que le champ d'entrée à gauche du curseur se modifie en des valeurs telles que "12f", "1s 15f". Vous pouvez également saisir directement une valeur dans ce champs. Par exemple saisissez "1s" puis validez avec {{Shortcut|enter}}, l'indicateur orange se déplacera au milieu de la ligne-temps. En entrant "2s", il déplacera le curseur à la fin de la ligne-temps.

{{Note|Note|Remarquez qu'à "2s", l'indicateur orange n'est pas visible du fait que, situé à la limite visible de la ligne-temps, il est positionné en dehors du champ de vision.}}

À ce point de l'ouvrage, vous noterez qu'aucun changement ne s'opère. Revenez à "0s" et activez {{l|Animate Editing Mode}} en cliquant le bouton vert situé à droite de la ligne-temps grise. Le canevas montrera alors un contour rouge : il indique que les changements que vous allez opérer modifient dorénavant votre animation.

En mode édition d'animation, chacun des changements de vos objets produira un {{l|Waypoint|Point de Passage}} qui associe le changements avec le temps actuel. Comme vous allez le voir, Synfig est capable de créer des transitions lissés entre les points de passage et vous pouvez même choisir la manière dont les changements intermédiaires vont ce produire. Vous trouverez probablement cela utile d'associer certains ou tout vos points de passage à des {{l|Keyframe}}.

[[File:Animation Basics tutorial 4 0.63.06.png|450px|center|thumb]]
Précédemment nous avons introduit trois "étapes" ou "stades" à l'animation. C'est ce qui sera nommé "{{l|Keyframe|keyframes}}" ou "image-clé" (Au cas où vous seriez un familier de l'encodage vidéo, il s'agit d'autre chose). Une "image-clé" est une image située à un moment donné du déroulement de l'animation où un événement particulier se passe pour vos objets.

Allez sur le {{l|Keyframes_Panel}} — cliquez dans la table dotée d'une petite icône clé au bas de la fenêtre — pour éditer les images-clé. Pressez maintenant le bouton doté du signe "+" et vous devriez obtenir une nouvelle entrée dans la liste d'affichage {{Literal|0f, 0f, (Saut)}}.

[[File:Keyframes Panel 0.63.06.png|center|frame]]

Pointez maintenant sur la marque "1s" de la ligne-temps. Le petit indicateur orange se reporte à cet endroit. Ajoutez alors une autre "image-clé" en cliquant le petit signe "+". Recommencez le processus en positionnant le curseur-temps à "2s" qui est la fin de votre animation. Vous devriez maintenant avoir trois "images-clé" dans la liste.

[[File:Keyframes Panel 2 0.63.06.png|center|frame]]

== Comprendre la ligne-temps : les "f" (frame = image) et les "s" (seconde) ==

A présent, vous avez dû penser à ce que signifient ces mystérieux pointeurs "1s, 10f". Ils indiquent un point particulier de la ligne-temps, précisément en terme de secondes (s) et d'images (f).

Par défaut, chaque seconde est divisée en 24 images à la manière du mètre qui est subdivisé en 100 centimètres. Le marquage des images commence à zéro (0) et va jusqu'à 23 après quoi commence une nouvelle seconde où la marque d'image commence à 0.

Pour 5 secondes pleines et trois images, par exemple, la notation de la ligne-temps reportera "5s 3f".

== Le panneau images-clé ==

Le {{l|Keyframes Panel|panneau des images-clé}} est moins facile d'approche. Il énumère le {{Literal|Temps}} qui, de fait, est le moment de départ ; la {{Literal|Longueur}} qui semble aller de soi ; le {{Literal|Saut}} dont nous allons parler tout de suite ; et la {{Literal|Description}} qui parle d'elle-même aussi.

Maintenant portons notre attention sur les entrées nommées {{Literal|(Saut)}}. En fait, elles sont des liens, exactement à la manière des liens web : en cliquant dessus, le curseur de votre ligne-temps se positionne exactement à cet endroit.

Vous pouvez l'utiliser pour éditer votre image à un moment donné de l'animation. Par exemple, vous pouvez sauter à la première seconde et bouger le cercle rouge à droite. Et voilà ! Vous avez procédé à votre premier mouvement, vous avez créé votre première animation avec Synfig !

[[File:Animation Basics tutorial 5 0.63.06.png|center|frame]]

Vous vous demandez ou est votre animation ? Cliquez à loisir sur un point de la ligne-temps et vous remarquerez que le cercle rouge (le phare) se place à une nouvelle position que vous n'aviez pas spécifié ! Que s'est-il passé ? ''Synfig'' a interpolé ce que vous vouliez faire - en l'occurrence : bouger le cercle - et a dessiné toutes les images intermédiaires situées entre les étapes. Chaque dessin a produit une image de votre animation et le cercle apparaît comme en mouvement.

Remarquez que vous êtes dispensé d'aller à la dernière image clé "2s" et de faire se mouvoir en retour votre cercle vers la gauche. Les images clés permettent à ''Synfig'' de se souvenir des étapes initialement positionnées dans le déroulement du temps de l'animation. C'est la raison pour laquelle lorsque vous modifiez la position du cercle à "1s", rien ne bouge à "2s" ou à "0s". En revenant au {{l|Parameters Panel}} et en observant le {{l|Timetrack Panel}}, vous noterez que trois diamants oranges (des points verts dans les versions précédentes) apparaissent sur la droite du paramètre {{Literal|Origine}}. Ces derniers sont nommés {{L|Waypoints}} et sont utilisés pour indiquer les changements de valeur dans le temps des paramètres, comme la position ou la couleur, de l'objet.

[[File:TimetrackOriginWaypoints 0.63.06.png|thumb|center|450px]]

== Rendu de votre animation ==

Avant que vous puissiez visionner votre animation, vous devez faire un "rendu" (faire calculer à la machine sa transformation en vidéo, image par image) de votre ouvrage. Il y a deux manières pour ce faire : utiliser ce que vous venez d'utiliser : ''Synfig Studio'' ; ou bien passer par la ligne de commande nommé "synfig".

Faisons cela de la première manière. Quittez le {{l|Animate Editing Mode}} en cliquant sur le bouton rouge du mode édition de la ligne-temps et sauvegardez votre fichier en lui donnant un nom, par exemple : "BasicKnightRider.sifz". Allez ensuite dans le menu de la fenêtre "canevas" (le bouton {{l|Canvas Menu Caret}} au coin supérieur gauche) et sélectionnez {{c|Fichier|Rendu}}. Au même endroit où vous avez sauvegardé "BasicKnightRider.sifz", modifiez le nom du fichier par "BasicKnightRider.gif" en choisissant l'option de format {{Literal|gif}} au lieu de {{Literal|Auto}} et cliquez ensuite sur {{Literal|Rendu}}. En fonction de la vitesse de votre processeur, cela peut demander un moment avant que la barre de statut des images, située en bas de la fenêtre, finisse par afficher "Fichier rendu avec succès" : votre fichier a été correctement rendu.

[[File:Animation Basics tutorial 6 0.63.06.png|618px|thumb|center|On exécute un "Rendu" depuis le menu dans Synfig Studio]]

{{Note|Note|Le bouton "Magic++" (si présent) produit des fichiers "gif" bien meilleurs que le seul bouton "gif" du fait qu'il peut optimiser la palette pour chaque image.}}
Ouvrez BasicKnightRider.gif dans Firefox ou une autre application pouvant lire les gifs animés. Remarquez que Firefox vas la rejouer indéfiniment ce qui rendra votre courte animation relativement longue. Si donc vous voyez un cercle rouge ce déplaçant de gauche à droite et revenir, félicitations ! Vous avez créer votre première animation !

{{Note|Note|Vous avez aussi la possibilité de pré-visualiser votre animation. Pressez le bouton de {{l|Canvas Menu Caret|menu {{Literal|Chevron}} }} situé au coin supérieur gauche de la fenêtre du canevas et choisissez {{c|Fichier|Aperçu}}.}}

Si, pour votre animation, vous préférez mieux utiliser la ligne de commande à la place du menu de rendu, ouvrez alors une fenêtre de terminal, (dans windows faites {{c|Démarrer|Exécuter}}, tapez {{Literal|cmd}} et pressez {{Shortcut|Entrer}}), et déplacer vous dans le répertoire où se trouve votre fichier et tapez quelque-chose comme ceci :

synfig -t gif BasicKnightRider.sif

Un bref message, sans importance pour l'instant, apparaît. En fonction de la vitesse de votre processeur, cela peut prendre un moment avant de voir une ligne telle que celle-ci apparaître :

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

Voilà, c'est fait : vous pouvez visionner l'animation .gif en utilisant Firefox ou un autre programme comme expliqué précédemment.

== Conclusion ==

Il est bien évident que le positionnement d'un objet n'est pas la seule chose qui puisse être modifié avec ''Synfig Studio'', bien d'autres éléments le sont telles que la dimension, la forme, la couleur, etc. ''Synfig'' propose plusieurs fichiers de démonstration qui permettent de creuser plus profondément ces possibilités.

Maintenant, continuons avec le chapitre suivant : {{l|Doc:Adding Layers/fr|Ajouter des Calques}}

Vous pouvez télécharger le projet utilisé : [[File:BasicKnightRider.sifz]]

{{Navigation|Category:Manual|Doc:Adding Layers}}

Doc:Animation Basics/fr

2013-12-29T09:41:57Z

Domi: /* Ajouter un mouvement */

{{Title|Bases de l'Animation}}
{{Navigation|Category:Manual|Doc:Adding Layers}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Basic}}
[[Category:Updated]]

{{NewTerminology}}



== Introduction ==

Avec Synfig Studio, créer une animation est vraiment facile. Il s'agit essentiellement de modifier une forme : il ne vous reste plus qu'à créer l'étape initiale et la dernière étape de l'évolution de cette forme et ''Synfig'' s'occupe de calculer les étapes intermédiaires.

Prenons un exemple simple : un phare en mouvement tel que celui de la voiture de Knight Rider. En gros, il s'agit de faire bouger un cercle de gauche à droite et retour. En d'autres mots, vous avez besoin de créer trois "étapes" ou "stades"

# Un cercle à gauche.
# Un cercle à droite.
# Une cercle de retour à gauche.

== Préparation de l'ouvrage ==

Commençons. Ouvrez ''Synfig Studio''. Un nouveau fichier est automatiquement ouvert au démarrage. En cliquant sur la partie monochrome du cadre du canevas (clic droit entre les règles horizontales et le canevas proprement dit) apparaît le {{l|Canvas Menu Caret|menu {{Literal|Chevron}} }}; sélectionnez {{c|Édition|Propriétés}}. La {{l|Canvas_Properties_Dialog|boîte de dialogue propriétés du canevas}} apparait.
Donnez un nom et une description à votre canevas et ensuite cliquez sur {{Literal|Appliquer}} (dans l'immédiat, ne cliquez pas sur {{Literal|OK}} - nous n'en avons pas fini avec la fenêtre des propriétés). Allez dans l'onglet {{Literal|Temps}} et assurez-vous d'avoir édité {{Literal|Heure de Fin}}. Changez "5 s" par "2 s" - ce qui donnera à votre animation une durée de 2 secondes.

[[File:Properties Dialog - End Time 0.63.06.png|center|frame|Boîte de dialogue propriétés du canevas]]

Maintenant, cliquez sur {{Literal|OK}}, sélectionnez l'{{l|Rectangle Tool}} et créez un rectangle noir tout simple qui vous servira d'arrière plan. Il n'est pas utile qu'il recouvre l'ensemble du canevas.



[[File:Animation Basics tutorial 2 0.63.06.png|450px|center|thumb]]

Nous avons besoin maintenant d'un cercle. Changez la couleur de remplissage pour rouge, sélectionnez l'{{l|Circle Tool}} et dessinez un cercle. Si il n'est pas parfait, cela n'a pas d'importance. Vous pouvez le modifier. Sélectionnez l'{{l|Transform Tool}} et cliquez sur le cercle. Apparaît un mode d'édition qu'il est facile de déceler par un petit point vert au milieu de l'image et au fin rectangle blanc qui l'entoure. Vous pouvez déplacer ce cercle en le prenant par ce point vert (l'''Origine'').

[[File:Animation Basics tutorial 3 0.63.06.png|450px|center|thumb]]

Dans ces manipulations, vous avez vu les premières étapes pour dessiner un objet et le déplacer, mais il ne s'agit évidemment pas encore à proprement parler d'animation. Poursuivons pour voir ce qu'il en est.

== Ajouter un mouvement ==

Vous avez au commencement, introduit une valeur de 2 secondes dans la fenêtre de dialogue des Propriétés. Comme la durée de votre animation n'est pas nulle, votre fenêtre canevas sur laquelle vous travaillez, présente en bas un curseur de défilement de couleur grise, la {{l|Timebar}}. Vous pouvez cliquer dessus et un petit indicateur orange apparaîtra pour montrer votre position dans le temps. Essayer de cliquer en différents endroits de la ligne-temps et observez que le champ d'entrée à gauche du curseur se modifie en des valeurs telles que "12f", "1s 15f". Vous pouvez également saisir directement une valeur dans ce champs. Par exemple saisissez "1s" puis validez avec {{Shortcut|enter}}, l'indicateur orange se déplacera au milieu de la ligne-temps. En entrant "2s", il déplacera le curseur à la fin de la ligne-temps.

{{Note|Note|Remarquez qu'à "2s", l'indicateur orange n'est pas visible du fait que, situé à la limite visible de la ligne-temps, il est positionné en dehors du champ de vision.}}

À ce point de l'ouvrage, vous noterez qu'aucun changement ne s'opère. Revenez à "0s" et activez {{l|Animate Editing Mode}} en cliquant le bouton vert situé à droite de la ligne-temps grise. Le canevas montrera alors un contour rouge : il indique que les changements que vous allez opérer modifient dorénavant votre animation.

En mode édition d'animation, chacun des changements de vos objets produira un {{l|Waypoint|Point de Passage}} qui associe le changements avec le temps actuel. Comme vous allez le voir, Synfig est capable de créer des transitions lissés entre les points de passage et vous pouvez même choisir la manière dont les changements intermédiaires vont ce produire. Vous trouverez probablement cela utile d'associer certains ou tout vos points de passage à des {{l|Keyframe}}.

[[File:Animation Basics tutorial 4 0.63.06.png|450px|center|thumb]]
Précédemment nous avons introduit trois "étapes" ou "stades" à l'animation. C'est ce qui sera nommé "{{l|Keyframe|keyframes}}" ou "image-clé" (Au cas où vous seriez un familier de l'encodage vidéo, il s'agit d'autre chose). Une "image-clé" est une image située à un moment donné du déroulement de l'animation où un événement particulier se passe pour vos objets.

Allez sur le {{l|Keyframes_Panel}} — cliquez dans la table dotée d'une petite icône clé au bas de la fenêtre — pour éditer les images-clé. Pressez maintenant le bouton doté du signe "+" et vous devriez obtenir une nouvelle entrée dans la liste d'affichage {{Literal|0f, 0f, (Saut)}}.

[[File:Keyframes Panel 0.63.06.png|center|frame]]

Pointez maintenant sur la marque "1s" de la ligne-temps. Le petit indicateur orange se reporte à cet endroit. Ajoutez alors une autre "image-clé" en cliquant le petit signe "+". Recommencez le processus en positionnant le curseur-temps à "2s" qui est la fin de votre animation. Vous devriez maintenant avoir trois "images-clé" dans la liste.

[[File:Keyframes Panel 2 0.63.06.png|center|frame]]

== Comprendre la ligne-temps : les "f" (frame = image) et les "s" (seconde) ==

A présent, vous avez dû penser à ce que signifient ces mystérieux pointeurs "1s, 10f". Ils indiquent un point particulier de la ligne-temps, précisément en terme de secondes (s) et d'images (f).

Par défaut, chaque seconde est divisée en 24 images à la manière du mètre qui est subdivisé en 100 centimètres. Le marquage des images commence à zéro (0) et va jusqu'à 23 après quoi commence une nouvelle seconde où la marque d'image commence à 0.

Pour 5 secondes pleines et trois images, par exemple, la notation de la ligne-temps reportera "5s 3f".

== Le panneau images-clé ==

Le {{l|Keyframes Panel|panneau des images-clé}} est moins facile d'approche. Il énumère le {{Literal|Temps}} qui, de fait, est le moment de départ ; la {{Literal|Longueur}} qui semble aller de soi ; le {{Literal|Saut}} dont nous allons parler tout de suite ; et la {{Literal|Description}} qui parle d'elle-même aussi.

Maintenant portons notre attention sur les entrées nommées {{Literal|(Saut)}}. En fait, elles sont des liens, exactement à la manière des liens web : en cliquant dessus, le curseur de votre ligne-temps se positionne exactement à cet endroit.

Vous pouvez l'utiliser pour éditer votre image à un moment donné de l'animation. Par exemple, vous pouvez sauter à la première seconde et bouger le cercle rouge à droite. Et voilà ! Vous avez procédé à votre premier mouvement, vous avez créé votre première animation avec Synfig !

[[File:Animation Basics tutorial 5 0.63.06.png|center|frame]]

Vous vous demandez ou est votre animation ? Cliquez à loisir sur un point de la ligne-temps et vous remarquerez que le cercle rouge (le phare) se place à une nouvelle position que vous n'aviez pas spécifié ! Que s'est-il passé ? ''Synfig'' a interpolé ce que vous vouliez faire - en l'occurrence : bouger le cercle - et a dessiné toutes les images intermédiaires situées entre les étapes. Chaque dessin a produit une image de votre animation et le cercle apparaît comme en mouvement.

Remarquez que vous êtes dispensé d'aller à la dernière image clé "2s" et de faire se mouvoir en retour votre cercle vers la gauche. Les images clés permettent à ''Synfig'' de se souvenir des étapes initialement positionnées dans le déroulement du temps de l'animation. C'est la raison pour laquelle lorsque vous modifiez la position du cercle à "1s", rien ne bouge à "2s" ou à "0s". En revenant au {{l|Parameters Panel}} et en observant le {{l|Timetrack Panel}}, vous noterez que trois diamants oranges (des points verts dans les versions précédentes) apparaissent sur la droite du paramètre {{Literal|Origine}}. Ces derniers sont nommés {{L|Waypoints}} et sont utilisés pour indiquer les changements de valeur dans le temps des paramètres, comme la position ou la couleur, de l'objet.

[[File:TimetrackOriginWaypoints 0.63.06.png|thumb|center|450px]]

== Rendu de votre animation ==

Avant que vous puissiez visionner votre animation, vous devez faire un "rendu" (faire calculer à la machine sa transformation en vidéo, image par image) de votre ouvrage. Il y a deux manières pour ce faire : utiliser ce que vous venez d'utiliser : ''Synfig Studio'' ; ou bien passer par la ligne de commande nommé "synfig".

Faisons cela de la première manière. Quittez le {{l|Animate Editing Mode}} en cliquant sur le bouton rouge du mode édition de la ligne-temps et sauvegardez votre fichier en lui donnant un nom, par exemple : "BasicKnightRider.sifz". Allez ensuite dans le menu de la fenêtre "canevas" (le bouton {{l|Canvas Menu Caret}} au coin supérieur gauche) et sélectionnez {{c|Fichier|Rendu}}. Au même endroit où vous avez sauvegardé "BasicKnightRider.sifz", modifiez le nom du fichier par "BasicKnightRider.gif" en choisissant l'option de format {{Literal|gif}} au lieu de {{Literal|Auto}} et cliquez ensuite sur {{Literal|Rendu}}. En fonction de la vitesse de votre processeur, cela peut demander un moment avant que la barre de statut des images, située en bas de la fenêtre, finisse par afficher "Fichier rendu avec succès" : votre fichier a été correctement rendu.

[[File:Animation Basics tutorial 6 0.63.06.png|618px|thumb|center|On exécute un "Rendu" depuis le menu dans Synfig Studio]]

{{Note|Note|Le bouton "Magic++" (si présent) produit des fichiers "gif" bien meilleurs que le seul bouton "gif" du fait qu'il peut optimiser la palette pour chaque image.}}
Ouvrez BasicKnightRider.gif dans Firefox ou une autre application pouvant lire les gifs animés. Remarquez que Firefox vas la rejouer indéfiniment ce qui rendra votre courte animation relativement longue. Si donc vous voyez un cercle rouge ce déplaçant de gauche à droite et revenir, félicitations ! Vous avez créer votre première animation !

{{Note|Note|Vous avez aussi la possibilité de pré-visualiser votre animation. Pressez le bouton de {{l|Canvas Menu Caret|menu {{Literal|Chevron}} }} situé au coin supérieur gauche de la fenêtre du canevas et choisissez {{c|Fichier|Aperçu}}.}}

Si, pour votre animation, vous préférez mieux utiliser la ligne de commande à la place du menu de rendu, ouvrez alors une fenêtre de terminal, (dans windows faites {{c|Démarrer|Exécuter}}, tapez {{Literal|cmd}} et pressez {{Shortcut|Entrer}}), et déplacer vous dans le répertoire où se trouve votre fichier et tapez quelque-chose comme ceci :

synfig -t gif BasicKnightRider.sif

Un bref message, sans importance pour l'instant, apparaît. En fonction de la vitesse de votre processeur, cela peut prendre un moment avant de voir une ligne telle que celle-ci apparaître :

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

Voilà, c'est fait : vous pouvez visionner l'animation .gif en utilisant Firefox ou un autre programme comme expliqué précédemment.

== Conclusion ==

Il est bien évident que le positionnement d'un objet n'est pas la seule chose qui puisse être modifié avec ''Synfig Studio'', bien d'autres éléments le sont telles que la dimension, la forme, la couleur, etc. ''Synfig'' propose plusieurs fichiers de démonstration qui permettent de creuser plus profondément ces possibilités.

Maintenant, continuons avec le chapitre suivant : {{l|Doc:Adding Layers/fr|Ajouter des Calques}}

Vous pouvez télécharger le projet utilisé : [[File:BasicKnightRider.sifz]]

{{Navigation|Category:Manual|Doc:Adding Layers}}

Doc:Animation Basics/fr

2013-12-29T09:36:19Z

Domi: /* Préparation de l'ouvrage */

{{Title|Bases de l'Animation}}
{{Navigation|Category:Manual|Doc:Adding Layers}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Basic}}
[[Category:Updated]]

{{NewTerminology}}



== Introduction ==

Avec Synfig Studio, créer une animation est vraiment facile. Il s'agit essentiellement de modifier une forme : il ne vous reste plus qu'à créer l'étape initiale et la dernière étape de l'évolution de cette forme et ''Synfig'' s'occupe de calculer les étapes intermédiaires.

Prenons un exemple simple : un phare en mouvement tel que celui de la voiture de Knight Rider. En gros, il s'agit de faire bouger un cercle de gauche à droite et retour. En d'autres mots, vous avez besoin de créer trois "étapes" ou "stades"

# Un cercle à gauche.
# Un cercle à droite.
# Une cercle de retour à gauche.

== Préparation de l'ouvrage ==

Commençons. Ouvrez ''Synfig Studio''. Un nouveau fichier est automatiquement ouvert au démarrage. En cliquant sur la partie monochrome du cadre du canevas (clic droit entre les règles horizontales et le canevas proprement dit) apparaît le {{l|Canvas Menu Caret|menu {{Literal|Chevron}} }}; sélectionnez {{c|Édition|Propriétés}}. La {{l|Canvas_Properties_Dialog|boîte de dialogue propriétés du canevas}} apparait.
Donnez un nom et une description à votre canevas et ensuite cliquez sur {{Literal|Appliquer}} (dans l'immédiat, ne cliquez pas sur {{Literal|OK}} - nous n'en avons pas fini avec la fenêtre des propriétés). Allez dans l'onglet {{Literal|Temps}} et assurez-vous d'avoir édité {{Literal|Heure de Fin}}. Changez "5 s" par "2 s" - ce qui donnera à votre animation une durée de 2 secondes.

[[File:Properties Dialog - End Time 0.63.06.png|center|frame|Boîte de dialogue propriétés du canevas]]

Maintenant, cliquez sur {{Literal|OK}}, sélectionnez l'{{l|Rectangle Tool}} et créez un rectangle noir tout simple qui vous servira d'arrière plan. Il n'est pas utile qu'il recouvre l'ensemble du canevas.



[[File:Animation Basics tutorial 2 0.63.06.png|450px|center|thumb]]

Nous avons besoin maintenant d'un cercle. Changez la couleur de remplissage pour rouge, sélectionnez l'{{l|Circle Tool}} et dessinez un cercle. Si il n'est pas parfait, cela n'a pas d'importance. Vous pouvez le modifier. Sélectionnez l'{{l|Transform Tool}} et cliquez sur le cercle. Apparaît un mode d'édition qu'il est facile de déceler par un petit point vert au milieu de l'image et au fin rectangle blanc qui l'entoure. Vous pouvez déplacer ce cercle en le prenant par ce point vert (l'''Origine'').

[[File:Animation Basics tutorial 3 0.63.06.png|450px|center|thumb]]

Dans ces manipulations, vous avez vu les premières étapes pour dessiner un objet et le déplacer, mais il ne s'agit évidemment pas encore à proprement parler d'animation. Poursuivons pour voir ce qu'il en est.

== Ajouter un mouvement ==

Vous avez au commencement, introduit une valeur de 2 secondes dans la fenêtre de dialogue des Propriétés. Du fait que la longueur de votre animation ne soit pas égale à zéro, votre fenêtre canevas sur laquelle vous travaillez, présente en bas un curseur de défilement de couleur grise, la {{l|Timebar}}. Vous pouvez cliquer dessus et un petit indicateur orange apparaîtra pour montrer votre position dans le temps. Essayer de cliquer en différents endroits de la ligne-temps et observez que le champ d'entrée à gauche du curseur se modifie en des valeurs telles que "12f", "1s 15f". Vous pouvez également saisir directement une valeur dans ce champs. Par exemple saisissez "1s" puis validez avec {{Shortcut|enter}}, l'indicateur orange se déplacera au milieu de la ligne-temps. En entrant "2s", il déplacera le curseur à la fin de la ligne-temps.

{{Note|Note|Remarquez qu'à "2s", l'indicateur orange n'est pas visible du fait que, situé à la limite visible de la ligne-temps, il est positionné en dehors du champ de vision.}}

À ce point de l'ouvrage, vous noterez qu'aucun changement ne s'opère. Revenez à "0s" et activez {{l|Animate Editing Mode}} en cliquant le bouton vert situé à droite de la ligne-temps grise. Le canevas montrera alors un contour rouge : il indique que les changements que vous allez opérer modifient dorénavant votre animation.

En mode édition d'animation, chacun des changements de vos objets produira un {{l|Waypoint|Point de Passage}} qui associe le changements avec le temps actuel. Comme vous allez le voir, Synfig est capable de créer des transitions lissés entre les points de passage et vous pouvez même choisir la manière dont les changements intermédiaires vont ce produire. Vous trouverez probablement cela utile d'associer certains ou tout vos points de passage à des {{l|Keyframe}}.

[[File:Animation Basics tutorial 4 0.63.06.png|450px|center|thumb]]
Précédemment nous avons introduit trois "étapes" ou "stades" à l'animation. C'est ce qui sera nommé "{{l|Keyframe|keyframes}}" ou "image-clé" (Au cas où vous seriez un familier de l'encodage vidéo, il s'agit d'autre chose). Une "image-clé" est une image située à un moment donné du déroulement de l'animation où un événement particulier se passe pour vos objets.

Allez sur le {{l|Keyframes_Panel}} — cliquez dans la table dotée d'une petite icône clé au bas de la fenêtre — pour éditer les images-clé. Pressez maintenant le bouton doté du signe "+" et vous devriez obtenir une nouvelle entrée dans la liste d'affichage {{Literal|0f, 0f, (Saut)}}.

[[File:Keyframes Panel 0.63.06.png|center|frame]]

Pointez maintenant sur la marque "1s" de la ligne-temps. Le petit indicateur orange se reporte à cet endroit. Ajoutez alors une autre "image-clé" en cliquant le petit signe "+". Recommencez le processus en positionnant le curseur-temps à "2s" qui est la fin de votre animation. Vous devriez maintenant avoir trois "images-clé" dans la liste.

[[File:Keyframes Panel 2 0.63.06.png|center|frame]]

== Comprendre la ligne-temps : les "f" (frame = image) et les "s" (seconde) ==

A présent, vous avez dû penser à ce que signifient ces mystérieux pointeurs "1s, 10f". Ils indiquent un point particulier de la ligne-temps, précisément en terme de secondes (s) et d'images (f).

Par défaut, chaque seconde est divisée en 24 images à la manière du mètre qui est subdivisé en 100 centimètres. Le marquage des images commence à zéro (0) et va jusqu'à 23 après quoi commence une nouvelle seconde où la marque d'image commence à 0.

Pour 5 secondes pleines et trois images, par exemple, la notation de la ligne-temps reportera "5s 3f".

== Le panneau images-clé ==

Le {{l|Keyframes Panel|panneau des images-clé}} est moins facile d'approche. Il énumère le {{Literal|Temps}} qui, de fait, est le moment de départ ; la {{Literal|Longueur}} qui semble aller de soi ; le {{Literal|Saut}} dont nous allons parler tout de suite ; et la {{Literal|Description}} qui parle d'elle-même aussi.

Maintenant portons notre attention sur les entrées nommées {{Literal|(Saut)}}. En fait, elles sont des liens, exactement à la manière des liens web : en cliquant dessus, le curseur de votre ligne-temps se positionne exactement à cet endroit.

Vous pouvez l'utiliser pour éditer votre image à un moment donné de l'animation. Par exemple, vous pouvez sauter à la première seconde et bouger le cercle rouge à droite. Et voilà ! Vous avez procédé à votre premier mouvement, vous avez créé votre première animation avec Synfig !

[[File:Animation Basics tutorial 5 0.63.06.png|center|frame]]

Vous vous demandez ou est votre animation ? Cliquez à loisir sur un point de la ligne-temps et vous remarquerez que le cercle rouge (le phare) se place à une nouvelle position que vous n'aviez pas spécifié ! Que s'est-il passé ? ''Synfig'' a interpolé ce que vous vouliez faire - en l'occurrence : bouger le cercle - et a dessiné toutes les images intermédiaires situées entre les étapes. Chaque dessin a produit une image de votre animation et le cercle apparaît comme en mouvement.

Remarquez que vous êtes dispensé d'aller à la dernière image clé "2s" et de faire se mouvoir en retour votre cercle vers la gauche. Les images clés permettent à ''Synfig'' de se souvenir des étapes initialement positionnées dans le déroulement du temps de l'animation. C'est la raison pour laquelle lorsque vous modifiez la position du cercle à "1s", rien ne bouge à "2s" ou à "0s". En revenant au {{l|Parameters Panel}} et en observant le {{l|Timetrack Panel}}, vous noterez que trois diamants oranges (des points verts dans les versions précédentes) apparaissent sur la droite du paramètre {{Literal|Origine}}. Ces derniers sont nommés {{L|Waypoints}} et sont utilisés pour indiquer les changements de valeur dans le temps des paramètres, comme la position ou la couleur, de l'objet.

[[File:TimetrackOriginWaypoints 0.63.06.png|thumb|center|450px]]

== Rendu de votre animation ==

Avant que vous puissiez visionner votre animation, vous devez faire un "rendu" (faire calculer à la machine sa transformation en vidéo, image par image) de votre ouvrage. Il y a deux manières pour ce faire : utiliser ce que vous venez d'utiliser : ''Synfig Studio'' ; ou bien passer par la ligne de commande nommé "synfig".

Faisons cela de la première manière. Quittez le {{l|Animate Editing Mode}} en cliquant sur le bouton rouge du mode édition de la ligne-temps et sauvegardez votre fichier en lui donnant un nom, par exemple : "BasicKnightRider.sifz". Allez ensuite dans le menu de la fenêtre "canevas" (le bouton {{l|Canvas Menu Caret}} au coin supérieur gauche) et sélectionnez {{c|Fichier|Rendu}}. Au même endroit où vous avez sauvegardé "BasicKnightRider.sifz", modifiez le nom du fichier par "BasicKnightRider.gif" en choisissant l'option de format {{Literal|gif}} au lieu de {{Literal|Auto}} et cliquez ensuite sur {{Literal|Rendu}}. En fonction de la vitesse de votre processeur, cela peut demander un moment avant que la barre de statut des images, située en bas de la fenêtre, finisse par afficher "Fichier rendu avec succès" : votre fichier a été correctement rendu.

[[File:Animation Basics tutorial 6 0.63.06.png|618px|thumb|center|On exécute un "Rendu" depuis le menu dans Synfig Studio]]

{{Note|Note|Le bouton "Magic++" (si présent) produit des fichiers "gif" bien meilleurs que le seul bouton "gif" du fait qu'il peut optimiser la palette pour chaque image.}}
Ouvrez BasicKnightRider.gif dans Firefox ou une autre application pouvant lire les gifs animés. Remarquez que Firefox vas la rejouer indéfiniment ce qui rendra votre courte animation relativement longue. Si donc vous voyez un cercle rouge ce déplaçant de gauche à droite et revenir, félicitations ! Vous avez créer votre première animation !

{{Note|Note|Vous avez aussi la possibilité de pré-visualiser votre animation. Pressez le bouton de {{l|Canvas Menu Caret|menu {{Literal|Chevron}} }} situé au coin supérieur gauche de la fenêtre du canevas et choisissez {{c|Fichier|Aperçu}}.}}

Si, pour votre animation, vous préférez mieux utiliser la ligne de commande à la place du menu de rendu, ouvrez alors une fenêtre de terminal, (dans windows faites {{c|Démarrer|Exécuter}}, tapez {{Literal|cmd}} et pressez {{Shortcut|Entrer}}), et déplacer vous dans le répertoire où se trouve votre fichier et tapez quelque-chose comme ceci :

synfig -t gif BasicKnightRider.sif

Un bref message, sans importance pour l'instant, apparaît. En fonction de la vitesse de votre processeur, cela peut prendre un moment avant de voir une ligne telle que celle-ci apparaître :

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

Voilà, c'est fait : vous pouvez visionner l'animation .gif en utilisant Firefox ou un autre programme comme expliqué précédemment.

== Conclusion ==

Il est bien évident que le positionnement d'un objet n'est pas la seule chose qui puisse être modifié avec ''Synfig Studio'', bien d'autres éléments le sont telles que la dimension, la forme, la couleur, etc. ''Synfig'' propose plusieurs fichiers de démonstration qui permettent de creuser plus profondément ces possibilités.

Maintenant, continuons avec le chapitre suivant : {{l|Doc:Adding Layers/fr|Ajouter des Calques}}

Vous pouvez télécharger le projet utilisé : [[File:BasicKnightRider.sifz]]

{{Navigation|Category:Manual|Doc:Adding Layers}}