Synfig Studio :: Documentation - User contributions [en]

Doc:Animation Basics/fr

2010-12-14T12:49:31Z

Poupoumtralala:

=== 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 nouvel 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 la trame proprement dit) apparaît le menu "caret" ; sélectionnez "Edit -> Propriétés". Une fenêtre des propriétés de la trame va s'ouvrir.
Donnez un nom et une description à votre trame (ou canevas) et ensuite cliquez sur "Appliquer" (dans l'immédiat, ne cliquez pas sur "OK" - nous n'en avons pas fini avec la fenêtre des propriétés). Se mettre sur la table "Time" et assurez-vous d'avoir édité "End Time". Changez "5 s" par "2 s" - ce qui donnera à votre animation une durée de 2 secondes.

[[Image:File Properties Dialog - End Time.png|center|frame|Canvas Properties Dialog]]

Maintenant, cliquez sur "OK" 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. A ce moment là, cliquez sur le rectangle "Low Res" en haut de la fenêtre de trame pour désactiver le mode de visionnage basse résolution - ce qui donnera un rendu plus précis à votre image. En règle générale, d'activer cette option augmente la vitesse de calcul, mais ce n'est pas ce dont nous avons besoin à présent.

[[Image:synfig_tut_2.png|450px|center|thumb]]

Nous avons besoin maintenant d'un cercle. Changez la couleur de remplissage pour du rouge et dessinez un cercle. S'il n'est pas parfait, cela n'a pas d'importance. Vous pouvez le modifier. Activez la case "Outils de transformation" (Transformation Tools) et cliquez sur le cercle. Apparaît une sorte de mode d'édition qu'il est facile de déceler par un petit point vert au milieu de l'image et au rectangle qui l'entoure. Vous pouvez déplacer ce cercle en prenant ce point vert pour lui faire bouger de place.

[[Image:synfig_tut_3.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 parlé 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 n'est pas égale à zéro, votre fenêtre de trame (ou canevas) sur laquelle vous travaillez, présente en bas un curseur de défilement de couleur grise. Vous pouvez cliquer dessus et un petit indicateur orange apparaîtra pour montrer votre position dans le temps. Essayer de cliquer en différent endroit 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" et en pressant {{Shortcut|enter}}, l'indicateur orange se déplacera au milieu de la ligne-temps et en entrant "2s", il se 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.}}
A ce point de l'ouvrage, vous noterez qu'aucun changement ne s'opère. Activez {{Literal|Animate Editing Mode}} en cliquant le bouton vert situé à droite de la ligne-temps grise (si vous avez la version 0.62.02, vous noterez l'apparition d'une marque verte). La trame montrera alors un contour rouge : il vous rappelle que les changements que vous avez opérés modifient dorénavant votre animation.

[[Image:synfig_tut_4.png|450px|center|thumb]]

Jusqu'à maintenant, nous avons introduit trois "étapes" ou "stades" à l'animation. C'est ce qui est nommé "{{l|Keyframe|keyframes}}" ou "image-clé" (Au cas où vous seriez familliés de l'encodage vidéo, il s'agit d'autre chose). Une "image-clé" (keyframe) 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 la fenêtre Keyframes, cliquez dans la petite table dotée d'une petite icône au bas de la fenêtre faite 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, (JMP)}}.

[[Image:Keyframes Panel.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.

=== 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".

=== La liste des "images-clé" ===

La liste des images-clé (Keyframe list) est moins facile d'approche. Elle énumère le {{Literal|Time}} qui, de fait, est le moment de départ ; la {{Literal|Length}} qui semble aller de soi : la longueur ; le {{Literal|Jump}} dont nous allons parler tout de suite ; et la {{Literal|Description}} qui parle d'elle-même aussi.

Maintenant nous allons porter notre attention sur les entrées nommées {{Literal|(JMP)}}. 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'' !

{{l|Image:synfig_tut_5.png|center|frame}}

Merveilleux, n'est-ce pas, quand votre animation marche ! Cliquer à 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 "2s" et de faire se mouvoir en retour votre cercle vers la gauche. Keyframes agit de sorte que ''Synfig'' se souvienne 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 à la fenêtre des paramètres (Params Panel) et en observant le TimeTrack Panel, vous noterez que trois points verts apparaissent sur la droite du paramètre {{Literal|Origin}}. Ces derniers sont nommés {{L|Waypoints}} (points d'étapes) et sont utilisés pour indiquer le changement des valeurs de ces paramètres temporels.

[[Image:TimetrackOriginWaypoints.png|thumb|center|450px]]

=== Rendu de votre animation ===

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

Procédons à la première. Quittez le mode "animation" 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 "trame" ou "canevas" (le bouton "caret" au coin supérieur droit) et sélectionnez {{c|File|Render}}. Au même endroit où vous avez sauvegardé "BasicKnightRider.sifz", modifiez le nom du fichier par "BasicKnightRider.gif" en choisissant l'option de format "gif" au lieu de "Auto" et cliquez ensuite sur "Render". 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 "File rendered successfully" : votre fichier a été correctement rendu.

[[Image:synfig_tut_6.png|618px|thumb|center|Calling "Render" from menu in 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.}}

{{Note|Note|Vous avez aussi la possibilité de pré-voir votre animation. Pressez le bouton de menu "caret" situé au coin supérieur gauche de la fenêtre de trame et choisissez {{c|File|Preview}}.}}

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 et faites {{c|Start|Run}}, tapez {{Literal|cmd}} and pressez {{Shortcut|enter}}), modifiez le répertoire où vous avez mis 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 apparaitre :

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

