https://www.wiki.synfig.org/api.php?action=feedcontributions&user=Darkspace65&feedformat=atomSynfig Studio :: Documentation - User contributions [en]2024-03-28T15:22:49ZUser contributionsMediaWiki 1.26.3https://www.wiki.synfig.org/index.php?title=Doc:Cut-out_Animation&diff=22361Doc:Cut-out Animation2016-11-19T05:45:44Z<p>Darkspace65: /* Tips & Tricks */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Cut-out Animation}}<br />
{{TOCright}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
{{Note|Cut-out Animation using Group Transformation Widget|Version 1.x series users, check here the {{l|Doc:Cut-out_Animation_using_Group_Transformation_Widget}} tutorial.}}<br />
<br />
This is brief tutorial to show how create cut-out style animations. Usually cut-out style animations use image art instead of vector art to create the animation. See South Park series. You should obtain some kind of animation like this one:<br />
<br />
{{l|Image:Cutoutsample.gif}}<br />
<br />
== Preparing the material ==<br />
For a cut out animation you'll need some images that represent the moving parts of the animation. For this example I've prepared a Simpsons like boy. You can take the images from {{l|Media:Cutout-sample.zip|this file}}. It also has the final sifz animation result. <br />
<br />
{{l|Image:Boy-split.png|right|thumb|A character split into parts}}<br />
<br />
Each part of the body (head, arms, legs, etc.) is a single PNG file. (In the split image, the individual images are composited in a bigger one). I've set all the files to have the same horizontal and vertical dimensions so all the images can fit one over the other to create the character without the need to adjust their sizes or positions. It will help later to import each image into Synfig.<br />
<br />
{{Note|Directly in SynfigStudio|Take a look to the {{l|Cutout_Tool}}. A special tool to easily select a piece of a composition by adding a mask.}}<br />
<br />
== Importing the cut out images ==<br />
<br />
This is as simple as going to the Caret Menu and selecting File->Import and the proper file for each part of the character. After repeating this process for each of the image files of your character you should obtain what is shown below:<br />
<br />
When you do the tutorial you'll notice that all the image layers have the same dimensions. The boundary of each image layer is the rectangle with the green handles shown. The bounding boxes of all the layers coincide since I expressly created each image with those dimensions and properly placed. It will allow us to do the following: Select all the layers ({{Shortcut|CTRL|}} + click each layer in the layer list) and go to the Top-Left and Bottom-Right parameters (they get greyed) in the parameter list. Make right-click -> Link on each one of the Top-Left, Bottom-Right parameter. It will link all the boundaries of the image layers to maintain them at the same relative position. This will prevent any accidental modification of the image edges and subsequently avoid any improper image deformation. <br />
<br />
<br />
[[File:CutOut Animation 1 0.63.06.png|frame|center]]<br />
<br />
<br />
Obviously the layer order is important so place each part of the character to compose it properly (in this case the left leg is behind the right one).<br />
<br />
== Group the image layers ==<br />
<br />
As you can imagine we are going to use Rotate Layers to perform the cut out animation. But before applying the rotation for each part of the character, we need to group it so that the rotation only applies to the desired layers. After grouping and renaming the group layers, it looks like this:<br />
<br />
<br />
[[File:CutOut Animation 2 0.63.06.png|right|thumb|Layers dialog after grouping]]<br />
<br />
== Add the Rotate Layers ==<br />
<br />
Before adding the Rotate Layers you should have analyzed your character. You need to have figured out the mechanical framework which the character's movements are bound by; the mechanics of the character's ''skeleton''. For a simple humanoid character one considers the hip as the center of the rotation of the whole skeleton. Each limb rotates relative to the hip's rotation. Also each sub-limb should rotate relative to its parent and the parent relative to the hip (we use the hip as the root ''bone''). <br />
<br />
In our current example, the body will rotate relative to the hip and the head relative to the body. When the character's hip is rotated there needs to be an identical rotation of the body. The head needs to rotate with the torso and additionally with the hip. This cumulative effect of rotating limbs and sub-limbs is known as the limb hierarchy. The head also needs its own individual rotation which won't affect any other limb.<br />
<br />
Let's start by adding a Rotate Layer to the hip. Go to the hip group layer and select the hip image layer. Insert a new Rotate layer (File->Layer->New Layer->Transform->Rotate) just above the hip image layer. Rename the layer to 'Rotate hip'. Now go to the Rotate Layer parameters dialog and select the Amount parameter. This parameter governs the angle of rotation. Export that parameter (right click) and give a proper name (hip). <br />
<br />
Now to set up the rotation layer. You should have noticed that there is a Origin parameter in the Rotation Layer, this is the origin of the rotation. It is very important that you set the origin to the proper position, allowing proper rotation of the image layers. So in this case you need to place the origin of rotation at the center of the character's hips. As another important example, arms will rotate about the shoulder and not about the hand.<br />
<br />
{|align = "center"<br />
|'''Before'''||'''After'''<br />
|-<br />
|[[File:CutOut Animation 3 0.63.06.png|400px|thumb|Original hip origin placement]] || [[File:CutOut Animation 4 0.63.06.png|400px|thumb|After, hip origin in proper position ]] <br />
|}<br />
<br />
{|align = "center"<br />
| Now consider our reasoning: ''When the character's hip is rotated there needs to be an identical rotation of the body. The head needs to rotate the with the torso and additionally with the hip''. Another way to put this would be that each limb bears it's own rotation, plus the rotations of those limbs higher up the limb hierarchy. To effect this you should add the same rotation layer to all the limbs that depend on the hip rotation. Copy and paste the ''Rotate hip'' layer to all the grouped image layers. Remember that the rotation parameter is exported, and so will the value shared between all the pasted rotation layers, giving our desired effect. All the limbs will now rotate in congruence with the hip. Magic! See the image. || [[File:CutOut Animation 5 0.63.06.png|thumb|After copy the Rotate hip layer over all the image layers]]<br />
|}<br />
<br />
For each of the next level limbs we need an additional individual Rotation Layer. The next level limbs are: the legs and the body. We need to add a Rotation Layer for each next level limb. You should repeat the same process for each one: Add the Rotate Layer, rename it, export the Amount parameter (very important) and place Origin to the proper rotation place.<br />
<br />
After doing that for the legs and for the body you should obtain something like this:<br />
<br />
[[File:CutOut Animation 6 0.63.06.png|frame|center]]<br />
<br />
Notice that fortunately you have exported the Amount parameter for each added rotation layer. So all the copies of the Rotate hip layer share the same rotation. The same applies to the other rotation layers (body and legs).<br />
<br />
Since the arms and the head are children limbs of the body they should suffer the same rotation as the body. Repeat the same for the body rotation layer and copy it over the arms and the head image layers.<br />
<br />
Now you can imagine how this works. You need now an additional rotation layer for the rest of the limbs to produce its individual rotation. So repeat the steps of Add a Rotate Layer, rename it, export the Amount parameter and center the Origin. You should obtain something like this:<br />
<br />
<br />
[[File:CutOut Animation 7 0.63.06.png|frame|center]]<br />
<br />
== Now animate it! ==<br />
<br />
It is time to animate the character!. You can go to the Library Panel and expand the ValueBase Nodes and select any of the already exported parameters (angles). Alternatively you can select the parameter itself from the proper layer. It will set the angle handle at the proper position showing the altered position and angle due to the nested rotations performed for each sub-limb. You can do use of the {{l|Sets Panel|Set feature}} of Synfig to select multiple scattered layers with only one double click.<br />
<br />
[[File:CutOut Animation 8 0.63.06.png|frame|center]]<br />
<br />
Don't move the origin of any layer! If you do, you will break the composition.<br />
<br />
Notice that I've prepared the individual images with a rounded hidden area (look again at the split character image and see what I mean). This allows us to make rotations without revealing sharp corners.<br />
<br />
== Tips & Tricks ==<br />
<br />
Herb, in the [http://www.synfig.org/forums/viewtopic.php?f=8&t=852 forum], uses a "Ball joint style construction". It's a simple solution to mask the lines of two intersecting shapes. <br />
You can use a circle of same color, not a {{l|Region Layer|region}} or {{l|Outline Layer|outline layer}}. The circle must cover the intersecting lines and must be above ({{l|Z_Depth_Parameter|z}}) both shapes in the Layers Panel. Rotation {{l|Handle|handles}} origins are close to origins of the circles. {{l|Linking}} them are optional and needs some tweaking of position when done. Here is a leg Herb constructed using this method. <br />
<br />
[[File:CutOut Animation 9 0.63.06.png|frame|center]]<br />
<br />
----<br />
<br />
For alternative set-ups and its pros and cons, see the {{l|Talk:Cut-out_Animation|talk page}}.</div>Darkspace65https://www.wiki.synfig.org/index.php?title=File:Rigarm.zip&diff=22360File:Rigarm.zip2016-11-14T18:09:00Z<p>Darkspace65: </p>
<hr />
<div></div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Basic_Bone_Tutorial&diff=22359Doc:Basic Bone Tutorial2016-11-14T18:08:05Z<p>Darkspace65: /* Projet file */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Basic Bone Tutorial}}<br />
{{Navigation|Category:Manual|Doc:Interface}}<br />
{{Navigation|Category:Tutorials|Doc:Basic Bone Tutorial}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
<!-- Page info end --><br />
<br />
[[File:bone.gif|left|frame]]<br />
<br clear=all><br />
== Introduction ==<br />
In this tutorial we are going to rig an arm with fixed joints using the {{l|Skeleton Layer}} and three bones. The arm consists of three parts: the '''upperArm''', the '''lowerArm''' and the '''hand'''. (pic.1) Each part is grouped in its own layer and the three groups are again grouped in a layer that is called '''arm''' (pic.2). <br />
[[File:bonestut01.png|left|frame|PICTURE 1: Three parts of the arm]] [[File:bonestut09.png|centre|frame|216x475px|PICTURE 2: The layers]]<br />
<br clear=all><br />
<br />
== Prepare the joints ==<br />
[[File:bonestut02.png|left|200x237px|frame|PICTURE 3: Joints]]<br />
Before we start rigging the arm we have to prepare it to make sure that the joints properly rotate. <br />
<br />
In ''picture 1'' we can see that the lower side of the upper arm is straight and does not have an outline, while the upper part of the lower arm has an outline that is curved. The bottom part of the lower arm does not have an outline and is also straight. The joint of the hand is also curved with an outline. <br />
<br />
To make sure that the joint parts of the arm rotate correctly, we made them with the help of a couple of {{l|Doc:Basic_Bone_Tutorial#Tip_for_making_a_crosshair|crosshairs}} (picture 3). In ''picture 4'' and ''picture 5'' we can see how the horizontal crosshair line matches the straight line of the bottom of the upper arm and at the same time the outline of the circle of the crosshair matches the top curved outline of the lower arm. <br />
<br />
The same principle is applied to the hand and the bottom part of the lower arm. The crosshairs also mark the centre of the rotation point that will later be used when placing the bones. Before placing the bones we can align the {{l|Group Transformation Widget}} (press control and move the left corner handle of the {{l|Group Transformation Widget}} to move it.) of the '''lowerArm''' group and the '''hand''' group with the crosshairs of the elbow and the wrist to check if the joints rotate correctly. <br />
<br />
Don’t forget to bring the arm into its original position by pressing undo. (Don’t worry if the hand does not rotate with the elbow when you check the elbow joint by using the {{l|Group Transformation Widget}}.)<br />
<br clear=all><br />
[[File:bonestut07.png|left|frame|PICTURE 4: Joints align]] [[File:bonestut08.png|center|frame|PICTURE 5: Joints align]] <br />
<br clear=all><br />
<br />
== Adding the bones ==<br />
[[File:bonestut13.png|left|frame|250x400px|PICTURE 6: Adding bone]]<br clear=all><br />
Now it’s time to add a {{l|Skeleton Layer}} that will provide the bones we need to rig the arm. <br />
<br />
Right-click on any layer in the {{l|Layers Panel}} and choose {{c|<New Layer>|<Other>|<Skeleton>}}. A new {{l|Skeleton Layer}} (pic. 7) will appear in the {{l|Layers Panel}} alongside with a small bone in the canvas (pic.6). Put the {{l|Skeleton Layer}} above the '''arm''' group if it is not already there. The green handle of the bone is the origin of the bone and is used to move the bone in place and is also its centre of rotation. The blue handle is used to rotate the bone. The orange handle determines the lenght of the bone is used to stretch the bone and its contents. The first bone is the parent bone and should be moved toward the shoulder and stretched so that it almost reaches the outlines of the first crosshair of the elbow. Right-click on any of the handles of the parent bone and select {{Literal|Create Child Bone}}. Move the green origin point of the child bone so that it matches the crosshair of the elbow and stretch it until it almost reaches the crosshair of the wrist. Right click on any of the handles of the child bone and create another child bone. Move the green origin point of the second child bone so that it matches the crosshair of the wrist (pic.8). Stretch the bone until it reaches the end of the fingers.<br />
[[File:bonestut11.png|left|frame|200x200px|PICTURE 7: Adding skeleton layer]][[File:bonestut05.png|center|frame|300x300px|PICTURE 8: Green origin point hand]]<br />
<br clear=all><br />
<br />
== Attaching the bones ==<br />
[[File:bonestut12.png|left|frame|PICTURE 8: Attaching hand to second child bone.]]<br />
Now that the {{l|Skeleton Layer}} is in place we have to attach the bones to the parts of the arm. In the {{l|Layers Panel}} click on the '''upperArm''' group, right-click and {{Literal|Select All Child Layers}}. Then press {{Shortcut|ctrl|A}} in the canvas window. With everything in the '''upperArm''' group highlighted, {{Shortcut|ctrl}}-click on any bone in the canvas window and right-click on any of the handles of the parent bone and click {{Literal|Link to Bone}}. The '''upperArm''' group is now linked to the parent bone. Go the {{l|Layers Panel}} again and select the '''lowerArm''' group. Right-click and {{Literal|Select All Child Layers}}. Press {{Shortcut|ctrl|A}} in the canvas window and {{Shortcut|ctrl}}-click on one of the bones. Then right-click on any of the handles of the first child bone and select {{Literal|Link to bone}}. The '''lowerArm''' group is now linked to the second child bone. In the {{l|Layers Panel}} select all the child layers of the '''hand''' group and press {{Shortcut|ctrl|A}} in the canvas window. {{Shortcut|ctrl}}-click on any bone and then right-click on any of the handles of the second child bone and select {{Literal|Link to bone}} (pic.8) The hand is now linked to the second child bone and the entire skeleton is now linked to the arm.<br />
<br />
<br clear=all><br />
<br />
== Tip for making a crosshair==<br />
Making a crosshair in Synfig is easy. Draw a circle. Draw the outlines of a square and align them with the circle. Draw an X using the corners of the square as a reference. Delete the square. Group the circle and the X. Rotate 45 degrees using the {{l|Group Transformation Widget}}.<br />
[[File:bonestut18.png|left|frame|PICTURE 9: Drawing a crosshair.]]<br />
<br clear=all><br />
<br />
==Projet file==<br />
The sif file containing the parts of this tutorial can be found {{l|Media:rigarm.zip|here}}<br />
<br />
== Next Steps ==<br />
<br />
This is the end of the introductory tutorials. From here you can take a look at the {{l|Doc:Interface|Interface}} page, or continue reading or doing the rest of {{l|Category:Tutorials|Tutorials}}. The {{l|Category:Manual|Manual}} gives you a list of the available articles to read for a more complete understanding of Synfig.<br />
<br />
{{Navigation|Category:Manual|Doc:Interface}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=File:Riggedchar.zip&diff=22358File:Riggedchar.zip2016-11-14T18:05:18Z<p>Darkspace65: </p>
<hr />
<div></div>Darkspace65https://www.wiki.synfig.org/index.php?title=Skeleton_Layer&diff=22357Skeleton Layer2016-11-14T18:04:41Z<p>Darkspace65: </p>
<hr />
<div><!-- Page info --><br />
{{Title|Skeleton Layer}}<br />
{{TOCright}}<br />
{{Category|Layers}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Layer_other_skeleton_icon.png|64px}}<br />
<br />
I'm a Draft please help me to be efficient ... <br />
<br />
==Parameters of Skeleton Layers==<br />
<br />
The parameters of the skeleton layers are:<br />
<br />
{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:#C0C0C0"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-style="background:#"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Z Depth}}<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Amount Parameter|Amount}}<br />
||0.500000<br />
||real<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_string_icon.png|16px}} Name<br />
||skeleton<br />
||string<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:type_list_icon.png|16px}} {{l|Bones|Bones}}<br />
||list (Static List)<br />
||list<br />
<br />
|}<br />
<br />
== Summary ==<br />
<br />
In the skeleton layer, each vertex is influenced by a weighted average combination of bones ''maybe from different skeletons?''.<br />
<br />
There are two ways to make a vector be influenced by bone(s). First is the {{l|Skeleton_Layer#Link to Bone|Link to Bone}} action that would give a 100% of influence of one bone to one vector. Second is the {{l|Skeleton_Layer#Link to Skeleton|Link to Skeleton}} that is a semiautomatic way to give weighted influence to a vector from all the bones that overlaps its influence area over the vector position. The more covered the vector is by the influence area, the higher is the influence weight. In any case you can manually specify the bone and the influence that you want by editing the values in the vector (sub)parameters. We need to modify the bone(s) with handles to perform the indirect movement to the vectors that are influenced by it(them)<br />
<br />
== Skeleton construction ==<br />
<br />
Add a {{Literal|Skeleton layer}} :<br />
* If your {{l|Canvas}} is empty you can do that from the {{l|Category:Main_Menu|main}} or {{L|Caret|caret}} menus {{c|<Layer>|<New Layer>|<Other>|Skeleton|}}. <br />
* If your canvas is not empty, right clicking inside the {{l|Layers_Panel}}. <br />
Once you have a {{Literal|Skeleton layer}}, the first bone appears. You have created the first bone of your Skeleton, this is your '''first parent bone'''.<br />
<br />
Each bones have the following {{l|Handle|handles}} to control them : {{literal|Origin}}, {{literal|Angle}}, {{literal|Local Length Scale}}, {{literal|Bone Width}} and {{literal|Tip Width}}. Take a look inside the {{l|Parameters Panel}} of the {{Literal|Skeleton layer}}, those handles are relative to some of those values (with also some advanced parameters). <br />
<br />
From the {{l|WorkArea}}, with the Bones {{l|Handle|handles}} you can easily move and adjust part of your Skeleton.<br />
<br />
Now, you can had child bones :<br />
* Right click on any {{l|Handle|handles}} of the parent bone you want and select {{Literal|Create Child Bone}}.<br />
* Repeat the operation, choosing accordingly the parent bone of your future bone (the parent of a hand bone is the arm, the parent bone of a finger is the hand bone...), to create your Skeleton.<br />
<br />
When created, a {{Literal|Skeleton layer}}, is {{l|Canvas Layer Menu|Disabled from rendering}} : the layer is visible in the {{l|WorkArea}} but disabled in the final Render.<br />
<br />
==Parameters of a Bone==<br />
<br />
The parameters of a bone are:<br />
<br />
{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:#C0C0C0"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-style="background:#"<br />
||{{l|Image:Type_string_icon.png|16px}} Name<br />
||Bone 1<br />
||string<br />
<br />
|-style="background:#eeeeee"<br />
|| {{l|Parent Parameter|Parent}}<br />
||No Parent<br />
||bone_valuenode<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_vector_icon.png|16px}} {{l|Origin Parameter|Origin}}<br />
||0.00000, 0.00000<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_angle_icon.png|16px}} {{l|Angle Parameter|Angle}}<br />
||0.00°<br />
||angle<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Skeleton_Layer#Local_Length_Scale|Local Length Scale}}<br />
||1.00000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Skeleton_Layer#Bone_Width|Bone Width}}<br />
||0.10000<br />
||real<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Skeleton_Layer#Recursive_Length_Scale|Recursive Length Scale}}<br />
||1.00000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Skeleton_Layer#Tip_Width|Tip Width}}<br />
||0.10000<br />
||real<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Z-Depth}}<br />
||0.00000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Skeleton_Layer#Length_Setup|Length Setup}}<br />
||1.00000<br />
||real<br />
<br />
|}<br />
=== Parent ===<br />
<br />
=== Angle ===<br />
<br />
=== Local Length Scale ===<br />
<br />
=== Bone Width ===<br />
<br />
Has {{Literal|Tip Width}}, {{Literal|Bone Width}} is used to set the influence of the bone before the use of {{literal|Link to Skeleton}} action. {{Literal|Bone Width}} parameter can be adjusted by the witdh {{l|Handle}}. When adjusting the {{Literal|Bone Width}}, the bone's shape change accordingly.<br />
<br />
=== Recursive Length Scale ===<br />
<br />
=== Tip Width ===<br />
<br />
Has {{Literal|Bone Width}}, {{Literal|Tip Width}} is used to set the influence of the bone before the use of {{literal|Link to Skeleton}} action. {{Literal|Tip Width}} parameter can be adjusted by the witdh {{l|Handle}}. When adjusting the {{Literal|Tip Width}}, the bone's shape change accordingly.<br />
<br />
=== Z-Depth ===<br />
<br />
This parameter can be used to change the 'depth' (order) of a Bone in a Skeleton Layer.<br />
<br />
=== Length Setup ===<br />
<br />
== Skeleton / Bones actions ==<br />
<br />
=== Create Child Bone ===<br />
<br />
When you add a {{Literal|Skeleton Layer}}, only one bone is created. In order to create a usable skeleton, you will need to add more bones.<br />
<br />
Right clicking on any {{l|Handle|handles}} of bone display a contextual menu. From this menu select {{Literal|Create Child Bone}} and a new child bone will be created. This child bone will move accordingly to his parent.<br />
<br />
=== Link to Bone ===<br />
<br />
{{Literal|Link to Bone}} link artwork, for example handles of a shape created with the {{l|Spline Tool}}, to a bone.<br />
<br />
Select a single or multiple handles from your artwork, right click on a bone and from the contextual menu, select {{Literal|Link to Bone}}. Now when you move the Bone, the selected handles also move.<br />
<br />
See it in action in [https://www.youtube.com/watch?v=9yCLR-broWA bones dev part 5]<br />
<br />
=== Link to Skeleton ===<br />
<br />
Before you use {{Literal|Link to Skeleton}} you should adjust the {{literal|Bone width}} and {{literal|Tip width}} of each bones of you skeleton to set the bone shape.<br />
<br />
Select one or more handles from your artwork, select the {{Literal|Skeleton layer}} right click on it and from the contextual menu, select {{Literal|Link to Skeleton}}. All the handles covered by the bone shape will be automatically linked.<br />
<br />
See it in action : [https://www.youtube.com/watch?v=NbI6TeAHbgs Bones dev part 7]<br />
<br />
=== Disconnect ===<br />
<br />
If you want to disconnect / unlink a bone from the part of the artwork it is linked to. <br />
* From the {{l|Layers Panel}}, select the {{l|Skeleton Layer}}<br />
* From the {{l|Parameters Panel}}, open the {{literal|Bones}} list<br />
* Select the corresponding {{literal|Item}} (the according bone's {{l|Handle|handles}} will be highligthed whith red squares)<br />
* Right click to open the context menu and select {{literal|Disconnect}}.<br />
<br />
=== Change parent ===<br />
<br />
You can also change the parent of a bone in the skeleton, even during animation. <br />
* From the {{l|Layers Panel}}, select the {{l|Skeleton Layer}}<br />
* From the {{l|Parameters Panel}}, open the {{literal|Bones}} list<br />
* Select the corresponding {{literal|Item}} (the according bone's {{l|Handle|handles}} will be highligthed whith red squares)<br />
* Click on the {{literal|Value}} of {{literal|Parent}} to change the parent or set the parent to {{literal|none}}.<br />
<br />
== See Also ==<br />
<br />
* To deform raster images : {{l|Skeleton_Deformation_Layer}}.<br />
* {{l|Doc:Basic_Bone_Tutorial}}<br />
* A SIF-file of a rigged character using bones can be found {{l|Media:riggedchar.zip|here}}.</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Skeleton_Layer&diff=22356Skeleton Layer2016-11-14T17:57:54Z<p>Darkspace65: </p>
<hr />
<div><!-- Page info --><br />
{{Title|Skeleton Layer}}<br />
{{TOCright}}<br />
{{Category|Layers}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Layer_other_skeleton_icon.png|64px}}<br />
<br />
I'm a Draft please help me to be efficient ... <br />
<br />
==Parameters of Skeleton Layers==<br />
<br />
The parameters of the skeleton layers are:<br />
<br />
{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:#C0C0C0"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-style="background:#"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Z Depth}}<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Amount Parameter|Amount}}<br />
||0.500000<br />
||real<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_string_icon.png|16px}} Name<br />
||skeleton<br />
||string<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:type_list_icon.png|16px}} {{l|Bones|Bones}}<br />
||list (Static List)<br />
||list<br />
<br />
|}<br />
<br />
== Summary ==<br />
<br />
In the skeleton layer, each vertex is influenced by a weighted average combination of bones ''maybe from different skeletons?''.<br />
<br />
There are two ways to make a vector be influenced by bone(s). First is the {{l|Skeleton_Layer#Link to Bone|Link to Bone}} action that would give a 100% of influence of one bone to one vector. Second is the {{l|Skeleton_Layer#Link to Skeleton|Link to Skeleton}} that is a semiautomatic way to give weighted influence to a vector from all the bones that overlaps its influence area over the vector position. The more covered the vector is by the influence area, the higher is the influence weight. In any case you can manually specify the bone and the influence that you want by editing the values in the vector (sub)parameters. We need to modify the bone(s) with handles to perform the indirect movement to the vectors that are influenced by it(them)<br />
<br />
== Skeleton construction ==<br />
<br />
Add a {{Literal|Skeleton layer}} :<br />
* If your {{l|Canvas}} is empty you can do that from the {{l|Category:Main_Menu|main}} or {{L|Caret|caret}} menus {{c|<Layer>|<New Layer>|<Other>|Skeleton|}}. <br />
* If your canvas is not empty, right clicking inside the {{l|Layers_Panel}}. <br />
Once you have a {{Literal|Skeleton layer}}, the first bone appears. You have created the first bone of your Skeleton, this is your '''first parent bone'''.<br />
<br />
Each bones have the following {{l|Handle|handles}} to control them : {{literal|Origin}}, {{literal|Angle}}, {{literal|Local Length Scale}}, {{literal|Bone Width}} and {{literal|Tip Width}}. Take a look inside the {{l|Parameters Panel}} of the {{Literal|Skeleton layer}}, those handles are relative to some of those values (with also some advanced parameters). <br />
<br />
From the {{l|WorkArea}}, with the Bones {{l|Handle|handles}} you can easily move and adjust part of your Skeleton.<br />
<br />
Now, you can had child bones :<br />
* Right click on any {{l|Handle|handles}} of the parent bone you want and select {{Literal|Create Child Bone}}.<br />
* Repeat the operation, choosing accordingly the parent bone of your future bone (the parent of a hand bone is the arm, the parent bone of a finger is the hand bone...), to create your Skeleton.<br />
<br />
When created, a {{Literal|Skeleton layer}}, is {{l|Canvas Layer Menu|Disabled from rendering}} : the layer is visible in the {{l|WorkArea}} but disabled in the final Render.<br />
<br />
==Parameters of a Bone==<br />
<br />
The parameters of a bone are:<br />
<br />
{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:#C0C0C0"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-style="background:#"<br />
||{{l|Image:Type_string_icon.png|16px}} Name<br />
||Bone 1<br />
||string<br />
<br />
|-style="background:#eeeeee"<br />
|| {{l|Parent Parameter|Parent}}<br />
||No Parent<br />
||bone_valuenode<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_vector_icon.png|16px}} {{l|Origin Parameter|Origin}}<br />
||0.00000, 0.00000<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_angle_icon.png|16px}} {{l|Angle Parameter|Angle}}<br />
||0.00°<br />
||angle<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Skeleton_Layer#Local_Length_Scale|Local Length Scale}}<br />
||1.00000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Skeleton_Layer#Bone_Width|Bone Width}}<br />
||0.10000<br />
||real<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Skeleton_Layer#Recursive_Length_Scale|Recursive Length Scale}}<br />
||1.00000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Skeleton_Layer#Tip_Width|Tip Width}}<br />
||0.10000<br />
||real<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Z-Depth}}<br />
||0.00000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Skeleton_Layer#Length_Setup|Length Setup}}<br />
||1.00000<br />
||real<br />
<br />
|}<br />
=== Parent ===<br />
<br />
=== Angle ===<br />
<br />
=== Local Length Scale ===<br />
<br />
=== Bone Width ===<br />
<br />
Has {{Literal|Tip Width}}, {{Literal|Bone Width}} is used to set the influence of the bone before the use of {{literal|Link to Skeleton}} action. {{Literal|Bone Width}} parameter can be adjusted by the witdh {{l|Handle}}. When adjusting the {{Literal|Bone Width}}, the bone's shape change accordingly.<br />
<br />
=== Recursive Length Scale ===<br />
<br />
=== Tip Width ===<br />
<br />
Has {{Literal|Bone Width}}, {{Literal|Tip Width}} is used to set the influence of the bone before the use of {{literal|Link to Skeleton}} action. {{Literal|Tip Width}} parameter can be adjusted by the witdh {{l|Handle}}. When adjusting the {{Literal|Tip Width}}, the bone's shape change accordingly.<br />
<br />
=== Z-Depth ===<br />
<br />
This parameter can be used to change the 'depth' (order) of a Bone in a Skeleton Layer.<br />
<br />
=== Length Setup ===<br />
<br />
== Skeleton / Bones actions ==<br />
<br />
=== Create Child Bone ===<br />
<br />
When you add a {{Literal|Skeleton Layer}}, only one bone is created. In order to create a usable skeleton, you will need to add more bones.<br />
<br />
Right clicking on any {{l|Handle|handles}} of bone display a contextual menu. From this menu select {{Literal|Create Child Bone}} and a new child bone will be created. This child bone will move accordingly to his parent.<br />
<br />
=== Link to Bone ===<br />
<br />
{{Literal|Link to Bone}} link artwork, for example handles of a shape created with the {{l|Spline Tool}}, to a bone.<br />
<br />
Select a single or multiple handles from your artwork, right click on a bone and from the contextual menu, select {{Literal|Link to Bone}}. Now when you move the Bone, the selected handles also move.<br />
<br />
See it in action in [https://www.youtube.com/watch?v=9yCLR-broWA bones dev part 5]<br />
<br />
=== Link to Skeleton ===<br />
<br />
Before you use {{Literal|Link to Skeleton}} you should adjust the {{literal|Bone width}} and {{literal|Tip width}} of each bones of you skeleton to set the bone shape.<br />
<br />
Select one or more handles from your artwork, select the {{Literal|Skeleton layer}} right click on it and from the contextual menu, select {{Literal|Link to Skeleton}}. All the handles covered by the bone shape will be automatically linked.<br />
<br />
See it in action : [https://www.youtube.com/watch?v=NbI6TeAHbgs Bones dev part 7]<br />
<br />
=== Disconnect ===<br />
<br />
If you want to disconnect / unlink a bone from the part of the artwork it is linked to. <br />
* From the {{l|Layers Panel}}, select the {{l|Skeleton Layer}}<br />
* From the {{l|Parameters Panel}}, open the {{literal|Bones}} list<br />
* Select the corresponding {{literal|Item}} (the according bone's {{l|Handle|handles}} will be highligthed whith red squares)<br />
* Right click to open the context menu and select {{literal|Disconnect}}.<br />
<br />
=== Change parent ===<br />
<br />
You can also change the parent of a bone in the skeleton, even during animation. <br />
* From the {{l|Layers Panel}}, select the {{l|Skeleton Layer}}<br />
* From the {{l|Parameters Panel}}, open the {{literal|Bones}} list<br />
* Select the corresponding {{literal|Item}} (the according bone's {{l|Handle|handles}} will be highligthed whith red squares)<br />
* Click on the {{literal|Value}} of {{literal|Parent}} to change the parent or set the parent to {{literal|none}}.<br />
<br />
== See Also ==<br />
<br />
* To deform raster images : {{l|Skeleton_Deformation_Layer}}.<br />
* {{l|Doc:Basic_Bone_Tutorial}}<br />
* A SIF-file of a rigged character using bones can be found {{l|Media:freecharrigged.sifz|here}}.</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Time_Loop_Layer&diff=22142Time Loop Layer2016-08-07T14:42:40Z<p>Darkspace65: /* Parameters of Time Loop Layers */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Time Loop Layer}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Layer_other_timeloop_icon.png|64px}}<br />
<br />
== About Time Loop Layers==<br />
<br />
The Time Loop layer can be used to repeat an animation over and over. It loops a section of the layers below and within the same canvas over and over.<br />
<br />
See also the {{l|Convert#Time_Loop|Time Loop ValueNode}} conversion, which can be used to loop the value of a single parameter, rather than an entire layer or group of layers.<br />
<br />
==Parameters of Time Loop Layers==<br />
<br />
These parameters, to prevent undesired modification, by default are {{l|Static_Parameters|statics}}. <br />
<br />
To animate the parameters of the Time Loop Layer right-click on the 'green guy'-icon of the parameter you want to animate in the Parameters Panel of the Time Loop layer and set {{literal|Allow animation}} and switch to {{L|Animate_Editing_Mode|Animate Edit Mode}}.<br />
<br />
Once they are no more {{l|Static_Parameters|statics}}, like any other parameters in Synfig they can be animated, so that they change over time. This can be confusing, so make sure you aren't in {{L|Animate_Editing_Mode|Animate Edit Mode}} when working with the Time Loop layer, unless you know what you're doing!<br />
<br />
The parameters of the time loop layers are:<br />
<br />
{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-style="background:#"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Z Depth}}<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_time_icon.png|16px}} {{l|Time_Loop_Layer#Link_Time_.28time.29|Link Time}}<br />
||0f<br />
||time<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_time_icon.png|16px}} {{l|Time_Loop_Layer#Local_Time_.28time.29|Local Time}}<br />
||0f<br />
||time<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_time_icon.png|16px}} {{l|Time_Loop_Layer#Duration_.28time.29|Duration}}<br />
||1s<br />
||time<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_bool_icon.png|16px}} {{l|Time_Loop_Layer#Only_For_Positive_Duration_.28bool.29|Only For Positive Duration}}<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} {{l|Time_Loop_Layer#Symmetrical_.28bool.29|Symmetrical}}<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|}<br />
<br />
=== Link Time (time) ===<br />
Start time of cycled material/child layers.<br />
<br />
=== Local Time (time) ===<br />
Start time of loop. (this is currently (since 120323 at least) ''broken'' and has no effect on time loops, see http://synfig.org/forums/viewtopic.php?f=12&t=3526#p14986 for a discussion)<br />
=== Duration (time) ===<br />
Number of seconds or frames that are looped in the child layer.<br />
<br />
=== Only For Positive Duration (bool) ===<br />
* If checked and {{Literal|Duration}} is zero or negative, then the time loop layer is effectively disabled, and acts as if it wasn't there.<br />
* If not checked and the Duration is zero, the Time Loop layer freezes the animation of the children layers at the value of {{Literal|Link Time}}.<br />
<br />
=== Symmetrical (bool) ===<br />
If not checked, and the current time is less than {{Literal|Local Time}}, then {{Literal|Duration}} is taken off the resulting time. This is to provide compatibility with {{l|Time Loop Layer (v0.1)|version 0.1}} of the time loop layer.<br />
<br />
== How to loop ==<br />
<br />
The Time Loop layer repeatedly loops through the {{Literal|Duration}} seconds of its child layers, from {{Literal|Link Time}} to {{Literal|Link Time}} + {{Literal|Duration}}. {{Literal|Local Time}} is used to line up the offset of the time looping. When the Time Loop layer is asked to set its time to {{Literal|Local Time}}, it sets the time in its child layers to be {{Literal|Link Time}}, ie. the start of the loop.<br />
<br />
=== Breaking loop ===<br />
<br />
1. In the layer's parameters of the time loop, you need to remove the 'green guy' from {{l|Duration Parameter}}. Just right-click on him and set {{literal|Allow animation}}.<br />
2. On the {{L|Timebar|timeline}} navigate to a place where you want to break the animation. And enter the {{l|Animation Mode}}.<br />
3. In the time loop parameters, set 'Duration' to {{literal|EOT}} (End-of-Time).<br />
4. Now you have three {{l|Waypoint|waypoints}}. One before the current, we left it as it is. One is current, we {{l|Convert|convert}} it to the {{literal|constant}} (right-click on it -> Both -> Constant). And one after current, this one have to be removed (right-click on it -> Remove). <br />
5. Now test it. Pay attention, that loop will always break at the very first frame of you animation, so you need to break it in the right place. <br />
<br />
====Detailed explanation====<br />
'Green guy' is a guard that says "You shall not pass!" to the animation. So when you attempt to change such parameter in animation mode it just changes the usual way. It's done to prevent unnecessary parameters to be animated, e.g. 'Blend method'.<br />
<br />
Setting 'Duration' to EOT. If you set it to 0f, then the whole animation will stop, because you try to play it from 0f (local time) to 0f (duration). And EOT means it'll continue to play your animation to the end of the time...<br />
<br />
Removing waypoint after current one. If you skip this step, then at the next waypoint 'Duration' parameter will be restored to the value before current waypoint. It's a standard Synfig's behavior, but there's a magical button somewhere that can change it.<br />
<br />
Converting current waypoint to the constant. Without it, 'Duration' will be smoothly interpolated from value you set to the EOT and the constant type will just set immediately at the waypoint. Interpolation can be a bit confusing sometimes, so you better read this: http://wiki.synfig.org/Waypoint<br />
<br />
<br />
<!--<br />
To break a loop and continue animating you basically need to do two things; break the loop with a {{L|Waypoint|waypoint}} and copy the animation {{L|Keyframe|keyframe}} to your position in the {{L|Timebar|timeline}}.<br />
* Find out which frame in the child layers that corresponds to the frame in the time loop layer where you want to break the loop.<br />
Goto this frame in the child layer and add a {{L|Keyframe|keyframe}} here. Then goto the frame where you want to break the loop and duplicate the keyframe.<br />
* Set the first time loop {{Literal|Duration}} waypoint to {{Literal|Constant}} and check {{Literal|Only For Positive Duration}}. Then at the breaking frame set {{Literal|Duration}} to 0.<br />
* Continue animating the child layer(s) which are not looped anymore.<br />
--><br />
<br />
== Visualized Example ==<br />
<br />
For example, suppose:<br />
* Link Time is 5s<br />
* Duration is 3s<br />
* Local Time' is 4s<br />
<br />
And suppose that the Time Loop layer is applied over an existing animation. The {{Literal|Link Time}} and {{Literal|Duration}} specify that the section from 5s to 8s in the children layers will be looped. The {{Literal|Local Time}} specifies that this loop will be at the beginning at 4s. (And so also therefore at 1s, 7s, 10s, etc).<br />
<br />
This is how the mapping actually works:<br />
<br />
{| border="1" cellspacing="0"<br />
|'''real time'''||'''child time<br/>(symmetrical = true)'''||'''child time<br/>(symmetrical = false)'''<br />
|-<br />
| 0 || 7 || 4<br />
|-<br />
| 1 || 5 || 2<br />
|-<br />
| 2 || 6 || 3<br />
|-<br />
| 3 || 7 || 4<br />
|-<br />
| 4 || 5 || 5 (local time = 4; link time = 5)<br />
|-<br />
| 5 || 6 || 6<br />
|-<br />
| 6 || 7 || 7<br />
|-<br />
| 7 || 5 || 5 (duration = 3, so loop repeats after 3 seconds)<br />
|-<br />
| 8 || 6 || 6<br />
|-<br />
| 9 || 7 || 7<br />
|-<br />
| 10 || 5 || 5<br />
|}<br />
<br />
Specifying a huge number for the Duration parameter effectively turns the Time Loop layer into a Time Shift layer. The Link Time and Local Time parameters controls which time in the children lines up with which time in the Time Loop layer, giving the amount of the timeshift, with both positive and negative differences working as expected.<br />
<br />
== Contrived Example ==<br />
<br />
Download and examine this example file: {{l|Media:Time-loop-demo-0.2.sifz|Time-loop-demo-0.2.sifz}}<br />
<br />
It's a 10 second animation, and shows 2 circles. The top one moves linearly from the left to the right. Its position is marked by static text digits 0 through 10.<br />
<br />
The other circle is an identical copy of the first one, with the same waypoints, but it's inside an Group layer. The parameters are:<br />
* Link Time: 5s<br />
* Duration: 1.5s<br />
* Local Time: 2s<br />
* Symmetrical: true<br />
<br />
So as time=2s, the top circle is at position 2 (local time) and the bottom circle is at position 5 (link time):<br />
<br />
{{l|Image:Time-loop-demo-0.2-2s-0f.png}}<br />
<br />
The loop is 1.5s long, so the bottom circle is also at position 5 every 1.5 seconds before and after this point in time, for example at t=3.5s and at t=8s:<br />
<br />
{{l|Image:Time-loop-demo-0.2-3s-12f.png}}<br />
{{l|Image:Time-loop-demo-0.2-8s-0f.png}}<br />
<br />
The following two images show the positions at t=0s and t=3s. The loop starts at t=2s, so it's also at the start at t=0.5s. So at t=0s it's half a second before finishing the previous loop. And at t=3s the same is true, but 2 loops later on:<br />
<br />
{{l|Image:Time-loop-demo-0.2-0s-0f.png}}<br />
{{l|Image:Time-loop-demo-0.2-3s-0f.png}}<br />
<br />
There's a rendered copy of this example on [http://www.youtube.com/watch?v=WyYLd7319Gw YouTube], and it's also available for download: {{l|Media:Time-loop-demo-0.2.avi|Time-loop-demo-0.2.avi}}.</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Time_Loop_Layer&diff=22141Time Loop Layer2016-08-07T14:41:03Z<p>Darkspace65: /* Parameters of Time Loop Layers */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Time Loop Layer}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Layer_other_timeloop_icon.png|64px}}<br />
<br />
== About Time Loop Layers==<br />
<br />
The Time Loop layer can be used to repeat an animation over and over. It loops a section of the layers below and within the same canvas over and over.<br />
<br />
See also the {{l|Convert#Time_Loop|Time Loop ValueNode}} conversion, which can be used to loop the value of a single parameter, rather than an entire layer or group of layers.<br />
<br />
==Parameters of Time Loop Layers==<br />
<br />
These parameters, to prevent undesired modification, by default are {{l|Static_Parameters|statics}}. <br />
<br />
To animate the parameters of the Time Loop Layer right-click on the green-guy icon of the parameter you want to animate in the Parameters Panel of the Time Loop layer and set {{literal|Allow animation}} and switch to {{L|Animate_Editing_Mode|Animate Edit Mode}}.<br />
<br />
Once they are no more {{l|Static_Parameters|statics}}, like any other parameters in Synfig they can be animated, so that they change over time. This can be confusing, so make sure you aren't in {{L|Animate_Editing_Mode|Animate Edit Mode}} when working with the Time Loop layer, unless you know what you're doing!<br />
<br />
The parameters of the time loop layers are:<br />
<br />
{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-style="background:#"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Z Depth}}<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_time_icon.png|16px}} {{l|Time_Loop_Layer#Link_Time_.28time.29|Link Time}}<br />
||0f<br />
||time<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_time_icon.png|16px}} {{l|Time_Loop_Layer#Local_Time_.28time.29|Local Time}}<br />
||0f<br />
||time<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_time_icon.png|16px}} {{l|Time_Loop_Layer#Duration_.28time.29|Duration}}<br />
||1s<br />
||time<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_bool_icon.png|16px}} {{l|Time_Loop_Layer#Only_For_Positive_Duration_.28bool.29|Only For Positive Duration}}<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} {{l|Time_Loop_Layer#Symmetrical_.28bool.29|Symmetrical}}<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|}<br />
<br />
=== Link Time (time) ===<br />
Start time of cycled material/child layers.<br />
<br />
=== Local Time (time) ===<br />
Start time of loop. (this is currently (since 120323 at least) ''broken'' and has no effect on time loops, see http://synfig.org/forums/viewtopic.php?f=12&t=3526#p14986 for a discussion)<br />
=== Duration (time) ===<br />
Number of seconds or frames that are looped in the child layer.<br />
<br />
=== Only For Positive Duration (bool) ===<br />
* If checked and {{Literal|Duration}} is zero or negative, then the time loop layer is effectively disabled, and acts as if it wasn't there.<br />
* If not checked and the Duration is zero, the Time Loop layer freezes the animation of the children layers at the value of {{Literal|Link Time}}.<br />
<br />
=== Symmetrical (bool) ===<br />
If not checked, and the current time is less than {{Literal|Local Time}}, then {{Literal|Duration}} is taken off the resulting time. This is to provide compatibility with {{l|Time Loop Layer (v0.1)|version 0.1}} of the time loop layer.<br />
<br />
== How to loop ==<br />
<br />
The Time Loop layer repeatedly loops through the {{Literal|Duration}} seconds of its child layers, from {{Literal|Link Time}} to {{Literal|Link Time}} + {{Literal|Duration}}. {{Literal|Local Time}} is used to line up the offset of the time looping. When the Time Loop layer is asked to set its time to {{Literal|Local Time}}, it sets the time in its child layers to be {{Literal|Link Time}}, ie. the start of the loop.<br />
<br />
=== Breaking loop ===<br />
<br />
1. In the layer's parameters of the time loop, you need to remove the 'green guy' from {{l|Duration Parameter}}. Just right-click on him and set {{literal|Allow animation}}.<br />
2. On the {{L|Timebar|timeline}} navigate to a place where you want to break the animation. And enter the {{l|Animation Mode}}.<br />
3. In the time loop parameters, set 'Duration' to {{literal|EOT}} (End-of-Time).<br />
4. Now you have three {{l|Waypoint|waypoints}}. One before the current, we left it as it is. One is current, we {{l|Convert|convert}} it to the {{literal|constant}} (right-click on it -> Both -> Constant). And one after current, this one have to be removed (right-click on it -> Remove). <br />
5. Now test it. Pay attention, that loop will always break at the very first frame of you animation, so you need to break it in the right place. <br />
<br />
====Detailed explanation====<br />
'Green guy' is a guard that says "You shall not pass!" to the animation. So when you attempt to change such parameter in animation mode it just changes the usual way. It's done to prevent unnecessary parameters to be animated, e.g. 'Blend method'.<br />
<br />
Setting 'Duration' to EOT. If you set it to 0f, then the whole animation will stop, because you try to play it from 0f (local time) to 0f (duration). And EOT means it'll continue to play your animation to the end of the time...<br />
<br />
Removing waypoint after current one. If you skip this step, then at the next waypoint 'Duration' parameter will be restored to the value before current waypoint. It's a standard Synfig's behavior, but there's a magical button somewhere that can change it.<br />
<br />
Converting current waypoint to the constant. Without it, 'Duration' will be smoothly interpolated from value you set to the EOT and the constant type will just set immediately at the waypoint. Interpolation can be a bit confusing sometimes, so you better read this: http://wiki.synfig.org/Waypoint<br />
<br />
<br />
<!--<br />
To break a loop and continue animating you basically need to do two things; break the loop with a {{L|Waypoint|waypoint}} and copy the animation {{L|Keyframe|keyframe}} to your position in the {{L|Timebar|timeline}}.<br />
* Find out which frame in the child layers that corresponds to the frame in the time loop layer where you want to break the loop.<br />
Goto this frame in the child layer and add a {{L|Keyframe|keyframe}} here. Then goto the frame where you want to break the loop and duplicate the keyframe.<br />
* Set the first time loop {{Literal|Duration}} waypoint to {{Literal|Constant}} and check {{Literal|Only For Positive Duration}}. Then at the breaking frame set {{Literal|Duration}} to 0.<br />
* Continue animating the child layer(s) which are not looped anymore.<br />
--><br />
<br />
== Visualized Example ==<br />
<br />
For example, suppose:<br />
* Link Time is 5s<br />
* Duration is 3s<br />
* Local Time' is 4s<br />
<br />
And suppose that the Time Loop layer is applied over an existing animation. The {{Literal|Link Time}} and {{Literal|Duration}} specify that the section from 5s to 8s in the children layers will be looped. The {{Literal|Local Time}} specifies that this loop will be at the beginning at 4s. (And so also therefore at 1s, 7s, 10s, etc).<br />
<br />
This is how the mapping actually works:<br />
<br />
{| border="1" cellspacing="0"<br />
|'''real time'''||'''child time<br/>(symmetrical = true)'''||'''child time<br/>(symmetrical = false)'''<br />
|-<br />
| 0 || 7 || 4<br />
|-<br />
| 1 || 5 || 2<br />
|-<br />
| 2 || 6 || 3<br />
|-<br />
| 3 || 7 || 4<br />
|-<br />
| 4 || 5 || 5 (local time = 4; link time = 5)<br />
|-<br />
| 5 || 6 || 6<br />
|-<br />
| 6 || 7 || 7<br />
|-<br />
| 7 || 5 || 5 (duration = 3, so loop repeats after 3 seconds)<br />
|-<br />
| 8 || 6 || 6<br />
|-<br />
| 9 || 7 || 7<br />
|-<br />
| 10 || 5 || 5<br />
|}<br />
<br />
Specifying a huge number for the Duration parameter effectively turns the Time Loop layer into a Time Shift layer. The Link Time and Local Time parameters controls which time in the children lines up with which time in the Time Loop layer, giving the amount of the timeshift, with both positive and negative differences working as expected.<br />
<br />
== Contrived Example ==<br />
<br />
Download and examine this example file: {{l|Media:Time-loop-demo-0.2.sifz|Time-loop-demo-0.2.sifz}}<br />
<br />
It's a 10 second animation, and shows 2 circles. The top one moves linearly from the left to the right. Its position is marked by static text digits 0 through 10.<br />
<br />
The other circle is an identical copy of the first one, with the same waypoints, but it's inside an Group layer. The parameters are:<br />
* Link Time: 5s<br />
* Duration: 1.5s<br />
* Local Time: 2s<br />
* Symmetrical: true<br />
<br />
So as time=2s, the top circle is at position 2 (local time) and the bottom circle is at position 5 (link time):<br />
<br />
{{l|Image:Time-loop-demo-0.2-2s-0f.png}}<br />
<br />
The loop is 1.5s long, so the bottom circle is also at position 5 every 1.5 seconds before and after this point in time, for example at t=3.5s and at t=8s:<br />
<br />
{{l|Image:Time-loop-demo-0.2-3s-12f.png}}<br />
{{l|Image:Time-loop-demo-0.2-8s-0f.png}}<br />
<br />
The following two images show the positions at t=0s and t=3s. The loop starts at t=2s, so it's also at the start at t=0.5s. So at t=0s it's half a second before finishing the previous loop. And at t=3s the same is true, but 2 loops later on:<br />
<br />
{{l|Image:Time-loop-demo-0.2-0s-0f.png}}<br />
{{l|Image:Time-loop-demo-0.2-3s-0f.png}}<br />
<br />
There's a rendered copy of this example on [http://www.youtube.com/watch?v=WyYLd7319Gw YouTube], and it's also available for download: {{l|Media:Time-loop-demo-0.2.avi|Time-loop-demo-0.2.avi}}.</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Time_Loop_Layer&diff=22140Time Loop Layer2016-08-07T14:38:29Z<p>Darkspace65: /* Parameters of Time Loop Layers */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Time Loop Layer}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Layer_other_timeloop_icon.png|64px}}<br />
<br />
== About Time Loop Layers==<br />
<br />
The Time Loop layer can be used to repeat an animation over and over. It loops a section of the layers below and within the same canvas over and over.<br />
<br />
See also the {{l|Convert#Time_Loop|Time Loop ValueNode}} conversion, which can be used to loop the value of a single parameter, rather than an entire layer or group of layers.<br />
<br />
==Parameters of Time Loop Layers==<br />
<br />
These parameters, to prevent undesired modification, by default are {{l|Static_Parameters|statics}}. <br />
<br />
To animate the parameters of the Time Loop Layer right-click on the green-guy icon of the parameter you want to animate in the Parameters Panel of the Time Loop layer and set {{literal|Allow animation}}.<br />
<br />
Once they are no more {{l|Static_Parameters|statics}}, like any other parameters in Synfig they can be animated, so that they change over time. This can be confusing, so make sure you aren't in {{L|Animate_Editing_Mode|Animate Edit Mode}} when working with the Time Loop layer, unless you know what you're doing!<br />
<br />
The parameters of the time loop layers are:<br />
<br />
{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-style="background:#"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Z Depth}}<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_time_icon.png|16px}} {{l|Time_Loop_Layer#Link_Time_.28time.29|Link Time}}<br />
||0f<br />
||time<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_time_icon.png|16px}} {{l|Time_Loop_Layer#Local_Time_.28time.29|Local Time}}<br />
||0f<br />
||time<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_time_icon.png|16px}} {{l|Time_Loop_Layer#Duration_.28time.29|Duration}}<br />
||1s<br />
||time<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_bool_icon.png|16px}} {{l|Time_Loop_Layer#Only_For_Positive_Duration_.28bool.29|Only For Positive Duration}}<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} {{l|Time_Loop_Layer#Symmetrical_.28bool.29|Symmetrical}}<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|}<br />
<br />
=== Link Time (time) ===<br />
Start time of cycled material/child layers.<br />
<br />
=== Local Time (time) ===<br />
Start time of loop. (this is currently (since 120323 at least) ''broken'' and has no effect on time loops, see http://synfig.org/forums/viewtopic.php?f=12&t=3526#p14986 for a discussion)<br />
=== Duration (time) ===<br />
Number of seconds or frames that are looped in the child layer.<br />
<br />
=== Only For Positive Duration (bool) ===<br />
* If checked and {{Literal|Duration}} is zero or negative, then the time loop layer is effectively disabled, and acts as if it wasn't there.<br />
* If not checked and the Duration is zero, the Time Loop layer freezes the animation of the children layers at the value of {{Literal|Link Time}}.<br />
<br />
=== Symmetrical (bool) ===<br />
If not checked, and the current time is less than {{Literal|Local Time}}, then {{Literal|Duration}} is taken off the resulting time. This is to provide compatibility with {{l|Time Loop Layer (v0.1)|version 0.1}} of the time loop layer.<br />
<br />
== How to loop ==<br />
<br />
The Time Loop layer repeatedly loops through the {{Literal|Duration}} seconds of its child layers, from {{Literal|Link Time}} to {{Literal|Link Time}} + {{Literal|Duration}}. {{Literal|Local Time}} is used to line up the offset of the time looping. When the Time Loop layer is asked to set its time to {{Literal|Local Time}}, it sets the time in its child layers to be {{Literal|Link Time}}, ie. the start of the loop.<br />
<br />
=== Breaking loop ===<br />
<br />
1. In the layer's parameters of the time loop, you need to remove the 'green guy' from {{l|Duration Parameter}}. Just right-click on him and set {{literal|Allow animation}}.<br />
2. On the {{L|Timebar|timeline}} navigate to a place where you want to break the animation. And enter the {{l|Animation Mode}}.<br />
3. In the time loop parameters, set 'Duration' to {{literal|EOT}} (End-of-Time).<br />
4. Now you have three {{l|Waypoint|waypoints}}. One before the current, we left it as it is. One is current, we {{l|Convert|convert}} it to the {{literal|constant}} (right-click on it -> Both -> Constant). And one after current, this one have to be removed (right-click on it -> Remove). <br />
5. Now test it. Pay attention, that loop will always break at the very first frame of you animation, so you need to break it in the right place. <br />
<br />
====Detailed explanation====<br />
'Green guy' is a guard that says "You shall not pass!" to the animation. So when you attempt to change such parameter in animation mode it just changes the usual way. It's done to prevent unnecessary parameters to be animated, e.g. 'Blend method'.<br />
<br />
Setting 'Duration' to EOT. If you set it to 0f, then the whole animation will stop, because you try to play it from 0f (local time) to 0f (duration). And EOT means it'll continue to play your animation to the end of the time...<br />
<br />
Removing waypoint after current one. If you skip this step, then at the next waypoint 'Duration' parameter will be restored to the value before current waypoint. It's a standard Synfig's behavior, but there's a magical button somewhere that can change it.<br />
<br />
Converting current waypoint to the constant. Without it, 'Duration' will be smoothly interpolated from value you set to the EOT and the constant type will just set immediately at the waypoint. Interpolation can be a bit confusing sometimes, so you better read this: http://wiki.synfig.org/Waypoint<br />
<br />
<br />
<!--<br />
To break a loop and continue animating you basically need to do two things; break the loop with a {{L|Waypoint|waypoint}} and copy the animation {{L|Keyframe|keyframe}} to your position in the {{L|Timebar|timeline}}.<br />
* Find out which frame in the child layers that corresponds to the frame in the time loop layer where you want to break the loop.<br />
Goto this frame in the child layer and add a {{L|Keyframe|keyframe}} here. Then goto the frame where you want to break the loop and duplicate the keyframe.<br />
* Set the first time loop {{Literal|Duration}} waypoint to {{Literal|Constant}} and check {{Literal|Only For Positive Duration}}. Then at the breaking frame set {{Literal|Duration}} to 0.<br />
* Continue animating the child layer(s) which are not looped anymore.<br />
--><br />
<br />
== Visualized Example ==<br />
<br />
For example, suppose:<br />
* Link Time is 5s<br />
* Duration is 3s<br />
* Local Time' is 4s<br />
<br />
And suppose that the Time Loop layer is applied over an existing animation. The {{Literal|Link Time}} and {{Literal|Duration}} specify that the section from 5s to 8s in the children layers will be looped. The {{Literal|Local Time}} specifies that this loop will be at the beginning at 4s. (And so also therefore at 1s, 7s, 10s, etc).<br />
<br />
This is how the mapping actually works:<br />
<br />
{| border="1" cellspacing="0"<br />
|'''real time'''||'''child time<br/>(symmetrical = true)'''||'''child time<br/>(symmetrical = false)'''<br />
|-<br />
| 0 || 7 || 4<br />
|-<br />
| 1 || 5 || 2<br />
|-<br />
| 2 || 6 || 3<br />
|-<br />
| 3 || 7 || 4<br />
|-<br />
| 4 || 5 || 5 (local time = 4; link time = 5)<br />
|-<br />
| 5 || 6 || 6<br />
|-<br />
| 6 || 7 || 7<br />
|-<br />
| 7 || 5 || 5 (duration = 3, so loop repeats after 3 seconds)<br />
|-<br />
| 8 || 6 || 6<br />
|-<br />
| 9 || 7 || 7<br />
|-<br />
| 10 || 5 || 5<br />
|}<br />
<br />
Specifying a huge number for the Duration parameter effectively turns the Time Loop layer into a Time Shift layer. The Link Time and Local Time parameters controls which time in the children lines up with which time in the Time Loop layer, giving the amount of the timeshift, with both positive and negative differences working as expected.<br />
<br />
== Contrived Example ==<br />
<br />
Download and examine this example file: {{l|Media:Time-loop-demo-0.2.sifz|Time-loop-demo-0.2.sifz}}<br />
<br />
It's a 10 second animation, and shows 2 circles. The top one moves linearly from the left to the right. Its position is marked by static text digits 0 through 10.<br />
<br />
The other circle is an identical copy of the first one, with the same waypoints, but it's inside an Group layer. The parameters are:<br />
* Link Time: 5s<br />
* Duration: 1.5s<br />
* Local Time: 2s<br />
* Symmetrical: true<br />
<br />
So as time=2s, the top circle is at position 2 (local time) and the bottom circle is at position 5 (link time):<br />
<br />
{{l|Image:Time-loop-demo-0.2-2s-0f.png}}<br />
<br />
The loop is 1.5s long, so the bottom circle is also at position 5 every 1.5 seconds before and after this point in time, for example at t=3.5s and at t=8s:<br />
<br />
{{l|Image:Time-loop-demo-0.2-3s-12f.png}}<br />
{{l|Image:Time-loop-demo-0.2-8s-0f.png}}<br />
<br />
The following two images show the positions at t=0s and t=3s. The loop starts at t=2s, so it's also at the start at t=0.5s. So at t=0s it's half a second before finishing the previous loop. And at t=3s the same is true, but 2 loops later on:<br />
<br />
{{l|Image:Time-loop-demo-0.2-0s-0f.png}}<br />
{{l|Image:Time-loop-demo-0.2-3s-0f.png}}<br />
<br />
There's a rendered copy of this example on [http://www.youtube.com/watch?v=WyYLd7319Gw YouTube], and it's also available for download: {{l|Media:Time-loop-demo-0.2.avi|Time-loop-demo-0.2.avi}}.</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Time_Loop_Layer&diff=22139Time Loop Layer2016-08-07T14:38:00Z<p>Darkspace65: /* Parameters of Time Loop Layers */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Time Loop Layer}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Layer_other_timeloop_icon.png|64px}}<br />
<br />
== About Time Loop Layers==<br />
<br />
The Time Loop layer can be used to repeat an animation over and over. It loops a section of the layers below and within the same canvas over and over.<br />
<br />
See also the {{l|Convert#Time_Loop|Time Loop ValueNode}} conversion, which can be used to loop the value of a single parameter, rather than an entire layer or group of layers.<br />
<br />
==Parameters of Time Loop Layers==<br />
<br />
These parameters, to prevent undesired modification, by default are {{l|Static_Parameters|statics}}. <br />
<br />
To animate the parameters of Time Loop Layer right-click on the green-guy icon of the parameter you want to animate in the Parameters Panel of the Time Loop layer and set {{literal|Allow animation}}.<br />
<br />
Once they are no more {{l|Static_Parameters|statics}}, like any other parameters in Synfig they can be animated, so that they change over time. This can be confusing, so make sure you aren't in {{L|Animate_Editing_Mode|Animate Edit Mode}} when working with the Time Loop layer, unless you know what you're doing!<br />
<br />
The parameters of the time loop layers are:<br />
<br />
{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-style="background:#"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Z Depth}}<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_time_icon.png|16px}} {{l|Time_Loop_Layer#Link_Time_.28time.29|Link Time}}<br />
||0f<br />
||time<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_time_icon.png|16px}} {{l|Time_Loop_Layer#Local_Time_.28time.29|Local Time}}<br />
||0f<br />
||time<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_time_icon.png|16px}} {{l|Time_Loop_Layer#Duration_.28time.29|Duration}}<br />
||1s<br />
||time<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_bool_icon.png|16px}} {{l|Time_Loop_Layer#Only_For_Positive_Duration_.28bool.29|Only For Positive Duration}}<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} {{l|Time_Loop_Layer#Symmetrical_.28bool.29|Symmetrical}}<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|}<br />
<br />
=== Link Time (time) ===<br />
Start time of cycled material/child layers.<br />
<br />
=== Local Time (time) ===<br />
Start time of loop. (this is currently (since 120323 at least) ''broken'' and has no effect on time loops, see http://synfig.org/forums/viewtopic.php?f=12&t=3526#p14986 for a discussion)<br />
=== Duration (time) ===<br />
Number of seconds or frames that are looped in the child layer.<br />
<br />
=== Only For Positive Duration (bool) ===<br />
* If checked and {{Literal|Duration}} is zero or negative, then the time loop layer is effectively disabled, and acts as if it wasn't there.<br />
* If not checked and the Duration is zero, the Time Loop layer freezes the animation of the children layers at the value of {{Literal|Link Time}}.<br />
<br />
=== Symmetrical (bool) ===<br />
If not checked, and the current time is less than {{Literal|Local Time}}, then {{Literal|Duration}} is taken off the resulting time. This is to provide compatibility with {{l|Time Loop Layer (v0.1)|version 0.1}} of the time loop layer.<br />
<br />
== How to loop ==<br />
<br />
The Time Loop layer repeatedly loops through the {{Literal|Duration}} seconds of its child layers, from {{Literal|Link Time}} to {{Literal|Link Time}} + {{Literal|Duration}}. {{Literal|Local Time}} is used to line up the offset of the time looping. When the Time Loop layer is asked to set its time to {{Literal|Local Time}}, it sets the time in its child layers to be {{Literal|Link Time}}, ie. the start of the loop.<br />
<br />
=== Breaking loop ===<br />
<br />
1. In the layer's parameters of the time loop, you need to remove the 'green guy' from {{l|Duration Parameter}}. Just right-click on him and set {{literal|Allow animation}}.<br />
2. On the {{L|Timebar|timeline}} navigate to a place where you want to break the animation. And enter the {{l|Animation Mode}}.<br />
3. In the time loop parameters, set 'Duration' to {{literal|EOT}} (End-of-Time).<br />
4. Now you have three {{l|Waypoint|waypoints}}. One before the current, we left it as it is. One is current, we {{l|Convert|convert}} it to the {{literal|constant}} (right-click on it -> Both -> Constant). And one after current, this one have to be removed (right-click on it -> Remove). <br />
5. Now test it. Pay attention, that loop will always break at the very first frame of you animation, so you need to break it in the right place. <br />
<br />
====Detailed explanation====<br />
'Green guy' is a guard that says "You shall not pass!" to the animation. So when you attempt to change such parameter in animation mode it just changes the usual way. It's done to prevent unnecessary parameters to be animated, e.g. 'Blend method'.<br />
<br />
Setting 'Duration' to EOT. If you set it to 0f, then the whole animation will stop, because you try to play it from 0f (local time) to 0f (duration). And EOT means it'll continue to play your animation to the end of the time...<br />
<br />
Removing waypoint after current one. If you skip this step, then at the next waypoint 'Duration' parameter will be restored to the value before current waypoint. It's a standard Synfig's behavior, but there's a magical button somewhere that can change it.<br />
<br />
Converting current waypoint to the constant. Without it, 'Duration' will be smoothly interpolated from value you set to the EOT and the constant type will just set immediately at the waypoint. Interpolation can be a bit confusing sometimes, so you better read this: http://wiki.synfig.org/Waypoint<br />
<br />
<br />
<!--<br />
To break a loop and continue animating you basically need to do two things; break the loop with a {{L|Waypoint|waypoint}} and copy the animation {{L|Keyframe|keyframe}} to your position in the {{L|Timebar|timeline}}.<br />
* Find out which frame in the child layers that corresponds to the frame in the time loop layer where you want to break the loop.<br />
Goto this frame in the child layer and add a {{L|Keyframe|keyframe}} here. Then goto the frame where you want to break the loop and duplicate the keyframe.<br />
* Set the first time loop {{Literal|Duration}} waypoint to {{Literal|Constant}} and check {{Literal|Only For Positive Duration}}. Then at the breaking frame set {{Literal|Duration}} to 0.<br />
* Continue animating the child layer(s) which are not looped anymore.<br />
--><br />
<br />
== Visualized Example ==<br />
<br />
For example, suppose:<br />
* Link Time is 5s<br />
* Duration is 3s<br />
* Local Time' is 4s<br />
<br />
And suppose that the Time Loop layer is applied over an existing animation. The {{Literal|Link Time}} and {{Literal|Duration}} specify that the section from 5s to 8s in the children layers will be looped. The {{Literal|Local Time}} specifies that this loop will be at the beginning at 4s. (And so also therefore at 1s, 7s, 10s, etc).<br />
<br />
This is how the mapping actually works:<br />
<br />
{| border="1" cellspacing="0"<br />
|'''real time'''||'''child time<br/>(symmetrical = true)'''||'''child time<br/>(symmetrical = false)'''<br />
|-<br />
| 0 || 7 || 4<br />
|-<br />
| 1 || 5 || 2<br />
|-<br />
| 2 || 6 || 3<br />
|-<br />
| 3 || 7 || 4<br />
|-<br />
| 4 || 5 || 5 (local time = 4; link time = 5)<br />
|-<br />
| 5 || 6 || 6<br />
|-<br />
| 6 || 7 || 7<br />
|-<br />
| 7 || 5 || 5 (duration = 3, so loop repeats after 3 seconds)<br />
|-<br />
| 8 || 6 || 6<br />
|-<br />
| 9 || 7 || 7<br />
|-<br />
| 10 || 5 || 5<br />
|}<br />
<br />
Specifying a huge number for the Duration parameter effectively turns the Time Loop layer into a Time Shift layer. The Link Time and Local Time parameters controls which time in the children lines up with which time in the Time Loop layer, giving the amount of the timeshift, with both positive and negative differences working as expected.<br />
<br />
== Contrived Example ==<br />
<br />
Download and examine this example file: {{l|Media:Time-loop-demo-0.2.sifz|Time-loop-demo-0.2.sifz}}<br />
<br />
It's a 10 second animation, and shows 2 circles. The top one moves linearly from the left to the right. Its position is marked by static text digits 0 through 10.<br />
<br />
The other circle is an identical copy of the first one, with the same waypoints, but it's inside an Group layer. The parameters are:<br />
* Link Time: 5s<br />
* Duration: 1.5s<br />
* Local Time: 2s<br />
* Symmetrical: true<br />
<br />
So as time=2s, the top circle is at position 2 (local time) and the bottom circle is at position 5 (link time):<br />
<br />
{{l|Image:Time-loop-demo-0.2-2s-0f.png}}<br />
<br />
The loop is 1.5s long, so the bottom circle is also at position 5 every 1.5 seconds before and after this point in time, for example at t=3.5s and at t=8s:<br />
<br />
{{l|Image:Time-loop-demo-0.2-3s-12f.png}}<br />
{{l|Image:Time-loop-demo-0.2-8s-0f.png}}<br />
<br />
The following two images show the positions at t=0s and t=3s. The loop starts at t=2s, so it's also at the start at t=0.5s. So at t=0s it's half a second before finishing the previous loop. And at t=3s the same is true, but 2 loops later on:<br />
<br />
{{l|Image:Time-loop-demo-0.2-0s-0f.png}}<br />
{{l|Image:Time-loop-demo-0.2-3s-0f.png}}<br />
<br />
There's a rendered copy of this example on [http://www.youtube.com/watch?v=WyYLd7319Gw YouTube], and it's also available for download: {{l|Media:Time-loop-demo-0.2.avi|Time-loop-demo-0.2.avi}}.</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Time_Loop_Layer&diff=22138Time Loop Layer2016-08-07T14:37:18Z<p>Darkspace65: </p>
<hr />
<div><!-- Page info --><br />
{{Title|Time Loop Layer}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Layer_other_timeloop_icon.png|64px}}<br />
<br />
== About Time Loop Layers==<br />
<br />
The Time Loop layer can be used to repeat an animation over and over. It loops a section of the layers below and within the same canvas over and over.<br />
<br />
See also the {{l|Convert#Time_Loop|Time Loop ValueNode}} conversion, which can be used to loop the value of a single parameter, rather than an entire layer or group of layers.<br />
<br />
==Parameters of Time Loop Layers==<br />
<br />
These parameters, to prevent undesired modification, by default are {{l|Static_Parameters|statics}}. <br />
To animate the parameters of Time Loop Layer right-click on the green-guy icon of the parameter you want to animate in the Parameters Panel of the Time Loop layer and set {{literal|Allow animation}}.<br />
<br />
Once they are no more {{l|Static_Parameters|statics}}, like any other parameters in Synfig they can be animated, so that they change over time. This can be confusing, so make sure you aren't in {{L|Animate_Editing_Mode|Animate Edit Mode}} when working with the Time Loop layer, unless you know what you're doing!<br />
<br />
The parameters of the time loop layers are:<br />
<br />
{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-style="background:#"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Z Depth}}<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_time_icon.png|16px}} {{l|Time_Loop_Layer#Link_Time_.28time.29|Link Time}}<br />
||0f<br />
||time<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_time_icon.png|16px}} {{l|Time_Loop_Layer#Local_Time_.28time.29|Local Time}}<br />
||0f<br />
||time<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_time_icon.png|16px}} {{l|Time_Loop_Layer#Duration_.28time.29|Duration}}<br />
||1s<br />
||time<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_bool_icon.png|16px}} {{l|Time_Loop_Layer#Only_For_Positive_Duration_.28bool.29|Only For Positive Duration}}<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} {{l|Time_Loop_Layer#Symmetrical_.28bool.29|Symmetrical}}<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|}<br />
<br />
=== Link Time (time) ===<br />
Start time of cycled material/child layers.<br />
<br />
=== Local Time (time) ===<br />
Start time of loop. (this is currently (since 120323 at least) ''broken'' and has no effect on time loops, see http://synfig.org/forums/viewtopic.php?f=12&t=3526#p14986 for a discussion)<br />
=== Duration (time) ===<br />
Number of seconds or frames that are looped in the child layer.<br />
<br />
=== Only For Positive Duration (bool) ===<br />
* If checked and {{Literal|Duration}} is zero or negative, then the time loop layer is effectively disabled, and acts as if it wasn't there.<br />
* If not checked and the Duration is zero, the Time Loop layer freezes the animation of the children layers at the value of {{Literal|Link Time}}.<br />
<br />
=== Symmetrical (bool) ===<br />
If not checked, and the current time is less than {{Literal|Local Time}}, then {{Literal|Duration}} is taken off the resulting time. This is to provide compatibility with {{l|Time Loop Layer (v0.1)|version 0.1}} of the time loop layer.<br />
<br />
== How to loop ==<br />
<br />
The Time Loop layer repeatedly loops through the {{Literal|Duration}} seconds of its child layers, from {{Literal|Link Time}} to {{Literal|Link Time}} + {{Literal|Duration}}. {{Literal|Local Time}} is used to line up the offset of the time looping. When the Time Loop layer is asked to set its time to {{Literal|Local Time}}, it sets the time in its child layers to be {{Literal|Link Time}}, ie. the start of the loop.<br />
<br />
=== Breaking loop ===<br />
<br />
1. In the layer's parameters of the time loop, you need to remove the 'green guy' from {{l|Duration Parameter}}. Just right-click on him and set {{literal|Allow animation}}.<br />
2. On the {{L|Timebar|timeline}} navigate to a place where you want to break the animation. And enter the {{l|Animation Mode}}.<br />
3. In the time loop parameters, set 'Duration' to {{literal|EOT}} (End-of-Time).<br />
4. Now you have three {{l|Waypoint|waypoints}}. One before the current, we left it as it is. One is current, we {{l|Convert|convert}} it to the {{literal|constant}} (right-click on it -> Both -> Constant). And one after current, this one have to be removed (right-click on it -> Remove). <br />
5. Now test it. Pay attention, that loop will always break at the very first frame of you animation, so you need to break it in the right place. <br />
<br />
====Detailed explanation====<br />
'Green guy' is a guard that says "You shall not pass!" to the animation. So when you attempt to change such parameter in animation mode it just changes the usual way. It's done to prevent unnecessary parameters to be animated, e.g. 'Blend method'.<br />
<br />
Setting 'Duration' to EOT. If you set it to 0f, then the whole animation will stop, because you try to play it from 0f (local time) to 0f (duration). And EOT means it'll continue to play your animation to the end of the time...<br />
<br />
Removing waypoint after current one. If you skip this step, then at the next waypoint 'Duration' parameter will be restored to the value before current waypoint. It's a standard Synfig's behavior, but there's a magical button somewhere that can change it.<br />
<br />
Converting current waypoint to the constant. Without it, 'Duration' will be smoothly interpolated from value you set to the EOT and the constant type will just set immediately at the waypoint. Interpolation can be a bit confusing sometimes, so you better read this: http://wiki.synfig.org/Waypoint<br />
<br />
<br />
<!--<br />
To break a loop and continue animating you basically need to do two things; break the loop with a {{L|Waypoint|waypoint}} and copy the animation {{L|Keyframe|keyframe}} to your position in the {{L|Timebar|timeline}}.<br />
* Find out which frame in the child layers that corresponds to the frame in the time loop layer where you want to break the loop.<br />
Goto this frame in the child layer and add a {{L|Keyframe|keyframe}} here. Then goto the frame where you want to break the loop and duplicate the keyframe.<br />
* Set the first time loop {{Literal|Duration}} waypoint to {{Literal|Constant}} and check {{Literal|Only For Positive Duration}}. Then at the breaking frame set {{Literal|Duration}} to 0.<br />
* Continue animating the child layer(s) which are not looped anymore.<br />
--><br />
<br />
== Visualized Example ==<br />
<br />
For example, suppose:<br />
* Link Time is 5s<br />
* Duration is 3s<br />
* Local Time' is 4s<br />
<br />
And suppose that the Time Loop layer is applied over an existing animation. The {{Literal|Link Time}} and {{Literal|Duration}} specify that the section from 5s to 8s in the children layers will be looped. The {{Literal|Local Time}} specifies that this loop will be at the beginning at 4s. (And so also therefore at 1s, 7s, 10s, etc).<br />
<br />
This is how the mapping actually works:<br />
<br />
{| border="1" cellspacing="0"<br />
|'''real time'''||'''child time<br/>(symmetrical = true)'''||'''child time<br/>(symmetrical = false)'''<br />
|-<br />
| 0 || 7 || 4<br />
|-<br />
| 1 || 5 || 2<br />
|-<br />
| 2 || 6 || 3<br />
|-<br />
| 3 || 7 || 4<br />
|-<br />
| 4 || 5 || 5 (local time = 4; link time = 5)<br />
|-<br />
| 5 || 6 || 6<br />
|-<br />
| 6 || 7 || 7<br />
|-<br />
| 7 || 5 || 5 (duration = 3, so loop repeats after 3 seconds)<br />
|-<br />
| 8 || 6 || 6<br />
|-<br />
| 9 || 7 || 7<br />
|-<br />
| 10 || 5 || 5<br />
|}<br />
<br />
Specifying a huge number for the Duration parameter effectively turns the Time Loop layer into a Time Shift layer. The Link Time and Local Time parameters controls which time in the children lines up with which time in the Time Loop layer, giving the amount of the timeshift, with both positive and negative differences working as expected.<br />
<br />
== Contrived Example ==<br />
<br />
Download and examine this example file: {{l|Media:Time-loop-demo-0.2.sifz|Time-loop-demo-0.2.sifz}}<br />
<br />
It's a 10 second animation, and shows 2 circles. The top one moves linearly from the left to the right. Its position is marked by static text digits 0 through 10.<br />
<br />
The other circle is an identical copy of the first one, with the same waypoints, but it's inside an Group layer. The parameters are:<br />
* Link Time: 5s<br />
* Duration: 1.5s<br />
* Local Time: 2s<br />
* Symmetrical: true<br />
<br />
So as time=2s, the top circle is at position 2 (local time) and the bottom circle is at position 5 (link time):<br />
<br />
{{l|Image:Time-loop-demo-0.2-2s-0f.png}}<br />
<br />
The loop is 1.5s long, so the bottom circle is also at position 5 every 1.5 seconds before and after this point in time, for example at t=3.5s and at t=8s:<br />
<br />
{{l|Image:Time-loop-demo-0.2-3s-12f.png}}<br />
{{l|Image:Time-loop-demo-0.2-8s-0f.png}}<br />
<br />
The following two images show the positions at t=0s and t=3s. The loop starts at t=2s, so it's also at the start at t=0.5s. So at t=0s it's half a second before finishing the previous loop. And at t=3s the same is true, but 2 loops later on:<br />
<br />
{{l|Image:Time-loop-demo-0.2-0s-0f.png}}<br />
{{l|Image:Time-loop-demo-0.2-3s-0f.png}}<br />
<br />
There's a rendered copy of this example on [http://www.youtube.com/watch?v=WyYLd7319Gw YouTube], and it's also available for download: {{l|Media:Time-loop-demo-0.2.avi|Time-loop-demo-0.2.avi}}.</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Time_Loop_Layer&diff=22137Time Loop Layer2016-08-07T14:36:45Z<p>Darkspace65: </p>
<hr />
<div><!-- Page info --><br />
{{Title|Time Loop Layer}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Layer_other_timeloop_icon.png|64px}}<br />
<br />
== About Time Loop Layers==<br />
<br />
The Time Loop layer can be used to repeat an animation over and over. It loops a section of the layers below and within the same canvas over and over.<br />
<br />
See also the {{l|Convert#Time_Loop|Time Loop ValueNode}} conversion, which can be used to loop the value of a single parameter, rather than an entire layer or group of layers.<br />
<br />
==Parameters of Time Loop Layers==<br />
<br />
These parameters, to prevent undesired modification, by default are {{l|Static_Parameters|statics}}. To animate the parameters of Time Loop Layer right-click on the green-guy icon of the parameter you want to animate in the Parameters Panel of the Time Loop layer and set {{literal|Allow animation}}.<br />
<br />
Once they are no more {{l|Static_Parameters|statics}}, like any other parameters in Synfig they can be animated, so that they change over time. This can be confusing, so make sure you aren't in {{L|Animate_Editing_Mode|Animate Edit Mode}} when working with the Time Loop layer, unless you know what you're doing!<br />
<br />
The parameters of the time loop layers are:<br />
<br />
{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-style="background:#"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Z Depth}}<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_time_icon.png|16px}} {{l|Time_Loop_Layer#Link_Time_.28time.29|Link Time}}<br />
||0f<br />
||time<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_time_icon.png|16px}} {{l|Time_Loop_Layer#Local_Time_.28time.29|Local Time}}<br />
||0f<br />
||time<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_time_icon.png|16px}} {{l|Time_Loop_Layer#Duration_.28time.29|Duration}}<br />
||1s<br />
||time<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_bool_icon.png|16px}} {{l|Time_Loop_Layer#Only_For_Positive_Duration_.28bool.29|Only For Positive Duration}}<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} {{l|Time_Loop_Layer#Symmetrical_.28bool.29|Symmetrical}}<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|}<br />
<br />
=== Link Time (time) ===<br />
Start time of cycled material/child layers.<br />
<br />
=== Local Time (time) ===<br />
Start time of loop. (this is currently (since 120323 at least) ''broken'' and has no effect on time loops, see http://synfig.org/forums/viewtopic.php?f=12&t=3526#p14986 for a discussion)<br />
=== Duration (time) ===<br />
Number of seconds or frames that are looped in the child layer.<br />
<br />
=== Only For Positive Duration (bool) ===<br />
* If checked and {{Literal|Duration}} is zero or negative, then the time loop layer is effectively disabled, and acts as if it wasn't there.<br />
* If not checked and the Duration is zero, the Time Loop layer freezes the animation of the children layers at the value of {{Literal|Link Time}}.<br />
<br />
=== Symmetrical (bool) ===<br />
If not checked, and the current time is less than {{Literal|Local Time}}, then {{Literal|Duration}} is taken off the resulting time. This is to provide compatibility with {{l|Time Loop Layer (v0.1)|version 0.1}} of the time loop layer.<br />
<br />
== How to loop ==<br />
<br />
The Time Loop layer repeatedly loops through the {{Literal|Duration}} seconds of its child layers, from {{Literal|Link Time}} to {{Literal|Link Time}} + {{Literal|Duration}}. {{Literal|Local Time}} is used to line up the offset of the time looping. When the Time Loop layer is asked to set its time to {{Literal|Local Time}}, it sets the time in its child layers to be {{Literal|Link Time}}, ie. the start of the loop.<br />
<br />
=== Breaking loop ===<br />
<br />
1. In the layer's parameters of the time loop, you need to remove the 'green guy' from {{l|Duration Parameter}}. Just right-click on him and set {{literal|Allow animation}}.<br />
2. On the {{L|Timebar|timeline}} navigate to a place where you want to break the animation. And enter the {{l|Animation Mode}}.<br />
3. In the time loop parameters, set 'Duration' to {{literal|EOT}} (End-of-Time).<br />
4. Now you have three {{l|Waypoint|waypoints}}. One before the current, we left it as it is. One is current, we {{l|Convert|convert}} it to the {{literal|constant}} (right-click on it -> Both -> Constant). And one after current, this one have to be removed (right-click on it -> Remove). <br />
5. Now test it. Pay attention, that loop will always break at the very first frame of you animation, so you need to break it in the right place. <br />
<br />
====Detailed explanation====<br />
'Green guy' is a guard that says "You shall not pass!" to the animation. So when you attempt to change such parameter in animation mode it just changes the usual way. It's done to prevent unnecessary parameters to be animated, e.g. 'Blend method'.<br />
<br />
Setting 'Duration' to EOT. If you set it to 0f, then the whole animation will stop, because you try to play it from 0f (local time) to 0f (duration). And EOT means it'll continue to play your animation to the end of the time...<br />
<br />
Removing waypoint after current one. If you skip this step, then at the next waypoint 'Duration' parameter will be restored to the value before current waypoint. It's a standard Synfig's behavior, but there's a magical button somewhere that can change it.<br />
<br />
Converting current waypoint to the constant. Without it, 'Duration' will be smoothly interpolated from value you set to the EOT and the constant type will just set immediately at the waypoint. Interpolation can be a bit confusing sometimes, so you better read this: http://wiki.synfig.org/Waypoint<br />
<br />
<br />
<!--<br />
To break a loop and continue animating you basically need to do two things; break the loop with a {{L|Waypoint|waypoint}} and copy the animation {{L|Keyframe|keyframe}} to your position in the {{L|Timebar|timeline}}.<br />
* Find out which frame in the child layers that corresponds to the frame in the time loop layer where you want to break the loop.<br />
Goto this frame in the child layer and add a {{L|Keyframe|keyframe}} here. Then goto the frame where you want to break the loop and duplicate the keyframe.<br />
* Set the first time loop {{Literal|Duration}} waypoint to {{Literal|Constant}} and check {{Literal|Only For Positive Duration}}. Then at the breaking frame set {{Literal|Duration}} to 0.<br />
* Continue animating the child layer(s) which are not looped anymore.<br />
--><br />
<br />
== Visualized Example ==<br />
<br />
For example, suppose:<br />
* Link Time is 5s<br />
* Duration is 3s<br />
* Local Time' is 4s<br />
<br />
And suppose that the Time Loop layer is applied over an existing animation. The {{Literal|Link Time}} and {{Literal|Duration}} specify that the section from 5s to 8s in the children layers will be looped. The {{Literal|Local Time}} specifies that this loop will be at the beginning at 4s. (And so also therefore at 1s, 7s, 10s, etc).<br />
<br />
This is how the mapping actually works:<br />
<br />
{| border="1" cellspacing="0"<br />
|'''real time'''||'''child time<br/>(symmetrical = true)'''||'''child time<br/>(symmetrical = false)'''<br />
|-<br />
| 0 || 7 || 4<br />
|-<br />
| 1 || 5 || 2<br />
|-<br />
| 2 || 6 || 3<br />
|-<br />
| 3 || 7 || 4<br />
|-<br />
| 4 || 5 || 5 (local time = 4; link time = 5)<br />
|-<br />
| 5 || 6 || 6<br />
|-<br />
| 6 || 7 || 7<br />
|-<br />
| 7 || 5 || 5 (duration = 3, so loop repeats after 3 seconds)<br />
|-<br />
| 8 || 6 || 6<br />
|-<br />
| 9 || 7 || 7<br />
|-<br />
| 10 || 5 || 5<br />
|}<br />
<br />
Specifying a huge number for the Duration parameter effectively turns the Time Loop layer into a Time Shift layer. The Link Time and Local Time parameters controls which time in the children lines up with which time in the Time Loop layer, giving the amount of the timeshift, with both positive and negative differences working as expected.<br />
<br />
== Contrived Example ==<br />
<br />
Download and examine this example file: {{l|Media:Time-loop-demo-0.2.sifz|Time-loop-demo-0.2.sifz}}<br />
<br />
It's a 10 second animation, and shows 2 circles. The top one moves linearly from the left to the right. Its position is marked by static text digits 0 through 10.<br />
<br />
The other circle is an identical copy of the first one, with the same waypoints, but it's inside an Group layer. The parameters are:<br />
* Link Time: 5s<br />
* Duration: 1.5s<br />
* Local Time: 2s<br />
* Symmetrical: true<br />
<br />
So as time=2s, the top circle is at position 2 (local time) and the bottom circle is at position 5 (link time):<br />
<br />
{{l|Image:Time-loop-demo-0.2-2s-0f.png}}<br />
<br />
The loop is 1.5s long, so the bottom circle is also at position 5 every 1.5 seconds before and after this point in time, for example at t=3.5s and at t=8s:<br />
<br />
{{l|Image:Time-loop-demo-0.2-3s-12f.png}}<br />
{{l|Image:Time-loop-demo-0.2-8s-0f.png}}<br />
<br />
The following two images show the positions at t=0s and t=3s. The loop starts at t=2s, so it's also at the start at t=0.5s. So at t=0s it's half a second before finishing the previous loop. And at t=3s the same is true, but 2 loops later on:<br />
<br />
{{l|Image:Time-loop-demo-0.2-0s-0f.png}}<br />
{{l|Image:Time-loop-demo-0.2-3s-0f.png}}<br />
<br />
There's a rendered copy of this example on [http://www.youtube.com/watch?v=WyYLd7319Gw YouTube], and it's also available for download: {{l|Media:Time-loop-demo-0.2.avi|Time-loop-demo-0.2.avi}}.</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Sound_Layer&diff=21131Sound Layer2016-01-07T14:08:42Z<p>Darkspace65: /* About Sound Layers */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Sound Layer}}<br />
{{Category|Layers}}<br />
{{Category|ImportArt}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Layer other sound icon.png|64px}}<br />
<br />
== About Sound Layers==<br />
<br />
{{Note|'''Actually the {{literal|Sound Layer}} isn't {{l|Render_dialog|rendered}} !'''|<br />
You can use [https://en.wikipedia.org/wiki/FFmpeg ffmpeg]/[https://en.wikipedia.org/wiki/Libav avconv] for manual merging. [https://davidwalsh.name/combine-audio-video simple] or [https://wjwoodrow.wordpress.com/2013/02/04/correcting-for-audiovideo-sync-issues-with-the-ffmpeg-programs-itsoffset-switch/ advanced] way}}<br />
<br />
The {{l|Sound Layer}} ....<br />
<br />
==Parameters of Sound Layers==<br />
<br />
The parameters of the {{l|Sound Layer}} are:<br />
<br />
{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:#silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-style="background:#"<br />
||{{l|Image:Type_real_icon.png|16px}} Z Depth<br />
||0.000000u<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_string_icon.png|16px}} File Name<br />
||sound file path<br />
||string<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_time_icon.png|16px}} Delay<br />
||0.000000u<br />
||time<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} Volume<br />
||1.000000<br />
||real<br />
|}<br />
<br />
==How to use Sound Layer==<br />
<br />
Check this simple tutorial : [https://www.youtube.com/watch?v=_IkrqZMmD9g Sound Layer (part 1)]</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Timebar&diff=21058Timebar2015-12-18T22:44:37Z<p>Darkspace65: </p>
<hr />
<div><!-- Page info --><br />
{{Title|Timebar}}<br />
{{Category|Canvas Window}}<br />
{{Category|Glossary}}<br />
{{Category|Interface}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
The {{Literal|Timebar}} is the area above the {{l|Timetrack Panel}}, the {{l|Graphs Panel}} and optionally (Display/Hide Canvas Timebar button) at the bottom of the {{l|Canvas|Canvas Window}}.<br />
<br />
The {{Literal|Timebar}} indicates :<br />
* time as a frame ruler and you click and drag within it to scrub your timeline.<br />
* display the {{l|Keyframe|keyframes}} you have set, their activation state and the selected one (not in the {{l|Graphs Panel}}'s Timebar).<br />
<br />
{{l|Image:Synfig_timebar_0.63.06.png}}<br />
<br />
Note : The timeline at the bottom of the {{l|Category:Canvas Window}} will not appear when you have defined zero duration in the {{l|Canvas Properties Dialog}}.<br />
<br />
To change the scale of the Timeline put your mousepointer over the grey frame ruler and use your mouse wheel to zoom in or out.<br />
<br />
==Keyframes in the Timebar==<br />
<!-- Use of Template:KeyframesInTheTimebar --><br />
{{KeyframesInTheTimebar}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=21052Doc:Animation Basics2015-12-17T20:26:57Z<p>Darkspace65: /* Setting up the workspace */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Canvas|Properties}} or select {{c|Canvas|Properties}} from the menu. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long. Synfig Studio can display the time in various formats (Timestamp). You can configure the Timestamp in Preferences. If the endtime is not displayed in seconds then go to {{c|Edit|Preferences|Misc}} and change the Timestamp into: (HHh MMm SSs) FFf. More about the Timestamp and its settings can be found {{l|Setup_Dialog|here}}.<br />
<br />
[[File:Properties Dialog -End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
{{note|Default keyframe at 0f|When creating a new project, a default {{literal|keyframe}} is already set at 0f. If for any reason you do not have this default keyframe, go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}. }}<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame|Keyframes Panel and Time Track Panel]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|Canvas Window, Keyframes Panel and Time Track Panel|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots depending on the default interpolation) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center|frame|Parameters Panel and Time Track Panel with green Waypoints]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red man icon in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}} or click on the render icon. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 1.0.png|center|frame|The Render Icon]] <br />
<br />
[[File:Animation Basics tutorial 7 1.0.png|center|frame|Render Settings]]<br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above and it should look like this.<br />
[[File:rider.gif|center|frame|Rendered Animation]]<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Particles_V2.0&diff=20511Particles V2.02015-05-02T20:59:59Z<p>Darkspace65: /* Info */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Particles v2.0}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
This is a new particles template that makes use of the recent Duplicate Layer feature. It works very similar to the {{l|Particles V1.0|first version}} but instead of make all the duplication of the layers manually it is produced using the mentioned Duplicate Layer.<br />
<br />
== Quick overview ==<br />
<br />
=== Parameters renamed ===<br />
<br />
These are the new names of the parameters. <br />
<br />
{| border="1" cellspacing="0" align="center" width="90%"<br />
|'''Parameter Name '''||'''Description''' || '''Type'''<br />
|-<br />
| Life time || That's the amount of time that a particle is travelling since it was shot. That's the amount of time that the particle is visible during its own animation (form 0f to Life time)|| It can be animated but produce strange things if particles are visible. Time<br />
|-<br />
|X Origin || That's a X origin of the shooting point.The X start position is calculated based on X Origin+random*X size || Animated. Real<br />
|-<br />
|Y Origin || That's a Y origin of the shooting point.The Y start position is calculated based on Y Origin+random*Y size||Animated. Real<br />
|-<br />
|X Size || That's a half of the width where the start X position of each particle is randomly calculated every time it is shot.The X start position is calculated based on X Origin+random*X size||Animated. Real<br />
|-<br />
|Y Size || That's a half of the width where the start Y position of each particle is randomly calculated every time it is shot. The Y start position is is calculated based on Y Origin+random*Y size||Animated. Real<br />
|-<br />
|Velocity || That's the initial velocity of the particles shot.|| Animated. Real<br />
|-<br />
|Velocity Spread|| That's amount of random variation of the initial velocity for each particle. If it is 0 all the particles are shot with the same velocity.|| Animated. Real<br />
|-<br />
|Alpha || That's the angle of the initial velocity of the particles shot with the horizontal.|| Animated. Angle<br />
|-<br />
|Alpha Spread || That's the amount of random variation of the angle of the initial velocity. If it is 0 all the particles are shot with the same angle.|| Animated. Real (treat it as angle in degrees)<br />
|-<br />
|Damping || That's the damping coefficient. More damping more stopped is the particle after its shot.|| Can be animated with funny results because it acts to al particles at the same time. Real. Currently internally limited. Maximum value 20.0<br />
|-<br />
|Gravity Force|| That's the gravity force, you know it very well...|| Animated and acts over all the particles at the same time like the Damping coefficient. Real<br />
|-<br />
|Beta || That's the gravity force angle with the horizontal. Changing it you simulate some sort of wind.|| Animated and acts over all the particles at the same time like the Damping coefficient. Angle<br />
|-<br />
|Time Rate|| That's relative speed of the particles time in relation with the animation time. || Animated it speeds or slows down the animation. Real<br />
|-<br />
|Number of Particles|| This is a new parameter from the old version. It allows set the amount of particles|| Animated. It has a lag of response the same time of the Life Time, so you change it at time T and get full amount at time T+LifeTime. Real<br />
|-<br />
|Particles Off|| This parameter works properly in this version. When you check on this boolean parameter you disable the particles visibility. To enable them again you have to place two ON/OFF waypoints together|| Animated. Boolean<br />
|-<br />
|Free Floating Off|| This is a new parameter from the old version. By defect the particles are free floating. It means that when they are shot they are unlinked from the particles source, so if the particles source moves they don't follow. They follow only the movement of a free projectile || Animated and acts over all the particles at the same time. Boolean.<br />
|}<br />
<br />
Also the template include some other parameters:<br />
<br />
* Particles Index: This is the needed exported value for the Duplicate layer. It should not be deleted or unexported. Also cannot be changed.<br />
* small: this is a shared parameter to create the widgets.<br />
<br />
I have added some widgets to aid to know what are the current values of the parameters. See them in action in this screen shot.<br />
<br />
{{l|Image: Particle-show.png}}<br />
<br />
You can see there: <br />
<br />
* A small arrow for the Beta Parameter<br />
* The Gravity bar level<br />
* The Velocity bar level<br />
* The Damping bar level<br />
* The Velocity Spread bar level<br />
* The Particles Off parameter. Green = off, Red = on<br />
* The Free Floating Off parameter. Green = off, Red = on<br />
* A small circumference. Its center is located at X Origin, Y Origin. You can directly manipulate that circumference to place the Origin of the particles source at different times. Select the circle under 'Origin' Group layer.<br />
* A thin square box. It is the Xspread*YSpread random area where the particles are shoot from. It is dynamically link to its current value. Unfortunately I've not found a way to direct manipulation on it. Any idea?<br />
<br />
<small>NOTE to me: Attach a circle composited to the values of the corners and split the XSpread and YSpread as converted types. Direct manipulation can be allowed.</small><br />
<br />
* A long line (in this case points to 45 DEG with the horizontal. That's the current Alpha value.<br />
* Two smaller lines showing an angle. Those lines represents the maximum angle values that the particles can be randomly shot. They are Alpha +/- Alpha Spread.<br />
<br />
== The template file ==<br />
<br />
Here is the template file.<br />
<br />
{{l|Media:Particle-template-v2.3.sifz|Particle template V2.3}}<br />
<br />
It is copyright of {{l|User:Genete|Genete}} but released for Public Domain.<br />
This is the version 2.3.<br />
<br />
== Info ==<br />
[[File:Dynamics.png|left|thumb|frame|Graphical representation of the dynamics system]]<br />
<br clear=all><br />
----<br />
<br />
<br />
TODO: deep explanations, more samples, upload the file.<br />
<br />
Please be patient...</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Particles_V2.0&diff=20510Particles V2.02015-05-02T20:58:23Z<p>Darkspace65: /* Info */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Particles v2.0}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
This is a new particles template that makes use of the recent Duplicate Layer feature. It works very similar to the {{l|Particles V1.0|first version}} but instead of make all the duplication of the layers manually it is produced using the mentioned Duplicate Layer.<br />
<br />
== Quick overview ==<br />
<br />
=== Parameters renamed ===<br />
<br />
These are the new names of the parameters. <br />
<br />
{| border="1" cellspacing="0" align="center" width="90%"<br />
|'''Parameter Name '''||'''Description''' || '''Type'''<br />
|-<br />
| Life time || That's the amount of time that a particle is travelling since it was shot. That's the amount of time that the particle is visible during its own animation (form 0f to Life time)|| It can be animated but produce strange things if particles are visible. Time<br />
|-<br />
|X Origin || That's a X origin of the shooting point.The X start position is calculated based on X Origin+random*X size || Animated. Real<br />
|-<br />
|Y Origin || That's a Y origin of the shooting point.The Y start position is calculated based on Y Origin+random*Y size||Animated. Real<br />
|-<br />
|X Size || That's a half of the width where the start X position of each particle is randomly calculated every time it is shot.The X start position is calculated based on X Origin+random*X size||Animated. Real<br />
|-<br />
|Y Size || That's a half of the width where the start Y position of each particle is randomly calculated every time it is shot. The Y start position is is calculated based on Y Origin+random*Y size||Animated. Real<br />
|-<br />
|Velocity || That's the initial velocity of the particles shot.|| Animated. Real<br />
|-<br />
|Velocity Spread|| That's amount of random variation of the initial velocity for each particle. If it is 0 all the particles are shot with the same velocity.|| Animated. Real<br />
|-<br />
|Alpha || That's the angle of the initial velocity of the particles shot with the horizontal.|| Animated. Angle<br />
|-<br />
|Alpha Spread || That's the amount of random variation of the angle of the initial velocity. If it is 0 all the particles are shot with the same angle.|| Animated. Real (treat it as angle in degrees)<br />
|-<br />
|Damping || That's the damping coefficient. More damping more stopped is the particle after its shot.|| Can be animated with funny results because it acts to al particles at the same time. Real. Currently internally limited. Maximum value 20.0<br />
|-<br />
|Gravity Force|| That's the gravity force, you know it very well...|| Animated and acts over all the particles at the same time like the Damping coefficient. Real<br />
|-<br />
|Beta || That's the gravity force angle with the horizontal. Changing it you simulate some sort of wind.|| Animated and acts over all the particles at the same time like the Damping coefficient. Angle<br />
|-<br />
|Time Rate|| That's relative speed of the particles time in relation with the animation time. || Animated it speeds or slows down the animation. Real<br />
|-<br />
|Number of Particles|| This is a new parameter from the old version. It allows set the amount of particles|| Animated. It has a lag of response the same time of the Life Time, so you change it at time T and get full amount at time T+LifeTime. Real<br />
|-<br />
|Particles Off|| This parameter works properly in this version. When you check on this boolean parameter you disable the particles visibility. To enable them again you have to place two ON/OFF waypoints together|| Animated. Boolean<br />
|-<br />
|Free Floating Off|| This is a new parameter from the old version. By defect the particles are free floating. It means that when they are shot they are unlinked from the particles source, so if the particles source moves they don't follow. They follow only the movement of a free projectile || Animated and acts over all the particles at the same time. Boolean.<br />
|}<br />
<br />
Also the template include some other parameters:<br />
<br />
* Particles Index: This is the needed exported value for the Duplicate layer. It should not be deleted or unexported. Also cannot be changed.<br />
* small: this is a shared parameter to create the widgets.<br />
<br />
I have added some widgets to aid to know what are the current values of the parameters. See them in action in this screen shot.<br />
<br />
{{l|Image: Particle-show.png}}<br />
<br />
You can see there: <br />
<br />
* A small arrow for the Beta Parameter<br />
* The Gravity bar level<br />
* The Velocity bar level<br />
* The Damping bar level<br />
* The Velocity Spread bar level<br />
* The Particles Off parameter. Green = off, Red = on<br />
* The Free Floating Off parameter. Green = off, Red = on<br />
* A small circumference. Its center is located at X Origin, Y Origin. You can directly manipulate that circumference to place the Origin of the particles source at different times. Select the circle under 'Origin' Group layer.<br />
* A thin square box. It is the Xspread*YSpread random area where the particles are shoot from. It is dynamically link to its current value. Unfortunately I've not found a way to direct manipulation on it. Any idea?<br />
<br />
<small>NOTE to me: Attach a circle composited to the values of the corners and split the XSpread and YSpread as converted types. Direct manipulation can be allowed.</small><br />
<br />
* A long line (in this case points to 45 DEG with the horizontal. That's the current Alpha value.<br />
* Two smaller lines showing an angle. Those lines represents the maximum angle values that the particles can be randomly shot. They are Alpha +/- Alpha Spread.<br />
<br />
== The template file ==<br />
<br />
Here is the template file.<br />
<br />
{{l|Media:Particle-template-v2.3.sifz|Particle template V2.3}}<br />
<br />
It is copyright of {{l|User:Genete|Genete}} but released for Public Domain.<br />
This is the version 2.3.<br />
<br />
== Info ==<br />
[[File:Dynamics.png|left|thumb|frame|Graphical representation of the dynamics system]]<br />
----<br />
<br />
<br />
TODO: deep explanations, more samples, upload the file.<br />
<br />
Please be patient...</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Particles_V2.0&diff=20509Particles V2.02015-05-02T20:57:58Z<p>Darkspace65: /* Info */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Particles v2.0}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
This is a new particles template that makes use of the recent Duplicate Layer feature. It works very similar to the {{l|Particles V1.0|first version}} but instead of make all the duplication of the layers manually it is produced using the mentioned Duplicate Layer.<br />
<br />
== Quick overview ==<br />
<br />
=== Parameters renamed ===<br />
<br />
These are the new names of the parameters. <br />
<br />
{| border="1" cellspacing="0" align="center" width="90%"<br />
|'''Parameter Name '''||'''Description''' || '''Type'''<br />
|-<br />
| Life time || That's the amount of time that a particle is travelling since it was shot. That's the amount of time that the particle is visible during its own animation (form 0f to Life time)|| It can be animated but produce strange things if particles are visible. Time<br />
|-<br />
|X Origin || That's a X origin of the shooting point.The X start position is calculated based on X Origin+random*X size || Animated. Real<br />
|-<br />
|Y Origin || That's a Y origin of the shooting point.The Y start position is calculated based on Y Origin+random*Y size||Animated. Real<br />
|-<br />
|X Size || That's a half of the width where the start X position of each particle is randomly calculated every time it is shot.The X start position is calculated based on X Origin+random*X size||Animated. Real<br />
|-<br />
|Y Size || That's a half of the width where the start Y position of each particle is randomly calculated every time it is shot. The Y start position is is calculated based on Y Origin+random*Y size||Animated. Real<br />
|-<br />
|Velocity || That's the initial velocity of the particles shot.|| Animated. Real<br />
|-<br />
|Velocity Spread|| That's amount of random variation of the initial velocity for each particle. If it is 0 all the particles are shot with the same velocity.|| Animated. Real<br />
|-<br />
|Alpha || That's the angle of the initial velocity of the particles shot with the horizontal.|| Animated. Angle<br />
|-<br />
|Alpha Spread || That's the amount of random variation of the angle of the initial velocity. If it is 0 all the particles are shot with the same angle.|| Animated. Real (treat it as angle in degrees)<br />
|-<br />
|Damping || That's the damping coefficient. More damping more stopped is the particle after its shot.|| Can be animated with funny results because it acts to al particles at the same time. Real. Currently internally limited. Maximum value 20.0<br />
|-<br />
|Gravity Force|| That's the gravity force, you know it very well...|| Animated and acts over all the particles at the same time like the Damping coefficient. Real<br />
|-<br />
|Beta || That's the gravity force angle with the horizontal. Changing it you simulate some sort of wind.|| Animated and acts over all the particles at the same time like the Damping coefficient. Angle<br />
|-<br />
|Time Rate|| That's relative speed of the particles time in relation with the animation time. || Animated it speeds or slows down the animation. Real<br />
|-<br />
|Number of Particles|| This is a new parameter from the old version. It allows set the amount of particles|| Animated. It has a lag of response the same time of the Life Time, so you change it at time T and get full amount at time T+LifeTime. Real<br />
|-<br />
|Particles Off|| This parameter works properly in this version. When you check on this boolean parameter you disable the particles visibility. To enable them again you have to place two ON/OFF waypoints together|| Animated. Boolean<br />
|-<br />
|Free Floating Off|| This is a new parameter from the old version. By defect the particles are free floating. It means that when they are shot they are unlinked from the particles source, so if the particles source moves they don't follow. They follow only the movement of a free projectile || Animated and acts over all the particles at the same time. Boolean.<br />
|}<br />
<br />
Also the template include some other parameters:<br />
<br />
* Particles Index: This is the needed exported value for the Duplicate layer. It should not be deleted or unexported. Also cannot be changed.<br />
* small: this is a shared parameter to create the widgets.<br />
<br />
I have added some widgets to aid to know what are the current values of the parameters. See them in action in this screen shot.<br />
<br />
{{l|Image: Particle-show.png}}<br />
<br />
You can see there: <br />
<br />
* A small arrow for the Beta Parameter<br />
* The Gravity bar level<br />
* The Velocity bar level<br />
* The Damping bar level<br />
* The Velocity Spread bar level<br />
* The Particles Off parameter. Green = off, Red = on<br />
* The Free Floating Off parameter. Green = off, Red = on<br />
* A small circumference. Its center is located at X Origin, Y Origin. You can directly manipulate that circumference to place the Origin of the particles source at different times. Select the circle under 'Origin' Group layer.<br />
* A thin square box. It is the Xspread*YSpread random area where the particles are shoot from. It is dynamically link to its current value. Unfortunately I've not found a way to direct manipulation on it. Any idea?<br />
<br />
<small>NOTE to me: Attach a circle composited to the values of the corners and split the XSpread and YSpread as converted types. Direct manipulation can be allowed.</small><br />
<br />
* A long line (in this case points to 45 DEG with the horizontal. That's the current Alpha value.<br />
* Two smaller lines showing an angle. Those lines represents the maximum angle values that the particles can be randomly shot. They are Alpha +/- Alpha Spread.<br />
<br />
== The template file ==<br />
<br />
Here is the template file.<br />
<br />
{{l|Media:Particle-template-v2.3.sifz|Particle template V2.3}}<br />
<br />
It is copyright of {{l|User:Genete|Genete}} but released for Public Domain.<br />
This is the version 2.3.<br />
<br />
== Info ==<br />
[[File:Dynamics.png|center|thumb|frame|Graphical representation of the dynamics system]]<br />
----<br />
<br />
<br />
TODO: deep explanations, more samples, upload the file.<br />
<br />
Please be patient...</div>Darkspace65https://www.wiki.synfig.org/index.php?title=File:Dynamics.png&diff=20508File:Dynamics.png2015-05-02T20:57:18Z<p>Darkspace65: </p>
<hr />
<div></div>Darkspace65https://www.wiki.synfig.org/index.php?title=Particles_V2.0&diff=20507Particles V2.02015-05-02T20:53:03Z<p>Darkspace65: /* The template file */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Particles v2.0}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
This is a new particles template that makes use of the recent Duplicate Layer feature. It works very similar to the {{l|Particles V1.0|first version}} but instead of make all the duplication of the layers manually it is produced using the mentioned Duplicate Layer.<br />
<br />
== Quick overview ==<br />
<br />
=== Parameters renamed ===<br />
<br />
These are the new names of the parameters. <br />
<br />
{| border="1" cellspacing="0" align="center" width="90%"<br />
|'''Parameter Name '''||'''Description''' || '''Type'''<br />
|-<br />
| Life time || That's the amount of time that a particle is travelling since it was shot. That's the amount of time that the particle is visible during its own animation (form 0f to Life time)|| It can be animated but produce strange things if particles are visible. Time<br />
|-<br />
|X Origin || That's a X origin of the shooting point.The X start position is calculated based on X Origin+random*X size || Animated. Real<br />
|-<br />
|Y Origin || That's a Y origin of the shooting point.The Y start position is calculated based on Y Origin+random*Y size||Animated. Real<br />
|-<br />
|X Size || That's a half of the width where the start X position of each particle is randomly calculated every time it is shot.The X start position is calculated based on X Origin+random*X size||Animated. Real<br />
|-<br />
|Y Size || That's a half of the width where the start Y position of each particle is randomly calculated every time it is shot. The Y start position is is calculated based on Y Origin+random*Y size||Animated. Real<br />
|-<br />
|Velocity || That's the initial velocity of the particles shot.|| Animated. Real<br />
|-<br />
|Velocity Spread|| That's amount of random variation of the initial velocity for each particle. If it is 0 all the particles are shot with the same velocity.|| Animated. Real<br />
|-<br />
|Alpha || That's the angle of the initial velocity of the particles shot with the horizontal.|| Animated. Angle<br />
|-<br />
|Alpha Spread || That's the amount of random variation of the angle of the initial velocity. If it is 0 all the particles are shot with the same angle.|| Animated. Real (treat it as angle in degrees)<br />
|-<br />
|Damping || That's the damping coefficient. More damping more stopped is the particle after its shot.|| Can be animated with funny results because it acts to al particles at the same time. Real. Currently internally limited. Maximum value 20.0<br />
|-<br />
|Gravity Force|| That's the gravity force, you know it very well...|| Animated and acts over all the particles at the same time like the Damping coefficient. Real<br />
|-<br />
|Beta || That's the gravity force angle with the horizontal. Changing it you simulate some sort of wind.|| Animated and acts over all the particles at the same time like the Damping coefficient. Angle<br />
|-<br />
|Time Rate|| That's relative speed of the particles time in relation with the animation time. || Animated it speeds or slows down the animation. Real<br />
|-<br />
|Number of Particles|| This is a new parameter from the old version. It allows set the amount of particles|| Animated. It has a lag of response the same time of the Life Time, so you change it at time T and get full amount at time T+LifeTime. Real<br />
|-<br />
|Particles Off|| This parameter works properly in this version. When you check on this boolean parameter you disable the particles visibility. To enable them again you have to place two ON/OFF waypoints together|| Animated. Boolean<br />
|-<br />
|Free Floating Off|| This is a new parameter from the old version. By defect the particles are free floating. It means that when they are shot they are unlinked from the particles source, so if the particles source moves they don't follow. They follow only the movement of a free projectile || Animated and acts over all the particles at the same time. Boolean.<br />
|}<br />
<br />
Also the template include some other parameters:<br />
<br />
* Particles Index: This is the needed exported value for the Duplicate layer. It should not be deleted or unexported. Also cannot be changed.<br />
* small: this is a shared parameter to create the widgets.<br />
<br />
I have added some widgets to aid to know what are the current values of the parameters. See them in action in this screen shot.<br />
<br />
{{l|Image: Particle-show.png}}<br />
<br />
You can see there: <br />
<br />
* A small arrow for the Beta Parameter<br />
* The Gravity bar level<br />
* The Velocity bar level<br />
* The Damping bar level<br />
* The Velocity Spread bar level<br />
* The Particles Off parameter. Green = off, Red = on<br />
* The Free Floating Off parameter. Green = off, Red = on<br />
* A small circumference. Its center is located at X Origin, Y Origin. You can directly manipulate that circumference to place the Origin of the particles source at different times. Select the circle under 'Origin' Group layer.<br />
* A thin square box. It is the Xspread*YSpread random area where the particles are shoot from. It is dynamically link to its current value. Unfortunately I've not found a way to direct manipulation on it. Any idea?<br />
<br />
<small>NOTE to me: Attach a circle composited to the values of the corners and split the XSpread and YSpread as converted types. Direct manipulation can be allowed.</small><br />
<br />
* A long line (in this case points to 45 DEG with the horizontal. That's the current Alpha value.<br />
* Two smaller lines showing an angle. Those lines represents the maximum angle values that the particles can be randomly shot. They are Alpha +/- Alpha Spread.<br />
<br />
== The template file ==<br />
<br />
Here is the template file.<br />
<br />
{{l|Media:Particle-template-v2.3.sifz|Particle template V2.3}}<br />
<br />
It is copyright of {{l|User:Genete|Genete}} but released for Public Domain.<br />
This is the version 2.3.<br />
<br />
== Info ==<br />
[[File:Dynamics.png|center|frame|Graphical representation of the dynamics system]]<br />
----<br />
<br />
<br />
TODO: deep explanations, more samples, upload the file.<br />
<br />
Please be patient...</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Particles_V2.0&diff=20506Particles V2.02015-05-02T20:52:47Z<p>Darkspace65: /* Info */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Particles v2.0}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
This is a new particles template that makes use of the recent Duplicate Layer feature. It works very similar to the {{l|Particles V1.0|first version}} but instead of make all the duplication of the layers manually it is produced using the mentioned Duplicate Layer.<br />
<br />
== Quick overview ==<br />
<br />
=== Parameters renamed ===<br />
<br />
These are the new names of the parameters. <br />
<br />
{| border="1" cellspacing="0" align="center" width="90%"<br />
|'''Parameter Name '''||'''Description''' || '''Type'''<br />
|-<br />
| Life time || That's the amount of time that a particle is travelling since it was shot. That's the amount of time that the particle is visible during its own animation (form 0f to Life time)|| It can be animated but produce strange things if particles are visible. Time<br />
|-<br />
|X Origin || That's a X origin of the shooting point.The X start position is calculated based on X Origin+random*X size || Animated. Real<br />
|-<br />
|Y Origin || That's a Y origin of the shooting point.The Y start position is calculated based on Y Origin+random*Y size||Animated. Real<br />
|-<br />
|X Size || That's a half of the width where the start X position of each particle is randomly calculated every time it is shot.The X start position is calculated based on X Origin+random*X size||Animated. Real<br />
|-<br />
|Y Size || That's a half of the width where the start Y position of each particle is randomly calculated every time it is shot. The Y start position is is calculated based on Y Origin+random*Y size||Animated. Real<br />
|-<br />
|Velocity || That's the initial velocity of the particles shot.|| Animated. Real<br />
|-<br />
|Velocity Spread|| That's amount of random variation of the initial velocity for each particle. If it is 0 all the particles are shot with the same velocity.|| Animated. Real<br />
|-<br />
|Alpha || That's the angle of the initial velocity of the particles shot with the horizontal.|| Animated. Angle<br />
|-<br />
|Alpha Spread || That's the amount of random variation of the angle of the initial velocity. If it is 0 all the particles are shot with the same angle.|| Animated. Real (treat it as angle in degrees)<br />
|-<br />
|Damping || That's the damping coefficient. More damping more stopped is the particle after its shot.|| Can be animated with funny results because it acts to al particles at the same time. Real. Currently internally limited. Maximum value 20.0<br />
|-<br />
|Gravity Force|| That's the gravity force, you know it very well...|| Animated and acts over all the particles at the same time like the Damping coefficient. Real<br />
|-<br />
|Beta || That's the gravity force angle with the horizontal. Changing it you simulate some sort of wind.|| Animated and acts over all the particles at the same time like the Damping coefficient. Angle<br />
|-<br />
|Time Rate|| That's relative speed of the particles time in relation with the animation time. || Animated it speeds or slows down the animation. Real<br />
|-<br />
|Number of Particles|| This is a new parameter from the old version. It allows set the amount of particles|| Animated. It has a lag of response the same time of the Life Time, so you change it at time T and get full amount at time T+LifeTime. Real<br />
|-<br />
|Particles Off|| This parameter works properly in this version. When you check on this boolean parameter you disable the particles visibility. To enable them again you have to place two ON/OFF waypoints together|| Animated. Boolean<br />
|-<br />
|Free Floating Off|| This is a new parameter from the old version. By defect the particles are free floating. It means that when they are shot they are unlinked from the particles source, so if the particles source moves they don't follow. They follow only the movement of a free projectile || Animated and acts over all the particles at the same time. Boolean.<br />
|}<br />
<br />
Also the template include some other parameters:<br />
<br />
* Particles Index: This is the needed exported value for the Duplicate layer. It should not be deleted or unexported. Also cannot be changed.<br />
* small: this is a shared parameter to create the widgets.<br />
<br />
I have added some widgets to aid to know what are the current values of the parameters. See them in action in this screen shot.<br />
<br />
{{l|Image: Particle-show.png}}<br />
<br />
You can see there: <br />
<br />
* A small arrow for the Beta Parameter<br />
* The Gravity bar level<br />
* The Velocity bar level<br />
* The Damping bar level<br />
* The Velocity Spread bar level<br />
* The Particles Off parameter. Green = off, Red = on<br />
* The Free Floating Off parameter. Green = off, Red = on<br />
* A small circumference. Its center is located at X Origin, Y Origin. You can directly manipulate that circumference to place the Origin of the particles source at different times. Select the circle under 'Origin' Group layer.<br />
* A thin square box. It is the Xspread*YSpread random area where the particles are shoot from. It is dynamically link to its current value. Unfortunately I've not found a way to direct manipulation on it. Any idea?<br />
<br />
<small>NOTE to me: Attach a circle composited to the values of the corners and split the XSpread and YSpread as converted types. Direct manipulation can be allowed.</small><br />
<br />
* A long line (in this case points to 45 DEG with the horizontal. That's the current Alpha value.<br />
* Two smaller lines showing an angle. Those lines represents the maximum angle values that the particles can be randomly shot. They are Alpha +/- Alpha Spread.<br />
<br />
=== The template file ===<br />
<br />
Here is the template file.<br />
<br />
{{l|Media:Particle-template-v2.3.sifz|Particle template V2.3}}<br />
<br />
It is copyright of {{l|User:Genete|Genete}} but released for Public Domain.<br />
This is the version 2.3.<br />
<br />
== Info ==<br />
[[File:Dynamics.png|center|frame|Graphical representation of the dynamics system]]<br />
----<br />
<br />
<br />
TODO: deep explanations, more samples, upload the file.<br />
<br />
Please be patient...</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Particles_V2.0&diff=20505Particles V2.02015-05-02T20:51:27Z<p>Darkspace65: /* Quick overview */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Particles v2.0}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
This is a new particles template that makes use of the recent Duplicate Layer feature. It works very similar to the {{l|Particles V1.0|first version}} but instead of make all the duplication of the layers manually it is produced using the mentioned Duplicate Layer.<br />
<br />
== Quick overview ==<br />
<br />
=== Parameters renamed ===<br />
<br />
These are the new names of the parameters. <br />
<br />
{| border="1" cellspacing="0" align="center" width="90%"<br />
|'''Parameter Name '''||'''Description''' || '''Type'''<br />
|-<br />
| Life time || That's the amount of time that a particle is travelling since it was shot. That's the amount of time that the particle is visible during its own animation (form 0f to Life time)|| It can be animated but produce strange things if particles are visible. Time<br />
|-<br />
|X Origin || That's a X origin of the shooting point.The X start position is calculated based on X Origin+random*X size || Animated. Real<br />
|-<br />
|Y Origin || That's a Y origin of the shooting point.The Y start position is calculated based on Y Origin+random*Y size||Animated. Real<br />
|-<br />
|X Size || That's a half of the width where the start X position of each particle is randomly calculated every time it is shot.The X start position is calculated based on X Origin+random*X size||Animated. Real<br />
|-<br />
|Y Size || That's a half of the width where the start Y position of each particle is randomly calculated every time it is shot. The Y start position is is calculated based on Y Origin+random*Y size||Animated. Real<br />
|-<br />
|Velocity || That's the initial velocity of the particles shot.|| Animated. Real<br />
|-<br />
|Velocity Spread|| That's amount of random variation of the initial velocity for each particle. If it is 0 all the particles are shot with the same velocity.|| Animated. Real<br />
|-<br />
|Alpha || That's the angle of the initial velocity of the particles shot with the horizontal.|| Animated. Angle<br />
|-<br />
|Alpha Spread || That's the amount of random variation of the angle of the initial velocity. If it is 0 all the particles are shot with the same angle.|| Animated. Real (treat it as angle in degrees)<br />
|-<br />
|Damping || That's the damping coefficient. More damping more stopped is the particle after its shot.|| Can be animated with funny results because it acts to al particles at the same time. Real. Currently internally limited. Maximum value 20.0<br />
|-<br />
|Gravity Force|| That's the gravity force, you know it very well...|| Animated and acts over all the particles at the same time like the Damping coefficient. Real<br />
|-<br />
|Beta || That's the gravity force angle with the horizontal. Changing it you simulate some sort of wind.|| Animated and acts over all the particles at the same time like the Damping coefficient. Angle<br />
|-<br />
|Time Rate|| That's relative speed of the particles time in relation with the animation time. || Animated it speeds or slows down the animation. Real<br />
|-<br />
|Number of Particles|| This is a new parameter from the old version. It allows set the amount of particles|| Animated. It has a lag of response the same time of the Life Time, so you change it at time T and get full amount at time T+LifeTime. Real<br />
|-<br />
|Particles Off|| This parameter works properly in this version. When you check on this boolean parameter you disable the particles visibility. To enable them again you have to place two ON/OFF waypoints together|| Animated. Boolean<br />
|-<br />
|Free Floating Off|| This is a new parameter from the old version. By defect the particles are free floating. It means that when they are shot they are unlinked from the particles source, so if the particles source moves they don't follow. They follow only the movement of a free projectile || Animated and acts over all the particles at the same time. Boolean.<br />
|}<br />
<br />
Also the template include some other parameters:<br />
<br />
* Particles Index: This is the needed exported value for the Duplicate layer. It should not be deleted or unexported. Also cannot be changed.<br />
* small: this is a shared parameter to create the widgets.<br />
<br />
I have added some widgets to aid to know what are the current values of the parameters. See them in action in this screen shot.<br />
<br />
{{l|Image: Particle-show.png}}<br />
<br />
You can see there: <br />
<br />
* A small arrow for the Beta Parameter<br />
* The Gravity bar level<br />
* The Velocity bar level<br />
* The Damping bar level<br />
* The Velocity Spread bar level<br />
* The Particles Off parameter. Green = off, Red = on<br />
* The Free Floating Off parameter. Green = off, Red = on<br />
* A small circumference. Its center is located at X Origin, Y Origin. You can directly manipulate that circumference to place the Origin of the particles source at different times. Select the circle under 'Origin' Group layer.<br />
* A thin square box. It is the Xspread*YSpread random area where the particles are shoot from. It is dynamically link to its current value. Unfortunately I've not found a way to direct manipulation on it. Any idea?<br />
<br />
<small>NOTE to me: Attach a circle composited to the values of the corners and split the XSpread and YSpread as converted types. Direct manipulation can be allowed.</small><br />
<br />
* A long line (in this case points to 45 DEG with the horizontal. That's the current Alpha value.<br />
* Two smaller lines showing an angle. Those lines represents the maximum angle values that the particles can be randomly shot. They are Alpha +/- Alpha Spread.<br />
<br />
=== The template file ===<br />
<br />
Here is the template file.<br />
<br />
{{l|Media:Particle-template-v2.3.sifz|Particle template V2.3}}<br />
<br />
It is copyright of {{l|User:Genete|Genete}} but released for Public Domain.<br />
This is the version 2.3.<br />
<br />
=== Info ===<br />
[[File:Dynamics.png|center|frame|Graphical representation of the dynamics system]]<br />
----<br />
<br />
<br />
TODO: deep explanations, more samples, upload the file.<br />
<br />
Please be patient...</div>Darkspace65https://www.wiki.synfig.org/index.php?title=File:Animation_Basics_tutorial_7_1.0.png&diff=20504File:Animation Basics tutorial 7 1.0.png2015-05-02T20:39:48Z<p>Darkspace65: </p>
<hr />
<div></div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20503Doc:Animation Basics2015-05-02T20:39:23Z<p>Darkspace65: /* Rendering your animation */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Canvas|Properties}} or select {{c|Canvas|Properties}} from the menu. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog -End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame|Keyframes Panel and Time Track Panel]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|Canvas Window, Keyframes Panel and Time Track Panel|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots depending on the default interpolation) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center|frame|Parameters Panel and Time Track Panel with green Waypoints]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red man icon in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}} or click on the render icon. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 1.0.png|center|frame|The Render Icon]] <br />
<br />
[[File:Animation Basics tutorial 7 1.0.png|center|frame|Render Settings]]<br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above and it should look like this.<br />
[[File:rider.gif|center|frame|Rendered Animation]]<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20502Doc:Animation Basics2015-05-02T20:34:01Z<p>Darkspace65: /* Setting up the workspace */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Canvas|Properties}} or select {{c|Canvas|Properties}} from the menu. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog -End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame|Keyframes Panel and Time Track Panel]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|Canvas Window, Keyframes Panel and Time Track Panel|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots depending on the default interpolation) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center|frame|Parameters Panel and Time Track Panel with green Waypoints]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red man icon in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}} or click on the render icon. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 1.0.png|center|frame|The Render Icon]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above and it should look like this.<br />
[[File:rider.gif|center|frame|Rendered Animation]]<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=File:Properties_Dialog_-End_Time_1.0.png&diff=20501File:Properties Dialog -End Time 1.0.png2015-05-02T20:33:08Z<p>Darkspace65: Darkspace65 uploaded a new version of File:Properties Dialog -End Time 1.0.png</p>
<hr />
<div></div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20500Doc:Animation Basics2015-05-02T20:16:00Z<p>Darkspace65: /* Setting up the workspace */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}} or select {{c|Canvas|Properties}} from the menu. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog -End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame|Keyframes Panel and Time Track Panel]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|Canvas Window, Keyframes Panel and Time Track Panel|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots depending on the default interpolation) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center|frame|Parameters Panel and Time Track Panel with green Waypoints]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red man icon in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}} or click on the render icon. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 1.0.png|center|frame|The Render Icon]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above and it should look like this.<br />
[[File:rider.gif|center|frame|Rendered Animation]]<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=File:Properties_Dialog_-End_Time_1.0.png&diff=20499File:Properties Dialog -End Time 1.0.png2015-05-02T20:13:32Z<p>Darkspace65: </p>
<hr />
<div></div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20498Doc:Animation Basics2015-05-02T20:13:09Z<p>Darkspace65: /* Setting up the workspace */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog -End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame|Keyframes Panel and Time Track Panel]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|Canvas Window, Keyframes Panel and Time Track Panel|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots depending on the default interpolation) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center|frame|Parameters Panel and Time Track Panel with green Waypoints]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red man icon in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}} or click on the render icon. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 1.0.png|center|frame|The Render Icon]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above and it should look like this.<br />
[[File:rider.gif|center|frame|Rendered Animation]]<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=File:Rider.gif&diff=20497File:Rider.gif2015-05-02T20:03:14Z<p>Darkspace65: </p>
<hr />
<div></div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20496Doc:Animation Basics2015-05-02T20:02:36Z<p>Darkspace65: /* Rendering your animation */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog - End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame|Keyframes Panel and Time Track Panel]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|Canvas Window, Keyframes Panel and Time Track Panel|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots depending on the default interpolation) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center|frame|Parameters Panel and Time Track Panel with green Waypoints]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red man icon in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}} or click on the render icon. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 1.0.png|center|frame|The Render Icon]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above and it should look like this.<br />
[[File:rider.gif|center|frame|Rendered Animation]]<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20495Doc:Animation Basics2015-05-02T19:44:02Z<p>Darkspace65: /* The Keyframes Panel */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog - End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame|Keyframes Panel and Time Track Panel]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|Canvas Window, Keyframes Panel and Time Track Panel|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots depending on the default interpolation) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center|frame|Parameters Panel and Time Track Panel with green Waypoints]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red man icon in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}} or click on the render icon. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 1.0.png|center|frame|The Render Icon]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20494Doc:Animation Basics2015-05-02T19:43:32Z<p>Darkspace65: /* The Keyframes Panel */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog - End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame|Keyframes Panel and Time Track Panel]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|Canvas Window, Keyframes Panel and Time Track Panel|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots depending on the default interpolation) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center|Parameters Panel and Time Track Panel with green Waypoints]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red man icon in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}} or click on the render icon. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 1.0.png|center|frame|The Render Icon]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20493Doc:Animation Basics2015-05-02T19:41:18Z<p>Darkspace65: /* The Keyframes Panel */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog - End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame|Keyframes Panel and Time Track Panel]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|Canvas Window, Keyframes Panel and Time Track Panel|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots depending on the default interpolation) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red man icon in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}} or click on the render icon. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 1.0.png|center|frame|The Render Icon]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20492Doc:Animation Basics2015-05-02T19:38:54Z<p>Darkspace65: /* Adding movement */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog - End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame|Keyframes Panel and Time Track Panel]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|Keyframes Panel|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots depending on the default interpolation) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red man icon in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}} or click on the render icon. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 1.0.png|center|frame|The Render Icon]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20491Doc:Animation Basics2015-05-02T19:36:19Z<p>Darkspace65: /* Rendering your animation */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog - End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|Keyframes Panel|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots depending on the default interpolation) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red man icon in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}} or click on the render icon. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 1.0.png|center|frame|The Render Icon]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20490Doc:Animation Basics2015-05-02T19:33:07Z<p>Darkspace65: /* The Keyframes Panel */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog - End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|Keyframes Panel|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots depending on the default interpolation) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}} or click on the render icon. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 1.0.png|center|frame|The Render Icon]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20489Doc:Animation Basics2015-05-02T19:31:41Z<p>Darkspace65: /* The Keyframes Panel */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog - End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|Keyframes Panel|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots depending on the default {{l|Interpolation}}) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}} or click on the render icon. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 1.0.png|center|frame|The Render Icon]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20488Doc:Animation Basics2015-05-02T19:21:28Z<p>Darkspace65: /* Rendering your animation */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog - End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|Keyframes Panel|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots in previous versions of synfig) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}} or click on the render icon. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 1.0.png|center|frame|The Render Icon]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20487Doc:Animation Basics2015-05-02T19:12:33Z<p>Darkspace65: /* Rendering your animation */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog - End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|Keyframes Panel|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots in previous versions of synfig) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}}. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 1.0.png|center|frame|The Render Icon]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20486Doc:Animation Basics2015-05-02T19:11:00Z<p>Darkspace65: /* The Keyframes Panel */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog - End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|Keyframes Panel|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots in previous versions of synfig) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}}. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 1.0.png|center|Calling "Render" from menu in Synfig Studio]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20485Doc:Animation Basics2015-05-02T19:04:29Z<p>Darkspace65: /* Rendering your animation */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog - End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots in previous versions of synfig) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}}. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 1.0.png|center|Calling "Render" from menu in Synfig Studio]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=File:Animation_Basics_tutorial_6_1.0.png&diff=20484File:Animation Basics tutorial 6 1.0.png2015-05-02T19:03:40Z<p>Darkspace65: </p>
<hr />
<div></div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20483Doc:Animation Basics2015-05-02T19:03:21Z<p>Darkspace65: /* Rendering your animation */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog - End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots in previous versions of synfig) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}}. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 1.0.png|618px|thumb|center|Calling "Render" from menu in Synfig Studio]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20482Doc:Animation Basics2015-05-02T18:56:44Z<p>Darkspace65: /* The Keyframes Panel */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog - End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots in previous versions of synfig) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|center]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}}. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 0.63.06.png|618px|thumb|center|Calling "Render" from menu in Synfig Studio]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20481Doc:Animation Basics2015-05-02T18:56:17Z<p>Darkspace65: /* The Keyframes Panel */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog - End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots in previous versions of synfig) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|thumb|center]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}}. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 0.63.06.png|618px|thumb|center|Calling "Render" from menu in Synfig Studio]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=File:TimetrackOriginWaypoints_1.0.png&diff=20480File:TimetrackOriginWaypoints 1.0.png2015-05-02T18:54:37Z<p>Darkspace65: </p>
<hr />
<div></div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20479Doc:Animation Basics2015-05-02T18:53:48Z<p>Darkspace65: /* The Keyframes Panel */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog - End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots in previous versions of synfig) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 1.0.png|thumb|center|450px]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}}. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 0.63.06.png|618px|thumb|center|Calling "Render" from menu in Synfig Studio]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20478Doc:Animation Basics2015-05-02T18:48:49Z<p>Darkspace65: /* The Keyframes Panel */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog - End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|450px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots in previous versions of synfig) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 0.63.06.png|thumb|center|450px]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}}. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 0.63.06.png|618px|thumb|center|Calling "Render" from menu in Synfig Studio]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65https://www.wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=20477Doc:Animation Basics2015-05-02T18:48:23Z<p>Darkspace65: /* The Keyframes Panel */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{TOCright}}<br />
[[Category:Manual]]<br />
[[Category:Tutorials]]<br />
[[Category:Tutorials Basic]]<br />
[[Category:Updated]]<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
== Introduction ==<br />
Creating an animation in Synfig Studio is really easy. It basically means to change a drawing &mdash; you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between.<br />
<br />
Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
== Setting up the workspace ==<br />
<br />
Let's do it. Start Synfig Studio. A new file is created at the start automatically . Click the {{l|Canvas Menu Caret|caret menu}} (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. The {{l|Canvas_Properties_Dialog}} will appear.<br />
<br />
Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet &mdash; we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" &mdash; that will make our animation 2 seconds long.<br />
<br />
[[File:Properties Dialog - End Time 1.0.png|center|frame|Canvas Properties Dialog]]<br />
<br />
Now click "OK", select the {{l|Rectangle Tool}} and create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. <br />
<br />
[[File:Animation Basics tutorial 2 1.0.png|450px|center|thumb]]<br />
<br />
Now we need a circle. Change the fill color to red, select the {{l|Circle Tool}} and create a circle. It doesn't matter if it's not perfect: You can edit it. Select the {{l|Transform Tool}} and click the circle. It will go into an editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the circle by grabbing it on its green dot (the ''Origin'') in the middle.<br />
<br />
[[File:Animation Basics tutorial 3 1.0.png|450px|center|thumb]]<br />
<br />
These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) has a grey time slider at the bottom, the {{l|Timebar}}. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of the time slider is changing its values to something like "12f", "1s 15f", etc. You can set your position on the time slider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of the time slider, and entering "2s" will move it to the end of the time slider. <br />
<br />
{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of the time slider, putting the indicator out of view.}}<br />
<br />
You may notice that nothing changes on the canvas at this point. Return to "0s" and switch to {{l|Animate Editing Mode}} by clicking the green man button to the right of the gray time slider. The canvas will display a red outline; it reminds you that changes to your objects now affect your animation at the time shown in the time slider.<br />
<br />
In animate editing mode, every change to your objects {{l|Category:Parameters|parameters}} creates a {{l|Waypoint|waypoint}} that associates the changes with the current time. As you will see, Synfig can create smooth intermediate changes between waypoints, and you can even choose the way in which the intermediate changes take place. You will probably find it helpful to associate some or all of your waypoints with {{l|Keyframe|keyframes}}. <br />
<br />
[[File:Animation Basics tutorial 4 1.0.png|450px|center|thumb]]<br />
<br />
Previously, three "steps" or "stages" were mentioned. These are represented by {{l|Keyframe|keyframes}}. (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.<br />
<br />
Go to the {{l|Keyframes_Panel}} &mdash; click on the little tab with the small key icon in the bottom window &mdash; to edit keyframes. Now press the small button with the "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.<br />
<br />
[[File:Keyframes Panel 1.0.png|center|frame]]<br />
<br />
Now, go to the "1s" mark in the time slider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.<br />
<br />
[[File:Keyframes Panel 2 1.0.png|center|frame]]<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".<br />
<br />
== The Keyframes Panel ==<br />
<br />
The {{l|Keyframes Panel}} is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory. <br />
<br />
You might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your time slider will jump to the correct time.<br />
<br />
You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!<br />
<br />
[[File:Animation Basics tutorial 5 1.0.png|thumb|center|frame|240px]]<br />
<br />
Wondering where the animation is? Just click to an arbitrary position on the time slider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.<br />
<br />
Note that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember the image states at particular times. That's why when we modified the circle's position at "1s", it stayed on the left at "2s" (as well as at "0s"). If you switch back to the Parameters Panel, and look at the {{l|Timetrack Panel}} you will see that three orange diamonds (or green dots in previous versions of synfig) appeared on the right of the {{Literal|Origin}} parameter. Those are called {{L|Waypoints}}, and they represent times at which object's parameters, like location or color, are instructed to take on specified new values.<br />
<br />
[[File:TimetrackOriginWaypoints 0.63.06.png|thumb|center|450px]]<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".<br />
<br />
Let's try the first way. Leave the {{l|Animate Editing Mode}} by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ({{l|Canvas Menu Caret}} button in the upper left corner) and select {{c|File|Render}}. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose {{Literal|gif}} target format instead of {{Literal|Auto}}, then click {{Literal|Render}}. Depending on your processor speed it should take a few moments, but finally the image window status bar (located on the bottom of the window) should say "File rendered successfully".<br />
<br />
[[File:Animation Basics tutorial 6 0.63.06.png|618px|thumb|center|Calling "Render" from menu in Synfig Studio]] <br />
<br />
{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimize the palette for the image.}}<br />
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!<br />
<br />
{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file in, and type something like this:<br />
<br />
synfig -t gif BasicKnightRider.sifz<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:<br />
<br />
BasicKnightRider.sifz ==> BasicKnightRider.gif: DONE<br />
<br />
Then you are done and can view your animated gif using Firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities include its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.<br />
<br />
Now, let's continue with the next manual chapter: {{l|Doc:Adding Layers|Adding Layers}}<br />
<br />
You can download the project used : [[File:BasicKnightRider.sifz]]<br />
<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}</div>Darkspace65