* [[Doc:Brushes]]
* [[Doc:Cut-out Animation]]
* [[Doc:Flower Animation]]
* [[Doc:Guides]]
* [[Doc:Interface]]
* [[Doc:Lipsync]]
* [[Doc:ListImporter]]
* [[Doc:Looping Background]]
* [[Doc:Object gradients]]
* [[Doc:Overview]]
* [[Doc:Point to one object]]
* [[Doc:Preview]]
* [[Doc:Quick Overview]]
* [[Doc:Realistic Fire Animation]]
* [[Doc:Realistic Rain Animation]]
* [[Doc:Rescale Animations]]
* [[Doc:Reuse Animations]]
* [[Doc:Shiny Effects]]
* [[Doc:Slideshow Tutorial]]
* [[Doc:Snowflake with the Duplicate Layer]]
* [[Doc:Synfig CLI Syntax]]
* [[Doc:Synfig Studio vs Synfig]]
* [[Doc:Tiling object]]
* [[Doc:Video Tutorials]]
* [[Doc:Write On]]
* [[About]]
* [[About Dialog]]
* [[Alpha Test License Agreement]]
* [[Amount Parameter]]
* [[Animation Ideas]]
* [[BLine]]
* [[BLine Tool]]
* [[Bevel Layer]]
* [[Blend Method Parameter]]
* [[Blur Layer]]
* [[Bounding box]]
* [[Canvas]]
* [[Canvas Browser]]
* [[Canvas Browser Dialog]]
* [[Canvas Browser Panel]]
* [[Canvas Edit Menu]]
* [[Canvas File Menu]]
* [[Canvas Layer Menu]]
* [[Canvas Menu Caret]]
* [[Canvas MetaData Panel]]
* [[Canvas Properties Dialog]]
* [[Canvas View Menu]]
* [[Categorical Help]]
* [[Checkerboard Layer]]
* [[Children Lock]]
* [[Circle Layer]]
* [[Circle Tool]]
* [[Clamped]]
* [[Color Correct Layer]]
* [[Color Editor Dialog]]
* [[Comments]]
* [[Conical Gradient Layer]]
* [[Constant]]
* [[Convert]]
* [[Converters]]
* [[Curve Gradient Layer]]
* [[Curve Warp Layer]]
* [[Curves Panel]]
* [[Dock dialogs]]
* [[Draw Tool]]
* [[Duck]]
* [[Duplicate Layer]]
* [[Ease In/Out]]
* [[Encapsulate]]
* [[Environment Variables]]
* [[Export]]
* [[Eyedrop Tool]]
* [[Feather Parameter]]
* [[Fill Tool]]
* [[Filled Rectangle Layer]]
* [[Focus Point]]
* [[Following a BLine (the old way)]]
* [[Gradient Editor Dialog]]
* [[Gradient Tool]]
* [[Groups Panel]]
* [[Hakkında]]
* [[Halftone 2 Layer]]
* [[Halftone 3 Layer]]
* [[Help Menu]]
* [[History Panel]]
* [[Image Dimensions]]
* [[Import Image Layer]]
* [[Info Panel]]
* [[Input Devices]]
* [[Inside Out Layer]]
* [[Invert Parameter]]
* [[Julia Set Layer]]
* [[Keyboard Shortcuts]]
* [[Keyboard Shortcuts (Flash)]]
* [[Multiplane Camera/ru]]
* [[Polygon Layer]]
* [[Radial Blur Layer]]
* [[Radial Gradient Layer]]
* [[Rectangle Layer]]
* [[Rectangle Tool]]
* [[Reference]]
* [[Region Layer]]
* [[Render dialog]]
* [[Render options]]
* [[Reuse Exported ValueNodes]]
* [[Rotate Layer]]
* [[Rotate Tool]]
* [[Scale Layer]]
* [[Scale Tool]]
* [[Setup Dialog]]
* [[Sewing BLines]]
* [[Shade Layer]]
* [[Side Tabs]]
* [[Sif2svg]]
* [[Simple Circle Layer]]
* [[Sketch Tool]]
* [[Smooth Move Tool]]
* [[Solid Color Layer]]
* [[Spherize Layer]]
* [[Spiral Gradient Layer]]
* [[Star Layer]]
* [[Stretch Layer]]
* [[Stroboscope Layer]]
* [[Super Sample Layer]]
* [[Switching Scenes]]
* [[TCB]]
* [[Text Layer]]
* [[Text Tool]]
* [[Time Cursor]]
* [[Time Loop Layer]]
* [[Time Offset Parameter]]
* [[Timebar]]
* [[Timetrack Panel]]
* [[ToolBox File Menu]]
* [[Tool Options Panel]]
* [[Toolbox File Palette]]
* [[Tracking Curves]]
* [[Transform tool]]
* [[Translate Layer]]
* [[Twirl Layer]]
* [[Unit System]]
* [[ValueNode]]
* [[Walk Cycle]]
* [[Warp Layer]]
* [[Waypoint]]
* [[Waypoint Dialog]]
* [[Winding Style Parameter]]
* [[Window Manager Hints]]
* [[XOR Pattern Layer]]
* [[Z Depth]]
* [[Z Depth Parameter]]
* [[Zh-Dictionary]]

