Synfig Studio :: Documentation - User contributions [en]

Advanced Outline Layer

2011-06-19T16:08:44Z

Andrewkay: /* Tips for creating and manipulating Advanced Outlines within the canvas window */ normal tool --> transform tool.

{{Title|Advanced Outline Layer}}
{{Category|Layers}}


{{l|Image:Layer_geometry_advanced_outline_icon.png|64px}}

== About Advanced Outline Layers==

The new Advanced Outline Layer comes from the need to specify the width of the outline at a different place than the {{l|blinepoint}}. Usually the user don't want to have a blinepoint where he wants to have the width and vice versa. This Advanced Outline makes the width become independent of the blinepoint position.

Advanced Outline goes further than just define the width with independence from the blinepoints. It adds some new features to the regular outline. They are listed with examples below:
<gallery caption="New features" widths="490px" heights="300px" perrow="2">
File:Variable-width-without-blinepoints.png | Variable width without blinepoints
File:Lots-of-blinepoints-width-just-two width-controls.png | Width controlled just by two points when the bline has many blinepoints
File:Different-types of tips.png | Different types of tips
File: Segments of outlines.png | Segments of outlines
File:Different cusps types.png | Three global cusps types
File:Smoothness control.png | Control of smoothness from linear (0.0) to smooth (1.0)
</gallery>

== Tips for creating and manipulating Advanced Outlines within the canvas window ==

* Create Advanced Outlines in the same way that you make normal ones with the bline tool (Alt+B), but make sure the Advanced Outline box is ticked in the bline toolbox.
* To change the widths, you need the purple ducks (Alt+5) and the Transform tool (Alt+A) (NOT the width tool!). It may help to hide the other ducks (Alt+2, Alt+3).
* Advanced width control ducks now come in two parts. Drag the pale one to move the position of action of the width control, and the darker one to change the width.
* Right click on a purple duck to get the context menu. Select "Add Item (smart)" here to create more width controls.

==Parameters of Advanced Outline Layers==

The parameters of the Advanced Outline Layers are:

{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0"
|-style="background:#silver"
|'''Name'''||'''Value'''||'''Type'''
|-
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Z Depth}}
||0.000000
||real

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} {{l|Amount Parameter|Amount}}
||1.000000
||real

|-
||{{l|Image:type_integer_icon.png|16px}} {{l|Blend Method|Blend Method}}
||Composite
||integer

|-style="background:#eeeeee"
||{{l|Image:Type_color_icon.png|16px}} {{l|Colors Dialog|Color}}
||
{| style="width:95%; height:16px; background:black; color:black" border="1"
|-
|}
||color

|-style="background:#"
||{{l|Image:Type_vector_icon.png|16px}} Origin
||0.000000u,0.000000u
||vector

|-style="background:#eeeeee"
||{{l|Image:Type_bool_icon.png|16px}} Invert
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-
||{{l|Image:Type_bool_icon.png|16px}} Antialiasing
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} Feather
||0.000000pt
||real

|-
||{{l|Image:Type_integer_icon.png|16px}} Tyep of Feather
||Fast Gaussian Blur
||integer

|-style="background:#eeeeee"
||{{l|Image:Type_integer_icon.png|16px}} Winding Sytle
||Non Zero
||integer

|-
||{{l|Image:Type_list_icon.png|16px}} Vertices
||List
||list (BLine)

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} Outline Width
||2.000000pt
||real

|-
||{{l|Image:Type_real_icon.png|16px}} Expand
||0.000000pt
||real

|-style="background:#eeeeee"
||{{l|Image:Type_integer_icon.png|16px}} Tip Type at Start
||Rounded Stop
||integer

|-
||{{l|Image:Type_integer_icon.png|16px}} Tip Type at End
||Rounded Stop
||integer

|-style="background:#eeeeee"
||{{l|Image:Type_integer_icon.png|16px}} Cusps Type
||Sharp
||integer

|-
||{{l|Image:Type_real_icon.png|16px}} Smoothness
||0.500000
||real

|-style="background:#eeeeee"
||{{l|Image:Type_list_icon.png|16px}} Width Point List
||List
||list(WPList)

|}

==Specific parameters for Advanced Outline Layer==
Notice that many of the parameters are the same than the regular Outline, so you can find the explanation of its usage just reading the wiki page of it. The new parameters are:
* Tip Type at start
* Tip Type at end
* Cusps type
* Smoothness
* Width Point List

=== Width Point List ===
Each advanced Outline has a list of parameters that represents the information for each control of width item. They are called Width Points and consists on four sub-parameters:

* Position (Real number): it represents the position of the width point along the bline. Although it is allowed to be any real number, its meaning is only from 0.0 to 1.0. 0.0 corresponds to the start of the bline (first blinepoint on the bline list) and 1.0 to the last blinepoint. In case of looped blines 0.0 and 1.0 are together. The position is represented by the light purple duck that always lies on the bline.
* Width (Real number): It is the width multiplicator of the width of the bline on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width by the Width of the widhtpoint and adding the Expand parameter.
* Tip Side Before/After: Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values:
** Interpolate: Between the previous/posterior width point, the width is calculated by interpolation based on smoothness value. When smoothness is zero interpolation is lineal, when smoothness is 1.0 interpolation is given by a 5th degree smooth spline.
** Rounded: There is a rounded tip that points to the width point before or after. If the previous/posterior width point is 'Interpolate' on its posterior/previous side it consider that the width of the width point in question is zero just before/after it. If the previous/posterior width point is other than 'Interpolate' then the segment between those two width points is empty. See examples to understand it fully.
** Squared: Same as Rounded but using square tip.
** Peak: Same as Rounded but using peak tip.
** Flat: Same as Rounded but using flat tip.

Advanced Outline Layer

2011-06-19T15:53:54Z

Andrewkay: fixed format

{{Title|Advanced Outline Layer}}
{{Category|Layers}}


{{l|Image:Layer_geometry_advanced_outline_icon.png|64px}}

== About Advanced Outline Layers==

The new Advanced Outline Layer comes from the need to specify the width of the outline at a different place than the {{l|blinepoint}}. Usually the user don't want to have a blinepoint where he wants to have the width and vice versa. This Advanced Outline makes the width become independent of the blinepoint position.

Advanced Outline goes further than just define the width with independence from the blinepoints. It adds some new features to the regular outline. They are listed with examples below:
<gallery caption="New features" widths="490px" heights="300px" perrow="2">
File:Variable-width-without-blinepoints.png | Variable width without blinepoints
File:Lots-of-blinepoints-width-just-two width-controls.png | Width controlled just by two points when the bline has many blinepoints
File:Different-types of tips.png | Different types of tips
File: Segments of outlines.png | Segments of outlines
File:Different cusps types.png | Three global cusps types
File:Smoothness control.png | Control of smoothness from linear (0.0) to smooth (1.0)
</gallery>

== Tips for creating and manipulating Advanced Outlines within the canvas window ==

* Create Advanced Outlines in the same way that you make normal ones with the bline tool (Alt+B), but make sure the Advanced Outline box is ticked in the bline toolbox.
* To change the widths, you need the purple ducks (Alt+5) and the Normal tool (Alt+A) (NOT the width tool!). It may help to hide the other ducks (Alt+2, Alt+3).
* Advanced width control ducks now come in two parts. Drag the pale one to move the position of action of the width control, and the darker one to change the width.
* Right click on a purple duck to get the context menu. Select "Add Item (smart)" here to create more width controls.

==Parameters of Advanced Outline Layers==

The parameters of the Advanced Outline Layers are:

{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0"
|-style="background:#silver"
|'''Name'''||'''Value'''||'''Type'''
|-
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Z Depth}}
||0.000000
||real

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} {{l|Amount Parameter|Amount}}
||1.000000
||real

|-
||{{l|Image:type_integer_icon.png|16px}} {{l|Blend Method|Blend Method}}
||Composite
||integer

|-style="background:#eeeeee"
||{{l|Image:Type_color_icon.png|16px}} {{l|Colors Dialog|Color}}
||
{| style="width:95%; height:16px; background:black; color:black" border="1"
|-
|}
||color

|-style="background:#"
||{{l|Image:Type_vector_icon.png|16px}} Origin
||0.000000u,0.000000u
||vector

|-style="background:#eeeeee"
||{{l|Image:Type_bool_icon.png|16px}} Invert
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-
||{{l|Image:Type_bool_icon.png|16px}} Antialiasing
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} Feather
||0.000000pt
||real

|-
||{{l|Image:Type_integer_icon.png|16px}} Tyep of Feather
||Fast Gaussian Blur
||integer

|-style="background:#eeeeee"
||{{l|Image:Type_integer_icon.png|16px}} Winding Sytle
||Non Zero
||integer

|-
||{{l|Image:Type_list_icon.png|16px}} Vertices
||List
||list (BLine)

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} Outline Width
||2.000000pt
||real

|-
||{{l|Image:Type_real_icon.png|16px}} Expand
||0.000000pt
||real

|-style="background:#eeeeee"
||{{l|Image:Type_integer_icon.png|16px}} Tip Type at Start
||Rounded Stop
||integer

|-
||{{l|Image:Type_integer_icon.png|16px}} Tip Type at End
||Rounded Stop
||integer