Voilà, c'est fait : vous pouvez visionner l'animation .gif en utilisant Firefox ou un des autres programmes énumérés plus avant.

=== Conclusion ===

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

Doc:Animation Basics/fr

2010-12-14T11:58:51Z

Poupoumtralala:

=== 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 nouvel fichier est automatiquement ouvert au démarrage. Cliquer sur le menu "caret" (entre les règles horizontales et verticales, en haut à gauche, au coin de la trame) et sélectionnez "Edit -> Propriétés". Une fenêtre des propriétés de la trame va s'ouvrir.
Donnez un nom et une description à votre trame (ou canevas) et ensuite cliquez sur "Appliquer" (dans l'immédiat, ne cliquez pas sur "OK" - nous n'en avons pas fini avec la fenêtre des propriétés). Se mettre sur la table "Time" et assurez-vous d'avoir édité "End Time". Changez "5 s" par "2 s" - ce qui donnera à votre animation une durée de 2 secondes.

[[Image:File Properties Dialog - End Time.png|center|frame|Canvas Properties Dialog]]

Maintenant, cliquez sur "OK" 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. A ce moment là, cliquez sur le rectangle "Low Res" en haut de la fenêtre de trame pour désactiver le mode de visionnage basse résolution - ce qui donnera un rendu plus précis à votre image. En règle générale, d'activer cette option augmente la vitesse de calcul, mais ce n'est pas ce dont nous avons besoin à présent.

[[Image:synfig_tut_2.png|450px|center|thumb]]

Nous avons besoin maintenant d'un cercle. Changez la couleur de remplissage pour du rouge et dessinez un cercle. S'il n'est pas parfait, cela n'a pas d'importance. Vous pouvez le modifier. Activez la case "Outils de transformation" (Transformation Tools) et cliquez sur le cercle. Apparaît une sorte de mode d'édition qu'il est facile de déceler par un petit point vert au milieu de l'image et au rectangle qui l'entoure. Vous pouvez déplacer ce cercle en prenant ce point vert pour lui faire bouger de place.

[[Image:synfig_tut_3.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 parlé 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 n'est pas égale à zéro, votre fenêtre de trame (ou canevas) sur laquelle vous travaillez, présente en bas un curseur de défilement de couleur grise. Vous pouvez cliquer dessus et un petit indicateur orange apparaîtra pour montrer votre position dans le temps. Essayer de cliquer en différent endroit 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" et en pressant {{Shortcut|enter}}, l'indicateur orange se déplacera au milieu de la ligne-temps et en entrant "2s", il se 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.}}
A ce point de l'ouvrage, vous noterez qu'aucun changement ne s'opère. Activez {{Literal|Animate Editing Mode}} en cliquant le bouton vert situé à droite de la ligne-temps grise (si vous avez la version 0.62.02, vous noterez l'apparition d'une marque verte). La trame montrera alors un contour rouge : il vous rappelle que les changements que vous avez opérés modifient dorénavant votre animation.

[[Image:synfig_tut_4.png|450px|center|thumb]]

Jusqu'à maintenant, nous avons introduit trois "étapes" ou "stades" à l'animation. C'est ce qui est nommé "{{l|Keyframe|keyframes}}" ou "image-clé" (Au cas où vous seriez familliés de l'encodage vidéo, il s'agit d'autre chose). Une "image-clé" (keyframe) 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 la fenêtre Keyframes, cliquez dans la petite table dotée d'une petite icône au bas de la fenêtre faite 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, (JMP)}}.

