Doc:Walk Cycle - Revision history

Synme: I retransferred the links here Lipsync

2019-08-18T15:14:40Z

I retransferred the links here Lipsync

Synme: add link

2019-08-18T14:35:03Z

add link

Synme: I delete the "method 2" which is useless, it has been replaced by "Character walking, moving (full explanation)."

2017-05-12T17:05:39Z

I delete the "method 2" which is useless, it has been replaced by "Character walking, moving (full explanation)."

Synme: Adding a chapter, the French version of the tutorial is the original.

2017-05-08T14:12:27Z

Adding a chapter, the French version of the tutorial is the original.

Synme: Formatting titles

2017-05-08T06:15:15Z

Formatting titles

Synme: translation of a word

2016-09-01T13:50:35Z

translation of a word

Synme: translation of a word

2016-09-01T13:47:58Z

translation of a word

Synme: Add the method 2 (see French tutorial)

2016-08-30T14:16:32Z

Add the method 2 (see French tutorial)

D.j.a.y: {{Category|ImportArt}}

2016-03-31T12:00:33Z

Synme: zoom image

2016-02-12T17:04:42Z

zoom image

← Older revision		Revision as of 15:14, 18 August 2019
Line 233:		Line 233:

	The zip file containing the parts of this tutorial can be found here: [[Media:Walking-technique-archive.zip\|Walking-technique-archive.zip]]		The zip file containing the parts of this tutorial can be found here: [[Media:Walking-technique-archive.zip\|Walking-technique-archive.zip]]
−
−	~~''You can learn more with 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]

← Older revision		Revision as of 14:35, 18 August 2019
Line 230:		Line 230:


−	== ~~Project File~~ ==	+	== Links ==

	The zip file containing the parts of this tutorial can be found here: [[Media:Walking-technique-archive.zip\|Walking-technique-archive.zip]]		The zip file containing the parts of this tutorial can be found here: [[Media:Walking-technique-archive.zip\|Walking-technique-archive.zip]]
		+
		+	''You can learn more with 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]