|-style="background:#eeeeee"
||{{l|Image:Type_integer_icon.png|16px}} Cusps Type
||Sharp
||integer

|-
||{{l|Image:Type_real_icon.png|16px}} Smoothness
||0.500000
||real

|-style="background:#eeeeee"
||{{l|Image:Type_list_icon.png|16px}} Width Point List
||List
||list(WPList)

|}

==Specific parameters for Advanced Outline Layer==
Notice that many of the parameters are the same than the regular Outline, so you can find the explanation of its usage just reading the wiki page of it. The new parameters are:
* Tip Type at start
* Tip Type at end
* Cusps type
* Smoothness
* Width Point List

=== Width Point List ===
Each advanced Outline has a list of parameters that represents the information for each control of width item. They are called Width Points and consists on four sub-parameters:

* Position (Real number): it represents the position of the width point along the bline. Although it is allowed to be any real number, its meaning is only from 0.0 to 1.0. 0.0 corresponds to the start of the bline (first blinepoint on the bline list) and 1.0 to the last blinepoint. In case of looped blines 0.0 and 1.0 are together. The position is represented by the light purple duck that always lies on the bline.
* Width (Real number): It is the width multiplicator of the width of the bline on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width by the Width of the widhtpoint and adding the Expand parameter.
* Tip Side Before/After: Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values:
** Interpolate: Between the previous/posterior width point, the width is calculated by interpolation based on smoothness value. When smoothness is zero interpolation is lineal, when smoothness is 1.0 interpolation is given by a 5th degree smooth spline.
** Rounded: There is a rounded tip that points to the width point before or after. If the previous/posterior width point is 'Interpolate' on its posterior/previous side it consider that the width of the width point in question is zero just before/after it. If the previous/posterior width point is other than 'Interpolate' then the segment between those two width points is empty. See examples to understand it fully.
** Squared: Same as Rounded but using square tip.
** Peak: Same as Rounded but using peak tip.
** Flat: Same as Rounded but using flat tip.

Advanced Outline Layer

2011-06-19T15:51:56Z

Andrewkay: /* About Advanced Outline Layers */ helpful tips for using advanced outlines with the ducks

{{Title|Advanced Outline Layer}}
{{Category|Layers}}


{{l|Image:Layer_geometry_advanced_outline_icon.png|64px}}

== About Advanced Outline Layers==

The new Advanced Outline Layer comes from the need to specify the width of the outline at a different place than the {{l|blinepoint}}. Usually the user don't want to have a blinepoint where he wants to have the width and vice versa. This Advanced Outline makes the width become independent of the blinepoint position.

Advanced Outline goes further than just define the width with independence from the blinepoints. It adds some new features to the regular outline. They are listed with examples below:
<gallery caption="New features" widths="490px" heights="300px" perrow="2">
File:Variable-width-without-blinepoints.png | Variable width without blinepoints
File:Lots-of-blinepoints-width-just-two width-controls.png | Width controlled just by two points when the bline has many blinepoints
File:Different-types of tips.png | Different types of tips
File: Segments of outlines.png | Segments of outlines
File:Different cusps types.png | Three global cusps types
File:Smoothness control.png | Control of smoothness from linear (0.0) to smooth (1.0)
</gallery>

=== Tips for creating and manipulating Advanced Outlines within the canvas window ===

* Create Advanced Outlines in the same way that you make normal ones with the bline tool (Alt+B), but make sure the Advanced Outline box is ticked in the bline toolbox.
* To change the widths, you need the purple ducks (Alt+5) and the Normal tool (Alt+A) (NOT the width tool!). It may help to hide the other ducks (Alt+2, Alt+3).
* Advanced width control ducks now come in two parts. Drag the pale one to move the position of action of the width control, and the darker one to change the width.
* Right click on a purple duck to get the context menu. Select "Add Item (smart)" here to create more width controls.

==Parameters of Advanced Outline Layers==

The parameters of the Advanced Outline Layers are:

{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0"
|-style="background:#silver"
|'''Name'''||'''Value'''||'''Type'''
|-
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Z Depth}}
||0.000000
||real

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} {{l|Amount Parameter|Amount}}
||1.000000
||real

|-
||{{l|Image:type_integer_icon.png|16px}} {{l|Blend Method|Blend Method}}
||Composite
||integer

|-style="background:#eeeeee"
||{{l|Image:Type_color_icon.png|16px}} {{l|Colors Dialog|Color}}
||
{| style="width:95%; height:16px; background:black; color:black" border="1"
|-
|}
||color

|-style="background:#"
||{{l|Image:Type_vector_icon.png|16px}} Origin
||0.000000u,0.000000u
||vector