Zoom Parameter

2013-02-06T03:58:13Z

Ghosthand: Terminology Updated

{{Category|Parameters}}{{Category|NewTerminology}}
The Zoom Parameter in the {{l|Group}} layer allows you to zoom in or out on the contents of the grouped layers.

The Default Value is 0, which means no zoom at all. Positive values will allow you to zoom in, while negative values will allow you to zoom out.

The zoom is exponential - each increase of 1 in the parameter zooms in by a factor of [http://en.wikipedia.org/wiki/E_%28mathematical_constant%29 2.72]. A zoom of 2 will zoom in by a factor of 2.72 * 2.72 or around 7.4 times. The same factor can be applied to zooming out.

2013-02-05T00:44:53Z

Ghosthand:

Doc:Creating Shapes

2010-05-01T01:58:25Z

Ghosthand: /* BLines */

{{Title|Creating shapes}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Basic}}
{{Navigation|Category:Manual}}


(Draft) ''Note to the reader: This is still incomplete; please be patient.''

== Basic Shapes ==

There are three basic shapes in Synfig Studio that can be accessed from the toolbox:

*{{l|Image:Circle_icon.png|32px}} '''Circle''' - Creates circles and ovals.
*{{l|Image:Rectangle_icon.png|32px}} '''Rectangle''' - Creates rectangles and squares.
*{{l|Image:Star_icon.png|32px}} '''Star''' - Creates stars of varying dimensions.

Let's learn more about creating basic shapes by doing a quick tutorial:

#In the toolbox, click on the Circle icon {{l|Image:Circle_icon.png|32px}} or alternately, use the shortcut '''ALT-C'''. And before we actually create the circle on the canvas, let's look at some options.
#In the Tool Options Panel, make sure that '''Outline BLine''' and '''Region BLine''' is checked. This allows us to create an outline (stroke) and region (fill). And also make sure that '''Link Origins''' and '''BLine Origins at Center''' is checked. (For the sake of simplicity, we are not going to worry about the other options now. However, you can find more information about Tool Options Panel for a Circle '''{{l|Tool_Options_Panel|here}}'''.)
#First let's select the stroke color of the circle. Near the bottom of toolbox find the FG/BG color widget and click on the black square. (Black is the default stroke color). A color editor should pop up which will allow you to choose any color you want. Select a red color.{{l|Image:FGSelect1.png|center}}
#Now let's change the stroke width. Click on the stroke width number in the toolbox, and manually input 10 for the stroke width.{{l|Image:Linewidthselect.png|center}}
#Next, let's create the fill color. On the FG/BG color widget, click on the white square. At the color editor, let's choose a black fill color.{{l|Image:BGSelect.png|center}}
#Now we can actually create the circle on the canvas. Left click anywhere on the canvas where you want the circle center to go, hold, and drag out. You should get a black circle with a red stroke color, and a width of 10pt.
#Notice in the Layers Panel that we now have two separate layers for the Circle Outline and Region. Both which are now highlighted.
#Circles, and other objects, can be modified by moving, rotating, and scaling the object as a whole or via its vertices. You can view the '''{{l|Category:Manual|Manual}}''' to find out more information on modifying objects and their vertices.

