Difference between revisions of "Doc:Animation Basics/fr"

From Synfig Studio :: Documentation
Jump to: navigation, search
Line 52: Line 52:
  
 
Pour 5 secondes pleines et trois images, par exemple, la notation de la ligne-temps reportera "5s 3f".
 
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]]

Revision as of 18:30, 10 December 2010

Languages Language: 

English • Deutsch • español • suomi • français • italiano • Nederlands • português • română • русский • 中文(中国大陆)‎


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"

  1. Un cercle à gauche.
  2. Un cercle à droite.
  3. 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.

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.

Synfig tut 2.png

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.

Synfig tut 3.png

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 ↵ 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

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.
note end

A ce point de l'ouvrage, vous noterez qu'aucun changement ne s'opère. Activez "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.


Synfig tut 4.png

Jusqu'à maintenant, nous avons introduit trois "étapes" ou "stades" de l'animation. C'est ce qui est nommé "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"0f, 0f, (JMP)".

Keyframes Panel.png

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 "Time" qui, de fait, est le moment de départ ; la "Length" qui semble aller de soi : la longueur ; le "Jump" dont nous allons parler tout de suite ; et la "Description" qui parle d'elle même aussi.

Maintenant nous allons porter notre attention sur les entrées nommées "(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 !

Synfig tut 5.png

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 "Origin". Ces derniers sont nommés Points de Passages (points d'étapes) et sont utilisés pour indiquer le changement des valeurs de ces paramètres temporels.

TimetrackOriginWaypoints.png


Languages Language: 

English • Deutsch • español • suomi • français • italiano • Nederlands • português • română • русский • 中文(中国大陆)‎