[[Image:Keyframes Panel.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.

=== 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".

=== La liste des "images-clé" ===

La liste des images-clé (Keyframe list) est moins facile d'approche. Elle énumère le {{Literal|Time}} qui, de fait, est le moment de départ ; la {{Literal|Length}} qui semble aller de soi : la longueur ; le {{Literal|Jump}} dont nous allons parler tout de suite ; et la {{Literal|Description}} qui parle d'elle-même aussi.

Maintenant nous allons porter notre attention sur les entrées nommées {{Literal|(JMP)}}. 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'' !

{{l|Image:synfig_tut_5.png|center|frame}}

Merveilleux, n'est-ce pas, quand votre animation marche ! Cliquer à 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 "2s" et de faire se mouvoir en retour votre cercle vers la gauche. Keyframes agit de sorte que ''Synfig'' se souvienne 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 à la fenêtre des paramètres (Params Panel) et en observant le TimeTrack Panel, vous noterez que trois points verts apparaissent sur la droite du paramètre {{Literal|Origin}}. Ces derniers sont nommés {{L|Waypoints}} (points d'étapes) et sont utilisés pour indiquer le changement des valeurs de ces paramètres temporels.

[[Image:TimetrackOriginWaypoints.png|thumb|center|450px]]

=== Rendu de votre animation ===

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

Procédons à la première. Quittez le mode "animation" 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 "trame" ou "canevas" (le bouton "caret" au coin supérieur droit) et sélectionnez {{c|File|Render}}. Au même endroit où vous avez sauvegardé "BasicKnightRider.sifz", modifiez le nom du fichier par "BasicKnightRider.gif" en choisissant l'option de format "gif" au lieu de "Auto" et cliquez ensuite sur "Render". 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 "File rendered successfully" : votre fichier a été correctement rendu.

[[Image:synfig_tut_6.png|618px|thumb|center|Calling "Render" from menu in 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.}}

{{Note|Note|Vous avez aussi la possibilité de pré-voir votre animation. Pressez le bouton de menu "caret" situé au coin supérieur gauche de la fenêtre de trame et choisissez {{c|File|Preview}}.}}

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 et faites {{c|Start|Run}}, tapez {{Literal|cmd}} and pressez {{Shortcut|enter}}), modifiez le répertoire où vous avez mis 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 apparaitre :

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

Voilà, c'est fait : vous pouvez visionner l'animation .gif en utilisant Firefox ou un des autres programmes énumérés plus avant.

=== Conclusion ===

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

Doc:Flower Animation/fr

2010-12-13T13:51:46Z

Poupoumtralala:

=== Éléments de base ===

Dans ce tutorial, nous allons apprendre comment créer une animation simple consistant à faire grandir une fleur.

[[Image:flower_0.png|right|frame]] Ouvrez ''Synfig Studio'' : une nouvelle animation se crée. Si ''Synfig Studio'' est déjà ouvert, faites {{c|File|New}} dans Fichier.

Nous avons d'abord besoin de créer un dégradé comme arrière-plan.

Doc:Flower Animation/fr

2010-12-13T13:51:16Z

Poupoumtralala:

=== Éléments de base ===

Dans ce tutorial, nous allons apprendre comment créer une animation simple consistant à faire grandir une fleur.

[[Image:flower_0.png|right|frame]] Ouvrez Synfig Studio : une nouvelle animation se crée. Si Synfig Studio est déjà ouvert, faites {{c|File|New}} dans Fichier.

Nous avons d'abord besoin de créer un dégradé comme arrière-plan.

Doc:Flower Animation/fr

2010-12-13T13:50:09Z

Poupoumtralala: Created page with '=== Éléments de base === Dans ce tutorial, nous allons apprendre comment créer une animation simple consistant à faire grandir une fleur. frame…'

=== Éléments de base ===

Dans ce tutorial, nous allons apprendre comment créer une animation simple consistant à faire grandir une fleur.

[[Image:flower_0.png|right|frame]] Ouvrez Synfig Studio : une nouvelle animation se crée. Si Synfig Studio est déjà ouvert, faites {{c|File|New}} dans Fichier.

Nous avons d'abord besoin de créer un arrière-plan.

Doc:Animation Basics

2010-12-10T17:36:43Z

Poupoumtralala:

{{Title|Animation Basics}}
{{Navigation|Category:Manual|Doc:Adding Layers}}
[[Category:Manual]]
[[Category:Tutorials]]
[[Category:Tutorials Basic]]
[[Category:Updated]]


== Introduction ==

Creating an animation in Synfig Studio is really easy. It basically means to change a drawing — you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.

Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':

# The circle is on the left.
# The circle is on the right.
# The circle is back on the left.

== Setting up the workspace ==

Let's do it. Start Synfig Studio. New file is automatically created at the start. Click the 'caret' menu (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. A canvas properties dialog will appear.

Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet — we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" — that will make our animation 2 seconds long.

[[Image:File Properties Dialog - End Time.png|center|frame|Canvas Properties Dialog]]

Now click "OK", and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. Also, uncheck the {{Literal|Low Res}} checkbox at the top of the canvas window to disable low resolution view mode - that will make your image look sharper. Generally, having that option enabled increases canvas redraw speed, but that's not what we need now.

[[Image:synfig_tut_2.png|450px|center|thumb]]

Now we need a circle. Change the fill color to red, and create a circle. It doesn't matter if it's not perfect: You can edit it. Activate the Transform Tool, and click the circle. It will go into a sort of editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the red circle by grabbing it on its green dot in the middle.

[[Image:synfig_tut_3.png|450px|center|thumb]]

These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.

== Adding movement ==

In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) got a grey time slider at the bottom. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider.

{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}
You may notice nothing changes on the canvas at this point. Switch to {{Literal|Animate Editing Mode}} by clicking the green dot to the right of the gray time slider (if you have version 0.62.02, you may see a green checkmark). The canvas will display a red outline; it reminds you that changes to your objects now affect your animation.

[[Image:synfig_tut_4.png|450px|center|thumb]]

Previously, three "steps" or "stages" were mentioned. These are represented by so-called "{{l|Keyframe|keyframes}}". (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.

Go to the Keyframes panel — click on the little tab with the small key icon in the bottom window — to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.

[[Image:Keyframes Panel.png|center|frame]]

Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.

[[Image:Keyframes Panel 2.png|center|frame]]

== The s's and f's: Understanding the Timeline ==
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).

By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.

For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".

== The Keyframe List ==

The keyframe list is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory.

Now, you might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.

You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!

{{l|Image:synfig_tut_5.png|center|frame}}

Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.

Notice, that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Params Panel, and look at the Timetrack Panel you'll notice that three green dots appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they are used to indicate changes of parameter values over time.

[[Image:TimetrackOriginWaypoints.png|thumb|center|450px]]

== Rendering your animation ==

Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".

Let's try the first way. Leave the animate editing mode by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ("caret" button in the upper left corner) and select {{c|File|Render}}. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose "gif" target format instead of "Auto", then click Render. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".

[[Image:synfig_tut_6.png|618px|thumb|center|Calling "Render" from menu in Synfig Studio]]

{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimise the palette for the image.}}
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!

{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:

synfig -t gif BasicKnightRider.sif

A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

Then you are done and can view your animated gif using Firefox or another program as mentioned above.

== Conclusion ==

Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.

Doc:Animation Basics/fr

2010-12-10T17:27:57Z

Poupoumtralala: :+))

=== 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 nouvel fichier est automatiquement ouvert au démarrage. Cliquer sur le menu "caret" (entre les règles horizontales et verticales, en haut à gauche, au coin de la trame) et sélectionnez "Edit -> Propriétés". Une fenêtre des propriétés de la trame va s'ouvrir.
Donnez un nom et une description à votre trame (ou canevas) et ensuite cliquez sur "Appliquer" (dans l'immédiat, ne cliquez pas sur "OK" - nous n'en avons pas fini avec la fenêtre des propriétés). Se mettre sur la table "Time" et assurez-vous d'avoir édité "End Time". Changez "5 s" par "2 s" - ce qui donnera à votre animation une durée de 2 secondes.

[[Image:File Properties Dialog - End Time.png|center|frame|Canvas Properties Dialog]]

Maintenant, cliquez sur "OK" 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. A ce moment là, cliquez sur le rectangle "Low Res" en haut de la fenêtre de trame pour désactiver le mode de visionnage basse résolution - ce qui donnera un rendu plus précis à votre image. En règle générale, d'activer cette option augmente la vitesse de calcul, mais ce n'est pas ce dont nous avons besoin à présent.

[[Image:synfig_tut_2.png|450px|center|thumb]]