== Complex Shapes ==

Basic primitives are all great, but they are pretty much geometrically inflexible. What about creating more complex shapes? To do this, we can use a few tools found in the toolbox:

*{{l|Image:Bline_icon.png|32px}} '''BLine''' - Creates complex paths that can be easily manipulated.
*{{l|Image:Draw_icon.png|32px}} '''Draw''' - Creates BLine paths by first sketching the shape on the canvas.
*'''Polygon''' - Creates BLine paths by drawing straight lines.

=== BLines ===

In Synfig, the construct for describing shapes is called a Bline. This is roughly analogous to a "path" in other programs, except that it is strictly a hermite spline.

Before we get started with the BLine tutorial, let's look at some additional notes on how Synfig works. When you click on the {{l|BLine_Tool|Bline Tool}}, you will see that the vertices from your currently selected object (if there was one) will disappear, but the layer(s) will still remain selected in the {{l|Layers Panel}}. This is normal. Anything you create with the {{l|BLine_Tool|Bline Tool}} will be inserted above the currently selected layer. Keep in mind that if you want to insert a shape somewhere, you should select where you want to insert it before you go into the {{l|BLine_Tool|Bline Tool}}—changing the selection afterward will automatically swap you back to the normal tool.

{| border="0" cellspacing="5" align="center" width="100%"
| |
|{{l|Image:Toolbox Reset Colors Button.jpg}}
|| ||

|}

Let's create some BLines:
#First, go ahead and click on the "R" button in the lower left corner of the FG/BG color widget in the {{l|Toolbox|toolbox}}. This will reset us back to the default black and white.
#Set the {{l|New Layer Defaults#Default Line Width|default line width}} to something nice and thick. If you still have it at 10pt from the previous Circle tutorial, the you can leave it there for now.
#Take a look at the Tool Options Panel. Make sure that '''Region BLine''', '''Outline BLine''', and '''Link Origins''', are checked.
#Start left clicking with your mouse around the canvas to place vertex ducks. Do this over and over, and you will have created your first Bline.
#Now let's loop, or close, the BLine. Right click on the first vertex duck and select '''Loop BLine'''.
#If you do not like the position of any vertex duck, you can move it anywhere you want. So let's do this. Left click, hold, and drag any vertex you want to move. You've noticed that two tangent ducks, or handles, grew out of the vertex first. Moving these tangents allow you adjust the curvature of the paths leading up to this vertex.
#Now left click, hold, and drag this vertex again. Place this duck anywhere you want.
#And if you want to remove any vertex, right click on it and select '''Delete Vertex'''.
#So I assume you got your first BLine laid out like you want it. That's great. But you may have noticed that the layers have not been created yet. That's because we are still in construction mode. This is a unique concept for BLines, as the object has not been finalized and its layers have not been created yet. To create the layers is easy, just either switch to another tool, or press the '''Create''' button at the bottom of the '''Tool Options Panel''' (it's the icon that looks like a gear). For now, just go ahead and click on the {{l|Normal Tool|normal tool}} because we are done with the Bline Tool.

== Modifying BLine Vertices ==

Ok, we now have a nice pretty white region with a thick black outline. Since we checked off those options in part 3 in the above tutorial, you'll notice that there are two layers that we have created--the {{l|Outline Layer|Outline}} and the {{l|Region Layer|Region}} in the Layers Panel. Despite the fact that they are two separate layers, their vertices parameter has already been {{l|Linking|linked}}--so you can select either one and move its ducks around and the other one will also change.

So if you want to manipulate the vertices ''after'' you have created the layers, it is very easy to do so. Just click on one of the layers and have at it. If you want to remove a vertex, right click on it and hit '''Remove Item (smart)'''. Want to insert a point somewhere? Right click on the segment where you want to insert something and his '''Insert item (smart)'''.

NOTE: The only major difference between this normal editing mode and the construction mode is in how you split the tangents--in construction mode you right click on the tangent itself. In normal duck editing mode, you must right click on the vertex that the tangents are attached to. This could be considered a usability bug, and it will be resolved at some point.

