Synfig Studio :: Documentation - User contributions [en]

Radial Blur Layer

2020-04-26T18:24:58Z

FirasH: Cleaning and review

{{Title|Radial Blur Layer}}
{{Category|Layers}}
{{Category|Blurs}}
{{NewTerminology}}


[[File:Layer_blur_blur_icon.png|64px]]

== About Radial Blur Layers==
Radial control of the size of the blur.

==Parameters of Radial Blur Layers==

The parameters of the {{literal|Radial Blur Layer}} are:

{|{{Parameters}}

|-style="background:#"
||{{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

|-style="background:#"
||{{l|Image:type_integer_icon.png|16px}} {{l|Blend Method|Blend Method}}
||Composite
||integer

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

|-style="background:#"
||{{l|Image:Type_real_icon.png|16px}} {{l|Size Parameter|Size}}
||0.200000
||real

|-style="background:#eeeeee"
||{{l|Image:Type_bool_icon.png|16px}} {{l|Fade Out Parameter|Fade Out}}
|| {{Bool|}}
||bool

|-
|}

== Samples ==
If you wonder how the animations were made ([[Media:radial_blur.sifz|sample file]]):
* a {{l|Star Layer}} is positioned at center of the Frame, with an {{l|Outline Layer}} of width 0.05u
* the animations have 120 frames, and the [[#Size|Size]] parameter of the blur goes from 0u,0u to 1u,1u
* the {{l|Render dialog|rendering}} settings are set to Quality 9 and Anti-Aliasing 1

First sample is without [[#Fade Out|Fade Out]]:

[[Image:radial_blur.gif|Fade Out was enabled]] [[Image:radial_blur_fade_out.gif|Fade Out was enabled]]

== See also ==
* A short description of the blur layers can be found here: {{l|Layer}}
* {{l|Blur Layer}} mostly used types of blur.
* {{l|Motion Blur Layer}} a type of blur that aims to simulate a motion blur (the one that happens when the object's movement is too fast for the exposure time). It is controlled by a single parameter called {{Literal|Aperture}}.

Motion Blur Layer

2020-04-26T18:18:51Z

FirasH: Cleaning and review

{{Title|Motion Blur Layer}}
{{Category|Layers}}
{{Category|Blurs}}
{{NewTerminology}}

[[File:Layer blur motion icon.png|64px]]

== About Motion Blur Layer ==
{{BlurLayer}}
Motion Blur Layer allows to simulate the blur of picture, that arises by movement.

== Parameters of the Motion Blur Layer ==
The parameters of the {{literal|Motion Blur Layer}} are:

{|{{Parameters}}

|-style="background:#"
||{{l|Image:Type_time_icon.png|16px}} [[#Aperture|Aperture]]
||0f
||time

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} [[#Subsamples Parameters|Subsamples Factor]]
||1.000000
||real

|-style="background:#"
||{{l|Image:Type_integer_icon.png|16px}} [[#Subsamples Parameters|Subsampling Type]]
||Hyperbolic
||integer

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} [[#Subsamples Parameters|Subsample Start Amount]]
||0.000000
||real

|-style="background:#"
||{{l|Image:Type_real_icon.png|16px}} [[#Subsamples Parameters|Subsample End Amount]]
||1.000000
||real

|}

=== Aperture ===
The {{literal|Aperture}} parameter indicates the number of frames used to compute the effect of motion. The concept is analogous to the shutter speed or exposure time in photography.

=== Subsamples Factor ===
The {{literal|Subsamples Factor}} affects the number of Subsamples to be computed. Using a high value, the smudge is finer, but the rendering takes longer as it involves much more computations.

=== Subsampling Type ===
The {{literal|Subsampling Type}} parameter indicates the type of Subsampling used between:
* Constant
* Linear
* Hyperbolic

=== Subsample Start Amount ===
The {{literal|Subsample Start Amount}} parameter indicates the value of Subsample at the start. For example, if {{literal|Subsample Start Amount}} is set to 0, it won't have any blur on start. Otherwise the motion of objects from lower layers begin as a smudge.

=== Subsample End Amount ===
The {{literal|Subsample End Amount}} parameter indicates the value of Subsample at the end. For example, if {{literal|Subsample End Amount}} is set to 0, the last state of the objects from lower layers will appear without any blur.

== Samples ==
{| class="wikitable" style="text-align:center;"
! scope="col" |  
! scope="col" | From Subsample Start 0 to Subsample End 1
! scope="col" | From Subsample Start 1 to Subsample End 0
|-
!| 0f–0f
|colspan="2"| [[Image:motion_blur_0-1_aperture_0-0f.gif]]
|-
!| 0f–24f
| [[Image:motion_blur_0-1_aperture_0-24f.gif]]
| [[Image:motion_blur_1-0_aperture_0-24f.gif]]
|-
!| 24f–24f
| [[Image:motion_blur_0-1_aperture_24-24f.gif]]
| [[Image:motion_blur_1-0_aperture_24-24f.gif]]
|-
!| 24f–0f
| [[Image:motion_blur_0-1_aperture_24-0f.gif]]
| [[Image:motion_blur_1-0_aperture_24-0f.gif]]
|-
|}

Notes:
* Rows in table – {{literal|Aperture}} value from beginning (frame 0) to end (frame 120).
* Columns in table – {{literal|Subsample Start Amount}} value and {{literal|Subsample End Amount}} value

[[Media:motion_blur.sifz|Sample file]]

== See also ==
* A short description of the blur layers can be found here: {{l|Layer}}
* {{l|Radial Blur Layer}} with a radial control of the size of the blur.
* {{l|Blur Layer}} mostly used types of blur.

Blur Layer

2020-04-26T17:47:12Z

FirasH: Cleaning and review

{{Title|Blur Layer}}
{{Category|Layers}}
{{Category|Blurs}}
{{NewTerminology}}


{{l|Image:Layer_blur_icon.png‎|64px}}

== About Blur Layer ==
{{BlurLayer}}

== Parameters of the Blur Layer ==

The parameters of the {{literal|Blur Layer}} are:

{|border="0" 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:Vector_icon.png|16px}} [[#Size|Size]]
||6.000000pt,6.000000pt
||vector
|----------------------------------
||{{l|Image:Integer_icon.png|16px}} [[#Types|Type]]
||Fast Gaussian Blur
||integer
|}

=== Size ===

The {{literal|Size}} parameter controls the size of the blur. Depending on that value the blur can have different effects. Note that rendering time quickly increases as you increase the size parameter, so be careful.

This parameter is a compound value of two real numbers, x and y. Each of them indicates the size of the blur along that direction.

=== Type ===

There are 5 types of blur:

* [[#Fast Gaussian|Fast Gaussian Blur]]
* [[#Box|Box Blur]] (See [http://en.wikipedia.org/wiki/Box_blur])
* [[#Cross Hatch|Cross Hatch Blur]]
* [[#Disc|Disc Blur]]
* [[#Gaussian|Gaussian Blur]] (See [http://en.wikipedia.org/wiki/Gaussian_blur])

== Samples ==

=== Star animation ===

If you wonder how the animations were made ([[Media:blur.sifz|sample file]]):
* a {{l|Star Layer}} is positioned at the center of the Frame, with an {{l|Outline Layer}} of width 0.05u
* the animations have 120 frames, and the [[#Size|Size]] parameter of the blur goes from 0u,0u to 1u,1u
* the {{l|Render dialog|rendering}} settings are set to Quality 9 and Anti-Aliasing 1

; Fast Gaussian : [[Image:blur_fast_gaussian.gif|Fast Gaussian]]
; Box : [[Image:blur_box.gif|Box]]
; Cross Hatch : [[Image:blur_cross_hatch.gif|Cross Hatch]]
; Disc : [[Image:blur_disc.gif|Disc]]
; Gaussian : [[Image:blur_gaussian.gif|Gaussian]]

=== Fast Gaussian ===

{| border = "1"
| '''Fast Gaussian Blur'''
|-
| {{l|Image:BlursFastGaussian.png}}
| {{l|Image:Blurs2FastGaussian.png}}
|}

=== Box ===
{| border = "1"
| '''Box Blur'''
|-
| {{l|Image:BlurBox.png}}
| {{l|Image:Blurs2Box.png}}
|}

=== Cross Hatch ===
{| border = "1"
| '''Cross Hatch Blur'''
|-
| {{l|Image:BlurCrossHatch.png}}
| {{l|Image:Blurs2CrossHatch.png}}
|}

=== Disc ===
{| border = "1"
| '''Disc Blur'''
|-
| {{l|Image:BlurDisc.png}}
| {{l|Image:Blurs2Disc.png}}
|}

=== Gaussian ===
{| border = "1"
| '''Gaussian Blur'''
|-
| {{l|Image:BlurGaussian.png}}
| {{l|Image:Blurs2Gaussian.png}}
|}

{| border = "1"
| '''Fast Gaussian Blur over all the layers'''
|-
| {{l|Image:Blur.png}}
|}

== See also ==

* {{l|Radial Blur Layer}} with a radial control of the size of the blur.

* {{l|Motion Blur Layer}} a type of blur that aims to simulate a motion blur (the one that happens when the object's movement is too fast for the exposure time). It is controlled by a single parameter called "Aperture".

Canvas MetaData Panel

2020-04-25T01:23:17Z

FirasH: Rephrase sentence

{{Title|Meta Data Panel}}
{{Category|Panels}}
{{NewTerminology}}

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

The {{Literal|Metadata panel}} shows all the useful existing keys:

[[File:Canvas MetaData Panel-0.65.png|frame|none|Canvas MetaData Panel, scene_# and scene_name keys are personal]]

Part of the keys is created and stored for each new {{l|Canvas|Canvas}} like {{literal|grid_snap}} or {{literal|guide_show}}.

A description of the keys is given below:
* {{literal|grid_color}}: sets the Color of the Grid. It's defined by three values for Red, Green and Blue in the range [0,1] separated by a space (e.g. {{literal|0,5 0,5 1}}).
* {{literal|guide_snap}}: sets if Snapping to Guides is enabled ({{literal|1}}) or not ({{literal|0}}).
* {{literal|jack_offset}}: sets the Jack synchronization offset time.
* {{literal|background_size}}: sets the Checkerboard Background {{literal|x}} and {{literal|y}} size in pixels.
* {{literal|background_first_color}}: sets the Checkerboard Background first color. It's defined by three values for Red, Green and Blue in the range [0,1] separated by a space (e.g. {{literal|0,5 0,5 0,5}}).
* {{literal|background_second_color}}: sets the Checkerboard Background second color. It's defined by three values for Red, Green and Blue in the range [0,1] separated by a space (e.g. {{literal|0,1 0,1 0,1}}).

The unit used in the {{Literal|Metadata panel}} for {{literal|guide_x}}, {{literal|guide_y}} and {{literal|grid_size}} keys, are {{l|Unit System|Synfig units}}.

You can add other personal keys. For example, you can add the scene number or the author. Those personal keys will only be stored in the file without any explicit usage by Synfig.

===Usage===
====Grid====
* {{l|Doc:Grid#Using_the_Canvas_MetaData_panel|Showing and hiding}}
* {{l|Doc:Grid#Using_the_Canvas_MetaData_panel_2|Enabling and disabling snapping}}
* {{l|Doc:Grid#Using_the_Canvas_MetaData_panel_3|Changing the spacing of lines}}
* {{l|Doc:Grid#Changing_the_color_of_grid_lines|Changing the color of lines}}
====Guide====
* {{l|Doc:Guides#Using_the_Canvas_MetaData_Panel|Adding guides to your canvases}}
* {{l|Doc:Guides#Using_the_Canvas_MetaData_Panel_4|Showing or hiding}}
* {{l|Doc:Guides#Using_the_Canvas_MetaData_Panel_5|Snapping}}
* {{l|Doc:Guides#Using_the_Canvas_MetaData_Panel_2|Positioning precisely}}
* {{l|Doc:Guides#Using_the_Canvas_MetaData_Panel_3|Remove from your canvases}}

Canvas MetaData Panel

2020-04-24T16:01:39Z

FirasH: Cleaning

{{Title|Meta Data Panel}}
{{Category|Panels}}
{{NewTerminology}}

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

The {{Literal|Metadata panel}} shows all the useful existing keys:

[[File:Canvas MetaData Panel-0.65.png|frame|none|Canvas MetaData Panel, scene_# and scene_name keys are personal]]

Part of the keys is created and stored for each new {{l|Canvas|Canvas}} like {{literal|grid_snap}} or {{literal|guide_show}}.

A description of the keys is given below:
* {{literal|grid_color}}: sets the Color of the Grid. It's defined by three values for Red, Green and Blue in the range [0,1] separated by a space (e.g. {{literal|0,5 0,5 1}}).
* {{literal|guide_snap}}: sets if Snapping to Guides is enabled ({{literal|1}}) or not ({{literal|0}}).
* {{literal|jack_offset}}: sets the Jack synchronization offset time.
* {{literal|background_size}}: sets the Checkerboard Background {{literal|x}} and {{literal|y}} size in pixels.
* {{literal|background_first_color}}: sets the Checkerboard Background first color. It's defined by three values for Red, Green and Blue in the range [0,1] separated by a space (e.g. {{literal|0,5 0,5 0,5}}).
* {{literal|background_second_color}}: sets the Checkerboard Background second color. It's defined by three values for Red, Green and Blue in the range [0,1] separated by a space (e.g. {{literal|0,1 0,1 0,1}}).

The unit used in the {{Literal|Metadata panel}} for {{literal|guide_x}}, {{literal|guide_y}} and {{literal|grid_size}} keys, are {{l|Unit System|Synfig units}}.

You can add other personal keys. For example, you can add the scene number or the author but they will only be stored in the file but not used by the application.

===Usage===
====Grid====
* {{l|Doc:Grid#Using_the_Canvas_MetaData_panel|Showing and hiding}}
* {{l|Doc:Grid#Using_the_Canvas_MetaData_panel_2|Enabling and disabling snapping}}
* {{l|Doc:Grid#Using_the_Canvas_MetaData_panel_3|Changing the spacing of lines}}
* {{l|Doc:Grid#Changing_the_color_of_grid_lines|Changing the color of lines}}
====Guide====
* {{l|Doc:Guides#Using_the_Canvas_MetaData_Panel|Adding guides to your canvases}}
* {{l|Doc:Guides#Using_the_Canvas_MetaData_Panel_4|Showing or hiding}}
* {{l|Doc:Guides#Using_the_Canvas_MetaData_Panel_5|Snapping}}
* {{l|Doc:Guides#Using_the_Canvas_MetaData_Panel_2|Positioning precisely}}
* {{l|Doc:Guides#Using_the_Canvas_MetaData_Panel_3|Remove from your canvases}}

Canvas Browser Panel

2020-04-24T15:22:50Z

FirasH: Cleaning

{{Title|Canvas Browser Panel}}
{{Category|Panels}}
{{NewTerminology}}


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

The {{literal|Canvas Browser}} dialog shows the tree of canvases that are present in the currently selected document:

[[File:Canvas-Browser-0.64.1.png|frame|none]]

{{l|Export|Exporting}} a canvas parameter of a {{l|Group}} Layer will cause the canvas to be added to the {{literal|Canvas Browser}} dialog. Double-clicking on a sub-canvas in the dialog will open a new Work Area window allowing you to work on the sub-canvas separately.

Group Layer

2020-04-08T17:10:18Z

FirasH: Cleaning and review

{{Title|Group Layer}}
{{TOCright}}
{{Category|Layers}}
{{Category|Other}}
{{NewTerminology}}

{{l|Image:Layer other group icon.png|64px}}

== About Group Layer==

The {{Literal|Group Layer}} is a special layer that can hold other layers. It is generated via the {{l|Group}} command accessed via the context menu in the {l|Layers Panel}} or through the {{l|Category:Layer Menu}} in the {{l|Canvas Menu Caret}}.

As well as grouping a set of layers, it can also apply transformations to the contained layers like translation, scaling, and even modify their time offset.

A {{Literal|Group Layer}} can also be created through the {{l|Category:Layer_Menu#New_Layer_Menu|New Layer Menu}}, using {{c|<New Layer>|<Other>|Group Layer|}}.

==Parameters of Group Layer==

The parameters of the {{Literal|Group Layer}} are:

{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0"
|-style="background:#c8c8c8"
|'''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_vector_icon.png|16px}} {{l|Origin Parameter|Origin}}
||0.000000u,0.000000u
||vector

|-
||{{l|Group Layer#Transformation Parameter|Transformation}}
||0.000000, 0.000000, 0.00°, 60, 60
||transformation

|-style="background:#eeeeee"
||{{l|Image:Type canvas icon 0.63.06.png|16px}} {{l|Group Layer#Canvas Parameter|Canvas}}
||<No Image Selected>
||canvas

|-
||{{l|Image:Type_real_icon.png|16px}} {{l|Group Layer#Speed|Speed}}
||1.000000
||real

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

|-
||{{l|Image:Type_time_icon.png|16px}} {{l|Time Offset Parameter|Time Offset}}
||Of
||time

|-style="background:#eeeeee"
||{{l|Image:Type_bool_icon.png|16px}} {{l|Lock Selection}}
||
{| style="width:18px; height:16px" border="1"
|-
|}
||bool (Static)

|-
||{{l|Image:Type_vector_icon.png|16px}} {{l|Focus Point}}
||0.000000u,0.000000u
||vector

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} {{l|Group Layer#Outline Grow Parameter|Outline Grow}}
||0.000000
||real

|-
||{{l|Image:Type_bool_icon.png|16px}} {{l|Group Layer#Z Depth Range Enabled|Z Range}}
||
{| style="width:18px; height:16px" border="1"
|-
|}
||bool

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} {{l|Group Layer#Z Depth Range Position|Z Range Position}}
||0.000000
||real

|-
||{{l|Image:Type_real_icon.png|16px}} {{l|Group Layer#Z Depth Range Depth|Z Range Depth}}
||1.000000
||real

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} {{l|Group Layer#Z Depth Range Transition|Z Range Blur}}
||0.000000
||real

|}

=== Transformation Parameter ===
The {{Literal|Transformation}} parameter is a composite parameter, it holds an Offset, a rotation Angle, a Skew Angle and a Scale value for the group. The {{Literal|Transformation}} parameter is already {{l|Convert#Composite|converted to composite}} when the {{l|Group Layer}} is created and so directly exposes the {{l|Offset Parameter|Offset}}, {{l|Rotation Parameter|Rotation}}, {{l|Skew Parameter|Skew}} and {{l|Scale Parameter|Scale}} subparameters.

See also {{l|Group_Transformation_Widget}}

=== Canvas Parameter ===
{{l|Image:Type canvas icon 0.63.06.png|64px}}

This is "Group" by default if the {{Literal|Group Layer}} was created by grouping other layers, or {{Literal|No Image Selected}} if it was created from the {{l|New Layer Menu}}. This parameter lets you select another canvas.

The Canvas parameter presents a drop-down menu of the exported canvases, plus an extra entry called "Other...". Selecting "Other..." presents the user with a text entry box asking for the name of the canvas to use. The name typed should have the following format (where <nowiki>[ ]</nowiki> indicates an optional part, ( ) is for grouping, and * means "0 or more times"):

<nowiki> [[filename]#][:]</nowiki>''id''(:''id'')*

In its simplest form, this is just an ''id'', ie. the exported name of one of the child canvases of the current canvas.

Other possibilities are:
* if a '#' is present, the part before the '#' is interpreted as the filename of an external .sif file to use.
* if the '#' is the first character of the string (ie. the filename is blank) then the '#' is ignored, and the current canvas is used instead
* if a ':' appears before the first ''id'', it means to start at the root canvas of the current canvas
* each subsequent :id steps down into the specified child

Examples:
* '''/usr/share/doc/synfig/examples/business_card.sifz#:IndividualCard''' -- gives the absolute path to a .sifz file, and says to use the canvas that was exported from its root canvas as "IndividualCard"
* '''../../examples/business_card.sifz#:IndividualCard''' -- the same, but with a relative path to the .sifz file
* '''#:sy:head:eyes:left''' -- look in the current composition, and starting from the root, navigate down through the canvas tree. Find a child canvas of the root canvas called 'sy', look in 'sy' for a child canvas called 'head', and so on.
* ''':sy:head:eyes:left''' -- exactly as above. an empty filename is the same as not using the '#' at all
* '''eyes:left''' -- without a ':' before the first ''id'', this starts at the current canvas (presumably the Group in question is in the "head" subcanvas of the "sy" subcanvas of the root)

=== Outline Grow Parameter ===
This parameter allows to control thickness of all outline layers inside. Assigning positive value to this parameter makes all child outlines rendered thicker, while negative value makes them look thinner. This feature is very helpful for tuning outlines in complex artwork and it also allows to achieve some nice effects like constant outline width at any zoom level.

Note: The {{Literal|Outline Grow}} parameter can not be applied to exported and imported (external) Groups layers.

{{l|Image:Paste-canvas-outline-grow-param.png}}

===Z Range parameters===

====Z Depth Range Enabled====
When checked, only layers inside range are visible and the visible layers are signaled with bolded font in the {{l|Layers_Panel}}
====Z Depth Range Position====
Starting Z Depth position where layers are visible
====Z Depth Range Depth====
Depth where layers are visible in Z Depth range
====Z Depth Range Transition====
Z Depth area where layers inside are partially visible.

Example of Z Range use : http://www.youtube.com/watch?v=UPpmOz0wUY4

===Speed===
Alters the velocity group's child animated layers (not the {{literal|Group Layer}} itself)

Set it to zero, it would stop the animation. A value of one makes the animation run at normal speed and a value of two makes it run double speed. Minus one reverses the animation.

==See Also==
{{l|Switch_Group_Layer}}

Switch Group Layer

2020-04-08T16:56:35Z

FirasH: Cleaning and review

{{Title|Switch Group Layer}}
{{Category|Layers}}
{{Category|Other}}
{{NewTerminology}}

{{l|Image:Layer other switch icon.png|64px}}

== About Switch Group Layer==

The {{Literal|Switch Group Layer}} is a special layer that can group many layers, only displaying one layer at a time.

A {{Literal|Switch Group Layer}} can be created through the {{l|Category:Layer_Menu#New_Layer_Menu|New Layer Menu}}, using {{c|<New Layer>|<Other>|Switch Group Layer|}} or through the {{l|Category:Layer Menu}}.

==Parameters of Switch Group Layer==

The parameters of the {{Literal|Switch Group Layer}} are:

{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0"
|-style="background:#c8c8c8"
|'''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 (static)

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

|-
||{{l|Group Layer#Transformation Parameter|Transformation Parameter}}
||0.000000, 0.000000, 0.00°, 60, 60
||transformation

|-style="background:#"
||{{l|Image:Type canvas icon 0.63.06.png|16px}} {{l|Group Layer#Canvas Parameter|Canvas Parameter}}
||<No Image Selected>
||canvas

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

|-
||{{l|Image:Type_time_icon.png|16px}} {{l|Time Offset Parameter|Time Offset}}
||Of
||time

|-style="background:#eeeeee"
||{{l|Image:Type_bool_icon.png|16px}} {{l|Lock Selection}}
||
{| style="width:18px; height:16px" border="1"
|-
|}
||bool (Static)

|-
||{{l|Image:Type_real_icon.png|16px}} {{l|Group Layer#Outline Grow|Outline Grow}}
||0.000000
||real

|-
||{{l|Image:Type_vector_icon.png|16px}} {{l|Active Layer Name}}
||<empty>
||string

|}

The displayed layer is chosen by the {{Literal|Active Layer Name}} parameter.
If there are several layers with the same name in the {{Literal|Switch Group Layer}}, then only the topmost one is displayed.

==Video Usage==
[https://www.youtube.com/watch?v=Z5Bj2BzG36U&t=390 Simple frame by frame animation]

Library Panel

2020-04-02T09:18:00Z

FirasH: Cleaning and review

{{Title|Library Panel}}
{{Category|Panels}}
{{Category|Data Linking}}
{{NewTerminology}}


[[Image:library_icon.png|64px]]

The {{Literal|Library Panel}} shows all exported {{l|ValueNode|value nodes}} and all canvases in the current animation.

If you find yourself using a particular Color over and over again, it's a good idea to export it into the Library Panel so you can easily pick the same Color in the future. Simply right-click on the Color in the {{l|Parameters Panel}} and choose "{{l|Export}}" from the menu. You will be prompted for a name to associate with the value. In order to see the newly exported value in the Library Panel, you will have to open up the {{Literal|ValueBase Nodes}} tree if it isn't already opened. The same technique works for any other parameter as well, even for complete animated Spline paths.

To use a value that you have exported into the {{Literal|Library Panel}} in a different layer, simply select the value in the {{Literal|Library Panel}} then right-click the parameter you want to apply it to in the {{l|Parameters Panel}}. Select "{{l|Connect}}" to use the value.

The values stored in the {{Literal|Library Panel}} store their animations with them. So if you have a Circle whose Color changes from red to yellow over time, and export that Circle's Color parameter and use it to Color a Rectangle, the Rectangle will also change from red to yellow over time, in exactly the same way. The Color of the two shapes will now be linked, so editing either one of them will affect the other.

When a value is selected in the {{Literal|Library Panel}}, its handle will be shown in the {{l|Work Area Window}}. These handle will remain as you switch from layer to layer, which can be confusing.

It is possible, using drag and drop, to organise the values in the {{Literal|Library Panel}} into a hierarchical structure, but currently the structure you create isn't saved into the .sifz file, so any organisation you do will be lost when you next open the document.

[[File:Library-panel.png|frame|none]]

Template:SplineToolOptions

2020-04-01T22:41:14Z

FirasH: Minor review

{{l|File:Spline Tool Options.png|frame}}
This tool has the following options:

* '''Name''': Sets the name of the Spline that you will create, in this case "Spline070". If the ending part of the string contains an integer number, this input text box will parse it and increase that number for the next created Spline. Otherwise, it will add a three digit number while creating the next one.
* '''Layer Type''': Sets whether to create {{l|Region Layer|Region}}, {{l|Outline Layer|Outline}}, {{l|Advanced Outline Layer|Advanced Outline}}, {{l|Plant Layer|Plant}} and/or {{l|Curve Gradient Layer|Curve Gradient}} Layers.
* '''{{l|Blend_Method_Parameter|Blend Method}}''': Sets the blending method used to composite on the layers below.
* '''Opacity''': Sets the {{l|Amount Parameter}} for new layers. Defaults to '''1.00''' (Completely opaque).
* '''Brush Size''': Sets the size of the line for {{l|Outline Layer}} and/or {{l|Advanced Outline Layer}}.
* '''Feather''': Sets the {{l|Feather Parameter|feather parameter}} of the {{l|Region Layer|Region}} or Outline Layer created.
* '''Link Origin''': If checked, links the {{l|Origin Parameter}} for the {{l|Plant Layer|Plant}}, {{l|Region Layer|Region}} or Outline if two of them (or all them) are checked.
* '''Auto Export''': If checked, exports automatically the {{l|Vertices Parameter|Vertices parameter}} (that's a {{l|Spline|Spline}} type parameter)

Template:SplineToolOptions

2020-04-01T17:31:26Z

FirasH: Cleaning and review

{{l|File:Spline Tool Options.png|frame}}
This tool has the following options:

* '''Name''': Set the name of the Spline that you will create. In this case "NewSpline007". If the end of the string contains an integer number, this input text box will parse it and increase that number for the next created Spline. Otherwise it will add a three digit number while creating the next one.
* '''Layer Type''': Whether to create {{l|Region Layer|Region}}, {{l|Outline Layer|Outline}}, {{l|Advanced Outline Layer|Advanced Outline}}, {{l|Plant Layer|Plant}} and/or {{l|Curve Gradient Layer|Curve Gradient}} Layers.
* '''{{l|Blend_Method_Parameter|Blend Method}}''': The blending method used to composite on the layers below.
* '''Opacity''': Sets the {{l|Amount Parameter}} for new layers. Defaults to '''1.00''' (Completely opaque).
* '''Brush Size''': Sets the size of the line for {{l|Outline Layer}} and/or {{l|Advanced Outline Layer}}.
* '''Feather''': Sets the {{l|Feather Parameter|feather parameter}} of the {{l|Region Layer|Region}} or Outline Layer created.
* '''Link Origin''': If checked, links the {{l|Origin Parameter}} for the {{l|Plant Layer|Plant}}, {{l|Region Layer|Region}} or Outline if two of them (or all them) are checked.
* '''Auto Export''': If checked, automatically exports the {{l|Vertices Parameter|Vertices parameter}} (that's a {{l|Spline|Spline}} type parameter)

Spline Tool

2020-04-01T17:23:01Z

FirasH: Cleaning

{{Title|Spline Tool}}
{{TOCright}}
{{Category|Tools}}
{{NewTerminology}}

{{l|Image:Bline_icon.png|64px}} '''ALT-B'''

==Introduction==

{{l|Spline|Splines}} are the most used objects in any normal animation done with Synfig, and the Spline Tool allows you to create them.

==Usage==

Select the {{Literal|Spline Tool}} in the {{l|Category:Toolbox}} or use keyboard the shortcut {{shortcut|Alt|b}} to enable it. To leave that mode just select another {{l|Category:Tools|tool}} from the {{l|Toolbox|toolbox}}.

===It is easy to use this tool===

* Each single click creates a new {{Literal|Vertex}}. Its {{Literal|Tangent}} values are set to (0,0) and the {{Literal|Vertex}} becomes a sharp corner.
* Click and drag creates a new {{Literal|Vertex}} and allows the modification of the {{Literal|Tangent}} value at that {{Literal|Vertex}}. Extending the {{Literal|Tangent}} smooths the corners.
* Each new {{Literal|Vertex}} is attached to the previous by a {{Literal|Bézier Spline}} defined by the vertices' position and tangents.
* The {{Literal|Spline}} is created sequentially, one {{Literal|Vertex}} follows the previous one.
* The end point of the previous {{Literal|Spline}} arc guides the next arc created until you close it. The next created {{Literal|Spline}} will be independent of the previously created one.
* You can tweak the newly created Vertices by clicking on their {{l|Handle|handles}} and dragging them.
* You can also right click on a {{Literal|Vertex}} handle or a {{Literal|Tangent}} handle and it will provide a context menu:
** For {{Literal|Tangent}} handles: {{Literal|Split Tangent's Angle}} and {{Literal|Split Tangent's Radius}} will split the {{Literal|Tangent}} so that you can independently modify the arch of an end point of a Bézier curve. On the opposite, {{Literal|Merge Tangent's Angle}} and {{Literal|Merge Tangent's Radius}} will merge the independent {{Literal|Tangents}} so that you can align the arches of the end points of two connecting Bézier curves.
** For {{Literal|Vertex}} handles: {{Literal|Loop Spline}} or {{Literal|Unloop Spline}} (depending if already looped or not) allows you to close or open the {{Literal|Spline}}. {{Literal|Delete Vertex}} allows you to delete the {{Literal|Vertex}}.
* You can also right click in the middle of a Bézier curve. {{Literal|Insert Vertex}} allows the insertion of a {{Literal|Vertex}} (and sets its Tangents intelligently according to the neighboring Vertices) where you clicked.

===To finish the Spline===
# Select another tool in the {{l|Category:Toolbox}}.
# Or click on the gear button [[File:Gear icon.png]] of the {{l|Tool Options Panel}}.

To clear out the working Spline, press the {{Shortcut|Esc}} button.

==Options==

{{SplineToolOptions}}

==Other sources of information==

See this {{l|Video Tutorials|video tutorial}} to see it in action.

Read {{l|Doc:Creating Shapes}} which talks a little about the Spline tool.

Read {{l|Dev:Spline_Bline}} about tangent internals computation.

Read {{l|Dev:Bline_Speed}} which explains about variations in the Amount parameter of Splines.

Doc:Following a Spline

2020-04-01T10:24:55Z

FirasH: Added reference to useful forum discussion

{{Title|Following a Spline}}
{{Category|Tutorials}}
{{Category|Tutorials Advanced}}
{{NewTerminology}}

:Note: There is also a slightly out-of-date tutorial on this topic at [[Tracking Curves]]. It contains some info, particularly about link/export, '''which hasn't yet been added to this new tutorial'''. There is also another [[Following a BLine (the very old way)|very out-of-date tutorial]] for synfig 0.61.08.
== Introduction ==

This tutorial will demonstrate how to make an object follow the path of an arbitrary curve, rotating to face the direction of travel.

== Summary ==

We're going to:

* {{l|Doc:Following a Spline#Create the Layers|Draw a curve and an arrow}}
* {{l|Doc:Following a Spline#Make the Arrow Move and Rotate|Link the arrow's Origin and Rotation}} to the Spline so that the arrow follows the curve

== Tutorial ==

The tutorial is intended to provide a demonstration on how to use this feature.

=== Create the Animation ===

* Create a new animation by selecting from the menu {{c|File|New}}.

=== Create the Layers ===

First step, let's draw the Spline:

# Select the {{l|Spline Tool}} from the Toolbox: [[File:Spline-tool-0.63.06.png|frame|none]]
# In the {{l|Tool_Options_Panel}}, enable only the Outline Layer type.
# Draw a Spline that you want the arrow to move along.
# Click the {{Literal|Make Spline}} icon in the bottom left of the {{l|Tool_Options_Panel}} to create the Spline.

Second step, let's draw the arrow:

# Select the {{l|Spline Tool}}, this time enabling {{Literal|Create Outline}} and {{Literal|Create Region}} Layer types: [[File:Spline-Tool-Options_0.63.06.png|frame|none]]
# Draw an arrow (or any another arbitrary shape) pointing to the right side of the Canvas.
# Switch to the {{l|Transform Tool}} and select the Outline, press {{Shortcut|Ctrl}}{{Shortcut|A}} to select all its {{l|Handle|handles}} except the green position handle.
# Drag the handles so that the arrow is centered around the green position handle.
# Add a {{l|Rotate Layer}} above the Outline and Region Layers.
# {{l|Group}} the Rotate, Outline, and Region Layers. At this point there are 2 top-level Layers:
## an Outline Layer
## a Group Layer containing the arrow and the Rotate Layer

=== Make the Arrow Move and Rotate ===

# Select the Group Layer by selecting it in the {{l|Layers Panel}}.
# Then:
## select its green origin position {{l|Handle|handle}} by clicking on it in the Canvas window
## while holding {{Shortcut|Ctrl}} select the Rotate Layer in the Layers Panel
## while holding {{Shortcut|Ctrl}} select its blue rotation handle in the Canvas window
#: At this point, there are 2 Layers selected and one handle from each of those 2 Layers selected.
# Now, while holding {{Shortcut|Ctrl}} select also the curved Spline Layer (it should be the last Layer in the Layer Panel's list).
# Right-click on the dotted line that indicates the position of the curved Spline, not on any handle, but on the dotted line between handles.
# From the context menu that pops up, select {{Literal|Link to Spline}}: [[Image:Spline-Link-to-0.63.06.png|none|frame|See also {{l|Command:Link_to_Spline}} ]]
#: The arrow Group should move so that its green position handle is on the Spline, and it should rotate so that the arrow points along the spline at that point.
# Select just the Group Layer, and drag its green handle around. The handle is now constrained to the Spline and dragging it will also affect the rotation of the arrow.
#: We can now animate the arrow.
# Turn on {{l|Animate_Editing_Mode}} by clicking the icon in the bottom right of the Canvas window:
## at time '''0f''', drag the Group Layer's green position handle to one end of the Spline
## at time '''5s''', drag the same position handle to the other end of the Spline
# Try {{c|File|Preview|}} to watch the animation.

== Results ==

This is the animation I ended up with:
[[File:Arrow-follows-bline.gif|center|alt Following a Spline example]]

Synfig project: {{l|Media:Arrow-follows-bline.sifz‎|Arrow-follows-bline.sifz‎}}

== Controlling the linear velocity ==

By default, the arrow travels the whole spline with a constant velocity, independently of the Spline structure.

If you select the Group Layer and look at the Parameters Panel, you'll see that its Origin parameter is {{L|convert|converted}} to {{Literal|Spline Vertex}} type. This is done automatically when {{Literal|Link to Spline}} is executed.

You can disable the "Homogenous" subparameter and then the speed of the arrow will depend on the Spline structure, it will take the same time to move along each segment of the Spline. So if there's a long straight segment then a bendy complex part, the arrow will move much faster along the straight segments (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the Spline) is not constant.

For illustration of the "Homogenous" effect see [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].

== See also ==
* Discussion on the forum: [https://forums.synfig.org/t/following-a-spline-serious-problem-and-frustration/9627 Following a spline: Serious problem and frustration]
* Link to Spline command: {{l|Command:Link_to_Spline}}
* A [https://youtu.be/d1hPxgq2qeU video tutorial] showing the steps of this page.

Doc:Following a Spline

2020-03-30T12:05:19Z

FirasH: Rephrase order of instruction sentence to match actual steps

{{Title|Following a Spline}}
{{Category|Tutorials}}
{{Category|Tutorials Advanced}}
{{NewTerminology}}

:Note: There is also a slightly out-of-date tutorial on this topic at [[Tracking Curves]]. It contains some info, particularly about link/export, '''which hasn't yet been added to this new tutorial'''. There is also another [[Following a BLine (the very old way)|very out-of-date tutorial]] for synfig 0.61.08.
== Introduction ==

This tutorial will demonstrate how to make an object follow the path of an arbitrary curve, rotating to face the direction of travel.

== Summary ==

We're going to:

* {{l|Doc:Following a Spline#Create the Layers|Draw a curve and an arrow}}
* {{l|Doc:Following a Spline#Make the Arrow Move and Rotate|Link the arrow's Origin and Rotation}} to the Spline so that the arrow follows the curve

== Tutorial ==

The tutorial is intended to provide a demonstration on how to use this feature.

=== Create the Animation ===

* Create a new animation by selecting from the menu {{c|File|New}}.

=== Create the Layers ===

First step, let's draw the Spline:

# Select the {{l|Spline Tool}} from the Toolbox: [[File:Spline-tool-0.63.06.png|frame|none]]
# In the {{l|Tool_Options_Panel}}, enable only the Outline Layer type.
# Draw a Spline that you want the arrow to move along.
# Click the {{Literal|Make Spline}} icon in the bottom left of the {{l|Tool_Options_Panel}} to create the Spline.

Second step, let's draw the arrow:

# Select the {{l|Spline Tool}}, this time enabling {{Literal|Create Outline}} and {{Literal|Create Region}} Layer types: [[File:Spline-Tool-Options_0.63.06.png|frame|none]]
# Draw an arrow (or any another arbitrary shape) pointing to the right side of the Canvas.
# Switch to the {{l|Transform Tool}} and select the Outline, press {{Shortcut|Ctrl}}{{Shortcut|A}} to select all its {{l|Handle|handles}} except the green position handle.
# Drag the handles so that the arrow is centered around the green position handle.
# Add a {{l|Rotate Layer}} above the Outline and Region Layers.
# {{l|Group}} the Rotate, Outline, and Region Layers. At this point there are 2 top-level Layers:
## an Outline Layer
## a Group Layer containing the arrow and the Rotate Layer

=== Make the Arrow Move and Rotate ===

# Select the Group Layer by selecting it in the {{l|Layers Panel}}.
# Then:
## select its green origin position {{l|Handle|handle}} by clicking on it in the Canvas window
## while holding {{Shortcut|Ctrl}} select the Rotate Layer in the Layers Panel
## while holding {{Shortcut|Ctrl}} select its blue rotation handle in the Canvas window
#: At this point, there are 2 Layers selected and one handle from each of those 2 Layers selected.
# Now, while holding {{Shortcut|Ctrl}} select also the curved Spline Layer (it should be the last Layer in the Layer Panel's list).
# Right-click on the dotted line that indicates the position of the curved Spline, not on any handle, but on the dotted line between handles.
# From the context menu that pops up, select {{Literal|Link to Spline}}: [[Image:Spline-Link-to-0.63.06.png|none|frame|See also {{l|Command:Link_to_Spline}} ]]
#: The arrow Group should move so that its green position handle is on the Spline, and it should rotate so that the arrow points along the spline at that point.
# Select just the Group Layer, and drag its green handle around. The handle is now constrained to the Spline and dragging it will also affect the rotation of the arrow.
#: We can now animate the arrow.
# Turn on {{l|Animate_Editing_Mode}} by clicking the icon in the bottom right of the Canvas window:
## at time '''0f''', drag the Group Layer's green position handle to one end of the Spline
## at time '''5s''', drag the same position handle to the other end of the Spline
# Try {{c|File|Preview|}} to watch the animation.

== Results ==

This is the animation I ended up with:
[[File:Arrow-follows-bline.gif|center|alt Following a Spline example]]

Synfig project: {{l|Media:Arrow-follows-bline.sifz‎|Arrow-follows-bline.sifz‎}}

== Controlling the linear velocity ==

By default, the arrow travels the whole spline with a constant velocity, independently of the Spline structure.

If you select the Group Layer and look at the Parameters Panel, you'll see that its Origin parameter is {{L|convert|converted}} to {{Literal|Spline Vertex}} type. This is done automatically when {{Literal|Link to Spline}} is executed.

You can disable the "Homogenous" subparameter and then the speed of the arrow will depend on the Spline structure, it will take the same time to move along each segment of the Spline. So if there's a long straight segment then a bendy complex part, the arrow will move much faster along the straight segments (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the Spline) is not constant.

For illustration of the "Homogenous" effect see [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].

== See also ==
* Link to Spline command: {{l|Command:Link_to_Spline}}
* A [https://youtu.be/d1hPxgq2qeU video tutorial] showing the steps of this page.

Command:Link to Spline

2020-03-30T09:28:40Z

FirasH: Rephrase sentence

{{NewTerminology}}
{{Category|Data Linking}}

The easiest method to attach a {{Literal|Vertex}} to a specific position along a {{Literal|Spline}} is to create a new {{Literal|Vertex}} at that same position.

In general this method works, but is not very effective. In fact it has at least two drawback. First, it increases the complexity of the drawings. Secondly, it is not possible to move the attached vertex along the {{Literal|Spline}}.

The {{Literal|Link to Spline}} feature provides an easy way to attach a {{Literal|Vertex}} to a {{Literal|Spline}} without the necessity to create an additional {{Literal|Vertex}}. Once applied, the {{Literal|Vertex}} will be bounded to the {{Literal|Spline}} and will be possible to place it arbitrarily along the defined path.

== Linking ==

To link a {{Literal|Vertex}} to a {{Literal|Spline}} you can:
# Select the {{Literal|Vertex}} you want to link and the target {{Literal|Spline}}
# Select the handle you want to link to target {{Literal|Spline}}. It could be:
## a {{Literal|Vertex}} {{l|Handle|handle}}
## a {{Literal|Tangent}} handle
## the {{l|Origin Parameter}} of a {{l|Group Layer}}
## a {{Literal|Real}} handle
# Right click on the target {{Literal|Spline}} and select {{Literal|Link to Spline}} [[File:Link to Spline 0.63.06.png|frame|none]]
## if a {{Literal|Vertex}} handle is selected, it will be placed on the {{Literal|Spline}} at the clicked position
## if a {{Literal|Tangent}} handle is selected, it will be linked at the clicked position
## if the {{Literal|Origin}} is selected, it will link both Origin and Angle parameters
## if a {{Literal|Real}} handle is selected, it will link with the Spline width at the clicked position

:NOTE: At step 2 you can select more than one type of handle at the same time and link their values to the same position of the target {{Literal|Spline}}.

== Inverse handle Manipulation ==

It is possible to change the linked handle position along the {{Literal|Spline}} simply by dragging it.
If you linked the Tangent and Origin, you will notice what they are changing their values according the value of the target {{Literal|Spline}}.

You may also specify their Offset simply by dragging them, i.e. making tangent 90 degrees to Spline will keep that Offset at any point of the {{Literal|Spline}}.

== See also ==
* {{l|Doc:Following_a_Spline}} tutorial.

Command:Link to Spline

2020-03-29T23:47:43Z

FirasH: Cleanup to make the page easy to understand

{{NewTerminology}}
{{Category|Data Linking}}

The easiest method to attach a {{Literal|Vertex}} to a specific position along a {{Literal|Spline}} is to create a new {{Literal|Vertex}} at that same position.

In general this method works, but is not very effective. In fact it has at least two drawback. First, it increases the complexity of the drawings. Secondly, it is not possible to move the attached vertex along the {{Literal|Spline}}.

The {{Literal|Link to Spline}} feature provides an easy way to attach a {{Literal|Vertex}} to a {{Literal|Spline}} without the necessity to create an additional {{Literal|Vertex}}. Once applied, the {{Literal|Vertex}} will be bounded to the {{Literal|Spline}} and will be possible to place it arbitrarily along the defined path.

== Linking ==

To link a {{Literal|Vertex}} to a {{Literal|Spline}} you can:
# Select the {{Literal|Vertex}} you want to link and the target {{Literal|Spline}}
# Select the handle you want to link to target {{Literal|Spline}}. It could be:
## a {{Literal|Vertex}} {{l|Handle|handle}}
## a {{Literal|Tangent}} handle
## the {{l|Origin Parameter}} of a {{l|Group Layer}}
## a {{Literal|Real}} handle
# Right click on the target {{Literal|Spline}} and select {{Literal|Link to Spline}} [[File:Link to Spline 0.63.06.png|frame|none]]
## if a {{Literal|Vertex}} handle is selected, it will be placed on the {{Literal|Spline}} at the clicked position
## if a {{Literal|Tangent}} handle is selected, it will be linked at the clicked position
## if the {{Literal|Origin}} is selected, it will link both Origin and Angle parameters
## if a {{Literal|Real}} handle is selected, it will link with the Spline width at the clicked position

:NOTE: At step 2 you can select more types of handles at the same time and link their values to the same position of the target {{Literal|Spline}}.

== Inverse handle Manipulation ==

It is possible to change the linked handle position along the {{Literal|Spline}} simply by dragging it.
If you linked the Tangent and Origin, you will notice what they are changing their values according the value of the target {{Literal|Spline}}.

You may also specify their Offset simply by dragging them, i.e. making tangent 90 degrees to Spline will keep that Offset at any point of the {{Literal|Spline}}.

== See also ==
* {{l|Doc:Following_a_Spline}} tutorial.

Doc:Overview

2020-03-28T10:33:07Z

FirasH: Cleaning and review

{{Title|Overview}}
{{Navigation|Category:Manual|Doc:Getting Started}}
[[Category:Manual]]
{{NewTerminology}}

As you probably know, animation is the rapid display of a sequence of images in order to create an illusion of movement. Traditionally 2D animation is created by drawing each displayed image individually. Those images are called "frames" and thus such method is called "frame-by-frame animation". To create a good illusion of movement you need to draw many frames, that's why this method requires a lot of time and resources.
[[File:Traditional-animation.gif|x150px|frame|center|A traditional frame-by-frame animation, taken from : http://flipily.com|link=http://flipily.com]]
{{literal|Synfig Studio}} is an [https://en.wikipedia.org/wiki/Free_software open-source] 2D vector animation software. It is designed to produce film-quality animation with less people and resources.

Synfig Studio is built to eliminate the need to draw each frame individually. There are two techniques for that:
* Morphing animation
* Cutout animation

== Morphing ==
[[File:Rose4b.gif|thumb|100px|right|Morphing animation of a rose, by Rore]] '''Morphing''' is a technique that takes two images and creates a smooth transition between them. In the process of morphing, one shape is deformed into another and this transformation is usually defined by control points.

In Synfig Studio images are constructed from vector shapes and the morphing is done automatically. This allows us to create animations by drawing only the key positions at relatively wide time intervals. You need only to draw a few frames as needed to create a basic sense of motion for the scene, and Synfig Studio will create the in-between frames.
 

== Cutout animation ==
[[Image:Cutoutsample.gif|thumb|100px|left|Cutout animation in Synfig's tutorials]]
'''Cutout animation''' is created by splitting objects into parts and applying some simple transformations to them (like translation, rotation or scale) at different moments of time.

Synfig Studio uses those values to interpolate the motion for in-between frames. Cutout animation can be produced from bitmap images or vector graphics.
 

== Synthesis and other functionalities==
In both cases the role of Synfig Studio is to fill the gaps between the drawn frames (also called "keyframes") and produce smooth and fluid animations. This process is called "tweening".

Although Synfig Studio is not directly intended to draw animation frame-by-frame, it can be used to bring your hand-drawn frame-by-frame animation to the film-quality level by converting bitmap data of each frame into vector format. This process is called "tracing" and usually done by hand by constructing vector shapes on top of bitmap images. In the process of construction you can apply a lot of fascinating effects built into Synfig Studio to achieve a professional look for your animations.


Whether you do frame-by frame animation or not, Synfig Studio gives you flexible control over the repeated data, such as colors, outline characteristics, textures, images and many more, even animation trajectories and their sets (actions). Reusing repeated data is achieved via linking. This is a power of Synfig Studio, which is especially important for big animation projects.

Among the plain linking pieces of artwork data you can also define relations between them using a set of functions. That allows to create automatic animation based on the defined laws and bring whole animation process to the next level.
[[Image:Parabolic-shot.gif|frame|center|Parabolic shot in Synfig's tutorials]]



All those features of Synfig Studio are covered in detail in the chapters of this manual.


{{Navigation|Category:Manual|Doc:Getting Started}}

Doc:Following a Spline

2020-03-27T22:56:09Z

FirasH: Numbered list instead of plain list for better understanding

{{Title|Following a Spline}}
{{Category|Tutorials}}
{{Category|Tutorials Advanced}}
{{NewTerminology}}

:Note: There is also a slightly out-of-date tutorial on this topic at [[Tracking Curves]]. It contains some info, particularly about link/export, '''which hasn't yet been added to this new tutorial'''. There is also another [[Following a BLine (the very old way)|very out-of-date tutorial]] for synfig 0.61.08.
== Introduction ==

This tutorial will demonstrate how to make an object follow the path of an arbitrary curve, rotating to face the direction of travel.

== Summary ==

We're going to:

* {{l|Doc:Following a Spline#Create the Layers|Draw a curve and an arrow}}
* {{l|Doc:Following a Spline#Make the Arrow Move and Rotate|Link the arrow's Origin and Rotation}} to the Spline so that the arrow follows the curve

== Tutorial ==

The tutorial is intended to provide a demonstration on how to use this feature.

=== Create the Animation ===

* Create a new animation by selecting from the menu {{c|File|New}}.

=== Create the Layers ===

First step, let's draw the Spline:

# Select the {{l|Spline Tool}} from the Toolbox: [[File:Spline-tool-0.63.06.png|frame|none]]
# In the {{l|Tool_Options_Panel}}, enable only the Outline Layer type.
# Draw a Spline that you want the arrow to move along.
# Click the {{Literal|Make Spline}} icon in the bottom left of the {{l|Tool_Options_Panel}} to create the Spline.

Second step, let's draw the arrow:

# Select the {{l|Spline Tool}}, this time enabling {{Literal|Create Outline}} and {{Literal|Create Region}} Layer types: [[File:Spline-Tool-Options_0.63.06.png|frame|none]]
# Draw an arrow (or any another arbitrary shape) pointing to the right side of the Canvas.
# Switch to the {{l|Transform Tool}} and select the Outline, press {{Shortcut|Ctrl+a}} to select all its {{l|Handle|handles}} except the green position handle.
# Drag the handles so that the arrow is centered around the green position handle.
# Add a {{l|Rotate Layer}} above the Outline and Region Layers.
# {{l|Group}} the Rotate, Outline, and Region Layers. At this point there are 2 top-level Layers:
## an Outline Layer
## a Group Layer containing the arrow and the Rotate Layer

=== Make the Arrow Move and Rotate ===

# Select the Group Layer by selecting it in the {{l|Layers Panel}}.
# Then:
## select its green origin position {{l|Handle|handle}} by clicking on it in the canvas window
## select the Rotate Layer by holding {{Shortcut|Ctrl}} and clicking it in the Layers Panel
## select the blue rotation handle by holding {{Shortcut|Ctrl}} and clicking on it in the canvas window
#: At this point, there are 2 Layers selected and one handle from each of those 2 Layers selected.
# Now, select also the curved Spline Layer (it should be the last Layer in the Layer Panel's list) by holding {{Shortcut|Ctrl}} and clicking on it.
# Right-click on the dotted line that indicates the position of the curved Spline, not on any handle, but on the dotted line between handles.
# From the context menu that pops up, select {{Literal|Link to Spline}}: [[Image:Spline-Link-to-0.63.06.png|none|frame|See also {{l|Command:Link_to_Spline}} ]]
#: The arrow Group should move so that its green position handle is on the Spline, and it should rotate so that the arrow points along the spline at that point.
# Select just the Group Layer, and drag its green handle around. The handle is now constrained to the Spline and dragging it will also affect the rotation of the arrow.
#: We can now animate the arrow.
# Turn on {{l|Animate_Editing_Mode}} by clicking the icon in the bottom right of the canvas window:
## at time '''0f''', drag the Group Layer's green position handle to one end of the Spline
## at time '''5s''', drag the same position handle to the other end of the Spline
# Try {{c|File|Preview|}} to watch the animation.

== Results ==

This is the animation I ended up with:
[[File:Arrow-follows-bline.gif|center|alt Following a Spline example]]

Synfig project: {{l|Media:Arrow-follows-bline.sifz‎|Arrow-follows-bline.sifz‎}}

== Controlling the linear velocity ==

By default, the arrow travels the whole spline with a constant velocity, independently of the Spline structure.

If you select the Group Layer and look at the Parameters Panel, you'll see that its Origin parameter is {{L|convert|converted}} to {{Literal|Spline Vertex}} type. This is done automatically when {{Literal|Link to Spline}} is executed.

You can disable the "Homogenous" subparameter and then the speed of the arrow will depend on the Spline structure, it will take the same time to move along each segment of the Spline. So if there's a long straight segment then a bendy complex part, the arrow will move much faster along the straight segments (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the Spline) is not constant.

For illustration of the "Homogenous" effect see [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].

== See also ==
* Link to Spline command: {{l|Command:Link_to_Spline}}
* A [https://youtu.be/d1hPxgq2qeU video tutorial] showing the steps of this page.

Doc:Following a Spline

2020-03-27T22:44:03Z

FirasH: Cleanup to make the page easy to understand

{{Title|Following a Spline}}
{{Category|Tutorials}}
{{Category|Tutorials Advanced}}
{{NewTerminology}}

:Note: There is also a slightly out-of-date tutorial on this topic at [[Tracking Curves]]. It contains some info, particularly about link/export, '''which hasn't yet been added to this new tutorial'''. There is also another [[Following a BLine (the very old way)|very out-of-date tutorial]] for synfig 0.61.08.
== Introduction ==

This tutorial will demonstrate how to make an object follow the path of an arbitrary curve, rotating to face the direction of travel.

== Summary ==

We're going to:

* {{l|Doc:Following a Spline#Create the Layers|Draw a curve and an arrow}}
* {{l|Doc:Following a Spline#Make the Arrow Move and Rotate|Link the arrow's Origin and Rotation}} to the Spline so that the arrow follows the curve

== Tutorial ==

The tutorial is intended to provide a demonstration on how to use this feature.

=== Create the Animation ===

* Create a new animation by selecting from the menu {{c|File|New}}.

=== Create the Layers ===

First step, let's draw the Spline:

* Select the {{l|Spline Tool}} from the Toolbox:
[[File:Spline-tool-0.63.06.png|frame|none]]

* In the {{l|Tool_Options_Panel}}, enable only the Outline Layer type.

* Draw a Spline that you want the arrow to move along.

* Click the {{Literal|Make Spline}} icon in the bottom left of the {{l|Tool_Options_Panel}} to create the Spline.

Second step, let's draw the arrow:

* Select the {{l|Spline Tool}}, this time enabling {{Literal|Create Outline}} and {{Literal|Create Region}} Layer types:
[[File:Spline-Tool-Options_0.63.06.png|frame|none]]

* Draw an arrow (or any another arbitrary shape) pointing to the right side of the Canvas.

* Switch to the {{l|Transform Tool}}.

* Select the Outline, press {{Shortcut|Ctrl+a}} to select all its {{l|Handle|handles}} except the green position handle.

* Drag the handles so that the arrow is centered around the green position handle.

* Add a {{l|Rotate Layer}} above the Outline and Region Layers.

* {{l|Group}} the Rotate, Outline, and Region Layers. At this point there are 2 top-level Layers:
** an Outline Layer
** a Group Layer containing the arrow and the Rotate Layer

=== Make the Arrow Move and Rotate ===

* Select the Group Layer by selecting it in the {{l|Layers Panel}}.

* Then:
** select its green origin position {{l|Handle|handle}} by clicking on it in the canvas window
** select the Rotate Layer by holding {{Shortcut|Ctrl}} and clicking it in the Layers Panel
** select the blue rotation handle by holding {{Shortcut|Ctrl}} and clicking on it in the canvas window

At this point, there are 2 Layers selected and one handle from each of those 2 Layers selected.

* Now, select also the curved Spline Layer (it should be the last Layer in the Layer Panel's list) by holding {{Shortcut|Ctrl}} and clicking on it.

* Right-click on the dotted line that indicates the position of the curved Spline, not on any handle, but on the dotted line between handles.

* From the context menu that pops up, select {{Literal|Link to Spline}}:
[[Image:Spline-Link-to-0.63.06.png|none|frame|See also {{l|Command:Link_to_Spline}} ]]

The arrow Group should move so that its green position handle is on the Spline, and it should rotate so that the arrow points along the spline at that point.

* Select just the Group Layer, and drag its green handle around. The handle is now constrained to the Spline and dragging it will also affect the rotation of the arrow.

We can now animate the arrow.

* Turn on {{l|Animate_Editing_Mode}} by clicking the icon in the bottom right of the canvas window:
** at time '''0f''', drag the Group Layer's green position handle to one end of the Spline
** at time '''5s''', drag the same position handle to the other end of the Spline

Try {{c|File|Preview|}} to watch the animation.

== Results ==

This is the animation I ended up with:
[[File:Arrow-follows-bline.gif|center|alt Following a Spline example]]

Synfig project: {{l|Media:Arrow-follows-bline.sifz‎|Arrow-follows-bline.sifz‎}}

== Controlling the linear velocity ==

By default, the arrow travels the whole spline with a constant velocity, independently of the Spline structure.

If you select the Group Layer and look at the Parameters Panel, you'll see that its Origin parameter is {{L|convert|converted}} to {{Literal|Spline Vertex}} type. This is done automatically when {{Literal|Link to Spline}} is executed.

You can disable the "Homogenous" subparameter and then the speed of the arrow will depend on the Spline structure, it will take the same time to move along each segment of the Spline. So if there's a long straight segment then a bendy complex part, the arrow will move much faster along the straight segments (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the Spline) is not constant.

For illustration of the "Homogenous" effect see [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].

== See also ==
* Link to Spline command: {{l|Command:Link_to_Spline}}
* A [https://youtu.be/d1hPxgq2qeU video tutorial] showing the steps of this page.

Dev:Coding Conventions

2020-03-16T11:20:55Z

FirasH: Fix typo

{{Title|Coding Conventions}}
==Introduction==
Here are described the rules or conventions to make the Synfig code better from the point of view of style. The goal is to improve readability and make easier the understanding of the code in any editor and for new potential coders.

The coding rules established by [http://google-styleguide.googlecode.com/svn/trunk/cppguide.xml this link] are good references to follow in case of doubt.

Those rulers are not absolutely mandatory but the Synfig Team reserves the right of reject patches that doesn't follow some minimums.

== Templates ==
In each section (etl, synfig-core, synfig-studio) there is a template file. Use it to create a new file. We use .cpp for implementation and .h for header files.
We usually keep the copyrights of Robert and Adrian when the new file is one version of a similar existing one and should add the copyright of the contributor.

== Names ==

* File names: Filenames should be all lowercase and can include underscores (_). Some further rules may be defined for specific file types (icons, helper files, etc.).
* Type names: Type names start with a capital letter and have a capital letter for each new word, with no underscores.
* Variable names: Variable names are all lowercase, with underscores between words. Class member variables have trailing underscores.
* Function names: --define me--
* Enumerators names: Use capital letters and always use a prefix to identify them all.

== Comments and Documentation ==

* You can use either the // or the /* */ syntax; however, // is much more common. Be consistent with how you comment and what style you use where.
* Please try to document in this order: header file (.h) top description, class descriptions, member descriptions, procedures description. If something else is needed to document, then do it in the implementation file (.cpp)
* When possible document ''before'' the line involved. Documenting in the same line is not recommended.

== Formatting ==

* Use tabs or spaces on the indentation but once selected keep it consistent in all the document. Use only spaces on alignment.
* Try to avoid longer lines than 80 characters. If needed break the line using back slash character (\)
* Function implementation:
** Place the returned value in the previous line.
** Place the two curly brackets in the first column and the implementation one indentation right.
* Conditionals, loops, and any thing that needs two curly brackets: Place the curly brackets in the same column and the inside code one indentation right.

Dev:Contribute to Code

2020-02-16T13:15:43Z

FirasH: Cleaning

{{Title|Contribute to Code}}
{{Category|Code}}

== Introduction ==

You should know from the {{l|History|history}}, that this program was initially written by an animation company, {{l|History|Voria Studios}}. Since the code of Synfig was released under {{l|License|GPL licence}} and turned into an open source project, there were made some modifications to the code, which allows you to remove bugs and to add new functionalities.

The only documentation you can get, is the source-code itself and the automatically generated [http://download.tuxfamily.org/synfig/api/index.html API docs] by [http://www.doxygen.org doxygen].
This page tries to collect all the knowledge acquired by the current developers and to create typical guides for common tasks which would allow you to add new features and make the program grow.

Check Genete [https://drive.google.com/folderview?id=0Bx8g_H3f7qpZZDExNjU0NmEtZWI2Mi00M2UzLWI2OWQtNDUyYmRhOGRiN2Qx&usp=sharing "free synfig stuff"] a mine of things made during his coding period (and not wikiify some???)

Feel free to add here all the information you can get from the experience of reading and modifying the source code or simply add your request to get more details from coders more familiar with the source. Hopefully they will be able to tell you, how it works and where to dive in.

== Easy tasks ==
Contribute to a kind of big project like Synfig could look like a migraine at first appearance :

* Check out the bug tracker to [http://www.synfig.org/issues/thebuggenie/synfig/issues/find/saved_search/1/search/1 find any easy labeled task].
* Give a review the [https://github.com/synfig/synfig/search?l=cpp&q=%2F%2FTODO&utf8=%E2%9C%93 TODOs things in the code], sometime it's related to easy tasks (like factorisation of hardcoded values).

== Common tasks ==

Please add here links to wiki pages where it is explained how to do common tasks to contribut to code. Don't paste here things you want to know or need help. Use the other section for that.

* {{l|Dev:Adding a Layer|Adding Layers to Synfig}}: this guide aids you to understand, how the layers work and how to add a new layer type.
* {{l|Dev:Adding a Panel - Part I| Adding Panels to Synfig Studio}}: This guide explains, how to add a new panel and the objects on it.

== Translation mechanism ==
Synfig and Synfig Studio use [https://en.wikipedia.org/wiki/Gettext Gettext] internationalization and localization (i18n) system.

Each files located into synfig-core/po/POTFILES.in and synfig-studio/po/POTFILES.in respectively for Synfig and Synfig Studio will take advantage of this mechanism.

Note: The resources are translated [https://www.transifex.com/morevnaproject/synfig/ online].

You can find more information into the {{l|Dev:Translation|Translation}} page

== Things you want to know about the code ==

Please add here a brief description of the things you want to know about the code and how to accomplish some task. Someone else will surely know it, and can help you to start developing on synfig.

* Q: Is there anywhere any kind of overview? Any sort of brief description of what each program does/is? Is synfigstudio the GUI for synfig? What's the ETL?
: A: There is a [http://download.tuxfamily.org/synfig/api/index.html Source code API documentation]. The only documentation comes from the comments of the code. Synfigstudio is the GUI to edit the synfig format files. Synfig is the command line to render the files. Both use the libsynfig library provided by the synfig-core code. So Synfigstudio is more than a simple wrapper for synfig. ETL is the "Extended Template Library". It doesn't produce any binary file, just provide templates to be used by the rest of code. {{l|User:Genete|Genete}} 10:10, 8 July 2008 (EDT)
* Q: Is it a sane project to port Synfig ui to Qt?
: A: I don't know. It depends on the knowledge of QT you have and if it has the same interface functionality.{{l|User:Genete|Genete}} 10:10, 8 July 2008 (EDT)

==Documenting the code ==

It would be a good thing, if all the code documentation and what is being discovered were confirmed and inserted directly in the source code itself. This would allow [http://www.doxygen.org doxygen] to generate the [http://download.tuxfamily.org/synfig/api/index.html API docs] easily.

Please follow these [http://www.stack.nl/~dimitri/doxygen/docblocks.html doxygen rules] to add documentation to the source code.

== Getting the source ==

Check out the {{l|Dev:Source code|source code}} page.

Template:BrushToolOptions

2020-02-14T13:25:40Z

FirasH: Cleaning

[[File:Brush Tool Options.png|frame]]

* Eraser check box. When checked, the brush acts as a rubber.
* Display the set of configured brushes (MyPaint brushes format). By default, Synfig is installed with a selected set of brushes from "Concept Design (C_D)" pack by [http://www.ramonmiranda.com/2011/09/mypaint-concept-design-set-es.html Ramon Miranda]. From the {{l|Preferences_Dialog#System}}, you can configure the {{Literal|Brush Presets Path}} to use other brushes package (for example the ones listed by [https://github.com/mypaint/mypaint/wiki/Brush-Packages MyPaint])

The {{Literal|Brush Tool}} uses the color of the {{l|New_Layer_Defaults#Brush_Colors|Outline Color}} and the {{l|New_Layer_Defaults#Brush_Size|Brush Size}} set in the {{l|Toolbox|Toolbox}} to paint.

Brush Tool

2020-02-14T13:20:51Z

FirasH: Cleaning

{{Title|Brush Tool}}
{{Category|Tools}}
{{NewTerminology}}

{{Note|This is an experimental feature|Some work still need to be done around this corner of synfig. You can have a look to the {{l|Dev:Roadmap/Frame-by-frame_animation_%28bitmap%29|roadmap}} for more informations.}}
{{l|Image:Tool_brush_icon.png|64px}} '''ALT-?'''

==Introduction==

The {{Literal|Brush Tool}} allows you to draw freehand over the top of a {{l|Import_Image_Layer|raster image}} using the [http://mypaint.intilinux.com/ MyPaint] brushes. Combined with {{l|Switch Group Layer}} you can create frame by frame animations.

* It is possible to paint on the {{l|Import_Image_Layer|Image Layer}}
* Basic pressure sensitivity is supported.
* Image size is automatically expanded when you paint outside of image boundaries.
* An {{l|Import_Image_Layer|Image Layer}} is automatically created if the current layer isn't an {{l|Import_Image_Layer|Image Layer}}.

==Options==

{{BrushToolOptions}}

== Other sources of information==

Here you can find a video about brush usage and frame by frame animation

[https://www.youtube.com/watch?v=Z5Bj2BzG36U Development: Frame-by-frame animation (Part 4)]

Waypoint

2020-02-09T13:04:33Z

FirasH: Remove reference to not-found link

{{Title|Waypoint}}
{{Category|Glossary}}
{{NewTerminology}}


== Introduction ==

{{Literal|Waypoints}} are the graphical symbols that show up on the {{l|Timetrack}}
panel. Each time the value of a parameter is edited in
{{l|Animate_Editing_Mode|animate editing mode}}, a Waypoint will be
created. For example, when you adjust a {{Literal|Tangent}} {{l|Handle}} of a vertex
in a {{l|Spline}}, a {{Literal|Waypoint}} will be created to note the change. However,
you didn't really adjust the tangent, you adjusted the two parameters
which define the tangent: its angle ({{Literal|Theta}}), and its length
({{Literal|Radius}}). Opening up the tangent's nodes in the {{l|Parameters Panel}} will
show that {{Literal|Waypoints}} have been created against each of these 2
parameters.

As a result of adjusting a single {{Literal|Tangent}} Handle, {{Literal|Waypoint}} have been created as follows:
* the length of the tangent changed ({{Literal|Radius}})
* the angle of the tangent changed ({{Literal|Theta}})
* the tangent changed ({{Literal|Tangent 1}})
* the vertex changed ({{Literal|Vertex 001}})
* the vertices changes ({{Literal|Vertices}})
Only the first 2 of these are 'leaf waypoints' - the rest are parents (and grandparents, etc) of these 2 waypoints.

<strike>As things currently stand, it is only possible to delete one leaf
waypoint at a time. If, for example, you want to delete the change
made to the {{Literal|Tangent}} Handle above, you'll need to open up the tangent and
delete both the {{Literal|Theta}} and {{Literal|Radius}} Waypoints. The ability to delete
whole trees of waypoints with a single click would be useful, as would
the ability to select multiple waypoints at once, and operate upon
them en masse.</strike>

== Selecting Waypoints ==

{{WaypointMouseSelect}}

== Editing Waypoints ==

=== Move it ===
Waypoints can be dragged left or right with the left mouse button to
change the time at which they act upon their parameter(s). If you
drag a parent's Waypoint, all its child Waypoints will move with it.

=== Move some ===

You can select multiple Waypoints using {{Shortcut|Ctrl|Click}}, and then they can be dragged left or right has {{l|Waypoint#Move_it|moving single waypoint}}.

=== More actions ===

Right-clicking on Waypoint shows a context menu, containing:
* {{Literal|Jump to}}: Set the current time to be the time of the waypoint.
* {{Literal|Duplicate}}: <strike>Only appears for single-leaf Waypoints.</strike> Creates a copy of the current Waypoint at the currently selected time.
* {{Literal|Remove}}: Only appears for single-leaf waypoints. Deletes the Waypoint.
* {{Literal|Remove '''n''' Waypoints}}: Only appears for multi-leaf waypoints. Deletes the '''n''' Waypoints.
* {{Literal|Edit}}: <strike>Only appears for single-leaf Waypoints. </strike>
TODO: writeme (brings up a dialog allowing various parameters to be set).
* {{Literal|Both}}.: Allows you to change the {{Literal|In}} and {{Literal|Out}} {{l|Waypoint#Interpolation|interpolation}} setting for the Waypoint and all its children.
* {{Literal|In}}.: Allows you to change the {{Literal|In}} interpolation setting for the Waypoint and all its children.
* {{Literal|Out}}.: Allows you to change the {{Literal|Out}} interpolation setting for the Waypoint and all its children.

If the Waypoint is {{l|Linking|Linked}} other menu entries related to the link will appear up to those one.
TODO: writeme (describe added menu entries in case of linked waypoint)

== Interpolation ==
=== Default Interpolation===

The {{l|New_Layer_Defaults#Default_Interpolation|default type of interpolation}} for new waypoints is defined by a dropdown list at bottom of the {{l|Category:Canvas_Window}}.

It is possible to fix interpolation by parameter. Right-click any {{l|Category:Parameters|parameter}} and choose its default interpolation from a submenu. The defined interpolation is indicated in the {{l|Parameters Panel}} with corresponding icon near the parameter value.

===Interpolation In & Out===

Each Waypoint has an {{Literal|In}} and an {{Literal|Out}} interpolation setting, which
determines the manner in which its parameter changes - whether it
changes linearly over time, or follows a curve.

The {{Literal|In}} interpolation defines how the parameter changes in the
moments before the Waypoint is reached, and {{Literal|Out}} defines how it
changes in the moments after the Waypoint. Available interpolation
types are as follows:

* {{l|TCB|TCB Smooth}}: If you imagine a graph of the parameter's value against time, using the TCB interpolation type will fit a smooth curve between adjacent waypoints, much like the {{l|Spline Tool}} fits smooth curves between adjacent spline vertices.
* {{l|Clamped interpolation|Clamped}}: Acts like TCB interpolation, but never "overshoots" (or "undershoots") the values you set in the {{l|Parameters Panel}}.
* {{l|Constant|Constant}}: Stops the animation.
* {{l|Ease In/Out|Ease In/Out}}: The graph is horizontal as it leaves the Waypoint.
* {{l|Linear|Linear}}: The graph of parameter value against time is a straight line.
* Undefined: This is only shown for multi-leaf Waypoints, where there is more than one different interpolation type amongst its leaf Waypoints.

=== Graphical Representation ===

The color and shape of the Waypoint as displayed in the {{l|Timetrack}}
indicates its interpolation type:

<gallery caption="Waypoints" widths="64px" heights="64px" perrow="6">
File:Waypoint-clamped.png|Clamped
File:Waypoint-tcb.png|TCB Smooth
File:Waypoint-constant.png|Constant
File:Waypoint-ease.png|Ease In/Out
File:Waypoint-linear.png|Linear
File:Waypoint-undefined.png|Undefined
</gallery>

Each Waypoint is split into two halves. The left half indicates its
{{Literal|In}} interpolation and the right half indicates its {{Literal|Out}}
interpolation, so many different combinations are possible:

{{l|Image:Waypoint-combos.png}}

In the chart above the {{Literal|In}} interpolation is shown on the left, and the {{Literal|Out}} interpolation is shown across the top.

Note: the .sif file used to generate these screenshots is
available. {{L|File:Waypoint-examples.sif}}

Here is an {{L|File:Interpolation.sif|experimental .sif file}} showing 25 different blobs, and how they move
with different combinations of Waypoints. It renders to a
[http://dooglus.rincevent.net/synfig/interpolation.avi 634K .avi
file], and is available in lower resolution
[http://www.youtube.com/watch?v=SI1VaH2psts on YouTube]. Notice how:
* the blobs with any red ({{l|Constant|Constant}}) on them don't move at all
* the yellow ({{l|Linear|Linear}}) sides of blobs 'bounce' off the walls
* the cyan ({{l|Ease In/Out|Ease}}) sides slow gracefully to a halt at the walls
* the green ({{l|TCB|TCB Smooth}}) sides bounce at the top (the animation is a single down-and-up animation, looped, so there's no 'context' at the top for the TCB to fit the curve to) but act smoothly at the bottom

The 'undefined' (grey) symbol is used when the row in the {{l|Timetrack_Panel}} represents multiple Waypoints. For example, the 'vertices'
row represents all the vertices making up a Spline. Each of those
vertices can have multiple Waypoints, each with different
interpolations. If all the interpolations are the same, that
interpolation's symbol will be used. Otherwise, the grey 'undefined'
symbol is used.

Look at the Waypoints below. They are from the Timetrack for the {{Literal|Vertices}} of an {{l|Outline Layer}}.

{{l|Image:Waypoints-undefined.png}}

You'll see the left side of each of the Waypoints is colored. This means the {{Literal|In}} interpolation for each vertex is the same. However, the right side is grey, indicating that the {{Literal|Out}} interpolation for each vertex differs.

''TODO: rewrite the above so it doesn't hurt the brain so much.''

== Example combining Waypoints ==
=== Ease in - Normal - Ease out ===
{{l|Image:Waypoint - ease in-out.png}}

Dev:Translation

2020-02-09T10:49:06Z

FirasH: Cleaning

{{Title|Translating}}

= Translating Synfig & Synfig Studio =

We are using the standard {{Literal|gettext}} system and .po files. The [http://www.gnu.org/software/gettext/manual/gettext.html gettext manual] has lots of good advice for translators and programmers alike.

If you add a .cpp or .h file containing new translatable strings (standard gettext), you must add those files in the associated potfiles.in that you can find in the {{Literal|synfig-core}} or {{Literal|synfig-studio}} po directory.

Since the migration to {{Literal|intltool}} the build system does not automatically generate the PO Templates.
In order to generate and update the translations, from both {{Literal|synfig-core}} and {{Literal|synfig-studio}} directories use the command {{Literal|cd po && make update-po}}.

= Online translation tool =

Synfig can be translated online using an internet browser: https://www.transifex.com/projects/p/synfig

The translation .pot files are automatically pushed from a server to transifex. The .pot files are not pushed immediately, but at a certain time of the day.

== New Translations ==
To start a new translation, use the online translation tool: https://www.transifex.com/projects/p/synfig

If you don't have a transifex account, sign up as a contributor, and join the synfig project. Now, you can ask for a new language.

== Updating Translations ==
To update the translation, use the online translation tool : https://www.transifex.com/projects/p/synfig

If you don't have a transifex account, sign up as a contributor, and join synfig project. Now, you can ask to join a language team.

== More informations about Translations ==
If you need more informations about the synfig translation workflow, you can join the synfig team using the [http://synfig.org/forums forums], or by the [http://sourceforge.net/p/synfig/mailman/synfig-devl/ synfig-devl mailing list]

Text Tool

2020-02-06T21:31:29Z

FirasH: Fix typo

{{Title|Text Tool}}
{{Category|Tools}}
{{NewTerminology}}


{{l|Image:Tool_text_icon.png|64px}} '''ALT-X'''

Select the {{Literal|Text Tool}} icon from the {{l|Toolbox}}, then click in the {{l|Canvas|canvas window}} where the {{l|Text Layer}} should be created.

A dialog box will appear, allowing you to enter the text you want in the created layer. Enter the text, click {{Literal|OK}} button, and a new Text Layer will be created. In the dialog box, if {{Literal|Multiline Editor}} is checked, {{Shortcut|Enter}} will add a new line, you can hit {{Shortcut|Ctrl|Tab}} to give focus to {{Literal|OK}} button to validate.

[[File:Tool Text-DialogBox 0.63.06.png|frame|center]]
==Options==

{{TextToolOptions}}

Text Layer

2020-02-06T21:23:49Z

FirasH: /* How to use Text Layer */ Fix typo

{{Title|Text Layer}}
{{Category|Layers}}
{{Category|Other}}
{{NewTerminology}}


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

== About Text Layers==
[todo]

A {{Literal|Text Layer}} can be created with the {{l|Text Tool}} or by drag and drop.

==Parameters of Text Layers==

The parameters of the text layers are:

{|border="0" align="none" style="border-collapse" cellpadding="3" cellspacing="0"
|-style="background:#silver"
|'''Name'''||'''Value'''||'''Type'''
|--style="background:#"
||{{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

|-style="background:#"
||{{l|Image:type_integer_icon.png|16px}} {{l|Blend Method|Blend Method}}
||Composite
||integer

|-style="background:#eeeeee"
||{{l|Image:type_string_icon.png|16px}} Text
||Text Layer
||string

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

|-style="background:#eeeeee"
||{{l|Image:Type_integer_icon.png|16px}} Font Family
||Sans Serif
||string

|-style="background:#"
||{{l|Image:Type_integer_icon.png|16px}} Style
||Nomral
||integer

|-style="background:#eeeeee"
||{{l|Image:Type_integer_icon.png|16px}} Weight
||Normal
||integer

|-style="background:#"
||{{l|Image:Type_real_icon.png|16px}} Horizontal Spacing
||1.000000
||real

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

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

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

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

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

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

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

|}

==How to use Text Layer==
Quick trick that allows to use custom fonts in Synfig.

Here's what you need:

* Put your font ([https://en.wikipedia.org/wiki/TrueType ttf]) file in the same dir as your Synfig (sif or sifz) file.
* Create {{l|Text Layer}} and in the {{literal|Font Family}} parameter put full filename of font file (i.e. "LobsterTwo-Regular.ttf", without quotes).

That's it!

{{l|File:Text layer-1.png}}

After examining font files, you might notice that different variants of font style are usually residing in separate files (i.e. "LobsterTwo-Italic.ttf", "LobsterTwo-Bold.ttf", "LobsterTwo-BoldItalic.ttf", etc). So you can use different font variants in the same way just by referencing the appropriate font file.

If your font file is placed in different location, then you can specify absolute or relative path to it (i.e. "../fonts/LobsterTwo-Bold.ttf").

{{l|File:Text layer-2.png}}

Advanced Outline Layer

2020-02-06T10:31:47Z

FirasH: Cleaning

{{Title|Advanced Outline Layer}}
{{Category|Layers}}
{{Category|Geometry}}
{{Category|Primitive Layers}}
{{NewTerminology}}
{{TOCright}}

Under construction! See {{l|Talk:Advanced_Outline_Layer|Advanced Outline Layer Talk}} page
{{Layer
| image=[[Image:Layer_geometry_advanced_outline_icon.png|64px]]
}}
== About Advanced Outline Layers ==

To create an Advanced Outline Layer use the Spline Tool and check {{literal|Create Advanced Outline}} in the {{l|Tool Options Panel}}. Once you finish the definition of the geometry of your outline and after pressing the {{literal|Make Spline}} button (or selecting another tool or state) you create the Advanced Outline Layer with the {{l|New_Layer_Defaults#Brush_Colors|current}} {{literal|Outline Color}}.

Depending on the options you choose in the {{l|Tool Options Panel}} other {{l|Category:Tools|Tools}} like {{l|Star Tool}} or {{l|Circle Tool}} can also create Advanced Outline Layers.

Using the {{l|Canvas Layer Menu|Layer Menu}} {{Literal|Make Advanced Outline}}, {{Literal|Make Outline}} or {{Literal|Make Region}} commands you can also create those layers.

=== Differences with Outline Layer: Outline width ===

The '''width''' [[Handle]] defines the outline width at a particular place.

In the regular [[Outline Layer]], each width Handle is connected to the vertex that defines the outline shape at that place. That means that the user needs to insert a new vertex on the [[Spline]] every time he wants to change the outline width in some place. This behaviour can cause problems when the shape of the outline is very simple but the width varies a lot.

Practice shows that most of the time the user wants to specify the width independently from the placement of [[Spline]] vertices. Such functionality is available in the Advanced Outline layer, which Handles its width in a different way: the width Handles are freely moved around the Spline and define its width at any point.

== Features ==

Advanced Outline introduces some features to the regular outline, as shown in this [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo] video. They are listed with examples below:

<gallery widths="490px" heights="300px" perrow="2">
File:Variable-width-without-blinepoints.png | No need to place a vertex to change the width
File:Lots-of-blinepoints-width-just-two width-controls.png | The width is controlled just by two points, while the Spline is constructed of many vertices
File:Different-types of tips.png | Different types of tips: Rounded, Squared, Peak, Flat.
File: Segments of outlines.png | Segmented outline
File:Different cusps types.png | Three global cusps types: Sharp, Rounded, Bevel.
File:Smoothness control.png | Control of smoothness from linear (0.0) to smooth (1.0)
</gallery>

==Parameters of Advanced Outline Layers==

The parameters of the Advanced Outline Layers are:

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

|-style="background:#eeeeee"
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Amount]]
||1.000000
||real

|-
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Blend Method]]
||Composite
||integer

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

|-style="background:#"
||[[Image:Type_vector_icon.png|16px]] [[Origin Parameter|Origin]]
||0.000000u,0.000000u
||vector

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

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

|-style="background:#eeeeee"
||[[Image:Type_real_icon.png|16px]] [[Feather Parameter|Feather]]
||0.000000pt
||real

|-
||[[Image:Type_integer_icon.png|16px]] [[Feather_Parameter#Type_of_Feather|Type of Feather]]
||Fast Gaussian Blur
||integer

|-style="background:#eeeeee"
||[[Image:Type_integer_icon.png|16px]] [[Winding Style Parameter|Winding Style]]
||Non Zero
||integer

|-
||[[Image:Type_list_icon.png|16px]] Vertices
||List
||list (Spline)

|-style="background:#eeeeee"
||[[Image:Type_real_icon.png|16px]] [[Outline_Layer#Outline_width|Outline Width]]
||2.000000pt
||real

|-
||[[Image:Type_real_icon.png|16px]] [[Outline_Layer#Expand|Expand]]
||0.000000pt
||real

|-style="background:#eeeeee"
||[[Image:Type_integer_icon.png|16px]] [[Advanced_Outline_Layer#Tip_type_at_start_.2F_end|Tip Type at Start]]
||Rounded Stop
||integer

|-
||[[Image:Type_integer_icon.png|16px]] [[Advanced_Outline_Layer#Tip_type_at_start_.2F_end|Tip Type at End]]
||Rounded Stop
||integer

|-style="background:#eeeeee"
||[[Image:Type_integer_icon.png|16px]] [[Advanced_Outline_Layer#Cusps_Type|Cusps Type]]
||Sharp
||integer

|-
||[[Image:Type_real_icon.png|16px]] [[Advanced_Outline_Layer#Smoothness|Smoothness]]
||0.500000
||real

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

|-
||[[Image:Type_list_icon.png|16px]] [[Advanced_Outline_Layer#Width_Point_List|Width Point List]]
||List
||list(WPList)

|-style="background:#eeeeee"
||[[Image:Type_bool_icon.png|16px]] [[Advanced_Outline_Layer#Fast|Fast]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-
||[[Image:Type_bool_icon.png|16px]] [[Advanced_Outline_Layer#Dashed_Outline|Dashed Outline]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-style="background:#eeeeee"
||[[Image:Type_list_icon.png|16px]] Dash Item List
||List
||list(WPList)

|-
||[[Image:Type_real_icon.png|16px]] Dash Items Offset
||0.000000u
||real

|}

==Specific parameters for Advanced Outline Layer==

This section lists only the parameters specific to the Advanced Outline Layer. For documentation about the other parameters, refer to [[Outline Layer]].

* Tip Type at Start
* Tip Type at End
* Cusps Type
* Smoothness
* Width Point List

=== Tip Type at Start / End ===

As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.

Those parameters don't have any effect if the Spline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the Spline is not rendered.

The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:

Parameters:
{| border="1"
|-
! Tip Type
! Example
|-
| Rounded
| [[File:Avanced-Outline-Layer-TipType-Rounded.png]]
|-
| Squared
| [[File:Avanced-Outline-Layer-TipType-Squared.png]]
|-
| Peak
| [[File:Avanced-Outline-Layer-TipType-Peak.png]]
|-
| Flat
| [[File:Avanced-Outline-Layer-TipType-Flat.png]]
|}

=== Cusp Type ===

There are three types of cusps in the Advanced Outline:

Parameters:
{| border="1"
|-
! Cusp Type
! Example
|-
| Sharp
|[[File:Avanced-Outline-Layer-Cups-Sharp.png]]
|-
| Rounded
| [[File:Avanced-Outline-Layer-Cups-Rounded.png]]
|-
| Bevel
| [[File:Avanced-Outline-Layer-Cups-Bevel.png]]
|}

The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.

=== Smoothness ===

The Smoothness controls how the width is calculated between widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is '''zero''' interpolation is lineal, when smoothness is '''1.0''' interpolation is given by a 5th degree smooth Spline.

=== Homogeneous ===

Enabling {{literal|Homogeneous}} changes the way the position of the {{l|#widthpoint|width points}} change according modification of the outline.
* When false, the "Position" parameter for a width point is equally distributed '''among the vertices'''. For example, in a spline with five vertices, "Position" values of 0, 0.25, 0.5, 0.75, and 1 correspond to the first, second, third, fourth, and fifth vertex, respectively, regardless of how close or far apart those vertices are. Between vertices, the "Position" parameter is based on spline length.
* When true, the "Position" parameter increases smoothly from the start to the end of the spline '''based on the length of the entire spline'''. This means a "Position" of 0.5 will always correspond to the halfway point of the spline, not to a particular vertex.

=== Width Point List ===
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:

* '''Position''' (Real number): represents the position of the width point along the Spline. 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 Spline (first Spline point on the Spline list) and 1.0 to the last Spline point. For looped Splines 0.0 and 1.0 are equal. The position is represented by the light purple Handle that always lies on the Spline. The point on the spline corresponding to a particular "Position" value is affected by the "Homogeneous" parameter, explained above.
* '''Width''' (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E
* '''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/following width point, the width is calculated by interpolation based on smoothness value.
** '''Rounded''': There is a rounded tip that points to the width point before or after. If the previous/following width point is {{Literal|Interpolate}} on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than {{Literal|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.

The Width Point list has one internal non-animatable parameter called {{Literal|loop}}. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outside the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.

=== Fast ===
...TODO WriteME.about...

=== Dashed Outline ===
...TODO WriteME.about...

== Working with the Avdanced Outline ==

=== Creation of the Advanced Outline ===

You can create Advanced Outlines by various ways:
* With the {{l|Draw Tool}} (check ''Create Advanced Outline'' in the tool options).
* With the {{l|Spline Tool}} (check ''Create Advanced Outline'' in the tool options).
* Using a {{l|Layers#Geometry|Geometry Layer}} (check ''Create Advanced Outline'' in the tool options).
* With the menu {{c|<Insert>|<Layer>|Geometry|Advanced Outline}}.

=== Change the width of the Width Points ===

Initially the width Handles are hidden. You can make them visible by pressing ({{Shortcut|alt|5}}) or clicking on the width toggle button. It is possible to change the width using the {{l|Width Tool}} using the same procedure as for regular outlines. If you want more control over the width you can modify the width Handles with the {{l|Transform Tool}} ({{Shortcut|alt|A}}). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.

=== Change the position of the Width Points ===

When you make the width Handles of the width points visible/invisible, the position Handles also become visible/invisible. This way, the user has a single way to hide/show the position and width Handles.

{{Note|Change the position of the Width Points|This may change in the future}}

The position Handles of the width points can be modified using the {{l|Transform Tool}} ({{Shortcut|alt|A}}) and clicking and dragging the position Handle. You will notice that Handles are tied to the Spline so once clicked and dragged they can be placed at any way on the Spline. Notice that if you have a width point position Handle at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.

=== Adding or removing width points ===
To add a new width point you have to right click on the width point position Handle (purple Handle) to get the context menu. Then select {{literal|Add Item (smart)}} here to create more width points entries. The width points are created this way:

In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the Spline, the "previous" width point can be the start of the Spline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.

The newly added width point will have the interpolated width at the position where it is created.

=== Specific actions for Width Points ===

Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:

* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its components). But you can convert it to other formats. See Convert for details.
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any Handle to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.
* Export: See {{l|Export}}.
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].
* Rotate Order: Doesn't do anything.
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shortcuts to do the same as going directly to the sub-parameter and choosing the appropriate Tip Type. Maybe it should be renamed to "Set Tip Before/After".
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is acceded quickly from the same usual menu. Also when a width point position Handle and a width point width Handle are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position Handle has preference over the width Handle in case of coincidence. So access the width Handle it is needed to have a quick action to set it to its default value (1.0).

Lock Keyframes

2020-02-05T22:12:44Z

FirasH: Rephrase intro

{{Title|Editing Lock Keyframes}}
{{Category|Glossary}}
{{Category|Canvas Window}}
{{NewTerminology}}


The {{Literal|Lock Keyframes}} setting is controlled by the buttons on the right side of the {{l|Timetrack}}, at the bottom of the {{l|Canvas}} window.
Those buttons have as icon a padlock, the left one with an arrow pointing left and the right one an arrow pointing right.
It will be visible only if your canvas has a non-zero end time and active only if you're not currently using a tool which disables the timetrack, such as the {{l|Spline Tool}} or the {{l|Draw Tool}}.

[[File:LockKeyframe Buttons-0.63.06.png|300px|none]]

Clicking on the two icons through its 4 possible combinations:
{| border = "1"
| All Keyframes Locked (both padlocks are locked) || [[File:Keyframe lock past on icon.png|32px]] [[File:Keyframe lock future on icon.png|32px]]
|-
| Past Keyframes Locked (left padlock is locked) || [[File:Keyframe lock past on icon.png|32px]] [[File:Keyframe lock future off icon.png|32px]]
|-
| Future Keyframes Locked (right padlock is locked) || [[File:Keyframe lock past off icon.png|32px]] [[File:Keyframe lock future on icon.png|32px]]
|-
| No Keyframes Locked (neither padlocks are locked) || [[File:Keyframe lock past off icon.png|32px]] [[File:Keyframe lock future off icon.png|32px]]
|}

The setting has no effect unless the canvas is in {{l|Animate Editing Mode|animate editing mode}}. When the canvas is in animate editing mode, however, and a parameter is changed, {{l|Waypoints|waypoints}} will be created in whichever of the immediately preceding and immediately following {{l|Keyframe|keyframes}} are indicated by its value.

For example, if you are currently editing at 2s, and keyframes exist at 0s, 1s, 3s and 4s, then:

*If 'lock keyframes' is set to 'All Keyframes Locked', waypoints will be created at 1s and 3s.

[[File:Waypoints-Lock-Past-Future 0.63.06.png|frame|none]]
*If 'lock keyframes' is set to 'Past Keyframes Locked', a waypoint will be created at 1s.

[[File:Waypoints-Lock-Past 0.63.06.png|frame|none]]
*If 'lock keyframes' is set to 'Future Keyframes Locked', a waypoint will be created at 3s.

[[File:Waypoints-Lock-Future 0.63.06.png|frame|none]]
*If 'lock keyframes' is set to 'No Keyframes Locked', no extra waypoints will be created.

[[File:Waypoints-Lock-None 0.63.06.png|frame|none]]

In all 4 cases, a waypoint will be created at the current time point, 2s.

Doc:Basic Bone Tutorial

2020-01-28T13:09:11Z

FirasH: /* Attaching the bones */ Added note for new users about linking bones to images

{{Title|Basic Bone Tutorial}}
{{Navigation|Category:Manual|Doc:Interface}}
{{Navigation|Category:Tutorials|Doc:Basic Bone Tutorial}}
{{TOCright}}
[[Category:Manual]]
[[Category:Tutorials]]
[[Category:Tutorials Basic]]


[[File:bone.gif|left|frame]]
 
= Introduction =
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).
[[File:bonestut01.png|left|frame|PICTURE 1: Three parts of the arm]] [[File:bonestut09.png|centre|frame|216x475px|PICTURE 2: The layers]]
 

== Prepare the joints ==
[[File:bonestut02.png|left|200x237px|frame|PICTURE 3: Joints]]
Before we start rigging the arm we have to prepare it to make sure that the joints properly rotate.

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.

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.

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.

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}}.)
 
[[File:bonestut07.png|left|frame|PICTURE 4: Joints align]] [[File:bonestut08.png|center|frame|PICTURE 5: Joints align]]
 

== Adding the bones ==
[[File:bonestut13.png|left|frame|250x400px|PICTURE 6: Adding bone]] 
Now it’s time to add a {{l|Skeleton Layer}} that will provide the bones we need to rig the arm.

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.
[[File:bonestut11.png|left|frame|200x200px|PICTURE 7: Adding skeleton layer]][[File:bonestut05.png|center|frame|300x300px|PICTURE 8: Green origin point hand]]
 

== Attaching the bones ==
[[File:bonestut12.png|left|frame|PICTURE 8: Attaching hand to second child bone.]]
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.

It is worth to note for new users that in case the bone is linked to an image, selecting all its handles and linking them to the bone could lead to an initially unpredictable behavior. If we need for example to apply only a rotation around the pivot point defined by the bone, it is necessary to select only the green handle that defines its position. Then use the blue handle of the bone to apply the rotation.

 

== Tip for making a crosshair==
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}}.
[[File:bonestut18.png|left|frame|PICTURE 9: Drawing a crosshair.]]
 

==Project file==
The sif file containing the parts of this tutorial can be found {{l|Media:rigarm.zip|here}}

= Explanation n°2 additional =
== To transform 2 sticks into 1 leg ==
'''The top stick is a "thigh", the bottom stick is a calf.'''

*0: 2 identical sticks + a crosshair.

*1: The 2 sticks touch edge to edge to form a crosshair.

*2: The 2 sticks without crosshair of flesh color.

*3: The 2 sticks with crosshair without color.

*4: This mark must be used.

*5: To cut the upper limb.

*6: Like here.

[[File:Crosshair-leg01.png|frame|none]]

*7: Then the limb must be merged (full).

*8: With the cut part.

*9: Result.

*10: Same for bottom limb.

[[File:Crosshair-leg02.png|frame|none]]

*13: The only part not to be merge is the one where the circle (blue) it is the crosshair that should not be touched.

*15: Then the rotation will be correct.

*16: To be able to do any rotation.

[[File:Crosshair-leg03.png|frame|none]]

*17: Limb of the top.

*18: Limb of the bottom.

*21: Limbs in movement (detached).

*22: Limbs in movement (attached).

*23: The leg finished with the crosshair.

[[File:Crosshair-leg04.png|frame|none]]

[[File:Crosshair-leg05-animation.gif|frame|none|Animated Leg.]]

== Important ==
'''The crosshair must stay with our 2 sticks, for the duration of the limb's creation.'''

== Project File ==
The zip file containing the parts of this tutorial can be found here: [[Media:Crosshair-leg.zip|Crosshair-leg.zip]]

== Next Steps ==

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.

{{Navigation|Category:Manual|Doc:Interface}}

Doc:Basic Bone Tutorial

2020-01-19T14:01:00Z

FirasH: /* Projet file */ Typo Projet -> Project

{{Title|Basic Bone Tutorial}}
{{Navigation|Category:Manual|Doc:Interface}}
{{Navigation|Category:Tutorials|Doc:Basic Bone Tutorial}}
{{TOCright}}
[[Category:Manual]]
[[Category:Tutorials]]
[[Category:Tutorials Basic]]


[[File:bone.gif|left|frame]]
 
= Introduction =
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).
[[File:bonestut01.png|left|frame|PICTURE 1: Three parts of the arm]] [[File:bonestut09.png|centre|frame|216x475px|PICTURE 2: The layers]]
 

== Prepare the joints ==
[[File:bonestut02.png|left|200x237px|frame|PICTURE 3: Joints]]
Before we start rigging the arm we have to prepare it to make sure that the joints properly rotate.

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.

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.

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.

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}}.)
 
[[File:bonestut07.png|left|frame|PICTURE 4: Joints align]] [[File:bonestut08.png|center|frame|PICTURE 5: Joints align]]
 

== Adding the bones ==
[[File:bonestut13.png|left|frame|250x400px|PICTURE 6: Adding bone]] 
Now it’s time to add a {{l|Skeleton Layer}} that will provide the bones we need to rig the arm.

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.
[[File:bonestut11.png|left|frame|200x200px|PICTURE 7: Adding skeleton layer]][[File:bonestut05.png|center|frame|300x300px|PICTURE 8: Green origin point hand]]
 

== Attaching the bones ==
[[File:bonestut12.png|left|frame|PICTURE 8: Attaching hand to second child bone.]]
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.

 

== Tip for making a crosshair==
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}}.
[[File:bonestut18.png|left|frame|PICTURE 9: Drawing a crosshair.]]
 

==Project file==
The sif file containing the parts of this tutorial can be found {{l|Media:rigarm.zip|here}}

= Explanation n°2 additional =
== To transform 2 sticks into 1 leg ==
'''The top stick is a "thigh", the bottom stick is a calf.'''

*0: 2 identical sticks + a crosshair.

*1: The 2 sticks touch edge to edge to form a crosshair.

*2: The 2 sticks without crosshair of flesh color.

*3: The 2 sticks with crosshair without color.

*4: This mark must be used.

*5: To cut the upper limb.

*6: Like here.

[[File:Crosshair-leg01.png|frame|none]]

*7: Then the limb must be merged (full).

*8: With the cut part.

*9: Result.

*10: Same for bottom limb.

[[File:Crosshair-leg02.png|frame|none]]

*13: The only part not to be merge is the one where the circle (blue) it is the crosshair that should not be touched.

*15: Then the rotation will be correct.

*16: To be able to do any rotation.

[[File:Crosshair-leg03.png|frame|none]]

*17: Limb of the top.

*18: Limb of the bottom.

*21: Limbs in movement (detached).

*22: Limbs in movement (attached).

*23: The leg finished with the crosshair.

[[File:Crosshair-leg04.png|frame|none]]

[[File:Crosshair-leg05-animation.gif|frame|none|Animated Leg.]]

== Important ==
'''The crosshair must stay with our 2 sticks, for the duration of the limb's creation.'''

== Project File ==
The zip file containing the parts of this tutorial can be found here: [[Media:Crosshair-leg.zip|Crosshair-leg.zip]]

== Next Steps ==

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.

{{Navigation|Category:Manual|Doc:Interface}}

Outline Layer

2020-01-07T01:01:12Z

FirasH: Cleaning

{{Title|Outline Layer}}
{{Category|Layers}}
{{Category|Geometry}}
{{Category|Primitive Layers}}
{{NewTerminology}}
{{TOCright}}


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

== About Outline Layers==

Outline Layers are used to hold strokes or edges of filled shapes. They give a cartoon look to an animation when added as the edge of the filled shapes. Also standalone Outlines (strokes) are used to define fold of 3D drawings and used together with shadows (created using gradients or feathering) are the basis of an artist's work.

To create an Outline Layer use the {{l|Spline Tool}} and check {{literal|Create Outline}} in the {{l|Tool Options Panel}}. Once you finish the definition of the geometry of your outline and after pressing the {{Literal|Make Spline}} button (or selecting another tool or state) you create the Outline Layer with the {{l|New_Layer_Defaults#Brush_Colors|current}} {{literal|Outline Color}}.

Depending on the options you choose in the {{l|Tool Options Panel}} other {{l|Category:Tools|Tools}} like {{l|Star Tool}} or {{l|Circle Tool}} can also create Outline Layers.

Using the {{l|Canvas Layer Menu|Layer Menu}} {{Literal|Make Advanced Outline}}, {{Literal|Make Outline}} or {{Literal|Make Region}} commands you can also create those layers.

==Parameters of Outline Layers==

The parameters of the Outline layers are:

{|border="0" 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}} {{l|Origin Parameter|Origin}}
||0.000000u,0.000000u
||vector

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

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

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

|-
||{{l|Image:Type_integer_icon.png|16px}} [[Feather Parameter#Type_of_Feather|Type of Feather]]
||Fast Gaussian Blur
||integer

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

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

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

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

|-style="background:#eeeeee"
||{{l|Image:Type_bool_icon.png|16px}} [[Outline_Layer#Sharp_Cusps|Sharp Cusps]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-
||{{l|Image:Type_bool_icon.png|16px}} [[Outline_Layer#Rounded_Begin|Rounded Begin]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-style="background:#eeeeee"
||{{l|Image:Type_bool_icon.png|16px}} [[Outline_Layer#Rounded_End|Rounded End]]
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-
||{{l|Image:Type_real_icon.png|16px}} [[Outline_Layer#Loopyness|Loopyness]]
||1.000000
||real

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

|}

== Specific parameters for Outline Layers ==

The first 11 parameters of the Outline are common parameters that are shared for several {{l|Category:Layers|types of Layers}}. Click on the links to see their definitions. Only the particular parameters for the Outline Layer are described here.

This is a sample screenshot of an Outline Layer in action:

[[File:Outline Sample 0.63.06.png|frame|none]]

=== Outline width ===

The Outline width parameter is a float value in pixels that represents the basic value of the width for all the points of the curve at the same time. It works together with the width parameter of the vertices' child values. So setting the {{Literal|Outline Width}} to 1.0px then the resulting value for the rendered width in that vertex comes from this formula: W = OLW * VW + 2E.

Where:
* W = resulting width of the outline at that vertex.
* OLW = overall parameter for the width of all the vertices (that is the Outline Width parameter).
* VW = specific vertex width value.
* E = value of the Expand parameter.

The width {{l|Handle|handle}} would show the radius value for that vertex (W/2).

The width that ends up being used for each vertex is ((VertexWidth * OutLineWidth) + Expand*2):
{|
| [[File:Outline-Layer default 0.63.06.png|450px]]
| [[File:Outline-Layer width 0.63.06.png|450px]]
|-
| Starting image
| After doubling the value of {{Literal|Outline Width}}
|}

It's possible to specify negative values for the width values, which kind of turns the vertex inside out. Here's an example where the left vertex has a negative width and the right has a positive width. Note how the edges of the spline between the vertices cross each other in the middle:

{|
| {{l|Image:Outline-negative-width.png}}
| {{l|Image:Outline-negative-width-selected.png}}
|}

=== Expand ===

The {{Literal|Expand}} parameter is similar to the {{Literal|Outline Width}} parameter, but rather than being multiplied by each vertex's width, it is added to the radius of each vertex. In other words (2*Expand) is added to the diameter of each vertex.

The width that ends up being used for each vertex is ((VertexWidth * OutLineWidth) + Expand*2):
{|
| [[File:Outline-Layer default 0.63.06.png|450px]]
| [[File:Outline-Layer expand 0.63.06.png|450px]]
|-
| Zero {{Literal|Expand}}
| Non-zero {{Literal|Expand}}
|}

=== Sharp cups ===

Enabling {{Literal|Sharp Cusps}} makes the corners pointy when the tangents are split:
{|
| [[File:Outline-Layer default 0.63.06.png|450px]]
| [[File:Outline-Layer sharp 0.63.06.png|450px]]
|-
| No {{Literal|Sharp Cusps}}
| With {{Literal|Sharp Cusps}}
|}

=== Rounded Begin ===

Enabling {{Literal|Rounded Begin}} makes the start of the outline rounded:
{|
| [[File:Outline-Layer default 0.63.06.png|450px]]
| [[File:Outline-Layer rounded begin 0.63.06.png|450px]]
|-
| no {{Literal|Rounded Begin}}
| {{Literal|Rounded Begin}}
|}

Note: With cairo render activated, if the quality is superior to '''6''', enabling {{Literal|Rounded Begin}} enable also R{{Literal|Rounded End}}.

=== Rounded End ===

Enabling {{Literal|Rounded End}} makes the end of the outline rounded:
{|
| [[File:Outline-Layer default 0.63.06.png|450px]]
| [[File:Outline-Layer rounded end 0.63.06.png|450px]]
|-
| No {{Literal|Rounded End}}
| With {{Literal|Rounded End}}
|}

Note: With cairo render activated, if the quality is superior to '''6''', enabling {{Literal|Rounded End}} enable also {{Literal|Rounded Begin}}.

=== Loopyness ===

This parameter currently does absolutely nothing at all!

=== Homogeneous ===

Enabling 'Homogeneous' changes the way that the width of the outline changes from one spline point to the next. Each point in the spline has its own width, and the spline has its own 'Outline Width' and 'Expand' parameters which are used to give the final width at each spline point. The 'Homogeneous' parameter controls how the width is interpolated between two neighboring spline points:
*When 'Homogeneous' isn't checked, the width is interpolated linearly with the spline's [http://en.wikipedia.org/wiki/Bézier_curve 't' parameter].
*When 'Homogeneous' is checked, the width is interpolated linearly with the spline's length.

Turning off homogeneous often makes the fat end of a spline look lumpy. Maybe that's a bug:
{|
| {{l|Image:Outline-not-homogeneous.png}}
| {{l|Image:Outline-homogeneous.png}}
|-
| not homogeneous
| homogeneous
|}

=== Misc ===

The {{l|Antialiasing Parameter‎}} isn't specific to the Outline layer, but it is particularly useful for the Outline layer. It makes the edges appear smoother:
{|
| [[File:Outline-Layer no antialias 0.63.06.png|450px]]
| [[File:Outline-Layer default 0.63.06.png|450px]]
|-
| not antialiased
| antialiased
|}

Note : File used [[File:Outline Layer.sifz]]

Motion Blur Layer

2020-01-05T01:26:28Z

FirasH: General cleaning and typo fixing

{{Title|Motion Blur Layer}}
{{Category|Layers}}
{{Category|Blurs}}
{{NewTerminology}}

[[File:Layer blur motion icon.png|64px]]

== About Motion Blur Layer ==
{{BlurLayer}}
Motion Blur Layer allows to simulate the blur of picture, that arises by movement.

== Specific parameters ==
The parameters of the Motion Blur Layer are:

{|{{Parameters}}

|-style="background:#"
||{{l|Image:Type_time_icon.png|16px}} [[#Aperture|Aperture]]
||0f
||time

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} [[#Subsamples Parameters|Subsamples Factor]]
||1.000000
||real

|-style="background:#"
||{{l|Image:Type_integer_icon.png|16px}} [[#Subsamples Parameters|Subsampling Type]]
||Hyperbolic
||integer

|-style="background:#eeeeee"
||{{l|Image:Type_real_icon.png|16px}} [[#Subsamples Parameters|Subsample Start Amount]]
||0.000000
||real

|-style="background:#"
||{{l|Image:Type_real_icon.png|16px}} [[#Subsamples Parameters|Subsample End Amount]]
||1.000000
||real

|}

=== Aperture ===
This page hasn't been written yet. Please help.

=== Subsamples Parameters ===
; Subsamples Factor : Subsamples Factor affects the number of subsamples to be computed. Using a high value the smudge is finer, but the rendering is longer as it involves much more computations.
; Subsampling Type :
:* Constant
:* Linear
:* Hyperbolic
; Subsample Start Amount : If is value of Subsample Start Amount 0, has not any blur on start. Otherwise motions of objects from lower layers begin as a smudge.
; Subsample End Amount : If is value of Subsample End Amount 0, is last state of the objects from lower layers without any blur.

== Samples ==
{| class="wikitable" style="text-align:center;"
! scope="col" |  
! scope="col" | From Subsample Start 0 to Subsample End 1
! scope="col" | From Subsample Start 1 to Subsample End 0
|-
!| 0f–0f
|colspan="2"| [[Image:motion_blur_0-1_aperture_0-0f.gif]]
|-
!| 0f–24f
| [[Image:motion_blur_0-1_aperture_0-24f.gif]]
| [[Image:motion_blur_1-0_aperture_0-24f.gif]]
|-
!| 24f–24f
| [[Image:motion_blur_0-1_aperture_24-24f.gif]]
| [[Image:motion_blur_1-0_aperture_24-24f.gif]]
|-
!| 24f–0f
| [[Image:motion_blur_0-1_aperture_24-0f.gif]]
| [[Image:motion_blur_1-0_aperture_24-0f.gif]]
|-
|}

; Note : Rows in table – Aperture value from begin (0 frame) to end (120 frame).
:Columns in table – Subsample Start Amount value and Subsample End Amount value

Synfig file from sample test - [[Media:motion_blur.sifz]]

== See also ==
* A short description of the blur layers can be found here: {{l|Layer}}
* {{l|Radial Blur Layer}} with a radial control of the size of the blur.
* {{l|Blur Layer}} mostly used types of blur.

Doc:Brushes

2020-01-04T00:35:50Z

FirasH: Fix typo

{{Title|Brushes}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Intermediate}}
{{TOCright}}
{{NewTerminology}}


== Introduction ==

The Outlines that you can draw with Synfig are formed by a rounded brush. The brush is defined by a radius that you can modify by its brush editor widget. This tutorial explains how to make brushed outlines that would improve sustantially your artwork.

== What do I need to use brushes? ==

=== A brush image ===
Well, for the moment Synfig hasn't any brush image included so you'll need to do them by your self or grab from the free resources (insert link here to those resources).

Here are some examples of brushes:

{{l|Image:Soft-wheezy-asymetric-brush.png}}
{{l|Image:Wool-ball-brush.png}}
{{l|Image:Soft-triangle-brush.png}}
{{l|Image:Tictactoe-brush.png}}
{{l|Image:Rhomb-fuzzy-brush.png}}
{{l|Image:Big-soft-brush.png|128px}}

These pictures are all licensed as public domain. Feel free to use them in your projects.

Brush images can just be any kind of image file that allows transparency (PNG, TIFF, GIF). The more resolution your image has, the bigger your brush size can be without pixelisation. Huge file sizes would take synfig more time to render,though. Find the balance between both options of quality and speed.

Anyway, you can use anything that is visible under synfig as a brush. See below.

=== A combination of features ===

Brushes are not a primary feature of Synfig. They are obtained from the combination of the following features:

* {{l|Duplicate Layer}}
* Link to Spline (what uses the following convert types):
** {{l|Convert#Spline Vertex|Spline Vertex}}
** {{l|Convert#Spline Tangent|Spline Tangent}}
** {{l|Convert#Spline Width|Spline Width}}

Strictly the Link to Spline feature is not needed but it would help on make several conversion types and linking.

== The Idea ==

The idea of brushes is to use the Duplicate layer feature with the Link to Spline (automatic or manual) feature given by the conversion types.

When you link a vertex to a spline (or a tangent or a width) it converts your parameter to the following sub-parameters.

* spline "Spline"
* bool "Loop"
* real "Amount"

There are other particular parameters for tangent or width that will be revised in other section.

spline "Spline" is the spline where the parameter (vertex, tangent or width) is linked to. In the case of the vertex it means that the vertex lies on the spline given by its "Amount" parameter. When Amount is 0.0 the vertex position is the Spline begin. When Amount is 1.0 the vertex position is the Spline end. When Loop is "on" values outside the [0.0, 1.0] range are forced to be in that range by eliminating the integer part of the number. <tt>(It needs a better explanation)</tt>

On the other hand the Duplicate layer allows duplicate the render of everything that is below it as many times as the Index value node indicates. Also if you link any parameter to that Index one the parameter is modified according to the index before it is multiple rendered by the Duplicate layer. It allows apply some kind of transformation to the layers at the same time you duplicate them.

Combining those two features (Link to Spline and Duplicate) you can achieve the emulation of brushes in synfig.

== The procedure ==
As of Synfig 1.0.2 (November 27, 2015), much of the process for creating a brushtroke effect has been simplified because scale and rotate functions have been integrated into group layers. The following steps will guide you through the process:

# If you have not already done so, create an outline (path) for the brush to follow.
## Click on the {{l|Spline Tool}}.
## Under the {{l|Tool Options Panel}}, select "Create Outline" if it is not already selected. You may wish to de-select all other "Layer Type" options as well.
## Lay as many or as few vertices as you wish.
## In the bottom-left corner of the {{l|Tool Options Panel}}, click "Make Spline" (gears icon).
## Edit the spline to your content by adding or removing vertices and moving tangent handles.
# Import the "brush" you would like to copy by clicking '''File->Import...''', then selecting the corresponding image file.
#*Alternatively, you may use an existing shape within your project, although this may require an additional step. Place the object(s) to be used as a brush in a {{l|Group Layer}} or {{l|Switch Group Layer}}. If you want your brush to rotate to follow the contour of the path, it is necessary that the objects be in a group layer or switch group layer because most objects do not have a rotation (Angle) parameter but groups do. (Some objects also lack an origin parameter.) After creating the group layer, move the origin handle to the object's center (ctrl-click and drag the origin handle) so that they both move together. These steps are not necessary if you import an image because imported images are created within a switch group layer.
# Select both the group layer containing your brush and the spline layer. Click the group's origin handle (green circle), then right-click on the spline (not on a handle) and select '''Link to Spline'''. To test that you have done this correctly, move the group's origin handle and it should be confined to the spline and rotate so that it is always tangent to it. You are still free to rotate the group layer and it will continue to correspondingly rotate as you move the origin along the spline's path.
# Put the group layer with your brush inside another group layer. Call this new group layer "Clones" or something similar for easy reference.
# With the group layer ("Clones") selected, adjust the scale handle (orange circle in the {{l|Group Transformation Widget}}) so that the brush is as large or as small as you desire. You can also return to this step later.
# Click the group layer containing your brush (not the "Clones" layer). Right-click it and select '''New Layer->Other->Duplicate'''. (Alternatively, click in the menu bar '''Layer->New Layer->Other->Duplicate'''.) This creates a {{l|Duplicate Layer}}, which is ''not the same as duplicating the layer''. Do not simply click "Duplicate Layer" below the Layers Panel.
# Click the Duplicate Layer you just created. Under the parameters, expand "Index (Index 1)" and edit the values "From", "To", and "Step". These correspond to the portion of the spline to be traversed as well as the density of the brushstroke. For the "From" and "To" parameters, 0 corresponds to the start of the spline and 1 corresponds to its end. The number of duplicates to be made is equal to floor((To-From)/Step). A smaller "Step" parameter corresponds to a denser brushstroke while a larger one makes it more sparse (and possibly easier to render). For this tutorial, it is suggested you use From=0, To=1, and Step=0.02, which will create 50 copies along the entire length of the spline, although you are encouraged to modify these values to see their effects.
# Open the {{l|Library Panel}}. Expand "ValueBase Nodes" and select "Index 1", which should correspond to the value node you just edited in the Duplicate Layer. Make sure "Index 1" remains selected throughout the following step.
# Click the group layer containing your brush (not "Clones"). Within the {{l|Parameters Panel}}, expand '''Transformation->Offset'''. Right-click "Amount" and select "Connect". (Note that the Transformation and Offset parameters must be expanded. The Amount parameter there is ''not'' the same as the top-level Amount parameter, which is equivalent to the layer's alpha channel.) This connects the "Amount" parameter (the position along the spline) with the value node associated with the Duplicate Layer. This should create many copies of the brush along the length of the spline. You will notice that these copies are not rotated, which will be accomplished in the next and final step. If you do not wish for the brush to rotate as it traverses the path, you are done.
# Still within the group layer's Parameters Panel, expand '''Transformation->Angle'''. Right-click "Amount" and select "Connect" (make sure "Index 1" is still selected in the Library Panel). (Note that the Transformation and Angle parameters must be expanded. The Amount parameter there is ''not'' the same as the top-level Amount parameter, which is equivalent to the layer's alpha channel.) This automatically associates the duplicates' angle with the tangent to the spline. If you have done all of the above steps correctly, your brush will follow the spline and its angle will change with it.

At this point, you can modify any parameters and the brushstroke will update dynamically. You can turn off the Spline Layer to hide it, add vertices, modify tangent handles, and change the "From", "To", and "Step" parameters.

== Further steps ==

It is possible to make more fancy things with this procedure like make random angled brushes or random spread brushes stamps along the outline. But this is part of an Advanced uses of Brushes tutorial.

== Examples ==

{{l|Image:Test1-1.png}}

A Star layer.
You can see that seems to be a bug there with the feather and zoom in and out combinations.

{{l|Image:Test1-2.png}}

A simple stroke.

{{l|Image:Test1-3.png}}

A angled pen.
And this is the brush image:

{{l|Image:Brush002.png}}

{{l|Image:Test1-4.png}}

The same but not rotated.

{{l|Image:Test1-5.png}}

Other brush example. And this is the brush image:

{{l|Image:Brush001.png|128px}}

This is the sifz file used to render the examples:

{{l|Media:Test1.sifz|Sample file link}}

You need to modify the zoom parameter in the group layer and the b-amount value node to modify the density of the brush to achieve same values than in the examples.

Render dialog

2019-12-10T18:03:08Z

FirasH: Fixed some typos and cleaned a bit the first paragraph

{{Title|Render Dialog}}
{{Category|Dialogs}}
{{Category|Render}}
{{TOCright}}
{{NewTerminology}}


{{Note|What rendering involve?|If you want to have a quick summary of what rendering an animation involve take a look to the {{l|Doc:Rendering_Walk_Through}} page}}

The {{literal|Render Dialog}} lets you render your animation.
It can be reached through the {{L|Canvas_Menu_Caret}} {{c|<File>|Render}}.
== Let's have an in-depth look at it.==

===Global information===
[[File:Render_settings_Dialog_current.png|frame|center]]

*'''Target'''
**'''Filename''' - Here you can set the desired output filename and also a custom path to the rendered output.
**'''Target''' - Set your {{l|Render options|output format}}. Selecting {{Literal|Auto}} the format is decided by the filename suffix. If none is present png-format is default.
*'''Settings'''
**'''Quality''' - Set the quality of the rendering. Quality changes behavior of some layers, not all of them. For example Motion Blur layer renders more subsamples based on quality values in intervals. Quality '''3''' and '''1''' are mostly the same in all cases, so if '''3''' is enough, then leave it as '''3'''.
***Default quality is '''3'''.
***'''1''' is the highest quality but with the longest rendering time.
***'''9''' is the lowest quality but renders faster.
***'''0''' is even lower than '''9''' and seems to disable alpha channels as well.
**'''Anti-Aliasing''' - Set the amount of anti-aliasing. Accepts values between '''1''' and '''31''', although values above '''3''' is very subtle improvements and hard to notice it's also '''hugely increases''' the rendering time.
***'''31''' is the highest anti-aliasing amout but with the longest rendering time.
***'''1''' is the lowest anti-aliasing amout but renders faster.
**'''Render current frame only''' - With this ticked only one frame is rendered; the current one.
** {{RenderOptionExtractAlpha}} 
Then there are three tabs, we're starting with;

===Image tab===

{{PropertiesImageTab}}

===Time tab===

{{PropertiesTimeTab}}

===Other tab===

{{PropertiesOtherTab}}

== See Also==
* Quick summary of what rendering involve : {{l|Doc:Rendering Walk Through}}
* {{literal|How Do I}} section : {{l|Doc:How_Do_I#Render|How Do I:Render}}