Nous avons besoin maintenant d'un cercle. Changez la couleur de remplissage pour du rouge et dessinez un cercle. S'il n'est pas parfait, cela n'a pas d'importance. Vous pouvez le modifier. Activez la case "Outils de transformation" (Transformation Tools) et cliquez sur le cercle. Apparaît une sorte de mode d'édition qu'il est facile de déceler par un petit point vert au milieu de l'image et au rectangle qui l'entoure. Vous pouvez déplacer ce cercle en prenant ce point vert pour lui faire bouger de place.

[[Image:synfig_tut_3.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 parlé 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 n'est pas égale à zéro, votre fenêtre de trame (ou canevas) sur laquelle vous travaillez, présente en bas un curseur de défilement de couleur grise. Vous pouvez cliquer dessus et un petit indicateur orange apparaîtra pour montrer votre position dans le temps. Essayer de cliquer en différent endroit 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" et en pressant {{Shortcut|enter}}, l'indicateur orange se déplacera au milieu de la ligne-temps et en entrant "2s", il se 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.}}
A ce point de l'ouvrage, vous noterez qu'aucun changement ne s'opère. Activez {{Literal|Animate Editing Mode}} en cliquant le bouton vert situé à droite de la ligne-temps grise (si vous avez la version 0.62.02, vous noterez l'apparition d'une marque verte). La trame montrera alors un contour rouge : il vous rappelle que les changements que vous avez opérés modifient dorénavant votre animation.

[[Image:synfig_tut_4.png|450px|center|thumb]]

Jusqu'à maintenant, nous avons introduit trois "étapes" ou "stades" à l'animation. C'est ce qui est nommé "{{l|Keyframe|keyframes}}" ou "image-clé" (Au cas où vous seriez familliés de l'encodage vidéo, il s'agit d'autre chose). Une "image-clé" (keyframe) 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 la fenêtre Keyframes, cliquez dans la petite table dotée d'une petite icône au bas de la fenêtre faite 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, (JMP)}}.