This may appear to be leading to a mess of layers. And yes, if you aren't using the software properly, that is exactly what you will get. But there is a way to make this more sane. As mentioned in the previous tutorial, {{l|Adding Layers}}, you can {{l|encapsulate}}, or group layers of a common object.

One quick thing to mention before I finish up. You can change the width of an outline at each vertex. You do this by selecting the outline layer (NOTE: you must select the {{l|Outline Layer}}, the {{l|Region Layer}} has no width data) and tweaking with the width ducks. By default, these are masked. To show them, press Alt-5. Repeat to hide them again. You can also see other things to mask via the {{l|Canvas Menu Caret}} > {{l|View Menu}} > {{l|Mask Ducks Menu}}.

Doc:Creating Shapes

2010-05-01T01:52:30Z

Ghosthand: /* Modifying BLine Vertices */

{{Title|Creating shapes}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Basic}}
{{Navigation|Category:Manual}}


(Draft) ''Note to the reader: This is still incomplete; please be patient.''

== Basic Shapes ==

There are three basic shapes in Synfig Studio that can be accessed from the toolbox:

*{{l|Image:Circle_icon.png|32px}} '''Circle''' - Creates circles and ovals.
*{{l|Image:Rectangle_icon.png|32px}} '''Rectangle''' - Creates rectangles and squares.
*{{l|Image:Star_icon.png|32px}} '''Star''' - Creates stars of varying dimensions.

Let's learn more about creating basic shapes by doing a quick tutorial:

#In the toolbox, click on the Circle icon {{l|Image:Circle_icon.png|32px}} or alternately, use the shortcut '''ALT-C'''. And before we actually create the circle on the canvas, let's look at some options.
#In the Tool Options Panel, make sure that '''Outline BLine''' and '''Region BLine''' is checked. This allows us to create an outline (stroke) and region (fill). And also make sure that '''Link Origins''' and '''BLine Origins at Center''' is checked. (For the sake of simplicity, we are not going to worry about the other options now. However, you can find more information about Tool Options Panel for a Circle '''{{l|Tool_Options_Panel|here}}'''.)
#First let's select the stroke color of the circle. Near the bottom of toolbox find the FG/BG color widget and click on the black square. (Black is the default stroke color). A color editor should pop up which will allow you to choose any color you want. Select a red color.{{l|Image:FGSelect1.png|center}}
#Now let's change the stroke width. Click on the stroke width number in the toolbox, and manually input 10 for the stroke width.{{l|Image:Linewidthselect.png|center}}
#Next, let's create the fill color. On the FG/BG color widget, click on the white square. At the color editor, let's choose a black fill color.{{l|Image:BGSelect.png|center}}
#Now we can actually create the circle on the canvas. Left click anywhere on the canvas where you want the circle center to go, hold, and drag out. You should get a black circle with a red stroke color, and a width of 10pt.
#Notice in the Layers Panel that we now have two separate layers for the Circle Outline and Region. Both which are now highlighted.
#Circles, and other objects, can be modified by moving, rotating, and scaling the object as a whole or via its vertices. You can view the '''{{l|Category:Manual|Manual}}''' to find out more information on modifying objects and their vertices.

== Complex Shapes ==

Basic primitives are all great, but they are pretty much geometrically inflexible. What about creating more complex shapes? To do this, we can use a few tools found in the toolbox:

*{{l|Image:Bline_icon.png|32px}} '''BLine''' - Creates complex paths that can be easily manipulated.
*{{l|Image:Draw_icon.png|32px}} '''Draw''' - Creates BLine paths by first sketching the shape on the canvas.
*'''Polygon''' - Creates BLine paths by drawing straight lines.

=== BLines ===

In Synfig, the construct for describing shapes is called a Bline. This is roughly analogous to a "path" in other programs, except that it is strictly a hermite spline.

