Synfig Studio :: Documentation - User contributions [en]

User:Mad0

2011-11-16T18:28:22Z

Mad0: Animated Grass

== How it works ? ==

It's a mask effect.
The grass is basically a Noise Gradient.
The bent grass is the same Noise Gradient, with a Rotate Layer added.
The canvas with grass and Rotate Layer encapsulated is blended onto a BLine Region.

[[File:tuto00.jpg]]

[[File:tuto0.jpg]]

== The grass ==

The first thing to do is prettier grass.

1 - We draw the floor with a '''BLine Region'''.

[[File:tuto1.jpg]]

2 - '''Noise Gradient''' is added above. It's done with transparency.

[[File:tuto2.jpg]]

3 - '''Noise Distort''' will create the fine lines of the grass.

[[File:tuto3.jpg]]

4 - For a less uniform color, we add a '''Noise Gradient''' with a Blend Method on '''COLOR'''. It's just a slight color effect, so '''the Amount is very low'''.

[[File:tuto4.jpg]]

== Cut-out of the grass canvas ==

User:Mad0

2011-11-16T18:24:06Z

Mad0: Created page with "= Animated Grass = == How it works ? == It's a mask effect. The grass is basically a Noise Gradient. The bent grass is the same Noise Gradient, with a Rotate Layer added. The ..."

= Animated Grass =

== How it works ? ==

It's a mask effect.
The grass is basically a Noise Gradient.
The bent grass is the same Noise Gradient, with a Rotate Layer added.
The canvas with grass and Rotate Layer encapsulated is blended onto a BLine Region.

[[File:tuto00.jpg]]

[[File:tuto0.jpg]]

== The grass ==

The first thing to do is prettier grass.

1 - We draw the floor with a '''BLine Region'''.

[[File:tuto1.jpg]]

2 - '''Noise Gradient''' is added above. It's done with transparency.

[[File:tuto2.jpg]]

3 - '''Noise Distort''' will create the fine lines of the grass.

[[File:tuto3.jpg]]

4 - For a less uniform color, we add a '''Noise Gradient''' with a Blend Method on '''COLOR'''. It's just a slight color effect, so '''the Amount is very low'''.

[[File:tuto4.jpg]]

== Cut-out of the grass canvas ==

File:Tuto4.jpg

2011-11-16T18:12:00Z

Mad0:

File:Tuto3.jpg

2011-11-16T17:55:45Z

Mad0:

File:Tuto2.jpg

2011-11-16T17:42:02Z

Mad0:

File:Tuto1.jpg

2011-11-16T17:33:39Z

Mad0:

File:Tuto0.jpg

2011-11-16T17:02:54Z

Mad0:

File:Tuto00.jpg

2011-11-16T16:55:18Z

Mad0:

File:Bent grass.jpg

2011-11-16T16:33:17Z

Mad0:

File:Vertical grass.jpg

2011-11-16T16:28:43Z

Mad0:

Doc:Following a Spline/fr

2010-05-20T15:33:51Z

Mad0:

{{Title|Suivre une BLine}}
{{Category|Tutorials}}
{{Category|Tutorials Advanced}}


== 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|Following a BLine#Create the Layers|Tracer une ligne courbe et une flèche}}
* {{l|Following a BLine#Make the Arrow Move and Rotate|Lier l'origine de la flèche et sa rotation}} à la Bine 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 ===

File > New

=== Créer des Calques ===

Sélectionnez l'outil BLine
[[File:Bline_tool.png]]

Cochez simplement la case Outline (créer un contour).

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

Cliquez sur de nouveau sur l'icône BLine en bas à gauche de la "Palette d'outils" pour créer la courbe (BLine).

Ensuite, toujours avec cet outil, cochez les cases Outline (créer un contour) et Fill (créer une région) de la palette d'options.
[[File:Tool_Options.png]]

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

Passez à l'outil "Normal".

Sélectionnez le contour, glissez la souris pour sélectionner toutes les poignées (Ducks) sauf la poignée (Duck) verte de position.

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

Ajoutez un calque de rotation (New Layer -> Transform -> Rotate) au-dessus des calques de contour et de région.

Encapsulez 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 encapsulé (Inline Canvas) contenant la flèche et le calque de rotation.

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

Dépliez le calque encapsulé (Inline Canvas) dans le panneau Calques, et sélectionnez la ligne "Inline Canvas".

Sélectionnez sa position - poignée (Duck) verte en cliquant dessus dans la fenêtre principale (Canvas Window).

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 + touche contrôle).

Maintenant, sélectionnez dans la fenêtre principale (Canvas Window) la poignée (Duck) bleue en appuyant sur contrôle + bouton gauche de la souris .

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

Maintenant il faut ajouter à la sélection le calque de la courbe BLine (qui devrait être le dernier calque dans le panneau Calques) en cliquant dessus tout en appuyant sur "contrôle".

Dans la fenêtre principale (canvas Window) , clic droit sur la ligne pointillée de la courbe (BLine). Ne cliquez pas sur les poignées (Ducks), mais sur le pointillé entre les poignées (Ducks).

Dans le menu contextuel qui apparaît, sélectionnez "Lien vers BLine" (Link to BLine).
[[File:Link_to_Bline.png]]

La flèche encapsulée devrait se placer de telle sorte que la position de la poignée (Duck) verte soit sur la courbe (BLine), et elle devrait se tourner de manière à ce qu'elle pointe le long de la courbe (BLine).

Cliquez sur le calque d'encapsulation pour le sélectionner lui seul, et faites glisser sa poignée (Duck) verte dans la fenêtre. Vous verrez que la poignée est liée à la courbe (BLine), 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 "animer le mode d'édition" en cliquant sur l'icône en bas à droite de la fenêtre principale (Canvas Window).

Au point 0f dans le temps, faites glisser la position de la poignée verte du calque encapsulé à une extrémité de la courbe (BLine).

Au point 5s dans le temps, faites glisser la poignée à l'autre bout de la courbe (BLine).

Essayez Fichier> Aperçu ou Affichage> Jouer pour voir l'animation (File > Preview or View > Play).

== Resultats ==

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

== Commentaire sur le tutoriel ==

à noter :La flèche prend le même temps pour se déplacer le long de chaque segment de la courbe (BLine). 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).

Il serait bon d'avoir la possibilité de faire le déplacement de la flèche à une vitesse constante sur toute la longueur de la courbe.

Doc:Following a Spline/fr

2010-05-16T17:44:34Z

Mad0:

{{Title|Suivre une Bline}}
{{Category|Tutorials}}
{{Category|Tutorials Advanced}}


Cette page est en cours de traduction, soyez patient.
== 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|Following a BLine#Create the Layers|Tracer une ligne courbe et une flèche}}
* {{l|Following a BLine#Make the Arrow Move and Rotate|Lier l'origine de la flèche et sa rotation}} à la Bline 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 ===

File > New

=== Créer des Calques ===

Sélectionnez l'outil Bline
[[File:Bline_tool.png]]

Cochez simplement la case Outline (créer un contour)

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

Cliquez sur de nouveau sur l'icône Bline en bas à gauche de la "Palette d'outils" pour créer la courbe (Bline).

Ensuite, toujours avec cet outil, cochez les cases Outline (créer un contour) et Fill (créer une région) de la palette d'options.
[[File:Tool_Options.png]]

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

Passez à l'outil "Normal"

Sélectionnez le contour, glissez la souris pour sélectionner tous les points de contrôle (Ducks) sauf le point de contrôle (Duck) vert de position.

Déplacez les points de contrôles (Ducks) afin que la flèche soit centrée autour de la position du point de contrôle (Duck) vert

Ajoutez un calque de rotation (New Layer -> Transform -> Rotate) au-dessus des calques de contour et de région

Encapsulez 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 encapsulé (Inline Canvas) contenant la flèche et le calque de rotation

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

Dépliez le calque encapsulé (Inline Canvas) dans le panneau Calques, et sélectionnez la ligne "Inline Canvas"

Sélectionnez sa position - point de contrôle (Duck) vert en cliquant dessus dans la fenêtre principale (Canvas Window)

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 + touche contrôle)

Maintenant, sélectionnez dans la fenêtre principale (Canvas Window) le point de contrôle (Duck) bleu en appuyant sur contrôle + bouton gauche de la souris

Eh bien, maintenant nous avons sélectionné deux calques et un point de contrôle (Duck) dans chacun.

Maintenant il faut ajouter à la sélection le calque de la courbe Bline (qui devrait être le dernier calque dans le panneau Calques) en cliquant dessus tout en appuyant sur "contrôle"

Dans la fenêtre principale (canvas Window) , clic droit sur la ligne pointillée de la courbe (Bline). Ne cliquez pas sur les points de contrôle (Ducks), mais sur le pointillé entre les points de contrôle (Ducks)

Dans le menu contextuel qui apparaît, sélectionnez "Lien vers Bline" (Link to BLine)
[[File:Link_to_Bline.png]]

La flèche encapsulée devrait se placer de telle sorte que la position du point de contrôle (Duck) vert soit sur la courbe (Bline), et elle devrait se tourner de manière à ce qu'elle pointe le long de la courbe (Bline).

Cliquez sur le calque d'encapsulation pour le sélectionner lui seul, et faites glisser son point de contrôle (Duck) vert dans la fenêtre. Vous verrez que le point de contrôle (Duck) est lié à la courbe (Bline), 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 "animer le mode d'édition" en cliquant sur l'icône en bas à droite de la fenêtre principale (Canvas Window)

Au point 0f dans le temps, faites glisser la position du point de contrôle vert du calque encapsulé à une extrémité de la courbe (Bline)

Au point 5s dans le temps, faites glisser le point de contrôle à l'autre bout de la courbe (Bline)

Essayez Fichier> Aperçu ou Affichage> Jouer pour voir l'animation (File > Preview or View > Play).

== Resultats ==

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

== Commentaire sur le tutoriel ==

à noter :La flèche prend le même temps pour se déplacer le long de chaque segment de la courbe (Bline). 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).

Il serait bon d'avoir la possibilité de faire le déplacement de la flèche à une vitesse constante sur toute la longueur de la courbe.

Doc:Following a Spline/fr

2010-05-16T16:46:46Z

Mad0:

{{Title|Suivre une Bline}}
{{Category|Tutorials}}
{{Category|Tutorials Advanced}}


Cette page est en cours de traduction, soyez patient.
== 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|Following a BLine#Create the Layers|Tracer une ligne courbe et une flèche}}
* {{l|Following a BLine#Make the Arrow Move and Rotate|Lier l'origine de la flèche et sa rotation}} à la Bline 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 ===

File > New

=== Créer des Calques ===

Sélectionnez l'outil Bline
[[File:Bline_tool.png]]

cochez simplement la case Outline (créer un contour)

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

Cliquez sur de nouveau sur l'icône Bline en bas à gauche de la "Palette d'outils" pour créer le Bline.

Ensuite, toujours avec cet outil, cochez «créer un contour» (Outline) et «créer une région" (Fill) de la palette d'options
[[File:Tool_Options.png]]

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

Passez à l'outil "Normal"

Sélectionnez le contour, glissez la souris pour sélectionner tous les points de contrôle ("ducks") sauf le point de contrôle vert de position.

Déplacez les points de contrôles afin que la flèche soit centrée autour de la position du point de contrôle vert

ajoutez un calque de rotation (transform layer -> rotate)au-dessus des calques de contour et de région

encapsulez les calques de rotation, contour et région

Maintenant vous avez deux calques : l'un est une trajectoire courbe et l'autre est le calque encapsulé (inline canvas) contenant la flèche et le calque de rotation

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

Dépliez le calque encapsulé (inline canvas) dans le panneau Calques, et sélectionnez la ligne "inline canvas"

Sélectionnez sa position (point de contrôle vert) en cliquant dessus dans la fenêtre principale (Canvas window)

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 + clé contrôle)

Maintenant, sélectionnez dans la fenêtre principale (Canvas window) le point de contrôle bleu en appuyant sur contrôle + click

Eh bien, maintenant nous avons sélectionné deux calques et un point de contrôle dans chacun

maintenant il faut ajouter à la sélection le calque de la courbe Bline (qui devrait être le dernier calque dans le panneau Calques) en cliquant dessus tout en appuyant sur "contrôle"

dans la fenêtre principale, clic droit sur la ligne pointillée de la courbe Bline (ne cliquez pas sur les points de contrôle, mais sur le pointillé entre les points de contrôle)

dans le menu contextuel qui apparaît, sélectionnez "Lien vers Bline" (Link to BLine)
[[File:Link_to_Bline.png]]

la flèche encapsulée devrait se placer de telle sorte que la position du point de contrôle vert soit sur le Bline, et elle devrait se tourner de manière à ce qu'elle pointe le long de la Bline.

cliquez sur le calque d'encapsulation pour le sélectionner uniquement, et faites glisser son point de contrôle vert dans la fenêtre. Vous verrez que le point de contrôle est lié au Bline, et que son déplacement affecte aussi la rotation de la flèche comme cela était prévu

Nous pouvons maintenant animer la flèche. Activez "animer le mode d'édition" en cliquant sur l'icône en bas à droite de la fenêtre principale (canvas window)

Au point 0f dans le temps, faites glisser la position du point de contrôle vert du calque encapsulé à une extrémité de la Bline

Au point 5s dans le temps, faites glisser le point de contrôle à l'autre bout de la Bline

Essayez Fichier> Aperçu ou Affichage> Jouer pour voir l'animation (File > Preview or View > Play).

== Resultats ==

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

== Commentaire sur le tutoriel ==

à noter :La flèche prend le même temps pour se déplacer le long de chaque segment de la Bline. 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).

Il serait bon d'avoir la possibilité de faire le déplacement de la flèche à une vitesse constante sur toute la longueur de la courbe.