https://wiki.synfig.org/api.php?action=feedcontributions&user=Synme&feedformat=atomSynfig Studio :: Documentation - User contributions [en]2024-03-19T13:06:26ZUser contributionsMediaWiki 1.26.3https://wiki.synfig.org/index.php?title=Doc:Video_Tutorials&diff=23392Doc:Video Tutorials2020-02-16T08:49:14Z<p>Synme: link added</p>
<hr />
<div><!-- Page info --><br />
{{Title|Video Tutorials}}<br />
{{Category|Tutorials}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Video tutorials could be updated with last version!<br />
<br />
In this section you'll find some basic video tutorials of the most common tasks in Synfig. Feel free to ask here for any new video tutorial.<br />
<br />
= Basics of Animations =<br />
<br />
In this sections, how to use simple part of Synfig studio, mostly one Layer usage.<br />
<br />
== Animation Basics ==<br />
<br />
[http://www.youtube.com/watch?v=WUxn9jqFJrg Synfig basic animation tutorial]: This video tutorial shows how to do a (very) basic animation. The tutorial roughly follows the [[Doc:Animation_Basics]] tutorial.<br />
<br />
<videoflash>WUxn9jqFJrg|425|344</videoflash><br />
<br />
<br />
== Creating a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=bQ-ku0bA23A Creating a Spline]: This small video tutorial shows the basic steps to build a Spline. Video editing was done using Synfig itself.<br />
<br />
<videoflash>bQ-ku0bA23A|425|350</videoflash><br />
<br />
<br />
== Draw a Circle Rectangle Star Spline ==<br />
<br />
[https://youtu.be/FBnBE9t3Jd8 Draw a Circle Rectangle Star Spline]: Short tutorial about creating Circle Rectangle Star and a Spline.<br />
<br />
== Curve warp demonstration ==<br />
<br />
I'd like to introduce few videos about my experiments with curve warp deformation layer. Unfortunately I'm bad translator and I sounded it in russian, but I hope video is clear enough as is. If any [http://synfig.org/forums/viewtopic.php?f=6&t=4229 question] ask me I'll try to explain.<br />
<br />
=== [https://www.youtube.com/watch?v=Gz7gSBVHnjo Part 1 of 3] ===<br />
<videoflash>Gz7gSBVHnjo|425|344</videoflash><br />
=== [https://www.youtube.com/watch?v=Y5GFP_eU_Mk Part 2 of 3] ===<br />
<videoflash>Y5GFP_eU_Mk|425|344</videoflash><br />
=== [Planned Part 3 of 3] ===<br />
<br />
== Blend Test ==<br />
<br />
[http://www.youtube.com/watch?v=_n23xOvONb8 Synfig Blend Test]: 22 blend methods times 15 layers = 330 boring frames. At 0.55 fps = 10 boring minutes. Enjoy!<br />
<br />
<videoflash>_n23xOvONb8|425|350</videoflash><br />
<br />
<br />
= Animation =<br />
<br />
== Flower Animation ==<br />
<br />
This video tutorial shows how to do an animation of a growing flower. The tutorial roughly follows the written [[Doc:Flower_Animation]] tutorial.<br />
<br />
=== [http://www.youtube.com/watch?v=U1EjObyN1pc Part 1 of 4] ===<br />
<br />
<videoflash>U1EjObyN1pc|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=oSAilqEKEJs Part 2 of 4] ===<br />
<br />
<videoflash>oSAilqEKEJs|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=STP01dOxvMU Part 3 of 4] ===<br />
<br />
<videoflash>STP01dOxvMU|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=8dcAqZxwOWM Part 4 of 4] ===<br />
<br />
<videoflash>8dcAqZxwOWM|425|344</videoflash><br />
<br />
== How to animate with Synfig Studio ==<br />
<br />
<videoflash>cDMbDQ07Qkg|425|344</videoflash><br />
<br />
== Following a Spline ==<br />
<br />
[https://youtu.be/d1hPxgq2qeU Following a Spline:] This video tutorial show how to link a shape to a Spline. It doesn't follow strictly the [[Doc:Following_a_Spline]] but would help you to follow it.<br />
<br />
== Motion Tracking Tutorial ==<br />
<br />
This Tutorial shows how to list import and how to do motion tracking. <br />
<br />
<videoflash>YAyKUr-rGOM|425|344</videoflash><br />
<br />
== Pseudo IPO-drivers in Synfig ==<br />
<br />
Zelgadis gave us [http://zelgadis.profusehost.net/files/synfig/ipo-drivers-synfig.ogg this] method to control playback using a variable.<br />
<br />
== Lip Syncing ==<br />
<br />
Performed a lipsync easily [https://youtu.be/-Y0Ox0cnlL4 Synfig + Papagayo: Lipsync Tutorial]<br />
<br />
Making a lipsync, different video explanation [https://youtu.be/M1jl9F6k0BY Lipsync Tutorial - Synfig - Papagayo]<br />
<br />
== Walk Cycle + TimeLoop layer ==<br />
<br />
[https://www.youtube.com/watch?v=VSD3aIi8JZ0 Caminata + Time Loop en Synfig Studio] show how to do a walk cycle step by step and then loop it with the [[TimeLoop Layer]] by http://www.lobozamora.com/<br />
<br />
<videoflash>VSD3aIi8JZ0|425|344</videoflash><br />
<br />
<br />
== Shiny Effects ==<br />
<br />
This tutorial follows the [[Doc:Shiny_Effects]] tutorial<br />
<br />
<videoflash>8QX0dJX2sI8|425|344</videoflash><br />
<br />
== Kynetic Typography ==<br />
<br />
Micro-tutorial by Yoyobuae<br />
<br />
See forum [https://forums.synfig.org/t/typography-and-motion-graphics-tools/2864/5 post] and [http://youtu.be/FZfypmXrMIo for more informations]<br />
<br />
<br />
<br />
=Advanced =<br />
<br />
== How to vectorize a drawing ==<br />
<br />
[https://youtu.be/oH5LudWwb2w Como Dibujar (Vectorizar) En Synfig Studio] Realised with Synfig 1.0.x by [http://www.lobozamora.com/ LoboZamora]<br />
<br />
[https://youtu.be/liixFv7TUjA GSoC 2019 Results Bitmap Vectorization feature]<br />
<br />
== Making headturn guides using Synfig ==<br />
<br />
https://www.youtube.com/watch?v=HBFqTlmR6qw<br />
<br />
<videoflash>HBFqTlmR6qw|425|344</videoflash><br />
<br />
Realised with Synfig 0.64.1 by Konstantin Dmitriev<br />
<br />
Nota: to help to translating and caption this video : http://amara.org/v/CUeA/</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Video_Tutorials&diff=23391Doc:Video Tutorials2020-02-16T08:32:16Z<p>Synme: simplified change</p>
<hr />
<div><!-- Page info --><br />
{{Title|Video Tutorials}}<br />
{{Category|Tutorials}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Video tutorials could be updated with last version!<br />
<br />
In this section you'll find some basic video tutorials of the most common tasks in Synfig. Feel free to ask here for any new video tutorial.<br />
<br />
= Basics of Animations =<br />
<br />
In this sections, how to use simple part of Synfig studio, mostly one Layer usage.<br />
<br />
== Animation Basics ==<br />
<br />
[http://www.youtube.com/watch?v=WUxn9jqFJrg Synfig basic animation tutorial]: This video tutorial shows how to do a (very) basic animation. The tutorial roughly follows the [[Doc:Animation_Basics]] tutorial.<br />
<br />
<videoflash>WUxn9jqFJrg|425|344</videoflash><br />
<br />
<br />
== Creating a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=bQ-ku0bA23A Creating a Spline]: This small video tutorial shows the basic steps to build a Spline. Video editing was done using Synfig itself.<br />
<br />
<videoflash>bQ-ku0bA23A|425|350</videoflash><br />
<br />
<br />
== Draw a Circle Rectangle Star Spline ==<br />
<br />
[https://youtu.be/FBnBE9t3Jd8 Draw a Circle Rectangle Star Spline]: Short tutorial about creating Circle Rectangle Star and a Spline.<br />
<br />
== Curve warp demonstration ==<br />
<br />
I'd like to introduce few videos about my experiments with curve warp deformation layer. Unfortunately I'm bad translator and I sounded it in russian, but I hope video is clear enough as is. If any [http://synfig.org/forums/viewtopic.php?f=6&t=4229 question] ask me I'll try to explain.<br />
<br />
=== [https://www.youtube.com/watch?v=Gz7gSBVHnjo Part 1 of 3] ===<br />
<videoflash>Gz7gSBVHnjo|425|344</videoflash><br />
=== [https://www.youtube.com/watch?v=Y5GFP_eU_Mk Part 2 of 3] ===<br />
<videoflash>Y5GFP_eU_Mk|425|344</videoflash><br />
=== [Planned Part 3 of 3] ===<br />
<br />
== Blend Test ==<br />
<br />
[http://www.youtube.com/watch?v=_n23xOvONb8 Synfig Blend Test]: 22 blend methods times 15 layers = 330 boring frames. At 0.55 fps = 10 boring minutes. Enjoy!<br />
<br />
<videoflash>_n23xOvONb8|425|350</videoflash><br />
<br />
<br />
= Animation =<br />
<br />
== Flower Animation ==<br />
<br />
This video tutorial shows how to do an animation of a growing flower. The tutorial roughly follows the written [[Doc:Flower_Animation]] tutorial.<br />
<br />
=== [http://www.youtube.com/watch?v=U1EjObyN1pc Part 1 of 4] ===<br />
<br />
<videoflash>U1EjObyN1pc|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=oSAilqEKEJs Part 2 of 4] ===<br />
<br />
<videoflash>oSAilqEKEJs|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=STP01dOxvMU Part 3 of 4] ===<br />
<br />
<videoflash>STP01dOxvMU|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=8dcAqZxwOWM Part 4 of 4] ===<br />
<br />
<videoflash>8dcAqZxwOWM|425|344</videoflash><br />
<br />
== How to animate with Synfig Studio ==<br />
<br />
<videoflash>cDMbDQ07Qkg|425|344</videoflash><br />
<br />
== Following a Spline ==<br />
<br />
[https://youtu.be/d1hPxgq2qeU Following a Spline:] This video tutorial show how to link a shape to a Spline. It doesn't follow strictly the [[Doc:Following_a_Spline]] but would help you to follow it.<br />
<br />
== Motion Tracking Tutorial ==<br />
<br />
This Tutorial shows how to list import and how to do motion tracking. <br />
<br />
<videoflash>YAyKUr-rGOM|425|344</videoflash><br />
<br />
== Pseudo IPO-drivers in Synfig ==<br />
<br />
Zelgadis gave us [http://zelgadis.profusehost.net/files/synfig/ipo-drivers-synfig.ogg this] method to control playback using a variable.<br />
<br />
== Lip Syncing ==<br />
<br />
Performed a lipsync easily [https://youtu.be/-Y0Ox0cnlL4 Synfig + Papagayo: Lipsync Tutorial]<br />
<br />
Making a lipsync, different video explanation [https://youtu.be/M1jl9F6k0BY Lipsync Tutorial - Synfig - Papagayo]<br />
<br />
== Walk Cycle + TimeLoop layer ==<br />
<br />
[https://www.youtube.com/watch?v=VSD3aIi8JZ0 Caminata + Time Loop en Synfig Studio] show how to do a walk cycle step by step and then loop it with the [[TimeLoop Layer]] by http://www.lobozamora.com/<br />
<br />
<videoflash>VSD3aIi8JZ0|425|344</videoflash><br />
<br />
<br />
== Shiny Effects ==<br />
<br />
This tutorial follows the [[Doc:Shiny_Effects]] tutorial<br />
<br />
<videoflash>8QX0dJX2sI8|425|344</videoflash><br />
<br />
== Kynetic Typography ==<br />
<br />
Micro-tutorial by Yoyobuae<br />
<br />
See forum [https://forums.synfig.org/t/typography-and-motion-graphics-tools/2864/5 post] and [http://youtu.be/FZfypmXrMIo for more informations]<br />
<br />
<br />
<br />
=Advanced =<br />
<br />
== How to vectorize a drawing ==<br />
<br />
[https://youtu.be/oH5LudWwb2w Como Dibujar (Vectorizar) En Synfig Studio] Realised with Synfig 1.0.x by [http://www.lobozamora.com/ LoboZamora]<br />
<br />
== Making headturn guides using Synfig ==<br />
<br />
https://www.youtube.com/watch?v=HBFqTlmR6qw<br />
<br />
<videoflash>HBFqTlmR6qw|425|344</videoflash><br />
<br />
Realised with Synfig 0.64.1 by Konstantin Dmitriev<br />
<br />
Nota: to help to translating and caption this video : http://amara.org/v/CUeA/</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Video_Tutorials&diff=23390Doc:Video Tutorials2020-02-14T16:34:06Z<p>Synme: newer tutorials added</p>
<hr />
<div><!-- Page info --><br />
{{Title|Video Tutorials}}<br />
{{Category|Tutorials}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Video tutorials could be updated with last version!<br />
<br />
In this section you'll find some basic video tutorials of the most common tasks in Synfig. Feel free to ask here for any new video tutorial.<br />
<br />
= Basics of Animations =<br />
<br />
In this sections, how to use simple part of Synfig studio, mostly one Layer usage.<br />
<br />
== Animation Basics ==<br />
<br />
[http://www.youtube.com/watch?v=WUxn9jqFJrg Synfig basic animation tutorial]: This video tutorial shows how to do a (very) basic animation. The tutorial roughly follows the [[Doc:Animation_Basics]] tutorial.<br />
<br />
<videoflash>WUxn9jqFJrg|425|344</videoflash><br />
<br />
<br />
== Creating a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=bQ-ku0bA23A Creating a Spline]: This small video tutorial shows the basic steps to build a Spline. Video editing was done using Synfig itself.<br />
<br />
<videoflash>bQ-ku0bA23A|425|350</videoflash><br />
<br />
<br />
== Draw a Circle Rectangle Star Spline ==<br />
<br />
[https://youtu.be/FBnBE9t3Jd8 Draw a Circle Rectangle Star Spline]: Short tutorial about creating Circle Rectangle Star and a Spline.<br />
<br />
== Curve warp demonstration ==<br />
<br />
I'd like to introduce few videos about my experiments with curve warp deformation layer. Unfortunately I'm bad translator and I sounded it in russian, but I hope video is clear enough as is. If any [http://synfig.org/forums/viewtopic.php?f=6&t=4229 question] ask me I'll try to explain.<br />
<br />
=== [https://www.youtube.com/watch?v=Gz7gSBVHnjo Part 1 of 3] ===<br />
<videoflash>Gz7gSBVHnjo|425|344</videoflash><br />
=== [https://www.youtube.com/watch?v=Y5GFP_eU_Mk Part 2 of 3] ===<br />
<videoflash>Y5GFP_eU_Mk|425|344</videoflash><br />
=== [Planned Part 3 of 3] ===<br />
<br />
== Blend Test ==<br />
<br />
[http://www.youtube.com/watch?v=_n23xOvONb8 Synfig Blend Test]: 22 blend methods times 15 layers = 330 boring frames. At 0.55 fps = 10 boring minutes. Enjoy!<br />
<br />
<videoflash>_n23xOvONb8|425|350</videoflash><br />
<br />
<br />
= Animation =<br />
<br />
== Flower Animation ==<br />
<br />
This video tutorial shows how to do an animation of a growing flower. The tutorial roughly follows the written [[Doc:Flower_Animation]] tutorial.<br />
<br />
=== [http://www.youtube.com/watch?v=U1EjObyN1pc Part 1 of 4] ===<br />
<br />
<videoflash>U1EjObyN1pc|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=oSAilqEKEJs Part 2 of 4] ===<br />
<br />
<videoflash>oSAilqEKEJs|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=STP01dOxvMU Part 3 of 4] ===<br />
<br />
<videoflash>STP01dOxvMU|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=8dcAqZxwOWM Part 4 of 4] ===<br />
<br />
<videoflash>8dcAqZxwOWM|425|344</videoflash><br />
<br />
== How to animate with Synfig Studio ==<br />
<br />
<videoflash>cDMbDQ07Qkg|425|344</videoflash><br />
<br />
== Following a Spline ==<br />
<br />
[https://youtu.be/d1hPxgq2qeU Following a Spline:] This video tutorial show how to link a shape to a Spline. It doesn't follow strictly the [[Doc:Following_a_Spline]] but would help you to follow it.<br />
<br />
== Motion Tracking Tutorial ==<br />
<br />
This Tutorial shows how to list import and how to do motion tracking. <br />
<br />
<videoflash>YAyKUr-rGOM|425|344</videoflash><br />
<br />
== Pseudo IPO-drivers in Synfig ==<br />
<br />
Zelgadis gave us [http://zelgadis.profusehost.net/files/synfig/ipo-drivers-synfig.ogg this] method to control playback using a variable.<br />
<br />
== Lip Syncing ==<br />
<br />
Performed a lipsync easily [https://youtu.be/-Y0Ox0cnlL4 Synfig + Papagayo: Lipsync Tutorial]<br />
<br />
Making a lipsync, different video explanation [https://youtu.be/M1jl9F6k0BY Lipsync Tutorial - Synfig - Papagayo]<br />
<br />
== Walk Cycle + TimeLoop layer ==<br />
<br />
[https://www.youtube.com/watch?v=VSD3aIi8JZ0 Caminata + Time Loop en Synfig Studio] show how to do a walk cycle step by step and then loop it with the [[TimeLoop Layer]] by http://www.lobozamora.com/<br />
<br />
<videoflash>VSD3aIi8JZ0|425|344</videoflash><br />
<br />
<br />
== Shiny Effects ==<br />
<br />
This tutorial follows the [[Doc:Shiny_Effects]] tutorial<br />
<br />
<videoflash>8QX0dJX2sI8|425|344</videoflash><br />
<br />
== Kynetic Typography ==<br />
<br />
Micro-tutorial by Yoyobuae<br />
<br />
See forum [https://forums.synfig.org/t/typography-and-motion-graphics-tools/2864/5 post] and [http://youtu.be/FZfypmXrMIo for more informations]<br />
<br />
<br />
<br />
=Advanced =<br />
<br />
== How to vectorize a drawing ==<br />
<br />
https://www.youtube.com/watch?v=oH5LudWwb2w<br />
<br />
<videoflash>oH5LudWwb2w|425|344</videoflash><br />
<br />
Realised with Synfig 1.0.x by [http://www.lobozamora.com/ LoboZamora]<br />
<br />
== Making headturn guides using Synfig ==<br />
<br />
https://www.youtube.com/watch?v=HBFqTlmR6qw<br />
<br />
<videoflash>HBFqTlmR6qw|425|344</videoflash><br />
<br />
Realised with Synfig 0.64.1 by Konstantin Dmitriev<br />
<br />
Nota: to help to translating and caption this video : http://amara.org/v/CUeA/</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Lipsync&diff=23379Doc:Lipsync2020-01-14T16:47:08Z<p>Synme: addition of method2</p>
<hr />
<div><!-- Page info --><br />
{{Title|Lipsync}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
<br />
== Method1 (recent) ==<br />
<br />
It is '''important''' to stress from the start that the explanation of method1, so the text below was made by watching the video, and then adding the comments, so it is '''highly recommended''' to start by <u>watching video1 and then video2.</u><br />
<br />
<br />
Start ''Papagayo'', open your <u>audio-file.wav</u> then write the text corresponding to the audio, choose the language of the text, click {{Shortcut|breakdown}}, the text will then appear on the audio wave, drag with the mouse cursor the part <code style="color: #009300;">green</code> corresponding to the whole sentence, now drag the mouse cursor corresponding to the words in <code style="color: #d17812;">orange</code>, there's no need to be really precise, just keep it simple, as long as the audio roughly matches, (it's up to you), then click on the triangle shaped button {{Shortcut|play}}, when it's good you save the work as <u>file.pgo</u><br />
the ''Papagayo'' part is over.<br />
<br />
<br />
Then you open ''Synfig Studio'', it will be much easier to understand ''<u>to watch</u>'' the video, let's try to detail the video together, open your <u>file.sifz</u><br />
containing your layers and groups, now open all the child layers corresponding to the mouth of your character, then you check all the boxes corresponding to all the mouth positions.<br />
Now you import your <u>file.pgo</u> and move it to the bottom of the layer corresponding to the last mouth, now open all the child layers corresponding to your <u>file.pgo</u> and tick all the layers.<br />
<br />
<br />
Now you have to move your drawing to the layers of your <u>file.pgo</u><br />
so if your drawing corresponding to the mouth <code>AI</code>, you'll have to move it to the <u>file.pgo</u> corresponding to <code>AI</code>, it's easier to <u>''watch the video to understand.''</u><br />
Do this for all the mouth layers, after that you can do {{Shortcut|play}} to see the mouth come alive.<br />
<br />
<br />
We will add a '''stroboscope''' effect, (it is in the category <u>time</u>) to slow down the mouth because it is too fast, the mouths cross each other and we don't see a break. To understand a simple example: <code>''if a person speaks without pausing you won't understand the sentence because the words will be attached''.</code><br />
<br />
If now we put our '''stroboscope''', there will be a break a tiny silence between words to delineate the words and understand the sentence.<br />
<br />
<br />
The <u>stroboscope</u> must be placed at the top of the group <u>file.pgo</u>, in the video example we put, '''12''' it gives something good, free for you to put more or less.<br />
<br />
The explanation is over you now have an animation with the mouth moving according to the voice.<br />
<br />
<br />
<br />
Now you'll see a rather '''important''' paragraph, it's about the "mouth positions" in the program ''Papagayo'' there are 7 different styles, the style being ''manga'', ''comic'', ''3d'', etc... (the style is not very interesting for us)<br />
now let's take a closer look at the <u>positions of the mouths</u> there are therefore '''10 different positions''' according to the program ''Papagayo'' they are defined in:<br />
<code>AI</code> <code>E</code> <code>etc</code> <code>FV</code> <code>L</code> <code>MBP</code> <code>O</code> <code>rest</code> <code>U</code> <code>WQ</code>,<br />
you can see the positions of mouths in the video, or by going to the temporary folder of ''Papagayo'', under Linux apparently the folder is located in <code>tmp/.mount_IENJFN/usr/opt/papagayong/rsrc/mouths/</code> this link should probably change if you're on Windows, or depending on the version of ''Papagayo'' used.<br />
<br />
<br />
On the video you will see the images of the mouths for the <u>10 positions and the 7 different styles.</u><br />
<br />
This text explanation is based on the video2, the <u>video1</u> is faster to understand so we advise you to watch the <u>video1</u> first, then watch the video2.<br />
<br />
== Links ==<br />
<br />
Video link1: [https://youtu.be/-Y0Ox0cnlL4 Synfig + Papagayo: Lipsync Tutorial]<br />
<br />
Video link2: [https://youtu.be/M1jl9F6k0BY Lipsync Tutorial - Synfig - Papagayo]<br />
<br />
<br />
<br />
Download Papagayo:<br />
* Windows and Linux: [http://morevnaproject.org/papagayo/ http://morevnaproject.org/papagayo/]<br />
* OSX: [http://my.smithmicro.com/papagayo.html http://my.smithmicro.com/papagayo.html]<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Method2 (former) ==<br />
<br />
<br />
<br />
<br />
This is a small tutorial on how I do the lipsync. We will need an audio recorder (eg Audacity), the program Papagayo, a video editor (like Avidemux), a text editor (like gedit) and of course Synfig.<br />
<br />
I suggest you look at Preston Blair's drawings. [http://www.angryanimator.com/word/2010/11/26/preston-blair-how-to-animate/ Link1] [https://animationresources.org/category/preston-blair/ Link2] [http://www.welcometopixelton.com/downloads/Animation%20by%20Preston%20Blair.pdf Link3 containing 35-page pdf drawings]<br />
<br />
<br />
We have done our draw (in this case in front view).<br />
<br />
1. Record with Audacity the text you want to use.<br />
<br />
2. Then fix it (if necessary) and export it to WAV format. We'll name it "Texto.wav".<br />
<br />
3. Open the file Texto.wav with Papagayo.<br />
<br />
4. Fixed the text according to Papagayo instructions and save as "Texto.pgo".<br />
<br />
5. Once settled choose "voice Export ..." We will save it as "Texto.dat".<br />
<br />
6. Open "Texto.dat" with gedit. We'll note the position of the corresponding phonemes, so 1 corresponds to 1f, 24 corresponds to 1s, 25 corresponds to 1s 1f, 50 corresponds to 2s 2f, etc.<br />
<br />
<br />
Now we know the exact position of each phoneme. We still to decide how many different poses we want. (We can use the outline given by Preston Blair, or use your own).<br />
<br />
<br />
Come to our animation. Let's make the mouth move, without heads.<br />
<br />
1. We {{l|Canvas_Browser_Panel|export}} the mouth (if we follow the Preston Blair draws, we'll export the head).<br />
<br />
2. Change {{l|Waypoint#Interpolation|Interpolation}} to constant.<br />
<br />
3. Now, on the exported canvas, we will draw each pose in the appropriate frame, doubling the {{l|Keyframe|keyframe}} when necessary. If the text speed is very fast, then it's not necessary to draw all the phonemes.<br />
<br />
<br />
Also, we can draw all the phonemes we need in the first second and start the animation from frame 1s, so we will double the corresponding keyframe at any time. In this case we must start to render from 1s.<br />
<br />
Another thing we can do is create a library of phonemes, taking advantage of the Group layer as in this tutorial. http://vimeo.com/10318012 .<br />
<br />
<br />
Then we'll use the video editor (Avidemux) to add audio to video.<br />
<br />
I hope it can help you.</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Lipsync/fr&diff=23378Doc:Lipsync/fr2020-01-14T16:45:57Z<p>Synme: addition of method2</p>
<hr />
<div><!-- Page info --><br />
{{Title|Synchroniser la voix}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
<br />
== Méthode1 (récente) ==<br />
<br />
Il est '''important''' de souligner dès le départ que l'explication de la méthode1, donc le texte ci-dessous a été faite en regardant la vidéo, et puis ensuite en y ajoutant les commentaires, donc il est '''fortement recommandé''' pour commencer de <u>regarder la vidéo1 et ensuite la vidéo2.</u><br />
<br />
<br />
Démarrer ''Papagayo'', ouvrez votre <u>fichier-audio.wav</u> ensuite écrire le texte correspondant à l'audio, choisissez la langue du texte, cliquez sur {{Shortcut|breakdown}}, le texte va ensuite apparaître sur l'onde audio, faites glissez avec le curseur souris la partie <code style="color: #009300;">verte</code> correspondant à toute la phrase, maintenant il s'agit de faire glisser le curseur souris correspondant aux mots en <code style="color: #d17812;">orange</code>, il n'y a pas besoin d'être vraiment précis, il suffit juste d'être simple, du moment que l'audio correspond à peu près, (à vous de voir), ensuite cliquer sur le bouton en forme de triangle bouton {{Shortcut|lecture}}, quand c'est bon vous enregistrer le travail sous <u>fichier.pgo</u><br />
la partie ''Papagayo'' est finie.<br />
<br />
<br />
Ensuite vous ouvrez ''Synfig Studio'', il sera bien plus facile pour comprendre de ''<u>regarder</u>'' la vidéo, essayons de détailler la vidéo ensemble, ouvrez votre <u>fichier.sifz</u><br />
contenant vos calques et groupes, maintenant ouvrez tous les calques enfants correspondant à la bouche de votre personnage, ensuite vous cochez toutes les cases correspondante à toutes les positions de bouche.<br />
Maintenant vous importer votre <u>fichier.pgo</u> et déplacer le tout en bas du calque correspondant à la dernière bouche, maintenant ouvrez tous les calques enfants correspondant à votre <u>fichier.pgo</u> et cochez tous les calques.<br />
<br />
<br />
Maintenant il faut déplacer votre dessin vers les calques de votre <u>fichier.pgo</u><br />
donc si votre dessin correspondant à la bouche <code>AI</code>, il faudra le déplacer dans le <u>fichier.pgo</u> correspondant à <code>AI</code>, il est plus simple de <u>''regarder la vidéo pour comprendre.''</u><br />
Faites ceci pour tous les calques de bouche, après cela vous pouvez faire {{Shortcut|lecture}} pour voir la bouche s'animer.<br />
<br />
<br />
Nous allons ajouter un effet '''stroboscope''', (il se trouve dans la catégorie <u>temps</u>) pour ralentir la bouche car elle est trop rapide, les bouches se croisent et on ne voit pas de pause. Pour comprendre un exemple simple: <code>''si une personne parle sans faire de pause vous n'allez pas comprendre la phrase car les mots seront attachés''.</code><br />
<br />
Si maintenant nous mettons notre '''stroboscope''', il y aura une pause un minuscule silence entre les mots pour délimiter les mots et comprendre la phrase.<br />
<br />
<br />
Le <u>stroboscope</u> doit être placer en haut du groupe <u>fichier.pgo</u>, dans l'exemple vidéo nous avons mis, '''12''' cela donne quelque chose de bien, libre à vous de mettre plus ou moins.<br />
<br />
L'explication est finie vous avez maintenant une animation avec la bouche qui bouge en fonction de la voix.<br />
<br />
<br />
<br />
Maintenant vous aller voir un paragraphe assez '''important''', il s'agit des "positions des bouches" dans le programme ''Papagayo'' il existe 7 styles différents, le style étant ''manga'', ''bande dessiné'', ''3d'', etc... (le style n'est pas très intéressant pour nous)<br />
maintenant regardons de plus près les <u>positions des bouches</u> il existe donc '''10 positions différentes''' d'après le programme ''Papagayo'' elle sont définies en:<br />
<code>AI</code> <code>E</code> <code>etc</code> <code>FV</code> <code>L</code> <code>MBP</code> <code>O</code> <code>rest</code> <code>U</code> <code>WQ</code>,<br />
vous pourrez voir les positions de bouches dans la vidéo, ou en allant dans le dossier temporaire de ''Papagayo'', sous Linux apparemment le dossier est situé dans <code>tmp/.mount_IENJFN/usr/opt/papagayong/rsrc/mouths/</code> ce lien doit probablement changer si vous êtes sur Windows, ou suivant la version utilisée de ''Papagayo''.<br />
<br />
<br />
Sur la vidéo vous verrez donc les images des bouches pour les <u>10 positions et les 7 styles différents.</u><br />
<br />
Cette explication texte est basée sur la vidéo2, la <u>vidéo1</u> est plus rapide à comprendre donc nous vous conseillons de regarder la <u>vidéo1</u> pour commencer, ensuite de regarder la vidéo2.<br />
<br />
== Liens ==<br />
<br />
Lien vidéo1: [https://youtu.be/-Y0Ox0cnlL4 Synfig + Papagayo: Lipsync Tutorial]<br />
<br />
Lien vidéo2: [https://youtu.be/M1jl9F6k0BY Lipsync Tutorial - Synfig - Papagayo]<br />
<br />
<br />
<br />
Télécharger Papagayo:<br />
* Windows et Linux: [http://morevnaproject.org/papagayo/ http://morevnaproject.org/papagayo/]<br />
* OSX: [http://my.smithmicro.com/papagayo.html http://my.smithmicro.com/papagayo.html]<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
== Méthode2 (ancienne) ==<br />
<br />
Voici un petit tutoriel sur la façon dont je fais le lipsync. Nous aurons besoin d'un enregistreur audio (par exemple Audacity), le programme Papagayo, un éditeur de vidéo (comme Avidemux), un éditeur de texte (comme gedit) et Synfig (bien sur).<br />
<br />
Je vous conseille de regarder les dessins de Preston Blair. [http://www.angryanimator.com/word/2010/11/26/preston-blair-how-to-animate/ Lien1] [https://animationresources.org/category/preston-blair/ Lien2] [http://www.welcometopixelton.com/downloads/Animation%20by%20Preston%20Blair.pdf Lien3 contenant des dessins pdf de 35 pages]<br />
<br />
<br />
Nous avons fait notre dessin (dans ce cas, en vue de face.)<br />
<br />
1. Enregistrer avec Audacity le texte que vous souhaitez utiliser.<br />
<br />
2. Corriger (si nécessaire) et l'exporter au format wav. Nommer lui "Texto.wav".<br />
<br />
3. Ouvrir le fichier Texto.wav avec le programme Papagayo.<br />
<br />
4. Corriger le texte selon les instructions du programme, et enregistrer (en tant que Texto.pgo)<br />
<br />
5. Après ça, choisir "voix Exporter ..." Nous allons l'enregistrer sous le nom "Texto.dat".<br />
<br />
6. Ouvrir Texto.dat avec "gedit". On note la position des phonèmes correspondants, soit 1 correspond à 1f, 24 correspond à 1s, 25 correspond à 1s 1f, 50 correspond à 2s 2f, etc.<br />
<br />
<br />
Nous connaissons maintenant la position exacte de chaque phonème. Nous voulons toujours de décider combien de poses différentes nous voulons. (On peut utiliser le schéma présenté par Preston Blair, ou bien utilisez votre propre).<br />
<br />
<br />
Venez à notre animation. Nous allons bouger la bouche, sans la tête.<br />
<br />
1. Nous exportons la bouche (si nous suivons la Preston Blair, on devra exporter la tête).<br />
<br />
2. Changer {{l|Waypoint#Interpolation|l'interpolation}} a constant.<br />
<br />
3. Maintenant, sur le {{l|Canvas_Browser_Panel|canevas exportée}}, nous allons dessiner chaque posture dans le frame approprié, en doublant {{l|Keyframe|l'image-clé}} en cas de besoin. Si la vitesse du texte est très rapide, il n'est pas nécessaire d'attirer tous les phonèmes.<br />
<br />
<br />
Nous pouvons dessiner d'abord toutes les phonèmes dans la première seconde et démarrer l'animation après 1s, de sorte que on doit doubler l'image-clé correspondant à tout moment. Dans ce cas, le rendu c'est fait après 1s.<br />
<br />
<br />
Une autre chose que nous pouvons faire est de créer une bibliothèque de phonèmes en profitant des {{l|Group_Layer}} comme dans ce tutoriel: http://vimeo.com/10318012 <br />
<br />
<br />
Ensuite, utilisez l'éditeur de vidéo (Avidemux) pour ajouter de l'audio à la vidéo.<br />
<br />
J'espère que cela peut vous aider.</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Walk_Cycle&diff=23357Doc:Walk Cycle2019-08-18T15:14:40Z<p>Synme: I retransferred the links here Lipsync</p>
<hr />
<div><!-- Page info --><br />
{{Title|Walk Cycle}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{Category|ImportArt}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Somes of the screenshots needs to be updated with 0.64.0<br />
<br />
= The List File =<br />
One of the less obvious features of Synfig is buried in the Import Image layer. In addition to being able to import some basic still image file types, it will also accept a [[Doc:ListImporter|'lst' file]]. This list file is simply a text file consisting of a framerate followed by a list of images to display. (If no framerate is supplied a default rate of 15 Frames per Second (FPS) is used.)<br />
<br />
An example, provided by Voria Studios, takes 4 still images of a character in various stages of a walk cycle. These images are shown at 4 FPS to give a sequence that when repeated, show a man walking. <br />
<br />
Here are the images<br> <br />
<gallery widths="104px" heights="216px"><br />
Image:frame_01.jpg|Frame 1<br />
Image:frame_02.jpg|Frame 2<br />
Image:frame_03.jpg|Frame 3<br />
Image:frame_04.jpg|Frame 4<br />
</gallery><br />
<br />
And here is the beginning of the 'lst' file. <br><br />
<code><br />
FPS 4<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
...</code><br><br />
<br />
== Constructing a Walk cycle ==<br />
Let's take a look at how we can use these images to create a complete walk cycle for a character in Synfig. <br />
<br />
Start with a new canvas and add a timeline of several seconds with the default framerate of 24 FPS. On the canvas, select the Caret > Layer, New layer, Other, Import Image.<br />
<br />
This creates a new Import Image layer, but nothing will show up until the filename is selected. Go to the Parameters Panel and scroll down to Filename. There you can navigate to the '.lst' file and select open. <br />
Now you should see the first image in the list. Moving forward along the timeline will show successive images from the list every 6 frames. You can preview or render these as is and get a low frame rate animation. <br />
<br />
But the result doesn't look very smooth, and the images are not very flexible. (The images can be translated, rotated and stretched, but no elements within the images can be changed.) To make a fully editable character we need to trace over it with Synfig elements such as Splines. <br />
<br />
I work with a drawing tablet, so the easiest solution for me is to use the {{l|Draw Tool}}. Move back to frame 0, select the draw tool and trace over the character. I find it easiest to break the character down into several regions (Head, Left Arm, Right Arm, Torso, Left Leg, Right Leg). As a helpful tip, if the shape didn't come out quite right, go to the layer menu and uncheck the region checkbox - this will allow you to see the image below as you drag the handles around to correct your line. <br />
<br />
{{l|Image:Synfig_walk.png|800x324px}}<br />
<br />
Once you've finished Frame 0, move along the timeframe to Frame 6. Instead of tracing, this time we're going to take the existing elements and reposition them to match the image. Again, turning off the region layers will allow you to see the image below as you edit them. Use the rotate and translate tools to reposition the body parts, adjusting the line handles for fine tuning. [Don't forget to switch to "Animate Editing Mode" as explained in {{L|Doc:Animation Basics}}.]<br />
<br />
Repeat for Frames 12 & 18, then you can turn off the Import Image layer (uncheck the checkbox in the layer menu). Now, even though we've only drawn 4 keyframes, by the power of Synfig, we can render a smooth 24 frames of man walking. Add a 1 second timeloop layer on top, and the man will pace on the spot for the length of your animation. <br />
<br />
{{l|Image:walk.gif}}<br />
<br />
Adding Translation layer will enable your character to walk from one side of the canvas to the other (or moonwalk backwards if you're so inclined.)<br />
<br />
{{l|media:walk.zip|Here is a zipfile}} with the list file, 4 still images, and the finished Synfig file. Unzip them in the same directory and open the newwalk.sif file with synfig.<br />
<br />
<br />
<br />
<br />
= Character walking, moving (full explanation). =<br />
<br />
Before you succeed in walking a character, you must know the basics<br />
«to know»:<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Tutorial Basic Bone Tutorial] (For your limbs to be able to rotate 360° without any bugs).<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Morphing Basic Bone Morphing] (To create a "walking skeleton").<br />
<br />
<br />
*1: Draw the character in your drawing program.<br />
*2: Add outline<br />
<br />
{{l|Image:Walking-technique123.png}}<br />
<br />
*3: We move the limbs, in the best position so that the "arm" can be decompose into:<br />
<br />
Arm: arm, forearm, hand.<br />
<br />
Leg: thigh, calf, shoe.<br />
<br />
<br />
<br />
*4: Once the limbs are in a natural location, (the angles are avoided at 90°, because it is more difficult to place crosshair on twisted limbs).<br />
<br />
When they are almost straight it is a simpler operation.<br />
<br />
It is necessary to decompose the limb to be able to pose our "crosshair".<br />
<br />
{{l|Image:Walking-technique456.png}}<br />
<br />
*5: We replace, a hand with closed fist, a wider t-shirt so that the legs can run, the shoes, by something simpler.<br />
<br />
Because it will be simpler in animation to have basic members.<br />
<br />
<br />
*7: Once all the limbs are decompose, and the crosshair are placed.<br />
<br />
{{l|Image:Walking-technique789.png}}<br />
<br />
*8: Here are simple fast crosses that have been laid, to be able to turn the limbs, in a fast way.<br />
<br />
(They did not follow process "crosshair").<br />
<br />
*9: If your drawing program, allows you to make rotations from a fixed point, make a maximum of test, by turning your character in all directions to ensure that there is no "bug". (test in motion).<br />
<br />
Then you would import your final drawing into "synfig studio".<br />
<br />
<br />
*10: To make a more real walk, we can bend the shoe, the orange outline is a guide to easily put on the right shoe.<br />
<br />
The crosses represent the vertices:<br />
* Green crosses do not move. <br />
* The orange cross was lowered vertically until it reached the ground.<br />
* The blue cross was moved to the right and the handles moved.<br />
<br />
{{l|Image:Walking-technique1011.png}}<br />
<br />
*11: For simplicity when creating crosshair.<br />
<br />
-The left arm is identical to the right arm.<br />
<br />
-The left leg is identical to the right leg.<br />
<br />
Things that are unique: the left shoulder and the right shoulder (which are red) are different as well as the location of the crosses fast.<br />
<br />
<br />
<br />
*12: The top line, is a marker so that the character can lower or raise the head.<br />
<br />
The purple rectangle is the marker that will be used to know the "walking size" it is precisely to place behind the rear shoe and behind the front shoe, the 2 red lines are lines to be more precise.<br />
<br />
You can import your drawing into "synfig studio" and place the skeleton on your character.<br />
<br />
{{l|Image:Walking-technique1213.png}}<br />
<br />
*13: Simple trick for animation, and work with more details, put an opacity (as in this image) you will work more easily.<br />
<br />
<br />
*14: Once your character with a "walking skeleton", place your character as on the "character 1" schema.<br />
<br />
Then you would move your "purple rectangle" so that your walk is identical to "walking size".<br />
<br />
{{l|Image:Walking-technique14.png}}<br />
<br />
<br />
<br />
<br />
<br />
*15: Here is the schema used for the animation, it serves just as a landmark (it is available in 2 formats, SVG, SIFZ,) available in the ZIP.<br />
<br />
To see the next character you have to uncheck the other numbers to see the "next" step.<br />
<br />
I recall that this "schema" is just an "aid" to understand when to place the key images.<br />
<br />
The variants that will make your walking will be different will be "walking size", and placing your legs.<br />
<br />
So you will make a character with a walk, short, long, or running.<br />
<br />
To know: the characters 5,6,7,8 are the same images as the 4th, the limbs have only been reversing the other way.<br />
<br />
{{l|Image:Walking-technique15schema.gif}}<br />
<br />
<br />
<br />
<br />
<br />
All keyframes, are represented by a number there are "8" in all.<br />
<br />
{{l|Image:Walking-technique16.png}}<br />
<br />
They must all be placed with ''' "24f" and in interpolation mode "linear"'''(it is at the end of the animation that you will change the time, to accelerate the walk.<br />
<br />
<br />
[[File:Walking-technique-animation.gif|frame|none|Slow animation that decomposes walking. ]] <br />
<br />
The final result depends only on the schema (with the numbers on each head), you must modify it to have a result that will suit you.<br />
With a slow time of 24f you will immediately see the errors.<br />
<br />
Here you see a walk with a time of 10,18,6,16f to find the time to use on the following keyframe a simple trick has been used, for 4 keyframes, you delete 1 image, and search for the time of the missing image.<br />
<br />
Example:<br />
A B C D<br />
<br />
You delete the keyframe: "B" you go to image A and you advance the time from 1f to 1f from A to C, there will be a time when your missing image will be the same as B.<br />
Then you report the result on your animation, and check that the result is smooth.<br />
Once it is fluid you can really accelerate the walk by dividing your numbers by 2 or accelerate by 70% the result.<br />
<br />
<br />
Here is '''list of tricks''' used during the animation in synfig (with these helps it is easier to succeed):<br />
<br />
*Onion (to see the previous keys in opacity).<br />
*{{Shortcut|shift}} + left mouse click, and SLIDE the group with green handle (to slide on a line).<br />
*Use a rectangle to have the "walking size"(+2 lines at the edge for precision).<br />
*Drawing sketch (to have the legs and arms exactly the same, and report it further).<br />
*If your work is vectorial, as in this chapter, preferably use the quality preview "1,00", taille 100%, avoid working directly with a canvas of a size UHD (too large), <br />
with a quality of "1.00" and 100% in size you will see the final result, as will appear, in a "video".<br />
*When the 8 steps of the "schema" are all finished use the "duplicate" to copy the already made drawings. (See image below).<br />
<br />
<br />
<br />
To make a duplicate [http://wiki.synfig.org/Keyframe#Duplicate_a_keyframe link]:<br />
*1 I select the keyframe.<br />
*2 I select the layer to duplicate.<br />
*3 I click on the waypoint.<br />
*4 I duplicate.<br />
<br />
[[File:Walking-technique-duplicate.png|frame|none|Duplicate an image. ]]<br />
<br />
<br />
Here are the videos that were used to realize this tutorial:<br />
<br />
[https://youtu.be/2y6aVz0Acx0 ALAN BECKER - Animating Walk Cycles]<br />
<br />
[https://youtu.be/sERBnFpXezM STREAM Morevna Episode 3 Making of Shot 24]<br />
<br />
== Important == <br />
<br />
*The shoes have not been bent to make this tutorial easy to understand, the easiest technique for folding shoes is to use the vertices (image 10), but you can do differently as on the video link n°2.<br />
<br />
*We advise you to read this video at least once to understand the process of creation for the walk.<br />
<br />
*We remind you one last time that we must place the keys in '''"linear"''' interpolation mode.<br />
<br />
<br />
== Links ==<br />
<br />
The zip file containing the parts of this tutorial can be found here: [[Media:Walking-technique-archive.zip|Walking-technique-archive.zip]]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Walk_Cycle/fr&diff=23356Doc:Walk Cycle/fr2019-08-18T15:14:32Z<p>Synme: I retransferred the links here Lipsync</p>
<hr />
<div><!-- Page info --><br />
{{Title|Cycle de Marche}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{Category|ImportArt}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
= Le Fichier de Liste =<br />
Un des aspects les moins évidents de Synfig est contenu dans la calque d'importation des images. En plus d'être en mesure d'importer des fichiers d'image de base, il accepte aussi un fichier "lst". Cette liste de fichiers est tout simplement un fichier de texte qui se compose d'un taux de cadres, suivi d'une liste d'images à afficher. (Si le nombre d'images par seconde n'est pas fourni, il utilise un taux de défaut de 15 images par seconde (FPS).)<br />
<br />
Un exemple, fourni par Vorian Studios, prend quatre images fixes à partir d'un personnage à différentes étapes d'un cycle de marche. Ces images sont affichées avec 4 images par seconde pour donner une séquence répétée qui montre un homme qui marche.<br />
<br />
Voici les images<br> <br />
<gallery widths="104px" heights="216px"><br />
Image:frame_01.jpg|Frame 1<br />
Image:frame_02.jpg|Frame 2<br />
Image:frame_03.jpg|Frame 3<br />
Image:frame_04.jpg|Frame 4<br />
</gallery><br />
<br />
Et voici le début du fichier "lst". <br><br />
<code><br />
FPS 4<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
...</code><br><br />
<br />
== Création d'un Cycle de Marche ==<br />
Voyons comment utiliser ces images pour créer un cycle complet de marche pour un dessin dans Synfig.<br />
<br />
Commencer avec une nouvelle toile (Canvas) et ajouter une durée de quelques secondes à raison de 24 images par seconde (par défaut).Sur la toile, sélectionner le triangle dans le coin supérieur à gauche -> Calques-> Nouveau calque, d'autres, l'importation d'image.<br />
<br />
Cela crée un nouveau calque de l'image importée, mais rien ne s'affiche tant que vous n'avez pas sélectionné le nom du fichier. Aller à la boîte de Paramètres et faites défiler jusqu'à Nom du fichier. Là, vous pouvez naviguer vers le fichier. "lst" et sélectionner Ouvrir. Vous devriez maintenant voir la première image de la liste. Déplacez-vous dans le temps. Cela affichera les images successives de la liste chaque six cadres. Vous pouvez prévisualiser ou rendre tel qu'il est, et obtenir une animation avec une plage d'images trés faible.<br />
<br />
Cependant, le résultat n'est pas très lisse, et les images ne sont pas très flexibles. (Les images peuvent se déplacer, pivoter et s'étirer mais pas les éléments dans les images). Pour avoir un dessin totalement modifiable il faut dessiner par dessus avec Synfig, des éléments tels que des lignes tracées avec l'outil «dessin».<br />
<br />
Je travaille avec une tablette graphique, de sorte que la meilleure solution pour moi est d'utiliser {{l|Draw Tool|l'outil de dessin}}. Retourner au point 0f, sélectionner l'outil de dessin et dessiner sur le personnage. J'ai trouvé plus facile de diviser l'image en plusieurs parties (tête, bras gauche, bras droit, tronc, jambe gauche, jambe droite). Si le formulaire ne vous va pas bien, allez dans le menu Calque et décochez la case de la région. Cela vous permet de voir l'image ci-dessous pendant que vous faites glisser les poignées pour corriger la ligne.<br />
<br />
{{l|Image:Synfig_walk.png|800x324px}}<br />
<br />
Une fois le dessin à 0f fini, aller dans la ligne du temps à 6f. Au lieu d'avoir à les dessiner à nouveau, cette fois nous allons prendre des éléments existants et nous allons simplement les repositionnér pour correspondre à l'image. Encore une fois, si vous désactivez les couches d'une région on peut voir l'image d'édition. Utilisez les outils de rotation et de translation pour déplacer les parties du corps, en adaptant les poignées pour le réglage plus fin (ne pas oublier le changement de "Edit Mode Animation" comme il est décrit dans {{L|Doc:Animation Basics}} ).<br />
<br />
Répéter pour les points du temps 12f et 18f, puis éteindre le calque de l'image importée (décochez la case dans la fenêtre de calques). Maintenant, même si nous n'avons que quatre cadres, grâce à Synfig, nous avons 24 images d'un homme qui marche doucement. Ajouter un calque avec un boucle de temps de 1 seconde et l'homme gardera le rythme sur le terrain pour la durée de votre animation.<br />
<br />
<br />
{{l|Image:walk.gif}}<br />
<br />
Ajouter un calque de déplacement permettra que l'image se déplace d'un endroit à un autre sur la toile.(or moonwalk backwards if you're so inclined.)<br />
<br />
{{l|media:walk.zip|Voici le fichier comprimé}} avec le list file, les 4 images fixes, et le fichier de Synfig fini. Décompressez dans le même place et ouvrez le fichier newwalk.sif avec Synfig.<br />
<br />
<br />
= Personnage de marche, en mouvement (explication complète). =<br />
<br />
Avant de réussir à faire marcher un personnage, il faut connaître les bases<br />
«à savoir»:<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Tutorial/fr Bases de l'Animation par Ossatures] (Pour que vos membres puissent tourner à 360° sans aucun bug).<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Morphing/fr Bases du Morphing par Ossatures] (Pour pouvoir créer un "squelette de marche").<br />
<br />
<br />
*1: Dessiner le personnage dans votre programme de dessin.<br />
*2: Rajouter des contours<br />
<br />
{{l|Image:Walking-technique123.png}}<br />
<br />
*3: Nous bougeons les membres, au meilleur emplacement pour que le "bras" se décompose en:<br />
<br />
Bras: bras, avant-bras, main.<br />
<br />
Jambe: cuisse, mollet, chaussure.<br />
<br />
<br />
<br />
<br />
*4: Une fois que les membres sont à un emplacement dit naturel, (on évite les angles à 90°, car poser des croix de visée sur des membres tordues est plus difficile).<br />
<br />
Quand ils sont presque droits c'est une opération plus simple.<br />
<br />
Il faut décomposer le membre pour pouvoir poser nos "croix de visée".<br />
<br />
{{l|Image:Walking-technique456.png}}<br />
<br />
*5: Nous remplaçons, une main avec le poing fermé, un t-shirt plus large pour que les jambes puissent courir, les chaussures, par quelque chose de plus simple.<br />
<br />
Car il sera plus simple dans l'animation d'avoir des membres basiques.<br />
<br />
<br />
*7: Une fois que tous les membres sont décomposés, et que les croix de visée sont placées.<br />
<br />
{{l|Image:Walking-technique789.png}}<br />
<br />
*8: Ici ce sont des croix simples qui ont été posées, pour pouvoir tourner les membres, de façon rapide.<br />
<br />
(Elles n'ont pas suivi la procédure "croix de visée").<br />
<br />
*9: Si votre programme de dessin, vous permet de faire des rotations à partir d'un point fixe, faites un maximum d'essai, en tournant dans tous les sens votre bonhomme pour vous assurer qu'il n'y a pas de "bug". (test en mouvement).<br />
<br />
Ensuite vous importerais votre dessin final dans "synfig studio".<br />
<br />
<br />
*10: Pour rendre une marche plus réelle, nous pouvons plier la chaussure, le contour orange est un guide pour remettre facilement la chaussure droite.<br />
<br />
Les croix représentent les vertices:<br />
* Les croix vertes ne bougent pas. <br />
* La croix orange a été descendue à la verticale jusqu'à toucher le sol.<br />
* La croix bleue a été bougée sur la droite et les poignées bougées.<br />
<br />
{{l|Image:Walking-technique1011.png}}<br />
<br />
*11: Pour une question de simplicité lors de la création des croix de visée.<br />
<br />
-Le bras gauche est identique au bras droit.<br />
<br />
-La jambe gauche est identique à la jambe droite.<br />
<br />
Les choses qui sont uniques: l'épaule gauche et l'épaule droite (qui sont en rouge) sont différentes ainsi que l'emplacement des croix rapide.<br />
<br />
<br />
<br />
*12: La ligne du haut, est un repère pour que le personnage puisse baisser ou monter la tête.<br />
<br />
Le rectangle violet est le repère qui sera utilisé pour connaitre la "grandeur de marche" il est précisément à placer derrière la chaussure arrière et derrière la chaussure avant, les 2 traits rouges sont des lignes pour être plus précis.<br />
<br />
Vous pouvez importer votre dessin dans "synfig studio" et placer le squelette sur votre personnage.<br />
<br />
{{l|Image:Walking-technique1213.png}}<br />
<br />
*13: Astuce simple pour l'animation, et travaillez avec plus de détails, mettez une opacité (comme sur cette image) vous travaillerez plus facilement.<br />
<br />
<br />
*14: Une fois votre personnage avec un "squelette de marche", placer votre personnage comme sur le schema "personnage 1".<br />
<br />
Ensuite vous déplacerais votre "rectangle violet" pour que votre marche soit identique à "grandeur de marche".<br />
<br />
{{l|Image:Walking-technique14.png}}<br />
<br />
<br />
<br />
<br />
<br />
*15: Voici le schéma utiliser pour l'animation, il sert juste de repère (il est disponible en 2 formats, SVG, SIFZ,) disponible dans le ZIP.<br />
<br />
Pour voir le personnage suivant il faut décocher les autres numéros pour voir "l'étape" suivante.<br />
<br />
Je rappelle que ce "schéma" est juste une "aide" pour comprendre à quel moment il faut placer les images clés.<br />
<br />
Les variantes qui feront que votre marche sera différente sera "la grandeur de marche", et le placement de vos jambes.<br />
<br />
Soit vous ferez un personnage avec une marche, courte, longue, ou en courant.<br />
<br />
À savoir: les personnages 5,6,7,8 sont les mêmes images que les 4ère, les membres ont seulement été inverser dans l'autre sens.<br />
<br />
{{l|Image:Walking-technique15schema.gif}}<br />
<br />
<br />
<br />
<br />
<br />
Toutes les images clés, sont représentées par un numéro il y en a "8" en tout.<br />
<br />
{{l|Image:Walking-technique16.png}}<br />
<br />
Elles doivent toutes être placer avec ''' "24f" et en mode interpolation "linéaire"'''(c'est à la fin de l'animation<br />
que vous changerez le timing, pour accélérer la marche.<br />
<br />
<br />
[[File:Walking-technique-animation.gif|frame|none|Animation lente qui décompose la marche. ]] <br />
<br />
Le résultat final dépend uniquement du schéma (avec les n° sur chaque tête), c'est lui que vous devez modifier pour avoir un résultat qui vous conviendra.<br />
Avec un timing lent de 24f vous verrez tout de suite les erreurs.<br />
<br />
Ici vous voyez une marche avec un timing de 10,18,6,16f pour trouver le temps à utiliser sur l'image clé suivante une astuce simple<br />
a été utiliser, pour 4 images clés, vous supprimer 1 image, et chercher le temps de l'image manquante.<br />
<br />
Exemple:<br />
A B C D<br />
<br />
Vous supprimer l'image clé: "B" vous allez sur l'image A et vous avancer le temps de 1f en 1f de A jusqu'à C, il y aura un moment ou votre image manquante sera identique à B.<br />
Ensuite vous reportez le résultat sur votre animation, et vérifier que le résultat est fluide.<br />
Une fois que c'est fluide vous pouvez vraiment accélérer la marche en divisant par 2 vos chiffres ou accélérer de 70% le résultat.<br />
<br />
<br />
Voici la '''liste des astuces''' a utilisé lors de l'animation dans synfig (avec ces aides il est plus facile d'y arriver):<br />
<br />
*Oignon (pour voir les clés précédentes en opacité).<br />
*{{Shortcut|shift}} + clic gauche souris, et faire GLISSER le groupe avec poignée verte (pour faire glisser sur une ligne).<br />
*Utiliser un rectangle pour avoir la "grandeur de marche"(+2 lignes au bord pour la précision).<br />
*Dessin d'esquisse (pour avoir les jambes et bras exactement identique, et la reporter plus loin).<br />
*Si votre travail est vectoriel, comme dans ce chapitre, utiliser de préférence l'aperçu qualité "1,00", taille 100%, éviter de travailler directement avec un canevas d'une taille UHD (trop grande), <br />
avec une qualité de "1,00" et 100% en taille vous verrez le résultat final, tel qui apparaîtra, dans une "vidéo".<br />
*Quand les 8 étapes du "schéma" sont toutes finies utiliser le "dupliquer" pour reporter les dessins déjà faits. (voir l'image ci-dessous).<br />
<br />
<br />
<br />
Pour faire un dupliquer [http://wiki.synfig.org/Keyframe/fr#Dupliquer_une_image_cl.C3.A9 lien]:<br />
*1 Je sélectionne l'image clé.<br />
*2 Je sélectionne le calque à dupliquer.<br />
*3 Je clique sur le point de passage.<br />
*4 Je duplique.<br />
<br />
[[File:Walking-technique-duplicate.png|frame|none|Dupliquer une image. ]]<br />
<br />
<br />
Voici les vidéos qui ont été utilisés pour réaliser ce tutoriel:<br />
<br />
[https://youtu.be/2y6aVz0Acx0 ALAN BECKER - Animating Walk Cycles]<br />
<br />
[https://youtu.be/sERBnFpXezM STREAM Morevna Episode 3 Making of Shot 24]<br />
<br />
== Important == <br />
<br />
*Les chaussures n'ont pas été pliés pour rendre ce tutoriel facile à comprendre, la technique la plus facile pour plié les chaussures étant d'utiliser les vertices (image 10), mais vous pouvez faire différemment comme sur la vidéo en lien n°2.<br />
<br />
*Nous vous conseillons d'ailleurs de lire cette vidéo au moins 1 fois pour comprendre le procédé de création de la marche.<br />
<br />
*Nous vous rappelons une dernière fois qu'il faut placer les clés en mode interpolation '''"linéaire"'''.<br />
<br />
<br />
== Liens ==<br />
<br />
Le fichier zip contenant les parties de ce tutoriel peut être trouvé ici: [[Media:Walking-technique-archive.zip|Walking-technique-archive.zip]]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Lipsync/fr&diff=23355Doc:Lipsync/fr2019-08-18T15:09:25Z<p>Synme: I put back the preston links, many references are linked to preston in this tutorial, so the links are up to date.</p>
<hr />
<div><!-- Page info --><br />
{{Title|Synchroniser la voix}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
== Commencement ==<br />
<br />
Voici un petit tutoriel sur la façon dont je fais le lipsync. Nous aurons besoin d'un enregistreur audio (par exemple Audacity), le programme Papagayo, un éditeur de vidéo (comme Avidemux), un éditeur de texte (comme gedit) et Synfig (bien sur).<br />
<br />
Je vous conseille de regarder les dessins de Preston Blair. [http://www.angryanimator.com/word/2010/11/26/preston-blair-how-to-animate/ Lien1] [https://animationresources.org/category/preston-blair/ Lien2] [http://www.welcometopixelton.com/downloads/Animation%20by%20Preston%20Blair.pdf Lien3 contenant des dessins pdf de 35 pages]<br />
<br />
<br />
Nous avons fait notre dessin (dans ce cas, en vue de face.)<br />
<br />
1. Enregistrer avec Audacity le texte que vous souhaitez utiliser.<br />
<br />
2. Corriger (si nécessaire) et l'exporter au format wav. Nommer lui "Texto.wav".<br />
<br />
3. Ouvrir le fichier Texto.wav avec le programme Papagayo.<br />
<br />
4. Corriger le texte selon les instructions du programme, et enregistrer (en tant que Texto.pgo)<br />
<br />
5. Après ça, choisir "voix Exporter ..." Nous allons l'enregistrer sous le nom "Texto.dat".<br />
<br />
6. Ouvrir Texto.dat avec "gedit". On note la position des phonèmes correspondants, soit 1 correspond à 1f, 24 correspond à 1s, 25 correspond à 1s 1f, 50 correspond à 2s 2f, etc.<br />
<br />
<br />
Nous connaissons maintenant la position exacte de chaque phonème. Nous voulons toujours de décider combien de poses différentes nous voulons. (On peut utiliser le schéma présenté par Preston Blair, ou bien utilisez votre propre).<br />
<br />
<br />
Venez à notre animation. Nous allons bouger la bouche, sans la tête.<br />
<br />
1. Nous exportons la bouche (si nous suivons la Preston Blair, on devra exporter la tête).<br />
<br />
2. Changer {{l|Waypoint#Interpolation|l'interpolation}} a constant.<br />
<br />
3. Maintenant, sur le {{l|Canvas_Browser_Panel|canevas exportée}}, nous allons dessiner chaque posture dans le frame approprié, en doublant {{l|Keyframe|l'image-clé}} en cas de besoin. Si la vitesse du texte est très rapide, il n'est pas nécessaire d'attirer tous les phonèmes.<br />
<br />
<br />
Nous pouvons dessiner d'abord toutes les phonèmes dans la première seconde et démarrer l'animation après 1s, de sorte que on doit doubler l'image-clé correspondant à tout moment. Dans ce cas, le rendu c'est fait après 1s.<br />
<br />
<br />
Une autre chose que nous pouvons faire est de créer une bibliothèque de phonèmes en profitant des {{l|Group_Layer}} comme dans ce tutoriel: http://vimeo.com/10318012 <br />
<br />
<br />
Ensuite, utilisez l'éditeur de vidéo (Avidemux) pour ajouter de l'audio à la vidéo.<br />
<br />
J'espère que cela peut vous aider.<br />
<br />
== Liens ==<br />
<br />
Lien vidéo: [https://youtu.be/-Y0Ox0cnlL4 Synfig + Papagayo: Lipsync Tutorial]<br />
<br />
<br />
Télécharger Papagayo:<br />
* Windows et Linux: [http://morevnaproject.org/papagayo/ http://morevnaproject.org/papagayo/]<br />
* OSX: [http://my.smithmicro.com/papagayo.html http://my.smithmicro.com/papagayo.html]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Lipsync&diff=23354Doc:Lipsync2019-08-18T15:08:57Z<p>Synme: I put back the preston links, many references are linked to preston in this tutorial, so the links are up to date.</p>
<hr />
<div><!-- Page info --><br />
{{Title|Lipsync}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
== Beginning ==<br />
<br />
This is a small tutorial on how I do the lipsync. We will need an audio recorder (eg Audacity), the program Papagayo, a video editor (like Avidemux), a text editor (like gedit) and of course Synfig.<br />
<br />
I suggest you look at Preston Blair's drawings. [http://www.angryanimator.com/word/2010/11/26/preston-blair-how-to-animate/ Link1] [https://animationresources.org/category/preston-blair/ Link2] [http://www.welcometopixelton.com/downloads/Animation%20by%20Preston%20Blair.pdf Link3 containing 35-page pdf drawings]<br />
<br />
<br />
We have done our draw (in this case in front view).<br />
<br />
1. Record with Audacity the text you want to use.<br />
<br />
2. Then fix it (if necessary) and export it to WAV format. We'll name it "Texto.wav".<br />
<br />
3. Open the file Texto.wav with Papagayo.<br />
<br />
4. Fixed the text according to Papagayo instructions and save as "Texto.pgo".<br />
<br />
5. Once settled choose "voice Export ..." We will save it as "Texto.dat".<br />
<br />
6. Open "Texto.dat" with gedit. We'll note the position of the corresponding phonemes, so 1 corresponds to 1f, 24 corresponds to 1s, 25 corresponds to 1s 1f, 50 corresponds to 2s 2f, etc.<br />
<br />
<br />
Now we know the exact position of each phoneme. We still to decide how many different poses we want. (We can use the outline given by Preston Blair, or use your own).<br />
<br />
<br />
Come to our animation. Let's make the mouth move, without heads.<br />
<br />
1. We {{l|Canvas_Browser_Panel|export}} the mouth (if we follow the Preston Blair draws, we'll export the head).<br />
<br />
2. Change {{l|Waypoint#Interpolation|Interpolation}} to constant.<br />
<br />
3. Now, on the exported canvas, we will draw each pose in the appropriate frame, doubling the {{l|Keyframe|keyframe}} when necessary. If the text speed is very fast, then it's not necessary to draw all the phonemes.<br />
<br />
<br />
Also, we can draw all the phonemes we need in the first second and start the animation from frame 1s, so we will double the corresponding keyframe at any time. In this case we must start to render from 1s.<br />
<br />
Another thing we can do is create a library of phonemes, taking advantage of the Group layer as in this tutorial. http://vimeo.com/10318012 .<br />
<br />
<br />
Then we'll use the video editor (Avidemux) to add audio to video.<br />
<br />
I hope it can help you.<br />
<br />
== Links ==<br />
<br />
Video link: [https://youtu.be/-Y0Ox0cnlL4 Synfig + Papagayo: Lipsync Tutorial]<br />
<br />
<br />
Download Papagayo:<br />
* Windows and Linux: [http://morevnaproject.org/papagayo/ http://morevnaproject.org/papagayo/]<br />
* OSX: [http://my.smithmicro.com/papagayo.html http://my.smithmicro.com/papagayo.html]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Lipsync/fr&diff=23353Doc:Lipsync/fr2019-08-18T14:43:28Z<p>Synme: link removal, no direct link with lips with lypsync, links transfer to : Walk_Cycle which is more suitable see footer walk_cycle</p>
<hr />
<div><!-- Page info --><br />
{{Title|Synchroniser la voix}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
== Commencement ==<br />
<br />
Voici un petit tutoriel sur la façon dont je fais le lipsync. Nous aurons besoin d'un enregistreur audio (par exemple Audacity), le programme Papagayo, un éditeur de vidéo (comme Avidemux), un éditeur de texte (comme gedit) et Synfig (bien sur).<br />
<br />
<br />
<br />
Nous avons fait notre dessin (dans ce cas, en vue de face.)<br />
<br />
1. Enregistrer avec Audacity le texte que vous souhaitez utiliser.<br />
<br />
2. Corriger (si nécessaire) et l'exporter au format wav. Nommer lui "Texto.wav".<br />
<br />
3. Ouvrir le fichier Texto.wav avec le programme Papagayo.<br />
<br />
4. Corriger le texte selon les instructions du programme, et enregistrer (en tant que Texto.pgo)<br />
<br />
5. Après ça, choisir "voix Exporter ..." Nous allons l'enregistrer sous le nom "Texto.dat".<br />
<br />
6. Ouvrir Texto.dat avec "gedit". On note la position des phonèmes correspondants, soit 1 correspond à 1f, 24 correspond à 1s, 25 correspond à 1s 1f, 50 correspond à 2s 2f, etc.<br />
<br />
<br />
Nous connaissons maintenant la position exacte de chaque phonème. Nous voulons toujours de décider combien de poses différentes nous voulons. (On peut utiliser le schéma présenté par Preston Blair, ou bien utilisez votre propre).<br />
<br />
<br />
Venez à notre animation. Nous allons bouger la bouche, sans la tête.<br />
<br />
1. Nous exportons la bouche (si nous suivons la Preston Blair, on devra exporter la tête).<br />
<br />
2. Changer {{l|Waypoint#Interpolation|l'interpolation}} a constant.<br />
<br />
3. Maintenant, sur le {{l|Canvas_Browser_Panel|canevas exportée}}, nous allons dessiner chaque posture dans le frame approprié, en doublant {{l|Keyframe|l'image-clé}} en cas de besoin. Si la vitesse du texte est très rapide, il n'est pas nécessaire d'attirer tous les phonèmes.<br />
<br />
<br />
Nous pouvons dessiner d'abord toutes les phonèmes dans la première seconde et démarrer l'animation après 1s, de sorte que on doit doubler l'image-clé correspondant à tout moment. Dans ce cas, le rendu c'est fait après 1s.<br />
<br />
<br />
Une autre chose que nous pouvons faire est de créer une bibliothèque de phonèmes en profitant des {{l|Group_Layer}} comme dans ce tutoriel: http://vimeo.com/10318012 <br />
<br />
<br />
Ensuite, utilisez l'éditeur de vidéo (Avidemux) pour ajouter de l'audio à la vidéo.<br />
<br />
J'espère que cela peut vous aider.<br />
<br />
== Liens ==<br />
<br />
Lien vidéo: [https://youtu.be/-Y0Ox0cnlL4 Synfig + Papagayo: Lipsync Tutorial]<br />
<br />
<br />
Télécharger Papagayo:<br />
* Windows et Linux: [http://morevnaproject.org/papagayo/ http://morevnaproject.org/papagayo/]<br />
* OSX: [http://my.smithmicro.com/papagayo.html http://my.smithmicro.com/papagayo.html]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Lipsync&diff=23352Doc:Lipsync2019-08-18T14:43:16Z<p>Synme: link removal, no direct link with lips with lypsync, links transfer to : Walk_Cycle which is more suitable see footer walk_cycle</p>
<hr />
<div><!-- Page info --><br />
{{Title|Lipsync}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
== Beginning ==<br />
<br />
This is a small tutorial on how I do the lipsync. We will need an audio recorder (eg Audacity), the program Papagayo, a video editor (like Avidemux), a text editor (like gedit) and of course Synfig.<br />
<br />
<br />
<br />
We have done our draw (in this case in front view).<br />
<br />
1. Record with Audacity the text you want to use.<br />
<br />
2. Then fix it (if necessary) and export it to WAV format. We'll name it "Texto.wav".<br />
<br />
3. Open the file Texto.wav with Papagayo.<br />
<br />
4. Fixed the text according to Papagayo instructions and save as "Texto.pgo".<br />
<br />
5. Once settled choose "voice Export ..." We will save it as "Texto.dat".<br />
<br />
6. Open "Texto.dat" with gedit. We'll note the position of the corresponding phonemes, so 1 corresponds to 1f, 24 corresponds to 1s, 25 corresponds to 1s 1f, 50 corresponds to 2s 2f, etc.<br />
<br />
<br />
Now we know the exact position of each phoneme. We still to decide how many different poses we want. (We can use the outline given by Preston Blair, or use your own).<br />
<br />
<br />
Come to our animation. Let's make the mouth move, without heads.<br />
<br />
1. We {{l|Canvas_Browser_Panel|export}} the mouth (if we follow the Preston Blair draws, we'll export the head).<br />
<br />
2. Change {{l|Waypoint#Interpolation|Interpolation}} to constant.<br />
<br />
3. Now, on the exported canvas, we will draw each pose in the appropriate frame, doubling the {{l|Keyframe|keyframe}} when necessary. If the text speed is very fast, then it's not necessary to draw all the phonemes.<br />
<br />
<br />
Also, we can draw all the phonemes we need in the first second and start the animation from frame 1s, so we will double the corresponding keyframe at any time. In this case we must start to render from 1s.<br />
<br />
Another thing we can do is create a library of phonemes, taking advantage of the Group layer as in this tutorial. http://vimeo.com/10318012 .<br />
<br />
<br />
Then we'll use the video editor (Avidemux) to add audio to video.<br />
<br />
I hope it can help you.<br />
<br />
== Links ==<br />
<br />
Video link: [https://youtu.be/-Y0Ox0cnlL4 Synfig + Papagayo: Lipsync Tutorial]<br />
<br />
<br />
Download Papagayo:<br />
* Windows and Linux: [http://morevnaproject.org/papagayo/ http://morevnaproject.org/papagayo/]<br />
* OSX: [http://my.smithmicro.com/papagayo.html http://my.smithmicro.com/papagayo.html]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Walk_Cycle&diff=23351Doc:Walk Cycle2019-08-18T14:35:03Z<p>Synme: add link</p>
<hr />
<div><!-- Page info --><br />
{{Title|Walk Cycle}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{Category|ImportArt}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Somes of the screenshots needs to be updated with 0.64.0<br />
<br />
= The List File =<br />
One of the less obvious features of Synfig is buried in the Import Image layer. In addition to being able to import some basic still image file types, it will also accept a [[Doc:ListImporter|'lst' file]]. This list file is simply a text file consisting of a framerate followed by a list of images to display. (If no framerate is supplied a default rate of 15 Frames per Second (FPS) is used.)<br />
<br />
An example, provided by Voria Studios, takes 4 still images of a character in various stages of a walk cycle. These images are shown at 4 FPS to give a sequence that when repeated, show a man walking. <br />
<br />
Here are the images<br> <br />
<gallery widths="104px" heights="216px"><br />
Image:frame_01.jpg|Frame 1<br />
Image:frame_02.jpg|Frame 2<br />
Image:frame_03.jpg|Frame 3<br />
Image:frame_04.jpg|Frame 4<br />
</gallery><br />
<br />
And here is the beginning of the 'lst' file. <br><br />
<code><br />
FPS 4<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
...</code><br><br />
<br />
== Constructing a Walk cycle ==<br />
Let's take a look at how we can use these images to create a complete walk cycle for a character in Synfig. <br />
<br />
Start with a new canvas and add a timeline of several seconds with the default framerate of 24 FPS. On the canvas, select the Caret > Layer, New layer, Other, Import Image.<br />
<br />
This creates a new Import Image layer, but nothing will show up until the filename is selected. Go to the Parameters Panel and scroll down to Filename. There you can navigate to the '.lst' file and select open. <br />
Now you should see the first image in the list. Moving forward along the timeline will show successive images from the list every 6 frames. You can preview or render these as is and get a low frame rate animation. <br />
<br />
But the result doesn't look very smooth, and the images are not very flexible. (The images can be translated, rotated and stretched, but no elements within the images can be changed.) To make a fully editable character we need to trace over it with Synfig elements such as Splines. <br />
<br />
I work with a drawing tablet, so the easiest solution for me is to use the {{l|Draw Tool}}. Move back to frame 0, select the draw tool and trace over the character. I find it easiest to break the character down into several regions (Head, Left Arm, Right Arm, Torso, Left Leg, Right Leg). As a helpful tip, if the shape didn't come out quite right, go to the layer menu and uncheck the region checkbox - this will allow you to see the image below as you drag the handles around to correct your line. <br />
<br />
{{l|Image:Synfig_walk.png|800x324px}}<br />
<br />
Once you've finished Frame 0, move along the timeframe to Frame 6. Instead of tracing, this time we're going to take the existing elements and reposition them to match the image. Again, turning off the region layers will allow you to see the image below as you edit them. Use the rotate and translate tools to reposition the body parts, adjusting the line handles for fine tuning. [Don't forget to switch to "Animate Editing Mode" as explained in {{L|Doc:Animation Basics}}.]<br />
<br />
Repeat for Frames 12 & 18, then you can turn off the Import Image layer (uncheck the checkbox in the layer menu). Now, even though we've only drawn 4 keyframes, by the power of Synfig, we can render a smooth 24 frames of man walking. Add a 1 second timeloop layer on top, and the man will pace on the spot for the length of your animation. <br />
<br />
{{l|Image:walk.gif}}<br />
<br />
Adding Translation layer will enable your character to walk from one side of the canvas to the other (or moonwalk backwards if you're so inclined.)<br />
<br />
{{l|media:walk.zip|Here is a zipfile}} with the list file, 4 still images, and the finished Synfig file. Unzip them in the same directory and open the newwalk.sif file with synfig.<br />
<br />
<br />
<br />
<br />
= Character walking, moving (full explanation). =<br />
<br />
Before you succeed in walking a character, you must know the basics<br />
«to know»:<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Tutorial Basic Bone Tutorial] (For your limbs to be able to rotate 360° without any bugs).<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Morphing Basic Bone Morphing] (To create a "walking skeleton").<br />
<br />
<br />
*1: Draw the character in your drawing program.<br />
*2: Add outline<br />
<br />
{{l|Image:Walking-technique123.png}}<br />
<br />
*3: We move the limbs, in the best position so that the "arm" can be decompose into:<br />
<br />
Arm: arm, forearm, hand.<br />
<br />
Leg: thigh, calf, shoe.<br />
<br />
<br />
<br />
*4: Once the limbs are in a natural location, (the angles are avoided at 90°, because it is more difficult to place crosshair on twisted limbs).<br />
<br />
When they are almost straight it is a simpler operation.<br />
<br />
It is necessary to decompose the limb to be able to pose our "crosshair".<br />
<br />
{{l|Image:Walking-technique456.png}}<br />
<br />
*5: We replace, a hand with closed fist, a wider t-shirt so that the legs can run, the shoes, by something simpler.<br />
<br />
Because it will be simpler in animation to have basic members.<br />
<br />
<br />
*7: Once all the limbs are decompose, and the crosshair are placed.<br />
<br />
{{l|Image:Walking-technique789.png}}<br />
<br />
*8: Here are simple fast crosses that have been laid, to be able to turn the limbs, in a fast way.<br />
<br />
(They did not follow process "crosshair").<br />
<br />
*9: If your drawing program, allows you to make rotations from a fixed point, make a maximum of test, by turning your character in all directions to ensure that there is no "bug". (test in motion).<br />
<br />
Then you would import your final drawing into "synfig studio".<br />
<br />
<br />
*10: To make a more real walk, we can bend the shoe, the orange outline is a guide to easily put on the right shoe.<br />
<br />
The crosses represent the vertices:<br />
* Green crosses do not move. <br />
* The orange cross was lowered vertically until it reached the ground.<br />
* The blue cross was moved to the right and the handles moved.<br />
<br />
{{l|Image:Walking-technique1011.png}}<br />
<br />
*11: For simplicity when creating crosshair.<br />
<br />
-The left arm is identical to the right arm.<br />
<br />
-The left leg is identical to the right leg.<br />
<br />
Things that are unique: the left shoulder and the right shoulder (which are red) are different as well as the location of the crosses fast.<br />
<br />
<br />
<br />
*12: The top line, is a marker so that the character can lower or raise the head.<br />
<br />
The purple rectangle is the marker that will be used to know the "walking size" it is precisely to place behind the rear shoe and behind the front shoe, the 2 red lines are lines to be more precise.<br />
<br />
You can import your drawing into "synfig studio" and place the skeleton on your character.<br />
<br />
{{l|Image:Walking-technique1213.png}}<br />
<br />
*13: Simple trick for animation, and work with more details, put an opacity (as in this image) you will work more easily.<br />
<br />
<br />
*14: Once your character with a "walking skeleton", place your character as on the "character 1" schema.<br />
<br />
Then you would move your "purple rectangle" so that your walk is identical to "walking size".<br />
<br />
{{l|Image:Walking-technique14.png}}<br />
<br />
<br />
<br />
<br />
<br />
*15: Here is the schema used for the animation, it serves just as a landmark (it is available in 2 formats, SVG, SIFZ,) available in the ZIP.<br />
<br />
To see the next character you have to uncheck the other numbers to see the "next" step.<br />
<br />
I recall that this "schema" is just an "aid" to understand when to place the key images.<br />
<br />
The variants that will make your walking will be different will be "walking size", and placing your legs.<br />
<br />
So you will make a character with a walk, short, long, or running.<br />
<br />
To know: the characters 5,6,7,8 are the same images as the 4th, the limbs have only been reversing the other way.<br />
<br />
{{l|Image:Walking-technique15schema.gif}}<br />
<br />
<br />
<br />
<br />
<br />
All keyframes, are represented by a number there are "8" in all.<br />
<br />
{{l|Image:Walking-technique16.png}}<br />
<br />
They must all be placed with ''' "24f" and in interpolation mode "linear"'''(it is at the end of the animation that you will change the time, to accelerate the walk.<br />
<br />
<br />
[[File:Walking-technique-animation.gif|frame|none|Slow animation that decomposes walking. ]] <br />
<br />
The final result depends only on the schema (with the numbers on each head), you must modify it to have a result that will suit you.<br />
With a slow time of 24f you will immediately see the errors.<br />
<br />
Here you see a walk with a time of 10,18,6,16f to find the time to use on the following keyframe a simple trick has been used, for 4 keyframes, you delete 1 image, and search for the time of the missing image.<br />
<br />
Example:<br />
A B C D<br />
<br />
You delete the keyframe: "B" you go to image A and you advance the time from 1f to 1f from A to C, there will be a time when your missing image will be the same as B.<br />
Then you report the result on your animation, and check that the result is smooth.<br />
Once it is fluid you can really accelerate the walk by dividing your numbers by 2 or accelerate by 70% the result.<br />
<br />
<br />
Here is '''list of tricks''' used during the animation in synfig (with these helps it is easier to succeed):<br />
<br />
*Onion (to see the previous keys in opacity).<br />
*{{Shortcut|shift}} + left mouse click, and SLIDE the group with green handle (to slide on a line).<br />
*Use a rectangle to have the "walking size"(+2 lines at the edge for precision).<br />
*Drawing sketch (to have the legs and arms exactly the same, and report it further).<br />
*If your work is vectorial, as in this chapter, preferably use the quality preview "1,00", taille 100%, avoid working directly with a canvas of a size UHD (too large), <br />
with a quality of "1.00" and 100% in size you will see the final result, as will appear, in a "video".<br />
*When the 8 steps of the "schema" are all finished use the "duplicate" to copy the already made drawings. (See image below).<br />
<br />
<br />
<br />
To make a duplicate [http://wiki.synfig.org/Keyframe#Duplicate_a_keyframe link]:<br />
*1 I select the keyframe.<br />
*2 I select the layer to duplicate.<br />
*3 I click on the waypoint.<br />
*4 I duplicate.<br />
<br />
[[File:Walking-technique-duplicate.png|frame|none|Duplicate an image. ]]<br />
<br />
<br />
Here are the videos that were used to realize this tutorial:<br />
<br />
[https://youtu.be/2y6aVz0Acx0 ALAN BECKER - Animating Walk Cycles]<br />
<br />
[https://youtu.be/sERBnFpXezM STREAM Morevna Episode 3 Making of Shot 24]<br />
<br />
== Important == <br />
<br />
*The shoes have not been bent to make this tutorial easy to understand, the easiest technique for folding shoes is to use the vertices (image 10), but you can do differently as on the video link n°2.<br />
<br />
*We advise you to read this video at least once to understand the process of creation for the walk.<br />
<br />
*We remind you one last time that we must place the keys in '''"linear"''' interpolation mode.<br />
<br />
<br />
== Links ==<br />
<br />
The zip file containing the parts of this tutorial can be found here: [[Media:Walking-technique-archive.zip|Walking-technique-archive.zip]]<br />
<br />
''You can learn more with Preston Blair's drawings'':<br />
[http://www.angryanimator.com/word/2010/11/26/preston-blair-how-to-animate/ Link1] [https://animationresources.org/category/preston-blair/ Link2] [http://www.welcometopixelton.com/downloads/Animation%20by%20Preston%20Blair.pdf Link3 containing 35-page pdf drawings]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Walk_Cycle/fr&diff=23350Doc:Walk Cycle/fr2019-08-18T14:34:24Z<p>Synme: add link</p>
<hr />
<div><!-- Page info --><br />
{{Title|Cycle de Marche}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{Category|ImportArt}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
= Le Fichier de Liste =<br />
Un des aspects les moins évidents de Synfig est contenu dans la calque d'importation des images. En plus d'être en mesure d'importer des fichiers d'image de base, il accepte aussi un fichier "lst". Cette liste de fichiers est tout simplement un fichier de texte qui se compose d'un taux de cadres, suivi d'une liste d'images à afficher. (Si le nombre d'images par seconde n'est pas fourni, il utilise un taux de défaut de 15 images par seconde (FPS).)<br />
<br />
Un exemple, fourni par Vorian Studios, prend quatre images fixes à partir d'un personnage à différentes étapes d'un cycle de marche. Ces images sont affichées avec 4 images par seconde pour donner une séquence répétée qui montre un homme qui marche.<br />
<br />
Voici les images<br> <br />
<gallery widths="104px" heights="216px"><br />
Image:frame_01.jpg|Frame 1<br />
Image:frame_02.jpg|Frame 2<br />
Image:frame_03.jpg|Frame 3<br />
Image:frame_04.jpg|Frame 4<br />
</gallery><br />
<br />
Et voici le début du fichier "lst". <br><br />
<code><br />
FPS 4<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
...</code><br><br />
<br />
== Création d'un Cycle de Marche ==<br />
Voyons comment utiliser ces images pour créer un cycle complet de marche pour un dessin dans Synfig.<br />
<br />
Commencer avec une nouvelle toile (Canvas) et ajouter une durée de quelques secondes à raison de 24 images par seconde (par défaut).Sur la toile, sélectionner le triangle dans le coin supérieur à gauche -> Calques-> Nouveau calque, d'autres, l'importation d'image.<br />
<br />
Cela crée un nouveau calque de l'image importée, mais rien ne s'affiche tant que vous n'avez pas sélectionné le nom du fichier. Aller à la boîte de Paramètres et faites défiler jusqu'à Nom du fichier. Là, vous pouvez naviguer vers le fichier. "lst" et sélectionner Ouvrir. Vous devriez maintenant voir la première image de la liste. Déplacez-vous dans le temps. Cela affichera les images successives de la liste chaque six cadres. Vous pouvez prévisualiser ou rendre tel qu'il est, et obtenir une animation avec une plage d'images trés faible.<br />
<br />
Cependant, le résultat n'est pas très lisse, et les images ne sont pas très flexibles. (Les images peuvent se déplacer, pivoter et s'étirer mais pas les éléments dans les images). Pour avoir un dessin totalement modifiable il faut dessiner par dessus avec Synfig, des éléments tels que des lignes tracées avec l'outil «dessin».<br />
<br />
Je travaille avec une tablette graphique, de sorte que la meilleure solution pour moi est d'utiliser {{l|Draw Tool|l'outil de dessin}}. Retourner au point 0f, sélectionner l'outil de dessin et dessiner sur le personnage. J'ai trouvé plus facile de diviser l'image en plusieurs parties (tête, bras gauche, bras droit, tronc, jambe gauche, jambe droite). Si le formulaire ne vous va pas bien, allez dans le menu Calque et décochez la case de la région. Cela vous permet de voir l'image ci-dessous pendant que vous faites glisser les poignées pour corriger la ligne.<br />
<br />
{{l|Image:Synfig_walk.png|800x324px}}<br />
<br />
Une fois le dessin à 0f fini, aller dans la ligne du temps à 6f. Au lieu d'avoir à les dessiner à nouveau, cette fois nous allons prendre des éléments existants et nous allons simplement les repositionnér pour correspondre à l'image. Encore une fois, si vous désactivez les couches d'une région on peut voir l'image d'édition. Utilisez les outils de rotation et de translation pour déplacer les parties du corps, en adaptant les poignées pour le réglage plus fin (ne pas oublier le changement de "Edit Mode Animation" comme il est décrit dans {{L|Doc:Animation Basics}} ).<br />
<br />
Répéter pour les points du temps 12f et 18f, puis éteindre le calque de l'image importée (décochez la case dans la fenêtre de calques). Maintenant, même si nous n'avons que quatre cadres, grâce à Synfig, nous avons 24 images d'un homme qui marche doucement. Ajouter un calque avec un boucle de temps de 1 seconde et l'homme gardera le rythme sur le terrain pour la durée de votre animation.<br />
<br />
<br />
{{l|Image:walk.gif}}<br />
<br />
Ajouter un calque de déplacement permettra que l'image se déplace d'un endroit à un autre sur la toile.(or moonwalk backwards if you're so inclined.)<br />
<br />
{{l|media:walk.zip|Voici le fichier comprimé}} avec le list file, les 4 images fixes, et le fichier de Synfig fini. Décompressez dans le même place et ouvrez le fichier newwalk.sif avec Synfig.<br />
<br />
<br />
= Personnage de marche, en mouvement (explication complète). =<br />
<br />
Avant de réussir à faire marcher un personnage, il faut connaître les bases<br />
«à savoir»:<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Tutorial/fr Bases de l'Animation par Ossatures] (Pour que vos membres puissent tourner à 360° sans aucun bug).<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Morphing/fr Bases du Morphing par Ossatures] (Pour pouvoir créer un "squelette de marche").<br />
<br />
<br />
*1: Dessiner le personnage dans votre programme de dessin.<br />
*2: Rajouter des contours<br />
<br />
{{l|Image:Walking-technique123.png}}<br />
<br />
*3: Nous bougeons les membres, au meilleur emplacement pour que le "bras" se décompose en:<br />
<br />
Bras: bras, avant-bras, main.<br />
<br />
Jambe: cuisse, mollet, chaussure.<br />
<br />
<br />
<br />
<br />
*4: Une fois que les membres sont à un emplacement dit naturel, (on évite les angles à 90°, car poser des croix de visée sur des membres tordues est plus difficile).<br />
<br />
Quand ils sont presque droits c'est une opération plus simple.<br />
<br />
Il faut décomposer le membre pour pouvoir poser nos "croix de visée".<br />
<br />
{{l|Image:Walking-technique456.png}}<br />
<br />
*5: Nous remplaçons, une main avec le poing fermé, un t-shirt plus large pour que les jambes puissent courir, les chaussures, par quelque chose de plus simple.<br />
<br />
Car il sera plus simple dans l'animation d'avoir des membres basiques.<br />
<br />
<br />
*7: Une fois que tous les membres sont décomposés, et que les croix de visée sont placées.<br />
<br />
{{l|Image:Walking-technique789.png}}<br />
<br />
*8: Ici ce sont des croix simples qui ont été posées, pour pouvoir tourner les membres, de façon rapide.<br />
<br />
(Elles n'ont pas suivi la procédure "croix de visée").<br />
<br />
*9: Si votre programme de dessin, vous permet de faire des rotations à partir d'un point fixe, faites un maximum d'essai, en tournant dans tous les sens votre bonhomme pour vous assurer qu'il n'y a pas de "bug". (test en mouvement).<br />
<br />
Ensuite vous importerais votre dessin final dans "synfig studio".<br />
<br />
<br />
*10: Pour rendre une marche plus réelle, nous pouvons plier la chaussure, le contour orange est un guide pour remettre facilement la chaussure droite.<br />
<br />
Les croix représentent les vertices:<br />
* Les croix vertes ne bougent pas. <br />
* La croix orange a été descendue à la verticale jusqu'à toucher le sol.<br />
* La croix bleue a été bougée sur la droite et les poignées bougées.<br />
<br />
{{l|Image:Walking-technique1011.png}}<br />
<br />
*11: Pour une question de simplicité lors de la création des croix de visée.<br />
<br />
-Le bras gauche est identique au bras droit.<br />
<br />
-La jambe gauche est identique à la jambe droite.<br />
<br />
Les choses qui sont uniques: l'épaule gauche et l'épaule droite (qui sont en rouge) sont différentes ainsi que l'emplacement des croix rapide.<br />
<br />
<br />
<br />
*12: La ligne du haut, est un repère pour que le personnage puisse baisser ou monter la tête.<br />
<br />
Le rectangle violet est le repère qui sera utilisé pour connaitre la "grandeur de marche" il est précisément à placer derrière la chaussure arrière et derrière la chaussure avant, les 2 traits rouges sont des lignes pour être plus précis.<br />
<br />
Vous pouvez importer votre dessin dans "synfig studio" et placer le squelette sur votre personnage.<br />
<br />
{{l|Image:Walking-technique1213.png}}<br />
<br />
*13: Astuce simple pour l'animation, et travaillez avec plus de détails, mettez une opacité (comme sur cette image) vous travaillerez plus facilement.<br />
<br />
<br />
*14: Une fois votre personnage avec un "squelette de marche", placer votre personnage comme sur le schema "personnage 1".<br />
<br />
Ensuite vous déplacerais votre "rectangle violet" pour que votre marche soit identique à "grandeur de marche".<br />
<br />
{{l|Image:Walking-technique14.png}}<br />
<br />
<br />
<br />
<br />
<br />
*15: Voici le schéma utiliser pour l'animation, il sert juste de repère (il est disponible en 2 formats, SVG, SIFZ,) disponible dans le ZIP.<br />
<br />
Pour voir le personnage suivant il faut décocher les autres numéros pour voir "l'étape" suivante.<br />
<br />
Je rappelle que ce "schéma" est juste une "aide" pour comprendre à quel moment il faut placer les images clés.<br />
<br />
Les variantes qui feront que votre marche sera différente sera "la grandeur de marche", et le placement de vos jambes.<br />
<br />
Soit vous ferez un personnage avec une marche, courte, longue, ou en courant.<br />
<br />
À savoir: les personnages 5,6,7,8 sont les mêmes images que les 4ère, les membres ont seulement été inverser dans l'autre sens.<br />
<br />
{{l|Image:Walking-technique15schema.gif}}<br />
<br />
<br />
<br />
<br />
<br />
Toutes les images clés, sont représentées par un numéro il y en a "8" en tout.<br />
<br />
{{l|Image:Walking-technique16.png}}<br />
<br />
Elles doivent toutes être placer avec ''' "24f" et en mode interpolation "linéaire"'''(c'est à la fin de l'animation<br />
que vous changerez le timing, pour accélérer la marche.<br />
<br />
<br />
[[File:Walking-technique-animation.gif|frame|none|Animation lente qui décompose la marche. ]] <br />
<br />
Le résultat final dépend uniquement du schéma (avec les n° sur chaque tête), c'est lui que vous devez modifier pour avoir un résultat qui vous conviendra.<br />
Avec un timing lent de 24f vous verrez tout de suite les erreurs.<br />
<br />
Ici vous voyez une marche avec un timing de 10,18,6,16f pour trouver le temps à utiliser sur l'image clé suivante une astuce simple<br />
a été utiliser, pour 4 images clés, vous supprimer 1 image, et chercher le temps de l'image manquante.<br />
<br />
Exemple:<br />
A B C D<br />
<br />
Vous supprimer l'image clé: "B" vous allez sur l'image A et vous avancer le temps de 1f en 1f de A jusqu'à C, il y aura un moment ou votre image manquante sera identique à B.<br />
Ensuite vous reportez le résultat sur votre animation, et vérifier que le résultat est fluide.<br />
Une fois que c'est fluide vous pouvez vraiment accélérer la marche en divisant par 2 vos chiffres ou accélérer de 70% le résultat.<br />
<br />
<br />
Voici la '''liste des astuces''' a utilisé lors de l'animation dans synfig (avec ces aides il est plus facile d'y arriver):<br />
<br />
*Oignon (pour voir les clés précédentes en opacité).<br />
*{{Shortcut|shift}} + clic gauche souris, et faire GLISSER le groupe avec poignée verte (pour faire glisser sur une ligne).<br />
*Utiliser un rectangle pour avoir la "grandeur de marche"(+2 lignes au bord pour la précision).<br />
*Dessin d'esquisse (pour avoir les jambes et bras exactement identique, et la reporter plus loin).<br />
*Si votre travail est vectoriel, comme dans ce chapitre, utiliser de préférence l'aperçu qualité "1,00", taille 100%, éviter de travailler directement avec un canevas d'une taille UHD (trop grande), <br />
avec une qualité de "1,00" et 100% en taille vous verrez le résultat final, tel qui apparaîtra, dans une "vidéo".<br />
*Quand les 8 étapes du "schéma" sont toutes finies utiliser le "dupliquer" pour reporter les dessins déjà faits. (voir l'image ci-dessous).<br />
<br />
<br />
<br />
Pour faire un dupliquer [http://wiki.synfig.org/Keyframe/fr#Dupliquer_une_image_cl.C3.A9 lien]:<br />
*1 Je sélectionne l'image clé.<br />
*2 Je sélectionne le calque à dupliquer.<br />
*3 Je clique sur le point de passage.<br />
*4 Je duplique.<br />
<br />
[[File:Walking-technique-duplicate.png|frame|none|Dupliquer une image. ]]<br />
<br />
<br />
Voici les vidéos qui ont été utilisés pour réaliser ce tutoriel:<br />
<br />
[https://youtu.be/2y6aVz0Acx0 ALAN BECKER - Animating Walk Cycles]<br />
<br />
[https://youtu.be/sERBnFpXezM STREAM Morevna Episode 3 Making of Shot 24]<br />
<br />
== Important == <br />
<br />
*Les chaussures n'ont pas été pliés pour rendre ce tutoriel facile à comprendre, la technique la plus facile pour plié les chaussures étant d'utiliser les vertices (image 10), mais vous pouvez faire différemment comme sur la vidéo en lien n°2.<br />
<br />
*Nous vous conseillons d'ailleurs de lire cette vidéo au moins 1 fois pour comprendre le procédé de création de la marche.<br />
<br />
*Nous vous rappelons une dernière fois qu'il faut placer les clés en mode interpolation '''"linéaire"'''.<br />
<br />
<br />
== Liens ==<br />
<br />
Le fichier zip contenant les parties de ce tutoriel peut être trouvé ici: [[Media:Walking-technique-archive.zip|Walking-technique-archive.zip]]<br />
<br />
''Vous pouvez apprendre plus avec les dessins de Preston Blair'':<br />
[http://www.angryanimator.com/word/2010/11/26/preston-blair-how-to-animate/ Lien1] [https://animationresources.org/category/preston-blair/ Lien2] [http://www.welcometopixelton.com/downloads/Animation%20by%20Preston%20Blair.pdf Lien3 contenant des dessins pdf de 35 pages]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Lipsync/fr&diff=23349Doc:Lipsync/fr2019-08-18T13:48:25Z<p>Synme: add link</p>
<hr />
<div><!-- Page info --><br />
{{Title|Synchroniser la voix}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
== Commencement ==<br />
<br />
Voici un petit tutoriel sur la façon dont je fais le lipsync. Nous aurons besoin d'un enregistreur audio (par exemple Audacity), le programme Papagayo, un éditeur de vidéo (comme Avidemux), un éditeur de texte (comme gedit) et Synfig (bien sur).<br />
<br />
Je vous conseille de regarder les dessins de Preston Blair. http://www.animationarchive.org/2006/05/media-preston-blairs-animation-1st.html<br />
<br />
<br />
Nous avons fait notre dessin (dans ce cas, en vue de face.)<br />
<br />
1. Enregistrer avec Audacity le texte que vous souhaitez utiliser.<br />
<br />
2. Corriger (si nécessaire) et l'exporter au format wav. Nommer lui "Texto.wav".<br />
<br />
3. Ouvrir le fichier Texto.wav avec le programme Papagayo.<br />
<br />
4. Corriger le texte selon les instructions du programme, et enregistrer (en tant que Texto.pgo)<br />
<br />
5. Après ça, choisir "voix Exporter ..." Nous allons l'enregistrer sous le nom "Texto.dat".<br />
<br />
6. Ouvrir Texto.dat avec "gedit". On note la position des phonèmes correspondants, soit 1 correspond à 1f, 24 correspond à 1s, 25 correspond à 1s 1f, 50 correspond à 2s 2f, etc.<br />
<br />
<br />
Nous connaissons maintenant la position exacte de chaque phonème. Nous voulons toujours de décider combien de poses différentes nous voulons. (On peut utiliser le schéma présenté par Preston Blair, ou bien utilisez votre propre).<br />
<br />
<br />
Venez à notre animation. Nous allons bouger la bouche, sans la tête.<br />
<br />
1. Nous exportons la bouche (si nous suivons la Preston Blair, on devra exporter la tête).<br />
<br />
2. Changer {{l|Waypoint#Interpolation|l'interpolation}} a constant.<br />
<br />
3. Maintenant, sur le {{l|Canvas_Browser_Panel|canevas exportée}}, nous allons dessiner chaque posture dans le frame approprié, en doublant {{l|Keyframe|l'image-clé}} en cas de besoin. Si la vitesse du texte est très rapide, il n'est pas nécessaire d'attirer tous les phonèmes.<br />
<br />
<br />
Nous pouvons dessiner d'abord toutes les phonèmes dans la première seconde et démarrer l'animation après 1s, de sorte que on doit doubler l'image-clé correspondant à tout moment. Dans ce cas, le rendu c'est fait après 1s.<br />
<br />
<br />
Une autre chose que nous pouvons faire est de créer une bibliothèque de phonèmes en profitant des {{l|Group_Layer}} comme dans ce tutoriel: http://vimeo.com/10318012 <br />
<br />
<br />
Ensuite, utilisez l'éditeur de vidéo (Avidemux) pour ajouter de l'audio à la vidéo.<br />
<br />
J'espère que cela peut vous aider.<br />
<br />
== Liens ==<br />
<br />
Lien vidéo: [https://youtu.be/-Y0Ox0cnlL4 Synfig + Papagayo: Lipsync Tutorial]<br />
<br />
<br />
Télécharger Papagayo:<br />
* Windows et Linux: [http://morevnaproject.org/papagayo/ http://morevnaproject.org/papagayo/]<br />
* OSX: [http://my.smithmicro.com/papagayo.html http://my.smithmicro.com/papagayo.html]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Lipsync&diff=23348Doc:Lipsync2019-08-18T13:48:00Z<p>Synme: add link</p>
<hr />
<div><!-- Page info --><br />
{{Title|Lipsync}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
== Beginning ==<br />
<br />
This is a small tutorial on how I do the lipsync. We will need an audio recorder (eg Audacity), the program Papagayo, a video editor (like Avidemux), a text editor (like gedit) and of course Synfig.<br />
<br />
I advise to look at the pictures of Preston Blair. http://www.animationarchive.org/2006/05/media-preston-blairs-animation-1st.html<br />
<br />
We have done our draw (in this case in front view).<br />
<br />
1. Record with Audacity the text you want to use.<br />
<br />
2. Then fix it (if necessary) and export it to WAV format. We'll name it "Texto.wav".<br />
<br />
3. Open the file Texto.wav with Papagayo.<br />
<br />
4. Fixed the text according to Papagayo instructions and save as "Texto.pgo".<br />
<br />
5. Once settled choose "voice Export ..." We will save it as "Texto.dat".<br />
<br />
6. Open "Texto.dat" with gedit. We'll note the position of the corresponding phonemes, so 1 corresponds to 1f, 24 corresponds to 1s, 25 corresponds to 1s 1f, 50 corresponds to 2s 2f, etc.<br />
<br />
<br />
Now we know the exact position of each phoneme. We still to decide how many different poses we want. (We can use the outline given by Preston Blair, or use your own).<br />
<br />
<br />
Come to our animation. Let's make the mouth move, without heads.<br />
<br />
1. We {{l|Canvas_Browser_Panel|export}} the mouth (if we follow the Preston Blair draws, we'll export the head).<br />
<br />
2. Change {{l|Waypoint#Interpolation|Interpolation}} to constant.<br />
<br />
3. Now, on the exported canvas, we will draw each pose in the appropriate frame, doubling the {{l|Keyframe|keyframe}} when necessary. If the text speed is very fast, then it's not necessary to draw all the phonemes.<br />
<br />
<br />
Also, we can draw all the phonemes we need in the first second and start the animation from frame 1s, so we will double the corresponding keyframe at any time. In this case we must start to render from 1s.<br />
<br />
Another thing we can do is create a library of phonemes, taking advantage of the Group layer as in this tutorial. http://vimeo.com/10318012 .<br />
<br />
<br />
Then we'll use the video editor (Avidemux) to add audio to video.<br />
<br />
I hope it can help you.<br />
<br />
== Links ==<br />
<br />
Video link: [https://youtu.be/-Y0Ox0cnlL4 Synfig + Papagayo: Lipsync Tutorial]<br />
<br />
<br />
Download Papagayo:<br />
* Windows and Linux: [http://morevnaproject.org/papagayo/ http://morevnaproject.org/papagayo/]<br />
* OSX: [http://my.smithmicro.com/papagayo.html http://my.smithmicro.com/papagayo.html]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Lipsync&diff=23347Doc:Lipsync2019-08-18T13:23:15Z<p>Synme: add link</p>
<hr />
<div><!-- Page info --><br />
{{Title|Lipsync}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
== Beginning ==<br />
<br />
This is a small tutorial on how I do the lipsync. We will need an audio recorder (eg Audacity), the program Papagayo, a video editor (like Avidemux), a text editor (like gedit) and of course Synfig.<br />
<br />
I advise to look at the pictures of Preston Blair. http://www.animationarchive.org/2006/05/media-preston-blairs-animation-1st.html<br />
<br />
We have done our draw (in this case in front view).<br />
<br />
1. Record with Audacity the text you want to use.<br />
<br />
2. Then fix it (if necessary) and export it to WAV format. We'll name it "Texto.wav".<br />
<br />
3. Open the file Texto.wav with Papagayo.<br />
<br />
4. Fixed the text according to Papagayo instructions and save as "Texto.pgo".<br />
<br />
5. Once settled choose "voice Export ..." We will save it as "Texto.dat".<br />
<br />
6. Open "Texto.dat" with gedit. We'll note the position of the corresponding phonemes, so 1 corresponds to 1f, 24 corresponds to 1s, 25 corresponds to 1s 1f, 50 corresponds to 2s 2f, etc.<br />
<br />
<br />
Now we know the exact position of each phoneme. We still to decide how many different poses we want. (We can use the outline given by Preston Blair, or use your own).<br />
<br />
<br />
Come to our animation. Let's make the mouth move, without heads.<br />
<br />
1. We {{l|Canvas_Browser_Panel|export}} the mouth (if we follow the Preston Blair draws, we'll export the head).<br />
<br />
2. Change {{l|Waypoint#Interpolation|Interpolation}} to constant.<br />
<br />
3. Now, on the exported canvas, we will draw each pose in the appropriate frame, doubling the {{l|Keyframe|keyframe}} when necessary. If the text speed is very fast, then it's not necessary to draw all the phonemes.<br />
<br />
<br />
Also, we can draw all the phonemes we need in the first second and start the animation from frame 1s, so we will double the corresponding keyframe at any time. In this case we must start to render from 1s.<br />
<br />
Another thing we can do is create a library of phonemes, taking advantage of the Group layer as in this tutorial. http://vimeo.com/10318012 .<br />
<br />
<br />
Then we'll use the video editor (Avidemux) to add audio to video.<br />
<br />
I hope it can help you.<br />
<br />
== Links ==<br />
<br />
Video link: [https://youtu.be/-Y0Ox0cnlL4 Synfig + Papagayo: Lipsync Tutorial]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Lipsync/fr&diff=23346Doc:Lipsync/fr2019-08-18T13:22:23Z<p>Synme: add link</p>
<hr />
<div><!-- Page info --><br />
{{Title|Synchroniser la voix}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
== Commencement ==<br />
<br />
Voici un petit tutoriel sur la façon dont je fais le lipsync. Nous aurons besoin d'un enregistreur audio (par exemple Audacity), le programme Papagayo, un éditeur de vidéo (comme Avidemux), un éditeur de texte (comme gedit) et Synfig (bien sur).<br />
<br />
Je vous conseille de regarder les dessins de Preston Blair. http://www.animationarchive.org/2006/05/media-preston-blairs-animation-1st.html<br />
<br />
<br />
Nous avons fait notre dessin (dans ce cas, en vue de face.)<br />
<br />
1. Enregistrer avec Audacity le texte que vous souhaitez utiliser.<br />
<br />
2. Corriger (si nécessaire) et l'exporter au format wav. Nommer lui "Texto.wav".<br />
<br />
3. Ouvrir le fichier Texto.wav avec le programme Papagayo.<br />
<br />
4. Corriger le texte selon les instructions du programme, et enregistrer (en tant que Texto.pgo)<br />
<br />
5. Après ça, choisir "voix Exporter ..." Nous allons l'enregistrer sous le nom "Texto.dat".<br />
<br />
6. Ouvrir Texto.dat avec "gedit". On note la position des phonèmes correspondants, soit 1 correspond à 1f, 24 correspond à 1s, 25 correspond à 1s 1f, 50 correspond à 2s 2f, etc.<br />
<br />
<br />
Nous connaissons maintenant la position exacte de chaque phonème. Nous voulons toujours de décider combien de poses différentes nous voulons. (On peut utiliser le schéma présenté par Preston Blair, ou bien utilisez votre propre).<br />
<br />
<br />
Venez à notre animation. Nous allons bouger la bouche, sans la tête.<br />
<br />
1. Nous exportons la bouche (si nous suivons la Preston Blair, on devra exporter la tête).<br />
<br />
2. Changer {{l|Waypoint#Interpolation|l'interpolation}} a constant.<br />
<br />
3. Maintenant, sur le {{l|Canvas_Browser_Panel|canevas exportée}}, nous allons dessiner chaque posture dans le frame approprié, en doublant {{l|Keyframe|l'image-clé}} en cas de besoin. Si la vitesse du texte est très rapide, il n'est pas nécessaire d'attirer tous les phonèmes.<br />
<br />
<br />
Nous pouvons dessiner d'abord toutes les phonèmes dans la première seconde et démarrer l'animation après 1s, de sorte que on doit doubler l'image-clé correspondant à tout moment. Dans ce cas, le rendu c'est fait après 1s.<br />
<br />
<br />
Une autre chose que nous pouvons faire est de créer une bibliothèque de phonèmes en profitant des {{l|Group_Layer}} comme dans ce tutoriel: http://vimeo.com/10318012 <br />
<br />
<br />
Ensuite, utilisez l'éditeur de vidéo (Avidemux) pour ajouter de l'audio à la vidéo.<br />
<br />
J'espère que cela peut vous aider.<br />
<br />
== Liens ==<br />
<br />
Lien vidéo: [https://youtu.be/-Y0Ox0cnlL4 Synfig + Papagayo: Lipsync Tutorial]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Video_Tutorials&diff=23345Doc:Video Tutorials2019-08-10T15:55:25Z<p>Synme: deletion of 3 video links, really shitty, does not bring anything and explains nothing everything is to be thrown away</p>
<hr />
<div><!-- Page info --><br />
{{Title|Video Tutorials}}<br />
{{Category|Tutorials}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Video tutorials could be updated with last version!<br />
<br />
In this section you'll find some basic video tutorials of the most common tasks in Synfig. Feel free to ask here for any new video tutorial.<br />
<br />
= Basics of Animations =<br />
<br />
In this sections, how to use simple part of Synfig studio, mostly one Layer usage.<br />
<br />
== Animation Basics ==<br />
<br />
[http://www.youtube.com/watch?v=WUxn9jqFJrg Synfig basic animation tutorial]: This video tutorial shows how to do a (very) basic animation. The tutorial roughly follows the [[Doc:Animation_Basics]] tutorial.<br />
<br />
<videoflash>WUxn9jqFJrg|425|344</videoflash><br />
<br />
<br />
== Creating a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=bQ-ku0bA23A Creating a Spline]: This small video tutorial shows the basic steps to build a Spline. Video editing was done using Synfig itself.<br />
<br />
<videoflash>bQ-ku0bA23A|425|350</videoflash><br />
<br />
<br />
== Draw a Circle Rectangle Star Spline ==<br />
<br />
[https://youtu.be/FBnBE9t3Jd8 Draw a Circle Rectangle Star Spline]: Short tutorial about creating Circle Rectangle Star and a Spline.<br />
<br />
== Curve warp demonstration ==<br />
<br />
I'd like to introduce few videos about my experiments with curve warp deformation layer. Unfortunately I'm bad translator and I sounded it in russian, but I hope video is clear enough as is. If any [http://synfig.org/forums/viewtopic.php?f=6&t=4229 question] ask me I'll try to explain.<br />
<br />
=== [https://www.youtube.com/watch?v=Gz7gSBVHnjo Part 1 of 3] ===<br />
<videoflash>Gz7gSBVHnjo|425|344</videoflash><br />
=== [https://www.youtube.com/watch?v=Y5GFP_eU_Mk Part 2 of 3] ===<br />
<videoflash>Y5GFP_eU_Mk|425|344</videoflash><br />
=== [Planned Part 3 of 3] ===<br />
<br />
== Blend Test ==<br />
<br />
[http://www.youtube.com/watch?v=_n23xOvONb8 Synfig Blend Test]: 22 blend methods times 15 layers = 330 boring frames. At 0.55 fps = 10 boring minutes. Enjoy!<br />
<br />
<videoflash>_n23xOvONb8|425|350</videoflash><br />
<br />
<br />
= Animation =<br />
<br />
== Flower Animation ==<br />
<br />
This video tutorial shows how to do an animation of a growing flower. The tutorial roughly follows the written [[Doc:Flower_Animation]] tutorial.<br />
<br />
=== [http://www.youtube.com/watch?v=U1EjObyN1pc Part 1 of 4] ===<br />
<br />
<videoflash>U1EjObyN1pc|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=oSAilqEKEJs Part 2 of 4] ===<br />
<br />
<videoflash>oSAilqEKEJs|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=STP01dOxvMU Part 3 of 4] ===<br />
<br />
<videoflash>STP01dOxvMU|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=8dcAqZxwOWM Part 4 of 4] ===<br />
<br />
<videoflash>8dcAqZxwOWM|425|344</videoflash><br />
<br />
== How to animate with Synfig Studio ==<br />
<br />
<videoflash>cDMbDQ07Qkg|425|344</videoflash><br />
<br />
== Following a Spline ==<br />
<br />
[https://youtu.be/d1hPxgq2qeU Following a Spline:] This video tutorial show how to link a shape to a Spline. It doesn't follow strictly the [[Doc:Following_a_Spline]] but would help you to follow it.<br />
<br />
== Motion Tracking Tutorial ==<br />
<br />
This Tutorial shows how to list import and how to do motion tracking. <br />
<br />
<videoflash>YAyKUr-rGOM|425|344</videoflash><br />
<br />
== Pseudo IPO-drivers in Synfig ==<br />
<br />
Zelgadis gave us [http://zelgadis.profusehost.net/files/synfig/ipo-drivers-synfig.ogg this] method to control playback using a variable.<br />
<br />
== Lip Syncing ==<br />
<br />
[http://www.youtube.com/watch?v=S8rFv_pjfgs Synfig lipsync animation tutorial]: This video tutorial shows how to lipsync your animation with a .lst file and the Papagayo Program. Based off of the [[Doc:Lipsync]] tutorial.<br />
<br />
<videoflash>S8rFv_pjfgs|425|344</videoflash><br />
<br />
<br />
[https://www.youtube.com/watch?v=waI3AwXfIy4 simple lipsync by Zmeyk] : Simple method of synchronizing lips of animated character with recorded voice.<br />
<br />
<videoflash>waI3AwXfIy4|425|344</videoflash><br />
<br />
== Walk Cycle + TimeLoop layer ==<br />
<br />
[https://www.youtube.com/watch?v=VSD3aIi8JZ0 Caminata + Time Loop en Synfig Studio] show how to do a walk cycle step by step and then loop it with the [[TimeLoop Layer]] by http://www.lobozamora.com/<br />
<br />
<videoflash>VSD3aIi8JZ0|425|344</videoflash><br />
<br />
<br />
== Shiny Effects ==<br />
<br />
This tutorial follows the [[Doc:Shiny_Effects]] tutorial<br />
<br />
<videoflash>8QX0dJX2sI8|425|344</videoflash><br />
<br />
== Kynetic Typography ==<br />
<br />
Micro-tutorial by Yoyobuae<br />
<br />
See forum [https://forums.synfig.org/t/typography-and-motion-graphics-tools/2864/5 post] and [http://youtu.be/FZfypmXrMIo for more informations]<br />
<br />
<br />
<br />
=Advanced =<br />
<br />
== How to vectorize a drawing ==<br />
<br />
https://www.youtube.com/watch?v=oH5LudWwb2w<br />
<br />
<videoflash>oH5LudWwb2w|425|344</videoflash><br />
<br />
Realised with Synfig 1.0.x by [http://www.lobozamora.com/ LoboZamora]<br />
<br />
== Making headturn guides using Synfig ==<br />
<br />
https://www.youtube.com/watch?v=HBFqTlmR6qw<br />
<br />
<videoflash>HBFqTlmR6qw|425|344</videoflash><br />
<br />
Realised with Synfig 0.64.1 by Konstantin Dmitriev<br />
<br />
Nota: to help to translating and caption this video : http://amara.org/v/CUeA/</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Video_Tutorials&diff=23344Doc:Video Tutorials2019-08-10T15:41:59Z<p>Synme: delete old link</p>
<hr />
<div><!-- Page info --><br />
{{Title|Video Tutorials}}<br />
{{Category|Tutorials}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Video tutorials could be updated with last version!<br />
<br />
In this section you'll find some basic video tutorials of the most common tasks in Synfig. Feel free to ask here for any new video tutorial.<br />
<br />
= Basics of Animations =<br />
<br />
In this sections, how to use simple part of Synfig studio, mostly one Layer usage.<br />
<br />
== Animation Basics ==<br />
<br />
[http://www.youtube.com/watch?v=WUxn9jqFJrg Synfig basic animation tutorial]: This video tutorial shows how to do a (very) basic animation. The tutorial roughly follows the [[Doc:Animation_Basics]] tutorial.<br />
<br />
<videoflash>WUxn9jqFJrg|425|344</videoflash><br />
<br />
<br />
== Creating a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=bQ-ku0bA23A Creating a Spline]: This small video tutorial shows the basic steps to build a Spline. Video editing was done using Synfig itself.<br />
<br />
<videoflash>bQ-ku0bA23A|425|350</videoflash><br />
<br />
<br />
== Draw a Circle Rectangle Star Spline ==<br />
<br />
[https://youtu.be/FBnBE9t3Jd8 Draw a Circle Rectangle Star Spline]: Short tutorial about creating Circle Rectangle Star and a Spline.<br />
<br />
== Curve warp demonstration ==<br />
<br />
I'd like to introduce few videos about my experiments with curve warp deformation layer. Unfortunately I'm bad translator and I sounded it in russian, but I hope video is clear enough as is. If any [http://synfig.org/forums/viewtopic.php?f=6&t=4229 question] ask me I'll try to explain.<br />
<br />
=== [https://www.youtube.com/watch?v=Gz7gSBVHnjo Part 1 of 3] ===<br />
<videoflash>Gz7gSBVHnjo|425|344</videoflash><br />
=== [https://www.youtube.com/watch?v=Y5GFP_eU_Mk Part 2 of 3] ===<br />
<videoflash>Y5GFP_eU_Mk|425|344</videoflash><br />
=== [Planned Part 3 of 3] ===<br />
<br />
== Blend Test ==<br />
<br />
[http://www.youtube.com/watch?v=_n23xOvONb8 Synfig Blend Test]: 22 blend methods times 15 layers = 330 boring frames. At 0.55 fps = 10 boring minutes. Enjoy!<br />
<br />
<videoflash>_n23xOvONb8|425|350</videoflash><br />
<br />
<br />
= Animation =<br />
<br />
== Flower Animation ==<br />
<br />
This video tutorial shows how to do an animation of a growing flower. The tutorial roughly follows the written [[Doc:Flower_Animation]] tutorial.<br />
<br />
=== [http://www.youtube.com/watch?v=U1EjObyN1pc Part 1 of 4] ===<br />
<br />
<videoflash>U1EjObyN1pc|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=oSAilqEKEJs Part 2 of 4] ===<br />
<br />
<videoflash>oSAilqEKEJs|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=STP01dOxvMU Part 3 of 4] ===<br />
<br />
<videoflash>STP01dOxvMU|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=8dcAqZxwOWM Part 4 of 4] ===<br />
<br />
<videoflash>8dcAqZxwOWM|425|344</videoflash><br />
<br />
== How to animate with Synfig Studio ==<br />
<br />
<videoflash>cDMbDQ07Qkg|425|344</videoflash><br />
<br />
== Following a Spline ==<br />
<br />
[https://youtu.be/d1hPxgq2qeU Following a Spline:] This video tutorial show how to link a shape to a Spline. It doesn't follow strictly the [[Doc:Following_a_Spline]] but would help you to follow it.<br />
<br />
== Motion Tracking Tutorial ==<br />
<br />
This Tutorial shows how to list import and how to do motion tracking. <br />
<br />
<videoflash>YAyKUr-rGOM|425|344</videoflash><br />
<br />
== Pseudo IPO-drivers in Synfig ==<br />
<br />
Zelgadis gave us [http://zelgadis.profusehost.net/files/synfig/ipo-drivers-synfig.ogg this] method to control playback using a variable.<br />
<br />
== Animating a caped character ==<br />
<br />
A 3-part tutorial on making an animated caped character in synfig.<br />
<br />
=== [https://youtu.be/S0snIErKuFg Part 1 of 3] ===<br />
<br />
<br />
<br />
=== [https://youtu.be/nv_KR9rG55Y Part 2 of 3] ===<br />
<br />
<br />
<br />
=== [https://youtu.be/s3B9L6amPn8 Part 3 of 3] ===<br />
<br />
== Lip Syncing ==<br />
<br />
[http://www.youtube.com/watch?v=S8rFv_pjfgs Synfig lipsync animation tutorial]: This video tutorial shows how to lipsync your animation with a .lst file and the Papagayo Program. Based off of the [[Doc:Lipsync]] tutorial.<br />
<br />
<videoflash>S8rFv_pjfgs|425|344</videoflash><br />
<br />
<br />
[https://www.youtube.com/watch?v=waI3AwXfIy4 simple lipsync by Zmeyk] : Simple method of synchronizing lips of animated character with recorded voice.<br />
<br />
<videoflash>waI3AwXfIy4|425|344</videoflash><br />
<br />
== Walk Cycle + TimeLoop layer ==<br />
<br />
[https://www.youtube.com/watch?v=VSD3aIi8JZ0 Caminata + Time Loop en Synfig Studio] show how to do a walk cycle step by step and then loop it with the [[TimeLoop Layer]] by http://www.lobozamora.com/<br />
<br />
<videoflash>VSD3aIi8JZ0|425|344</videoflash><br />
<br />
<br />
== Shiny Effects ==<br />
<br />
This tutorial follows the [[Doc:Shiny_Effects]] tutorial<br />
<br />
<videoflash>8QX0dJX2sI8|425|344</videoflash><br />
<br />
== Kynetic Typography ==<br />
<br />
Micro-tutorial by Yoyobuae<br />
<br />
See forum [https://forums.synfig.org/t/typography-and-motion-graphics-tools/2864/5 post] and [http://youtu.be/FZfypmXrMIo for more informations]<br />
<br />
<br />
<br />
=Advanced =<br />
<br />
== How to vectorize a drawing ==<br />
<br />
https://www.youtube.com/watch?v=oH5LudWwb2w<br />
<br />
<videoflash>oH5LudWwb2w|425|344</videoflash><br />
<br />
Realised with Synfig 1.0.x by [http://www.lobozamora.com/ LoboZamora]<br />
<br />
== Making headturn guides using Synfig ==<br />
<br />
https://www.youtube.com/watch?v=HBFqTlmR6qw<br />
<br />
<videoflash>HBFqTlmR6qw|425|344</videoflash><br />
<br />
Realised with Synfig 0.64.1 by Konstantin Dmitriev<br />
<br />
Nota: to help to translating and caption this video : http://amara.org/v/CUeA/</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Video_Tutorials&diff=23343Doc:Video Tutorials2019-08-09T15:59:42Z<p>Synme: title change</p>
<hr />
<div><!-- Page info --><br />
{{Title|Video Tutorials}}<br />
{{Category|Tutorials}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Video tutorials could be updated with last version!<br />
<br />
In this section you'll find some basic video tutorials of the most common tasks in Synfig. Feel free to ask here for any new video tutorial.<br />
<br />
= Basics of Animations =<br />
<br />
In this sections, how to use simple part of Synfig studio, mostly one Layer usage.<br />
<br />
== Animation Basics ==<br />
<br />
[http://www.youtube.com/watch?v=WUxn9jqFJrg Synfig basic animation tutorial]: This video tutorial shows how to do a (very) basic animation. The tutorial roughly follows the [[Doc:Animation_Basics]] tutorial.<br />
<br />
<videoflash>WUxn9jqFJrg|425|344</videoflash><br />
<br />
<br />
== Creating a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=bQ-ku0bA23A Creating a Spline]: This small video tutorial shows the basic steps to build a Spline. Video editing was done using Synfig itself.<br />
<br />
<videoflash>bQ-ku0bA23A|425|350</videoflash><br />
<br />
<br />
== Draw a Circle Rectangle Star Spline ==<br />
<br />
[https://youtu.be/FBnBE9t3Jd8 Draw a Circle Rectangle Star Spline]: Short tutorial about creating Circle Rectangle Star and a Spline.<br />
<br />
== Curve warp demonstration ==<br />
<br />
I'd like to introduce few videos about my experiments with curve warp deformation layer. Unfortunately I'm bad translator and I sounded it in russian, but I hope video is clear enough as is. If any [http://synfig.org/forums/viewtopic.php?f=6&t=4229 question] ask me I'll try to explain.<br />
<br />
=== [https://www.youtube.com/watch?v=Gz7gSBVHnjo Part 1 of 3] ===<br />
<videoflash>Gz7gSBVHnjo|425|344</videoflash><br />
=== [https://www.youtube.com/watch?v=Y5GFP_eU_Mk Part 2 of 3] ===<br />
<videoflash>Y5GFP_eU_Mk|425|344</videoflash><br />
=== [Planned Part 3 of 3] ===<br />
<br />
== Blend Test ==<br />
<br />
[http://www.youtube.com/watch?v=_n23xOvONb8 Synfig Blend Test]: 22 blend methods times 15 layers = 330 boring frames. At 0.55 fps = 10 boring minutes. Enjoy!<br />
<br />
<videoflash>_n23xOvONb8|425|350</videoflash><br />
<br />
<br />
= Animation =<br />
<br />
== Flower Animation ==<br />
<br />
This video tutorial shows how to do an animation of a growing flower. The tutorial roughly follows the written [[Doc:Flower_Animation]] tutorial.<br />
<br />
=== [http://www.youtube.com/watch?v=U1EjObyN1pc Part 1 of 4] ===<br />
<br />
<videoflash>U1EjObyN1pc|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=oSAilqEKEJs Part 2 of 4] ===<br />
<br />
<videoflash>oSAilqEKEJs|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=STP01dOxvMU Part 3 of 4] ===<br />
<br />
<videoflash>STP01dOxvMU|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=8dcAqZxwOWM Part 4 of 4] ===<br />
<br />
<videoflash>8dcAqZxwOWM|425|344</videoflash><br />
<br />
== How to animate with Synfig Studio ==<br />
<br />
<videoflash>cDMbDQ07Qkg|425|344</videoflash><br />
<br />
== Following a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=w87KRL3kD74 Following a Spline:] This video tutorial show how to link a shape to a Spline. It doesn't follow strictly the [[Doc:Following_a_Spline]] but would help you to follow it. <br />
<br />
<videoflash>w87KRL3kD74|425|350</videoflash><br />
<br />
A more recent 4K [https://youtu.be/d1hPxgq2qeU video] has been redone with the help of the video above, English subtitles are included.<br />
<br />
== Motion Tracking Tutorial ==<br />
<br />
This Tutorial shows how to list import and how to do motion tracking. <br />
<br />
<videoflash>YAyKUr-rGOM|425|344</videoflash><br />
<br />
== Pseudo IPO-drivers in Synfig ==<br />
<br />
Zelgadis gave us [http://zelgadis.profusehost.net/files/synfig/ipo-drivers-synfig.ogg this] method to control playback using a variable.<br />
<br />
== Animating a caped character ==<br />
<br />
A 3-part tutorial on making an animated caped character in synfig.<br />
<br />
=== [https://youtu.be/S0snIErKuFg Part 1 of 3] ===<br />
<br />
<br />
<br />
=== [https://youtu.be/nv_KR9rG55Y Part 2 of 3] ===<br />
<br />
<br />
<br />
=== [https://youtu.be/s3B9L6amPn8 Part 3 of 3] ===<br />
<br />
== Lip Syncing ==<br />
<br />
[http://www.youtube.com/watch?v=S8rFv_pjfgs Synfig lipsync animation tutorial]: This video tutorial shows how to lipsync your animation with a .lst file and the Papagayo Program. Based off of the [[Doc:Lipsync]] tutorial.<br />
<br />
<videoflash>S8rFv_pjfgs|425|344</videoflash><br />
<br />
<br />
[https://www.youtube.com/watch?v=waI3AwXfIy4 simple lipsync by Zmeyk] : Simple method of synchronizing lips of animated character with recorded voice.<br />
<br />
<videoflash>waI3AwXfIy4|425|344</videoflash><br />
<br />
== Walk Cycle + TimeLoop layer ==<br />
<br />
[https://www.youtube.com/watch?v=VSD3aIi8JZ0 Caminata + Time Loop en Synfig Studio] show how to do a walk cycle step by step and then loop it with the [[TimeLoop Layer]] by http://www.lobozamora.com/<br />
<br />
<videoflash>VSD3aIi8JZ0|425|344</videoflash><br />
<br />
<br />
== Shiny Effects ==<br />
<br />
This tutorial follows the [[Doc:Shiny_Effects]] tutorial<br />
<br />
<videoflash>8QX0dJX2sI8|425|344</videoflash><br />
<br />
== Kynetic Typography ==<br />
<br />
Micro-tutorial by Yoyobuae<br />
<br />
See forum [https://forums.synfig.org/t/typography-and-motion-graphics-tools/2864/5 post] and [http://youtu.be/FZfypmXrMIo for more informations]<br />
<br />
<br />
<br />
=Advanced =<br />
<br />
== How to vectorize a drawing ==<br />
<br />
https://www.youtube.com/watch?v=oH5LudWwb2w<br />
<br />
<videoflash>oH5LudWwb2w|425|344</videoflash><br />
<br />
Realised with Synfig 1.0.x by [http://www.lobozamora.com/ LoboZamora]<br />
<br />
== Making headturn guides using Synfig ==<br />
<br />
https://www.youtube.com/watch?v=HBFqTlmR6qw<br />
<br />
<videoflash>HBFqTlmR6qw|425|344</videoflash><br />
<br />
Realised with Synfig 0.64.1 by Konstantin Dmitriev<br />
<br />
Nota: to help to translating and caption this video : http://amara.org/v/CUeA/</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Video_Tutorials&diff=23342Doc:Video Tutorials2019-08-09T15:56:47Z<p>Synme: delete old link</p>
<hr />
<div><!-- Page info --><br />
{{Title|Video Tutorials}}<br />
{{Category|Tutorials}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Video tutorials could be updated with last version!<br />
<br />
In this section you'll find some basic video tutorials of the most common tasks in Synfig. Feel free to ask here for any new video tutorial.<br />
<br />
= Basics of Animations =<br />
<br />
In this sections, how to use simple part of Synfig studio, mostly one Layer usage.<br />
<br />
== Animation Basics ==<br />
<br />
[http://www.youtube.com/watch?v=WUxn9jqFJrg Synfig basic animation tutorial]: This video tutorial shows how to do a (very) basic animation. The tutorial roughly follows the [[Doc:Animation_Basics]] tutorial.<br />
<br />
<videoflash>WUxn9jqFJrg|425|344</videoflash><br />
<br />
<br />
== Creating a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=bQ-ku0bA23A Creating a Spline]: This small video tutorial shows the basic steps to build a Spline. Video editing was done using Synfig itself.<br />
<br />
<videoflash>bQ-ku0bA23A|425|350</videoflash><br />
<br />
<br />
== Creating Circles, Rectangles and a Spline ==<br />
<br />
[https://youtu.be/FBnBE9t3Jd8 Draw a Circle Rectangle Star Spline]: Short tutorial about creating Circle Rectangle Star and a Spline.<br />
<br />
== Curve warp demonstration ==<br />
<br />
I'd like to introduce few videos about my experiments with curve warp deformation layer. Unfortunately I'm bad translator and I sounded it in russian, but I hope video is clear enough as is. If any [http://synfig.org/forums/viewtopic.php?f=6&t=4229 question] ask me I'll try to explain.<br />
<br />
=== [https://www.youtube.com/watch?v=Gz7gSBVHnjo Part 1 of 3] ===<br />
<videoflash>Gz7gSBVHnjo|425|344</videoflash><br />
=== [https://www.youtube.com/watch?v=Y5GFP_eU_Mk Part 2 of 3] ===<br />
<videoflash>Y5GFP_eU_Mk|425|344</videoflash><br />
=== [Planned Part 3 of 3] ===<br />
<br />
== Blend Test ==<br />
<br />
[http://www.youtube.com/watch?v=_n23xOvONb8 Synfig Blend Test]: 22 blend methods times 15 layers = 330 boring frames. At 0.55 fps = 10 boring minutes. Enjoy!<br />
<br />
<videoflash>_n23xOvONb8|425|350</videoflash><br />
<br />
<br />
= Animation =<br />
<br />
== Flower Animation ==<br />
<br />
This video tutorial shows how to do an animation of a growing flower. The tutorial roughly follows the written [[Doc:Flower_Animation]] tutorial.<br />
<br />
=== [http://www.youtube.com/watch?v=U1EjObyN1pc Part 1 of 4] ===<br />
<br />
<videoflash>U1EjObyN1pc|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=oSAilqEKEJs Part 2 of 4] ===<br />
<br />
<videoflash>oSAilqEKEJs|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=STP01dOxvMU Part 3 of 4] ===<br />
<br />
<videoflash>STP01dOxvMU|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=8dcAqZxwOWM Part 4 of 4] ===<br />
<br />
<videoflash>8dcAqZxwOWM|425|344</videoflash><br />
<br />
== How to animate with Synfig Studio ==<br />
<br />
<videoflash>cDMbDQ07Qkg|425|344</videoflash><br />
<br />
== Following a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=w87KRL3kD74 Following a Spline:] This video tutorial show how to link a shape to a Spline. It doesn't follow strictly the [[Doc:Following_a_Spline]] but would help you to follow it. <br />
<br />
<videoflash>w87KRL3kD74|425|350</videoflash><br />
<br />
A more recent 4K [https://youtu.be/d1hPxgq2qeU video] has been redone with the help of the video above, English subtitles are included.<br />
<br />
== Motion Tracking Tutorial ==<br />
<br />
This Tutorial shows how to list import and how to do motion tracking. <br />
<br />
<videoflash>YAyKUr-rGOM|425|344</videoflash><br />
<br />
== Pseudo IPO-drivers in Synfig ==<br />
<br />
Zelgadis gave us [http://zelgadis.profusehost.net/files/synfig/ipo-drivers-synfig.ogg this] method to control playback using a variable.<br />
<br />
== Animating a caped character ==<br />
<br />
A 3-part tutorial on making an animated caped character in synfig.<br />
<br />
=== [https://youtu.be/S0snIErKuFg Part 1 of 3] ===<br />
<br />
<br />
<br />
=== [https://youtu.be/nv_KR9rG55Y Part 2 of 3] ===<br />
<br />
<br />
<br />
=== [https://youtu.be/s3B9L6amPn8 Part 3 of 3] ===<br />
<br />
== Lip Syncing ==<br />
<br />
[http://www.youtube.com/watch?v=S8rFv_pjfgs Synfig lipsync animation tutorial]: This video tutorial shows how to lipsync your animation with a .lst file and the Papagayo Program. Based off of the [[Doc:Lipsync]] tutorial.<br />
<br />
<videoflash>S8rFv_pjfgs|425|344</videoflash><br />
<br />
<br />
[https://www.youtube.com/watch?v=waI3AwXfIy4 simple lipsync by Zmeyk] : Simple method of synchronizing lips of animated character with recorded voice.<br />
<br />
<videoflash>waI3AwXfIy4|425|344</videoflash><br />
<br />
== Walk Cycle + TimeLoop layer ==<br />
<br />
[https://www.youtube.com/watch?v=VSD3aIi8JZ0 Caminata + Time Loop en Synfig Studio] show how to do a walk cycle step by step and then loop it with the [[TimeLoop Layer]] by http://www.lobozamora.com/<br />
<br />
<videoflash>VSD3aIi8JZ0|425|344</videoflash><br />
<br />
<br />
== Shiny Effects ==<br />
<br />
This tutorial follows the [[Doc:Shiny_Effects]] tutorial<br />
<br />
<videoflash>8QX0dJX2sI8|425|344</videoflash><br />
<br />
== Kynetic Typography ==<br />
<br />
Micro-tutorial by Yoyobuae<br />
<br />
See forum [https://forums.synfig.org/t/typography-and-motion-graphics-tools/2864/5 post] and [http://youtu.be/FZfypmXrMIo for more informations]<br />
<br />
<br />
<br />
=Advanced =<br />
<br />
== How to vectorize a drawing ==<br />
<br />
https://www.youtube.com/watch?v=oH5LudWwb2w<br />
<br />
<videoflash>oH5LudWwb2w|425|344</videoflash><br />
<br />
Realised with Synfig 1.0.x by [http://www.lobozamora.com/ LoboZamora]<br />
<br />
== Making headturn guides using Synfig ==<br />
<br />
https://www.youtube.com/watch?v=HBFqTlmR6qw<br />
<br />
<videoflash>HBFqTlmR6qw|425|344</videoflash><br />
<br />
Realised with Synfig 0.64.1 by Konstantin Dmitriev<br />
<br />
Nota: to help to translating and caption this video : http://amara.org/v/CUeA/</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Creating_Shapes&diff=23340Doc:Creating Shapes2019-07-31T16:08:55Z<p>Synme: update link</p>
<hr />
<div><!-- Page info --><br />
{{Title|Creating Shapes}}<br />
{{Navigation|Category:Manual|Doc:Flower Animation}}<br />
{{TOCright}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
{{Category|Updated}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
<br />
Basic {{l|Primitive_Layer|primitives}} such as {{l|Circle Layer|circles}} or {{l|Rectangle Layer|rectangles}}, that we have learn to work with {{l|Doc:Adding_Layers|previously}}, are all great but they are pretty much geometrically inflexible. What about creating more complex shapes? To do this, we use the {{l|Spline Tool}}.<br />
<br />
== Spline Tool ==<br />
<br />
In Synfig, the construct for describing shapes is called a Spline. This is roughly analogous to a "path" in other programs, except that it is strictly a [https://en.wikipedia.org/wiki/Cubic_Hermite_spline cubic hermite spline].<br />
<br />
[[File:Toolbox Reset Colors Button_1_0.png|right|frame|Reset Colors button in the Toolbox]] Before we start with the Spline tutorial, let's look at some additional notes on how Synfig works. When you click on the {{l|Spline Tool}}, you will see that the handles from your currently selected object (if there was one) will disappear, but the layer(s) will still remain selected in the {{l|Layers Panel}}. This is normal. Anything you create with the Spline Tool will be inserted above the currently selected layer. Keep in mind that if you want to insert a shape somewhere, you should select where you want to insert it before you go into the Spline Tool &mdash; changing the selection afterward will automatically swap you back to the Transform Tool. <br />
<br />
Now, go ahead and click on the {{Literal|Reset Colors}} button in the lower left corner of the FG/BG color widget in the {{l|Toolbox|toolbox}}. This will reset us back to the default black and white. Also, set the {{l|Spline Tool#Options|line width}} to something nice and thick &mdash; 10pt should do the trick.<br />
<br />
After you switched to Spline Tool, take a look at the {{l|Tool Options Panel|Tool Options Panel}}. Make sure that only {{Literal|Create Region}}, {{Literal|Create Outline}} and {{Literal|Link Origins}} are checked. <br />
<br />
Clicking with your mouse in the canvas will place vertices. While you are placing a vertex, you can drag out its tangent by dragging the mouse. Do this over and over, and you construct a Spline.<br />
<br />
Keep in mind, however, that during this construction, there is nothing stopping you from just moving it if you don't like where you placed a vertex or a tangent. Honest! If you want to remove a vertex, right click on it and select {{Literal|Delete Vertex}}. Want to split the tangents? Right click on the tangent and hit {{Literal|Split Tangents}}. Want to loop the Spline? Right click on the first vertex and select {{Literal|Loop Spline}}. <br />
<br />
[[Image:Creating-shapes-2-bline-construction.png|center|frame]]<br />
<br />
When you are finished placing vertices, you must exit construction mode in order to actually create the Spline layer(s); there are 2 ways to do this:<br />
#Switch to another tool.<br />
#Press the {{Literal|Create}} button at the bottom of the Tool Options Panel (it's the icon that looks like a gear).<br />
For now, just go ahead and switch to the {{l|Transform Tool}}, because we are done with the Spline Tool.<br />
<br />
[[Image:Creating-shapes-3-bline-region-outline.png|center|frame]]<br />
<br />
== Editing Splines ==<br />
<br />
Ok, we now have a nice pretty white region with a thick black outline. Since we checked {{Literal|Create Region}} and {{Literal|Create Outline}} in previous steps, you'll notice that there are two layers that we have created &mdash; the {{l|Outline Layer|Outline}} and the {{l|Region Layer|Region}} in the Layers Panel. Despite the fact that they are two separate layers, their vertices parameter has already been {{l|Linking|linked}} &mdash; so you can select either one and move its handles around and the other one will also change.<br />
<br />
If you want to manipulate the vertices ''after'' you have created the layers, it is very easy to do so. Just click on one of the layers and have at it. If you want to remove a vertex, right click on it and hit {{Literal|Remove Item (smart)}}. Want to insert a point somewhere? Right click on the segment where you want to insert something and hit {{Literal|Insert item (smart)}}.<br />
<br />
This may appear to be leading to a mess of layers. And yes, if you aren't using the software properly, that is exactly what you will get. But there is a way to make this more sane. As mentioned in the {{l|Doc:Adding Layers|previous tutorial}}, you can {{l|group|group}} layers into hierarchy.<br />
<br />
One quick thing to mention before I finish up. You can change the width of an outline at each vertex. You do this by selecting the outline layer (NOTE: you must select the Outline Layer, the Region Layer has no width data) and tweaking with the width handles. By default, these are masked. To show them, press {{Shortcut|alt|5}} or click {{Literal|Toggle width handles}} button at the top of the canvas window (the fifth one from the left). Repeat to hide them again. You can also see other things to mask via the {{l|Canvas Menu Caret}}: {{c|View|Show/Hide Handles}}.<br />
<br />
== Using tablet to draw shapes ==<br />
<br />
If you have a [http://en.wikipedia.org/wiki/Graphics_tablet graphic tablet] you can use Draw Tool to create Splines.<br />
<br />
Synfig Studio supports pressure sensitivity, but you need to configure it first. Go to {{c|File|Input Devices...}} from toolbox menu. In the {{Literal|Input}} dialog find your tablet's stylus device and set its {{Literal|Mode}} to {{Literal|Screen}}. Click {{Literal|Save}} and then {{Literal|Close}}.<br />
<br />
Now grab your stylus, create a new file and click on the Draw Tool button in the toolbox. Set the default line width value to be big enough &mdash; say, 15pt &mdash; otherwise you will not notice any pressure sensitivity effect. Choose brown as the {{l|New_Layer_Defaults#Brush_Colors|default fill color}}.<br />
<br />
{{Note|Note|Steps above should be done with the stylus of your tablet, not the mouse. Synfig Studio remembers settings for each input device independently. That's why if you set those options with your mouse device they will not have any effect when you switch to stylus.}}<br />
In the Tool Options Panel, make sure that you have the same options as shown on the screenshot below.<br />
<br />
[[File:DrawToolOptions.png|center|frame]]<br />
<br />
Now let's draw some thing like a curvy mountain background. Start drawing a line from the left border to the middle of the canvas. Try to vary your stylus pressure while you are drawing. Stop near the center of the canvas. This is your first line. Notice the new outline layer created in the Layers Panel.<br />
<br />
[[Image:Creating-shapes-4-draw.png|center|frame]]<br />
<br />
Point your stylus at the last handle of your new Spline and continue drawing to the right border of the canvas. When you finish, look at the Layers Panel again. There's still only one outline layer. Synfig Studio is smart enough to figure out that you don't need a new outline layer and properly extends the last one. You can extend the Spline from both ends, but if you start drawing from any other place of the canvas a new outline layer will be created. Though your first line will remain selected and nothing stops you from extending it later.<br />
<br />
Back to our artwork. In the Tool Panel hit the button with the bucket icon to fill the outline we just created. A region layer will appear at the top of the layer we are working with. Select the outline layer and press the {{Literal|Raise Layer}} button in the layers panel to put the outline layer on top of the region.<br />
<br />
[[Image:Creating-shapes-5-draw.png|center|frame]]<br />
<br />
Extend a line from both sides down to the corners of the canvas to make the fill appear at the bottom. Great.<br />
<br />
[[Image:Creating-shapes-6-draw.png|center|frame]]<br />
<br />
Go ahead and add a few more lines on top of the filled area to give it a mountain-like look. If brown handles are in your way, you can hide them by clicking the {{Literal|Toggle vertex handles}} button at the top of the canvas window (the second one from the left).<br />
<br />
[[Image:Creating-shapes-7-draw.png|center|frame]]<br />
<br />
Draw tool is great for drawing complex shapes, but you end up with a bunch of handles, which are hard to manipulate with the Transform Tool in the way we described above. There are two solutions here.<br />
<br />
First, you can increase the {{Literal|Smooth}} value in the Tool Options Dialog while using Draw Tool. That will reduce the count of vertices produced at drawing time, but will make your shape less detailed. <br />
<br />
Second, you can use Smooth Move Tool to deform an existing shape. Go for it and click the Smooth Move Tool button in the toolbox. The trick about this tool is that it affects ''selected handles only''. Press and hold your left mouse button in an empty place of the canvas. Drag to create a selection box. Release the mouse button when you are done. Or just hit {{Shortcut|Ctrl|a}} to select all handles. Now you can deform the selected segments of Spline. You can change the size of the influence area by tweaking {{Literal|Radius}} in the Tool Options Panel.<br />
<br />
What about outline width? There is a Width Tool for that purpose. It is designed for increasing or decreasing the width of a line much like you would with a pencil on paper. Click the Width Tool button in the toolbox, move your stylus over the line you want to change, press and move the cursor back and forth along the line, like you are scratching something. The width of the outline will be increased at the places where you moved the cursor. If you want to decrease the width, just hold "Ctrl" while scratching. Easy!<br />
<br />
If you don't want width handles to be displayed, during usage of the Width Tool, just turn them off by pressing the {{Literal|Toggle width handles}} button at the top of the canvas window.<br />
<br />
== Other ways to create Splines ==<br />
<br />
Is that all? Not yet. You can use Circle, Rectangle, Star and Polygon tools to create Splines too. Just check the {{Literal|Create Outline}} and {{Literal|Create Region}} options in the Tool Options Panel when using those tools. <br />
<br />
Creating geometric primitive as Spline gives you a better control over it's shape and look. For example, if you want a deformed star, then you can use the Star Tool to create it as outline and region Splines and then use the Transform Tool to deform it.<br />
<br />
Now you are ready for the {{L|Doc:Flower Animation|last tutorial}} in this section. Hang on!<br />
<br />
== Links ==<br />
<br />
A video on this subject is available [https://youtu.be/FBnBE9t3Jd8 here]<br />
<br />
<br />
{{Navigation|Category:Manual|Doc:Flower Animation}}</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Creating_Shapes/fr&diff=23339Doc:Creating Shapes/fr2019-07-31T16:05:08Z<p>Synme: update bloc manual</p>
<hr />
<div><!-- Page info --><br />
{{Title|Créer des formes}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
{{Category|Unverified}}<br />
{{Category|Updated}}<br />
{{Navigation|Category:Manual|Doc:Flower Animation}}<br />
<br />
{{NewTerminology}}<br />
<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
Les {{l|Primitive_Layer|primitives}} de base telles les {{l|Circle Layer|cercles}} ou les {{l|Rectangle Layer|rectangles}}, avec lesquelles nous avons appris à travailler {{l|Doc:Adding_Layers|précédemment}}, sont toutes merveilleuses mais plutôt rigides géométriquement parlant. Pourquoi ne créerions-nous pas des formes plus élaborées ? Pour ce faire nous allons utiliser l'{{l|Spline Tool}}.<br />
<br />
== L'Outil Spline ==<br />
<br />
Dans Synfig l'élément de description des formes est appelé Spline. C'est grossièrement analogue à ce que d'autres programmes nomment "chemin" sauf qu'il s'agisse exclusivement de [https://fr.wikipedia.org/wiki/Spline_cubique_d'Hermite Spline cubique d'Hermite]. <br />
<br />
[[File:Toolbox Reset Colors Button_1_0.png|right|frame|Bouton "Réinitialiser les couleurs" dans la boite à outils]] Avant de commencer avec le tutoriel {{l|Doc:Creating Shapes}} ajoutons quelques éléments complémentaires sur la façon de fonctionner de Synfig. Quand vous cliquerez sur l'{{l|Spline Tool|Outil Spline}}, vous vous apercevrez que les poignées de l'objet en cours de sélection (si il en existe un) disparaîtront, mais que le calque correspondant restera sélectionné dans le {{l|Layers Panel|Panneau des Calques}}. C'est normal. Ce que vous allez dessiner avec l'Outil Spline sera inséré au-dessus du calque en cours de sélection. Gardez en mémoire que si vous voulez insérer une forme quelque part, vous devrez sélectionner exactement où vous voulez l'insérer avant d'activer l'Outil Spline &mdash; changer de sélection après-coup vous renverra automatiquement dans l'{{l|Transform Tool|Outil de transformation}}.<br />
<br />
Maintenant allez-y ! Cliquez sur le bouton {{Literal|Réinitialiser les couleurs}} dans l'angle inférieur gauche du widget de couleurs Premier plan/Arrière plan de la {{l|Toolbox|boite à outils}}. Celà rétablira les couleurs par défaut noir et blanc. Paramétrez également la {{l|Spline_Tool#Options|taille du pinceau}} vers quelque chose de bien assez fin &mdash; 10px devrait faire l'affaire.<br />
<br />
Lorsque vous activerez l'Outil Spline, vous irez vérifier le {{l|Tool Options Panel|panneau d'options des outils}}. Assurez-vous que seule les options {{Literal|Créer une Région}}, {{Literal|Créer un Contour}} et {{Literal|Lier les origines}} soient cochées. <br />
<br />
Si vous cliquez avec votre souris sur le calque vous positionnerez des vertexs (ou noeuds, ou sommets). Pendant que vous placez un vertex (sans relâcher) vous pouvez déplacer ses tangentes en déplaçant la souris. Répétez cela plusieurs fois, vous construisez une Spline.<br />
<br />
Il faut garder cependant à l'esprit que si durant cette construction vous n'aimez pas l'endroit ou vous avez positionné un vertex il n'y a rien qui vous permet de le déplacer. Si vous voulez supprimer un vertex, cliquez droit (sans relâcher) sur le vertex et sélectionnez {{Literal|Supprimer l'Elément Intelligent}}. Vous voulez séparer les tangentes ? Cliquez droit (sans relâcher) sur le vertex et sélectionnez {{Literal|Séparer les tangentes}}. Vous voulez fermer la Spline ? Cliquez droit (sans relâcher) sur le vertex et sélectionnez {{Literal|Boucler}}.<br />
<br />
[[Image:Creating-shapes-2-bline-construction.png|center|frame]]<br />
<br />
Lorsque vous avez terminer de placer les vertexs, nous devons sortir du mode de construction pour créer le calque(s) Spline; Il y a deux manières de procéder:<br />
#Changer d'outil.<br />
#Cliquez le bouton {{Literal|Créé une Spline et/ou une Région}} dans le bas du panneau d'options des outils (c'est l'icone qui ressemble à un trois engrenages)<br />
<br />
Pour le moment, continuons, changez d'outil pour l'{{l|Transform Tool|Outil Transformation}}, nous en avons finit avec l'outil Spline.<br />
<br />
[[Image:Creating-shapes-3-bline-region-outline.png|center|frame]]<br />
<br />
== Editer les Splines ==<br />
Ok, nous avons une mignonne et plutôt pale région avec un épais contour noir. Puisque nous avons coché {{Literal|Créer une région}} et {{Literal|Créer un contour}} dans les étapes précédentes, vous devriez remarquer qu'il y a deux calques créé &mdash; le {{l|Outline Layer|Contour}} ainsi que la {{l|Region Layer|Région}} dans le Panneau Calque. Bien que dans les faits vous avez deux calques différent, les paramètres de leurs vertexs ont été {{l|Linking|liés}} &mdash; vous pouvez donc sélectionner indifféremment l'un ou l'autre calque et déplacer ses poignées, l'autre devrait aussi se déplacer.<br />
<br />
Si vous voulez manipuler le vertices ''après'' que vous ayez créé les calques, c'est très simple. Cliquez simplement sur un calque et déplacer le vertex ou ses tangentes. Si vous voulez supprimer un vertex, cliquez droit dessus et sélectionner {{Literal|Supprimer l'élément (Intelligent)}}. Vous voulez ajouter un vertex, cliquez droit sur le segment à l'emplacement désiré et sélectionner {{Literal|Insérer un élément}}.<br />
<br />
Cela peut sembler être une pagaille de calques. Et oui, si vous n'utilisez pas le logiciel correctement, c'est exactement ce que vous obtiendrez. Mais il y a une manière plus sensé de procéder. Comme il est indiqué dans le {{l|Doc:Adding Layers|tutoriel précédent}}, vous pouvez {{l|Group|grouper}} les calques de manière hiérarchique.<br />
<br />
Une chose rapide à mentionner avant d'en finir. Vous pouvez changer la largeur du contour de chaque vertex. Vous faites cela en sélectionnant le calque contour (NOTE: vous devez sélectionner le calque Contour, le calque Région ne possède pas d'informations de largeur) et ajuster les poignées de largeur. Par défaut celles ci sont masquées. Pour les faire apparaitre, pressez {{Shortcut|alt|5}} ou cliquez sur le bouton {{Literal|Basculer les poignées}} dans la partie supérieur de la fenêtre canevas (le cinquième bouton en partant de la gauche). Un nouveau clique pour les cacher. Vous pouvez également trouver d'autres choses à masquer via le {{l|Canvas Menu Caret}} : {{c|Affichage|Montrer/Cacher les Poignées}}.<br />
<br />
== Utiliser une tablette pour dessiner des formes ==<br />
<br />
Si vous avez une [http://fr.wikipedia.org/wiki/Tablette_graphique tablette graphique], vous pouvez utiliser l'Outil Calligraphie pour créer des Splines.<br />
<br />
Synfig Studio gère la pression, mais vous devez d'abords le configurer. Allez à {{c|Fichier|Périphériques d'entrée...}} depuis le menu de la Boite à Outils. Dans la boite de dialogue {{Literal|Entrée}} selectionnez le stylet de votre tablette graphique et paramétrez son {{Literal|Mode}} sur {{Literal|Écran}}. Cliquez {{Literal|Enregistrer}} et ensuite {{Literal|Fermer}}.<br />
<br />
Maintenant, prenez votre stylet, créer un nouveau fichier et cliquez sur le bouton de l'Outil Calligraphie dans la boite à outils. Positionnez l'épaisseur par défaut de la ligne à une valeur relativement grande &mdash; disons, 15px &mdash; sinon vous ne noterez aucun effet de sensibilité à la pression. Choisissez marron comme {{l|New_Layer_Defaults#Brush_Colors|couleur de remplissage}}.<br />
<br />
{{Note|Note|Les étapes précédentes doivent être réalisées avec le stylet de votre tablette, pas avec la souris. Synfig Studio enregistre indépendamment les paramètres pour chaque périphériques d'entrées. C'est pour cela que si vous paramétrez ces options avec la souris cela n'aura aucun effet lorsque vous utiliserez votre stylet.}}<br />
<br />
Dans le panneau Options des outils, assurez vous que vous avez les mêmes options que dans la copie d'écran suivante.<br />
<br />
[[File:DrawToolOptions.png|center|frame]]<br />
<br />
Maintenant dessinons quelque chose comme un fond montagneux galbé. Démarrer en dessinant une ligne depuis la bordure gauche vers la moitié du canevas. Tentez de varier la pression sur votre stylet pendant que vous êtes en train de dessinez. Arrêtez près du centre du canevas. C'est votre première ligne. Vous pouvez noter le nouveau calque de contour qui à été créé dans le Panneau des Calques.<br />
<br />
[[Image:Creating-shapes-4-draw.png|center|frame]]<br />
<br />
Positionnez votre stylet sur la dernière poignée de votre nouvelle Spline et continuez en dessinant jusqu'à la bordure droite de votre canevas. Lorsque vous avez terminé, regardez à nouveau le panneau des calques. Il n'y a toujours qu'un seul calque de contour. Synfig Studio et suffisamment intelligent pour se rendre compte que nous n'avez pas besoin d'un nouveau calque de contour et prolonge le dernier. Nous pouvez prolonger la Spline depuis chacune des extrémités, mais si vous commencez à dessiner depuis n'importe qu'elle autre endroit du canevas, une nouveau calque de contour sera créé. Cependant votre première Spline restera active et rien ne vous empêchera de la prolonger plus tard.<br />
<br />
Revenons a votre œuvre. Dans la Boîte à Outils cliquez sur le bouton sceau afin de remplir le contour que vous venez juste de créer. Un calque Région apparait au dessus des calques sur lesquelles nous étions en trains de travailler. Sélectionnez le calque Contour et cliquez sur le bouton {{Literal|Monter le Calque}} dans le Panneau de Calque pour placer le Calque Contour au dessus de la Région.<br />
<br />
[[Image:Creating-shapes-5-draw.png|center|frame]]<br />
<br />
Étendre la ligne depuis chacune des extrémités vers les coins inférieur du canevas pour remplir la partie basse. Fantastique.<br />
<br />
[[Image:Creating-shapes-6-draw.png|center|frame]]<br />
<br />
Continuons et ajoutons quelques lignes supplémentaire au dessus de la région rempli pour donner un air de montagne. Si les poignées marrons sont sur votre chemin, vous poussez les cacher en cliquant sur le bouton {{Literal|Basculer les poignées de vertex}} dans le haut de la fenêtre canevas (le deuxième en partant de la gauche).<br />
<br />
[[Image:Creating-shapes-7-draw.png|center|frame]]<br />
<br />
L'outil Calligraphie est formidable pour dessiner des formes complexes, mais vous finirez avec un paquet de poignées, ce qui est difficile à manipuler avec l'Outil de transformation avec la manière décrite précédemment. Vous avez deux solutions.<br />
<br />
Premièrement, vous pouvez augmenter la valeur {{Literal|Adoucissement}} de la Spline dans la boite de dialogue Options des outils. Cela réduira le nombre de vertex créé au moment du dessin, mais votre forme sera moins détaillée. <br />
<br />
Deuxièmement, vous pouvez utiliser l'Outil Déplacement Lissé pour déformer une forme existante. Allons-y et cliquez sur le bouton Outil déplacement lissé dans la boite à outils. Le truc a propos de cette outil est qu'il n'affecte ''uniquement les poignées sélectionnées''. Cliquez sans relâcher le bouton gauche de la souris dans une partie vide du canevas. Déplacer la souris pour créer une boite de sélection. Relâcher le bouton de la souris lorsque vous aurez terminé. Ou alors simplement faites {{Shortcut|Ctrl|a}} pour sélectionner toute les poignées. Maintenant vous pouvez déformer les portions de Splines sélectionnés. Vous pouvez changer la zone d'influence en modifiant le {{Literal|Rayon}} dans la Panneau Options des Outils.<br />
<br />
Quand est-il de l'épaisseur du contour? Il y a un Outil Épaisseur pour cela. Il est conçu pour augmenter ou diminuer l'épaisseur de la ligne sensiblement a ce que vous pourriez faire avec un crayon sur une feuille de papier. Cliquez sur Outil Épaisseur dans la Boite à Outils, déplacer votre stylet au dessus de la ligne que vous voulez changer, pressez et déplacer le curseur de part et d'autre le long de la ligne, comme si vous grattiez quelque chose. L'épaisseur du contour seras augmentée jusqu'à la position au vous aurez placé le curseur. Si vous voulez diminuer l'épaisseur, cliquez simplement sur la touche "Ctrl" lorsque vous grattez. Facile!<br />
<br />
Si vous ne souhaitez pas que les poignées d'épaisseur soit affichées durant l'utilisation de l'outil épaisseur, cacher les en cliquant sur le bouton {{Literal|Basculer les poignées de largeur}} dans le haut de la fenêtre canevas.<br />
<br />
== D'autres façons de créer des Splines ==<br />
<br />
Est ce que c'est tout? Pas encore. Vous pouvez également utiliser l'outil Cercle, Rectangle, Étoile et Polygone pour créer des Splines. Vérifier les options {{Literal|Créer un Contour}} et {{Literal|Créer une Région}} dans le panneau Options des Outils lorsque vous utilisez ces outils. <br />
<br />
Créer des formes géométriques en Spline vous donne un meilleur contrôle sur ces formes et leur apparence. Par exemple, si vous désirez une étoile difforme, vous pouvez utiliser l'Outil Étoile pour la créer avec des Splines de Contour et de Région puis ensuite utilisez l'Outil de Transformation pour la déformer.<br />
<br />
Maintenant vous êtes prêt pour le {{L|Doc:Flower Animation|dernier tutoriel}} de cette section. Allons-y!<br />
<br />
== Liens ==<br />
<br />
Une vidéo sur ce sujet est disponible [https://youtu.be/FBnBE9t3Jd8 ici]<br />
<br />
<br />
{{Navigation|Category:Manual|Doc:Flower Animation}}</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Creating_Shapes/fr&diff=23338Doc:Creating Shapes/fr2019-07-31T16:02:46Z<p>Synme: adding a link</p>
<hr />
<div><!-- Page info --><br />
{{Title|Créer des formes}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
{{Category|Unverified}}<br />
{{Category|Updated}}<br />
{{Navigation|Category:Manual|Doc:Flower Animation}}<br />
<br />
{{NewTerminology}}<br />
<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
Les {{l|Primitive_Layer|primitives}} de base telles les {{l|Circle Layer|cercles}} ou les {{l|Rectangle Layer|rectangles}}, avec lesquelles nous avons appris à travailler {{l|Doc:Adding_Layers|précédemment}}, sont toutes merveilleuses mais plutôt rigides géométriquement parlant. Pourquoi ne créerions-nous pas des formes plus élaborées ? Pour ce faire nous allons utiliser l'{{l|Spline Tool}}.<br />
<br />
== L'Outil Spline ==<br />
<br />
Dans Synfig l'élément de description des formes est appelé Spline. C'est grossièrement analogue à ce que d'autres programmes nomment "chemin" sauf qu'il s'agisse exclusivement de [https://fr.wikipedia.org/wiki/Spline_cubique_d'Hermite Spline cubique d'Hermite]. <br />
<br />
[[File:Toolbox Reset Colors Button_1_0.png|right|frame|Bouton "Réinitialiser les couleurs" dans la boite à outils]] Avant de commencer avec le tutoriel {{l|Doc:Creating Shapes}} ajoutons quelques éléments complémentaires sur la façon de fonctionner de Synfig. Quand vous cliquerez sur l'{{l|Spline Tool|Outil Spline}}, vous vous apercevrez que les poignées de l'objet en cours de sélection (si il en existe un) disparaîtront, mais que le calque correspondant restera sélectionné dans le {{l|Layers Panel|Panneau des Calques}}. C'est normal. Ce que vous allez dessiner avec l'Outil Spline sera inséré au-dessus du calque en cours de sélection. Gardez en mémoire que si vous voulez insérer une forme quelque part, vous devrez sélectionner exactement où vous voulez l'insérer avant d'activer l'Outil Spline &mdash; changer de sélection après-coup vous renverra automatiquement dans l'{{l|Transform Tool|Outil de transformation}}.<br />
<br />
Maintenant allez-y ! Cliquez sur le bouton {{Literal|Réinitialiser les couleurs}} dans l'angle inférieur gauche du widget de couleurs Premier plan/Arrière plan de la {{l|Toolbox|boite à outils}}. Celà rétablira les couleurs par défaut noir et blanc. Paramétrez également la {{l|Spline_Tool#Options|taille du pinceau}} vers quelque chose de bien assez fin &mdash; 10px devrait faire l'affaire.<br />
<br />
Lorsque vous activerez l'Outil Spline, vous irez vérifier le {{l|Tool Options Panel|panneau d'options des outils}}. Assurez-vous que seule les options {{Literal|Créer une Région}}, {{Literal|Créer un Contour}} et {{Literal|Lier les origines}} soient cochées. <br />
<br />
Si vous cliquez avec votre souris sur le calque vous positionnerez des vertexs (ou noeuds, ou sommets). Pendant que vous placez un vertex (sans relâcher) vous pouvez déplacer ses tangentes en déplaçant la souris. Répétez cela plusieurs fois, vous construisez une Spline.<br />
<br />
Il faut garder cependant à l'esprit que si durant cette construction vous n'aimez pas l'endroit ou vous avez positionné un vertex il n'y a rien qui vous permet de le déplacer. Si vous voulez supprimer un vertex, cliquez droit (sans relâcher) sur le vertex et sélectionnez {{Literal|Supprimer l'Elément Intelligent}}. Vous voulez séparer les tangentes ? Cliquez droit (sans relâcher) sur le vertex et sélectionnez {{Literal|Séparer les tangentes}}. Vous voulez fermer la Spline ? Cliquez droit (sans relâcher) sur le vertex et sélectionnez {{Literal|Boucler}}.<br />
<br />
[[Image:Creating-shapes-2-bline-construction.png|center|frame]]<br />
<br />
Lorsque vous avez terminer de placer les vertexs, nous devons sortir du mode de construction pour créer le calque(s) Spline; Il y a deux manières de procéder:<br />
#Changer d'outil.<br />
#Cliquez le bouton {{Literal|Créé une Spline et/ou une Région}} dans le bas du panneau d'options des outils (c'est l'icone qui ressemble à un trois engrenages)<br />
<br />
Pour le moment, continuons, changez d'outil pour l'{{l|Transform Tool|Outil Transformation}}, nous en avons finit avec l'outil Spline.<br />
<br />
[[Image:Creating-shapes-3-bline-region-outline.png|center|frame]]<br />
<br />
== Editer les Splines ==<br />
Ok, nous avons une mignonne et plutôt pale région avec un épais contour noir. Puisque nous avons coché {{Literal|Créer une région}} et {{Literal|Créer un contour}} dans les étapes précédentes, vous devriez remarquer qu'il y a deux calques créé &mdash; le {{l|Outline Layer|Contour}} ainsi que la {{l|Region Layer|Région}} dans le Panneau Calque. Bien que dans les faits vous avez deux calques différent, les paramètres de leurs vertexs ont été {{l|Linking|liés}} &mdash; vous pouvez donc sélectionner indifféremment l'un ou l'autre calque et déplacer ses poignées, l'autre devrait aussi se déplacer.<br />
<br />
Si vous voulez manipuler le vertices ''après'' que vous ayez créé les calques, c'est très simple. Cliquez simplement sur un calque et déplacer le vertex ou ses tangentes. Si vous voulez supprimer un vertex, cliquez droit dessus et sélectionner {{Literal|Supprimer l'élément (Intelligent)}}. Vous voulez ajouter un vertex, cliquez droit sur le segment à l'emplacement désiré et sélectionner {{Literal|Insérer un élément}}.<br />
<br />
Cela peut sembler être une pagaille de calques. Et oui, si vous n'utilisez pas le logiciel correctement, c'est exactement ce que vous obtiendrez. Mais il y a une manière plus sensé de procéder. Comme il est indiqué dans le {{l|Doc:Adding Layers|tutoriel précédent}}, vous pouvez {{l|Group|grouper}} les calques de manière hiérarchique.<br />
<br />
Une chose rapide à mentionner avant d'en finir. Vous pouvez changer la largeur du contour de chaque vertex. Vous faites cela en sélectionnant le calque contour (NOTE: vous devez sélectionner le calque Contour, le calque Région ne possède pas d'informations de largeur) et ajuster les poignées de largeur. Par défaut celles ci sont masquées. Pour les faire apparaitre, pressez {{Shortcut|alt|5}} ou cliquez sur le bouton {{Literal|Basculer les poignées}} dans la partie supérieur de la fenêtre canevas (le cinquième bouton en partant de la gauche). Un nouveau clique pour les cacher. Vous pouvez également trouver d'autres choses à masquer via le {{l|Canvas Menu Caret}} : {{c|Affichage|Montrer/Cacher les Poignées}}.<br />
<br />
== Utiliser une tablette pour dessiner des formes ==<br />
<br />
Si vous avez une [http://fr.wikipedia.org/wiki/Tablette_graphique tablette graphique], vous pouvez utiliser l'Outil Calligraphie pour créer des Splines.<br />
<br />
Synfig Studio gère la pression, mais vous devez d'abords le configurer. Allez à {{c|Fichier|Périphériques d'entrée...}} depuis le menu de la Boite à Outils. Dans la boite de dialogue {{Literal|Entrée}} selectionnez le stylet de votre tablette graphique et paramétrez son {{Literal|Mode}} sur {{Literal|Écran}}. Cliquez {{Literal|Enregistrer}} et ensuite {{Literal|Fermer}}.<br />
<br />
Maintenant, prenez votre stylet, créer un nouveau fichier et cliquez sur le bouton de l'Outil Calligraphie dans la boite à outils. Positionnez l'épaisseur par défaut de la ligne à une valeur relativement grande &mdash; disons, 15px &mdash; sinon vous ne noterez aucun effet de sensibilité à la pression. Choisissez marron comme {{l|New_Layer_Defaults#Brush_Colors|couleur de remplissage}}.<br />
<br />
{{Note|Note|Les étapes précédentes doivent être réalisées avec le stylet de votre tablette, pas avec la souris. Synfig Studio enregistre indépendamment les paramètres pour chaque périphériques d'entrées. C'est pour cela que si vous paramétrez ces options avec la souris cela n'aura aucun effet lorsque vous utiliserez votre stylet.}}<br />
<br />
Dans le panneau Options des outils, assurez vous que vous avez les mêmes options que dans la copie d'écran suivante.<br />
<br />
[[File:DrawToolOptions.png|center|frame]]<br />
<br />
Maintenant dessinons quelque chose comme un fond montagneux galbé. Démarrer en dessinant une ligne depuis la bordure gauche vers la moitié du canevas. Tentez de varier la pression sur votre stylet pendant que vous êtes en train de dessinez. Arrêtez près du centre du canevas. C'est votre première ligne. Vous pouvez noter le nouveau calque de contour qui à été créé dans le Panneau des Calques.<br />
<br />
[[Image:Creating-shapes-4-draw.png|center|frame]]<br />
<br />
Positionnez votre stylet sur la dernière poignée de votre nouvelle Spline et continuez en dessinant jusqu'à la bordure droite de votre canevas. Lorsque vous avez terminé, regardez à nouveau le panneau des calques. Il n'y a toujours qu'un seul calque de contour. Synfig Studio et suffisamment intelligent pour se rendre compte que nous n'avez pas besoin d'un nouveau calque de contour et prolonge le dernier. Nous pouvez prolonger la Spline depuis chacune des extrémités, mais si vous commencez à dessiner depuis n'importe qu'elle autre endroit du canevas, une nouveau calque de contour sera créé. Cependant votre première Spline restera active et rien ne vous empêchera de la prolonger plus tard.<br />
<br />
Revenons a votre œuvre. Dans la Boîte à Outils cliquez sur le bouton sceau afin de remplir le contour que vous venez juste de créer. Un calque Région apparait au dessus des calques sur lesquelles nous étions en trains de travailler. Sélectionnez le calque Contour et cliquez sur le bouton {{Literal|Monter le Calque}} dans le Panneau de Calque pour placer le Calque Contour au dessus de la Région.<br />
<br />
[[Image:Creating-shapes-5-draw.png|center|frame]]<br />
<br />
Étendre la ligne depuis chacune des extrémités vers les coins inférieur du canevas pour remplir la partie basse. Fantastique.<br />
<br />
[[Image:Creating-shapes-6-draw.png|center|frame]]<br />
<br />
Continuons et ajoutons quelques lignes supplémentaire au dessus de la région rempli pour donner un air de montagne. Si les poignées marrons sont sur votre chemin, vous poussez les cacher en cliquant sur le bouton {{Literal|Basculer les poignées de vertex}} dans le haut de la fenêtre canevas (le deuxième en partant de la gauche).<br />
<br />
[[Image:Creating-shapes-7-draw.png|center|frame]]<br />
<br />
L'outil Calligraphie est formidable pour dessiner des formes complexes, mais vous finirez avec un paquet de poignées, ce qui est difficile à manipuler avec l'Outil de transformation avec la manière décrite précédemment. Vous avez deux solutions.<br />
<br />
Premièrement, vous pouvez augmenter la valeur {{Literal|Adoucissement}} de la Spline dans la boite de dialogue Options des outils. Cela réduira le nombre de vertex créé au moment du dessin, mais votre forme sera moins détaillée. <br />
<br />
Deuxièmement, vous pouvez utiliser l'Outil Déplacement Lissé pour déformer une forme existante. Allons-y et cliquez sur le bouton Outil déplacement lissé dans la boite à outils. Le truc a propos de cette outil est qu'il n'affecte ''uniquement les poignées sélectionnées''. Cliquez sans relâcher le bouton gauche de la souris dans une partie vide du canevas. Déplacer la souris pour créer une boite de sélection. Relâcher le bouton de la souris lorsque vous aurez terminé. Ou alors simplement faites {{Shortcut|Ctrl|a}} pour sélectionner toute les poignées. Maintenant vous pouvez déformer les portions de Splines sélectionnés. Vous pouvez changer la zone d'influence en modifiant le {{Literal|Rayon}} dans la Panneau Options des Outils.<br />
<br />
Quand est-il de l'épaisseur du contour? Il y a un Outil Épaisseur pour cela. Il est conçu pour augmenter ou diminuer l'épaisseur de la ligne sensiblement a ce que vous pourriez faire avec un crayon sur une feuille de papier. Cliquez sur Outil Épaisseur dans la Boite à Outils, déplacer votre stylet au dessus de la ligne que vous voulez changer, pressez et déplacer le curseur de part et d'autre le long de la ligne, comme si vous grattiez quelque chose. L'épaisseur du contour seras augmentée jusqu'à la position au vous aurez placé le curseur. Si vous voulez diminuer l'épaisseur, cliquez simplement sur la touche "Ctrl" lorsque vous grattez. Facile!<br />
<br />
Si vous ne souhaitez pas que les poignées d'épaisseur soit affichées durant l'utilisation de l'outil épaisseur, cacher les en cliquant sur le bouton {{Literal|Basculer les poignées de largeur}} dans le haut de la fenêtre canevas.<br />
<br />
== D'autres façons de créer des Splines ==<br />
<br />
Est ce que c'est tout? Pas encore. Vous pouvez également utiliser l'outil Cercle, Rectangle, Étoile et Polygone pour créer des Splines. Vérifier les options {{Literal|Créer un Contour}} et {{Literal|Créer une Région}} dans le panneau Options des Outils lorsque vous utilisez ces outils. <br />
<br />
Créer des formes géométriques en Spline vous donne un meilleur contrôle sur ces formes et leur apparence. Par exemple, si vous désirez une étoile difforme, vous pouvez utiliser l'Outil Étoile pour la créer avec des Splines de Contour et de Région puis ensuite utilisez l'Outil de Transformation pour la déformer.<br />
<br />
Maintenant vous êtes prêt pour le {{L|Doc:Flower Animation|dernier tutoriel}} de cette section. Allons-y!<br />
<br />
{{Navigation|Category:Manual|Doc:Flower Animation}}<br />
<br />
== Liens ==<br />
<br />
Une vidéo sur ce sujet est disponible [https://youtu.be/FBnBE9t3Jd8 ici]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Video_Tutorials&diff=23337Doc:Video Tutorials2019-07-31T15:51:39Z<p>Synme: add link</p>
<hr />
<div><!-- Page info --><br />
{{Title|Video Tutorials}}<br />
{{Category|Tutorials}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Video tutorials could be updated with last version!<br />
<br />
In this section you'll find some basic video tutorials of the most common tasks in Synfig. Feel free to ask here for any new video tutorial.<br />
<br />
= Basics of Animations =<br />
<br />
In this sections, how to use simple part of Synfig studio, mostly one Layer usage.<br />
<br />
== Animation Basics ==<br />
<br />
[http://www.youtube.com/watch?v=WUxn9jqFJrg Synfig basic animation tutorial]: This video tutorial shows how to do a (very) basic animation. The tutorial roughly follows the [[Doc:Animation_Basics]] tutorial.<br />
<br />
<videoflash>WUxn9jqFJrg|425|344</videoflash><br />
<br />
<br />
== Creating a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=bQ-ku0bA23A Creating a Spline]: This small video tutorial shows the basic steps to build a Spline. Video editing was done using Synfig itself.<br />
<br />
<videoflash>bQ-ku0bA23A|425|350</videoflash><br />
<br />
<br />
== Creating Circles, Rectangles and a Spline ==<br />
<br />
[https://youtu.be/SM1qUqGyIpA Creating Circles, Rectangles, and a Spline]: Short tutorial about creating Circles, Rectangles, and a Spline.<br />
<br />
A more recent 4K [https://youtu.be/FBnBE9t3Jd8 video] has been redone with the help of the video above.<br />
<br />
== Curve warp demonstration ==<br />
<br />
I'd like to introduce few videos about my experiments with curve warp deformation layer. Unfortunately I'm bad translator and I sounded it in russian, but I hope video is clear enough as is. If any [http://synfig.org/forums/viewtopic.php?f=6&t=4229 question] ask me I'll try to explain.<br />
<br />
=== [https://www.youtube.com/watch?v=Gz7gSBVHnjo Part 1 of 3] ===<br />
<videoflash>Gz7gSBVHnjo|425|344</videoflash><br />
=== [https://www.youtube.com/watch?v=Y5GFP_eU_Mk Part 2 of 3] ===<br />
<videoflash>Y5GFP_eU_Mk|425|344</videoflash><br />
=== [Planned Part 3 of 3] ===<br />
<br />
== Blend Test ==<br />
<br />
[http://www.youtube.com/watch?v=_n23xOvONb8 Synfig Blend Test]: 22 blend methods times 15 layers = 330 boring frames. At 0.55 fps = 10 boring minutes. Enjoy!<br />
<br />
<videoflash>_n23xOvONb8|425|350</videoflash><br />
<br />
<br />
= Animation =<br />
<br />
== Flower Animation ==<br />
<br />
This video tutorial shows how to do an animation of a growing flower. The tutorial roughly follows the written [[Doc:Flower_Animation]] tutorial.<br />
<br />
=== [http://www.youtube.com/watch?v=U1EjObyN1pc Part 1 of 4] ===<br />
<br />
<videoflash>U1EjObyN1pc|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=oSAilqEKEJs Part 2 of 4] ===<br />
<br />
<videoflash>oSAilqEKEJs|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=STP01dOxvMU Part 3 of 4] ===<br />
<br />
<videoflash>STP01dOxvMU|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=8dcAqZxwOWM Part 4 of 4] ===<br />
<br />
<videoflash>8dcAqZxwOWM|425|344</videoflash><br />
<br />
== How to animate with Synfig Studio ==<br />
<br />
<videoflash>cDMbDQ07Qkg|425|344</videoflash><br />
<br />
== Following a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=w87KRL3kD74 Following a Spline:] This video tutorial show how to link a shape to a Spline. It doesn't follow strictly the [[Doc:Following_a_Spline]] but would help you to follow it. <br />
<br />
<videoflash>w87KRL3kD74|425|350</videoflash><br />
<br />
A more recent 4K [https://youtu.be/d1hPxgq2qeU video] has been redone with the help of the video above, English subtitles are included.<br />
<br />
== Motion Tracking Tutorial ==<br />
<br />
This Tutorial shows how to list import and how to do motion tracking. <br />
<br />
<videoflash>YAyKUr-rGOM|425|344</videoflash><br />
<br />
== Pseudo IPO-drivers in Synfig ==<br />
<br />
Zelgadis gave us [http://zelgadis.profusehost.net/files/synfig/ipo-drivers-synfig.ogg this] method to control playback using a variable.<br />
<br />
== Animating a caped character ==<br />
<br />
A 3-part tutorial on making an animated caped character in synfig.<br />
<br />
=== [https://youtu.be/S0snIErKuFg Part 1 of 3] ===<br />
<br />
<br />
<br />
=== [https://youtu.be/nv_KR9rG55Y Part 2 of 3] ===<br />
<br />
<br />
<br />
=== [https://youtu.be/s3B9L6amPn8 Part 3 of 3] ===<br />
<br />
== Lip Syncing ==<br />
<br />
[http://www.youtube.com/watch?v=S8rFv_pjfgs Synfig lipsync animation tutorial]: This video tutorial shows how to lipsync your animation with a .lst file and the Papagayo Program. Based off of the [[Doc:Lipsync]] tutorial.<br />
<br />
<videoflash>S8rFv_pjfgs|425|344</videoflash><br />
<br />
<br />
[https://www.youtube.com/watch?v=waI3AwXfIy4 simple lipsync by Zmeyk] : Simple method of synchronizing lips of animated character with recorded voice.<br />
<br />
<videoflash>waI3AwXfIy4|425|344</videoflash><br />
<br />
== Walk Cycle + TimeLoop layer ==<br />
<br />
[https://www.youtube.com/watch?v=VSD3aIi8JZ0 Caminata + Time Loop en Synfig Studio] show how to do a walk cycle step by step and then loop it with the [[TimeLoop Layer]] by http://www.lobozamora.com/<br />
<br />
<videoflash>VSD3aIi8JZ0|425|344</videoflash><br />
<br />
<br />
== Shiny Effects ==<br />
<br />
This tutorial follows the [[Doc:Shiny_Effects]] tutorial<br />
<br />
<videoflash>8QX0dJX2sI8|425|344</videoflash><br />
<br />
== Kynetic Typography ==<br />
<br />
Micro-tutorial by Yoyobuae<br />
<br />
See forum [https://forums.synfig.org/t/typography-and-motion-graphics-tools/2864/5 post] and [http://youtu.be/FZfypmXrMIo for more informations]<br />
<br />
<br />
<br />
=Advanced =<br />
<br />
== How to vectorize a drawing ==<br />
<br />
https://www.youtube.com/watch?v=oH5LudWwb2w<br />
<br />
<videoflash>oH5LudWwb2w|425|344</videoflash><br />
<br />
Realised with Synfig 1.0.x by [http://www.lobozamora.com/ LoboZamora]<br />
<br />
== Making headturn guides using Synfig ==<br />
<br />
https://www.youtube.com/watch?v=HBFqTlmR6qw<br />
<br />
<videoflash>HBFqTlmR6qw|425|344</videoflash><br />
<br />
Realised with Synfig 0.64.1 by Konstantin Dmitriev<br />
<br />
Nota: to help to translating and caption this video : http://amara.org/v/CUeA/</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Reuse_Animations/fr&diff=23336Doc:Reuse Animations/fr2019-07-21T15:45:15Z<p>Synme: Correction orthographe.</p>
<hr />
<div><!-- Page info --><br />
{{Title|Réutiliser les Animations}}<br />
{{TOCright}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
<br />
L'un des buts de tout animateur (spécialement pour les plus paresseux comme moi) est d'avoir l'opportunité de réutiliser des parties d'animation. Cela permet de sauver beaucoup de temps si vous pouvez insérer certaines portions d'animations déjà enregistrées à une autre position dans la temps.<br />
<br />
C'est tout spécialement utile pour faire parler les personnage car vous avez à animer la bouche du personnage selon des positions répétées dépendant des phonèmes qu'ils représentent durant le discours.<br />
<br />
Cela peut être fait très simplement en utilisant une combinaison de {l|Keyframe|keyframes}} et de canevas exportés.<br />
<br />
== Keyframes ==<br />
<br />
Notre but est d'enregistrer des animations et de les réustiliser plus tard. Cela peut être fait en utilisant des keyframes. Si vous créez quelques keyframes au début de votre animation, vous pouvez réutiliser ces "poses" plus loin dans le temps en dupliquant simplement les keyframes à une autre position dans le temps. Pour cela, faites simplement ce qui suit:<br />
<br />
# Créez une Keyframe à une trame donnée (toutes vos keyframes devraient être créées proches les unes des autres pour utiliser une petite portion du temps. Nous voulons seulement enregistrer une "pose" et non une transition)<br />
# Modifiez vos objets comme vous le désirez (par exemple faites fermer un oeil en déplaçant uniquement les points de la paupière).<br />
# Donnez un nom à la keyframe en cliquant sur la cellule Description correspondante. <br />
# Répétez les étapes précédentes le nombre de fois nécessaire pour faire une nouvelle "pose". Disons que vous avez créé une keyframe à la trame n°2 (oeil ouvert) et n°4 (oeil fermé)<br />
# Une fois terminé allez à une autre trame avec le {{l|Time Cursor|curseur de temps}}, sélectionnez la keyframe que vous voulez ajouter et pressez le bouton "Duplicate keyframe". Vous obtiendrez une copie de la keyframe sélectionnée à la position courante du {{l|Time Cursor|curseur de temps}}.<br />
<br />
[[File:Reuse Animations 1 0.63.06.png|frame|none]]<br />
<br />
Il y a un problème avec cette technique. Vous faites des copies de toutes les poses de l'animation que vous avez stockées dans les premières keyframes du temps (trame 2 et 4 dans ce cas) et donc vous avez fait des copies de tous les autres objets existant dans la scène (dans cet exemple, le globe occulaire).<br />
<br />
Si vous avez déjà une animation enregistrée du globe occulaire et que vous superposez un ensemble de keyframes "clignement" (ouvert et fermé)au milieu, alors l'animation du globe occulaire sera cassée par l'insertion des copies des keyframes de mouvements de la paupière.<br />
<br />
== Export du paramètre Canvas ==<br />
<br />
A chaque fois que vous groupez les calques, vous obtenez un {{l|Group Layer}} qui empêche la composition des calques contenus au dessus des calques en dehors de lui.<br />
<br />
Un des paramètres du Group Layer est le {{l|Canvas|Canvas}}. Le canevas est comme un espace de travail qui représente tous les calques groupés. <br />
<br />
[[File:Reuse Animations 2 0.63.06.png|frame|none]]<br />
<br />
Pour éviter le problème décrit dans la section précédente (les keyframes affectent tous les objets dans la scène) vous pouvez faire ce qui suit:<br />
<br />
#Avant de créer les poses de la keyframe de la paupière, groupez tous les calques qui forment les paupières.<br />
#Sélectionnez le calque Groupe et sélectionnez le paramètre Canvas dans le dialogue Paramètres. <br />
#Cliquez-droit sur le paramètre Canvas, exportez-le, et donnez-lui un nom (dans cet exemple ce sera "eyelids"). <br />
<br />
[[File:Reuse Animations 3 0.63.06.png|frame|none]]<br />
<br />
Allez au {{l|Canvas Browser Panel}} et sélectionnez le canevas tout juste exporté. <br />
<br />
Double-cliquez dessus et une nouvelle fenêtre de zone de travail va s'ouvrir avec uniquement les calques qui ont été groupés à l'étape 1 - le canvas "eyelids" dans cet exemple. <br />
<br />
[[File:Reuse Animations 4 0.63.06.png|frame|none]]<br />
<br />
<br />
Créez toutes les keyframes que vous devez stocker pour vos "poses". Une fois fait, allez à la bonne trame et insérez une copie de la pose. Cela va produire une keyframe dans le canevas "eyelids", mais ne va produire aucune keyframe sur les autres calques (par exemple le globe occulaire). Cela permet d'animer indépendamment une portion du modèle séparée du reste. Assurez_vous que le canevas exporté est aussi long que l'animation.<br />
<br />
Maintenant une fois que vous avez stocké les clignements de l'oeil (ouvert et fermé) à la position désirée vous pouvez aller à la fenêtre principale (fermez simplement la zone de travail du canevas "eyelids"). Vous verrez alors que toutes les modifications ont été transmises à l'animation principale mais mais elles n'ont créée aucune keyframe dans la zone de travail principale. Même les calques qui se trouvent à l'intérieur du calque groupe "eyelids" n'ont aucune keyframes (vous pouvez voir une indication de la présence de keyframes dans le canevas exporté - lignes verticales dashée - mais aucune keyframe n'est affichées dans le dialogue keyframes). Dans tous les cas, vous pouvez voir les waypoints créés par les keyframes et les ajuster, mais pas les keyframes elles-mêmes. Pour modifier les keyframes vous devriez éditer le canevas exporté à nouveau dans sa propre zone de travail. Si vous modifiez les calques groupés depuis la zone de travail principale, les waypoints seront créés en fonction des keyframes de la zone de travail principale, pas de la zone de travail exportée, ainsi vous obtiendrez différents effets selon que zone de travail que vous utilisez pour modifierls les calques groupés.<br />
<br />
Maintenant, une fois que vous avez créé votre animation des paupières vous pouvez aller au globe occulaire et le modifier selon votre goût, en insérant keyframes ou waypoints sans avoir à vous inquiéter d'interférer avec l'animation des paupière. Vous pouvez aussi animer le globe occulaire avant et faire l'animation des paupières plus tard. Ils n'interféreront pas entre eux.<br />
<br />
Ce serait une grande amélioration si vous pouvier connecter les curseurs de temps de la zone de travail principale et la zone de travail du canevas exporté pour afficher les deux fenêtres au même temps courant. Ceci permettrait de donner un retour sur où insérer les keyframes des "poses" de votre animation locale.<br />
<br />
== Un exemple == <br />
<br />
Vous trouverez ici un exemple d'animation d'un oeil qui cligne (les positions fermées et ouvertes sont des copies des keyframes "Open" et "Closed", tout en ayant le globe occulaire qui bouge indépendamment dans sa propre animation.<br />
<br />
Les poses "Open" et "Closed" sont stockées aux trames 0 et 2. L'animation est définie pour commencer à la trame 6.<br />
<br />
[[File:Eyeblink.gif]]<br />
<br />
[[Media:Eyeblink.sifz|Sample file]]<br />
<br />
Tous les commentaires sont les bienvenus.</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Following_a_Spline&diff=23335Doc:Following a Spline2019-07-20T17:55:37Z<p>Synme: update link</p>
<hr />
<div><!-- Page info --><br />
{{Title|Following a Spline}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
:Note: There is also a slightly out-of-date tutorial on this topic at [[Tracking Curves]]. It contains some info, particularly about link/export, '''which hasn't yet been added to this new tutorial'''. There is also another [[Following a BLine (the very old way)|very out-of-date tutorial]] for synfig 0.61.08.<br />
== Introduction ==<br />
<br />
This tutorial will demonstrate how to make an object follow the path of an arbitrary curve, rotating to face the direction of travel.<br />
<br />
== Summary ==<br />
<br />
We're going to:<br />
<br />
* {{l|Doc:Following a Spline#Create the Layers|Draw a curve and an arrow}}<br />
* {{l|Doc:Following a Spline#Make the Arrow Move and Rotate|Link the arrow's Origin and Rotation}} to the Spline so the arrow follows the curve<br />
<br />
== Tutorial ==<br />
<br />
This is a brief tutorial giving an example of how to use it:<br />
<br />
=== Create the Animation ===<br />
<br />
File > New<br />
<br />
=== Create the Layers ===<br />
<br />
Select the {{l|Spline Tool}}<br />
[[File:Spline-tool-0.63.06.png|frame|none]]<br />
<br />
enable just the Outline checkbox<br />
<br />
draw a spline that you want the arrow to move along<br />
<br />
click the {{Literal|Make Spline}} icon in the bottom left of the {{l|Tool_Options_Panel}} to create the spline.<br />
<br />
still in the Spline Tool, enable {{Literal|Create Outline}} and {{Literal|Create Region}} checkboxes in tool options<br />
[[File:Spline-Tool-Options_0.63.06.png|frame|center]]<br />
<br />
draw an arrow or whatever, pointing to the right.<br />
<br />
Switch to the {{l|Transform Tool}}<br />
<br />
select the outline, hit control-a to select all its {{l|Handle|handles}} except the green position handle<br />
<br />
drag the handle so that the arrow is centred around the green position handle<br />
<br />
Add a {{l|Rotate Layer}} above the outline and region<br />
<br />
{{l|Group}} the rotate, outline, and region layers<br />
<br />
so now you've got 2 top-level layers: a curved path, and a group containing an arrow and a rotate layer<br />
<br />
=== Make the Arrow Move and Rotate ===<br />
<br />
* Select the group layer by clicking it in the {{l|Layers Panel}}<br />
* Select its green position {{l|Handle|handle}} by clicking on it in the {{l|WorkArea}}<br />
** additionally select the Rotate layer by holding Control and clicking it in the Layers panel<br />
** additionally select the blue "rotation amount" handle by holding {{Shortcut|ctrl}} and clicking on it in the canvas window<br />
<br />
So now we should have 2 layers selected, and one handle from each of those 2 layers selected<br />
<br />
Now additionally select the curved spline layer (it should be the last layer in the Layer panel's list) by holding {{Shortcut|ctrl}} and clicking on it<br />
<br />
Right-click on the dotted line that indicates the position of the curved spline - not on any handle, but on the dotted line between handle<br />
<br />
From the context menu that pops up, select {{Literal|Link to Spline}}<br />
[[Image:Spline-Link-to-0.63.06.png|none|frame|See also {{l|Command:Link_to_Spline}} ]]<br />
<br />
The arrow group should move so that its green position handle is on the spline, and it should rotate so that the arrow points along the spline at that point<br />
<br />
Select just the group layer, and drag its green handle around. you'll see that the handle is constrained now to line on the spline, and that dragging it also affects the rotation of the arrow as expected<br />
<br />
We can now animate the arrow. turn on {{l|Animate_Editing_Mode}} by clicking the icon in the bottom right of the canvas window.<br />
<br />
* at time '''0f''', drag the group layer's green position handle to one end of the spline<br />
* at time '''5s''', drag the same position handle to the other end of the spline<br />
<br />
Try {{c|<Caret Menu>|<File>|Preview|}} to watch the animation.<br />
<br />
== Results ==<br />
<br />
This is the animation I ended up with: <br />
[[File:Arrow-follows-bline.gif|center|alt Following a Spline example]]<br />
<br />
Synfig project : {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Controlling the linear velocity ==<br />
<br />
By default, the arrow travels the whole spline with a constant velocity, independently of the spline structure.<br />
<br />
If you select the group layer and look at the Parameters Panel, then you'll see that its Origin parameter is {{L|convert|converted}} to {{Literal|Spline Vertex}} type. This is done automatically when you do "Link to Spline" action. You can disable the "Homogenous" subparameter and then the speed of the arrow will depend on the spline structure - it will take the same time to move along each segment of the spline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the spline) is not constant.<br />
<br />
For illustration of the "Homogenous" effect see [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].<br />
<br />
== See also ==<br />
* Synfig forum : [http://www.synfig.org/forums/viewtopic.php?f=8&t=4563 Following a path duplicated]<br />
* Synfig forum : [http://www.synfig.org/forums/viewtopic.php?t=2803 animate a "travel path"]<br />
* Synfig forum : [http://www.synfig.org/forums/viewtopic.php?f=8&t=9157 A path of scraps(or any other object)]<br />
* Link to Spline command : {{l|Command:Link_to_Spline}}<br />
* A [https://youtu.be/d1hPxgq2qeU video link] showing the explanation of this page.</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Video_Tutorials&diff=23334Doc:Video Tutorials2019-07-20T17:46:13Z<p>Synme: update link</p>
<hr />
<div><!-- Page info --><br />
{{Title|Video Tutorials}}<br />
{{Category|Tutorials}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Video tutorials could be updated with last version!<br />
<br />
In this section you'll find some basic video tutorials of the most common tasks in Synfig. Feel free to ask here for any new video tutorial.<br />
<br />
= Basics of Animations =<br />
<br />
In this sections, how to use simple part of Synfig studio, mostly one Layer usage.<br />
<br />
== Animation Basics ==<br />
<br />
[http://www.youtube.com/watch?v=WUxn9jqFJrg Synfig basic animation tutorial]: This video tutorial shows how to do a (very) basic animation. The tutorial roughly follows the [[Doc:Animation_Basics]] tutorial.<br />
<br />
<videoflash>WUxn9jqFJrg|425|344</videoflash><br />
<br />
<br />
== Creating a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=bQ-ku0bA23A Creating a Spline]: This small video tutorial shows the basic steps to build a Spline. Video editing was done using Synfig itself.<br />
<br />
<videoflash>bQ-ku0bA23A|425|350</videoflash><br />
<br />
<br />
== Creating Circles, Rectangles and a Spline ==<br />
<br />
[https://youtu.be/SM1qUqGyIpA Creating Circles, Rectangles, and a Spline]: Short tutorial about creating Circles, Rectangles, and a Spline.<br />
<br />
== Curve warp demonstration ==<br />
<br />
I'd like to introduce few videos about my experiments with curve warp deformation layer. Unfortunately I'm bad translator and I sounded it in russian, but I hope video is clear enough as is. If any [http://synfig.org/forums/viewtopic.php?f=6&t=4229 question] ask me I'll try to explain.<br />
<br />
=== [https://www.youtube.com/watch?v=Gz7gSBVHnjo Part 1 of 3] ===<br />
<videoflash>Gz7gSBVHnjo|425|344</videoflash><br />
=== [https://www.youtube.com/watch?v=Y5GFP_eU_Mk Part 2 of 3] ===<br />
<videoflash>Y5GFP_eU_Mk|425|344</videoflash><br />
=== [Planned Part 3 of 3] ===<br />
<br />
== Blend Test ==<br />
<br />
[http://www.youtube.com/watch?v=_n23xOvONb8 Synfig Blend Test]: 22 blend methods times 15 layers = 330 boring frames. At 0.55 fps = 10 boring minutes. Enjoy!<br />
<br />
<videoflash>_n23xOvONb8|425|350</videoflash><br />
<br />
<br />
= Animation =<br />
<br />
== Flower Animation ==<br />
<br />
This video tutorial shows how to do an animation of a growing flower. The tutorial roughly follows the written [[Doc:Flower_Animation]] tutorial.<br />
<br />
=== [http://www.youtube.com/watch?v=U1EjObyN1pc Part 1 of 4] ===<br />
<br />
<videoflash>U1EjObyN1pc|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=oSAilqEKEJs Part 2 of 4] ===<br />
<br />
<videoflash>oSAilqEKEJs|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=STP01dOxvMU Part 3 of 4] ===<br />
<br />
<videoflash>STP01dOxvMU|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=8dcAqZxwOWM Part 4 of 4] ===<br />
<br />
<videoflash>8dcAqZxwOWM|425|344</videoflash><br />
<br />
== How to animate with Synfig Studio ==<br />
<br />
<videoflash>cDMbDQ07Qkg|425|344</videoflash><br />
<br />
== Following a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=w87KRL3kD74 Following a Spline:] This video tutorial show how to link a shape to a Spline. It doesn't follow strictly the [[Doc:Following_a_Spline]] but would help you to follow it. <br />
<br />
<videoflash>w87KRL3kD74|425|350</videoflash><br />
<br />
A more recent 4K [https://youtu.be/d1hPxgq2qeU video] has been redone with the help of the video above, English subtitles are included.<br />
<br />
== Motion Tracking Tutorial ==<br />
<br />
This Tutorial shows how to list import and how to do motion tracking. <br />
<br />
<videoflash>YAyKUr-rGOM|425|344</videoflash><br />
<br />
== Pseudo IPO-drivers in Synfig ==<br />
<br />
Zelgadis gave us [http://zelgadis.profusehost.net/files/synfig/ipo-drivers-synfig.ogg this] method to control playback using a variable.<br />
<br />
== Animating a caped character ==<br />
<br />
A 3-part tutorial on making an animated caped character in synfig.<br />
<br />
=== [https://youtu.be/S0snIErKuFg Part 1 of 3] ===<br />
<br />
<br />
<br />
=== [https://youtu.be/nv_KR9rG55Y Part 2 of 3] ===<br />
<br />
<br />
<br />
=== [https://youtu.be/s3B9L6amPn8 Part 3 of 3] ===<br />
<br />
== Lip Syncing ==<br />
<br />
[http://www.youtube.com/watch?v=S8rFv_pjfgs Synfig lipsync animation tutorial]: This video tutorial shows how to lipsync your animation with a .lst file and the Papagayo Program. Based off of the [[Doc:Lipsync]] tutorial.<br />
<br />
<videoflash>S8rFv_pjfgs|425|344</videoflash><br />
<br />
<br />
[https://www.youtube.com/watch?v=waI3AwXfIy4 simple lipsync by Zmeyk] : Simple method of synchronizing lips of animated character with recorded voice.<br />
<br />
<videoflash>waI3AwXfIy4|425|344</videoflash><br />
<br />
== Walk Cycle + TimeLoop layer ==<br />
<br />
[https://www.youtube.com/watch?v=VSD3aIi8JZ0 Caminata + Time Loop en Synfig Studio] show how to do a walk cycle step by step and then loop it with the [[TimeLoop Layer]] by http://www.lobozamora.com/<br />
<br />
<videoflash>VSD3aIi8JZ0|425|344</videoflash><br />
<br />
<br />
== Shiny Effects ==<br />
<br />
This tutorial follows the [[Doc:Shiny_Effects]] tutorial<br />
<br />
<videoflash>8QX0dJX2sI8|425|344</videoflash><br />
<br />
== Kynetic Typography ==<br />
<br />
Micro-tutorial by Yoyobuae<br />
<br />
See forum [https://forums.synfig.org/t/typography-and-motion-graphics-tools/2864/5 post] and [http://youtu.be/FZfypmXrMIo for more informations]<br />
<br />
<br />
<br />
=Advanced =<br />
<br />
== How to vectorize a drawing ==<br />
<br />
https://www.youtube.com/watch?v=oH5LudWwb2w<br />
<br />
<videoflash>oH5LudWwb2w|425|344</videoflash><br />
<br />
Realised with Synfig 1.0.x by [http://www.lobozamora.com/ LoboZamora]<br />
<br />
== Making headturn guides using Synfig ==<br />
<br />
https://www.youtube.com/watch?v=HBFqTlmR6qw<br />
<br />
<videoflash>HBFqTlmR6qw|425|344</videoflash><br />
<br />
Realised with Synfig 0.64.1 by Konstantin Dmitriev<br />
<br />
Nota: to help to translating and caption this video : http://amara.org/v/CUeA/</div>Synmehttps://wiki.synfig.org/index.php?title=Template:KeyframeAddRemoveDuplicate&diff=23332Template:KeyframeAddRemoveDuplicate2019-03-11T19:59:55Z<p>Synme: add link</p>
<hr />
<div>===Add a keyframe===<br />
[[File:KeyframeButton AddNew 0.63.06.png|frame|none]]<br />
<br />
Place the time cursor at a frame where there isn't currently any keyframe. Then press the {{Literal|Add new Keyframe}} button. If you place the time cursor at a frame where there is currently an existing keyframe or if animation Start Time egals animation End Time (animation Duration is 0m 0s 1f) then the {{Literal|Add new Keyframe}} button is disabled. Once you press the button then a new entry is added to the list of keyframes and a vertical dashed line is added in the time line. No waypoint is created.<br />
<br />
===Duplicate a keyframe===<br />
[[File:KeyframeButton Duplicate 0.63.06.png|frame|none]]<br />
<br />
Select a keyframe in the keyframe list of the {{l|Keyframes Panel}} and place the cursor at a frame where there isn't currently any keyframe. Then press the {{Literal|Duplicate Keyframe}} button. This would have two separated effects:<br />
<br />
# If there is a waypoint at the original keyframe then the waypoint is duplicated. Its duplication includes the parameter value and its interpolation types.<br />
# If there is no waypoint in the original keyframe for any particular parameter then two things could happen:<br />
#*There is no waypoint for that parameter at ANY frame in the time line: Then NO waypoint is created.<br />
#*If there is a waypoint in the time line for that parameter, but not in the keyframe that is going to be duplicated, then in the duplicated keyframe is created a new waypoint with a value for the parameter of the result of the current value at the original keyframe and a {{Literal|TCB Smooth}} interpolation type for both {{Literal|In}} and {{Literal|Out}}.<br />
<br />
Of course, duplicate a keyframe will produce a new keyframe at the place pointed by the time cursor and will add a new one to the keyframe list in the proper place. In the keyframe list, the new added keyframe have the same description than the original, plus a {{Literal|(Duplicate)}} at the end.<br />
<br />
[https://youtu.be/qvRt3ITSkrQ video explanation]<br />
<br />
===Remove a keyframe===<br />
[[File:KeyframeButton Remove 0.63.06.png|frame|none]]<br />
<br />
Just select a keyframe from the keyframe list and press the Remove keyframe button. It will remove the keyframe and all the waypoints for all parameters for all layers that are currently there.<br />
<br />
<cite>''NOTE: If you move a keyframe by modifying its {{l|#Time|time}} in the keyframe list dialog and immediately press the Remove Keyframe button then the waypoints are not deleted. It seems to be a bug but also can be considered a feature if you really want to keep the waypoints and not the keyframe.''</cite></div>Synmehttps://wiki.synfig.org/index.php?title=Keyframe/fr&diff=23331Keyframe/fr2019-03-11T19:45:13Z<p>Synme: add link</p>
<hr />
<div>{{Title|Image clé}}<br />
{{Category|Glossary}}<br />
{{NewTerminology}}<br />
<br />
Cette page à besoin d'être traduite, soyez patient et/ou participez!<br />
<br />
== Une image clé, c'est quoi ? ==<br />
<br />
Basiquement, une image clé c'est un "repère" dans l'axe de temps. Ce repère permet à l'utilisateur de signaler à Synfig de se souvenir de l'état de l'animation à ce point précis (image). Cela signifie que l'image clé est comme une étiquette qui indique à Synfig que cette image doit être prise en compte lors de la création des points de passages. Cela indique aussi que cette image qui à été repérée est une image spéciale dans laquelle les informations de ''tout les paramètres de chaque calque sont enregistrés dans le but de les utiliser ultérieurement''.<br />
<br />
Chaque image clé est associé avec sa propre image et une image peut avoir uniquement une seule image clé.<br />
<br />
== A quoi ressemble une image clé ? ==<br />
<br />
Une image clé ressemble, dans le {{l|Timetrack Panel}}, à une ligne verticale pointillé de couleur marron clair situé à l'image correspondante. Vous pouvez la différencier du curseur de temps grâce à sa couleur (le curseur de temps est bleu). <br />
<br />
[[File:KeyframesLook-TimeTrack 0.63.06.png|frame|none]]<br />
<br />
Les points que l'on voit dans l'image sont des {{l|Waypoints|points de passage}}.<br />
<br />
The keyframe representation in the {{l|Timebar}} change according their states : {{literal|Normal}}, {{literal|Selected}} or {{literal|Deactivated}}<br />
[[File:Keyframe State Representation.png|frame|none|Three keyframes with three different states : '''Normal''', '''Selected''' and '''Deactivated''']]<br />
<br />
Les images clés apparaissent également sous forme de liste dans le {{l|Keyframes Panel}}<br />
<br />
[[File:KeyframesLook-KeyframePanel 0.63.06.png|frame|none]]<br />
<br />
'''Remarque pour les rédacteurs de documentation:''' Vous pouvez télécharger le projet pour faire des copies d'écrans : {{l|File:Keyframe-lookslike.sifz}}<br />
<br />
== Images clés et points de passages ==<br />
<br />
Une image clé n'implique pas nécessairement un point de passage, et inversement (un point de passage n'implique pas forcement une image clé) . <br />
<br />
Une image clé peut vivre sa vie sans aucun point de passage, elle enregistre toutes les valeurs des paramètres de cette image spécifique. Si il y a un point de passage à cette endroit, alors l'information (uniquement la valeur paramètre) du point de passage est aussi enregistrée. Si aucun point de passage n'est présent à l'endroit de l'image clé alors les valeurs "stockée" sont le résultat des points de passages environnants, valeurs des paramètres et valeurs d'interpolation que les points de passage possèdent. Cela signifie qu'une image clé se souvient de la valeurs des paramètres à l'endroit de l'image mais ne les conserve pas statiquement. Pour maintenir statique une valeur de paramètre dans une certaine image, vous devez utiliser un point de passage.<br />
<br />
La création d'un point de passage peut provoquer la création de nouveaux points de passages dans l'image clé voisine suivant la valeur de la condition {{l|Lock Keyframes}}. Ainsi, possiblement, la création d'un point de passage (en modifiant un paramètre, en collant ou déplaçant un point de passage ou même en dupliquant une image clé) peut entrainer la création d'un point de passage dans l'image clé immédiatement avant ou après l'image possédant le point de passage. Les points de passages crées dans le voisinage d'images clés le sont en accord avec les {{l|New Layer Defaults|valeurs d'interpolation par défaut}} de la {{l|Toolbox|fenêtre d'outils}}.<br />
<br />
Voir les [http://wiki.synfig.org/wiki/Keyframe/fr#Exemples exemples] afin de comprendre comment cela fonctionne.<br />
<br />
== Ajouter, dupliquer et supprimer des images clés ==<br />
<br />
===Ajouter une image clé===<br />
[[File:KeyframeButton AddNew 0.63.06.png|frame|none]]<br />
<br />
Positionnez le curseur de temps sur une image dans laquelle aucune image clé n'existe. Ensuite, appuyer sur le bouton {{Literal|Ajouter une image clé}}. Si vous positionnez le curseur de temps sur une image dans laquelle une image clé existe, alors le bouton {{Literal|Ajouter une image clé}} est désactivé. Une fois que vous avez pressé le bouton, une nouvelle entré est ajouté dans la liste des images clé et un ligne pointillé vertical est ajouté dans l'axe de temps.<br />
<br />
===Dupliquer une image clé===<br />
[[File:KeyframeButton Duplicate 0.63.06.png|frame|none]]<br />
<br />
<br />
Sélectionnez une image clé dans la liste des images clés du {{l|Keyframes Panel}} et positionnez votre curseur sur une image ne possédant pas un image clé. Puis pressez le bouton {{Literal|Dupliquer l'image clé}}. Cela peut engendrer deux résultat différents :<br />
<br />
# Si il y a un point de passage à l'image clé originel, alors ce point de passage est dupliqué. Cette copie inclut les valeurs de paramètres ainsi que ses types d'interpolations.<br />
# Si il n'y a aucun point de passage dans l'image clé originel pour aucun paramètre particulier, deux choses peuvent arriver :<br />
#*Il n'y a aucun point de passage à AUCUNE images dans l'axe temporel : Alors, AUCUN point de passage n'est créé.<br />
#*Si il y a un point de passage dans l'axe temporel, mais dans l'image clé qui vas être dupliqué, alors la copie de l'image clé est créé, un nouveau point de passage est créé avec une valeur pour la paramètre qui seras le résultat de la valeur courante de l'image clé originel avec une interpolation de type {{Literal|TCB}} à la fois en {{Literal|Entrée}} et {{Literal|Sortie}}.<br />
<br />
Bien entendu, dupliquer une image clé vas produire une nouvelle image clé à l'endroit pointé par le curseur de temps et vas l'ajouter dans la liste d'images clés en bonne place. Dans la liste d'images clés, l'image clé nouvellement venue auras la même description que l'originale, avec un {{Literal|(Dupliquée)}} à la fin.<br />
<br />
[https://youtu.be/qvRt3ITSkrQ explication en vidéo]<br />
<br />
===Supprimer une image clé===<br />
[[File:KeyframeButton Remove 0.63.06.png|frame|none]]<br />
<br />
Dans la liste d'images clé ({{l|Keyframes Panel}}), sélectionnez une image clé et simplement pressez le bouton {{Literal|Supprimer l'image clé}}. Cela aura pour effet de supprimer l'image clé ainsi que tout les points de passages de tout les paramètres de tout les calques positionné à l'instant courant.<br />
<br />
<cite>''NOTE: Si vous déplacez le {{l|#Temps|temps}} d'une image clé en le modifiant dans le panneau d'images clés et appuyez immédiatement sur le bouton {{Literal|Supprimer l'image clé}} alors les points de passages ne sont pas supprimés. Cela peut sembler être un dysfonctionnement, mais aussi peut être considéré comme une fonctionnalité si vous désirez garder les points de passages mais pas l'image clé.''</cite><br />
<br />
== Édition des images clés : temps, longueur & description ==<br />
<br />
Dans la liste du {{l|Keyframes Panel|panneau d'images clés}}, vous pouvez voir qu'il y a quatre catégories :<br />
<br />
[[File:KeyframesLook-KeyframePanel 0.63.06.png|frame|none]]<br />
<br />
* Temps<br />
* Longueur<br />
* Aller à<br />
* Description<br />
<br />
=== Activation ===<br />
By changing the state of the checkbox you can activate or disable the keyframe. A visual information about the keyframe state is displayed in the {{l|Timebar}}.<br />
<br />
=== Temps ===<br />
<br />
Vous pouvez modifier le temps (l'image) sur lequel l'image clé est positionnée en cliquant sur la case {{Literal|Temps}} correspondante. Cela vous permettras de changer le temps en arrière ou en avant. Si vous positionnez le temps d'une image clé sur le même Temps que celui d'une image clé existante, le programme affichera alors ce message :<br />
Configurer l'image clé : Impossible de déplacer l'image clé car une autre image clé<br />
existe déjà à cet endroit.<br />
<br />
Modifier le {{Literal|Temps}} d'une image clé à les effets suivants :<br />
<br />
# Les points de passages existants dans l'image clé vont être déplacés à la nouvelle position.<br />
# Quelque soit le paramètre que possède le point de passage dans l'axe de temps, alors l'image clé déplacée vas recevoir un nouveau point de passage positionné en TCB avec le(s) paramètre(s).<br />
# En accord avec la méthode d'interpolation par défaut, le statut {{l|Lock Keyframes}} et les paramètres que possèdent n'importe quelles images clés sur l'axe de temps, les nouveaux points de passages seront créés dans le voisinage de l'image clé au temps (l'image) de destination. Le voisinage original de l'image clé ne seras pas touché si il ne coïncide pas avec le voisinage de destination de l'image clé.<br />
# Si une image clé est déplacé et ne fait pas un {{literal|saut}} par dessus une autre image clé existante, alors les points de passages environnants à la position originale de l'image clé déplacé sont compressés et / ou étendus sur l'axe de temps en fonction du déplacement de l'image clé. Voir les exemples. <cite>Ceci est une découverte récente</cite><br />
<br />
Voir {{l|#Changer le Temps de l'Image Clé|l'exemple}} pour un aperçu de comment cela fonctionne.<br />
<br />
=== Longueur ===<br />
<br />
Le paramètre {{Literal|Longueur}} détermine le temps d'exposition de l'image clé jusqu'à la prochaine image clé. En modifiant ce paramètre toutes les images clé et tout les points de passages qui suivent vont être déplacés en avant ou en arrière.<br />
<br />
=== Aller à ===<br />
<br />
La colonne {{literal|Aller à}} est simplement un raccourci pour placer le {{l|Time_Cursor}} à l'image clé lorsque vous cliquez sur un {{literal|(Saut)}} correspondant.<br />
<br />
=== Description ===<br />
<br />
Cette case permet à l'utilisateur d'insérer une courte description de la raison de l'image clé. Cliquez simplement dessus et changez le texte.<br />
<br />
== Édition des propriétés d'une image clé ==<br />
[[File:KeyframeButton Properties 0.63.06.png|frame|none]]<br />
<br />
La boite de dialogue {{Literal|Propriétés de l'image clé}} permet de changer la méthode d'interpolation pour tout les points de passage de l'image clé d'un coup. Même si, pour un certain paramètre, il n'y a pas de point de passage sur l'image clé mais le paramètre en possède sur le même axe de temps, alors appliquez les nouvelle {{Literal|Propriétés de l'image clé}} ajoutera une nouveau point de passage dans l'image clé là ou il n'y en avait pas. Les points de passages ajoutés ont la méthode sélectionné dans la boite de dialogue. Cela signifie que la boite de dialogue {{Literal|Propriétés de l'image clé}} modifieras la méthode d'interpolation pour tout les paramètres qui possèdent un point de passage sur l'axe de temps.<br />
<br />
Les paramètres de la boite de dialogue :<br />
<br />
[[File:KeyframeDialog 0.63.06.png|frame|none]]<br />
* Entrée : En cochant cette case, vous pouvez changer la méthode d'interpolation de la partie gauche des points de passage de l'image clé sélectionnée sur tout les calques du canevas à la {{l|Waypoints#Interpolation|méthode d'interpolation}} dans le menu déroulant associé.<br />
* Sortie : Idem, mais pour la partie droite des points de passage.<br />
* Tension : Voir {{l|TCB}}<br />
* Biais : Voir {{l|TCB}}<br />
* Continuité : Voir {{l|TCB}}<br />
* Tension temporelle : Voir {{l|TCB}}<br />
<br />
Vous pouvez cocher uniquement la case {{Literal|Entrée}} ou {{Literal|Sortie}} pour affecter la partie gauche ou droite des points de passages. Si une case n'est pas cochée, le paramètre correspondant n'est pas affecté. Idem pour les paramètres d'interpolation ({{Literal|Tension}}, {{Literal|Biais}}, {{Literal|Continuité}} et {{Literal|Tension temporelle}})<br />
<br />
[[File:KeyframeDialog2 0.63.06.png|frame|none]]<br />
<br />
Cette boite de dialogue n'affectera pas quelle seras la méthode d'interpolation pour les nouveaux points de passages crées par l'utilisateur, ni ceux automatiquement crées lors d'une copie d'images clé et ni le statut du verrouillage de l'image clé. La méthode d'interpolation pour les nouveaux points crées dans ces cas seront des paires identiques ({{Literal|Entrée}} et {{Literal|Sortie}} ou Gauche et Droite) qui dépendent uniquement de l'{{Literal|Interpolation par défaut}} de la fenêtre {{l|Toolbox}}.<br />
<br />
Voir les {{l|#Exemples|exemples}} afin de mieux comprendre comment cela se déroule.<br />
<br />
== Edit a keyframe from the timebar ==<br />
<!-- Use of Template:KeyframesInTheTimebar --><br />
{{KeyframesInTheTimebar}}<br />
<br />
==Exemples ==<br />
<br />
=== Dupliquer une image clé ne contenant pas de point de passage ===<br />
Par exemple, imaginez que vous avez une suite d'images clés et de points de passages ainsi que les paramètres suivants comme rayon d'un cercle :<br />
{|<br />
{| border = "1"<br />
|+ Avant, image clé dupliquée 2s vers 6s<br />
!Image!!Image clé!!Point de passage!!Rayon!!Interpolation<br />
|-<br />
|0s||Oui||Oui||20.0||TCB<br />
|-<br />
|2s||Oui||Non||25.0||n/a<br />
|-<br />
|4s||Oui||Non||30.0||n/a<br />
|-<br />
|8s||Non||Oui||40.0||TCB<br />
|} <br />
<br />
<br />
[[File:Keyframe-GraphBeforeDuplicate 0.63.06.png|frame|none]]<br />
<br />
Bien que l'interpolation entre 0s et 8s est de type TCB, on peut noter que le résultat<br />
réel est linéaire. Cela est du au fait que, dans l'animation, il y a uniquement deux<br />
points de passages pour ce paramètre.<br />
<br />
Si vous sélectionnez l'image clé à 2s, puis placer le curseur de temps à 6s (là ou il n'y a pas d'image clé), et positionner l'{{l|New Layer Defaults#Default interpolation |interpolation par défaut}} à TCB, ainsi que le {{l|Lock Keyframes |verrouillage d'image clé}} à {{Literal|''Toutes images clés verrouillées}}. En cliquant sur le bouton {{Literal|Dupliquer l'image clé}}, le résultat seras le suivant :<br />
<br />
{| border = "1"<br />
|+ Après, image clé dupliquée 2s vers 6s<br />
!Image!!Image clé!!Point de passage!!Rayon!!Interpolation<br />
|-<br />
|0s||Oui||Oui||20.0||TCB<br />
|-<br />
|2s||Oui||Non||25,78125||n/a<br />
|-<br />
|4s||Oui||Oui||30.0||TCB<br />
|-<br />
|6s||Oui||Oui||25.0||TCB<br />
|-<br />
|8s||Non||Oui||40.0||TCB<br />
|}<br />
<br />
<br />
[[File:Keyframe-GraphAfterDuplicate 0.63.06.png|frame|none]]<br />
<br />
Vous pouvez voir que :<br />
# À 0s aucun changement. N'as pas été affecté par l'insertion de l'image clé. Elle est deux images clés plus loin de celle positionné à 6s et aussi possède un point de passage.<br />
# À 2s il y avait une image clé et elle est toujours là. Mais, avant la création de l'image clé à 6s la valeur courante d'interpolation du {{Literal|rayon}} était 25.0. Après la création de l'image clé à 6s le rayon est le résultat d'une interpolation entre les points de passages des images de 0s et 4s avec les valeurs de rayon et les méthodes d'interpolation. Cela donne 25.78125. Cette image clé est à plus d'une image clé de la nouvelle image clé à 6s, ainsi aucun point de passage n'est créé.<br />
# À 4s il y a une image clé, elle est toujours là. Mais dans ce cas, l'image clé 4s est voisine de la nouvelle image clé 6s. Également le verrouillage d'image clé a été positionné à {{Literal|Toutes images clés verrouillées}}, donc l'image clé à 4s a été verrouillée en lui ajoutant un point de passage. La valeur du rayon n'as pas changée (toujours à 30.0) car elle a été verrouillée en lui ajoutant un point de passage avec la valeur courante). Le mode d'Interpolation du point de passage a été assigné à {{Literal|TCB}} comme cela est paramétré comme valeur par défaut.<br />
# À 6s il y a une nouvelle image clé avec un nouveau point de passage positionné à l'ancienne valeur d'interpolation de l'image clé à 2s. Un {{Literal|rayon}} de 25.0.<br />
# À 8s rien n'as changé. Il n'y avait aucune image clé et il y avait un point de passage, on ne s'attendait pas à ce que cela change.<br />
<br />
Imaginez maintenant que vous répétiez la même opération mais que vous choisissiez l'interpolation par défaut à {{Literal|Constant}}. Alors le résultat seras le suivant :<br />
<br />
{| border = "1"<br />
|+ Après duplication image clé 2s vers 6s (interpolation constante)<br />
!Image!!Image clé!!Point de passage!!Rayon!!Interpolation<br />
|-<br />
|0s||Oui||Oui||20.0||TCB<br />
|-<br />
|2s||Oui||Non||20.0||n/a<br />
|-<br />
|4s||Oui||Oui||30.0||Constant<br />
|-<br />
|6s||Oui||Oui||25.0||TCB<br />
|-<br />
|8s||Non||Oui||40.0||TCB<br />
|}<br />
<br />
<br />
[[File:Keyframe-GraphAfterDuplicateConstant 0.63.06.png|frame|none]]<br />
<br />
Maintenant vous pouvez voir que l'image clé à 2s ne contient pas la valeur du paramètre par elle même. Elle enregistre uniquement la valeur du point de passage crée sur elle, c'est le résultat de l'insertion d'un point de passage dans le voisinage, ou de la duplication d'un image clé, avec le verrouillage d'image clé, qui affecte cette image clé. Dans cette exemple la valeur à 2s a changé de façon drastique du au fait des différentes méthodes d'interpolations du point de passage créé à 4s. Si, dans cette situation, vous dupliquez encore l'image clé 2s vers une autre image (par ex. 10s) alors cela copieras une image clé avec un point de passage sur elle ayant pour valeur de rayon 20.0, correspondant à la valeur courant de ce paramètre dans l'image clé avant la duplication.<br />
<br />
=== Édition des propriétés d'une image clé ===<br />
<br />
Imaginez la situation suivante pour un calque :<br />
<br />
[[File:KeyframeProperties-BeforeChange 0.63.06.png|frame|none]]<br />
<br />
Dans cet exemple l"animation dure 10 secondes, l'image montre toutes les images clés et points de passages existants. Le curseur de temps n'est au dessus d'aucune images clés.<br />
<br />
Maintenant, considérez que par défaut vous avez les valeurs suivantes :<br />
<br />
* {{l|New Layer Defaults#Default Interpolation|Interpolation par défaut}} réglé à {{Literal|Courbe Entrée/Sortie}}<br />
* {{l|Lock Keyframes|Verrou d'image clé}} positionné à {{Literal|Toute images clés verrouillées}}<br />
<br />
Alors sélectionnez l'image clé à 4s dans la liste d'images clés. Cliquez sur le bouton {{Literal|Propriétés de l'image clé}} et réglez la méthode d'interpolation ci dessous :<br />
<br />
[[File:KeyframeDialog3 0.63.06.png|frame|none]]<br />
<br />
Puis appuyez sur le bouton {{Literal|Appliquer}}. Le résultat vas ressembler à cela :<br />
<br />
[[File:KeyframeProperties-After 0.63.06.png|frame|none]]<br />
<br />
Vous pouvez noter les changements suivants :<br />
<br />
# Les points de passages existants à l'image clé 4s ont vus leur méthode d'interpolation changée selon la boite de dialogue {{Literal|Propriétés de l'image clé}}.<br />
# De nouveaux points de passages ont été ajoutés à l'image clé 4s. Les points de passages ont été ajoutés aux paramètres qui avaient au moins un point de passage sur l'axe de temps (par exemple celui qui avait uniquement un point de passage à 9s). Les points de passages ajoutés a l'image clé 4s ont vu leur paramètre d'interpolation déterminé selon les choix effectués dans la boite de dialogue {{Literal|Propriétés de l'image clé}}. <br />
# De nouveaux points de passages ont été ajoutés aux image clé voisines de 4s (image clé 2s et 6s) pour tout les paramètres ayant un point de passage sur l'axe de temps. Les points de passages crées dans le voisinage des images clés le sont en accords avec l'état du {{l|Lock Keyframes |Verrou d'Images Clés}}. Aussi, la méthode d'interpolation des points de passages crées est en en accords avec la méthode {{l|New Layer Defaults#Default Interpolation|d'interpolation par défaut}} que vous avez choisit.<br />
<br />
Si dans la boite de dialogue {{Literal|Propriétés de l'image clé}} vous aviez décoché {{Literal|Sortie}} ou {{Literal|Entrée}}, alors deux choses ce seraient passées :<br />
<br />
# Le point de passage existant à 4s aurait subit un changement de méthode d'interpolation uniquement du coté duquel ou la case à cocher aurait été coché. L'autre coté ne subissant aucun changement.<br />
# Les nouveaux points de passages ajoutés ont leur méthode d'interpolation positionnée à TCB là ou la case à cocher n'est pas coché, la méthode d'interpolation est choisit par la boite de dialogue {{Literal|Propriétés de l'image clé}} là ou la case est coché.<br />
<br />
[[File:KeyframeProperties-After2 0.63.06.png|frame|none]]<br />
<br />
Dans cette exemple, uniquement {{Literal|Entrée}} à été coché.<br />
<br />
'''Remarque pour les rédacteurs de documentation:''' Vous pouvez télécharger le projet pour faire des copies d'écrans : {{l|File:Keyframe-example2.sifz}}<br />
<br />
=== Changer le Temps de l'Image Clé ===<br />
<br />
==== Sans points de passages entre les images clés ====<br />
<br />
Imaginez encore la situation suivante pour un calque :<br />
<br />
[[File:KeyframeProperties-BeforeChange 0.63.06.png|frame|none]]<br />
<br />
Maintenant, considérez que vous avez les valeurs suivantes par défaut :<br />
<br />
* {{l|New Layer Defaults#Default Interpolation|Interpolation par défaut}} réglé à {{Literal|Courbe Entrée/Sortie}}<br />
* {{l|Lock Keyframes|Verrou d'image clé}} positionné à {{Literal|Toute images clés verrouillées}}<br />
<br />
Maintenant, sélectionnez l'image clé à 4s dans la liste d'images clés. Cliquez dans la case {{Literal|Temps}} et changez le temps pour 3s. Le résultat sera alors :<br />
<br />
[[File:KeyframeTime-After 0.63.06.png|frame|none]]<br />
<br />
==== Avec des points de passages entre les images clés ====<br />
<br />
Imaginez maintenant la situation suivante pour le calque :<br />
<br />
[[File:KeyframeWaypointTime-BeforeChange 0.63.06.png|frame|none]]<br />
<br />
Considérez que vous avez, par défaut, les valeurs suivantes :<br />
<br />
* {{l|New Layer Defaults#Default Interpolation|Interpolation par défaut}} réglé à {{Literal|Courbe Entrée/Sortie}}<br />
* {{l|Lock Keyframes|Verrou d'image clé}} positionné à {{Literal|Toute images clés verrouillées}}<br />
<br />
Maintenant, dans la liste d'images clés sélectionnez l'image clé à 4s. Cliquez dans la case {{Literal|Temps}} et changez le temps pour 2s. Le résultat sera alors :<br />
<br />
[[File:KeyframeWaypointTime-After 0.63.06.png|frame|none]]<br />
<br />
Vous pouvez noter que les points de passages ont été compressés et étendus sur l'axe de temps de part et d'autre de l'image clé déplacée. Vous pouvez aussi noter que aucun point de passage n'as été crées dans l'image clé déplacé pour le paramètre en bas de la liste mais dans l'image clé statique. <br />
<br />
Cela semble être un bug (?).<br />
<br />
En tentant de comprendre ce fonctionnement, j'ai remarqué que les images clés garde leurs points de passages entre deux images clés adjacentes alors que vous les déplacez, tout en maintenant la répartition des points de passages entre les images clés. Cela ne fonctionne pas si l'image clé déplacés "saute" par dessus d'autre images clés durant le déplacement. <cite> Merci d'ajouter autant d'informations que vous pouvez en découvrir sur le fonctionnement des images clés. Il semble qu'il y ait quelques bugs et toute information est le bienvenue</cite><br />
<br />
'''Remarque pour les rédacteurs de documentation:''' Vous pouvez télécharger le projet pour faire des copies d'écrans : {{l|File:Keyframe-example3.sifz}}<br />
<br />
== Usage avancé des images clés ==<br />
<br />
===Réutiliser des images clés===<br />
Si vous voulez en apprendre plus sur les usages avancés des images clés, allez voir ce tutoriel sur la réutilisations d'animations. Les images clés peuvent être comme des "pauses" enregistrées qui peuvent être utilisés plusieurs fois dans l'animation. Cela est bien pratique pour une synchronisation de mouvement de lèvres.<br />
<br />
{{l|Reuse Animations}}<br />
<br />
===Utilisation de la pelure d'oignon===<br />
<br />
Pour bien utiliser la fonctionnalité pelure d'oignon (onion skin) ({{Shortcut|alt|O}} ou {{c|<Menu Chevron>|<Affichage>|Afficher la pelure d'oignon|}}) vous devez prendre en considération les images sur lesquelles sont posées vos images clés. Pelure d'oignon, vas faire apparaître, dans la vue courante, les images clés précédentes et suivantes avec un opacité à 50%. L'image courante vas également apparaître avec une opacité de 50%.<br />
<br />
Voir {{l|Onion Skin}} pour plus d'informations.<br />
<br />
===Quickly creating/importing Keyframes===<br />
Using a [voir page anglaise pour le lien Synfig plug-in] it is possible to quickly import keyframes from a list of timings, as explained in the [[Doc:Audio Synchronisation|Audio Synchronisation]] tutorial.</div>Synmehttps://wiki.synfig.org/index.php?title=User_talk:Synme&diff=23330User talk:Synme2019-03-10T17:20:34Z<p>Synme: comment view</p>
<hr />
<div></div>Synmehttps://wiki.synfig.org/index.php?title=User_talk:Synme&diff=23329User talk:Synme2019-03-10T17:18:53Z<p>Synme: comment view</p>
<hr />
<div>Bonjour,<br />
* Je viens d'annuler le changement "The sif file containing the parts of this tutorial can be found {{l|Media:rigarm.sifz|here}} " que tu as as effectué[http://wiki.synfig.org/index.php?title=Doc:Basic_Bone_Tutorial&curid=4410&diff=21261&oldid=20812], car je pense qu'un fichier projet ''"donné trop rapidement"'' n'aide pas l'utilisateur a fabriquer les choses de ces propres mains. Du coup, pour couper la poire en deux, j'ai créer une section '''fichier projet''' pour donner plus de visibilité au fichier . <br />
<br />
* Aussi, petite chose, pourrait'tu penser a remplir '''Summary''' lorsque tu fait des modif.<br />
<br />
merci et bonne continuation --[[User:D.j.a.y|D.j.a.y]] ([[User talk:D.j.a.y|talk]]) 03:19, 6 February 2016 (EST)<br />
<br />
summary c'est quoi?<br />
<br />
: [[File:Wikiedit summary.png|frame]] Cela permet d'enregistrer un commentaire lié a ta modificiation visible dans la page {{l|Special:RecentChanges}}<br />
<br />
Ok je fais ça la prochaine fois, merci.</div>Synmehttps://wiki.synfig.org/index.php?title=User_talk:Synme&diff=23328User talk:Synme2019-03-10T17:15:14Z<p>Synme: error close</p>
<hr />
<div>Dans une modification [http://wiki.synfig.org/index.php?title=Keyframe/fr&curid=3524&diff=21644&oldid=21571 recente] de la page keyframe/fr j'ai noté que tu as oublié de mettre les informations de {{l|Meta:Template_Style_And_Syntax|formatage etc...}} ... je viens de faire la correction... c'est juste pour la prochaine fois ci c'est possible... <br />
<br />
=== Jump ===<br />
The Jump column is only a short cut to place the '''<nowiki>{{l|Time_Cursor}}</nowiki>''' at the keyframe where you make a click in the '''<nowiki>{{Literal|(JMP)}}</nowiki>''' label.<br />
<br />
=== Aller à ===<br />
Aller à (La colonne "Aller à" est simplement un raccourci pour placer '''le curseur de temps''' à l'image clé lorsque vous cliquez sur un '''"(Saut)"''' correspondant.)<br />
<br />
--[[User:D.j.a.y|D.j.a.y]] ([[User talk:D.j.a.y|talk]]) 14:34, 8 March 2016 (EST)<br />
<br />
----<br />
<br />
<br />
Bonjour,<br />
* Je viens d'annuler le changement "The sif file containing the parts of this tutorial can be found {{l|Media:rigarm.sifz|here}} " que tu as as effectué[http://wiki.synfig.org/index.php?title=Doc:Basic_Bone_Tutorial&curid=4410&diff=21261&oldid=20812], car je pense qu'un fichier projet ''"donné trop rapidement"'' n'aide pas l'utilisateur a fabriquer les choses de ces propres mains. Du coup, pour couper la poire en deux, j'ai créer une section '''fichier projet''' pour donner plus de visibilité au fichier . <br />
<br />
* Aussi, petite chose, pourrait'tu penser a remplir '''Summary''' lorsque tu fait des modif.<br />
<br />
merci et bonne continuation --[[User:D.j.a.y|D.j.a.y]] ([[User talk:D.j.a.y|talk]]) 03:19, 6 February 2016 (EST)<br />
<br />
summary c'est quoi?<br />
<br />
: [[File:Wikiedit summary.png|frame]] Cela permet d'enregistrer un commentaire lié a ta modificiation visible dans la page {{l|Special:RecentChanges}}<br />
<br />
Ok je fais ça la prochaine fois, merci.</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Video_Tutorials&diff=23327Doc:Video Tutorials2019-03-10T17:08:26Z<p>Synme: spam delete</p>
<hr />
<div><!-- Page info --><br />
{{Title|Video Tutorials}}<br />
{{Category|Tutorials}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Video tutorials could be updated with last version!<br />
<br />
In this section you'll find some basic video tutorials of the most common tasks in Synfig. Feel free to ask here for any new video tutorial.<br />
<br />
= Basics of Animations =<br />
<br />
In this sections, how to use simple part of Synfig studio, mostly one Layer usage.<br />
<br />
== Animation Basics ==<br />
<br />
[http://www.youtube.com/watch?v=WUxn9jqFJrg Synfig basic animation tutorial]: This video tutorial shows how to do a (very) basic animation. The tutorial roughly follows the [[Doc:Animation_Basics]] tutorial.<br />
<br />
<videoflash>WUxn9jqFJrg|425|344</videoflash><br />
<br />
<br />
== Creating a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=bQ-ku0bA23A Creating a Spline]: This small video tutorial shows the basic steps to build a Spline. Video editing was done using Synfig itself.<br />
<br />
<videoflash>bQ-ku0bA23A|425|350</videoflash><br />
<br />
<br />
== Creating Circles, Rectangles and a Spline ==<br />
<br />
[https://youtu.be/SM1qUqGyIpA Creating Circles, Rectangles, and a Spline]: Short tutorial about creating Circles, Rectangles, and a Spline.<br />
<br />
== Curve warp demonstration ==<br />
<br />
I'd like to introduce few videos about my experiments with curve warp deformation layer. Unfortunately I'm bad translator and I sounded it in russian, but I hope video is clear enough as is. If any [http://synfig.org/forums/viewtopic.php?f=6&t=4229 question] ask me I'll try to explain.<br />
<br />
=== [https://www.youtube.com/watch?v=Gz7gSBVHnjo Part 1 of 3] ===<br />
<videoflash>Gz7gSBVHnjo|425|344</videoflash><br />
=== [https://www.youtube.com/watch?v=Y5GFP_eU_Mk Part 2 of 3] ===<br />
<videoflash>Y5GFP_eU_Mk|425|344</videoflash><br />
=== [Planned Part 3 of 3] ===<br />
<br />
== Blend Test ==<br />
<br />
[http://www.youtube.com/watch?v=_n23xOvONb8 Synfig Blend Test]: 22 blend methods times 15 layers = 330 boring frames. At 0.55 fps = 10 boring minutes. Enjoy!<br />
<br />
<videoflash>_n23xOvONb8|425|350</videoflash><br />
<br />
<br />
= Animation =<br />
<br />
== Flower Animation ==<br />
<br />
This video tutorial shows how to do an animation of a growing flower. The tutorial roughly follows the written [[Doc:Flower_Animation]] tutorial.<br />
<br />
=== [http://www.youtube.com/watch?v=U1EjObyN1pc Part 1 of 4] ===<br />
<br />
<videoflash>U1EjObyN1pc|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=oSAilqEKEJs Part 2 of 4] ===<br />
<br />
<videoflash>oSAilqEKEJs|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=STP01dOxvMU Part 3 of 4] ===<br />
<br />
<videoflash>STP01dOxvMU|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=8dcAqZxwOWM Part 4 of 4] ===<br />
<br />
<videoflash>8dcAqZxwOWM|425|344</videoflash><br />
<br />
== How to animate with Synfig Studio ==<br />
<br />
<videoflash>cDMbDQ07Qkg|425|344</videoflash><br />
<br />
== Following a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=w87KRL3kD74 Following a Spline:] This video tutorial show how to link a shape to a Spline. It doesn't follow strictly the [[Doc:Following_a_Spline]] but would help you to follow it. <br />
<br />
<videoflash>w87KRL3kD74|425|350</videoflash><br />
<br />
A more recent 4K [https://youtu.be/crsCxM6Fxqg video] has been redone with the help of the video above, English subtitles are included.<br />
<br />
== Motion Tracking Tutorial ==<br />
<br />
This Tutorial shows how to list import and how to do motion tracking. <br />
<br />
<videoflash>YAyKUr-rGOM|425|344</videoflash><br />
<br />
== Pseudo IPO-drivers in Synfig ==<br />
<br />
Zelgadis gave us [http://zelgadis.profusehost.net/files/synfig/ipo-drivers-synfig.ogg this] method to control playback using a variable.<br />
<br />
== Animating a caped character ==<br />
<br />
A 3-part tutorial on making an animated caped character in synfig.<br />
<br />
=== [https://youtu.be/S0snIErKuFg Part 1 of 3] ===<br />
<br />
<br />
<br />
=== [https://youtu.be/nv_KR9rG55Y Part 2 of 3] ===<br />
<br />
<br />
<br />
=== [https://youtu.be/s3B9L6amPn8 Part 3 of 3] ===<br />
<br />
== Lip Syncing ==<br />
<br />
[http://www.youtube.com/watch?v=S8rFv_pjfgs Synfig lipsync animation tutorial]: This video tutorial shows how to lipsync your animation with a .lst file and the Papagayo Program. Based off of the [[Doc:Lipsync]] tutorial.<br />
<br />
<videoflash>S8rFv_pjfgs|425|344</videoflash><br />
<br />
<br />
[https://www.youtube.com/watch?v=waI3AwXfIy4 simple lipsync by Zmeyk] : Simple method of synchronizing lips of animated character with recorded voice.<br />
<br />
<videoflash>waI3AwXfIy4|425|344</videoflash><br />
<br />
== Walk Cycle + TimeLoop layer ==<br />
<br />
[https://www.youtube.com/watch?v=VSD3aIi8JZ0 Caminata + Time Loop en Synfig Studio] show how to do a walk cycle step by step and then loop it with the [[TimeLoop Layer]] by http://www.lobozamora.com/<br />
<br />
<videoflash>VSD3aIi8JZ0|425|344</videoflash><br />
<br />
<br />
== Shiny Effects ==<br />
<br />
This tutorial follows the [[Doc:Shiny_Effects]] tutorial<br />
<br />
<videoflash>8QX0dJX2sI8|425|344</videoflash><br />
<br />
== Kynetic Typography ==<br />
<br />
Micro-tutorial by Yoyobuae<br />
<br />
See forum [https://forums.synfig.org/t/typography-and-motion-graphics-tools/2864/5 post] and [http://youtu.be/FZfypmXrMIo for more informations]<br />
<br />
<br />
<br />
=Advanced =<br />
<br />
== How to vectorize a drawing ==<br />
<br />
https://www.youtube.com/watch?v=oH5LudWwb2w<br />
<br />
<videoflash>oH5LudWwb2w|425|344</videoflash><br />
<br />
Realised with Synfig 1.0.x by [http://www.lobozamora.com/ LoboZamora]<br />
<br />
== Making headturn guides using Synfig ==<br />
<br />
https://www.youtube.com/watch?v=HBFqTlmR6qw<br />
<br />
<videoflash>HBFqTlmR6qw|425|344</videoflash><br />
<br />
Realised with Synfig 0.64.1 by Konstantin Dmitriev<br />
<br />
Nota: to help to translating and caption this video : http://amara.org/v/CUeA/</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Video_Tutorials&diff=23326Doc:Video Tutorials2019-03-10T16:43:16Z<p>Synme: update link</p>
<hr />
<div><!-- Page info --><br />
{{Title|Video Tutorials}}<br />
{{Category|Tutorials}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Video tutorials could be updated with last version!<br />
<br />
In this section you'll find some basic video tutorials of the most common tasks in Synfig. Feel free to ask here for any new video tutorial.<br />
<br />
= Basics of Animations =<br />
<br />
In this sections, how to use simple part of Synfig studio, mostly one Layer usage.<br />
<br />
== Animation Basics ==<br />
<br />
[http://www.youtube.com/watch?v=WUxn9jqFJrg Synfig basic animation tutorial]: This video tutorial shows how to do a (very) basic animation. The tutorial roughly follows the [[Doc:Animation_Basics]] tutorial.<br />
<br />
<videoflash>WUxn9jqFJrg|425|344</videoflash><br />
<br />
<br />
== Creating a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=bQ-ku0bA23A Creating a Spline]: This small video tutorial shows the basic steps to build a Spline. Video editing was done using Synfig itself.<br />
<br />
<videoflash>bQ-ku0bA23A|425|350</videoflash><br />
<br />
<br />
== Creating Circles, Rectangles and a Spline ==<br />
<br />
[https://youtu.be/SM1qUqGyIpA Creating Circles, Rectangles, and a Spline]: Short tutorial about creating Circles, Rectangles, and a Spline.<br />
<br />
== Curve warp demonstration ==<br />
<br />
I'd like to introduce few videos about my experiments with curve warp deformation layer. Unfortunately I'm bad translator and I sounded it in russian, but I hope video is clear enough as is. If any [http://synfig.org/forums/viewtopic.php?f=6&t=4229 question] ask me I'll try to explain.<br />
<br />
=== [https://www.youtube.com/watch?v=Gz7gSBVHnjo Part 1 of 3] ===<br />
<videoflash>Gz7gSBVHnjo|425|344</videoflash><br />
=== [https://www.youtube.com/watch?v=Y5GFP_eU_Mk Part 2 of 3] ===<br />
<videoflash>Y5GFP_eU_Mk|425|344</videoflash><br />
=== [Planned Part 3 of 3] ===<br />
<br />
== Blend Test ==<br />
<br />
[http://www.youtube.com/watch?v=_n23xOvONb8 Synfig Blend Test]: 22 blend methods times 15 layers = 330 boring frames. At 0.55 fps = 10 boring minutes. Enjoy!<br />
<br />
<videoflash>_n23xOvONb8|425|350</videoflash><br />
<br />
<br />
= Animation =<br />
<br />
== Flower Animation ==<br />
<br />
This video tutorial shows how to do an animation of a growing flower. The tutorial roughly follows the written [[Doc:Flower_Animation]] tutorial.<br />
<br />
=== [http://www.youtube.com/watch?v=U1EjObyN1pc Part 1 of 4] ===<br />
<br />
<videoflash>U1EjObyN1pc|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=oSAilqEKEJs Part 2 of 4] ===<br />
<br />
<videoflash>oSAilqEKEJs|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=STP01dOxvMU Part 3 of 4] ===<br />
<br />
<videoflash>STP01dOxvMU|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=8dcAqZxwOWM Part 4 of 4] ===<br />
<br />
<videoflash>8dcAqZxwOWM|425|344</videoflash><br />
<br />
== How to animate with Synfig Studio ==<br />
<br />
<videoflash>cDMbDQ07Qkg|425|344</videoflash><br />
<br />
== Following a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=w87KRL3kD74 Following a Spline:] This video tutorial show how to link a shape to a Spline. It doesn't follow strictly the [[Doc:Following_a_Spline]] but would help you to follow it. <br />
<br />
<videoflash>w87KRL3kD74|425|350</videoflash><br />
<br />
A more recent 4K [https://youtu.be/crsCxM6Fxqg video] has been redone with the help of the video above, English subtitles are included.<br />
<br />
== Motion Tracking Tutorial ==<br />
<br />
This Tutorial shows how to list import and how to do motion tracking. <br />
<br />
<videoflash>YAyKUr-rGOM|425|344</videoflash><br />
<br />
== Pseudo IPO-drivers in Synfig ==<br />
<br />
Zelgadis gave us [http://zelgadis.profusehost.net/files/synfig/ipo-drivers-synfig.ogg this] method to control playback using a variable.<br />
<br />
== Animating a caped character ==<br />
<br />
A 3-part tutorial on making an animated caped character in synfig.<br />
<br />
=== [https://youtu.be/S0snIErKuFg Part 1 of 3] ===<br />
<br />
<br />
<br />
=== [https://youtu.be/nv_KR9rG55Y Part 2 of 3] ===<br />
<br />
<br />
<br />
=== [https://youtu.be/s3B9L6amPn8 Part 3 of 3] ===<br />
<br />
== Lip Syncing ==<br />
<br />
[http://www.youtube.com/watch?v=S8rFv_pjfgs Synfig lipsync animation tutorial]: This video tutorial shows how to lipsync your animation with a .lst file and the Papagayo Program. Based off of the [[Doc:Lipsync]] tutorial.<br />
<br />
<videoflash>S8rFv_pjfgs|425|344</videoflash><br />
<br />
<br />
[https://www.youtube.com/watch?v=waI3AwXfIy4 simple lipsync by Zmeyk] : Simple method of synchronizing lips of animated character with recorded voice.<br />
<br />
<videoflash>waI3AwXfIy4|425|344</videoflash><br />
<br />
== Walk Cycle + TimeLoop layer ==<br />
<br />
[https://www.youtube.com/watch?v=VSD3aIi8JZ0 Caminata + Time Loop en Synfig Studio] show how to do a walk cycle step by step and then loop it with the [[TimeLoop Layer]] by http://www.lobozamora.com/<br />
<br />
<videoflash>VSD3aIi8JZ0|425|344</videoflash><br />
<br />
<br />
== Shiny Effects ==<br />
<br />
This tutorial follows the [[Doc:Shiny_Effects]] tutorial<br />
<br />
<videoflash>8QX0dJX2sI8|425|344</videoflash><br />
<br />
== Kynetic Typography ==<br />
<br />
Micro-tutorial by Yoyobuae<br />
<br />
See forum [https://forums.synfig.org/t/typography-and-motion-graphics-tools/2864/5 post] and [http://youtu.be/FZfypmXrMIo for more informations]<br />
<br />
==PenguinTutorials.com==<br />
<br />
You can find more video tutorials at [http://www.penguintutorials.com/synfig PenguinTutorials.com]<br />
<br />
<br />
<br />
=Advanced =<br />
<br />
== How to vectorize a drawing ==<br />
<br />
https://www.youtube.com/watch?v=oH5LudWwb2w<br />
<br />
<videoflash>oH5LudWwb2w|425|344</videoflash><br />
<br />
Realised with Synfig 1.0.x by [http://www.lobozamora.com/ LoboZamora]<br />
<br />
== Making headturn guides using Synfig ==<br />
<br />
https://www.youtube.com/watch?v=HBFqTlmR6qw<br />
<br />
<videoflash>HBFqTlmR6qw|425|344</videoflash><br />
<br />
Realised with Synfig 0.64.1 by Konstantin Dmitriev<br />
<br />
Nota: to help to translating and caption this video : http://amara.org/v/CUeA/</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Video_Tutorials&diff=23325Doc:Video Tutorials2019-03-10T16:16:07Z<p>Synme: update link</p>
<hr />
<div><!-- Page info --><br />
{{Title|Video Tutorials}}<br />
{{Category|Tutorials}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Video tutorials could be updated with last version!<br />
<br />
In this section you'll find some basic video tutorials of the most common tasks in Synfig. Feel free to ask here for any new video tutorial.<br />
<br />
= Basics of Animations =<br />
<br />
In this sections, how to use simple part of Synfig studio, mostly one Layer usage.<br />
<br />
== Animation Basics ==<br />
<br />
[http://www.youtube.com/watch?v=WUxn9jqFJrg Synfig basic animation tutorial]: This video tutorial shows how to do a (very) basic animation. The tutorial roughly follows the [[Doc:Animation_Basics]] tutorial.<br />
<br />
<videoflash>WUxn9jqFJrg|425|344</videoflash><br />
<br />
<br />
== Creating a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=bQ-ku0bA23A Creating a Spline]: This small video tutorial shows the basic steps to build a Spline. Video editing was done using Synfig itself.<br />
<br />
<videoflash>bQ-ku0bA23A|425|350</videoflash><br />
<br />
<br />
== Creating Circles, Rectangles and a Spline ==<br />
<br />
[https://youtu.be/SM1qUqGyIpA Creating Circles, Rectangles, and a Spline]: Short tutorial about creating Circles, Rectangles, and a Spline.<br />
<br />
== Curve warp demonstration ==<br />
<br />
I'd like to introduce few videos about my experiments with curve warp deformation layer. Unfortunately I'm bad translator and I sounded it in russian, but I hope video is clear enough as is. If any [http://synfig.org/forums/viewtopic.php?f=6&t=4229 question] ask me I'll try to explain.<br />
<br />
=== [https://www.youtube.com/watch?v=Gz7gSBVHnjo Part 1 of 3] ===<br />
<videoflash>Gz7gSBVHnjo|425|344</videoflash><br />
=== [https://www.youtube.com/watch?v=Y5GFP_eU_Mk Part 2 of 3] ===<br />
<videoflash>Y5GFP_eU_Mk|425|344</videoflash><br />
=== [Planned Part 3 of 3] ===<br />
<br />
== Blend Test ==<br />
<br />
[http://www.youtube.com/watch?v=_n23xOvONb8 Synfig Blend Test]: 22 blend methods times 15 layers = 330 boring frames. At 0.55 fps = 10 boring minutes. Enjoy!<br />
<br />
<videoflash>_n23xOvONb8|425|350</videoflash><br />
<br />
<br />
= Animation =<br />
<br />
== Flower Animation ==<br />
<br />
This video tutorial shows how to do an animation of a growing flower. The tutorial roughly follows the written [[Doc:Flower_Animation]] tutorial.<br />
<br />
=== [http://www.youtube.com/watch?v=U1EjObyN1pc Part 1 of 4] ===<br />
<br />
<videoflash>U1EjObyN1pc|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=oSAilqEKEJs Part 2 of 4] ===<br />
<br />
<videoflash>oSAilqEKEJs|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=STP01dOxvMU Part 3 of 4] ===<br />
<br />
<videoflash>STP01dOxvMU|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=8dcAqZxwOWM Part 4 of 4] ===<br />
<br />
<videoflash>8dcAqZxwOWM|425|344</videoflash><br />
<br />
== How to animate with Synfig Studio ==<br />
<br />
<videoflash>cDMbDQ07Qkg|425|344</videoflash><br />
<br />
== Following a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=w87KRL3kD74 Following a Spline:] This video tutorial show how to link a shape to a Spline. It doesn't follow strictly the [[Doc:Following_a_Spline]] but would help you to follow it. <br />
<br />
<videoflash>w87KRL3kD74|425|350</videoflash><br />
<br />
A more recent 4K [https://youtu.be/crsCxM6Fxqg video] has been redone with the help of the video above, English subtitles are included.<br />
<br />
== Motion Tracking Tutorial ==<br />
<br />
This Tutorial shows how to list import and how to do motion tracking. <br />
<br />
<videoflash>YAyKUr-rGOM|425|344</videoflash><br />
<br />
== Pseudo IPO-drivers in Synfig ==<br />
<br />
Zelgadis gave us [http://zelgadis.profusehost.net/files/synfig/ipo-drivers-synfig.ogg this] method to control playback using a variable.<br />
<br />
== Animating a caped character ==<br />
<br />
A 3-part tutorial on making an animated caped character in synfig.<br />
<br />
=== [https://youtu.be/S0snIErKuFg Part 1 of 3] ===<br />
<br />
<br />
<br />
=== [https://youtu.be/nv_KR9rG55Y Part 2 of 3] ===<br />
<br />
<br />
<br />
=== [https://youtu.be/s3B9L6amPn8 Part 3 of 3] ===<br />
<br />
== Lip Syncing ==<br />
<br />
[http://www.youtube.com/watch?v=S8rFv_pjfgs Synfig lipsync animation tutorial]: This video tutorial shows how to lipsync your animation with a .lst file and the Papagayo Program. Based off of the [[Doc:Lipsync]] tutorial.<br />
<br />
<videoflash>S8rFv_pjfgs|425|344</videoflash><br />
<br />
<br />
[https://www.youtube.com/watch?v=waI3AwXfIy4 simple lipsync by Zmeyk] : Simple method of synchronizing lips of animated character with recorded voice.<br />
<br />
<videoflash>waI3AwXfIy4|425|344</videoflash><br />
<br />
== Walk Cycle + TimeLoop layer ==<br />
<br />
[https://www.youtube.com/watch?v=VSD3aIi8JZ0 Caminata + Time Loop en Synfig Studio] show how to do a walk cycle step by step and then loop it with the [[TimeLoop Layer]] by http://www.lobozamora.com/<br />
<br />
<videoflash>VSD3aIi8JZ0|425|344</videoflash><br />
<br />
<br />
== Shiny Effects ==<br />
<br />
This tutorial follows the [[Doc:Shiny_Effects]] tutorial<br />
<br />
<videoflash>8QX0dJX2sI8|425|344</videoflash><br />
<br />
== Kynetic Typography ==<br />
<br />
Micro-tutorial by Yoyobuae<br />
<br />
<videoflash>FZfypmXrMIo|425|344</videoflash><br />
<br />
See forum [url=http://www.synfig.org/forums/viewtopic.php?f=14&t=4829]post[/url] for more informations and [url=http://www.synfig.org/forums/download/file.php?id=2704]project file[/url]<br />
<br />
==PenguinTutorials.com==<br />
<br />
You can find more video tutorials at [http://www.penguintutorials.com/synfig PenguinTutorials.com]<br />
<br />
<br />
<br />
=Advanced =<br />
<br />
== How to vectorize a drawing ==<br />
<br />
https://www.youtube.com/watch?v=oH5LudWwb2w<br />
<br />
<videoflash>oH5LudWwb2w|425|344</videoflash><br />
<br />
Realised with Synfig 1.0.x by [http://www.lobozamora.com/ LoboZamora]<br />
<br />
== Making headturn guides using Synfig ==<br />
<br />
https://www.youtube.com/watch?v=HBFqTlmR6qw<br />
<br />
<videoflash>HBFqTlmR6qw|425|344</videoflash><br />
<br />
Realised with Synfig 0.64.1 by Konstantin Dmitriev<br />
<br />
Nota: to help to translating and caption this video : http://amara.org/v/CUeA/</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Video_Tutorials&diff=23324Doc:Video Tutorials2019-03-05T16:54:31Z<p>Synme: /* modification link*/</p>
<hr />
<div><!-- Page info --><br />
{{Title|Video Tutorials}}<br />
{{Category|Tutorials}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Video tutorials could be updated with last version!<br />
<br />
In this section you'll find some basic video tutorials of the most common tasks in Synfig. Feel free to ask here for any new video tutorial.<br />
<br />
= Basics of Animations =<br />
<br />
In this sections, how to use simple part of Synfig studio, mostly one Layer usage.<br />
<br />
== Animation Basics ==<br />
<br />
[http://www.youtube.com/watch?v=WUxn9jqFJrg Synfig basic animation tutorial]: This video tutorial shows how to do a (very) basic animation. The tutorial roughly follows the [[Doc:Animation_Basics]] tutorial.<br />
<br />
<videoflash>WUxn9jqFJrg|425|344</videoflash><br />
<br />
<br />
== Creating a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=bQ-ku0bA23A Creating a Spline]: This small video tutorial shows the basic steps to build a Spline. Video editing was done using Synfig itself.<br />
<br />
<videoflash>bQ-ku0bA23A|425|350</videoflash><br />
<br />
<br />
== Creating Circles, Rectangles and a Spline ==<br />
<br />
[http://youtube.com/?v=SM1qUqGyIpA Creating Circles, Rectangles, and a Spline]: Short tutorial about creating Circles, Rectangles, and a Spline.<br />
<br />
<videoflash>SM1qUqGyIpA|425|350</videoflash><br />
<br />
<br />
== Curve warp demonstration ==<br />
<br />
I'd like to introduce few videos about my experiments with curve warp deformation layer. Unfortunately I'm bad translator and I sounded it in russian, but I hope video is clear enough as is. If any [http://synfig.org/forums/viewtopic.php?f=6&t=4229 question] ask me I'll try to explain.<br />
<br />
=== [https://www.youtube.com/watch?v=Gz7gSBVHnjo Part 1 of 3] ===<br />
<videoflash>Gz7gSBVHnjo|425|344</videoflash><br />
=== [https://www.youtube.com/watch?v=Y5GFP_eU_Mk Part 2 of 3] ===<br />
<videoflash>Y5GFP_eU_Mk|425|344</videoflash><br />
=== [Planned Part 3 of 3] ===<br />
<br />
== Blend Test ==<br />
<br />
[http://www.youtube.com/watch?v=_n23xOvONb8 Synfig Blend Test]: 22 blend methods times 15 layers = 330 boring frames. At 0.55 fps = 10 boring minutes. Enjoy!<br />
<br />
<videoflash>_n23xOvONb8|425|350</videoflash><br />
<br />
<br />
= Animation =<br />
<br />
== Flower Animation ==<br />
<br />
This video tutorial shows how to do an animation of a growing flower. The tutorial roughly follows the written [[Doc:Flower_Animation]] tutorial.<br />
<br />
=== [http://www.youtube.com/watch?v=U1EjObyN1pc Part 1 of 4] ===<br />
<br />
<videoflash>U1EjObyN1pc|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=oSAilqEKEJs Part 2 of 4] ===<br />
<br />
<videoflash>oSAilqEKEJs|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=STP01dOxvMU Part 3 of 4] ===<br />
<br />
<videoflash>STP01dOxvMU|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=8dcAqZxwOWM Part 4 of 4] ===<br />
<br />
<videoflash>8dcAqZxwOWM|425|344</videoflash><br />
<br />
== How to animate with Synfig Studio ==<br />
<br />
<videoflash>cDMbDQ07Qkg|425|344</videoflash><br />
<br />
== Following a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=w87KRL3kD74 Following a Spline:] This video tutorial show how to link a shape to a Spline. It doesn't follow strictly the [[Doc:Following_a_Spline]] but would help you to follow it. <br />
<br />
<videoflash>w87KRL3kD74|425|350</videoflash><br />
<br />
A more recent 4K [https://youtu.be/crsCxM6Fxqg video] has been redone with the help of the video above, English subtitles are included.<br />
<br />
== Motion Tracking Tutorial ==<br />
<br />
This Tutorial shows how to list import and how to do motion tracking. <br />
<br />
<videoflash>YAyKUr-rGOM|425|344</videoflash><br />
<br />
== Pseudo IPO-drivers in Synfig ==<br />
<br />
Zelgadis gave us [http://zelgadis.profusehost.net/files/synfig/ipo-drivers-synfig.ogg this] method to control playback using a variable.<br />
<br />
== Animating a caped character ==<br />
<br />
A 3-part tutorial on making an animated caped character in synfig.<br />
<br />
=== [https://youtu.be/S0snIErKuFg Part 1 of 3] ===<br />
<br />
<br />
<br />
=== [https://youtu.be/nv_KR9rG55Y Part 2 of 3] ===<br />
<br />
<br />
<br />
=== [https://youtu.be/s3B9L6amPn8 Part 3 of 3] ===<br />
<br />
== Lip Syncing ==<br />
<br />
[http://www.youtube.com/watch?v=S8rFv_pjfgs Synfig lipsync animation tutorial]: This video tutorial shows how to lipsync your animation with a .lst file and the Papagayo Program. Based off of the [[Doc:Lipsync]] tutorial.<br />
<br />
<videoflash>S8rFv_pjfgs|425|344</videoflash><br />
<br />
<br />
[https://www.youtube.com/watch?v=waI3AwXfIy4 simple lipsync by Zmeyk] : Simple method of synchronizing lips of animated character with recorded voice.<br />
<br />
<videoflash>waI3AwXfIy4|425|344</videoflash><br />
<br />
== Walk Cycle + TimeLoop layer ==<br />
<br />
[https://www.youtube.com/watch?v=VSD3aIi8JZ0 Caminata + Time Loop en Synfig Studio] show how to do a walk cycle step by step and then loop it with the [[TimeLoop Layer]] by http://www.lobozamora.com/<br />
<br />
<videoflash>VSD3aIi8JZ0|425|344</videoflash><br />
<br />
<br />
== Shiny Effects ==<br />
<br />
This tutorial follows the [[Doc:Shiny_Effects]] tutorial<br />
<br />
<videoflash>8QX0dJX2sI8|425|344</videoflash><br />
<br />
== Kynetic Typography ==<br />
<br />
Micro-tutorial by Yoyobuae<br />
<br />
<videoflash>FZfypmXrMIo|425|344</videoflash><br />
<br />
See forum [url=http://www.synfig.org/forums/viewtopic.php?f=14&t=4829]post[/url] for more informations and [url=http://www.synfig.org/forums/download/file.php?id=2704]project file[/url]<br />
<br />
==PenguinTutorials.com==<br />
<br />
You can find more video tutorials at [http://www.penguintutorials.com/synfig PenguinTutorials.com]<br />
<br />
<br />
<br />
=Advanced =<br />
<br />
== How to vectorize a drawing ==<br />
<br />
https://www.youtube.com/watch?v=oH5LudWwb2w<br />
<br />
<videoflash>oH5LudWwb2w|425|344</videoflash><br />
<br />
Realised with Synfig 1.0.x by [http://www.lobozamora.com/ LoboZamora]<br />
<br />
== Making headturn guides using Synfig ==<br />
<br />
https://www.youtube.com/watch?v=HBFqTlmR6qw<br />
<br />
<videoflash>HBFqTlmR6qw|425|344</videoflash><br />
<br />
Realised with Synfig 0.64.1 by Konstantin Dmitriev<br />
<br />
Nota: to help to translating and caption this video : http://amara.org/v/CUeA/</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Following_a_Spline&diff=23322Doc:Following a Spline2019-02-23T16:54:54Z<p>Synme: /* See also */ add link video</p>
<hr />
<div><!-- Page info --><br />
{{Title|Following a Spline}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
:Note: There is also a slightly out-of-date tutorial on this topic at [[Tracking Curves]]. It contains some info, particularly about link/export, '''which hasn't yet been added to this new tutorial'''. There is also another [[Following a BLine (the very old way)|very out-of-date tutorial]] for synfig 0.61.08.<br />
== Introduction ==<br />
<br />
This tutorial will demonstrate how to make an object follow the path of an arbitrary curve, rotating to face the direction of travel.<br />
<br />
== Summary ==<br />
<br />
We're going to:<br />
<br />
* {{l|Doc:Following a Spline#Create the Layers|Draw a curve and an arrow}}<br />
* {{l|Doc:Following a Spline#Make the Arrow Move and Rotate|Link the arrow's Origin and Rotation}} to the Spline so the arrow follows the curve<br />
<br />
== Tutorial ==<br />
<br />
This is a brief tutorial giving an example of how to use it:<br />
<br />
=== Create the Animation ===<br />
<br />
File > New<br />
<br />
=== Create the Layers ===<br />
<br />
Select the {{l|Spline Tool}}<br />
[[File:Spline-tool-0.63.06.png|frame|none]]<br />
<br />
enable just the Outline checkbox<br />
<br />
draw a spline that you want the arrow to move along<br />
<br />
click the {{Literal|Make Spline}} icon in the bottom left of the {{l|Tool_Options_Panel}} to create the spline.<br />
<br />
still in the Spline Tool, enable {{Literal|Create Outline}} and {{Literal|Create Region}} checkboxes in tool options<br />
[[File:Spline-Tool-Options_0.63.06.png|frame|center]]<br />
<br />
draw an arrow or whatever, pointing to the right.<br />
<br />
Switch to the {{l|Transform Tool}}<br />
<br />
select the outline, hit control-a to select all its {{l|Handle|handles}} except the green position handle<br />
<br />
drag the handle so that the arrow is centred around the green position handle<br />
<br />
Add a {{l|Rotate Layer}} above the outline and region<br />
<br />
{{l|Group}} the rotate, outline, and region layers<br />
<br />
so now you've got 2 top-level layers: a curved path, and a group containing an arrow and a rotate layer<br />
<br />
=== Make the Arrow Move and Rotate ===<br />
<br />
* Select the group layer by clicking it in the {{l|Layers Panel}}<br />
* Select its green position {{l|Handle|handle}} by clicking on it in the {{l|WorkArea}}<br />
** additionally select the Rotate layer by holding Control and clicking it in the Layers panel<br />
** additionally select the blue "rotation amount" handle by holding {{Shortcut|ctrl}} and clicking on it in the canvas window<br />
<br />
So now we should have 2 layers selected, and one handle from each of those 2 layers selected<br />
<br />
Now additionally select the curved spline layer (it should be the last layer in the Layer panel's list) by holding {{Shortcut|ctrl}} and clicking on it<br />
<br />
Right-click on the dotted line that indicates the position of the curved spline - not on any handle, but on the dotted line between handle<br />
<br />
From the context menu that pops up, select {{Literal|Link to Spline}}<br />
[[Image:Spline-Link-to-0.63.06.png|none|frame|See also {{l|Command:Link_to_Spline}} ]]<br />
<br />
The arrow group should move so that its green position handle is on the spline, and it should rotate so that the arrow points along the spline at that point<br />
<br />
Select just the group layer, and drag its green handle around. you'll see that the handle is constrained now to line on the spline, and that dragging it also affects the rotation of the arrow as expected<br />
<br />
We can now animate the arrow. turn on {{l|Animate_Editing_Mode}} by clicking the icon in the bottom right of the canvas window.<br />
<br />
* at time '''0f''', drag the group layer's green position handle to one end of the spline<br />
* at time '''5s''', drag the same position handle to the other end of the spline<br />
<br />
Try {{c|<Caret Menu>|<File>|Preview|}} to watch the animation.<br />
<br />
== Results ==<br />
<br />
This is the animation I ended up with: <br />
[[File:Arrow-follows-bline.gif|center|alt Following a Spline example]]<br />
<br />
Synfig project : {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Controlling the linear velocity ==<br />
<br />
By default, the arrow travels the whole spline with a constant velocity, independently of the spline structure.<br />
<br />
If you select the group layer and look at the Parameters Panel, then you'll see that its Origin parameter is {{L|convert|converted}} to {{Literal|Spline Vertex}} type. This is done automatically when you do "Link to Spline" action. You can disable the "Homogenous" subparameter and then the speed of the arrow will depend on the spline structure - it will take the same time to move along each segment of the spline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the spline) is not constant.<br />
<br />
For illustration of the "Homogenous" effect see [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].<br />
<br />
== See also ==<br />
* Synfig forum : [http://www.synfig.org/forums/viewtopic.php?f=8&t=4563 Following a path duplicated]<br />
* Synfig forum : [http://www.synfig.org/forums/viewtopic.php?t=2803 animate a "travel path"]<br />
* Synfig forum : [http://www.synfig.org/forums/viewtopic.php?f=8&t=9157 A path of scraps(or any other object)]<br />
* Link to Spline command : {{l|Command:Link_to_Spline}}<br />
* A [https://youtu.be/crsCxM6Fxqg video link] showing the explanation of this page.</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Video_Tutorials&diff=23321Doc:Video Tutorials2019-02-23T16:41:31Z<p>Synme: /* Following a Spline */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Video Tutorials}}<br />
{{Category|Tutorials}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Video tutorials could be updated with last version!<br />
<br />
In this section you'll find some basic video tutorials of the most common tasks in Synfig. Feel free to ask here for any new video tutorial.<br />
<br />
= Basics of Animations =<br />
<br />
In this sections, how to use simple part of Synfig studio, mostly one Layer usage.<br />
<br />
== Animation Basics ==<br />
<br />
[http://www.youtube.com/watch?v=WUxn9jqFJrg Synfig basic animation tutorial]: This video tutorial shows how to do a (very) basic animation. The tutorial roughly follows the [[Doc:Animation_Basics]] tutorial.<br />
<br />
<videoflash>WUxn9jqFJrg|425|344</videoflash><br />
<br />
<br />
== Creating a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=bQ-ku0bA23A Creating a Spline]: This small video tutorial shows the basic steps to build a Spline. Video editing was done using Synfig itself.<br />
<br />
<videoflash>bQ-ku0bA23A|425|350</videoflash><br />
<br />
<br />
== Creating Circles, Rectangles and a Spline ==<br />
<br />
[http://youtube.com/?v=SM1qUqGyIpA Creating Circles, Rectangles, and a Spline]: Short tutorial about creating Circles, Rectangles, and a Spline.<br />
<br />
<videoflash>SM1qUqGyIpA|425|350</videoflash><br />
<br />
<br />
== Curve warp demonstration ==<br />
<br />
I'd like to introduce few videos about my experiments with curve warp deformation layer. Unfortunately I'm bad translator and I sounded it in russian, but I hope video is clear enough as is. If any [http://synfig.org/forums/viewtopic.php?f=6&t=4229 question] ask me I'll try to explain.<br />
<br />
=== [https://www.youtube.com/watch?v=Gz7gSBVHnjo Part 1 of 3] ===<br />
<videoflash>Gz7gSBVHnjo|425|344</videoflash><br />
=== [https://www.youtube.com/watch?v=Y5GFP_eU_Mk Part 2 of 3] ===<br />
<videoflash>Y5GFP_eU_Mk|425|344</videoflash><br />
=== [Planned Part 3 of 3] ===<br />
<br />
== Blend Test ==<br />
<br />
[http://www.youtube.com/watch?v=_n23xOvONb8 Synfig Blend Test]: 22 blend methods times 15 layers = 330 boring frames. At 0.55 fps = 10 boring minutes. Enjoy!<br />
<br />
<videoflash>_n23xOvONb8|425|350</videoflash><br />
<br />
<br />
= Animation =<br />
<br />
== Flower Animation ==<br />
<br />
This video tutorial shows how to do an animation of a growing flower. The tutorial roughly follows the written [[Doc:Flower_Animation]] tutorial.<br />
<br />
=== [http://www.youtube.com/watch?v=U1EjObyN1pc Part 1 of 4] ===<br />
<br />
<videoflash>U1EjObyN1pc|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=oSAilqEKEJs Part 2 of 4] ===<br />
<br />
<videoflash>oSAilqEKEJs|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=STP01dOxvMU Part 3 of 4] ===<br />
<br />
<videoflash>STP01dOxvMU|425|344</videoflash><br />
<br />
=== [http://www.youtube.com/watch?v=8dcAqZxwOWM Part 4 of 4] ===<br />
<br />
<videoflash>8dcAqZxwOWM|425|344</videoflash><br />
<br />
== How to animate with Synfig Studio ==<br />
<br />
<videoflash>cDMbDQ07Qkg|425|344</videoflash><br />
<br />
== Following a Spline ==<br />
<br />
[http://www.youtube.com/watch?v=w87KRL3kD74 Following a Spline:] This video tutorial show how to link a shape to a Spline. It doesn't follow strictly the [[Doc:Following_a_Spline]] but would help you to follow it. <br />
<br />
<videoflash>w87KRL3kD74|425|350</videoflash><br />
<br />
A more recent 4K [https://youtu.be/crsCxM6Fxqg video] has been redone with the help of the video above, English subtitles are included.<br />
<br />
== Motion Tracking Tutorial ==<br />
<br />
This Tutorial shows how to list import and how to do motion tracking. <br />
<br />
<videoflash>YAyKUr-rGOM|425|344</videoflash><br />
<br />
== Pseudo IPO-drivers in Synfig ==<br />
<br />
Zelgadis gave us [http://zelgadis.profusehost.net/files/synfig/ipo-drivers-synfig.ogg this] method to control playback using a variable.<br />
<br />
== Animating a caped character ==<br />
<br />
A 3-part tutorial on making an animated caped character in synfig.<br />
<br />
=== [http://youtube.com/?v=S0snIErKuFg Part 1 of 3] ===<br />
<br />
<videoflash>S0snIErKuFg|425|344</videoflash><br />
<br />
=== [http://youtube.com/?v=nv_KR9rG55Y Part 2 of 3] ===<br />
<br />
<videoflash>nv_KR9rG55Y|425|344</videoflash><br />
<br />
=== [http://youtube.com/?v=s3B9L6amPn8 Part 3 of 3] ===<br />
<br />
<videoflash>s3B9L6amPn8|425|344</videoflash><br />
<br />
== Lip Syncing ==<br />
<br />
[http://www.youtube.com/watch?v=S8rFv_pjfgs Synfig lipsync animation tutorial]: This video tutorial shows how to lipsync your animation with a .lst file and the Papagayo Program. Based off of the [[Doc:Lipsync]] tutorial.<br />
<br />
<videoflash>S8rFv_pjfgs|425|344</videoflash><br />
<br />
<br />
[https://www.youtube.com/watch?v=waI3AwXfIy4 simple lipsync by Zmeyk] : Simple method of synchronizing lips of animated character with recorded voice.<br />
<br />
<videoflash>waI3AwXfIy4|425|344</videoflash><br />
<br />
== Walk Cycle + TimeLoop layer ==<br />
<br />
[https://www.youtube.com/watch?v=VSD3aIi8JZ0 Caminata + Time Loop en Synfig Studio] show how to do a walk cycle step by step and then loop it with the [[TimeLoop Layer]] by http://www.lobozamora.com/<br />
<br />
<videoflash>VSD3aIi8JZ0|425|344</videoflash><br />
<br />
<br />
== Shiny Effects ==<br />
<br />
This tutorial follows the [[Doc:Shiny_Effects]] tutorial<br />
<br />
<videoflash>8QX0dJX2sI8|425|344</videoflash><br />
<br />
== Kynetic Typography ==<br />
<br />
Micro-tutorial by Yoyobuae<br />
<br />
<videoflash>FZfypmXrMIo|425|344</videoflash><br />
<br />
See forum [url=http://www.synfig.org/forums/viewtopic.php?f=14&t=4829]post[/url] for more informations and [url=http://www.synfig.org/forums/download/file.php?id=2704]project file[/url]<br />
<br />
==PenguinTutorials.com==<br />
<br />
You can find more video tutorials at [http://www.penguintutorials.com/synfig PenguinTutorials.com]<br />
<br />
<br />
<br />
=Advanced =<br />
<br />
== How to vectorize a drawing ==<br />
<br />
https://www.youtube.com/watch?v=oH5LudWwb2w<br />
<br />
<videoflash>oH5LudWwb2w|425|344</videoflash><br />
<br />
Realised with Synfig 1.0.x by [http://www.lobozamora.com/ LoboZamora]<br />
<br />
== Making headturn guides using Synfig ==<br />
<br />
https://www.youtube.com/watch?v=HBFqTlmR6qw<br />
<br />
<videoflash>HBFqTlmR6qw|425|344</videoflash><br />
<br />
Realised with Synfig 0.64.1 by Konstantin Dmitriev<br />
<br />
Nota: to help to translating and caption this video : http://amara.org/v/CUeA/</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Basic_Bone_Morphing&diff=23270Doc:Basic Bone Morphing2017-08-22T12:16:32Z<p>Synme: Add details</p>
<hr />
<div><!-- Page info --><br />
{{Title|Basic Bone Morphing}}<br />
{{Navigation|Category:Tutorials|Doc:Basic Bone Morphing}}<br />
<!-- Templates --><br />
{{TOCright}}<br />
{{NewTerminology}}<br />
<!-- Categories --><br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
<!-- Page info end --><br />
<br />
= Example1 (easy understanding) =<br />
<br />
In this tutorial, we will learn how to move a character with the "Morphing by bones"<br />
we arrive at this result:<br />
[[File:Skeleton-puppet-animation.gif|frame|none|A puppet animation.]]<br />
<br />
== Preparation ==<br />
<br />
First, we need to create a character in 1 piece, then create a skeleton in a well defined order, to avoid that everything does twist at the same time during the animation.<br />
<br />
Once your "puppet" in the {{Literal|Canvas}} It must be added a skeleton.<br />
To add a skeleton layer, {{Literal|New layer}} → {{Literal|Other}} → {{Literal|Skeleton}}<br />
<br />
[[File:Skeleton-puppet-layers1.png|frame|none|Place the layer skeleton next to the puppet.]]<br />
<br />
Here is a shema which shows the order in which you must create each bone:<br />
[[File:Skeleton-puppet-shema1.jpg|frame|none|Schema numbered to place the bones.]]<br />
<br />
<br />
First 1 then use the bone of 1 to create the 2 etc...<br />
<br />
To create the 5 bone, use the 2 bone, the arrows represent what "bone" must be used to create the new "bone"<br />
<br />
to create the 7 bone, use the bone 1, and 8 use the bone 1.<br />
<br />
<br />
After you create the 1st bone (the head) click: {{Literal|Switch handles widths}}<br />
[[File:Skeleton-method2b.png|frame|none|Button: Switch handles widths.]]<br />
<br />
This will show you the widths of handles, it remains only to completely cover your puppet with each "bone"<br />
use the "Purple handle" to change the diameter of the width.<br />
<br />
The rest you already know the "orange/brown" allows the lengthening of the segment (bone). the "blue" handle this is for orientation (corner handle) from the origin with a determined length, "green" This is the original/axis of rotation (handle position) to move the whole bone.<br />
<br />
Once your first "bone" covers the entire head and neck, right-click on the skeleton and {{Literal|Create a child bone}} place him then on your puppet the shema will help you have a correct order (for the animation then).<br />
<br />
Once finished and that your puppet is covered with bones, you have this:<br />
[[File:Skeleton-puppet-shema2.jpg|frame|none|Puppet covered with bones.]]<br />
<br />
<br />
== Linking bones to members ==<br />
Then select your puppet, in the {{Literal|Layers panel}} and then make a {{Shortcut|Ctrl|A}} in the canvas to select all vertices.<br />
<br />
Then selected the layer {{Literal|skeleton}} We have create earlier, making {{Shortcut|Ctrl|Clic}}, in the layers panel.<br />
In the {{Literal|canvas}} now right-click on one of the handles of the skeleton and make {{Literal|Link to the skeleton}}.<br />
<br />
You just have to create your animation.<br />
<br />
== Project file ==<br />
<br />
The zip file containing parts of this tutorial may be found here: [[Media:Skeleton-puppet.zip|Skeleton-puppet]]<br />
<br />
== See also ==<br />
<br />
Here's a video using the same technique on a character dispute: [https://www.youtube.com/watch?v=NbI6TeAHbgs Development: Bones (part 7)]<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
= Example 2 (more detailed understanding) =<br />
<br />
Now that you know: <br />
* The button "Toggle the width handles."<br />
* The order of "creation of bones".<br />
* The Handles.<br />
* Linked, a bone to a limb.<br />
<br />
We will do it on a more complex man, the method being simpler because we designate "each limb" in "linking the bone to the skeleton" gradually as (1 to 1), and we verify that the link is made.<br />
<br />
[[File:Man-vagabon.gif|frame|none|Here is our man once animated.]]<br />
<br />
<br />
<br />
<br />
Let's start by seeing which limbs should be grouped, as in this image:<br />
[[File:Man-vagabon-cut.png|frame|none|Limbs are separated.]]<br />
<br />
<br />
<br />
<br />
Then import your limbs, group layers, like this:<br />
[[File:Man-vagabon-layers.png|frame|none|Arrange layers by group.]]<br />
<br />
<br />
Once properly classified, this will go very fast, let's do it again as we saw on the "black man", but the only difference so, is that we will link to the skeleton each limb and check that it works before moving to the next.<br />
<br />
As we already know the method, this will be very simple.<br />
Add a skeleton and place it at the top of our group, after positioning it on the head and the hat.<br />
<br />
Then click on the group "head" in the "Layers panel" right click and "Select All Layers Kids"<br />
we must also select our "hat" here we will make rather a {{Shortcut|Ctrl|click}}<br />
once the layers of "hat and head" to select, let's move on.<br />
<br />
{{Shortcut|Ctrl|A}} (to select the vertices)<br />
selecting in the "Layers panel" the skeleton.<br />
In the "canvas" now right click on one of the skeleton handles and do "Link to the Skeleton". <br />
(You see that the color of the handles changes) this means that the link is created.<br />
<br />
<br />
To check our link, select only the skeleton, and move the "blue handle", the head and hat should come with your skeleton.<br />
<br />
Well now you have to cancel, make a {{Shortcut|Ctrl|Z}} or "edition > cancel", (Don't press too many times otherwise your connection to the skeleton will have to be started again).<br />
<br />
Now, you just do the same thing to, for all other members 1 by 1.<br />
<br />
<br />
Let's repeat it one last time for the "neck".<br />
<br />
First we need to extend "bone" so in the canvas we make a right click and "Create a Child Bone"<br />
positionner-le pour prendre le cou.<br />
<br />
Click on the group "neck" in the "Layers panel" right click and "Select All Layers Kids"<br />
{{Shortcut|Ctrl|A}} (to select the vertices)<br />
selecting in the "Layers panel" the skeleton.<br />
In the "canvas" now make a right-click on one of the handles of the skeleton in the "neck" and made "Link to the Skeleton".<br />
(you can see that the color of the handles changes) this means that the link is created.<br />
<br />
<br />
We check the link "nake" and also "head", (if a part of the vertices twists oddly, replace the bone and repeat the binding, if it is really impossible to correct, must then be "Link to the bone").<br />
After checking that it works, we cancel, with the shortcut, or yellow arrow (cancel), green arrow (redo).<br />
<br />
Then you just have to do everything else helping you with the scheme of the "black man".<br />
<br />
Once the "bone" add and "Bind to the skeleton or Bind to the bone" you will have something like this:<br />
<br />
[[File:Man-vagabon-skeleton01.png]] [[File:Man-vagabon-skeleton02.png]]<br />
<br />
<br />
All you have to do is animate your man.<br />
<br />
== "Linked to the skeleton" OR "linked to the bone" ==<br />
<br />
On the left image, you see a link made on: "Linked to the skeleton", the limb will twist according to where it will be on your man.<br />
<br />
On the right image, you see a link made on: "linked to the bone", the limb will remain straight as a piece of wood.<br />
<br />
<gallery widths="300px" heights="250px"><br />
Image:Man-vagabon-link-to-skeleton.gif<br />
Image:Man-vagabon-link-to-bone.gif<br />
</gallery><br />
<br />
A cartoon character, will appear more alive with a few "Links to the skeleton". So use the one that best fits the end use.<br />
<br />
<br />
== Important ==<br />
<br />
Significant accuracy on the binding of a limb.<br />
<br />
Example for a leg that is composed of 3 parts:<br />
<br />
Create a bone for the foot, link, check. For the calf, link, check. For the thigh, link, check. (They are all to be done separately).<br />
<br />
<br />
== Project File ==<br />
The zip file containing the parts of this tutorial can be found here: [[Media:Man-vagabon-archive.zip|Man-vagabon-archive.zip]]<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
= Example 3 - Skeleton for Walking =<br />
Here is a schema of "skeleton" that was made to "walk", this skeleton was built especially for this function.<br />
<br />
[[File:Skeleton-to-walk.png|frame|none|Schema for walking.]]<br />
<br />
<br />
There are 3 skeletons, that of the left leg, right leg, trunk.<br />
<br />
A "hook" is a primary bone that prevents the skeleton from sliding unintentionally during animation.<br />
<br />
Here the 3 hooks are located at the position 1,5,9 there are dotted.<br />
<br />
<br />
To start creating our skeleton it is necessary, create the bone "1", it will be the hook, then create a child bone, move it to "2", then continue until 4.<br />
<br />
As for the 2nd skeleton, place the "hook" bone "5", place your bone in the same direction that the limb.<br />
<br />
Here the shoe has the same angle that "bone".<br />
<br />
<br />
We pass to the skeleton 3, we create the bone "9" which will be the "hook", then once the bone 10 is placed, we create the child bone 11 until the 13th, we create the child bone 14 from the 10th until the 16th.<br />
<br />
And we end up creating the child bone 17 from the 10th.<br />
<br />
To summarize the bone 10, is the bone that must be selected to create the child bones 11,14,17.<br />
<br />
'''The advantage of this skeleton is that the feet will not slip "unintentionally" during the animation, this is why it is better to use this type of skeleton if you want to move the lower body.'''<br />
<br />
<br />
== Project File ==<br />
The zip file containing the parts of this tutorial can be found here: [[Media:Skeleton-to-walk-archive.zip|Skeleton-to-walk-archive.zip]]<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
= Example 4 - Skeleton general (default) =<br />
<br />
Here is the schema of a general "skeleton" that at the moment is the best if you want to do something other than walk, so there is only 1 skeleton.<br />
<br />
The only difference with the "schema of the black man" and that he can move the head and that the center of gravity is in the bone "1" green handle.<br />
<br />
<br />
The main disadvantage is at the level of the feet, having no hook in this place, the feet will certainly move during the animation.<br />
<br />
If you want to do a specific action, then it will be easier to create a skeleton adapted to the desired action.<br />
<br />
[[File:Skeleton-general-v1-1.png|frame|none|Schema of a basic skeleton.]]<br />
<br />
<br />
There is only 1 skeleton, including 1 "hook" it starts to bone "1", the green position handle, which is surrounded by pink is the handle that is to use to move the whole character.<br />
<br />
Then we create only "bones children": we must use the schema to create the bones in the right direction.<br />
<br />
== Project File ==<br />
The zip file containing the parts of this tutorial can be found here: [[Media:Skeleton-general-archive.zip|Skeleton-general-archive.zip]]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Basic_Bone_Morphing/fr&diff=23269Doc:Basic Bone Morphing/fr2017-08-22T12:05:08Z<p>Synme: Add details</p>
<hr />
<div><!-- Page info --><br />
{{Title|Bases du Morphing par Ossatures}}<br />
{{Navigation|Category:Tutorials|Doc:Basic Bone Morphing}}<br />
<!-- Templates --><br />
{{TOCright}}<br />
{{NewTerminology}}<br />
<!-- Categories --><br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
<!-- Page info end --><br />
<br />
= Exemple1 (compréhension simple) =<br />
<br />
Dans ce tutoriel, nous allons apprendre comment bouger un personnage avec le "Morphing par Ossatures"<br />
nous arriverons à ce résultat:<br />
[[File:Skeleton-puppet-animation.gif|frame|none|Animation d'un pantin.]]<br />
<br />
== Préparation ==<br />
<br />
D'abord, il faut créer un personnage d'1 seule pièce, ensuite créer un squelette suivant un ordre bien défini, pour éviter que tout ne se tord en même temps, lors de l'animation.<br />
<br />
Une fois votre "pantin" dans le {{Literal|Canevas}} il faut lui ajouter un squelette.<br />
Pour ajouter un calque squelette, {{Literal|Nouveau Calque}} → {{Literal|Autre}} → {{Literal|Squelette}}<br />
<br />
[[File:Skeleton-puppet-layers1.png|frame|none|Placer le calque squelette à côté du pantin.]]<br />
<br />
Voici un schéma qui montre l'ordre dans lequel il faut créer chaque os:<br />
[[File:Skeleton-puppet-shema1.jpg|frame|none|Schéma numéroté pour placer les Os.]]<br />
<br />
<br />
D'abord le 1 ensuite utiliser l'os du 1 pour créer le 2 etc...<br />
<br />
Pour créer l'os 5, utiliser l'os 2, les flêches représentent quel "os" il faut utiliser pour créer le nouvel "os"<br />
<br />
pour créer l'os 7, utiliser l'os 1, et le 8 utiliser l'os 1.<br />
<br />
<br />
Après avoir créer le 1er os (celui de la tête) cliquez sur: {{Literal|Basculer les poignées de largeurs}}<br />
[[File:Skeleton-method2b.png|frame|none|Bouton: Basculer les poignées de largeurs.]]<br />
<br />
Cela va vous afficher les poignées de largeurs, il ne reste plus qu'à bien recouvrir votre pantin avec chaque "os"<br />
utiliser la "poignée violet" pour changer le diamètre de la largeur. <br />
<br />
Le reste vous le savez déjà le "orange/marron" permet l'allongement du segment (os), la poignée "bleue" c'est pour l'orientation (poignée d'angle) à partir de l'origine avec une longueur déterminée, "le vert" c'est l'origine/axe de rotation (poignée de position) pour déplacer l'os entier.<br />
<br />
Une fois que votre premier "os" recouvre toute la tête et le cou, faites un clic droit sur le squelette et {{Literal|Créer un os enfant}} placer le ensuite sur votre pantin le schéma vous aidera à avoir un ordre correct (pour l'animation ensuite).<br />
<br />
Une fois fini et que votre pantin est recouvert d'ossement, vous avez cela:<br />
[[File:Skeleton-puppet-shema2.jpg|frame|none|Pantin recouvert d'ossements.]]<br />
<br />
<br />
== Lier les os aux membres ==<br />
Ensuite sélectionner votre pantin , Dans le {{Literal|Panneau Calques}} et faites ensuite un {{Shortcut|Ctrl|A}} dans le canevas, pour sélectionner tous les vertices.<br />
<br />
Ensuite sélectionné le calque {{Literal|squelette}} que nous avons créér tout à l'heure, en faisant {{Shortcut|Ctrl|Clic}}, dans le Panneau Calques.<br />
Dans le {{Literal|canevas}} maintenant faites un clic droit sur une des poignées du squelette et faites {{Literal|Lier au Squelette}}.<br />
<br />
Il ne vous reste plus qu'à créer votre animation.<br />
<br />
== Fichier Projet ==<br />
<br />
Le fichier zip contenant les parties de ce tutoriel peut-être trouvé ici: [[Media:Skeleton-puppet.zip|Skeleton-puppet]]<br />
<br />
== Voir aussi ==<br />
<br />
Voici une vidéo utilisant la même technique sur un personnage différend: [https://www.youtube.com/watch?v=NbI6TeAHbgs Development: Bones (part 7)]<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
= Exemple 2 (compréhension plus détaillée)=<br />
<br />
Maintenant que vous connaissez: <br />
* Le bouton "Basculer les poignées de largeurs."<br />
* L'ordre de "création des os".<br />
* Les poignées.<br />
* Lié, un os à un membre.<br />
<br />
Nous allons le faire sur un bonhomme plus complexe, la méthode étant plus simple car nous désignons "chaque membre" en "liant l'os au squelette" au fur à mesure (1 par 1), et nous vérifions que la liaison est faite.<br />
<br />
[[File:Man-vagabon.gif|frame|none|Voici notre bonhomme une fois animé.]]<br />
<br />
<br />
<br />
<br />
Commencons par voir quelles sont les membres qu'il faut grouper, comme sur cette image:<br />
[[File:Man-vagabon-cut.png|frame|none|Les membres sont séparés.]]<br />
<br />
<br />
<br />
<br />
Ensuite importer vos membres, grouper les calques, comme ceci:<br />
[[File:Man-vagabon-layers.png|frame|none|Ranger les calques par groupe.]]<br />
<br />
<br />
Une fois bien classer, cela va aller très vite, refaisons comme nous l'avons vu sur le "bonhomme noir", mais la seule différence donc, c'est que nous allons lier au squelette chaque membre et vérifier que cela fonctionne avant de passer au suivant.<br />
<br />
Commes nous connaissons déjà la méthode, cela va être très simple.<br />
Ajouter un squelette et placer-le en haut de notre groupe, après positionner-le sur la tête et le chapeau.<br />
<br />
Ensuite cliquez sur le groupe "tête" dans le "Panneau Calques" clic droit et "Sélectionner Tous les Calques Enfants"<br />
nous devons sélectionner aussi notre "chapeau" ici nous ferons plutôt un {{Shortcut|Ctrl|clic}}<br />
une fois les calques de "chapeau et tête" sélectionner, passons à la suite.<br />
<br />
{{Shortcut|Ctrl|A}} (pour sélectionner les vertices)<br />
on sélectionne dans le "Panneau Calques" le squelette.<br />
Dans le "canevas" maintenant faites un clic droit sur une des poignées du squelette et faites "Lier au Squelette". <br />
(Vous voyez que la couleur des poignées change) cela veut dire que la liaison est créée.<br />
<br />
<br />
Pour vérifier notre liaison, sélectionnez seulement le squelette, et faites bouger la "poigné bleue", la tête et le chapeau devraient venir avec votre squelette.<br />
<br />
Bien maintenant il faut annuler, faites un {{Shortcut|Ctrl|Z}} ou "édition > annuler", (n'appuyez pas trop de fois dessus car autrement votre liaison au squelette sera à refaire).<br />
<br />
Maintenant, il ne vous reste plus qu'à faire la même chose pour tous les autres membres 1 par 1.<br />
<br />
<br />
Refaisons-le une dernière fois pour le "cou".<br />
<br />
D'abord il faut prolonger "os" donc dans le canevas nous faisons un clic droit et "Créer un Os enfant"<br />
positionner-le pour prendre le cou.<br />
<br />
Cliquez sur le groupe "cou" dans le "Panneau Calques" clic droit et "Sélectionner Tous les Calques Enfants"<br />
{{Shortcut|Ctrl|A}} (pour sélectionner les vertices)<br />
on sélectionne dans le "Panneau Calques" le squelette.<br />
Dans le "canevas" maintenant faites un clic droit sur une des poignées du squelette du "cou" et faite "Lier au Squelette".<br />
(vous voyez encore que la couleur des poignées change) cela veut dire que la liaison est créée.<br />
<br />
<br />
Nous vérifions la liaison "cou" et aussi "tête", (si une partie des vertices se tord bizarrement, il faut replacer l'os et refaire la liaison, si c'est vraiment impossible à corriger, il faut alors faire "Lier à l'os").<br />
Ensuite après avoir vérifié que cela marche on annule, avec le raccourci, ou bien flêche jaune (annuler), flêche verte (refaire).<br />
<br />
Ensuite il ne vous reste plus qu'à faire tout le reste en vous aidant avec le schéma du "bonhomme noir".<br />
<br />
Une fois les "os" ajouter et "Lier au squelette ou Lier à l'os" vous aurez quelque chose comme ceci:<br />
<br />
[[File:Man-vagabon-skeleton01.png]] [[File:Man-vagabon-skeleton02.png]]<br />
<br />
<br />
Il ne vous restera plus qu'à animer votre bonhomme.<br />
<br />
== "Lié au squelette" OU "lié à l'os" ==<br />
<br />
Sur l'image de gauche, vous voyez une liaison faite sur: "Lier au Squelette", le membre se tordra suivant l'endroit où il sera sur votre bonhomme.<br />
<br />
Sur l'image de droite, vous voyez une liaison faite sur: "Lier à l'os", le membre restera droit comme un morceau de bois.<br />
<br />
<gallery widths="300px" heights="250px"><br />
Image:Man-vagabon-link-to-skeleton.gif<br />
Image:Man-vagabon-link-to-bone.gif<br />
</gallery><br />
<br />
Un personnage de cartoon, paraîtra plus vivant avec quelques "liaisons au squelette". Donc utilisez celui qui correspond le mieux à l'utilisation finale.<br />
<br />
<br />
== Important ==<br />
<br />
Précision importante sur la liaison d'un membre.<br />
<br />
Exemple pour une jambe qui est composée en 3 parties:<br />
<br />
Créer un os pour le pied, lier, vérifier. Pour le mollet, lier, vérifier. Pour la cuisse, lier, vérifier. (Ils sont tous à faire séparément).<br />
<br />
<br />
== Fichier Projet ==<br />
Le fichier zip contenant les parties de ce tutoriel peut être trouvé ici: [[Media:Man-vagabon-archive.zip|Man-vagabon-archive.zip]]<br />
<br />
<br />
<br />
<br />
<br />
= Exemple 3 - Squelette pour la marche =<br />
Voici un schéma de "squelette" qui a été réalisé pour "marcher", ce squelette a été construit spécialement à cette fonction.<br />
<br />
[[File:Skeleton-to-walk.png|frame|none|Schéma pour la marche.]]<br />
<br />
<br />
Il y a 3 squelettes uniques, celui de la jambe gauche, jambe droite, tronc.<br />
<br />
Un "crochet" est un os primaire qui empêche de glisser involontairement le squelette lors de l'animation.<br />
<br />
Ici les 3 crochets sont situés à l'emplacement 1,5,9 il sont en pointillés.<br />
<br />
<br />
Pour commencer à créer notre squelette il faut ,créer l'os "1", il sera le crochet, ensuite ont créer un os enfant, on le déplace au "2", puis la suite jusqu'au 4.<br />
<br />
Pareil pour le 2ème squelette, on place le "crochet" os "5", placer votre os dans le même sens que le membre.<br />
<br />
Ici la chaussure a le même angle que "l'os".<br />
<br />
<br />
Nous passons au squelette 3, on crée l'os "9" qui sera le "crochet", ensuite une fois que l'os 10 est placé, nous créons l'os enfant 11 jusqu'au 13, nous créons l'os enfant 14 à partir du 10 jusqu'au 16.<br />
<br />
Et nous finissons par créer l'os enfant 17 à partir du 10.<br />
<br />
Pour résumé l'os 10, est l'os qu'il faut sélectionner pour créer les os enfants 11,14,17.<br />
<br />
'''L'avantage de ce squelette c'est que les pieds ne glisseront pas "involontairement" pendant l'animation, c'est pour cela qu'il est préférable d'utiliser ce type de squelette si vous voulez faire bouger le bas du corps.'''<br />
<br />
<br />
== Fichier Projet ==<br />
Le fichier zip contenant les parties de ce tutoriel peut être trouvé ici: [[Media:Skeleton-to-walk-archive.zip|Skeleton-to-walk-archive.zip]]<br />
<br />
= Exemple 4 - Squelette général (défaut) =<br />
<br />
Voici le schéma d'un "squelette" général qui pour le moment est le meilleur si vous souhaitez faire autre chose que marcher, il y a donc 1 seul squelette.<br />
<br />
La seule différence avec le "schéma du bonhomme noir" et qu'il pourra bouger la tête et que le centre de gravité se trouve à l'os "1" poignée verte.<br />
<br />
<br />
Le principal désavantage se situe au niveau des pieds, n'ayant pas de crochet à cet endroit, les pieds bougeront sûrement pendant l'animation.<br />
<br />
Si vous souhaitez faire une action bien spécifique, il sera alors plus simple de créer un squelette adapté à l'action voulue.<br />
<br />
[[File:Skeleton-general-v1-1.png|frame|none|Schéma d'un squelette basique.]]<br />
<br />
<br />
Il y a 1 seul squelette, dont 1 "crochet" il démarre à l'os "1", la poignée de position verte, qui est entouré de rose est la poignée qui est à utiliser pour déplacer le personnage entier.<br />
<br />
Ensuite nous créons seulement des "os enfants": il faut utiliser le schéma pour créer les os dans le bon sens.<br />
<br />
== Fichier Projet ==<br />
Le fichier zip contenant les parties de ce tutoriel peut être trouvé ici: [[Media:Skeleton-general-archive.zip|Skeleton-general-archive.zip]]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Walk_Cycle&diff=23211Doc:Walk Cycle2017-05-12T17:05:39Z<p>Synme: I delete the "method 2" which is useless, it has been replaced by "Character walking, moving (full explanation)."</p>
<hr />
<div><!-- Page info --><br />
{{Title|Walk Cycle}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{Category|ImportArt}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Somes of the screenshots needs to be updated with 0.64.0<br />
<br />
= The List File =<br />
One of the less obvious features of Synfig is buried in the Import Image layer. In addition to being able to import some basic still image file types, it will also accept a [[Doc:ListImporter|'lst' file]]. This list file is simply a text file consisting of a framerate followed by a list of images to display. (If no framerate is supplied a default rate of 15 Frames per Second (FPS) is used.)<br />
<br />
An example, provided by Voria Studios, takes 4 still images of a character in various stages of a walk cycle. These images are shown at 4 FPS to give a sequence that when repeated, show a man walking. <br />
<br />
Here are the images<br> <br />
<gallery widths="104px" heights="216px"><br />
Image:frame_01.jpg|Frame 1<br />
Image:frame_02.jpg|Frame 2<br />
Image:frame_03.jpg|Frame 3<br />
Image:frame_04.jpg|Frame 4<br />
</gallery><br />
<br />
And here is the beginning of the 'lst' file. <br><br />
<code><br />
FPS 4<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
...</code><br><br />
<br />
== Constructing a Walk cycle ==<br />
Let's take a look at how we can use these images to create a complete walk cycle for a character in Synfig. <br />
<br />
Start with a new canvas and add a timeline of several seconds with the default framerate of 24 FPS. On the canvas, select the Caret > Layer, New layer, Other, Import Image.<br />
<br />
This creates a new Import Image layer, but nothing will show up until the filename is selected. Go to the Parameters Panel and scroll down to Filename. There you can navigate to the '.lst' file and select open. <br />
Now you should see the first image in the list. Moving forward along the timeline will show successive images from the list every 6 frames. You can preview or render these as is and get a low frame rate animation. <br />
<br />
But the result doesn't look very smooth, and the images are not very flexible. (The images can be translated, rotated and stretched, but no elements within the images can be changed.) To make a fully editable character we need to trace over it with Synfig elements such as Splines. <br />
<br />
I work with a drawing tablet, so the easiest solution for me is to use the {{l|Draw Tool}}. Move back to frame 0, select the draw tool and trace over the character. I find it easiest to break the character down into several regions (Head, Left Arm, Right Arm, Torso, Left Leg, Right Leg). As a helpful tip, if the shape didn't come out quite right, go to the layer menu and uncheck the region checkbox - this will allow you to see the image below as you drag the handles around to correct your line. <br />
<br />
{{l|Image:Synfig_walk.png|800x324px}}<br />
<br />
Once you've finished Frame 0, move along the timeframe to Frame 6. Instead of tracing, this time we're going to take the existing elements and reposition them to match the image. Again, turning off the region layers will allow you to see the image below as you edit them. Use the rotate and translate tools to reposition the body parts, adjusting the line handles for fine tuning. [Don't forget to switch to "Animate Editing Mode" as explained in {{L|Doc:Animation Basics}}.]<br />
<br />
Repeat for Frames 12 & 18, then you can turn off the Import Image layer (uncheck the checkbox in the layer menu). Now, even though we've only drawn 4 keyframes, by the power of Synfig, we can render a smooth 24 frames of man walking. Add a 1 second timeloop layer on top, and the man will pace on the spot for the length of your animation. <br />
<br />
{{l|Image:walk.gif}}<br />
<br />
Adding Translation layer will enable your character to walk from one side of the canvas to the other (or moonwalk backwards if you're so inclined.)<br />
<br />
{{l|media:walk.zip|Here is a zipfile}} with the list file, 4 still images, and the finished Synfig file. Unzip them in the same directory and open the newwalk.sif file with synfig.<br />
<br />
<br />
<br />
<br />
= Character walking, moving (full explanation). =<br />
<br />
Before you succeed in walking a character, you must know the basics<br />
«to know»:<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Tutorial Basic Bone Tutorial] (For your limbs to be able to rotate 360° without any bugs).<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Morphing Basic Bone Morphing] (To create a "walking skeleton").<br />
<br />
<br />
*1: Draw the character in your drawing program.<br />
*2: Add outline<br />
<br />
{{l|Image:Walking-technique123.png}}<br />
<br />
*3: We move the limbs, in the best position so that the "arm" can be decompose into:<br />
<br />
Arm: arm, forearm, hand.<br />
<br />
Leg: thigh, calf, shoe.<br />
<br />
<br />
<br />
*4: Once the limbs are in a natural location, (the angles are avoided at 90°, because it is more difficult to place crosshair on twisted limbs).<br />
<br />
When they are almost straight it is a simpler operation.<br />
<br />
It is necessary to decompose the limb to be able to pose our "crosshair".<br />
<br />
{{l|Image:Walking-technique456.png}}<br />
<br />
*5: We replace, a hand with closed fist, a wider t-shirt so that the legs can run, the shoes, by something simpler.<br />
<br />
Because it will be simpler in animation to have basic members.<br />
<br />
<br />
*7: Once all the limbs are decompose, and the crosshair are placed.<br />
<br />
{{l|Image:Walking-technique789.png}}<br />
<br />
*8: Here are simple fast crosses that have been laid, to be able to turn the limbs, in a fast way.<br />
<br />
(They did not follow process "crosshair").<br />
<br />
*9: If your drawing program, allows you to make rotations from a fixed point, make a maximum of test, by turning your character in all directions to ensure that there is no "bug". (test in motion).<br />
<br />
Then you would import your final drawing into "synfig studio".<br />
<br />
<br />
*10: To make a more real walk, we can bend the shoe, the orange outline is a guide to easily put on the right shoe.<br />
<br />
The crosses represent the vertices:<br />
* Green crosses do not move. <br />
* The orange cross was lowered vertically until it reached the ground.<br />
* The blue cross was moved to the right and the handles moved.<br />
<br />
{{l|Image:Walking-technique1011.png}}<br />
<br />
*11: For simplicity when creating crosshair.<br />
<br />
-The left arm is identical to the right arm.<br />
<br />
-The left leg is identical to the right leg.<br />
<br />
Things that are unique: the left shoulder and the right shoulder (which are red) are different as well as the location of the crosses fast.<br />
<br />
<br />
<br />
*12: The top line, is a marker so that the character can lower or raise the head.<br />
<br />
The purple rectangle is the marker that will be used to know the "walking size" it is precisely to place behind the rear shoe and behind the front shoe, the 2 red lines are lines to be more precise.<br />
<br />
You can import your drawing into "synfig studio" and place the skeleton on your character.<br />
<br />
{{l|Image:Walking-technique1213.png}}<br />
<br />
*13: Simple trick for animation, and work with more details, put an opacity (as in this image) you will work more easily.<br />
<br />
<br />
*14: Once your character with a "walking skeleton", place your character as on the "character 1" schema.<br />
<br />
Then you would move your "purple rectangle" so that your walk is identical to "walking size".<br />
<br />
{{l|Image:Walking-technique14.png}}<br />
<br />
<br />
<br />
<br />
<br />
*15: Here is the schema used for the animation, it serves just as a landmark (it is available in 2 formats, SVG, SIFZ,) available in the ZIP.<br />
<br />
To see the next character you have to uncheck the other numbers to see the "next" step.<br />
<br />
I recall that this "schema" is just an "aid" to understand when to place the key images.<br />
<br />
The variants that will make your walking will be different will be "walking size", and placing your legs.<br />
<br />
So you will make a character with a walk, short, long, or running.<br />
<br />
To know: the characters 5,6,7,8 are the same images as the 4th, the limbs have only been reversing the other way.<br />
<br />
{{l|Image:Walking-technique15schema.gif}}<br />
<br />
<br />
<br />
<br />
<br />
All keyframes, are represented by a number there are "8" in all.<br />
<br />
{{l|Image:Walking-technique16.png}}<br />
<br />
They must all be placed with ''' "24f" and in interpolation mode "linear"'''(it is at the end of the animation that you will change the time, to accelerate the walk.<br />
<br />
<br />
[[File:Walking-technique-animation.gif|frame|none|Slow animation that decomposes walking. ]] <br />
<br />
The final result depends only on the schema (with the numbers on each head), you must modify it to have a result that will suit you.<br />
With a slow time of 24f you will immediately see the errors.<br />
<br />
Here you see a walk with a time of 10,18,6,16f to find the time to use on the following keyframe a simple trick has been used, for 4 keyframes, you delete 1 image, and search for the time of the missing image.<br />
<br />
Example:<br />
A B C D<br />
<br />
You delete the keyframe: "B" you go to image A and you advance the time from 1f to 1f from A to C, there will be a time when your missing image will be the same as B.<br />
Then you report the result on your animation, and check that the result is smooth.<br />
Once it is fluid you can really accelerate the walk by dividing your numbers by 2 or accelerate by 70% the result.<br />
<br />
<br />
Here is '''list of tricks''' used during the animation in synfig (with these helps it is easier to succeed):<br />
<br />
*Onion (to see the previous keys in opacity).<br />
*{{Shortcut|shift}} + left mouse click, and SLIDE the group with green handle (to slide on a line).<br />
*Use a rectangle to have the "walking size"(+2 lines at the edge for precision).<br />
*Drawing sketch (to have the legs and arms exactly the same, and report it further).<br />
*If your work is vectorial, as in this chapter, preferably use the quality preview "1,00", taille 100%, avoid working directly with a canvas of a size UHD (too large), <br />
with a quality of "1.00" and 100% in size you will see the final result, as will appear, in a "video".<br />
*When the 8 steps of the "schema" are all finished use the "duplicate" to copy the already made drawings. (See image below).<br />
<br />
<br />
<br />
To make a duplicate [http://wiki.synfig.org/Keyframe#Duplicate_a_keyframe link]:<br />
*1 I select the keyframe.<br />
*2 I select the layer to duplicate.<br />
*3 I click on the waypoint.<br />
*4 I duplicate.<br />
<br />
[[File:Walking-technique-duplicate.png|frame|none|Duplicate an image. ]]<br />
<br />
<br />
Here are the videos that were used to realize this tutorial:<br />
<br />
[https://youtu.be/2y6aVz0Acx0 ALAN BECKER - Animating Walk Cycles]<br />
<br />
[https://youtu.be/sERBnFpXezM STREAM Morevna Episode 3 Making of Shot 24]<br />
<br />
== Important == <br />
<br />
*The shoes have not been bent to make this tutorial easy to understand, the easiest technique for folding shoes is to use the vertices (image 10), but you can do differently as on the video link n°2.<br />
<br />
*We advise you to read this video at least once to understand the process of creation for the walk.<br />
<br />
*We remind you one last time that we must place the keys in '''"linear"''' interpolation mode.<br />
<br />
<br />
== Project File ==<br />
<br />
The zip file containing the parts of this tutorial can be found here: [[Media:Walking-technique-archive.zip|Walking-technique-archive.zip]]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Walk_Cycle&diff=23210Doc:Walk Cycle2017-05-08T14:12:27Z<p>Synme: Adding a chapter, the French version of the tutorial is the original.</p>
<hr />
<div><!-- Page info --><br />
{{Title|Walk Cycle}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{Category|ImportArt}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Somes of the screenshots needs to be updated with 0.64.0<br />
<br />
= The List File =<br />
One of the less obvious features of Synfig is buried in the Import Image layer. In addition to being able to import some basic still image file types, it will also accept a [[Doc:ListImporter|'lst' file]]. This list file is simply a text file consisting of a framerate followed by a list of images to display. (If no framerate is supplied a default rate of 15 Frames per Second (FPS) is used.)<br />
<br />
An example, provided by Voria Studios, takes 4 still images of a character in various stages of a walk cycle. These images are shown at 4 FPS to give a sequence that when repeated, show a man walking. <br />
<br />
Here are the images<br> <br />
<gallery widths="104px" heights="216px"><br />
Image:frame_01.jpg|Frame 1<br />
Image:frame_02.jpg|Frame 2<br />
Image:frame_03.jpg|Frame 3<br />
Image:frame_04.jpg|Frame 4<br />
</gallery><br />
<br />
And here is the beginning of the 'lst' file. <br><br />
<code><br />
FPS 4<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
...</code><br><br />
<br />
== Constructing a Walk cycle ==<br />
Let's take a look at how we can use these images to create a complete walk cycle for a character in Synfig. <br />
<br />
Start with a new canvas and add a timeline of several seconds with the default framerate of 24 FPS. On the canvas, select the Caret > Layer, New layer, Other, Import Image.<br />
<br />
This creates a new Import Image layer, but nothing will show up until the filename is selected. Go to the Parameters Panel and scroll down to Filename. There you can navigate to the '.lst' file and select open. <br />
Now you should see the first image in the list. Moving forward along the timeline will show successive images from the list every 6 frames. You can preview or render these as is and get a low frame rate animation. <br />
<br />
But the result doesn't look very smooth, and the images are not very flexible. (The images can be translated, rotated and stretched, but no elements within the images can be changed.) To make a fully editable character we need to trace over it with Synfig elements such as Splines. <br />
<br />
I work with a drawing tablet, so the easiest solution for me is to use the {{l|Draw Tool}}. Move back to frame 0, select the draw tool and trace over the character. I find it easiest to break the character down into several regions (Head, Left Arm, Right Arm, Torso, Left Leg, Right Leg). As a helpful tip, if the shape didn't come out quite right, go to the layer menu and uncheck the region checkbox - this will allow you to see the image below as you drag the handles around to correct your line. <br />
<br />
{{l|Image:Synfig_walk.png|800x324px}}<br />
<br />
Once you've finished Frame 0, move along the timeframe to Frame 6. Instead of tracing, this time we're going to take the existing elements and reposition them to match the image. Again, turning off the region layers will allow you to see the image below as you edit them. Use the rotate and translate tools to reposition the body parts, adjusting the line handles for fine tuning. [Don't forget to switch to "Animate Editing Mode" as explained in {{L|Doc:Animation Basics}}.]<br />
<br />
Repeat for Frames 12 & 18, then you can turn off the Import Image layer (uncheck the checkbox in the layer menu). Now, even though we've only drawn 4 keyframes, by the power of Synfig, we can render a smooth 24 frames of man walking. Add a 1 second timeloop layer on top, and the man will pace on the spot for the length of your animation. <br />
<br />
{{l|Image:walk.gif}}<br />
<br />
Adding Translation layer will enable your character to walk from one side of the canvas to the other (or moonwalk backwards if you're so inclined.)<br />
<br />
{{l|media:walk.zip|Here is a zipfile}} with the list file, 4 still images, and the finished Synfig file. Unzip them in the same directory and open the newwalk.sif file with synfig.<br />
<br />
= Method 2 =<br />
<br />
Let's start by drawing the pictures for our animation, here I did 4 poses, I have then extracted them in PNG that looks like:<br />
<br />
<gallery widths="170px" heights="300px"><br />
Image:Walker01.png<br />
Image:Walker02.png<br />
Image:Walker03.png<br />
Image:Walker04.png<br />
</gallery><br />
<br />
Then we add a color at the edges in order to trace our boy in Synfig, same thing I extracted them in PNG that looks like: <br />
<gallery widths="170px" heights="300px"><br />
Image:Walker05.png<br />
Image:Walker06.png<br />
Image:Walker07.png<br />
Image:Walker08a.png<br />
</gallery><br />
<br />
It remains more to import 4 designs with our "blue outline" in Synfig and choose the same size of "resizing"<br />
(settings > Transformations > scale) for each imported image, then we can add our boy file "walker.sif" to the animated.<br />
The boy layers must be laid on the image1 so resize and move until it is just.<br />
I put a (quantity) opacity of 0.5 on the image1 to see be sure of the result.<br />
I only check the image: blue-layer01.png and the group "walker".<br />
<br />
<br />
[[File:Walker08b.png|frame|none|I place the layer in this order]]<br />
<br />
<br />
The 1st image we see drawing import with the blue outlines, the layers for animation are right.<br />
<br />
The 2nd image we see the boy put in the same location as the drawing.<br />
<br />
[[File:Walker09.png]][[File:Walker10.png]]<br />
<br />
<br />
We can animate our Walker, took me a total of 5 s for animation<br />
uncheck "blue-layer01.png" and check "blue-layer02.png" and to see her add is a "quantity" of 0.5 (for opacity).<br />
<br />
<br />
[[File:Walker11.png|frame|none|We see layers that have not moved, and drawing with the blue outlines. ]] <br />
<br />
<br />
There is more to animate our boy, add a keyframe I put "24f" , <br />
<br />
[[File:Walker12.png|frame|none|select "left arm" the outline + region.]]<br />
<br />
<br />
<br />
Move each "vertex" 1 by 1 as here.<br />
<br />
[[File:Walker13.png|frame|none|and move the "handles".]]<br />
<br />
<br />
Do the same for each vertex until finished and be identical to the image, then we can start the image3<br />
check the image "blue-layer03.png" and uncheck the "blue-layer02.png" add a "keyframe" , make the same thing so it looks like our image.<br />
<br />
<br />
Do the same to the last image "blue-layer04.png", once the layers are identical to our image "blue-layer04.png" it remains more to duplicate the image key corresponding to "blue-layer01.png" see this tutorial [http://wiki.synfig.org/Keyframe#Duplicate_a_keyframe]<br />
<br />
or like this:<br />
<br />
I now need to create a new keyframe which will exactly match the image "blue-layer01.png" What will a loop between blue-layer04 and blue-layer01 and to have our animation streaming.<br />
<br />
<br />
*1 I select the keyframe.<br />
*2 I select the layer you want to duplicate.<br />
*3 I click about to pass.<br />
*4 I duplicate.<br />
[[File:Walker13b.png|frame|none|duplicate an image".]]<br />
<br />
<br />
Now the image will be virtually a clone of our reference blue-layer01, feel free to make a "jump" between the keyframe 1 and "the last keyframe" so that it is exactly the same, and that walking is fluid.<br />
<br />
<br />
Once you have the same result it is to reduce the size of the "length" of the keyframes, and export the animation<br />
I put "7f", which gives a quick walk.<br />
<br />
<br />
[[File:Walker14-animation.gif|frame|none|Final result]]<br />
<br />
== Files tutorials ==<br />
Files sif containing parts of this tutorial can be found here: [[Media:Walker14.zip|Walker14.zip]]<br />
<br />
<br />
= Character walking, moving (full explanation). =<br />
<br />
Before you succeed in walking a character, you must know the basics<br />
«to know»:<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Tutorial Basic Bone Tutorial] (For your limbs to be able to rotate 360° without any bugs).<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Morphing Basic Bone Morphing] (To create a "walking skeleton").<br />
<br />
<br />
*1: Draw the character in your drawing program.<br />
*2: Add outline<br />
<br />
{{l|Image:Walking-technique123.png}}<br />
<br />
*3: We move the limbs, in the best position so that the "arm" can be decompose into:<br />
<br />
Arm: arm, forearm, hand.<br />
<br />
Leg: thigh, calf, shoe.<br />
<br />
<br />
<br />
*4: Once the limbs are in a natural location, (the angles are avoided at 90°, because it is more difficult to place crosshair on twisted limbs).<br />
<br />
When they are almost straight it is a simpler operation.<br />
<br />
It is necessary to decompose the limb to be able to pose our "crosshair".<br />
<br />
{{l|Image:Walking-technique456.png}}<br />
<br />
*5: We replace, a hand with closed fist, a wider t-shirt so that the legs can run, the shoes, by something simpler.<br />
<br />
Because it will be simpler in animation to have basic members.<br />
<br />
<br />
*7: Once all the limbs are decompose, and the crosshair are placed.<br />
<br />
{{l|Image:Walking-technique789.png}}<br />
<br />
*8: Here are simple fast crosses that have been laid, to be able to turn the limbs, in a fast way.<br />
<br />
(They did not follow process "crosshair").<br />
<br />
*9: If your drawing program, allows you to make rotations from a fixed point, make a maximum of test, by turning your character in all directions to ensure that there is no "bug". (test in motion).<br />
<br />
Then you would import your final drawing into "synfig studio".<br />
<br />
<br />
*10: To make a more real walk, we can bend the shoe, the orange outline is a guide to easily put on the right shoe.<br />
<br />
The crosses represent the vertices:<br />
* Green crosses do not move. <br />
* The orange cross was lowered vertically until it reached the ground.<br />
* The blue cross was moved to the right and the handles moved.<br />
<br />
{{l|Image:Walking-technique1011.png}}<br />
<br />
*11: For simplicity when creating crosshair.<br />
<br />
-The left arm is identical to the right arm.<br />
<br />
-The left leg is identical to the right leg.<br />
<br />
Things that are unique: the left shoulder and the right shoulder (which are red) are different as well as the location of the crosses fast.<br />
<br />
<br />
<br />
*12: The top line, is a marker so that the character can lower or raise the head.<br />
<br />
The purple rectangle is the marker that will be used to know the "walking size" it is precisely to place behind the rear shoe and behind the front shoe, the 2 red lines are lines to be more precise.<br />
<br />
You can import your drawing into "synfig studio" and place the skeleton on your character.<br />
<br />
{{l|Image:Walking-technique1213.png}}<br />
<br />
*13: Simple trick for animation, and work with more details, put an opacity (as in this image) you will work more easily.<br />
<br />
<br />
*14: Once your character with a "walking skeleton", place your character as on the "character 1" schema.<br />
<br />
Then you would move your "purple rectangle" so that your walk is identical to "walking size".<br />
<br />
{{l|Image:Walking-technique14.png}}<br />
<br />
<br />
<br />
<br />
<br />
*15: Here is the schema used for the animation, it serves just as a landmark (it is available in 2 formats, SVG, SIFZ,) available in the ZIP.<br />
<br />
To see the next character you have to uncheck the other numbers to see the "next" step.<br />
<br />
I recall that this "schema" is just an "aid" to understand when to place the key images.<br />
<br />
The variants that will make your walking will be different will be "walking size", and placing your legs.<br />
<br />
So you will make a character with a walk, short, long, or running.<br />
<br />
To know: the characters 5,6,7,8 are the same images as the 4th, the limbs have only been reversing the other way.<br />
<br />
{{l|Image:Walking-technique15schema.gif}}<br />
<br />
<br />
<br />
<br />
<br />
All keyframes, are represented by a number there are "8" in all.<br />
<br />
{{l|Image:Walking-technique16.png}}<br />
<br />
They must all be placed with ''' "24f" and in interpolation mode "linear"'''(it is at the end of the animation that you will change the time, to accelerate the walk.<br />
<br />
<br />
[[File:Walking-technique-animation.gif|frame|none|Slow animation that decomposes walking. ]] <br />
<br />
The final result depends only on the schema (with the numbers on each head), you must modify it to have a result that will suit you.<br />
With a slow time of 24f you will immediately see the errors.<br />
<br />
Here you see a walk with a time of 10,18,6,16f to find the time to use on the following keyframe a simple trick has been used, for 4 keyframes, you delete 1 image, and search for the time of the missing image.<br />
<br />
Example:<br />
A B C D<br />
<br />
You delete the keyframe: "B" you go to image A and you advance the time from 1f to 1f from A to C, there will be a time when your missing image will be the same as B.<br />
Then you report the result on your animation, and check that the result is smooth.<br />
Once it is fluid you can really accelerate the walk by dividing your numbers by 2 or accelerate by 70% the result.<br />
<br />
<br />
Here is '''list of tricks''' used during the animation in synfig (with these helps it is easier to succeed):<br />
<br />
*Onion (to see the previous keys in opacity).<br />
*{{Shortcut|shift}} + left mouse click, and SLIDE the group with green handle (to slide on a line).<br />
*Use a rectangle to have the "walking size"(+2 lines at the edge for precision).<br />
*Drawing sketch (to have the legs and arms exactly the same, and report it further).<br />
*If your work is vectorial, as in this chapter, preferably use the quality preview "1,00", taille 100%, avoid working directly with a canvas of a size UHD (too large), <br />
with a quality of "1.00" and 100% in size you will see the final result, as will appear, in a "video".<br />
*When the 8 steps of the "schema" are all finished use the "duplicate" to copy the already made drawings. (See image below).<br />
<br />
<br />
<br />
To make a duplicate [http://wiki.synfig.org/Keyframe#Duplicate_a_keyframe link]:<br />
*1 I select the keyframe.<br />
*2 I select the layer to duplicate.<br />
*3 I click on the waypoint.<br />
*4 I duplicate.<br />
<br />
[[File:Walking-technique-duplicate.png|frame|none|Duplicate an image. ]]<br />
<br />
<br />
Here are the videos that were used to realize this tutorial:<br />
<br />
[https://youtu.be/2y6aVz0Acx0 ALAN BECKER - Animating Walk Cycles]<br />
<br />
[https://youtu.be/sERBnFpXezM STREAM Morevna Episode 3 Making of Shot 24]<br />
<br />
== Important == <br />
<br />
*The shoes have not been bent to make this tutorial easy to understand, the easiest technique for folding shoes is to use the vertices (image 10), but you can do differently as on the video link n°2.<br />
<br />
*We advise you to read this video at least once to understand the process of creation for the walk.<br />
<br />
*We remind you one last time that we must place the keys in '''"linear"''' interpolation mode.<br />
<br />
<br />
== Project File ==<br />
<br />
The zip file containing the parts of this tutorial can be found here: [[Media:Walking-technique-archive.zip|Walking-technique-archive.zip]]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Walk_Cycle/fr&diff=23209Doc:Walk Cycle/fr2017-05-08T10:39:03Z<p>Synme: spelling correction</p>
<hr />
<div><!-- Page info --><br />
{{Title|Cycle de Marche}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{Category|ImportArt}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
= Le Fichier de Liste =<br />
Un des aspects les moins évidents de Synfig est contenu dans la calque d'importation des images. En plus d'être en mesure d'importer des fichiers d'image de base, il accepte aussi un fichier "lst". Cette liste de fichiers est tout simplement un fichier de texte qui se compose d'un taux de cadres, suivi d'une liste d'images à afficher. (Si le nombre d'images par seconde n'est pas fourni, il utilise un taux de défaut de 15 images par seconde (FPS).)<br />
<br />
Un exemple, fourni par Vorian Studios, prend quatre images fixes à partir d'un personnage à différentes étapes d'un cycle de marche. Ces images sont affichées avec 4 images par seconde pour donner une séquence répétée qui montre un homme qui marche.<br />
<br />
Voici les images<br> <br />
<gallery widths="104px" heights="216px"><br />
Image:frame_01.jpg|Frame 1<br />
Image:frame_02.jpg|Frame 2<br />
Image:frame_03.jpg|Frame 3<br />
Image:frame_04.jpg|Frame 4<br />
</gallery><br />
<br />
Et voici le début du fichier "lst". <br><br />
<code><br />
FPS 4<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
...</code><br><br />
<br />
== Création d'un Cycle de Marche ==<br />
Voyons comment utiliser ces images pour créer un cycle complet de marche pour un dessin dans Synfig.<br />
<br />
Commencer avec une nouvelle toile (Canvas) et ajouter une durée de quelques secondes à raison de 24 images par seconde (par défaut).Sur la toile, sélectionner le triangle dans le coin supérieur à gauche -> Calques-> Nouveau calque, d'autres, l'importation d'image.<br />
<br />
Cela crée un nouveau calque de l'image importée, mais rien ne s'affiche tant que vous n'avez pas sélectionné le nom du fichier. Aller à la boîte de Paramètres et faites défiler jusqu'à Nom du fichier. Là, vous pouvez naviguer vers le fichier. "lst" et sélectionner Ouvrir. Vous devriez maintenant voir la première image de la liste. Déplacez-vous dans le temps. Cela affichera les images successives de la liste chaque six cadres. Vous pouvez prévisualiser ou rendre tel qu'il est, et obtenir une animation avec une plage d'images trés faible.<br />
<br />
Cependant, le résultat n'est pas très lisse, et les images ne sont pas très flexibles. (Les images peuvent se déplacer, pivoter et s'étirer mais pas les éléments dans les images). Pour avoir un dessin totalement modifiable il faut dessiner par dessus avec Synfig, des éléments tels que des lignes tracées avec l'outil «dessin».<br />
<br />
Je travaille avec une tablette graphique, de sorte que la meilleure solution pour moi est d'utiliser {{l|Draw Tool|l'outil de dessin}}. Retourner au point 0f, sélectionner l'outil de dessin et dessiner sur le personnage. J'ai trouvé plus facile de diviser l'image en plusieurs parties (tête, bras gauche, bras droit, tronc, jambe gauche, jambe droite). Si le formulaire ne vous va pas bien, allez dans le menu Calque et décochez la case de la région. Cela vous permet de voir l'image ci-dessous pendant que vous faites glisser les poignées pour corriger la ligne.<br />
<br />
{{l|Image:Synfig_walk.png|800x324px}}<br />
<br />
Une fois le dessin à 0f fini, aller dans la ligne du temps à 6f. Au lieu d'avoir à les dessiner à nouveau, cette fois nous allons prendre des éléments existants et nous allons simplement les repositionnér pour correspondre à l'image. Encore une fois, si vous désactivez les couches d'une région on peut voir l'image d'édition. Utilisez les outils de rotation et de translation pour déplacer les parties du corps, en adaptant les poignées pour le réglage plus fin (ne pas oublier le changement de "Edit Mode Animation" comme il est décrit dans {{L|Doc:Animation Basics}} ).<br />
<br />
Répéter pour les points du temps 12f et 18f, puis éteindre le calque de l'image importée (décochez la case dans la fenêtre de calques). Maintenant, même si nous n'avons que quatre cadres, grâce à Synfig, nous avons 24 images d'un homme qui marche doucement. Ajouter un calque avec un boucle de temps de 1 seconde et l'homme gardera le rythme sur le terrain pour la durée de votre animation.<br />
<br />
<br />
{{l|Image:walk.gif}}<br />
<br />
Ajouter un calque de déplacement permettra que l'image se déplace d'un endroit à un autre sur la toile.(or moonwalk backwards if you're so inclined.)<br />
<br />
{{l|media:walk.zip|Voici le fichier comprimé}} avec le list file, les 4 images fixes, et le fichier de Synfig fini. Décompressez dans le même place et ouvrez le fichier newwalk.sif avec Synfig.<br />
<br />
<br />
= Personnage de marche, en mouvement (explication complète). =<br />
<br />
Avant de réussir à faire marcher un personnage, il faut connaître les bases<br />
«à savoir»:<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Tutorial/fr Bases de l'Animation par Ossatures] (Pour que vos membres puissent tourner à 360° sans aucun bug).<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Morphing/fr Bases du Morphing par Ossatures] (Pour pouvoir créer un "squelette de marche").<br />
<br />
<br />
*1: Dessiner le personnage dans votre programme de dessin.<br />
*2: Rajouter des contours<br />
<br />
{{l|Image:Walking-technique123.png}}<br />
<br />
*3: Nous bougeons les membres, au meilleur emplacement pour que le "bras" se décompose en:<br />
<br />
Bras: bras, avant-bras, main.<br />
<br />
Jambe: cuisse, mollet, chaussure.<br />
<br />
<br />
<br />
<br />
*4: Une fois que les membres sont à un emplacement dit naturel, (on évite les angles à 90°, car poser des croix de visée sur des membres tordues est plus difficile).<br />
<br />
Quand ils sont presque droits c'est une opération plus simple.<br />
<br />
Il faut décomposer le membre pour pouvoir poser nos "croix de visée".<br />
<br />
{{l|Image:Walking-technique456.png}}<br />
<br />
*5: Nous remplaçons, une main avec le poing fermé, un t-shirt plus large pour que les jambes puissent courir, les chaussures, par quelque chose de plus simple.<br />
<br />
Car il sera plus simple dans l'animation d'avoir des membres basiques.<br />
<br />
<br />
*7: Une fois que tous les membres sont décomposés, et que les croix de visée sont placées.<br />
<br />
{{l|Image:Walking-technique789.png}}<br />
<br />
*8: Ici ce sont des croix simples qui ont été posées, pour pouvoir tourner les membres, de façon rapide.<br />
<br />
(Elles n'ont pas suivi la procédure "croix de visée").<br />
<br />
*9: Si votre programme de dessin, vous permet de faire des rotations à partir d'un point fixe, faites un maximum d'essai, en tournant dans tous les sens votre bonhomme pour vous assurer qu'il n'y a pas de "bug". (test en mouvement).<br />
<br />
Ensuite vous importerais votre dessin final dans "synfig studio".<br />
<br />
<br />
*10: Pour rendre une marche plus réelle, nous pouvons plier la chaussure, le contour orange est un guide pour remettre facilement la chaussure droite.<br />
<br />
Les croix représentent les vertices:<br />
* Les croix vertes ne bougent pas. <br />
* La croix orange a été descendue à la verticale jusqu'à toucher le sol.<br />
* La croix bleue a été bougée sur la droite et les poignées bougées.<br />
<br />
{{l|Image:Walking-technique1011.png}}<br />
<br />
*11: Pour une question de simplicité lors de la création des croix de visée.<br />
<br />
-Le bras gauche est identique au bras droit.<br />
<br />
-La jambe gauche est identique à la jambe droite.<br />
<br />
Les choses qui sont uniques: l'épaule gauche et l'épaule droite (qui sont en rouge) sont différentes ainsi que l'emplacement des croix rapide.<br />
<br />
<br />
<br />
*12: La ligne du haut, est un repère pour que le personnage puisse baisser ou monter la tête.<br />
<br />
Le rectangle violet est le repère qui sera utilisé pour connaitre la "grandeur de marche" il est précisément à placer derrière la chaussure arrière et derrière la chaussure avant, les 2 traits rouges sont des lignes pour être plus précis.<br />
<br />
Vous pouvez importer votre dessin dans "synfig studio" et placer le squelette sur votre personnage.<br />
<br />
{{l|Image:Walking-technique1213.png}}<br />
<br />
*13: Astuce simple pour l'animation, et travaillez avec plus de détails, mettez une opacité (comme sur cette image) vous travaillerez plus facilement.<br />
<br />
<br />
*14: Une fois votre personnage avec un "squelette de marche", placer votre personnage comme sur le schema "personnage 1".<br />
<br />
Ensuite vous déplacerais votre "rectangle violet" pour que votre marche soit identique à "grandeur de marche".<br />
<br />
{{l|Image:Walking-technique14.png}}<br />
<br />
<br />
<br />
<br />
<br />
*15: Voici le schéma utiliser pour l'animation, il sert juste de repère (il est disponible en 2 formats, SVG, SIFZ,) disponible dans le ZIP.<br />
<br />
Pour voir le personnage suivant il faut décocher les autres numéros pour voir "l'étape" suivante.<br />
<br />
Je rappelle que ce "schéma" est juste une "aide" pour comprendre à quel moment il faut placer les images clés.<br />
<br />
Les variantes qui feront que votre marche sera différente sera "la grandeur de marche", et le placement de vos jambes.<br />
<br />
Soit vous ferez un personnage avec une marche, courte, longue, ou en courant.<br />
<br />
À savoir: les personnages 5,6,7,8 sont les mêmes images que les 4ère, les membres ont seulement été inverser dans l'autre sens.<br />
<br />
{{l|Image:Walking-technique15schema.gif}}<br />
<br />
<br />
<br />
<br />
<br />
Toutes les images clés, sont représentées par un numéro il y en a "8" en tout.<br />
<br />
{{l|Image:Walking-technique16.png}}<br />
<br />
Elles doivent toutes être placer avec ''' "24f" et en mode interpolation "linéaire"'''(c'est à la fin de l'animation<br />
que vous changerez le timing, pour accélérer la marche.<br />
<br />
<br />
[[File:Walking-technique-animation.gif|frame|none|Animation lente qui décompose la marche. ]] <br />
<br />
Le résultat final dépend uniquement du schéma (avec les n° sur chaque tête), c'est lui que vous devez modifier pour avoir un résultat qui vous conviendra.<br />
Avec un timing lent de 24f vous verrez tout de suite les erreurs.<br />
<br />
Ici vous voyez une marche avec un timing de 10,18,6,16f pour trouver le temps à utiliser sur l'image clé suivante une astuce simple<br />
a été utiliser, pour 4 images clés, vous supprimer 1 image, et chercher le temps de l'image manquante.<br />
<br />
Exemple:<br />
A B C D<br />
<br />
Vous supprimer l'image clé: "B" vous allez sur l'image A et vous avancer le temps de 1f en 1f de A jusqu'à C, il y aura un moment ou votre image manquante sera identique à B.<br />
Ensuite vous reportez le résultat sur votre animation, et vérifier que le résultat est fluide.<br />
Une fois que c'est fluide vous pouvez vraiment accélérer la marche en divisant par 2 vos chiffres ou accélérer de 70% le résultat.<br />
<br />
<br />
Voici la '''liste des astuces''' a utilisé lors de l'animation dans synfig (avec ces aides il est plus facile d'y arriver):<br />
<br />
*Oignon (pour voir les clés précédentes en opacité).<br />
*{{Shortcut|shift}} + clic gauche souris, et faire GLISSER le groupe avec poignée verte (pour faire glisser sur une ligne).<br />
*Utiliser un rectangle pour avoir la "grandeur de marche"(+2 lignes au bord pour la précision).<br />
*Dessin d'esquisse (pour avoir les jambes et bras exactement identique, et la reporter plus loin).<br />
*Si votre travail est vectoriel, comme dans ce chapitre, utiliser de préférence l'aperçu qualité "1,00", taille 100%, éviter de travailler directement avec un canevas d'une taille UHD (trop grande), <br />
avec une qualité de "1,00" et 100% en taille vous verrez le résultat final, tel qui apparaîtra, dans une "vidéo".<br />
*Quand les 8 étapes du "schéma" sont toutes finies utiliser le "dupliquer" pour reporter les dessins déjà faits. (voir l'image ci-dessous).<br />
<br />
<br />
<br />
Pour faire un dupliquer [http://wiki.synfig.org/Keyframe/fr#Dupliquer_une_image_cl.C3.A9 lien]:<br />
*1 Je sélectionne l'image clé.<br />
*2 Je sélectionne le calque à dupliquer.<br />
*3 Je clique sur le point de passage.<br />
*4 Je duplique.<br />
<br />
[[File:Walking-technique-duplicate.png|frame|none|Dupliquer une image. ]]<br />
<br />
<br />
Voici les vidéos qui ont été utilisés pour réaliser ce tutoriel:<br />
<br />
[https://youtu.be/2y6aVz0Acx0 ALAN BECKER - Animating Walk Cycles]<br />
<br />
[https://youtu.be/sERBnFpXezM STREAM Morevna Episode 3 Making of Shot 24]<br />
<br />
== Important == <br />
<br />
*Les chaussures n'ont pas été pliés pour rendre ce tutoriel facile à comprendre, la technique la plus facile pour plié les chaussures étant d'utiliser les vertices (image 10), mais vous pouvez faire différemment comme sur la vidéo en lien n°2.<br />
<br />
*Nous vous conseillons d'ailleurs de lire cette vidéo au moins 1 fois pour comprendre le procédé de création de la marche.<br />
<br />
*Nous vous rappelons une dernière fois qu'il faut placer les clés en mode interpolation '''"linéaire"'''.<br />
<br />
<br />
== Fichier Projet ==<br />
<br />
Le fichier zip contenant les parties de ce tutoriel peut être trouvé ici: [[Media:Walking-technique-archive.zip|Walking-technique-archive.zip]]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Walk_Cycle/fr&diff=23201Doc:Walk Cycle/fr2017-05-08T07:46:36Z<p>Synme: spelling correction</p>
<hr />
<div><!-- Page info --><br />
{{Title|Cycle de Marche}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{Category|ImportArt}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
= Le Fichier de Liste =<br />
Un des aspects les moins évidents de Synfig est contenu dans la calque d'importation des images. En plus d'être en mesure d'importer des fichiers d'image de base, il accepte aussi un fichier "lst". Cette liste de fichiers est tout simplement un fichier de texte qui se compose d'un taux de cadres, suivi d'une liste d'images à afficher. (Si le nombre d'images par seconde n'est pas fourni, il utilise un taux de défaut de 15 images par seconde (FPS).)<br />
<br />
Un exemple, fourni par Vorian Studios, prend quatre images fixes à partir d'un personnage à différentes étapes d'un cycle de marche. Ces images sont affichées avec 4 images par seconde pour donner une séquence répétée qui montre un homme qui marche.<br />
<br />
Voici les images<br> <br />
<gallery widths="104px" heights="216px"><br />
Image:frame_01.jpg|Frame 1<br />
Image:frame_02.jpg|Frame 2<br />
Image:frame_03.jpg|Frame 3<br />
Image:frame_04.jpg|Frame 4<br />
</gallery><br />
<br />
Et voici le début du fichier "lst". <br><br />
<code><br />
FPS 4<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
...</code><br><br />
<br />
== Création d'un Cycle de Marche ==<br />
Voyons comment utiliser ces images pour créer un cycle complet de marche pour un dessin dans Synfig.<br />
<br />
Commencer avec une nouvelle toile (Canvas) et ajouter une durée de quelques secondes à raison de 24 images par seconde (par défaut).Sur la toile, sélectionner le triangle dans le coin supérieur à gauche -> Calques-> Nouveau calque, d'autres, l'importation d'image.<br />
<br />
Cela crée un nouveau calque de l'image importée, mais rien ne s'affiche tant que vous n'avez pas sélectionné le nom du fichier. Aller à la boîte de Paramètres et faites défiler jusqu'à Nom du fichier. Là, vous pouvez naviguer vers le fichier. "lst" et sélectionner Ouvrir. Vous devriez maintenant voir la première image de la liste. Déplacez-vous dans le temps. Cela affichera les images successives de la liste chaque six cadres. Vous pouvez prévisualiser ou rendre tel qu'il est, et obtenir une animation avec une plage d'images trés faible.<br />
<br />
Cependant, le résultat n'est pas très lisse, et les images ne sont pas très flexibles. (Les images peuvent se déplacer, pivoter et s'étirer mais pas les éléments dans les images). Pour avoir un dessin totalement modifiable il faut dessiner par dessus avec Synfig, des éléments tels que des lignes tracées avec l'outil «dessin».<br />
<br />
Je travaille avec une tablette graphique, de sorte que la meilleure solution pour moi est d'utiliser {{l|Draw Tool|l'outil de dessin}}. Retourner au point 0f, sélectionner l'outil de dessin et dessiner sur le personnage. J'ai trouvé plus facile de diviser l'image en plusieurs parties (tête, bras gauche, bras droit, tronc, jambe gauche, jambe droite). Si le formulaire ne vous va pas bien, allez dans le menu Calque et décochez la case de la région. Cela vous permet de voir l'image ci-dessous pendant que vous faites glisser les poignées pour corriger la ligne.<br />
<br />
{{l|Image:Synfig_walk.png|800x324px}}<br />
<br />
Une fois le dessin à 0f fini, aller dans la ligne du temps à 6f. Au lieu d'avoir à les dessiner à nouveau, cette fois nous allons prendre des éléments existants et nous allons simplement les repositionnér pour correspondre à l'image. Encore une fois, si vous désactivez les couches d'une région on peut voir l'image d'édition. Utilisez les outils de rotation et de translation pour déplacer les parties du corps, en adaptant les poignées pour le réglage plus fin (ne pas oublier le changement de "Edit Mode Animation" comme il est décrit dans {{L|Doc:Animation Basics}} ).<br />
<br />
Répéter pour les points du temps 12f et 18f, puis éteindre le calque de l'image importée (décochez la case dans la fenêtre de calques). Maintenant, même si nous n'avons que quatre cadres, grâce à Synfig, nous avons 24 images d'un homme qui marche doucement. Ajouter un calque avec un boucle de temps de 1 seconde et l'homme gardera le rythme sur le terrain pour la durée de votre animation.<br />
<br />
<br />
{{l|Image:walk.gif}}<br />
<br />
Ajouter un calque de déplacement permettra que l'image se déplace d'un endroit à un autre sur la toile.(or moonwalk backwards if you're so inclined.)<br />
<br />
{{l|media:walk.zip|Voici le fichier comprimé}} avec le list file, les 4 images fixes, et le fichier de Synfig fini. Décompressez dans le même place et ouvrez le fichier newwalk.sif avec Synfig.<br />
<br />
<br />
= Personnage de marche, en mouvement (explication complète). =<br />
<br />
Avant de réussir à faire marcher un personnage, il faut connaître les bases<br />
«à savoir»:<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Tutorial/fr Bases de l'Animation par Ossatures] (Pour que vos membres puissent tourner à 360° sans aucun bug).<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Morphing/fr Bases du Morphing par Ossatures] (Pour pouvoir créer un "squelette de marche").<br />
<br />
<br />
*1: Dessiner le personnage dans votre programme de dessin.<br />
*2: Rajouter des contours<br />
<br />
{{l|Image:Walking-technique123.png}}<br />
<br />
*3: Nous bougeons les membres, au meilleur emplacement pour que le "bras" se décompose en:<br />
<br />
Bras: bras, avant-bras, main.<br />
<br />
Jambe: cuisse, mollet, chaussure.<br />
<br />
<br />
<br />
<br />
*4: Une fois que les membres sont à un emplacement dit naturel, (on évite les angles à 90°, car poser des croix de visée sur des membres tordues est plus difficile).<br />
<br />
Quand ils sont presque droits c'est une opération plus simple.<br />
<br />
Il faut décomposer le membre pour pouvoir poser nos "croix de visée".<br />
<br />
{{l|Image:Walking-technique456.png}}<br />
<br />
*5: Nous remplaçons, une main avec le poing fermé, un t-shirt plus large pour que les jambes puissent courir, les chaussures, par quelque chose de plus simple.<br />
<br />
Car il sera plus simple dans l'animation d'avoir des membres basiques.<br />
<br />
<br />
*7: Une fois que tous les membres sont décomposés, et que les croix de visée sont placées.<br />
<br />
{{l|Image:Walking-technique789.png}}<br />
<br />
*8: Ici ce sont des croix simples qui ont été posées, pour pouvoir tourner les membres, de façon rapide.<br />
<br />
(Elles n'ont pas suivi la procédure "croix de visée").<br />
<br />
*9: Si votre programme de dessin, vous permet de faire des rotations à partir d'un point fixe, faites un maximum d'essai, en tournant dans tous les sens votre bonhomme pour vous assurer qu'il n'y a pas de "bug". (test en mouvement).<br />
<br />
Ensuite vous importerais votre dessin final dans "synfig studio".<br />
<br />
<br />
*10: Pour rendre une marche plus réelle, nous pouvons plier la chaussure, le contour orange est un guide pour remettre facilement la chaussure droite.<br />
<br />
Les croix représentent les vertices:<br />
* Les croix vertes ne bougent pas. <br />
* La croix orange a été descendue à la verticale jusqu'à toucher le sol.<br />
* La croix bleue a été bougée sur la droite et les poignées bougées.<br />
<br />
{{l|Image:Walking-technique1011.png}}<br />
<br />
*11: Pour une question de simplicité lors de la création des croix de visée.<br />
<br />
-Le bras gauche est identique au bras droit.<br />
<br />
-La jambe gauche est identique à la jambe droite.<br />
<br />
Les choses qui sont uniques: l'épaule gauche et l'épaule droite (qui sont en rouge) sont différentes ainsi que l'emplacement des croix rapide.<br />
<br />
<br />
<br />
*12: La ligne du haut, est un repère pour que le personnage puisse baisser ou monter la tête.<br />
<br />
Le rectangle violet est le repère qui sera utilisé pour connaitre la "grandeur de marche" il est précisément à placer derrière la chaussure arrière et derrière la chaussure avant, les 2 traits rouges sont des lignes pour être plus précis.<br />
<br />
Vous pouvez importer votre dessin dans "synfig studio" et placer le squelette sur votre personnage.<br />
<br />
{{l|Image:Walking-technique1213.png}}<br />
<br />
*13: Astuce simple pour l'animation, et travaillez avec plus de détails, mettez une opacité (comme sur cette image) vous travaillerez plus facilement.<br />
<br />
<br />
*14: Une fois votre personnage avec un "squelette de marche", placer votre personnage comme sur le schema "personnage 1".<br />
<br />
Ensuite vous déplacerais votre "rectangle violet" pour que votre marche soit identique à "grandeur de marche".<br />
<br />
{{l|Image:Walking-technique14.png}}<br />
<br />
<br />
<br />
<br />
<br />
*15: Voici le schéma utiliser pour l'animation, il sert juste de repère (il est disponible en 2 formats, SVG, SIFZ,) disponible dans le ZIP.<br />
<br />
Pour voir le personnage suivant il faut décocher les autres numéros pour voir "l'étape" suivante.<br />
<br />
Je rappelle que ce "schéma" est juste une "aide" pour comprendre à quel moment il faut placer les images clés.<br />
<br />
Les variantes qui feront que votre marche sera différente sera "la grandeur de marche", et le placement de vos jambes.<br />
<br />
Soit vous ferez un personnage avec une marche, courte, longue, ou en courant.<br />
<br />
À savoir: les personnages 5,6,7,8 sont les mêmes images que les 4ère, les membres ont seulement été inverser dans l'autre sens.<br />
<br />
{{l|Image:Walking-technique15schema.gif}}<br />
<br />
<br />
<br />
<br />
<br />
Toutes les images clés, sont représentées par un numéro il y en a "8" en tout.<br />
<br />
{{l|Image:Walking-technique16.png}}<br />
<br />
Elles doivent toutes être placer avec ''' "24f" et en mode interpolation "linéaire"'''(c'est à la fin de l'animation<br />
que vous changerez le timing, pour accélérer la marche.<br />
<br />
<br />
[[File:Walking-technique-animation.gif|frame|none|Animation lente qui décompose la marche. ]] <br />
<br />
Le résultat final dépend uniquement du schéma (avec les n° sur chaque tête), c'est lui que vous devez modifier pour avoir un résultat qui vous conviendra.<br />
Avec un timing lent de 24f vous verrez tout de suite les erreurs.<br />
<br />
Ici vous voyez une marche avec un timing de 10,18,6,16f pour trouver le temps à utiliser sur l'image clé suivante une astuce simple<br />
a été utiliser, pour 4 images clés, vous supprimer 1 image, et chercher le temps de l'image manquante.<br />
<br />
Exemple:<br />
A B C D<br />
<br />
Vous supprimer l'image clé: "B" vous allez sur l'image A et vous avancer le temps de 1f en 1f de A jusqu'à C, il y aura un moment ou votre image manquante sera identique à B.<br />
Ensuite vous reportez le résultat sur votre animation, et vérifier que le résultat est fluide.<br />
Une fois que c'est fluide vous pouvez vraiment accélérer la marcher en divisant par 2 vos chiffres ou accélérer de 70% le résultat.<br />
<br />
<br />
Voici la '''liste des astuces''' a utilisé lors de l'animation dans synfig (avec ces aides il est plus facile d'y arriver):<br />
<br />
*Oignon (pour voir les clés précédentes en opacité).<br />
*{{Shortcut|shift}} + clic gauche souris, et faire GLISSER le groupe avec poignée verte (pour faire glisser sur une ligne).<br />
*Utiliser un rectangle pour avoir la "grandeur de marche"(+2 lignes au bord pour la précision).<br />
*Dessin d'esquisse (pour avoir les jambes et bras exactement identique, et la reporter plus loin).<br />
*Si votre travail est vectoriel, comme dans ce chapitre, utiliser de préférence l'aperçu qualité "1,00", taille 100%, éviter de travailler directement avec un canevas d'une taille UHD (trop grande), <br />
avec une qualité de "1,00" et 100% en taille vous verrez le résultat final, tel qui apparaîtra, dans une "vidéo".<br />
*Quand les 8 étapes du "schéma" sont toutes finies utiliser le "dupliquer" pour reporter les dessins déjà faits. (voir l'image ci-dessous).<br />
<br />
<br />
<br />
Pour faire un dupliquer [http://wiki.synfig.org/Keyframe/fr#Dupliquer_une_image_cl.C3.A9 lien]:<br />
*1 Je sélectionne l'image clé.<br />
*2 Je sélectionne le calque à dupliquer.<br />
*3 Je clique sur le point de passage.<br />
*4 Je duplique.<br />
<br />
[[File:Walking-technique-duplicate.png|frame|none|Dupliquer une image. ]]<br />
<br />
<br />
Voici les vidéos qui ont été utilisés pour réaliser ce tutoriel:<br />
<br />
[https://youtu.be/2y6aVz0Acx0 ALAN BECKER - Animating Walk Cycles]<br />
<br />
[https://youtu.be/sERBnFpXezM STREAM Morevna Episode 3 Making of Shot 24]<br />
<br />
== Important == <br />
<br />
*Les chaussures n'ont pas été pliés pour rendre ce tutoriel facile à comprendre, la technique la plus facile pour plié les chaussures étant d'utiliser les vertices (image 10), mais vous pouvez faire différemment comme sur la vidéo en lien n°2.<br />
<br />
*Nous vous conseillons d'ailleurs de lire cette vidéo au moins 1 fois pour comprendre le procédé de création de la marche.<br />
<br />
*Nous vous rappelons une dernière fois qu'il faut placer les clés en mode interpolation '''"linéaire"'''.<br />
<br />
<br />
== Fichier Projet ==<br />
<br />
Le fichier zip contenant les parties de ce tutoriel peut être trouvé ici: [[Media:Walking-technique-archive.zip|Walking-technique-archive.zip]]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc_talk:Walk_Cycle/fr&diff=23200Doc talk:Walk Cycle/fr2017-05-08T06:43:23Z<p>Synme: Blanked the page</p>
<hr />
<div></div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Walk_Cycle&diff=23199Doc:Walk Cycle2017-05-08T06:15:15Z<p>Synme: Formatting titles</p>
<hr />
<div><!-- Page info --><br />
{{Title|Walk Cycle}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{Category|ImportArt}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Somes of the screenshots needs to be updated with 0.64.0<br />
<br />
= The List File =<br />
One of the less obvious features of Synfig is buried in the Import Image layer. In addition to being able to import some basic still image file types, it will also accept a [[Doc:ListImporter|'lst' file]]. This list file is simply a text file consisting of a framerate followed by a list of images to display. (If no framerate is supplied a default rate of 15 Frames per Second (FPS) is used.)<br />
<br />
An example, provided by Voria Studios, takes 4 still images of a character in various stages of a walk cycle. These images are shown at 4 FPS to give a sequence that when repeated, show a man walking. <br />
<br />
Here are the images<br> <br />
<gallery widths="104px" heights="216px"><br />
Image:frame_01.jpg|Frame 1<br />
Image:frame_02.jpg|Frame 2<br />
Image:frame_03.jpg|Frame 3<br />
Image:frame_04.jpg|Frame 4<br />
</gallery><br />
<br />
And here is the beginning of the 'lst' file. <br><br />
<code><br />
FPS 4<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
...</code><br><br />
<br />
== Constructing a Walk cycle ==<br />
Let's take a look at how we can use these images to create a complete walk cycle for a character in Synfig. <br />
<br />
Start with a new canvas and add a timeline of several seconds with the default framerate of 24 FPS. On the canvas, select the Caret > Layer, New layer, Other, Import Image.<br />
<br />
This creates a new Import Image layer, but nothing will show up until the filename is selected. Go to the Parameters Panel and scroll down to Filename. There you can navigate to the '.lst' file and select open. <br />
Now you should see the first image in the list. Moving forward along the timeline will show successive images from the list every 6 frames. You can preview or render these as is and get a low frame rate animation. <br />
<br />
But the result doesn't look very smooth, and the images are not very flexible. (The images can be translated, rotated and stretched, but no elements within the images can be changed.) To make a fully editable character we need to trace over it with Synfig elements such as Splines. <br />
<br />
I work with a drawing tablet, so the easiest solution for me is to use the {{l|Draw Tool}}. Move back to frame 0, select the draw tool and trace over the character. I find it easiest to break the character down into several regions (Head, Left Arm, Right Arm, Torso, Left Leg, Right Leg). As a helpful tip, if the shape didn't come out quite right, go to the layer menu and uncheck the region checkbox - this will allow you to see the image below as you drag the handles around to correct your line. <br />
<br />
{{l|Image:Synfig_walk.png|800x324px}}<br />
<br />
Once you've finished Frame 0, move along the timeframe to Frame 6. Instead of tracing, this time we're going to take the existing elements and reposition them to match the image. Again, turning off the region layers will allow you to see the image below as you edit them. Use the rotate and translate tools to reposition the body parts, adjusting the line handles for fine tuning. [Don't forget to switch to "Animate Editing Mode" as explained in {{L|Doc:Animation Basics}}.]<br />
<br />
Repeat for Frames 12 & 18, then you can turn off the Import Image layer (uncheck the checkbox in the layer menu). Now, even though we've only drawn 4 keyframes, by the power of Synfig, we can render a smooth 24 frames of man walking. Add a 1 second timeloop layer on top, and the man will pace on the spot for the length of your animation. <br />
<br />
{{l|Image:walk.gif}}<br />
<br />
Adding Translation layer will enable your character to walk from one side of the canvas to the other (or moonwalk backwards if you're so inclined.)<br />
<br />
{{l|media:walk.zip|Here is a zipfile}} with the list file, 4 still images, and the finished Synfig file. Unzip them in the same directory and open the newwalk.sif file with synfig.<br />
<br />
= Method 2 =<br />
<br />
Let's start by drawing the pictures for our animation, here I did 4 poses, I have then extracted them in PNG that looks like:<br />
<br />
<gallery widths="170px" heights="300px"><br />
Image:Walker01.png<br />
Image:Walker02.png<br />
Image:Walker03.png<br />
Image:Walker04.png<br />
</gallery><br />
<br />
Then we add a color at the edges in order to trace our boy in Synfig, same thing I extracted them in PNG that looks like: <br />
<gallery widths="170px" heights="300px"><br />
Image:Walker05.png<br />
Image:Walker06.png<br />
Image:Walker07.png<br />
Image:Walker08a.png<br />
</gallery><br />
<br />
It remains more to import 4 designs with our "blue outline" in Synfig and choose the same size of "resizing"<br />
(settings > Transformations > scale) for each imported image, then we can add our boy file "walker.sif" to the animated.<br />
The boy layers must be laid on the image1 so resize and move until it is just.<br />
I put a (quantity) opacity of 0.5 on the image1 to see be sure of the result.<br />
I only check the image: blue-layer01.png and the group "walker".<br />
<br />
<br />
[[File:Walker08b.png|frame|none|I place the layer in this order]]<br />
<br />
<br />
The 1st image we see drawing import with the blue outlines, the layers for animation are right.<br />
<br />
The 2nd image we see the boy put in the same location as the drawing.<br />
<br />
[[File:Walker09.png]][[File:Walker10.png]]<br />
<br />
<br />
We can animate our Walker, took me a total of 5 s for animation<br />
uncheck "blue-layer01.png" and check "blue-layer02.png" and to see her add is a "quantity" of 0.5 (for opacity).<br />
<br />
<br />
[[File:Walker11.png|frame|none|We see layers that have not moved, and drawing with the blue outlines. ]] <br />
<br />
<br />
There is more to animate our boy, add a keyframe I put "24f" , <br />
<br />
[[File:Walker12.png|frame|none|select "left arm" the outline + region.]]<br />
<br />
<br />
<br />
Move each "vertex" 1 by 1 as here.<br />
<br />
[[File:Walker13.png|frame|none|and move the "handles".]]<br />
<br />
<br />
Do the same for each vertex until finished and be identical to the image, then we can start the image3<br />
check the image "blue-layer03.png" and uncheck the "blue-layer02.png" add a "keyframe" , make the same thing so it looks like our image.<br />
<br />
<br />
Do the same to the last image "blue-layer04.png", once the layers are identical to our image "blue-layer04.png" it remains more to duplicate the image key corresponding to "blue-layer01.png" see this tutorial [http://wiki.synfig.org/Keyframe#Duplicate_a_keyframe]<br />
<br />
or like this:<br />
<br />
I now need to create a new keyframe which will exactly match the image "blue-layer01.png" What will a loop between blue-layer04 and blue-layer01 and to have our animation streaming.<br />
<br />
<br />
*1 I select the keyframe.<br />
*2 I select the layer you want to duplicate.<br />
*3 I click about to pass.<br />
*4 I duplicate.<br />
[[File:Walker13b.png|frame|none|duplicate an image".]]<br />
<br />
<br />
Now the image will be virtually a clone of our reference blue-layer01, feel free to make a "jump" between the keyframe 1 and "the last keyframe" so that it is exactly the same, and that walking is fluid.<br />
<br />
<br />
Once you have the same result it is to reduce the size of the "length" of the keyframes, and export the animation<br />
I put "7f", which gives a quick walk.<br />
<br />
<br />
[[File:Walker14-animation.gif|frame|none|Final result]]<br />
<br />
== Files tutorials ==<br />
Files sif containing parts of this tutorial can be found here: [[Media:Walker14.zip|Walker14.zip]]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Walk_Cycle/fr&diff=23198Doc:Walk Cycle/fr2017-05-08T06:12:21Z<p>Synme: Formatting titles</p>
<hr />
<div><!-- Page info --><br />
{{Title|Cycle de Marche}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{Category|ImportArt}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
= Le Fichier de Liste =<br />
Un des aspects les moins évidents de Synfig est contenu dans la calque d'importation des images. En plus d'être en mesure d'importer des fichiers d'image de base, il accepte aussi un fichier "lst". Cette liste de fichiers est tout simplement un fichier de texte qui se compose d'un taux de cadres, suivi d'une liste d'images à afficher. (Si le nombre d'images par seconde n'est pas fourni, il utilise un taux de défaut de 15 images par seconde (FPS).)<br />
<br />
Un exemple, fourni par Vorian Studios, prend quatre images fixes à partir d'un personnage à différentes étapes d'un cycle de marche. Ces images sont affichées avec 4 images par seconde pour donner une séquence répétée qui montre un homme qui marche.<br />
<br />
Voici les images<br> <br />
<gallery widths="104px" heights="216px"><br />
Image:frame_01.jpg|Frame 1<br />
Image:frame_02.jpg|Frame 2<br />
Image:frame_03.jpg|Frame 3<br />
Image:frame_04.jpg|Frame 4<br />
</gallery><br />
<br />
Et voici le début du fichier "lst". <br><br />
<code><br />
FPS 4<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
...</code><br><br />
<br />
== Création d'un Cycle de Marche ==<br />
Voyons comment utiliser ces images pour créer un cycle complet de marche pour un dessin dans Synfig.<br />
<br />
Commencer avec une nouvelle toile (Canvas) et ajouter une durée de quelques secondes à raison de 24 images par seconde (par défaut).Sur la toile, sélectionner le triangle dans le coin supérieur à gauche -> Calques-> Nouveau calque, d'autres, l'importation d'image.<br />
<br />
Cela crée un nouveau calque de l'image importée, mais rien ne s'affiche tant que vous n'avez pas sélectionné le nom du fichier. Aller à la boîte de Paramètres et faites défiler jusqu'à Nom du fichier. Là, vous pouvez naviguer vers le fichier. "lst" et sélectionner Ouvrir. Vous devriez maintenant voir la première image de la liste. Déplacez-vous dans le temps. Cela affichera les images successives de la liste chaque six cadres. Vous pouvez prévisualiser ou rendre tel qu'il est, et obtenir une animation avec une plage d'images trés faible.<br />
<br />
Cependant, le résultat n'est pas très lisse, et les images ne sont pas très flexibles. (Les images peuvent se déplacer, pivoter et s'étirer mais pas les éléments dans les images). Pour avoir un dessin totalement modifiable il faut dessiner par dessus avec Synfig, des éléments tels que des lignes tracées avec l'outil «dessin».<br />
<br />
Je travaille avec une tablette graphique, de sorte que la meilleure solution pour moi est d'utiliser {{l|Draw Tool|l'outil de dessin}}. Retourner au point 0f, sélectionner l'outil de dessin et dessiner sur le personnage. J'ai trouvé plus facile de diviser l'image en plusieurs parties (tête, bras gauche, bras droit, tronc, jambe gauche, jambe droite). Si le formulaire ne vous va pas bien, allez dans le menu Calque et décochez la case de la région. Cela vous permet de voir l'image ci-dessous pendant que vous faites glisser les poignées pour corriger la ligne.<br />
<br />
{{l|Image:Synfig_walk.png|800x324px}}<br />
<br />
Une fois le dessin à 0f fini, aller dans la ligne du temps à 6f. Au lieu d'avoir à les dessiner à nouveau, cette fois nous allons prendre des éléments existants et nous allons simplement les repositionnér pour correspondre à l'image. Encore une fois, si vous désactivez les couches d'une région on peut voir l'image d'édition. Utilisez les outils de rotation et de translation pour déplacer les parties du corps, en adaptant les poignées pour le réglage plus fin (ne pas oublier le changement de "Edit Mode Animation" comme il est décrit dans {{L|Doc:Animation Basics}} ).<br />
<br />
Répéter pour les points du temps 12f et 18f, puis éteindre le calque de l'image importée (décochez la case dans la fenêtre de calques). Maintenant, même si nous n'avons que quatre cadres, grâce à Synfig, nous avons 24 images d'un homme qui marche doucement. Ajouter un calque avec un boucle de temps de 1 seconde et l'homme gardera le rythme sur le terrain pour la durée de votre animation.<br />
<br />
<br />
{{l|Image:walk.gif}}<br />
<br />
Ajouter un calque de déplacement permettra que l'image se déplace d'un endroit à un autre sur la toile.(or moonwalk backwards if you're so inclined.)<br />
<br />
{{l|media:walk.zip|Voici le fichier comprimé}} avec le list file, les 4 images fixes, et le fichier de Synfig fini. Décompressez dans le même place et ouvrez le fichier newwalk.sif avec Synfig.<br />
<br />
<br />
= Personnage de marche, en mouvement (explication complète). =<br />
<br />
Avant de réussir à faire marcher un personnage, il faut connaître les bases<br />
«à savoir»:<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Tutorial/fr Bases de l'Animation par Ossatures] (Pour que vos membres puissent tourner à 360° sans aucun bug).<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Morphing/fr Bases du Morphing par Ossatures] (Pour pouvoir créer un "squelette de marche").<br />
<br />
<br />
*1: Dessiner le personnage dans votre programme de dessin.<br />
*2: Rajouter des contours<br />
<br />
{{l|Image:Walking-technique123.png}}<br />
<br />
*3: Nous bougeons les membres, au meilleur emplacement pour que le "bras" se décompose en:<br />
<br />
Bras: bras, avant-bras, main.<br />
<br />
Jambe: cuisse, mollet, chaussure.<br />
<br />
<br />
<br />
<br />
*4: Une fois que les membres sont à un emplacement dit naturel, (on évite les angles à 90°, car poser des croix de visée sur des membres tordues est plus difficile).<br />
<br />
Quand ils sont presque droits c'est une opération plus simple).<br />
<br />
Il faut décomposer le membre pour pouvoir poser nos "croix de visée".<br />
<br />
{{l|Image:Walking-technique456.png}}<br />
<br />
*5: Nous remplaçons, une main avec le poing fermé, un t-shirt plus large pour que les jambes puissent courir, les chaussures, par quelque chose de plus simple.<br />
<br />
Car il sera plus simple dans l'animation d'avoir des membres basiques.<br />
<br />
<br />
*7: Une fois que tous les membres sont décomposés, et que les croix de visée sont placées.<br />
<br />
{{l|Image:Walking-technique789.png}}<br />
<br />
*8: Ici ce sont des croix simples qui ont été posées, pour pouvoir tourner les membres, de façon rapide.<br />
<br />
(Elles n'ont pas suivi la procédure "croix de visée").<br />
<br />
*9: Si votre programme de dessin, vous permet de faire des rotations à partir d'un point fixe, faites un maximum d'essai, en tournant dans tous les sens votre bonhomme pour vous assurer qu'il n'y a pas de "bug". (test en mouvement).<br />
<br />
Ensuite vous importerais votre dessin final dans "synfig studio".<br />
<br />
<br />
*10: Pour rendre une marche plus réelle, nous pouvons plier la chaussure, le contour orange est un guide pour remettre facilement la chaussure droite.<br />
<br />
Les croix représentent les vertices:<br />
* Les croix vertes ne bougent pas. <br />
* La croix orange a été descendue à la verticale jusqu'à toucher le sol.<br />
* La croix bleue a été bougée sur la droite et les poignées bougées.<br />
<br />
{{l|Image:Walking-technique1011.png}}<br />
<br />
*11: Pour une question de simplicité lors de la création des croix de visée.<br />
<br />
-Le bras gauche est identique au bras droit.<br />
<br />
-La jambe gauche est identique à la jambe droite.<br />
<br />
Les choses qui sont uniques: l'épaule gauche et l'épaule droite (qui sont en rouge) sont différentes ainsi que l'emplacement des croix rapide.<br />
<br />
<br />
<br />
*12: La ligne du haut, est un repère pour que le personnage puisse baisser ou monter la tête.<br />
<br />
Le rectangle violet est le repère qui sera utilisé pour connaitre la "grandeur de marche" il est précisément à placer derrière la chaussure arrière et derrière la chaussure avant, les 2 traits rouges sont des lignes pour être plus précis.<br />
<br />
Vous pouvez importer votre dessin dans "synfig studio" et placer le squelette sur votre personnage.<br />
<br />
{{l|Image:Walking-technique1213.png}}<br />
<br />
*13: Astuce simple pour l'animation, et travaillez avec plus de détails, mettez une opacité (comme sur cette image) vous travaillerez plus facilement.<br />
<br />
<br />
*14: Une fois votre personnage avec un "squelette de marche", placer votre personnage comme sur le schema "personnage 1".<br />
<br />
Ensuite vous déplacerais votre "rectangle violet" pour que votre marche soit identique à "grandeur de marche".<br />
<br />
{{l|Image:Walking-technique14.png}}<br />
<br />
<br />
<br />
<br />
<br />
*15: Voici le schéma utiliser pour l'animation, il sert juste de repère (il est disponible en 2 formats, SVG, SIFZ,) disponible dans le ZIP.<br />
<br />
Pour voir le personnage suivant il faut décocher les autres numéros pour voir "l'étape" suivante.<br />
<br />
Je rappelle que ce "schéma" est juste une "aide" pour comprendre à quel moment il faut placer les images clés.<br />
<br />
Les variantes qui feront que votre marche sera différente sera "la grandeur de marche", et le placement de vos jambes.<br />
<br />
Soit vous ferez un personnage avec une marche, courte, longue, ou en courant.<br />
<br />
À savoir: les personnages 5,6,7,8 sont les mêmes images que les 4ère, les membres ont seulement été inverser dans l'autre sens.<br />
<br />
{{l|Image:Walking-technique15schema.gif}}<br />
<br />
<br />
<br />
<br />
<br />
Toutes les images clés, sont représentées par un numéro il y en a "8" en tout.<br />
<br />
{{l|Image:Walking-technique16.png}}<br />
<br />
Elles doivent toutes être placer avec ''' "24f" et en mode interpolation "linéaire"'''(c'est à la fin de l'animation<br />
que vous changerez le timing, pour accélérer la marche.<br />
<br />
<br />
[[File:Walking-technique-animation.gif|frame|none|Animation lente qui décompose la marche. ]] <br />
<br />
Le résultat final dépend uniquement du schéma (avec les n° sur chaque tête), c'est lui que vous devez modifier pour avoir un résultat qui vous conviendra.<br />
Avec un timing lent de 24f vous verrez tout de suite les erreurs.<br />
<br />
Ici vous voyez une marche avec un timing de 10,18,6,16f pour trouver le temps à utiliser sur l'image clé suivante une astuce simple<br />
a été utiliser, pour 4 images clés, vous supprimer 1 image, et chercher le temps de l'image manquante.<br />
<br />
Exemple:<br />
A B C D<br />
<br />
Vous supprimer l'image clé: "B" vous allez sur l'image A et vous avancer le temps de 1f en 1f de A jusqu'à C, il y aura un moment ou votre image manquante sera identique à B.<br />
Ensuite vous reportez le résultat sur votre animation, et vérifier que le résultat est fluide.<br />
Une fois que c'est fluide vous pouvez vraiment accélérer la marcher en divisant par 2 vos chiffres ou accélérer de 70% le résultat.<br />
<br />
<br />
Voici la '''liste des astuces''' a utilisé lors de l'animation dans synfig (avec ces aides il est plus facile d'y arriver):<br />
<br />
*Oignon (pour voir les clés précédentes en opacité).<br />
*{{Shortcut|shift}} + clic gauche souris, et faire GLISSER le groupe avec poignée verte (pour faire glisser sur une ligne).<br />
*Utiliser un rectangle pour avoir la "grandeur de marche"(+2 lignes au bord pour la précision).<br />
*Dessin d'esquisse (pour avoir les jambes et bras exactement identique, et la reporter plus loin).<br />
*Si votre travail est vectoriel, comme dans ce chapitre, utiliser de préférence l'aperçu qualité "1,00", taille 100%, éviter de travailler directement avec un canevas d'une taille UHD (trop grande), <br />
avec une qualité de "1,00" et 100% en taille vous verrez le résultat final, tel qui apparaîtra, dans une "vidéo".<br />
*Quand les 8 étapes du "schéma" sont toutes finies utiliser le "dupliquer" pour reporter les dessins déjà faits. (voir l'image ci-dessous).<br />
<br />
<br />
<br />
Pour faire un dupliquer [http://wiki.synfig.org/Keyframe/fr#Dupliquer_une_image_cl.C3.A9 lien]:<br />
*1 Je sélectionne l'image clé.<br />
*2 Je sélectionne le calque à dupliquer.<br />
*3 Je clique sur le point de passage.<br />
*4 Je duplique.<br />
<br />
[[File:Walking-technique-duplicate.png|frame|none|Dupliquer une image. ]]<br />
<br />
<br />
Voici les vidéos qui ont été utilisés pour réaliser ce tutoriel:<br />
<br />
[https://youtu.be/2y6aVz0Acx0 ALAN BECKER - Animating Walk Cycles]<br />
<br />
[https://youtu.be/sERBnFpXezM STREAM Morevna Episode 3 Making of Shot 24]<br />
<br />
== Important == <br />
<br />
*Les chaussures n'ont pas été pliés pour rendre ce tutoriel facile à comprendre, la technique la plus facile pour plié les chaussures étant d'utiliser les vertices (image 10), mais vous pouvez faire différemment comme sur la vidéo en lien n°2.<br />
<br />
*Nous vous conseillons d'ailleurs de lire cette vidéo au moins 1 fois pour comprendre le procédé de création de la marche.<br />
<br />
*Nous vous rappelons une dernière fois qu'il faut placer les clés en mode interpolation '''"linéaire"'''.<br />
<br />
<br />
== Fichier Projet ==<br />
<br />
Le fichier zip contenant les parties de ce tutoriel peut être trouvé ici: [[Media:Walking-technique-archive.zip|Walking-technique-archive.zip]]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Walk_Cycle/fr&diff=23197Doc:Walk Cycle/fr2017-05-08T06:07:53Z<p>Synme: Addition of a paragraph</p>
<hr />
<div><!-- Page info --><br />
{{Title|Cycle de Marche}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{Category|ImportArt}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Le Fichier de Liste ==<br />
Un des aspects les moins évidents de Synfig est contenu dans la calque d'importation des images. En plus d'être en mesure d'importer des fichiers d'image de base, il accepte aussi un fichier "lst". Cette liste de fichiers est tout simplement un fichier de texte qui se compose d'un taux de cadres, suivi d'une liste d'images à afficher. (Si le nombre d'images par seconde n'est pas fourni, il utilise un taux de défaut de 15 images par seconde (FPS).)<br />
<br />
Un exemple, fourni par Vorian Studios, prend quatre images fixes à partir d'un personnage à différentes étapes d'un cycle de marche. Ces images sont affichées avec 4 images par seconde pour donner une séquence répétée qui montre un homme qui marche.<br />
<br />
Voici les images<br> <br />
<gallery widths="104px" heights="216px"><br />
Image:frame_01.jpg|Frame 1<br />
Image:frame_02.jpg|Frame 2<br />
Image:frame_03.jpg|Frame 3<br />
Image:frame_04.jpg|Frame 4<br />
</gallery><br />
<br />
Et voici le début du fichier "lst". <br><br />
<code><br />
FPS 4<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
...</code><br><br />
<br />
== Création d'un Cycle de Marche ==<br />
Voyons comment utiliser ces images pour créer un cycle complet de marche pour un dessin dans Synfig.<br />
<br />
Commencer avec une nouvelle toile (Canvas) et ajouter une durée de quelques secondes à raison de 24 images par seconde (par défaut).Sur la toile, sélectionner le triangle dans le coin supérieur à gauche -> Calques-> Nouveau calque, d'autres, l'importation d'image.<br />
<br />
Cela crée un nouveau calque de l'image importée, mais rien ne s'affiche tant que vous n'avez pas sélectionné le nom du fichier. Aller à la boîte de Paramètres et faites défiler jusqu'à Nom du fichier. Là, vous pouvez naviguer vers le fichier. "lst" et sélectionner Ouvrir. Vous devriez maintenant voir la première image de la liste. Déplacez-vous dans le temps. Cela affichera les images successives de la liste chaque six cadres. Vous pouvez prévisualiser ou rendre tel qu'il est, et obtenir une animation avec une plage d'images trés faible.<br />
<br />
Cependant, le résultat n'est pas très lisse, et les images ne sont pas très flexibles. (Les images peuvent se déplacer, pivoter et s'étirer mais pas les éléments dans les images). Pour avoir un dessin totalement modifiable il faut dessiner par dessus avec Synfig, des éléments tels que des lignes tracées avec l'outil «dessin».<br />
<br />
Je travaille avec une tablette graphique, de sorte que la meilleure solution pour moi est d'utiliser {{l|Draw Tool|l'outil de dessin}}. Retourner au point 0f, sélectionner l'outil de dessin et dessiner sur le personnage. J'ai trouvé plus facile de diviser l'image en plusieurs parties (tête, bras gauche, bras droit, tronc, jambe gauche, jambe droite). Si le formulaire ne vous va pas bien, allez dans le menu Calque et décochez la case de la région. Cela vous permet de voir l'image ci-dessous pendant que vous faites glisser les poignées pour corriger la ligne.<br />
<br />
{{l|Image:Synfig_walk.png|800x324px}}<br />
<br />
Une fois le dessin à 0f fini, aller dans la ligne du temps à 6f. Au lieu d'avoir à les dessiner à nouveau, cette fois nous allons prendre des éléments existants et nous allons simplement les repositionnér pour correspondre à l'image. Encore une fois, si vous désactivez les couches d'une région on peut voir l'image d'édition. Utilisez les outils de rotation et de translation pour déplacer les parties du corps, en adaptant les poignées pour le réglage plus fin (ne pas oublier le changement de "Edit Mode Animation" comme il est décrit dans {{L|Doc:Animation Basics}} ).<br />
<br />
Répéter pour les points du temps 12f et 18f, puis éteindre le calque de l'image importée (décochez la case dans la fenêtre de calques). Maintenant, même si nous n'avons que quatre cadres, grâce à Synfig, nous avons 24 images d'un homme qui marche doucement. Ajouter un calque avec un boucle de temps de 1 seconde et l'homme gardera le rythme sur le terrain pour la durée de votre animation.<br />
<br />
<br />
{{l|Image:walk.gif}}<br />
<br />
Ajouter un calque de déplacement permettra que l'image se déplace d'un endroit à un autre sur la toile.(or moonwalk backwards if you're so inclined.)<br />
<br />
{{l|media:walk.zip|Voici le fichier comprimé}} avec le list file, les 4 images fixes, et le fichier de Synfig fini. Décompressez dans le même place et ouvrez le fichier newwalk.sif avec Synfig.<br />
<br />
<br />
== Personnage de marche, en mouvement (explication complète). ==<br />
<br />
Avant de réussir à faire marcher un personnage, il faut connaître les bases<br />
«à savoir»:<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Tutorial/fr Bases de l'Animation par Ossatures] (Pour que vos membres puissent tourner à 360° sans aucun bug).<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Morphing/fr Bases du Morphing par Ossatures] (Pour pouvoir créer un "squelette de marche").<br />
<br />
<br />
*1: Dessiner le personnage dans votre programme de dessin.<br />
*2: Rajouter des contours<br />
<br />
{{l|Image:Walking-technique123.png}}<br />
<br />
*3: Nous bougeons les membres, au meilleur emplacement pour que le "bras" se décompose en:<br />
<br />
Bras: bras, avant-bras, main.<br />
<br />
Jambe: cuisse, mollet, chaussure.<br />
<br />
<br />
<br />
<br />
*4: Une fois que les membres sont à un emplacement dit naturel, (on évite les angles à 90°, car poser des croix de visée sur des membres tordues est plus difficile).<br />
<br />
Quand ils sont presque droits c'est une opération plus simple).<br />
<br />
Il faut décomposer le membre pour pouvoir poser nos "croix de visée".<br />
<br />
{{l|Image:Walking-technique456.png}}<br />
<br />
*5: Nous remplaçons, une main avec le poing fermé, un t-shirt plus large pour que les jambes puissent courir, les chaussures, par quelque chose de plus simple.<br />
<br />
Car il sera plus simple dans l'animation d'avoir des membres basiques.<br />
<br />
<br />
*7: Une fois que tous les membres sont décomposés, et que les croix de visée sont placées.<br />
<br />
{{l|Image:Walking-technique789.png}}<br />
<br />
*8: Ici ce sont des croix simples qui ont été posées, pour pouvoir tourner les membres, de façon rapide.<br />
<br />
(Elles n'ont pas suivi la procédure "croix de visée").<br />
<br />
*9: Si votre programme de dessin, vous permet de faire des rotations à partir d'un point fixe, faites un maximum d'essai, en tournant dans tous les sens votre bonhomme pour vous assurer qu'il n'y a pas de "bug". (test en mouvement).<br />
<br />
Ensuite vous importerais votre dessin final dans "synfig studio".<br />
<br />
<br />
*10: Pour rendre une marche plus réelle, nous pouvons plier la chaussure, le contour orange est un guide pour remettre facilement la chaussure droite.<br />
<br />
Les croix représentent les vertices:<br />
* Les croix vertes ne bougent pas. <br />
* La croix orange a été descendue à la verticale jusqu'à toucher le sol.<br />
* La croix bleue a été bougée sur la droite et les poignées bougées.<br />
<br />
{{l|Image:Walking-technique1011.png}}<br />
<br />
*11: Pour une question de simplicité lors de la création des croix de visée.<br />
<br />
-Le bras gauche est identique au bras droit.<br />
<br />
-La jambe gauche est identique à la jambe droite.<br />
<br />
Les choses qui sont uniques: l'épaule gauche et l'épaule droite (qui sont en rouge) sont différentes ainsi que l'emplacement des croix rapide.<br />
<br />
<br />
<br />
*12: La ligne du haut, est un repère pour que le personnage puisse baisser ou monter la tête.<br />
<br />
Le rectangle violet est le repère qui sera utilisé pour connaitre la "grandeur de marche" il est précisément à placer derrière la chaussure arrière et derrière la chaussure avant, les 2 traits rouges sont des lignes pour être plus précis.<br />
<br />
Vous pouvez importer votre dessin dans "synfig studio" et placer le squelette sur votre personnage.<br />
<br />
{{l|Image:Walking-technique1213.png}}<br />
<br />
*13: Astuce simple pour l'animation, et travaillez avec plus de détails, mettez une opacité (comme sur cette image) vous travaillerez plus facilement.<br />
<br />
<br />
*14: Une fois votre personnage avec un "squelette de marche", placer votre personnage comme sur le schema "personnage 1".<br />
<br />
Ensuite vous déplacerais votre "rectangle violet" pour que votre marche soit identique à "grandeur de marche".<br />
<br />
{{l|Image:Walking-technique14.png}}<br />
<br />
<br />
<br />
<br />
<br />
*15: Voici le schéma utiliser pour l'animation, il sert juste de repère (il est disponible en 2 formats, SVG, SIFZ,) disponible dans le ZIP.<br />
<br />
Pour voir le personnage suivant il faut décocher les autres numéros pour voir "l'étape" suivante.<br />
<br />
Je rappelle que ce "schéma" est juste une "aide" pour comprendre à quel moment il faut placer les images clés.<br />
<br />
Les variantes qui feront que votre marche sera différente sera "la grandeur de marche", et le placement de vos jambes.<br />
<br />
Soit vous ferez un personnage avec une marche, courte, longue, ou en courant.<br />
<br />
À savoir: les personnages 5,6,7,8 sont les mêmes images que les 4ère, les membres ont seulement été inverser dans l'autre sens.<br />
<br />
{{l|Image:Walking-technique15schema.gif}}<br />
<br />
<br />
<br />
<br />
<br />
Toutes les images clés, sont représentées par un numéro il y en a "8" en tout.<br />
<br />
{{l|Image:Walking-technique16.png}}<br />
<br />
Elles doivent toutes être placer avec ''' "24f" et en mode interpolation "linéaire"'''(c'est à la fin de l'animation<br />
que vous changerez le timing, pour accélérer la marche.<br />
<br />
<br />
[[File:Walking-technique-animation.gif|frame|none|Animation lente qui décompose la marche. ]] <br />
<br />
Le résultat final dépend uniquement du schéma (avec les n° sur chaque tête), c'est lui que vous devez modifier pour avoir un résultat qui vous conviendra.<br />
Avec un timing lent de 24f vous verrez tout de suite les erreurs.<br />
<br />
Ici vous voyez une marche avec un timing de 10,18,6,16f pour trouver le temps à utiliser sur l'image clé suivante une astuce simple<br />
a été utiliser, pour 4 images clés, vous supprimer 1 image, et chercher le temps de l'image manquante.<br />
<br />
Exemple:<br />
A B C D<br />
<br />
Vous supprimer l'image clé: "B" vous allez sur l'image A et vous avancer le temps de 1f en 1f de A jusqu'à C, il y aura un moment ou votre image manquante sera identique à B.<br />
Ensuite vous reportez le résultat sur votre animation, et vérifier que le résultat est fluide.<br />
Une fois que c'est fluide vous pouvez vraiment accélérer la marcher en divisant par 2 vos chiffres ou accélérer de 70% le résultat.<br />
<br />
<br />
Voici la '''liste des astuces''' a utilisé lors de l'animation dans synfig (avec ces aides il est plus facile d'y arriver):<br />
<br />
*Oignon (pour voir les clés précédentes en opacité).<br />
*{{Shortcut|shift}} + clic gauche souris, et faire GLISSER le groupe avec poignée verte (pour faire glisser sur une ligne).<br />
*Utiliser un rectangle pour avoir la "grandeur de marche"(+2 lignes au bord pour la précision).<br />
*Dessin d'esquisse (pour avoir les jambes et bras exactement identique, et la reporter plus loin).<br />
*Si votre travail est vectoriel, comme dans ce chapitre, utiliser de préférence l'aperçu qualité "1,00", taille 100%, éviter de travailler directement avec un canevas d'une taille UHD (trop grande), <br />
avec une qualité de "1,00" et 100% en taille vous verrez le résultat final, tel qui apparaîtra, dans une "vidéo".<br />
*Quand les 8 étapes du "schéma" sont toutes finies utiliser le "dupliquer" pour reporter les dessins déjà faits. (voir l'image ci-dessous).<br />
<br />
<br />
<br />
Pour faire un dupliquer [http://wiki.synfig.org/Keyframe/fr#Dupliquer_une_image_cl.C3.A9 lien]:<br />
*1 Je sélectionne l'image clé.<br />
*2 Je sélectionne le calque à dupliquer.<br />
*3 Je clique sur le point de passage.<br />
*4 Je duplique.<br />
<br />
[[File:Walking-technique-duplicate.png|frame|none|Dupliquer une image. ]]<br />
<br />
<br />
Voici les vidéos qui ont été utilisés pour réaliser ce tutoriel:<br />
<br />
[https://youtu.be/2y6aVz0Acx0 ALAN BECKER - Animating Walk Cycles]<br />
<br />
[https://youtu.be/sERBnFpXezM STREAM Morevna Episode 3 Making of Shot 24]<br />
<br />
== Important == <br />
<br />
*Les chaussures n'ont pas été pliés pour rendre ce tutoriel facile à comprendre, la technique la plus facile pour plié les chaussures étant d'utiliser les vertices (image 10), mais vous pouvez faire différemment comme sur la vidéo en lien n°2.<br />
<br />
*Nous vous conseillons d'ailleurs de lire cette vidéo au moins 1 fois pour comprendre le procédé de création de la marche.<br />
<br />
*Nous vous rappelons une dernière fois qu'il faut placer les clés en mode interpolation '''"linéaire"'''.<br />
<br />
<br />
== Fichier Projet ==<br />
<br />
Le fichier zip contenant les parties de ce tutoriel peut être trouvé ici: [[Media:Walking-technique-archive.zip|Walking-technique-archive.zip]]</div>Synmehttps://wiki.synfig.org/index.php?title=Doc:Walk_Cycle/fr&diff=23196Doc:Walk Cycle/fr2017-05-08T05:27:45Z<p>Synme: uppercase</p>
<hr />
<div><!-- Page info --><br />
{{Title|Cycle de Marche}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{Category|ImportArt}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Le Fichier de Liste ==<br />
Un des aspects les moins évidents de Synfig est contenu dans la calque d'importation des images. En plus d'être en mesure d'importer des fichiers d'image de base, il accepte aussi un fichier "lst". Cette liste de fichiers est tout simplement un fichier de texte qui se compose d'un taux de cadres, suivi d'une liste d'images à afficher. (Si le nombre d'images par seconde n'est pas fourni, il utilise un taux de défaut de 15 images par seconde (FPS).)<br />
<br />
Un exemple, fourni par Vorian Studios, prend quatre images fixes à partir d'un personnage à différentes étapes d'un cycle de marche. Ces images sont affichées avec 4 images par seconde pour donner une séquence répétée qui montre un homme qui marche.<br />
<br />
Voici les images<br> <br />
<gallery widths="104px" heights="216px"><br />
Image:frame_01.jpg|Frame 1<br />
Image:frame_02.jpg|Frame 2<br />
Image:frame_03.jpg|Frame 3<br />
Image:frame_04.jpg|Frame 4<br />
</gallery><br />
<br />
Et voici le début du fichier "lst". <br><br />
<code><br />
FPS 4<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
frame_01.jpg<br><br />
frame_02.jpg<br><br />
frame_03.jpg<br><br />
frame_04.jpg<br><br />
...</code><br><br />
<br />
== Création d'un Cycle de Marche ==<br />
Voyons comment utiliser ces images pour créer un cycle complet de marche pour un dessin dans Synfig.<br />
<br />
Commencer avec une nouvelle toile (Canvas) et ajouter une durée de quelques secondes à raison de 24 images par seconde (par défaut).Sur la toile, sélectionner le triangle dans le coin supérieur à gauche -> Calques-> Nouveau calque, d'autres, l'importation d'image.<br />
<br />
Cela crée un nouveau calque de l'image importée, mais rien ne s'affiche tant que vous n'avez pas sélectionné le nom du fichier. Aller à la boîte de Paramètres et faites défiler jusqu'à Nom du fichier. Là, vous pouvez naviguer vers le fichier. "lst" et sélectionner Ouvrir. Vous devriez maintenant voir la première image de la liste. Déplacez-vous dans le temps. Cela affichera les images successives de la liste chaque six cadres. Vous pouvez prévisualiser ou rendre tel qu'il est, et obtenir une animation avec une plage d'images trés faible.<br />
<br />
Cependant, le résultat n'est pas très lisse, et les images ne sont pas très flexibles. (Les images peuvent se déplacer, pivoter et s'étirer mais pas les éléments dans les images). Pour avoir un dessin totalement modifiable il faut dessiner par dessus avec Synfig, des éléments tels que des lignes tracées avec l'outil «dessin».<br />
<br />
Je travaille avec une tablette graphique, de sorte que la meilleure solution pour moi est d'utiliser {{l|Draw Tool|l'outil de dessin}}. Retourner au point 0f, sélectionner l'outil de dessin et dessiner sur le personnage. J'ai trouvé plus facile de diviser l'image en plusieurs parties (tête, bras gauche, bras droit, tronc, jambe gauche, jambe droite). Si le formulaire ne vous va pas bien, allez dans le menu Calque et décochez la case de la région. Cela vous permet de voir l'image ci-dessous pendant que vous faites glisser les poignées pour corriger la ligne.<br />
<br />
{{l|Image:Synfig_walk.png|800x324px}}<br />
<br />
Une fois le dessin à 0f fini, aller dans la ligne du temps à 6f. Au lieu d'avoir à les dessiner à nouveau, cette fois nous allons prendre des éléments existants et nous allons simplement les repositionnér pour correspondre à l'image. Encore une fois, si vous désactivez les couches d'une région on peut voir l'image d'édition. Utilisez les outils de rotation et de translation pour déplacer les parties du corps, en adaptant les poignées pour le réglage plus fin (ne pas oublier le changement de "Edit Mode Animation" comme il est décrit dans {{L|Doc:Animation Basics}} ).<br />
<br />
Répéter pour les points du temps 12f et 18f, puis éteindre le calque de l'image importée (décochez la case dans la fenêtre de calques). Maintenant, même si nous n'avons que quatre cadres, grâce à Synfig, nous avons 24 images d'un homme qui marche doucement. Ajouter un calque avec un boucle de temps de 1 seconde et l'homme gardera le rythme sur le terrain pour la durée de votre animation.<br />
<br />
<br />
{{l|Image:walk.gif}}<br />
<br />
Ajouter un calque de déplacement permettra que l'image se déplace d'un endroit à un autre sur la toile.(or moonwalk backwards if you're so inclined.)<br />
<br />
{{l|media:walk.zip|Voici le fichier comprimé}} avec le list file, les 4 images fixes, et le fichier de Synfig fini. Décompressez dans le même place et ouvrez le fichier newwalk.sif avec Synfig.<br />
<br />
<br />
== Personnage de marche, en mouvement (explication complète). ==<br />
<br />
Avant de réussir à faire marcher un personnage, il faut connaître les bases<br />
«à savoir»:<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Tutorial/fr Bases de l'Animation par Ossatures] (Pour que vos membres puissent tourner à 360° sans aucun bug).<br />
<br />
[http://wiki.synfig.org/Doc:Basic_Bone_Morphing/fr Bases du Morphing par Ossatures] (Pour pouvoir créer un "squelette de marche").<br />
<br />
<br />
*1: Dessiner le personnage dans votre programme de dessin.<br />
*2: Rajouter des contours<br />
<br />
{{l|Image:Walking-technique123.png}}<br />
<br />
*3: Nous bougeons les membres, au meilleur emplacement pour que le "bras" se décompose en:<br />
<br />
Bras: bras, avant-bras, main.<br />
<br />
Jambe: cuisse, mollet, chaussure.<br />
<br />
<br />
<br />
<br />
*4: Une fois que les membres sont à un emplacement dit naturel, (on évite les angles à 90°, car poser des croix de visée sur des membres tordues est plus difficile).<br />
<br />
Quand ils sont presque droits c'est une opération plus simple).<br />
<br />
Il faut décomposer le membre pour pouvoir poser nos "croix de visée".<br />
<br />
{{l|Image:Walking-technique456.png}}<br />
<br />
*5: Nous remplaçons, une main avec le poing fermé, un t-shirt plus large pour que les jambes puissent courir, les chaussures, par quelque chose de plus simple.<br />
<br />
Car il sera plus simple dans l'animation d'avoir des membres basiques.<br />
<br />
<br />
*7: Une fois que tous les membres sont décomposés, et que les croix de visée sont placées.<br />
<br />
{{l|Image:Walking-technique789.png}}<br />
<br />
*8: Ici ce sont des croix simples qui ont été posées, pour pouvoir tourner les membres, de façon rapide.<br />
<br />
(Elles n'ont pas suivi la procédure "croix de visée").<br />
<br />
*9: Si votre programme de dessin, vous permet de faire des rotations à partir d'un point fixe, faites un maximum d'essai, en tournant dans tous les sens votre bonhomme pour vous assurer qu'il n'y a pas de "bug". (test en mouvement).<br />
<br />
Ensuite vous importerais votre dessin final dans "synfig studio".<br />
<br />
<br />
*10: Pour rendre une marche plus réelle, nous pouvons plier la chaussure, le contour orange est un guide pour remettre facilement la chaussure droite.<br />
<br />
Les croix représentent les vertices:<br />
* Les croix vertes ne bougent pas. <br />
* La croix orange a été descendue à la verticale jusqu'à toucher le sol.<br />
* La croix bleue a été bougée sur la droite et les poignées bougées.<br />
<br />
{{l|Image:Walking-technique1011.png}}<br />
<br />
*11: Pour une question de simplicité lors de la création des croix de visée.<br />
<br />
-Le bras gauche est identique au bras droit.<br />
<br />
-La jambe gauche est identique à la jambe droite.<br />
<br />
Les choses qui sont uniques: l'épaule gauche et l'épaule droite (qui sont en rouge) sont différentes ainsi que l'emplacement des croix rapide.<br />
<br />
<br />
<br />
*12: La ligne du haut, est un repère pour que le personnage puisse baisser ou monter la tête.<br />
<br />
Le rectangle violet est le repère qui sera utilisé pour connaitre la "grandeur de marche" il est précisément à placer derrière la chaussure arrière et derrière la chaussure avant, les 2 traits rouges sont des lignes pour être plus précis.<br />
<br />
Vous pouvez importer votre dessin dans "synfig studio" et placer le squelette sur votre personnage.<br />
<br />
{{l|Image:Walking-technique1213.png}}<br />
<br />
*13: Astuce simple pour l'animation, et travaillez avec plus de détails, mettez une opacité (comme sur cette image) vous travaillerez plus facilement.<br />
<br />
<br />
*14: Une fois votre personnage avec un "squelette de marche", placer votre personnage comme sur le schema "personnage 1".<br />
<br />
Ensuite vous déplacerais votre "rectangle violet" pour que votre marche soit identique à "grandeur de marche".<br />
<br />
{{l|Image:Walking-technique14.png}}<br />
<br />
<br />
<br />
<br />
<br />
*15: Voici le schéma utiliser pour l'animation, il sert juste de repère (il est disponible en 2 formats, SVG, SIFZ,) disponible dans le ZIP.<br />
<br />
Pour voir le personnage suivant il faut décocher les autres numéros pour voir "l'étape" suivante.<br />
<br />
Je rappelle que ce "schéma" est juste une "aide" pour comprendre à quel moment il faut placer les images clés.<br />
<br />
Les variantes qui feront que votre marche sera différente sera "la grandeur de marche", et le placement de vos jambes.<br />
<br />
Soit vous ferez un personnage avec une marche, courte, longue, ou en courant.<br />
<br />
À savoir: les personnages 5,6,7,8 sont les mêmes images que les 4ère, les membres ont seulement été inverser dans l'autre sens.<br />
<br />
{{l|Image:Walking-technique15schema.gif}}<br />
<br />
<br />
<br />
<br />
<br />
Toutes les images clés, sont représentées par un numéro il y en a "8" en tout.<br />
<br />
{{l|Image:Walking-technique16.png}}<br />
<br />
Elles doivent toutes être placer avec ''' "24f" et en mode interpolation "linéaire"'''(c'est à la fin de l'animation<br />
que vous changerez le timing, pour accélérer la marche.<br />
<br />
<br />
[[File:Walking-technique-animation.gif|frame|none|Animation lente qui décompose la marche. ]] <br />
<br />
Le résultat final dépend uniquement du schéma (avec les n° sur chaque tête), c'est lui que vous devez modifier pour avoir un résultat qui vous conviendra.<br />
Avec un timing lent de 24f vous verrez tout de suite les erreurs.<br />
<br />
Ici vous voyez une marche avec un timing de 10,18,6,16f pour trouver le temps à utiliser sur l'image clé suivante une astuce simple<br />
a été utiliser, pour 4 images clés, vous supprimer 1 image, et chercher le temps de l'image manquante.<br />
<br />
Exemple:<br />
A B C D<br />
<br />
Vous supprimer l'image clé: "B" vous allez sur l'image A et vous avancer le temps de 1f en 1f de A jusqu'à C, il y aura un moment ou votre image manquante sera identique à B.<br />
Ensuite vous reportez le résultat sur votre animation, et vérifier que le résultat est fluide.<br />
Une fois que c'est fluide vous pouvez vraiment accélérer la marcher en divisant par 2 vos chiffres ou accélérer de 70% le résultat.<br />
<br />
<br />
Voici la '''liste des astuces''' a utilisé lors de l'animation dans synfig (avec ces aides il est plus facile d'y arriver):<br />
<br />
*Oignon (pour voir les clés précédentes en opacité).<br />
*{{Shortcut|shift}} + clic gauche souris, et faire GLISSER le groupe avec poignée verte (pour faire glisser sur une ligne).<br />
*Utiliser un rectangle pour avoir la "grandeur de marche"(+2 lignes au bord pour la précision).<br />
*Dessin d'esquisse (pour avoir les jambes et bras exactement identique, et la reporter plus loin).<br />
*Si votre travail est vectoriel, comme dans ce chapitre, utiliser de préférence l'aperçu qualité "1,00", taille 100%, éviter de travailler directement avec un canevas d'une taille UHD (trop grande), <br />
avec une qualité de "1,00" et 100% en taille vous verrez le résultat final, tel qui apparaîtra, dans une "vidéo".<br />
*Quand les 8 étapes du "schéma" sont toutes finies utiliser le "dupliquer" pour reporter les dessins déjà faits. (voir l'image ci-dessous).<br />
<br />
<br />
<br />
Pour faire un dupliquer [http://wiki.synfig.org/Keyframe/fr#Dupliquer_une_image_cl.C3.A9 lien]:<br />
*1 Je sélectionne l'image clé.<br />
*2 Je sélectionne le calque à dupliquer.<br />
*3 Je clique sur le point de passage.<br />
*4 Je duplique.<br />
<br />
[[File:Walking-technique-duplicate.png|frame|none|Dupliquer une image. ]]<br />
<br />
<br />
Voici les vidéos qui ont été utilisés pour réaliser ce tutoriel:<br />
<br />
[https://youtu.be/2y6aVz0Acx0 ALAN BECKER - Animating Walk Cycles]<br />
<br />
[https://youtu.be/sERBnFpXezM STREAM Morevna Episode 3 Making of Shot 24]<br />
<br />
== Fichier Projet ==<br />
<br />
Le fichier zip contenant les parties de ce tutoriel peut être trouvé ici: [[Media:Walking-technique-archive.zip|Walking-technique-archive.zip]]</div>Synme