Before we get started with the BLine tutorial, let's look at some additional notes on how Synfig works. When you click on the {{l|BLine_Tool|Bline Tool}}, you will see that the vertices from your currently selected object (if there was one) will disappear, but the layer(s) will still remain selected in the {{l|Layers Panel}}. This is normal. Anything you create with the {{l|BLine_Tool|Bline Tool}} will be inserted above the currently selected layer. Keep in mind that if you want to insert a shape somewhere, you should select where you want to insert it before you go into the {{l|BLine_Tool|Bline Tool}}—changing the selection afterward will automatically swap you back to the normal tool.

{| border="0" cellspacing="5" align="center" width="100%"
| |
|{{l|Image:Toolbox Reset Colors Button.jpg}}
|| ||

|}

Let's create some BLines:
#First, go ahead and click on the "R" button in the lower left corner of the FG/BG color widget in the {{l|Toolbox|toolbox}}. This will reset us back to the default black and white.
#Set the {{l|New Layer Defaults#Default Line Width|default line width}} to something nice and thick. If you still have it at 10pt from the previous Circle tutorial, the you can leave it there for now.
#Take a look at the Tool Options Panel. Make sure that '''Region BLine''', '''Outline BLine''', and '''Link Origins''', are checked.
#Start left clicking with your mouse around the canvas to place vertices. Do this over and over, and you will have created your first Bline.
#Now let's loop, or close, the BLine. Right click on the first vertex and select '''Loop BLine'''.
#If you do not like the position of any vertex, you can move it anywhere you want. So let's do this. Left click, hold, and drag any vertex you want to move. You've noticed that two tangents, or handles, grew out of the vertex first. Moving these tangents allow you adjust the curvature of the paths leading up to this vertex.
#Now left click, hold, and drag this vertex again. Place this vertex anywhere you want.
#And if you want to remove any vertex, right click on it and select '''Delete Vertex'''.
#So I assume you got your first BLine laid out like you want it. That's great. But you may have noticed that the layers have not been created yet. That's because we are still in construction mode. This is a unique concept for BLines, as the object has not been finalized and its layers have not been created yet. To create the layers is easy, just either switch to another tool, or press the '''Create''' button at the bottom of the '''Tool Options Panel''' (it's the icon that looks like a gear). For now, just go ahead and click on the {{l|Normal Tool|normal tool}} because we are done with the Bline Tool.

== Modifying BLine Vertices ==

Ok, we now have a nice pretty white region with a thick black outline. Since we checked off those options in part 3 in the above tutorial, you'll notice that there are two layers that we have created--the {{l|Outline Layer|Outline}} and the {{l|Region Layer|Region}} in the Layers Panel. Despite the fact that they are two separate layers, their vertices parameter has already been {{l|Linking|linked}}--so you can select either one and move its ducks around and the other one will also change.

So if you want to manipulate the vertices ''after'' you have created the layers, it is very easy to do so. Just click on one of the layers and have at it. If you want to remove a vertex, right click on it and hit '''Remove Item (smart)'''. Want to insert a point somewhere? Right click on the segment where you want to insert something and his '''Insert item (smart)'''.

NOTE: The only major difference between this normal editing mode and the construction mode is in how you split the tangents--in construction mode you right click on the tangent itself. In normal duck editing mode, you must right click on the vertex that the tangents are attached to. This could be considered a usability bug, and it will be resolved at some point.

This may appear to be leading to a mess of layers. And yes, if you aren't using the software properly, that is exactly what you will get. But there is a way to make this more sane. As mentioned in the previous tutorial, {{l|Adding Layers}}, you can {{l|encapsulate}}, or group layers of a common object.

One quick thing to mention before I finish up. You can change the width of an outline at each vertex. You do this by selecting the outline layer (NOTE: you must select the {{l|Outline Layer}}, the {{l|Region Layer}} has no width data) and tweaking with the width ducks. By default, these are masked. To show them, press Alt-5. Repeat to hide them again. You can also see other things to mask via the {{l|Canvas Menu Caret}} > {{l|View Menu}} > {{l|Mask Ducks Menu}}.

Doc:Adding Layers

2010-05-01T00:30:11Z

Ghosthand: /* Using Layers To Modify Other Layers */

{{Title|Adding Layers}}
{{Navigation|Category:Manual|Doc:Creating_Shapes}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Basic}}


''Usual note to the reader: This is not yet finished; please be patient.''