← Older revision		Revision as of 17:05, 12 May 2017
Line 62:		Line 62:
	{{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.		{{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.

−	~~= Method 2 =~~

−	~~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:~~
−
−	~~<gallery widths="170px" heights="300px">~~
−	~~Image:Walker01.png~~
−	~~Image:Walker02.png~~
−	~~Image:Walker03.png~~
−	~~Image:Walker04.png~~
−	~~</gallery>~~
−
−	~~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:~~
−	~~<gallery widths="170px" heights="300px">~~
−	~~Image:Walker05.png~~
−	~~Image:Walker06.png~~
−	~~Image:Walker07.png~~
−	~~Image:Walker08a.png~~
−	~~</gallery>~~
−
−	~~It remains more to import 4 designs with our "blue outline" in Synfig and choose the same size of "resizing"~~
−	~~(settings > Transformations > scale) for each imported image, then we can add our boy file "walker.sif" to the animated.~~
−	~~The boy layers must be laid on the image1 so resize and move until it is just.~~
−	~~I put a (quantity) opacity of 0.5 on the image1 to see be sure of the result.~~
−	~~I only check the image: blue-layer01.png and the group "walker".~~
−
−
−	~~[[File:Walker08b.png\|frame\|none\|I place the layer in this order]]~~
−
−
−	~~The 1st image we see drawing import with the blue outlines, the layers for animation are right.~~
−
−	~~The 2nd image we see the boy put in the same location as the drawing.~~
−
−	~~[[File:Walker09.png]][[File:Walker10.png]]~~
−
−
−	~~We can animate our Walker, took me a total of 5 s for animation~~
−	~~uncheck "blue-layer01.png" and check "blue-layer02.png" and to see her add is a "quantity" of 0.5 (for opacity).~~
−
−
−	~~[[File:Walker11.png\|frame\|none\|We see layers that have not moved, and drawing with the blue outlines. ]]~~
−
−
−	~~There is more to animate our boy, add a keyframe I put "24f" ,~~
−
−	~~[[File:Walker12.png\|frame\|none\|select "left arm" the outline + region.]]~~
−
−
−
−	~~Move each "vertex" 1 by 1 as here.~~
−
−	~~[[File:Walker13.png\|frame\|none\|and move the "handles".]]~~
−
−
−	~~Do the same for each vertex until finished and be identical to the image, then we can start the image3~~
−	~~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.~~
−
−
−	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]
−
−	~~or like this:~~
−
−	~~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.~~
−
−
−	*1 I select the keyframe.
−	*2 I select the layer you want to duplicate.
−	*3 I click about to pass.
−	*4 I duplicate.
−	~~[[File:Walker13b.png\|frame\|none\|duplicate an image".]]~~
−
−
−	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.
−
−
−	~~Once you have the same result it is to reduce the size of the "length" of the keyframes, and export the animation~~
−	~~I put "7f", which gives a quick walk.~~
−
−
−	~~[[File:Walker14-animation.gif\|frame\|none\|Final result]]~~
−
−	~~== Files tutorials ==~~
−	~~Files sif containing parts of this tutorial can be found here: [[Media:Walker14.zip\|Walker14.zip]]~~

← Older revision		Revision as of 14:12, 8 May 2017
Line 145:		Line 145:
	== Files tutorials ==		== Files tutorials ==
	Files sif containing parts of this tutorial can be found here: [[Media:Walker14.zip\|Walker14.zip]]		Files sif containing parts of this tutorial can be found here: [[Media:Walker14.zip\|Walker14.zip]]
		+
		+
		+	= Character walking, moving (full explanation). =
		+
		+	Before you succeed in walking a character, you must know the basics
		+	«to know»:
		+
		+	[http://wiki.synfig.org/Doc:Basic_Bone_Tutorial Basic Bone Tutorial] (For your limbs to be able to rotate 360° without any bugs).
		+
		+	[http://wiki.synfig.org/Doc:Basic_Bone_Morphing Basic Bone Morphing] (To create a "walking skeleton").
		+
		+
		+	*1: Draw the character in your drawing program.
		+	*2: Add outline
		+
		+	{{l\|Image:Walking-technique123.png}}
		+
		+	*3: We move the limbs, in the best position so that the "arm" can be decompose into:
		+
		+	Arm: arm, forearm, hand.
		+
		+	Leg: thigh, calf, shoe.
		+
		+
		+
		+	*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).
		+
		+	When they are almost straight it is a simpler operation.
		+
		+	It is necessary to decompose the limb to be able to pose our "crosshair".
		+
		+	{{l\|Image:Walking-technique456.png}}
		+
		+	*5: We replace, a hand with closed fist, a wider t-shirt so that the legs can run, the shoes, by something simpler.
		+
		+	Because it will be simpler in animation to have basic members.
		+
		+
		+	*7: Once all the limbs are decompose, and the crosshair are placed.
		+
		+	{{l\|Image:Walking-technique789.png}}
		+
		+	*8: Here are simple fast crosses that have been laid, to be able to turn the limbs, in a fast way.
		+
		+	(They did not follow process "crosshair").
		+
		+	*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).
		+
		+	Then you would import your final drawing into "synfig studio".
		+
		+
		+	*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.
		+
		+	The crosses represent the vertices:
		+	* Green crosses do not move.
		+	* The orange cross was lowered vertically until it reached the ground.
		+	* The blue cross was moved to the right and the handles moved.
		+
		+	{{l\|Image:Walking-technique1011.png}}
		+
		+	*11: For simplicity when creating crosshair.
		+
		+	-The left arm is identical to the right arm.
		+
		+	-The left leg is identical to the right leg.
		+
		+	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.
		+
		+
		+
		+	*12: The top line, is a marker so that the character can lower or raise the head.
		+
		+	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.
		+
		+	You can import your drawing into "synfig studio" and place the skeleton on your character.
		+
		+	{{l\|Image:Walking-technique1213.png}}
		+
		+	*13: Simple trick for animation, and work with more details, put an opacity (as in this image) you will work more easily.
		+
		+
		+	*14: Once your character with a "walking skeleton", place your character as on the "character 1" schema.
		+
		+	Then you would move your "purple rectangle" so that your walk is identical to "walking size".
		+
		+	{{l\|Image:Walking-technique14.png}}
		+
		+
		+
		+
		+
		+	*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.
		+
		+	To see the next character you have to uncheck the other numbers to see the "next" step.
		+
		+	I recall that this "schema" is just an "aid" to understand when to place the key images.
		+
		+	The variants that will make your walking will be different will be "walking size", and placing your legs.
		+
		+	So you will make a character with a walk, short, long, or running.
		+
		+	To know: the characters 5,6,7,8 are the same images as the 4th, the limbs have only been reversing the other way.
		+
		+	{{l\|Image:Walking-technique15schema.gif}}
		+
		+
		+
		+
		+
		+	All keyframes, are represented by a number there are "8" in all.
		+
		+	{{l\|Image:Walking-technique16.png}}
		+
		+	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.
		+
		+
		+	[[File:Walking-technique-animation.gif\|frame\|none\|Slow animation that decomposes walking. ]]
		+
		+	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.
		+	With a slow time of 24f you will immediately see the errors.
		+
		+	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.
		+
		+	Example:
		+	A B C D
		+
		+	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.
		+	Then you report the result on your animation, and check that the result is smooth.
		+	Once it is fluid you can really accelerate the walk by dividing your numbers by 2 or accelerate by 70% the result.
		+
		+
		+	Here is '''list of tricks''' used during the animation in synfig (with these helps it is easier to succeed):
		+
		+	*Onion (to see the previous keys in opacity).
		+	*{{Shortcut\|shift}} + left mouse click, and SLIDE the group with green handle (to slide on a line).
		+	*Use a rectangle to have the "walking size"(+2 lines at the edge for precision).
		+	*Drawing sketch (to have the legs and arms exactly the same, and report it further).
		+	*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),
		+	with a quality of "1.00" and 100% in size you will see the final result, as will appear, in a "video".
		+	*When the 8 steps of the "schema" are all finished use the "duplicate" to copy the already made drawings. (See image below).
		+
		+
		+
		+	To make a duplicate [http://wiki.synfig.org/Keyframe#Duplicate_a_keyframe link]:
		+	*1 I select the keyframe.
		+	*2 I select the layer to duplicate.
		+	*3 I click on the waypoint.
		+	*4 I duplicate.
		+
		+	[[File:Walking-technique-duplicate.png\|frame\|none\|Duplicate an image. ]]
		+
		+
		+	Here are the videos that were used to realize this tutorial:
		+
		+	[https://youtu.be/2y6aVz0Acx0 ALAN BECKER - Animating Walk Cycles]
		+
		+	[https://youtu.be/sERBnFpXezM STREAM Morevna Episode 3 Making of Shot 24]
		+
		+	== Important ==
		+
		+	*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.
		+
		+	*We advise you to read this video at least once to understand the process of creation for the walk.
		+
		+	*We remind you one last time that we must place the keys in '''"linear"''' interpolation mode.
		+
		+
		+	== Project File ==
		+
		+	The zip file containing the parts of this tutorial can be found here: [[Media:Walking-technique-archive.zip\|Walking-technique-archive.zip]]

@@ Line 8: / Line 8: @@
   Somes of the screenshots needs to be updated with 0.64.0
-== The List File ==
+= The List File =
 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.)
@@ Line 62: / Line 62: @@
 {{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.
-== Method 2 ==
+= Method 2 =
 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:

← Older revision		Revision as of 13:50, 1 September 2016
Line 107:		Line 107:
	There is more to animate our boy, add a keyframe I put "24f" ,		There is more to animate our boy, add a keyframe I put "24f" ,

−	[[File:Walker12.png\|frame\|none\|select "left arm" the ~~contour~~ + region.]]	+	[[File:Walker12.png\|frame\|none\|select "left arm" the outline + region.]]

@@ Line 81: / Line 81: @@
 </gallery>
-It remains more to import 4 designs with our "blue contour" in Synfig and choose the same size of "resizing"
+It remains more to import 4 designs with our "blue outline" in Synfig and choose the same size of "resizing"
 (settings > Transformations > scale) for each imported image, then we can add our boy file "walker.sif" to the animated.
 The boy layers must be laid on the image1 so resize and move until it is just.

← Older revision		Revision as of 14:16, 30 August 2016
Line 61:		Line 61:

	{{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.		{{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.
		+
		+	== Method 2 ==
		+
		+	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:
		+
		+	<gallery widths="170px" heights="300px">
		+	Image:Walker01.png
		+	Image:Walker02.png
		+	Image:Walker03.png
		+	Image:Walker04.png
		+	</gallery>
		+
		+	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:
		+	<gallery widths="170px" heights="300px">
		+	Image:Walker05.png
		+	Image:Walker06.png
		+	Image:Walker07.png
		+	Image:Walker08a.png
		+	</gallery>
		+
		+	It remains more to import 4 designs with our "blue contour" in Synfig and choose the same size of "resizing"
		+	(settings > Transformations > scale) for each imported image, then we can add our boy file "walker.sif" to the animated.
		+	The boy layers must be laid on the image1 so resize and move until it is just.
		+	I put a (quantity) opacity of 0.5 on the image1 to see be sure of the result.
		+	I only check the image: blue-layer01.png and the group "walker".
		+
		+
		+	[[File:Walker08b.png\|frame\|none\|I place the layer in this order]]
		+
		+
		+	The 1st image we see drawing import with the blue outlines, the layers for animation are right.
		+
		+	The 2nd image we see the boy put in the same location as the drawing.
		+
		+	[[File:Walker09.png]][[File:Walker10.png]]
		+
		+
		+	We can animate our Walker, took me a total of 5 s for animation
		+	uncheck "blue-layer01.png" and check "blue-layer02.png" and to see her add is a "quantity" of 0.5 (for opacity).
		+
		+
		+	[[File:Walker11.png\|frame\|none\|We see layers that have not moved, and drawing with the blue outlines. ]]
		+
		+
		+	There is more to animate our boy, add a keyframe I put "24f" ,
		+
		+	[[File:Walker12.png\|frame\|none\|select "left arm" the contour + region.]]
		+
		+
		+
		+	Move each "vertex" 1 by 1 as here.
		+
		+	[[File:Walker13.png\|frame\|none\|and move the "handles".]]
		+
		+
		+	Do the same for each vertex until finished and be identical to the image, then we can start the image3
		+	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.
		+
		+
		+	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]
		+
		+	or like this:
		+
		+	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.
		+
		+
		+	*1 I select the keyframe.
		+	*2 I select the layer you want to duplicate.
		+	*3 I click about to pass.
		+	*4 I duplicate.
		+	[[File:Walker13b.png\|frame\|none\|duplicate an image".]]
		+
		+
		+	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.
		+
		+
		+	Once you have the same result it is to reduce the size of the "length" of the keyframes, and export the animation
		+	I put "7f", which gives a quick walk.
		+
		+
		+	[[File:Walker14-animation.gif\|frame\|none\|Final result]]
		+
		+	== Files tutorials ==
		+	Files sif containing parts of this tutorial can be found here: [[Media:Walker14.zip\|Walker14.zip]]

@@ Line 3: / Line 3: @@
 {{Category|Tutorials}}
 {{Category|Tutorials Advanced}}
 {{NewTerminology}}
 <!-- Page info end -->

@@ Line 49: / Line 49: @@
 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.
-{{l|Image:Synfig_walk.png|488x192px}}
+{{l|Image:Synfig_walk.png|800x324px}}
 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}}.]