|-style="background:#eeeeee"
||{{l|Image:Type_bool_icon.png|16px}} Invert
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-
||{{l|Image:Type_bool_icon.png|16px}} Antialiasing
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} Feather
||0.000000pt
||real

|-
||{{l|Image:Type_integer_icon.png|16px}} Tyep of Feather
||Fast Gaussian Blur
||integer

|-style="background:#eeeeee"
||{{l|Image:Type_integer_icon.png|16px}} Winding Sytle
||Non Zero
||integer

|-
||{{l|Image:Type_list_icon.png|16px}} Vertices
||List
||list (BLine)

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} Outline Width
||2.000000pt
||real

|-
||{{l|Image:Type_real_icon.png|16px}} Expand
||0.000000pt
||real

|-style="background:#eeeeee"
||{{l|Image:Type_integer_icon.png|16px}} Tip Type at Start
||Rounded Stop
||integer

|-
||{{l|Image:Type_integer_icon.png|16px}} Tip Type at End
||Rounded Stop
||integer

|-style="background:#eeeeee"
||{{l|Image:Type_integer_icon.png|16px}} Cusps Type
||Sharp
||integer

|-
||{{l|Image:Type_real_icon.png|16px}} Smoothness
||0.500000
||real

|-style="background:#eeeeee"
||{{l|Image:Type_list_icon.png|16px}} Width Point List
||List
||list(WPList)

|}

==Specific parameters for Advanced Outline Layer==
Notice that many of the parameters are the same than the regular Outline, so you can find the explanation of its usage just reading the wiki page of it. The new parameters are:
* Tip Type at start
* Tip Type at end
* Cusps type
* Smoothness
* Width Point List

=== Width Point List ===
Each advanced Outline has a list of parameters that represents the information for each control of width item. They are called Width Points and consists on four sub-parameters:

* Position (Real number): it represents the position of the width point along the bline. Although it is allowed to be any real number, its meaning is only from 0.0 to 1.0. 0.0 corresponds to the start of the bline (first blinepoint on the bline list) and 1.0 to the last blinepoint. In case of looped blines 0.0 and 1.0 are together. The position is represented by the light purple duck that always lies on the bline.
* Width (Real number): It is the width multiplicator of the width of the bline on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width by the Width of the widhtpoint and adding the Expand parameter.
* Tip Side Before/After: Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values:
** Interpolate: Between the previous/posterior width point, the width is calculated by interpolation based on smoothness value. When smoothness is zero interpolation is lineal, when smoothness is 1.0 interpolation is given by a 5th degree smooth spline.
** Rounded: There is a rounded tip that points to the width point before or after. If the previous/posterior width point is 'Interpolate' on its posterior/previous side it consider that the width of the width point in question is zero just before/after it. If the previous/posterior width point is other than 'Interpolate' then the segment between those two width points is empty. See examples to understand it fully.
** Squared: Same as Rounded but using square tip.
** Peak: Same as Rounded but using peak tip.
** Flat: Same as Rounded but using flat tip.

Duplicate Layer

2011-05-02T18:31:47Z

Andrewkay: /* The Index Paramter */ explained order of duplicated layers

{{Title|Duplicate Layer}}
{{Category|Layers}}

== About Duplicate Layer ==
{{l|Image:Layer_other_duplicate_icon.png|64px}}

The 'Duplicate' layer makes multiple copies of the layers under it in real time.

The Duplicate layer works like a loop over the content below it and provides a changing variable to that content. This variable (the exported Index) can now be used (Connected) within that content.

== Parameters of Duplicate Layer ==
The parameters of the Duplicate Layers are:
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0"
|-style="background:#silver"
|'''Name'''||'''Value'''||'''Type'''
|-
||{{l|Image:Real_icon.png|16px}} {{l|Z Depth Parameter|Z Depth}}
||0.000000
||real
|-style="background:#eeeeee"
||{{l|Image:Real_icon.png|16px}} {{l|Amount Parameter|Amount}}
||1.000000
||real
|-
||{{l|Image:Integer_icon.png|16px}} {{l|Blend Method|Blend Method}}
||Composite
||integer
|-style="background:#eeeeee"
||{{l|Image:Real_icon.png|16px}} Index {{l|Image:Valuenode_icon.png|16px}}
||3.000000
||Duplicate
|}

=== The Index Paramter ===
The "Index" is automatically exported. This is the only ValueNode that will change from one copy to the next. This exported value can then be selected in the Children dialog and Connected to the parameter(s) in the layer under the duplicate dialog which should change in the copies.

The "Index" parameter has 3 sub-parameters, "From", "To", and "Step". The value of the exported "Index" parameter varies from the value of "From" to the value of "To" in steps of size "Step".