[[Image:Keyframes Panel.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.

=== 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'à 24 après quoi commence une nouvelle seconde où la marque d'image commence à 0 (ce qui fait qu'il y a 25 images en tout comprises dans la seconde).

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

=== La liste des "images-clé" ===

La liste des images-clé (Keyframe list) est moins facile d'approche. Elle énumère le {{Literal|Time}} qui, de fait, est le moment de départ ; la {{Literal|Length}} qui semble aller de soi : la longueur ; le {{Literal|Jump}} dont nous allons parler tout de suite ; et la {{Literal|Description}} qui parle d'elle-même aussi.

Maintenant nous allons porter notre attention sur les entrées nommées {{Literal|(JMP)}}. 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'' !

{{l|Image:synfig_tut_5.png|center|frame}}

Merveilleux, n'est-ce pas, quand votre animation marche ! Cliquer à 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 "2s" et de faire se mouvoir en retour votre cercle vers la gauche. Keyframes agit de sorte que ''Synfig'' se souvienne 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 à la fenêtre des paramètres (Params Panel) et en observant le TimeTrack Panel, vous noterez que trois points verts apparaissent sur la droite du paramètre {{Literal|Origin}}. Ces derniers sont nommés {{L|Waypoints}} (points d'étapes) et sont utilisés pour indiquer le changement des valeurs de ces paramètres temporels.

[[Image:TimetrackOriginWaypoints.png|thumb|center|450px]]

=== Rendu de votre animation ===

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

Procédons à la première. Quittez le mode "animation" 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 "trame" ou "canevas" (le bouton "caret" au coin supérieur droit) et sélectionnez {{c|File|Render}}. Au même endroit où vous avez sauvegardé "BasicKnightRider.sifz", modifiez le nom du fichier par "BasicKnightRider.gif" en choisissant l'option de format "gif" au lieu de "Auto" et cliquez ensuite sur "Render". 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 "File rendered successfully" : votre fichier a été correctement rendu.

[[Image:synfig_tut_6.png|618px|thumb|center|Calling "Render" from menu in 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.}}

{{Note|Note|Vous avez aussi la possibilité de pré-voir votre animation. Pressez le bouton de menu "caret" situé au coin supérieur gauche de la fenêtre de trame et choisissez {{c|File|Preview}}.}}

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 et faites {{c|Start|Run}}, tapez {{Literal|cmd}} and pressez {{Shortcut|enter}}), modifiez le répertoire où vous avez mis 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 apparaitre :

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

Voilà, c'est fait : vous pouvez visionner l'animation .gif en utilisant Firefox ou un des autres programmes énumérés plus avant.

=== Conclusion ===

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

Doc:Animation Basics/fr

2010-12-10T17:27:08Z

Poupoumtralala:

=== 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 nouvel fichier est automatiquement ouvert au démarrage. Cliquer sur le menu "caret" (entre les règles horizontales et verticales, en haut à gauche, au coin de la trame) et sélectionnez "Edit -> Propriétés". Une fenêtre des propriétés de la trame va s'ouvrir.
Donnez un nom et une description à votre trame (ou canevas) et ensuite cliquez sur "Appliquer" (dans l'immédiat, ne cliquez pas sur "OK" - nous n'en avons pas fini avec la fenêtre des propriétés). Se mettre sur la table "Time" et assurez-vous d'avoir édité "End Time". Changez "5 s" par "2 s" - ce qui donnera à votre animation une durée de 2 secondes.

[[Image:File Properties Dialog - End Time.png|center|frame|Canvas Properties Dialog]]

Maintenant, cliquez sur "OK" 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. A ce moment là, cliquez sur le rectangle "Low Res" en haut de la fenêtre de trame pour désactiver le mode de visionnage basse résolution - ce qui donnera un rendu plus précis à votre image. En règle générale, d'activer cette option augmente la vitesse de calcul, mais ce n'est pas ce dont nous avons besoin à présent.

[[Image:synfig_tut_2.png|450px|center|thumb]]

Nous avons besoin maintenant d'un cercle. Changez la couleur de remplissage pour du rouge et dessinez un cercle. S'il n'est pas parfait, cela n'a pas d'importance. Vous pouvez le modifier. Activez la case "Outils de transformation" (Transformation Tools) et cliquez sur le cercle. Apparaît une sorte de mode d'édition qu'il est facile de déceler par un petit point vert au milieu de l'image et au rectangle qui l'entoure. Vous pouvez déplacer ce cercle en prenant ce point vert pour lui faire bouger de place.

[[Image:synfig_tut_3.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 parlé 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 n'est pas égale à zéro, votre fenêtre de trame (ou canevas) sur laquelle vous travaillez, présente en bas un curseur de défilement de couleur grise. Vous pouvez cliquer dessus et un petit indicateur orange apparaîtra pour montrer votre position dans le temps. Essayer de cliquer en différent endroit 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" et en pressant {{Shortcut|enter}}, l'indicateur orange se déplacera au milieu de la ligne-temps et en entrant "2s", il se 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.}}
A ce point de l'ouvrage, vous noterez qu'aucun changement ne s'opère. Activez {{Literal|Animate Editing Mode}} en cliquant le bouton vert situé à droite de la ligne-temps grise (si vous avez la version 0.62.02, vous noterez l'apparition d'une marque verte). La trame montrera alors un contour rouge : il vous rappelle que les changements que vous avez opérés modifient dorénavant votre animation.

[[Image:synfig_tut_4.png|450px|center|thumb]]

Jusqu'à maintenant, nous avons introduit trois "étapes" ou "stades" à l'animation. C'est ce qui est nommé "{{l|Keyframe|keyframes}}" ou "image-clé" (Au cas où vous seriez familliés de l'encodage vidéo, il s'agit d'autre chose). Une "image-clé" (keyframe) 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 la fenêtre Keyframes, cliquez dans la petite table dotée d'une petite icône au bas de la fenêtre faite 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, (JMP)}}.