== Introduction ==

In the {{l|Doc:Animation_Basics|previous tutorial}}, you made your first simple animation by changing the attributes of primitive objects, such as: position, color, and size. These simple types, however, are seldom sufficient to create advanced characters and objects. To do so, Synfig uses {{l|Layer|Layers}}. They are similar to layers used in other drawing applications in that they are used to separate different elements of an image.

{|
|
However, Synfig is different from layers in other programs in at least three respects:
# Every object, element, and effect gets its own layer.
# You can organize layers into hierarchical groups.
# You can use upper layers to change the behavior (or look) of underlying layers.

As you will see, {{l|Layer|layers}} are an extremely important aspect of Synfig, much more so than most graphics programs. Understanding the concept of layers is an important part in understanding how Synfig works.

== Combining Layers To Create Effects==

So let's look at a simple example of how we can combine two layers to create a gradient effect on a rectangle.

# Create a new file with 0 duration. There's no need to bother with a timeline at this point.
# Create a simple rectangle with the Rectangle tool {{l|Image:Rectangle_icon.png|32px}}.{{l|Image:Adding-layers-tutorial-0.jpg|center}}
# Pick the {{l|Gradient Tool|gradient tool}} {{l|Image:Gradient_icon.png|32px}} from the {{l|Toolbox}}, and click into the canvas once. You should note that another layer was added in the {{l|Layers Panel}} called '''Gradient'''. This is nothing special. If you see no gradient but just a plain color, pick the {{l|Normal Tool|normal tool}}, click into the canvas to activate the gradient's ducks. You need to grab the one you see and move it a bit until a gradient appears.{{l|Image:Adding-layers-tutorial-1.jpg|center}} You now have a gradient, but it is not what you wanted: it spreads across the whole canvas. The goal was to have a gradient in the rectangle. So, let's fix this now.
#In the {{l|Layers Panel}}, select both the gradient and the rectangle layer. They should appear with a blue background now. Then, context-click (ie. right-click on Windows and Linux) and select '''{{l|Encapsulate}}''' from the menu. The view of your layer tab should change now, showing a small box called {{l|Paste Canvas|Inline Canvas}} with an arrow in front. {{l|Image:Adding-layers-tutorial-2.jpg|center}} You can treat this layer like any other layer -- move it around, duplicate it, copy and paste it. By clicking on the arrow you can expand the inline canvas to see its contents, your previous two layers: the gradient and the rectangle. If you want to change the name of it to something more descriptive, just select the layer in the layer tab and click on its label. Then you just edit it in place. You can do this for ANY layer, and are strongly encouraged to do so.
#However, there is still a problem: the gradient still covers the whole canvas although we wanted it to be restricted on the rectangle. To do so, activate the gradient layer in the Layer tab. Now go to the {{l|Params Panel}} (by default a tab in the Params-Children-Keyframes window), and search the attribute called '{{l|Blend Method}}'. Double-click the entry and select '''{{l|Blend Method#Onto|Onto}}''' from the drop-down menu.{{l|Image:Adding-layers-tutorial-3.jpg|center}}The gradient should now be restricted to the rectangle. Congratulations! You just made your first effect by interacting layers with Synfig.{{l|Image:Adding-layers-tutorial-4.jpg|center}}

== Using Layers To Modify Other Layers==
If only for the additional organization, encapsulating layers into inline canvases dramatically improves the ease of use of Synfig Studio.

Layers in Synfig can modify the data that it gets from directly below it. In other words, if you were to throw a {{l|Blur Layer}} on top of the layers inside the {{l|Paste Canvas|inline canvas}} we just created, it would just blur them -- anything under the inline canvas would not be blurred!

Let's try using a layer to modify other layers below it.

#Create two red {{l|Circle Tool|circles}} and in the {{l|Layers Panel}} move them below, but not a part of, the inline canvas layer. Now our inline canvas layer (with rectangle and gradient) is in front of those two circles.{{l|Image:Adding-layers-tutorial-5.jpg|center}}
#Expand the inline canvas to show its contents, and select the top layer inside of it (should be the "Gradient" layer). This is where we want to insert the new layer. Create another circle filled with a black color. The black circle layer will be created over the gradient layer inside the inline canvas.{{l|Image:Adding-layers-tutorial-6.jpg|center}} {{l|Image:Adding-layers-tutorial-7.jpg}}
#Now, right click on the black circle layer in the {{l|Layers Panel}} and a popup menu will appear. The first item in that popup is '''New Layer'''. Inside of the '''New Layer''' menu, you'll see several categories of layers you could create, but what we want is a blur, so go to the Blur category and select the '''Blur''' layer. (so that would be "New Layer->{{l|Blur Layer Category|Blurs}}->{{l|Blur Layer|Blur}}"){{l|Image:Adding-layers-tutorial-8.jpg|center}}
#Well, it blurred... but something is not quite right - the outside edge of contents of the inline canvas is still sharp. It is doing this because the blend method of the blur defaulted to '''{{l|Blend Method#Composite|Composite}}''' (you can change the {{l|New Layer Defaults#Default Blend Method|default blend method}} for new layers from the {{l|New Layer Defaults}} section of the {{l|Toolbox}}). What we want is a blend method of '''{{l|Blend Method#Straight|Straight}}'''. Just select the blur layer, and change the {{l|Blend Method}} to '''{{l|Blend Method#Straight|Straight}}''' in the {{l|Params Panel}}. {{l|Image:Adding-layers-tutorial-3.jpg|center}}

: NOTE: I will probably change the way that default blend methods are handled in the future--as the way it is currently handled seems to only create hassles like this.

{{l|Image:Adding-layers-tutorial-9.jpg}} {{l|Image:Adding-layers-tutorial-10.jpg}}

Ok, now we have all of the contents of the inline canvas blurred, but everything under it is sharp!

== Digging further... ==

If you care to look into Synfig's main menu 'Layer > New Layer' you will note quite a lot of different possibilities for making layers. For further reading about all the possibilities see {{l|Category:Layers|Layers}}

Doc:Adding Layers

2010-05-01T00:27:10Z

Ghosthand: /* Digging further... */

{{Title|Adding Layers}}
{{Navigation|Category:Manual|Doc:Creating_Shapes}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Basic}}