"From" can be higher or lower than "To". It doesn't matter whether "Step" is positive or negative. The steps will be in the direction from "From" to "To".

The duplicated layers are placed in the layer stack in order, so that those corresponding to the "From" value will appear lower down (i.e. least visible with normal composite blend mode) than those corresponding to the "To" value (most visible).

== Known Problems ==

* The Duplicate Layer doesn't do anything about bounding boxes. Doing so could help to speed up rendering when the duplicated layers are outside the visible area. It's not clear how useful or possible this would be. To calculate its bounding box, the duplicate layer would need to loop through all values of Index to get the underlying bounding boxes and union them together. Maybe it's worth doing anyway.

* Editing a Bline below a dup layer becomes very difficult while a recent edit is still being rendered, because the Bline ducks move around as the render runs (if the duplications are at different positions or scale). I tried using the same mutex around the Duplicate ValueNode's operator() method as is used in the Duplicate Layer's code, but it lead to [http://dooglus.rincevent.net/random/deadlock.txt a deadlock].

=== Recently Fixed Problems (please test) ===

* Cloning a duplicate layer and having one above the other (rather than having them each inside a disjoint PasteCanvas) causes Synfig to hang, since the same ValueNode will be used for the Index parameter in each of them. [ fixed in r1277 ]

* It shouldn't be possible to Disconnect the Index param in the duplicate layer, but it is. [ fixed in r1278 ]

* It shouldn't be possible to Convert the Index param from Duplicate to any other type, but it is. [ fixed in r1279 ]

* It shouldn't be possible to Disconnect a Duplicate ValueNode using the Children dialog, but it is. [ fixed in r1280 ]

* It shouldn't be possible to Convert a Duplicate ValueNode to any other type using the Children dialog, but it is. [fixed in r1281 ]

* It shouldn't be possible to Connect any ValueNode from the Children dialog to the Index param of a Duplicate layer, but it is. [ fixed in r1282 ]

* Maybe it would be helpful to Auto-Export the Index parameter to give the user less work to do. It can always be renamed to something memorable later. [ added in r1283 ]

* Automatic export of the Index parameter works for new layers, but not for cloned layers (copy/paste or right-click > duplicate). [ fixed in r1286 ]

* The Add and Subtract ValueNodes won't allow the linking of the Duplicate layer's Index to their LHS and RHS if they are converted from a Time parameter. [ fixed in r1299 (for add) and r1330 (for subtract) ]

* The layer doesn't seem to work well with PasteCanvas' parameters. Duplicating a PasteCanvas and linking the Index to its position or time offset doesn't have any effect. [ fixed in r1331 ]

* Rendering the Duplicate layer modifies the Index parameter. Studio renders the Navigator dialog's thumbnail and the main canvas at the same time. These two renders can interfere with each other, since they don't use a mutex to protect the read/write of the Index parameter. [ fixed in r1358 ]

Clamp Layer

2011-04-12T19:16:59Z

Andrewkay: /* About Clamp Layer */ Tried to understand function from the source code...

{{Title|Clamp Layer}}
{{Category|Layers}}

This page hasn't been finished yet. Please help.

== About Clamp Layer ==
{{l|Image:Layer_filter_clamp_icon.png‎|64px}}

Clamp layer is used to limit colours to a certain range of component values.

The R, G, B and A (alpha) components of each pixel are forced to lie within the range Floor...Ceiling.

If "Clamp Ceiling" is off, then only the Floor is considered.

If "Invert Negative" is on, then a pixel with a value of A less than Floor is first negated (-R, -G, -B, -A)
and then something funny happens to raise all the components to at least Floor. Any ideas what this is for?

== Parameters of Clamp Layer ==
The parameters of the Clamp Layers are:
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0"
|-style="background:silver"
|'''Name'''||'''Value'''||'''Type'''
|-
||{{l|Image:Bool_icon.png|16px}} Invert Negative
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool
|-style="background:#eeeeee"
||{{l|Image:Bool_icon.png|16px}} Clamp Ceiling
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool
|-
||{{l|Image:Real_icon.png|16px}} Ceiling
||1.000000
||real
|-style="background:#eeeeee"
||{{l|Image:Real_icon.png|16px}} Floor
||0.000000
||real
|}

Following a BLine (the very old way)

2011-04-03T09:17:17Z

Andrewkay: /* Introduction */ link to new tutorial, for those of us who got here by searching

{{Title|Following a BLine (the old way)}}
{{Category|Tutorials}}
{{Category|Tutorials Advanced}}


== Introduction ==

NOTE: you have synfig version 0.61.09 or newer (you probably do!) then you should follow the {{l|Doc:Following a BLine|new version}} of this tutorial.