[[Image:Keyframes Panel.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.

=== 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'à 24 après quoi commence une nouvelle seconde où la marque d'image commence à 0 (ce qui fait qu'il y a 25 images en tout comprises dans la seconde).

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

=== La liste des "images-clé" ===

La liste des images-clé (Keyframe list) est moins facile d'approche. Elle énumère le {{Literal|Time}} qui, de fait, est le moment de départ ; la {{Literal|Length}} qui semble aller de soi : la longueur ; le {{Literal|Jump}} dont nous allons parler tout de suite ; et la {{Literal|Description}} qui parle d'elle-même aussi.

Maintenant nous allons porter notre attention sur les entrées nommées {{Literal|(JMP)}}. 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'' !

{{l|Image:synfig_tut_5.png|center|frame}}

Merveilleux, n'est-ce pas, quand votre animation marche ! Cliquer à 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 "2s" et de faire se mouvoir en retour votre cercle vers la gauche. Keyframes agit de sorte que ''Synfig'' se souvienne 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 à la fenêtre des paramètres (Params Panel) et en observant le TimeTrack Panel, vous noterez que trois points verts apparaissent sur la droite du paramètre {{Literal|Origin}}. Ces derniers sont nommés {{L|Waypoints}} (points d'étapes) et sont utilisés pour indiquer le changement des valeurs de ces paramètres temporels.

[[Image:TimetrackOriginWaypoints.png|thumb|center|450px]]

=== Rendu de votre animation ===

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

Procédons à la première. Quittez le mode "animation" 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 "trame" ou "canevas" (le bouton "caret" au coin supérieur droit) et sélectionnez {{c|File|Render}}. Au même endroit où vous avez sauvegardé "BasicKnightRider.sifz", modifiez le nom du fichier par "BasicKnightRider.gif" en choisissant l'option de format "gif" au lieu de "Auto" et cliquez ensuite sur "Render". 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 "File rendered successfully" : votre fichier a été correctement rendu.

[[Image:synfig_tut_6.png|618px|thumb|center|Calling "Render" from menu in 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.}}

{{Note|Note|Vous avez aussi la possibilité de pré-voir votre animation. Pressez le bouton de menu "caret" situé au coin supérieur gauche de la fenêtre de trame et choisissez {{c|File|Preview}}.}}

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 et faites {{c|Start|Run}}, tapez {{Literal|cmd}} and pressez {{Shortcut|enter}}), modifiez le répertoire où vous avez mis 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 apparaitre :

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

Voilà, c'est fait : vous pouvez visionner l'animation .gif en utilisant Firefox ou un des autres programmes énumérés plus avant.

== Conclusion ==

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

Doc:Animation Basics/fr

2010-12-10T17:07:25Z

Poupoumtralala: oO°°° !

== 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'état initial et le dernier état 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 "stages"

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

== Préparation de l'ouvrage ==

Commençons. Ouvrez Synfig Studio. Un nouvel fichier est automatiquement ouvert au démarrage. Cliquer sur le menu "caret" (entre les règles horizontales et verticales, en haut à gauche, au coin de la trame) et sélectionnez "Edit -> Propriétés". Une fenêtre des propriétés de la trame va s'ouvrir.
Donnez un nom et une description à votre trame (ou canevas) et ensuite cliquez sur "Appliquer" (dans l'immédiat, ne cliquez pas sur "OK" - nous n'en avons pas fini avec la fenêtre des propriétés). Se mettre sur la table "Time" et assurez-vous d'avoir édité "End Time". Changez "5 s" par "2 s" - ce qui donnera à votre animation une durée de 2 secondes.

[[Image:File Properties Dialog - End Time.png|center|frame|Canvas Properties Dialog]]

Maintenant, cliquez sur "OK" 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 de la trame. A ce moment là, cliquez sur le rectangle "Low Res" en haut de la fenêtre de trame pour désactiver le mode de visionnage basse résolution - ce qui donnera un rendu plus précis de votre image. En règle générale, d'activer cette option augmente la vitesse de calcul, mais ce n'est pas ce dont nous avons besoin à présent.

[[Image:synfig_tut_2.png|450px|center|thumb]]

Nous avons besoin maintenant d'un cercle. Changez la couleur de remplissage pour du rouge et dessinez un cercle. S'il n'est pas parfait, cela n'a pas d'importance. Vous pouvez l'éditer. Activez la case "Outils de transformation" (Transformation Tools) et cliquez sur le cercle. Apparaît une sorte de mode d'édition qu'il est facile de déceler par un petit point vert au milieu de l'image et au rectangle qui l'entoure. Vous pouvez déplacer ce cercle en prenant ce point vert pour lui faire bouger de place.

[[Image:synfig_tut_3.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 parlé 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 n'est pas égale à zéro, votre fenêtre de trame (ou canevas) sur laquelle vous travaillez, présente en bas un curseur de défilement de couleur grise. Vous pouvez cliquer dessus et un petit indicateur orange apparaîtra pour montrer votre position dans le temps. Essayer de cliquer en différent endroit du cruseur-temps et observez que le champ d'entrée à gauche de ce curseur se modifie en des valeurs telles que "12f", "1s 15f" et en pressant {{Shortcut|enter}}, l'indicateur orange se déplacera au milieu du curseur-temps et en entrant "2s", il se déplacera à la fin de la ligne du curseur.

{{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.}}
A ce point de l'ouvrage, vous noterez qu'aucun changement ne s'opère. Activez {{Literal|Animate Editing Mode}} en cliquant le bouton vert situé à droite de la ligne-temps grise (si vous avez la version 0.62.02, vous noterez l'apparition d'une marque verte). La trame montrera alors un contour rouge : il vous rappelle que les changements que vous avez opérés modifient dorénavant votre animation.

[[Image:synfig_tut_4.png|450px|center|thumb]]

Jusqu'à maintenant, nous avons introduit trois "étapes" ou "stades" de l'animation. C'est ce qui est nommé "{{l|Keyframe|keyframes}}" ou "image-clé" (Au cas où vous seriez familliés de l'encodage vidéo, il s'agit d'autre chose). Une "image-clé" (keyframe) 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 la fenêtre Keyframes, cliquez dans la petite table dotée d'une petite icône au bas de la fenêtre faite 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, (JMP)}}.

[[Image:Keyframes Panel.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.

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

A présent, vous avez dû imaginer 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'à 24 après quoi commence une nouvelle seconde où la marque d'image commence à 0 (ce qui fait qu'il y a 25 images en tout comprises dans la seconde).

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

== La liste des "images-clé" ==

La liste des images-clé (Keyframe list) est moins facile d'approche. Elle énumère {{Literal|Time}} qui, de fait, est le moment de départ ; la {{Literal|Length}} qui semble aller de soi : la longueur ; le {{Literal|Jump}} dont nous allons parler tout de suite ; et la {{Literal|Description}} qui parle d'elle même aussi.

Maintenant nous allons porter notre attention sur les entrées nommées {{Literal|(JMP)}}. en fait, elles sont des liens, excatement à 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é dans 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 !

{{l|Image:synfig_tut_5.png|center|frame}}

Merveilleux, n'est-ce pas, quand votre animation marche ! Cliquer arbitrairement 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és d'aller à la dernière image "2s" et de faire se mouvoir en retour votre cercle vers la gauche. Keyframes fait que Synfig se souvient des étapes initialement positionnées dans le 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 à la fenêtre des paramètres (Params Panel) et observez le TimeTrack Panel, vous noterez que trois points verts apparaissent sur la droite du paramètre {{Literal|Origin}}. Ces derniers sont nommés {{L|Waypoints}} (points d'étapes) et sont utilisés pour indiquer le changement des valeurs de ces paramètres temporels.

[[Image:TimetrackOriginWaypoints.png|thumb|center|450px]]

== Rendu de votre animation ==

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

Procédons à la première. Quittez le mode "animation" 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 "trame" ou "canevas" (le bouton "caret" au coin supérieur droit) et sélectionnez {{c|File|Render}}. Au même endroit où vous avez sauvegardé "BasicKnightRider.sifz", modifiez le nom du fichier par "BasicKnightRider.gif" en choisissant l'option de format "gif" au lieu de "Auto" et cliquez ensuite sur "Render". 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 "File rendered successfully" : votre fichier a été correctement rendu.

[[Image:synfig_tut_6.png|618px|thumb|center|Calling "Render" from menu in 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.}}

{{Note|Note|Vous avez aussi la possibilité de pré-voir votre animation. Pressez le bouton de menu "caret" situé au coin supérieur gauche de la fenêtre de trame et choisissez {{c|File|Preview}}.}}
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 et faites {{c|Start|Run}}, tapez {{Literal|cmd}} and pressez {{Shortcut|enter}}), modifiez le répertoire où vosu avez mis 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 apparaitre :

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

Voilà : c'est fait : vous pouvez visionner l'animation .gif en utilisant Firefox ou un autre programme énuméré plus avant.

== Conclusion ==

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

Doc:Animation Basics/fr

2010-12-10T16:30:58Z

Poupoumtralala:

Doc:Animation Basics/fr

2010-12-10T16:04:30Z

Poupoumtralala:

Doc:Animation Basics/fr

2010-12-10T15:54:48Z

Poupoumtralala:

Doc:Animation Basics/fr

2010-12-10T15:42:43Z

Poupoumtralala:

Doc:Animation Basics/fr

2010-12-10T15:04:04Z

Poupoumtralala:

Doc:Animation Basics/fr

2010-12-10T15:03:18Z

Poupoumtralala:

Doc:Animation Basics/fr

2010-12-10T14:57:30Z

Poupoumtralala: Created page with '== 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'état ini…'