''Usual note to the reader: This is not yet finished; please be patient.''

== Introduction ==

In the {{l|Doc:Animation_Basics|previous tutorial}}, you made your first simple animation by changing the attributes of primitive objects, such as: position, color, and size. These simple types, however, are seldom sufficient to create advanced characters and objects. To do so, Synfig uses {{l|Layer|Layers}}. They are similar to layers used in other drawing applications in that they are used to separate different elements of an image.

{|
|
However, Synfig is different from layers in other programs in at least three respects:
# Every object, element, and effect gets its own layer.
# You can organize layers into hierarchical groups.
# You can use upper layers to change the behavior (or look) of underlying layers.

As you will see, {{l|Layer|layers}} are an extremely important aspect of Synfig, much more so than most graphics programs. Understanding the concept of layers is an important part in understanding how Synfig works.

== Combining Layers To Create Effects==

So let's look at a simple example of how we can combine two layers to create a gradient effect on a rectangle.

# Create a new file with 0 duration. There's no need to bother with a timeline at this point.
# Create a simple rectangle with the Rectangle tool {{l|Image:Rectangle_icon.png|32px}}.{{l|Image:Adding-layers-tutorial-0.jpg|center}}
# Pick the {{l|Gradient Tool|gradient tool}} {{l|Image:Gradient_icon.png|32px}} from the {{l|Toolbox}}, and click into the canvas once. You should note that another layer was added in the {{l|Layers Panel}} called '''Gradient'''. This is nothing special. If you see no gradient but just a plain color, pick the {{l|Normal Tool|normal tool}}, click into the canvas to activate the gradient's ducks. You need to grab the one you see and move it a bit until a gradient appears.{{l|Image:Adding-layers-tutorial-1.jpg|center}} You now have a gradient, but it is not what you wanted: it spreads across the whole canvas. The goal was to have a gradient in the rectangle. So, let's fix this now.
#In the {{l|Layers Panel}}, select both the gradient and the rectangle layer. They should appear with a blue background now. Then, context-click (ie. right-click on Windows and Linux) and select '''{{l|Encapsulate}}''' from the menu. The view of your layer tab should change now, showing a small box called {{l|Paste Canvas|Inline Canvas}} with an arrow in front. {{l|Image:Adding-layers-tutorial-2.jpg|center}} You can treat this layer like any other layer -- move it around, duplicate it, copy and paste it. By clicking on the arrow you can expand the inline canvas to see its contents, your previous two layers: the gradient and the rectangle. If you want to change the name of it to something more descriptive, just select the layer in the layer tab and click on its label. Then you just edit it in place. You can do this for ANY layer, and are strongly encouraged to do so.
#However, there is still a problem: the gradient still covers the whole canvas although we wanted it to be restricted on the rectangle. To do so, activate the gradient layer in the Layer tab. Now go to the {{l|Params Panel}} (by default a tab in the Params-Children-Keyframes window), and search the attribute called '{{l|Blend Method}}'. Double-click the entry and select '''{{l|Blend Method#Onto|Onto}}''' from the drop-down menu.{{l|Image:Adding-layers-tutorial-3.jpg|center}}The gradient should now be restricted to the rectangle. Congratulations! You just made your first effect by interacting layers with Synfig.{{l|Image:Adding-layers-tutorial-4.jpg|center}}

== Using Layers To Modify Other Layers==
If only for the additional organization, encapsulating layers into inline canvases dramatically improves the ease of use of Synfig Studio.

Layers in Synfig can modify the data that it gets from directly below it. In other words, if you were to throw a {{l|Blur Layer}} on top of the layers inside the {{l|Paste Canvas|inline canvas}} we just created, it would just blur them -- anything under the inline canvas would not be blurred!

Let's try using a layer to modify other layers below it.

#Create two red {{l|Circle Tool|circles}} and in the {{l|Layers Panel}} move them below, but not a part of, the inline canvas layer. Now our inline canvas layer (with rectangle and gradient) is in front of those two circles.{{l|Image:Adding-layers-tutorial-5.jpg|center}}
#Expand the inline canvas to show its contents, and select the top layer inside of it (should be the "Gradient" layer). This is where we want to insert the new layer. Create another circle filled with a black color. The black circle layer will be created over the gradient layer inside the inline canvas.{{l|Image:Adding-layers-tutorial-6.jpg|center}} {{l|Image:Adding-layers-tutorial-7.jpg}}
#Now, right click on the black circle layer in the {{l|Layers Panel}} and a popup menu will appear. The first item in that popup is '''New Layer'''. Inside of the '''New Layer''' menu, you'll see several categories of layers you could create, but what we want is a blur, so go to the Blur category and select the '''Blur''' layer. (so that would be "New Layer->{{l|Blur Layer Category|Blurs}}->{{l|Blur Layer|Blur}}"){{l|Image:Adding-layers-tutorial-8.jpg|center}}
#Well, it blurred... but something is not quite right - the outside edge of contents of the inline canvas is still sharp. It is doing this because the blend method of the blur defaulted to '''{{l|Blend Method#Composite|Composite}}''' (you can change the {{l|New Layer Defaults#Default Blend Method|default blend method}} for new layers from the {{l|New Layer Defaults}} section of the {{l|Toolbox}}). What we want is a blend method of '''{{l|Blend Method#Straight|Straight}}'''. Just select the blur layer, and change the {{l|Blend Method}} to '''{{l|Blend Method#Straight|Straight}}''' in the {{l|Params Panel}}. {{l|Image:Adding-layers-tutorial-3.jpg|32px|center}}

: NOTE: I will probably change the way that default blend methods are handled in the future--as the way it is currently handled seems to only create hassles like this.

{{l|Image:Adding-layers-tutorial-9.jpg}} {{l|Image:Adding-layers-tutorial-10.jpg}}

Ok, now we have all of the contents of the inline canvas blurred, but everything under it is sharp!

== Digging further... ==

If you care to look into Synfig's main menu 'Layer > New Layer' you will note quite a lot of different possibilities for making layers. For further reading about all the possibilities see {{l|Category:Layers|Layers}}