This is only a rough draft. The content should be OK, but it needs tidying up and could really benefit from some screen shots. If you follow the tutorial, please consider taking some shots as you do so and uploading them here...

[http://sourceforge.net/tracker/index.php?func=detail&aid=1781903&group_id=144022&atid=757419 This bug report] suggested a feature:

<blockquote>
I would like to be able to draw a bline with N vertices and have
a shape move along that bline (the whole shape or individual vertices).
Currently the only way I have found to do what I want is to draw a bline,
and then move a shape along that line manually at fairly small intervals
(very frustrating).

Example: A triangle that should move along a sine curve always pointing in
the direction it is going to move next.
</blockquote>

The feature has recently been added to Synfig (23rd September 2007) and will be in the next release.

== Summary ==

We're going to:

* {{l|Following a BLine#Create the Layers|Draw a curve and an arrow}}
* {{l|Following a BLine#Make the Arrow Move|Link the arrow's Origin}} to the curve's Vertices' vector position so the arrow follows the curve
* {{l|Following a BLine#Make the Arrow Rotate|Link the arrow's Rotate layer}} to the curve's Vertices' tangent so the arrow rotates with the curve

== Tutorial ==

This is a brief tutorial giving an example of how to use it:

=== Create the Animation ===

File > New

Time tab > End Time > 10s > OK

=== Create the Layers ===

select the BLine Tool

enable just the Outline checkbox

draw a bline that you want the arrow to move along

select the new bline layer, go to its parameters

right-click on the vertices parameter and "export" it
it will ask for a name.

you can use whatever name you like but for this tutorial I'm calling it "path"

(note that you could have checked the 'auto export' box in the draw tool, and set the name in the text box at the top of the tool options to save having to chose export from the menu - it doesn't matter which you use)

switch back to the 'Normal' tool and look in the "Children" dialog.

expand the ValueBase Nodes and you'll see all the things that have been exported.

selecting them will allow us to re-use them elsewhere in the animation later

back in the bline tool, enable Fill and Outline checkboxes in tool options

draw an arrow or whatever, pointing to the right

select the outline, hit control-a to select all its ducks except the green position duck

drag the ducks so that the arrow is centred around the green position duck

add a rotate layer above the outline and region

encapsulate the rotate, outline, and region layers

rename the encapsulation layer "arrow"

so now you've got 2 top-level layers: a curved path, and an encapsulation containing an arrow and a rotate layer

=== Make the Arrow Move ===

select the "arrow" encapsulation layer

we want this layer to move along the "path" bline. the Origin parameter of an encapsulation layer can be used to move everything it contains
right-click the Origin parameter and select {{l|Convert#BLine_Vector|Convert > BLine Vertex}}
the Origin parameter will now be expandable - click the small triangle to its left to expand it

the Origin of the "arrow" layer is now defined by 3 sub parameters: a BLine, the amount to travel along the BLine, and a checkbox that we'll ignore for now.
in the Children dialog, select the "path" ValueNode

then in the Params dialog, right-click on the "arrow" layer's BLine sub-parameter and "Connect" it to the selected "path" value

the arrow will move so that it is about half-way along the BLine path (because the Amount sub-parameter defaults to 0.5).

edit the Amount sub parameter to 0 and to 1, and see the arrow moves to one end of the path and then the other.

the "Loop" sub parameter determines what happens if you use a value outside the range 0-1 for the Amount. If "Loop" isn't checked, values less than 0 count as 0 and values greater than 1 count as 1. If "Loop" is checked, the value wraps around, so Amounts of 2.4, 1.4, 0.4, -0.6, -1.6, etc all act the same.

So we've got the arrow moving along the line, but only if we manually edit the Amount parameter. Let's get it to move automatically, by converting the constant Amount parameter into a linearly changing value.

Right-click the Amount parameter, and Convert it to Linear. This adds sub parameters Rate (how fast the value goes up, per second) and Offset (what value it has at time zero).

Set Rate to 0.1 and Offset to 0. That will make the value of Amount be 0 at time 0 and 1 at time 10s, so the arrow will move from one end of the line to the other throughout the course of the animation.

This linearly changing value of the Amount parameter will be useful later on, so let's export it into the Children dialog so we can find it easily later. Right-click the Amount parameter and Export it as "engine". I call it "engine" because this is the parameter that drives the animation.

Try File > Preview or View > Play to watch the animation. If you like, play with the sub-parameters - turn the Rate up to 0.25 and turn on the Loop checkbox and watch the preview again. You'll see that the arrow moves 3 times faster than before, reaching the end of the line after 4 seconds.

Turning Loop on means that it will then reappear at the start of the line, and keep moving. Not having Loop on would make it stay at the end of the line until the animation stopped.

Note that instead of using a Convert>Linear conversion to get the Amount sub-parameter to change over time, we could have used the more traditional method of turning on {{l|Animate Editing Mode}} and adjusting the parameter at different points in time. Either way, we can still export the Amount parameter so that we can use it again in the next step.

=== Make the Arrow Rotate ===

You'll notice that although the arrow moves along the line, it doesn't rotate to face the direction of travel. But that's what we're going to use the Rotate layer for.

Open up the "arrow" encapsulation layer and select the Rotate layer inside.

Right-click the Amount parameter, which specifies the amount to rotate, and Convert it to type {{l|Convert#BLine Tangent|BLine Tangent}}.

Open up the sub parameters, select the "path" value in the children dialog, and connect it to the rotate layer's BLine sub-parameter, and select the "engine" value in the children dialog and connect it to the rotate layer's Amount sub-parameter.

Now watch the preview and you'll see that the arrow is moving along the line, rotating to face the way it's traveling.

== Results ==

This is the animation I ended up with: {{l|Media:Arrow-follows-line-tut.sifz|arrow-follows-line-tut.sifz}}

== Commentary on the Feature ==

I've noticed that if Loop is on, and amount is 1.0, then it acts as if amount is 0.0, ie. the arrow jumps back to the beginning of the line in the last frame.

Also, the arrow takes the same time to move along each segment of the bline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part).

It would be good to have the option of having the arrow move at constant speed along the length of the curve.

Doc:Cut-out Animation

2011-02-28T21:21:05Z

Andrewkay: /* Add the Rotate Layers */ fix typo

{{Title|Cut-out Animation}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}


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:

{{l|Image:Cutoutsample.gif}}

== Preparing the material ==

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.

{{l|Image:Boy-split.png|right|thumb|A character split into parts}}

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.

== Importing the cut out images ==

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:

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 ducks 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 (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.

{|align = "center"
|{{l|Image:Layers-Images.png}}||{{l|Image:Images-Composed.png}}
|}

Obviously the layer order is important to place each part of the character to compose it properly (in this case the left leg is behind the right one).

== Encapsulate image layers ==

As you can imagine we are going to use Rotate Layers to perform the cut out animation. But before apply the rotation for each part of the character, we need to encapsulate it so that the rotation only applies to the desired layers. After encapsulation and renaming the paste canvas layers it looks like this:

{{l|Image:Encapsulate-layers.png|right|thumb|Layers dialog after encapsulation}}

== Add the Rotate Layers ==

Before adding the Rotate Layers you should have analysed 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'').

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 cummulative 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.

Let's start by adding a Rotate Layer to the hip. Go to the hip paste canvas 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).

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.

{|
|'''Before'''||'''After'''
|-
|{{l|Image:AddRotateLayer-before.png}} || {{l|Image:AddRotateLayer-after.png}} ||{{l|Image:AfterAddRotateHip.png|right|thumb|After copy the Rotate hip layer over all the image layers}}
|}

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 hierachy. 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 encapsulated 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 congruently with the hip. Magic! See the image.

For each 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.

After doing that for the legs and for the body you should obtain something like this:

{|
|{{l|Image:AddRotates.png}} || {{l|Image:AddRotatesLayers.png}}
|}

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).

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.

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:

{|
|{{l|Image:AddRotationFinal.png}} || {{l|Image:AddRotationLayersFinal.png|thumb}}
|}

== Now animate it! ==

It is time to animate the character!. You can go to the Child Dialog 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 duck 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|Groups Panel|Group feaure}} of Synfig to select multiple scattered layers with only one double click.

{{l|Image:Rotation-Setup2.png|center}}

Don't move the origin of any layer! If you do, you will break the composition.

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.

----

For alternative set-ups and its pros and cons, see the {{l|Talk:Cut-out_Animation|talk page}}.

Doc:Cut-out Animation

2011-02-28T21:18:36Z

Andrewkay: /* Add the Rotate Layers */ fix typo

{{Title|Cut-out Animation}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}


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:

{{l|Image:Cutoutsample.gif}}

== Preparing the material ==

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.

{{l|Image:Boy-split.png|right|thumb|A character split into parts}}

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.

== Importing the cut out images ==

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:

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 ducks 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 (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.

{|align = "center"
|{{l|Image:Layers-Images.png}}||{{l|Image:Images-Composed.png}}
|}

Obviously the layer order is important to place each part of the character to compose it properly (in this case the left leg is behind the right one).

== Encapsulate image layers ==

As you can imagine we are going to use Rotate Layers to perform the cut out animation. But before apply the rotation for each part of the character, we need to encapsulate it so that the rotation only applies to the desired layers. After encapsulation and renaming the paste canvas layers it looks like this:

{{l|Image:Encapsulate-layers.png|right|thumb|Layers dialog after encapsulation}}

== Add the Rotate Layers ==

Before adding the Rotate Layers you should have analysed 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'').

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 cummulative 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.

Let's start by adding a Rotate Layer to the hip. Go to the hip paste canvas 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).

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.

{|
|'''Before'''||'''After'''
|-
|{{l|Image:AddRotateLayer-before.png}} || {{l|Image:AddRotateLayer-after.png}} ||{{l|Image:AfterAddRotateHip.png|right|thumb|After copy the Rotate hip layer over all the image layers}}
|}

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 bares it's own rotation, plus the rotations of those limbs higher up the limb hierachy. 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 encapsulated 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 congruently with the hip. Magic! See the image.

For each 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.

After doing that for the legs and for the body you should obtain something like this:

{|
|{{l|Image:AddRotates.png}} || {{l|Image:AddRotatesLayers.png}}
|}

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).

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.

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:

{|
|{{l|Image:AddRotationFinal.png}} || {{l|Image:AddRotationLayersFinal.png|thumb}}
|}

== Now animate it! ==

It is time to animate the character!. You can go to the Child Dialog 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 duck 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|Groups Panel|Group feaure}} of Synfig to select multiple scattered layers with only one double click.

{{l|Image:Rotation-Setup2.png|center}}

Don't move the origin of any layer! If you do, you will break the composition.

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.

----

For alternative set-ups and its pros and cons, see the {{l|Talk:Cut-out_Animation|talk page}}.

TCB

2011-02-27T18:48:34Z

Andrewkay: fix typo

An {{l|Waypoints#Interpolation|interpolation}} type, TCB is an acronym for Tension, Continuity, Bias, the three qualities which define the shape of the curve if you plot the value of the interpolated parameter against time.

Using the TCB interpolation type will fit a smooth curve between adjacent waypoints, much like the bline tool fits smooth curves between adjacent bline vertices. The interpolation can be controlled by four values. These are tension, continuity, bias and temporal tension. In simple words they control the following things:

; Tension
: The tension defines how sharply the keyframe will be targeted (how much inverse effect the tangent has). Its very much comparable to the handles of a bezier curve, while this value will define in a reverse way how long the handles are.
:* A higher value will force more linear movement from waypoint to waypoint, since the handles getting shorter. Resulting in a hard direction change if it's set to 1.0. In this case it is equal to linear movement (Handles have length 0), if the the other parameters having the default 0 value. Setting it higher then 1.0 will result in a curved movement that will circle around this waypoint (handles are scaled in negative direction (swapped).
:* Lower values will force the the object to follow the tangent (handles) of the waypoint. For very low values most of the movement will be along the tangent, since the thought handles are very long.

; Continuity
: This value defines how the tangent is computed. This is also comparable to the handles of a point on a bezier curve. A value of zero will lead to mirrored (merged) handles, resulting in a smooth transition.
:* Setting it to -1.0 will result in a simple cusp, giving linear interpolation with sharp corner.
:* Setting it even lower will form a sharper cusp, so that the movement inward an outward get more and more mirrored.
:* Setting it to higher values then 0 will have the same effect, but the handles will move in mirrored direction. So the interpolation will move from the outside into this waypoint.

; Bias
: This value defines which side segment before and after the keyframe will have more influence on the computed tangent. If the Bias is lower then 0 then the tangent will be more oriented to along the incoming direction. If greater then 0 it will be more oriented to the outgoing direction.

; Temporal Tension
: In default the speed for an object is constant while passing equally distanced waypoints with equal time between them. This value can be used to manipulate the speed of the movement.
:* Higher values then 0 will force the object to spend more time near that waypoint. Resulting in slow motion shortly before and after the waypoint. On the other hand speed will increase before reaching the next waypoint.
:::<small>As an illustrative example you can think of a ball sitting on a small hill ''(previous waypoint)'', running down a small valley and getting a bit faster, before it runs up a large hill and getting very slow as it reaches the top ''(modified waypoint)''. After that it will run downward until it finds itself with highest speed in a small valley again, running up the next small hill, losing some of its speed as it is reached the top ''(next waypoint)''.</small>
:* Lower values then 0 will force the object to pass the waypoint faster. Resulting in slow motion near the previous and next waypoint. Comparable to an ball thats running down a valley. (opposite of the previous thought example)

== Further Information ==
* There is some mathematical discussion of TCB [http://www.cubic.org/docs/hermite.htm here].
* [http://en.wikipedia.org/wiki/Kochanek%E2%80%93Bartels_spline Kochanek–Bartels spline] (also known as TCB-Spline)