Synfig Studio :: Documentation - User contributions [en]

Doc:Flower Animation

2011-01-16T01:04:40Z

Mfwitten: [Bb][Ll]ine -> BLine

{{Title|Animating Shapes}}
{{Navigation|Category:Manual|Doc:Interface}}
[[Category:Tutorials]]
[[Category:Tutorials Intermediate]]
[[Category:Updated]]


== Basic settings ==

In this tutorial we will learn how to create a simple animation of a growing flower using [[Doc:Creating Shapes|BLines]].

[[Image:flower_0.png|right|frame]] Start Synfig Studio — a new animation will be created. If you already have Synfig Studio started, select {{c|File|New}} in the toolbox.

First, we need to create a gradient for a background. Click on the outline and fill colors in the toolbox to select the colors our gradient will have. You can also directly edit the gradient by clicking the gradient line in the toolbox.

Select the Gradient Tool and drag your cursor vertically across the canvas to fill it with the gradient.

Next, select the BLine Tool and in the Tool Options Panel, make sure that only {{Literal|Create Region BLine}} is checked. In the toolbox, set the fill color to green. Draw a kind of triangle with the BLine tool. To close the shape after drawing the 3 vertices, right click on the first vertex and choose {{Literal|Loop BLine}}.

Now that the trace of the form is closed, you can generate the proper form by selecting another tool or by pressing the button with the gear icon at the bottom of the Tool Options Panel.

[[Image:FlowerTutorialCanvas1.png|center|frame]]

This will be the base of the stem. You can tweak the tangent handles (red dots) a bit to make a rounder triangle. With the {{l|Transform Tool}}, right-click on each vertex and select {{Literal|Split Tangents}}, so the tangent handles of each vertex can be moved separately.
We're done with the basic settings.

[[Image:FlowerTutorialCanvas2.png|center|frame]]

== Animate the stem ==

In the Canvas Menu, select the carrot icon in the upper left hand corner, where the rulers intersect, and then select {{c|Edit|Properties}}. Go to the Time tab, set the {{Literal|End time}} to {{Literal|6s}} and click OK button.

Click at the beginning of the timetrack ({{Literal|0f}}), then, in the {{l|Keyframes Panel}} (the one with a key icon) click the button with a "+" icon (add a new keyframe).
{{l|Keyframe|Keyframes}} allow us to ''settle down'' the scene; i.e. on a keyframe, every element of the scene will have all its properties remembered.
Click again on the timetrack, at {{Literal|4.5s}}.
Press the green circle at the bottom right of the canvas (or whatever icon you have there, depending on your icon theme) to switch to the {{l|Animate Editing Mode}} (the circle is now red).

With the {{l|Transform Tool}}, select the green sprout, and move the upper vertex up to make a stem.
You can play with the vertex handles to bend the shape a bit if you want.

[[Image:FlowerTutorialCanvas3.png|center|frame]]

While you are still at {{Literal|4.5s}}, right-click on the stem border, close to the top, and choose {{Literal|Insert Item (smart)}}. Do the same on the other side of the stem. Right click on those new points and choose {{Literal|Split Tangents}}. Then try to make a shape that looks like the one on the image, to create the flower bud.

[[Image:FlowerTutorialCanvas4.png|center|frame]]

Now if you click on {{Literal|2s}} (for example), you'll see that the shape of the bud is slightly visible, even if the sprout is rather small, and even if the bud ducks are invisible.

[[Image:FlowerTutorialCanvas5.png|center|frame]]

Let's say we want the bud to appear only at 3.5s, and be full size at 4.5s.

Click on {{Literal|3.5s}} on the timetrack. Now take a look at the {{Literal|Params}} and {{Literal|Timetrack}} panels at the bottom. You'll see that each parameter in the Params Panel matches a row in the Timetrack Panel. The last parameter is the vertices list. Click on the small arrow on the left to unfold the list. You should see something like this:

[[Image:FlowerTutorialTimetrackParamsPanels6.png|center|frame]]

Each big green dot (or {{l|waypoints|waypoint}}) stands for a recorded value (here the vertices positions were recorded at 0f with the keyframe, and at 4s when we moved some vertices or vertices handles). The two vertices we added to make the bud are marked at {{Literal|DYN}} (dynamic). Right-click on them in the params list, and select "Mark Activepoint as Off".

The panel should now look like this, the grayed part being the part where the bud vertices have no effect on the stem.

[[Image:FlowerTutorial-7-WaypointsActivepointsOff.png|center|frame]]

For example if you click on {{Literal|2s}} or even {{Literal|3s}} now, the bud shape is not visible. It starts to appear only a little after 3.5s.

However, the shape of the stem may not look very nice during its growth between 0 and 4s. Make sure you're still in Animate Edit Mode, and tweak the shape at various moments in time, to get something you like.

The animation of the stem is now finished, but it still lacks the petals.
You can watch a preview of your animation: Go to {{c|File|Preview}}, validate, wait for the preview to be generated, and watch.

{{Note|Note|Previews are often pixelated and blurry, but the final render will be clean-cut. Higher quality previews are obtainable by using higher values for 'Zoom' and 'Frames per second' in the preview dialog window.}}

== Adding the petals ==

Now leave the {{Literal|Animate Editing Mode}} by clicking on the red circle at the right bottom of the canvas.

Change the fill color to pink, and create a petal with the BLine Tool. You'll notice that the green {{l|duck|duck}} that allows easy movement of a shape is at the center of the canvas. Select all the vertices of the petal with {{Shortcut|Ctrl|a}} and move them close to the green duck (with the Transform Tool), as shown.

[[Image:FlowerTutorial-8.png|center|frame]]

Then drag the green duck very close to the top of the bud. Hit {{Shortcut|Ctrl|a}} again to select all vertices of the petal and tweak it a bit with Rotate Tool. Also, in the {{l|Layers Panel}} select the petal layer and put it '''under''' the stem layer.
Click on the petal to select it, then ctrl-click on the stem. Both objects should be selected.

Now click on the vertex at the top of the stem and ctrl-click on the green duck of the petal (both should appear in a lighter color, as they are selected). Then right-click on the stem top vertex, and select {{Literal|Link}}. The petal will move a bit as the green duck is snapped on the stem vertex.

[[Image:FlowerTutorial-9.png|center|frame]]

Now that there's a link between the petal and the top of the stem, when the top of the stem moves, the petal will follow the move. (And if the green duck of the petal moves, the top of the stem will move, but we don't want to do that here.)

On the Layers Panel, select the newly created Petal layer and duplicate it (with the third button, on the bottom of the Layers Panel). On the canvas, press {{Shortcut|Ctrl|A}} to select all the vertices of the duplicated petal, and move them a little, so the petals are no longer overlaid. (Don't move the green duck, just the orange ones). Repeat the process several time, to get something looking like this image.

[[Image:FlowerTutorial-10.png|center|frame]]

Note that the duplicated petals are also linked to the stem.
If you go back to the first keyframe, you'll see that the petals are visible.
We don't want that. We want the petals to appear and bloom almost at the end of the growth.

== Hiding the petals ==



Let's say we want the petals to appear a little after 4 seconds in the animation, and be full size at 5 seconds, instead of being visible and full size all the time.

Switch to {{Literal|Animate Editing Mode}} again by clicking on the green circle at the bottom right of the canvas. But if we will go to {{Literal|4s}} and modify them, then they also change at {{Literal|5s}}. Because the shape/position of the petals is not fixated at this moment of time by any waypoints or keyframes. That means that we need a keyframe at {{Literal|5s}}. On the timetrack, click to place the cursor at 5 seconds. On the {{l|Keyframes Panel}}, click on "+" to add a new keyframe.

Now click on {{literal|4s}}, and on the Layers Panel, select all the petals layers (with ctrl+click), then press {{Shortcut|Ctrl|A}} to select all the petals vertices. Scale them down with the {{l|Scale Tool}}, and move them, so they are hidden by the stem, as shown.

[[Image:FlowerTutorial-11.png|center|frame]]

From 4s to 5s, the petals will now appear and bloom. But notice that we have a keyframe at 0s which also remembers petals shape. That makes the problem — the petals are still visible from the first keyframe to the 4s keyframe.
We could either make the petals tiny and hidden tweaking their size on every frame from 0s to 4s, or we could make them invisible on this interval.

Let's choose the second solution. To make things easier, we are going to {{l|encapsulate|encapsulate}} the petal layers into an {{l|Paste Canvas|Inline Canvas}}. With all the petal layers selected, right-click on them on the Layers Panel and select {{Literal|Encapsulate}}. You can rename the layers to
make things more understandable.

[[Image:FlowerTutorial-12.png|center|frame]]

Select the "Petals" inline canvas and jump to the first keyframe. In the Param tabs, set the {{Literal|Amount}} value to {{Literal|0}}. The petals are now invisible on that keyframe.
Note that two waypoints were added in front of the {{Literal|Amount}} parameter, one at 0s and the other at 5s. Drag the 5s waypoint to 4s, so that the opacity of the petals will be 1 at 4s.

[[Image:FlowerTutorial-13.png|center|frame]]

There is still one problem left: from 0s to 4s, the opacity of the petals slowly increases, making the petals visible when they shouldn't. To solve this, we will change the Amount interpolation method. Right click on the Amount waypoint at 0f, and select {{Literal|Edit}}. A new dialog will appear, in which you can choose the In and Out interpolation. Set the Out Interpolation to {{Literal|Constant}}.

[[Image:FlowerTutorial-14.png|center|frame]]

{{Note|Tip|You can also change waypoint Out interpolation by right-clicking on it and selecting {{c|Out|Constant}}.}}
This means that ''after'' that waypoint, the Amount value will remain constant, until another waypoint is encountered. So from 0f to 4s the Amount value will be equal to 0, and at 4s it will suddenly changed to 1, and make the petals visible, as expected. Alternatively, we could have achieved the same effect by setting the In Interpolation of the waypoint at 4s to {{Literal|Constant}}.

Notice how (half of) the waypoint changes from a green circle (meaning smooth animation of the amount parameter) to a red step (meaning that the amount parameter is suddenly stepped).

Now you're done.
The stem grows for 4.5 seconds and then stays still the last 1.5 seconds.
The petals are hidden until 4 seconds, and then grow quickly between 4 and 5 seconds, and stay still the last 1 second too.

Click on {{c|File|Render}} to render your animation. Select any format you want, and ensure that {{Literal|Use current frame}} option is unchecked (otherwise, one frame only will be rendered).

Doc:Flower Animation

2011-01-16T00:57:13Z

Mfwitten: Removed extra space (it doesn't have any impact on the display or functionality)

{{Title|Animating Shapes}}
{{Navigation|Category:Manual|Doc:Interface}}
[[Category:Tutorials]]
[[Category:Tutorials Intermediate]]
[[Category:Updated]]


== Basic settings ==

In this tutorial we will learn how to create a simple animation of a growing flower using blines.

[[Image:flower_0.png|right|frame]] Start Synfig Studio — a new animation will be created. If you already have Synfig Studio started, select {{c|File|New}} in the toolbox.

First, we need to create a gradient for a background. Click on the outline and fill colors in the toolbox to select the colors our gradient will have. You can also directly edit the gradient by clicking the gradient line in the toolbox.

Select the Gradient Tool and drag your cursor vertically across the canvas to fill it with the gradient.

Next, select the Bline Tool and in the Tool Options Panel, make sure that only {{Literal|Create Region BLine}} is checked. In the toolbox, set the fill color to green. Draw a kind of triangle with the Bline tool. To close the shape after drawing the 3 vertices, right click on the first vertex and choose {{Literal|Loop Bline}}.

Now that the trace of the form is closed, you can generate the proper form by selecting another tool or by pressing the button with the gear icon at the bottom of the Tool Options Panel.

[[Image:FlowerTutorialCanvas1.png|center|frame]]

This will be the base of the stem. You can tweak the tangent handles (red dots) a bit to make a rounder triangle. With the {{l|Transform Tool}}, right-click on each vertex and select {{Literal|Split Tangents}}, so the tangent handles of each vertex can be moved separately.
We're done with the basic settings.

[[Image:FlowerTutorialCanvas2.png|center|frame]]

== Animate the stem ==

In the Canvas Menu, select the carrot icon in the upper left hand corner, where the rulers intersect, and then select {{c|Edit|Properties}}. Go to the Time tab, set the {{Literal|End time}} to {{Literal|6s}} and click OK button.

Click at the beginning of the timetrack ({{Literal|0f}}), then, in the {{l|Keyframes Panel}} (the one with a key icon) click the button with a "+" icon (add a new keyframe).
{{l|Keyframe|Keyframes}} allow us to ''settle down'' the scene; i.e. on a keyframe, every element of the scene will have all its properties remembered.
Click again on the timetrack, at {{Literal|4.5s}}.
Press the green circle at the bottom right of the canvas (or whatever icon you have there, depending on your icon theme) to switch to the {{l|Animate Editing Mode}} (the circle is now red).

With the {{l|Transform Tool}}, select the green sprout, and move the upper vertex up to make a stem.
You can play with the vertex handles to bend the shape a bit if you want.

[[Image:FlowerTutorialCanvas3.png|center|frame]]

While you are still at {{Literal|4.5s}}, right-click on the stem border, close to the top, and choose {{Literal|Insert Item (smart)}}. Do the same on the other side of the stem. Right click on those new points and choose {{Literal|Split Tangents}}. Then try to make a shape that looks like the one on the image, to create the flower bud.

[[Image:FlowerTutorialCanvas4.png|center|frame]]

Now if you click on {{Literal|2s}} (for example), you'll see that the shape of the bud is slightly visible, even if the sprout is rather small, and even if the bud ducks are invisible.

[[Image:FlowerTutorialCanvas5.png|center|frame]]

Let's say we want the bud to appear only at 3.5s, and be full size at 4.5s.

Click on {{Literal|3.5s}} on the timetrack. Now take a look at the {{Literal|Params}} and {{Literal|Timetrack}} panels at the bottom. You'll see that each parameter in the Params Panel matches a row in the Timetrack Panel. The last parameter is the vertices list. Click on the small arrow on the left to unfold the list. You should see something like this:

[[Image:FlowerTutorialTimetrackParamsPanels6.png|center|frame]]

Each big green dot (or {{l|waypoints|waypoint}}) stands for a recorded value (here the vertices positions were recorded at 0f with the keyframe, and at 4s when we moved some vertices or vertices handles). The two vertices we added to make the bud are marked at {{Literal|DYN}} (dynamic). Right-click on them in the params list, and select "Mark Activepoint as Off".

The panel should now look like this, the grayed part being the part where the bud vertices have no effect on the stem.

[[Image:FlowerTutorial-7-WaypointsActivepointsOff.png|center|frame]]

For example if you click on {{Literal|2s}} or even {{Literal|3s}} now, the bud shape is not visible. It starts to appear only a little after 3.5s.

However, the shape of the stem may not look very nice during its growth between 0 and 4s. Make sure you're still in Animate Edit Mode, and tweak the shape at various moments in time, to get something you like.

The animation of the stem is now finished, but it still lacks the petals.
You can watch a preview of your animation: Go to {{c|File|Preview}}, validate, wait for the preview to be generated, and watch.

{{Note|Note|Previews are often pixelated and blurry, but the final render will be clean-cut. Higher quality previews are obtainable by using higher values for 'Zoom' and 'Frames per second' in the preview dialog window.}}

== Adding the petals ==

Now leave the {{Literal|Animate Editing Mode}} by clicking on the red circle at the right bottom of the canvas.

Change the fill color to pink, and create a petal with the BLine Tool. You'll notice that the green {{l|duck|duck}} that allows easy movement of a shape is at the center of the canvas. Select all the vertices of the petal with {{Shortcut|Ctrl|a}} and move them close to the green duck (with the Transform Tool), as shown.

[[Image:FlowerTutorial-8.png|center|frame]]

Then drag the green duck very close to the top of the bud. Hit {{Shortcut|Ctrl|a}} again to select all vertices of the petal and tweak it a bit with Rotate Tool. Also, in the {{l|Layers Panel}} select the petal layer and put it '''under''' the stem layer.
Click on the petal to select it, then ctrl-click on the stem. Both objects should be selected.

Now click on the vertex at the top of the stem and ctrl-click on the green duck of the petal (both should appear in a lighter color, as they are selected). Then right-click on the stem top vertex, and select {{Literal|Link}}. The petal will move a bit as the green duck is snapped on the stem vertex.

[[Image:FlowerTutorial-9.png|center|frame]]

Now that there's a link between the petal and the top of the stem, when the top of the stem moves, the petal will follow the move. (And if the green duck of the petal moves, the top of the stem will move, but we don't want to do that here.)

On the Layers Panel, select the newly created Petal layer and duplicate it (with the third button, on the bottom of the Layers Panel). On the canvas, press {{Shortcut|Ctrl|A}} to select all the vertices of the duplicated petal, and move them a little, so the petals are no longer overlaid. (Don't move the green duck, just the orange ones). Repeat the process several time, to get something looking like this image.

[[Image:FlowerTutorial-10.png|center|frame]]

Note that the duplicated petals are also linked to the stem.
If you go back to the first keyframe, you'll see that the petals are visible.
We don't want that. We want the petals to appear and bloom almost at the end of the growth.

== Hiding the petals ==



Let's say we want the petals to appear a little after 4 seconds in the animation, and be full size at 5 seconds, instead of being visible and full size all the time.

Switch to {{Literal|Animate Editing Mode}} again by clicking on the green circle at the bottom right of the canvas. But if we will go to {{Literal|4s}} and modify them, then they also change at {{Literal|5s}}. Because the shape/position of the petals is not fixated at this moment of time by any waypoints or keyframes. That means that we need a keyframe at {{Literal|5s}}. On the timetrack, click to place the cursor at 5 seconds. On the {{l|Keyframes Panel}}, click on "+" to add a new keyframe.

Now click on {{literal|4s}}, and on the Layers Panel, select all the petals layers (with ctrl+click), then press {{Shortcut|Ctrl|A}} to select all the petals vertices. Scale them down with the {{l|Scale Tool}}, and move them, so they are hidden by the stem, as shown.

[[Image:FlowerTutorial-11.png|center|frame]]

From 4s to 5s, the petals will now appear and bloom. But notice that we have a keyframe at 0s which also remembers petals shape. That makes the problem — the petals are still visible from the first keyframe to the 4s keyframe.
We could either make the petals tiny and hidden tweaking their size on every frame from 0s to 4s, or we could make them invisible on this interval.

Let's choose the second solution. To make things easier, we are going to {{l|encapsulate|encapsulate}} the petal layers into an {{l|Paste Canvas|Inline Canvas}}. With all the petal layers selected, right-click on them on the Layers Panel and select {{Literal|Encapsulate}}. You can rename the layers to
make things more understandable.

[[Image:FlowerTutorial-12.png|center|frame]]

Select the "Petals" inline canvas and jump to the first keyframe. In the Param tabs, set the {{Literal|Amount}} value to {{Literal|0}}. The petals are now invisible on that keyframe.
Note that two waypoints were added in front of the {{Literal|Amount}} parameter, one at 0s and the other at 5s. Drag the 5s waypoint to 4s, so that the opacity of the petals will be 1 at 4s.

[[Image:FlowerTutorial-13.png|center|frame]]

There is still one problem left: from 0s to 4s, the opacity of the petals slowly increases, making the petals visible when they shouldn't. To solve this, we will change the Amount interpolation method. Right click on the Amount waypoint at 0f, and select {{Literal|Edit}}. A new dialog will appear, in which you can choose the In and Out interpolation. Set the Out Interpolation to {{Literal|Constant}}.

[[Image:FlowerTutorial-14.png|center|frame]]

{{Note|Tip|You can also change waypoint Out interpolation by right-clicking on it and selecting {{c|Out|Constant}}.}}
This means that ''after'' that waypoint, the Amount value will remain constant, until another waypoint is encountered. So from 0f to 4s the Amount value will be equal to 0, and at 4s it will suddenly changed to 1, and make the petals visible, as expected. Alternatively, we could have achieved the same effect by setting the In Interpolation of the waypoint at 4s to {{Literal|Constant}}.

Notice how (half of) the waypoint changes from a green circle (meaning smooth animation of the amount parameter) to a red step (meaning that the amount parameter is suddenly stepped).

Now you're done.
The stem grows for 4.5 seconds and then stays still the last 1.5 seconds.
The petals are hidden until 4 seconds, and then grow quickly between 4 and 5 seconds, and stay still the last 1 second too.

Click on {{c|File|Render}} to render your animation. Select any format you want, and ensure that {{Literal|Use current frame}} option is unchecked (otherwise, one frame only will be rendered).

Doc:Flower Animation

2011-01-16T00:52:08Z

Mfwitten: Add 'Doc:Interface' to the navigation box; it's quite silly to require going back to the manual TOC.

{{Title|Animating Shapes}}
{{Navigation|Category:Manual|Doc:Interface }}
[[Category:Tutorials]]
[[Category:Tutorials Intermediate]]
[[Category:Updated]]


== Basic settings ==

In this tutorial we will learn how to create a simple animation of a growing flower using blines.

[[Image:flower_0.png|right|frame]] Start Synfig Studio — a new animation will be created. If you already have Synfig Studio started, select {{c|File|New}} in the toolbox.

First, we need to create a gradient for a background. Click on the outline and fill colors in the toolbox to select the colors our gradient will have. You can also directly edit the gradient by clicking the gradient line in the toolbox.

Select the Gradient Tool and drag your cursor vertically across the canvas to fill it with the gradient.

Next, select the Bline Tool and in the Tool Options Panel, make sure that only {{Literal|Create Region BLine}} is checked. In the toolbox, set the fill color to green. Draw a kind of triangle with the Bline tool. To close the shape after drawing the 3 vertices, right click on the first vertex and choose {{Literal|Loop Bline}}.

Now that the trace of the form is closed, you can generate the proper form by selecting another tool or by pressing the button with the gear icon at the bottom of the Tool Options Panel.

[[Image:FlowerTutorialCanvas1.png|center|frame]]

This will be the base of the stem. You can tweak the tangent handles (red dots) a bit to make a rounder triangle. With the {{l|Transform Tool}}, right-click on each vertex and select {{Literal|Split Tangents}}, so the tangent handles of each vertex can be moved separately.
We're done with the basic settings.

[[Image:FlowerTutorialCanvas2.png|center|frame]]

== Animate the stem ==

In the Canvas Menu, select the carrot icon in the upper left hand corner, where the rulers intersect, and then select {{c|Edit|Properties}}. Go to the Time tab, set the {{Literal|End time}} to {{Literal|6s}} and click OK button.

Click at the beginning of the timetrack ({{Literal|0f}}), then, in the {{l|Keyframes Panel}} (the one with a key icon) click the button with a "+" icon (add a new keyframe).
{{l|Keyframe|Keyframes}} allow us to ''settle down'' the scene; i.e. on a keyframe, every element of the scene will have all its properties remembered.
Click again on the timetrack, at {{Literal|4.5s}}.
Press the green circle at the bottom right of the canvas (or whatever icon you have there, depending on your icon theme) to switch to the {{l|Animate Editing Mode}} (the circle is now red).

With the {{l|Transform Tool}}, select the green sprout, and move the upper vertex up to make a stem.
You can play with the vertex handles to bend the shape a bit if you want.

[[Image:FlowerTutorialCanvas3.png|center|frame]]

While you are still at {{Literal|4.5s}}, right-click on the stem border, close to the top, and choose {{Literal|Insert Item (smart)}}. Do the same on the other side of the stem. Right click on those new points and choose {{Literal|Split Tangents}}. Then try to make a shape that looks like the one on the image, to create the flower bud.

[[Image:FlowerTutorialCanvas4.png|center|frame]]

Now if you click on {{Literal|2s}} (for example), you'll see that the shape of the bud is slightly visible, even if the sprout is rather small, and even if the bud ducks are invisible.

[[Image:FlowerTutorialCanvas5.png|center|frame]]

Let's say we want the bud to appear only at 3.5s, and be full size at 4.5s.

Click on {{Literal|3.5s}} on the timetrack. Now take a look at the {{Literal|Params}} and {{Literal|Timetrack}} panels at the bottom. You'll see that each parameter in the Params Panel matches a row in the Timetrack Panel. The last parameter is the vertices list. Click on the small arrow on the left to unfold the list. You should see something like this:

[[Image:FlowerTutorialTimetrackParamsPanels6.png|center|frame]]

Each big green dot (or {{l|waypoints|waypoint}}) stands for a recorded value (here the vertices positions were recorded at 0f with the keyframe, and at 4s when we moved some vertices or vertices handles). The two vertices we added to make the bud are marked at {{Literal|DYN}} (dynamic). Right-click on them in the params list, and select "Mark Activepoint as Off".

The panel should now look like this, the grayed part being the part where the bud vertices have no effect on the stem.

[[Image:FlowerTutorial-7-WaypointsActivepointsOff.png|center|frame]]

For example if you click on {{Literal|2s}} or even {{Literal|3s}} now, the bud shape is not visible. It starts to appear only a little after 3.5s.

However, the shape of the stem may not look very nice during its growth between 0 and 4s. Make sure you're still in Animate Edit Mode, and tweak the shape at various moments in time, to get something you like.

The animation of the stem is now finished, but it still lacks the petals.
You can watch a preview of your animation: Go to {{c|File|Preview}}, validate, wait for the preview to be generated, and watch.

{{Note|Note|Previews are often pixelated and blurry, but the final render will be clean-cut. Higher quality previews are obtainable by using higher values for 'Zoom' and 'Frames per second' in the preview dialog window.}}

== Adding the petals ==

Now leave the {{Literal|Animate Editing Mode}} by clicking on the red circle at the right bottom of the canvas.

Change the fill color to pink, and create a petal with the BLine Tool. You'll notice that the green {{l|duck|duck}} that allows easy movement of a shape is at the center of the canvas. Select all the vertices of the petal with {{Shortcut|Ctrl|a}} and move them close to the green duck (with the Transform Tool), as shown.

[[Image:FlowerTutorial-8.png|center|frame]]

Then drag the green duck very close to the top of the bud. Hit {{Shortcut|Ctrl|a}} again to select all vertices of the petal and tweak it a bit with Rotate Tool. Also, in the {{l|Layers Panel}} select the petal layer and put it '''under''' the stem layer.
Click on the petal to select it, then ctrl-click on the stem. Both objects should be selected.

Now click on the vertex at the top of the stem and ctrl-click on the green duck of the petal (both should appear in a lighter color, as they are selected). Then right-click on the stem top vertex, and select {{Literal|Link}}. The petal will move a bit as the green duck is snapped on the stem vertex.

[[Image:FlowerTutorial-9.png|center|frame]]

Now that there's a link between the petal and the top of the stem, when the top of the stem moves, the petal will follow the move. (And if the green duck of the petal moves, the top of the stem will move, but we don't want to do that here.)

On the Layers Panel, select the newly created Petal layer and duplicate it (with the third button, on the bottom of the Layers Panel). On the canvas, press {{Shortcut|Ctrl|A}} to select all the vertices of the duplicated petal, and move them a little, so the petals are no longer overlaid. (Don't move the green duck, just the orange ones). Repeat the process several time, to get something looking like this image.

[[Image:FlowerTutorial-10.png|center|frame]]

Note that the duplicated petals are also linked to the stem.
If you go back to the first keyframe, you'll see that the petals are visible.
We don't want that. We want the petals to appear and bloom almost at the end of the growth.

== Hiding the petals ==



Let's say we want the petals to appear a little after 4 seconds in the animation, and be full size at 5 seconds, instead of being visible and full size all the time.

Switch to {{Literal|Animate Editing Mode}} again by clicking on the green circle at the bottom right of the canvas. But if we will go to {{Literal|4s}} and modify them, then they also change at {{Literal|5s}}. Because the shape/position of the petals is not fixated at this moment of time by any waypoints or keyframes. That means that we need a keyframe at {{Literal|5s}}. On the timetrack, click to place the cursor at 5 seconds. On the {{l|Keyframes Panel}}, click on "+" to add a new keyframe.

Now click on {{literal|4s}}, and on the Layers Panel, select all the petals layers (with ctrl+click), then press {{Shortcut|Ctrl|A}} to select all the petals vertices. Scale them down with the {{l|Scale Tool}}, and move them, so they are hidden by the stem, as shown.

[[Image:FlowerTutorial-11.png|center|frame]]

From 4s to 5s, the petals will now appear and bloom. But notice that we have a keyframe at 0s which also remembers petals shape. That makes the problem — the petals are still visible from the first keyframe to the 4s keyframe.
We could either make the petals tiny and hidden tweaking their size on every frame from 0s to 4s, or we could make them invisible on this interval.

Let's choose the second solution. To make things easier, we are going to {{l|encapsulate|encapsulate}} the petal layers into an {{l|Paste Canvas|Inline Canvas}}. With all the petal layers selected, right-click on them on the Layers Panel and select {{Literal|Encapsulate}}. You can rename the layers to
make things more understandable.

[[Image:FlowerTutorial-12.png|center|frame]]

Select the "Petals" inline canvas and jump to the first keyframe. In the Param tabs, set the {{Literal|Amount}} value to {{Literal|0}}. The petals are now invisible on that keyframe.
Note that two waypoints were added in front of the {{Literal|Amount}} parameter, one at 0s and the other at 5s. Drag the 5s waypoint to 4s, so that the opacity of the petals will be 1 at 4s.

[[Image:FlowerTutorial-13.png|center|frame]]

There is still one problem left: from 0s to 4s, the opacity of the petals slowly increases, making the petals visible when they shouldn't. To solve this, we will change the Amount interpolation method. Right click on the Amount waypoint at 0f, and select {{Literal|Edit}}. A new dialog will appear, in which you can choose the In and Out interpolation. Set the Out Interpolation to {{Literal|Constant}}.

[[Image:FlowerTutorial-14.png|center|frame]]

{{Note|Tip|You can also change waypoint Out interpolation by right-clicking on it and selecting {{c|Out|Constant}}.}}
This means that ''after'' that waypoint, the Amount value will remain constant, until another waypoint is encountered. So from 0f to 4s the Amount value will be equal to 0, and at 4s it will suddenly changed to 1, and make the petals visible, as expected. Alternatively, we could have achieved the same effect by setting the In Interpolation of the waypoint at 4s to {{Literal|Constant}}.

Notice how (half of) the waypoint changes from a green circle (meaning smooth animation of the amount parameter) to a red step (meaning that the amount parameter is suddenly stepped).

Now you're done.
The stem grows for 4.5 seconds and then stays still the last 1.5 seconds.
The petals are hidden until 4 seconds, and then grow quickly between 4 and 5 seconds, and stay still the last 1 second too.

Click on {{c|File|Render}} to render your animation. Select any format you want, and ensure that {{Literal|Use current frame}} option is unchecked (otherwise, one frame only will be rendered).

Doc:Creating Shapes

2011-01-14T21:18:39Z

Mfwitten: /* Editing BLines */ Better wording

{{Title|Creating Shapes}}
[[Category:Manual]]
[[Category:Tutorials]]
[[Category:Tutorials Basic]]
[[Category:Updated]]
{{Navigation|Category:Manual|Doc:Flower Animation}}


== Introduction ==

Basic primitives such as circles or rectangles are all great, but they are pretty much geometrically inflexible. What about creating more complex shapes? To do this, we use the BLine Tool.

== BLine Tool ==

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.

[[Image:Toolbox Reset Colors Button.png|right|frame|Reset Colors button in the Toolbox]] Before we start with the BLine tutorial, let's look at some additional notes on how Synfig works. When you click on the {{l|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 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 BLine Tool — changing the selection afterward will automatically swap you back to the Transform Tool.

Now, go ahead and click on the {{Literal|Reset Colors}} 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. Also, set the {{l|New Layer Defaults#Default Line Width|default line width}} to something nice and thick — 10pt should do the trick.

After you switched to BLine tool, take a look at the Tool Options Panel. Make sure that only {{Literal|Create Region BLine}}, {{Literal|Create Outline BLine}} and {{Literal|Link Origins}} are checked.

Clicking with your mouse in the canvas will place vertices. While you are placing a vertex, you can drag out its tangent by dragging the mouse. Do this over and over, and you construct a BLine.

Keep in mind, however, that during this construction, there is nothing stopping you from just moving it if you don't like where you placed a vertex or a tangent. Honest! If you want to remove a vertex, right click on it and select {{Literal|Delete Vertex}}. Want to split the tangents? Right click on the tangent and hit {{Literal|Split Tangents}}. Want to loop the BLine? Right click on the first vertex and select {{Literal|Loop BLine}}.

[[Image:Creating-shapes-2-bline-construction.png|center|frame]]

When you are finished placing vertices, you must exit construction mode in order to actually create the BLine layer(s); there are 2 ways to do this:
#Switch to another tool.
#Press the {{Literal|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 switch to the {{l|Transform Tool}}, because we are done with the BLine Tool.

[[Image:Creating-shapes-3-bline-region-outline.png|center|frame]]

== Editing BLines ==

Ok, we now have a nice pretty white region with a thick black outline. Since we checked {{Literal|Create Region BLine}} and {{Literal|Create Outline BLine}} in previous steps, 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.

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 {{Literal|Remove Item (smart)}}. Want to insert a point somewhere? Right click on the segment where you want to insert something and hit {{Literal|Insert item (smart)}}.

{{Note|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 to which the tangents are attached. 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 {{l|Doc:Adding Layers|previous tutorial}}, you can {{l|encapsulate|encapsulate}} layers into hierarchy.

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 Outline Layer, the Region Layer has no width data) and tweaking with the width ducks. By default, these are masked. To show them, press {{Shortcut|alt|5}} or click {{Literal|Toggle width ducks}} button at the top of the canvas window (the fifth one from the left). Repeat to hide them again. You can also see other things to mask via the {{l|Canvas Menu Caret}}: {{c|View|Show/Hide Ducks}}.

== Using tablet to draw shapes ==

If you have a [http://en.wikipedia.org/wiki/Graphics_tablet graphic tablet] you can use Draw Tool to create BLines.

Synfig Studio supports pressure sensitivity, but you need to configure it first. Go to {{c|File|Input Devices...}} from toolbox menu. In the Input dialog find your tablet's stylus device and set its mode to {{Literal|Screen}}. Click {{Literal|Save}} and then {{Literal|Close}}.

Now grab your stylus, create a new file and click on the Draw Tool button in the toolbox. Set the default line width value to be big enough — say, 15pt — otherwise you will not notice any pressure sensitivity effect. Choose brown as the default fill color.

{{Note|Note|Steps above should be done with the stylus of your tablet, not the mouse. Synfig Studio remembers settings for each input device independently. That's why if you set those options with your mouse device they will not have any effect when you switch to stylus.}}
In the Tool Options Panel, make sure that you have the same options as shown on the screenshot below.

[[Image:DrawToolOptions.png|center|frame]]

Now let's draw some thing like a curvy mountain background. Start drawing a line from the left border to the middle of the canvas. Try to vary your stylus pressure while you are drawing. Stop near the center of the canvas. This is your first line. Notice the new outline layer created in the Layers Panel.

[[Image:Creating-shapes-4-draw.png|center|frame]]

Point your stylus at the last duck of your new BLine and continue drawing to the right border of the canvas. When you finish, look at the Layers Panel again. There's still only one outline layer. Synfig Studio is smart enough to figure out that you don't need a new outline layer and properly extends the last one. You can extend the BLine from both ends, but if you start drawing from any other place of the canvas a new outline layer will be created. Though your first line will remain selected and nothing stops you from extending it later.

Back to our artwork. In the Tool Panel hit the button with the bucket icon to fill the outline we just created. A region layer will appear at the top of the layer we are working with. Select the outline layer and press the {{Literal|Raise Layer}} button in the layers panel to put the outline layer on top of the region.

[[Image:Creating-shapes-5-draw.png|center|frame]]

Extend a line from both sides down to the corners of the canvas to make the fill appear at the bottom. Great.

[[Image:Creating-shapes-6-draw.png|center|frame]]

Go ahead and add a few more lines on top of the filled area to give it a mountain-like look. If brown ducks are in your way, you can hide them by clicking the {{Literal|Toggle vertex ducks}} button at the top of the canvas window (the second one from the left).

[[Image:Creating-shapes-7-draw.png|center|frame]]

{{Note|Warning!|Don't use {{Shortcut|Alt|2}} shortcut to turn off visibility of vertex ducks while you using Draw Tool. There's a bug that will cause Synfig Studio to hang.}}
Draw tool is great for drawing complex shapes, but you end up with a bunch of ducks, which are hard to manipulate with the Transform Tool in the way we described above. There are two solutions here.

First, you can increase the {{Literal|Smooth}} value in the Tool Options Dialog while using Draw Tool. That will reduce the count of vertices produced at drawing time, but will make your shape less detailed.

Second, you can use Smooth Move Tool to deform an existing shape. Go for it and click the Smooth Move Tool button in the toolbox. The trick about this tool is that it affects ''selected ducks only''. Press and hold your left mouse button in an empty place of the canvas. Drag to create a selection box. Release the mouse button when you are done. Or just hit {{Shortcut|Ctrl|a}} to select all ducks. Now you can deform the selected segments of BLines. You can change the size of the influence area by tweaking {{Literal|Radius}} in the Tool Options Panel.

What about outline width? There is a Width Tool for that purpose. It is designed for increasing or decreasing the width of a line much like you would with a pencil on paper. Click the Width Tool button in the toolbox, move your stylus over the line you want to change, press and move the cursor back and forth along the line, like you are scratching something. The width of the outline will be increased at the places where you moved the cursor. If you want to decrease the width, just hold "Ctrl" while scratching. Easy!

If you don't want Width Ducks to be displayed, during usage of the Width Tool, just turn them off by pressing the {{Literal|Toggle width ducks}} button at the top of the canvas window.

{{Note|Warning!|Don't use {{Shortcut|Alt|5}} shortcut to turn off visibility of width ducks while you using Width Tool. There's a bug that will cause Synfig Studio to hang.}}

== Other ways to create BLines ==

Is that all? Not yet. You can use Circle, Rectangle, Star and Polygon tools to create BLines too. Just check the {{Literal|Create Outline BLine}} and {{Literal|Create Region BLine}} options in the Tool Options Panel when using those tools.

Creating geometric primitive as BLine gives you a better control over it's shape and look. For example, if you want a deformed star, then you can use the Star Tool to create it as outline and region BLines and then use the Transform Tool to deform it.

Now you are ready for the {{L|Doc:Flower Animation|last tutorial}} in this section. Hang on!

Doc:Creating Shapes

2011-01-14T21:15:42Z

Mfwitten: [Bb]line -> BLine

{{Title|Creating Shapes}}
[[Category:Manual]]
[[Category:Tutorials]]
[[Category:Tutorials Basic]]
[[Category:Updated]]
{{Navigation|Category:Manual|Doc:Flower Animation}}


== Introduction ==

Basic primitives such as circles or rectangles are all great, but they are pretty much geometrically inflexible. What about creating more complex shapes? To do this, we use the BLine Tool.

== BLine Tool ==

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.

[[Image:Toolbox Reset Colors Button.png|right|frame|Reset Colors button in the Toolbox]] Before we start with the BLine tutorial, let's look at some additional notes on how Synfig works. When you click on the {{l|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 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 BLine Tool — changing the selection afterward will automatically swap you back to the Transform Tool.

Now, go ahead and click on the {{Literal|Reset Colors}} 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. Also, set the {{l|New Layer Defaults#Default Line Width|default line width}} to something nice and thick — 10pt should do the trick.

After you switched to BLine tool, take a look at the Tool Options Panel. Make sure that only {{Literal|Create Region BLine}}, {{Literal|Create Outline BLine}} and {{Literal|Link Origins}} are checked.

Clicking with your mouse in the canvas will place vertices. While you are placing a vertex, you can drag out its tangent by dragging the mouse. Do this over and over, and you construct a BLine.

Keep in mind, however, that during this construction, there is nothing stopping you from just moving it if you don't like where you placed a vertex or a tangent. Honest! If you want to remove a vertex, right click on it and select {{Literal|Delete Vertex}}. Want to split the tangents? Right click on the tangent and hit {{Literal|Split Tangents}}. Want to loop the BLine? Right click on the first vertex and select {{Literal|Loop BLine}}.

[[Image:Creating-shapes-2-bline-construction.png|center|frame]]

When you are finished placing vertices, you must exit construction mode in order to actually create the BLine layer(s); there are 2 ways to do this:
#Switch to another tool.
#Press the {{Literal|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 switch to the {{l|Transform Tool}}, because we are done with the BLine Tool.

[[Image:Creating-shapes-3-bline-region-outline.png|center|frame]]

== Editing BLines ==

Ok, we now have a nice pretty white region with a thick black outline. Since we checked {{Literal|Create Region BLine}} and {{Literal|Create Outline BLine}} in previous steps, 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.

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 {{Literal|Remove Item (smart)}}. Want to insert a point somewhere? Right click on the segment where you want to insert something and hit {{Literal|Insert item (smart)}}.

{{Note|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 {{l|Doc:Adding Layers|previous tutorial}}, you can {{l|encapsulate|encapsulate}} layers into hierarchy.

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 Outline Layer, the Region Layer has no width data) and tweaking with the width ducks. By default, these are masked. To show them, press {{Shortcut|alt|5}} or click {{Literal|Toggle width ducks}} button at the top of the canvas window (the fifth one from the left). Repeat to hide them again. You can also see other things to mask via the {{l|Canvas Menu Caret}}: {{c|View|Show/Hide Ducks}}.

== Using tablet to draw shapes ==

If you have a [http://en.wikipedia.org/wiki/Graphics_tablet graphic tablet] you can use Draw Tool to create BLines.

Synfig Studio supports pressure sensitivity, but you need to configure it first. Go to {{c|File|Input Devices...}} from toolbox menu. In the Input dialog find your tablet's stylus device and set its mode to {{Literal|Screen}}. Click {{Literal|Save}} and then {{Literal|Close}}.

Now grab your stylus, create a new file and click on the Draw Tool button in the toolbox. Set the default line width value to be big enough — say, 15pt — otherwise you will not notice any pressure sensitivity effect. Choose brown as the default fill color.

{{Note|Note|Steps above should be done with the stylus of your tablet, not the mouse. Synfig Studio remembers settings for each input device independently. That's why if you set those options with your mouse device they will not have any effect when you switch to stylus.}}
In the Tool Options Panel, make sure that you have the same options as shown on the screenshot below.

[[Image:DrawToolOptions.png|center|frame]]

Now let's draw some thing like a curvy mountain background. Start drawing a line from the left border to the middle of the canvas. Try to vary your stylus pressure while you are drawing. Stop near the center of the canvas. This is your first line. Notice the new outline layer created in the Layers Panel.

[[Image:Creating-shapes-4-draw.png|center|frame]]

Point your stylus at the last duck of your new BLine and continue drawing to the right border of the canvas. When you finish, look at the Layers Panel again. There's still only one outline layer. Synfig Studio is smart enough to figure out that you don't need a new outline layer and properly extends the last one. You can extend the BLine from both ends, but if you start drawing from any other place of the canvas a new outline layer will be created. Though your first line will remain selected and nothing stops you from extending it later.

Back to our artwork. In the Tool Panel hit the button with the bucket icon to fill the outline we just created. A region layer will appear at the top of the layer we are working with. Select the outline layer and press the {{Literal|Raise Layer}} button in the layers panel to put the outline layer on top of the region.

[[Image:Creating-shapes-5-draw.png|center|frame]]

Extend a line from both sides down to the corners of the canvas to make the fill appear at the bottom. Great.

[[Image:Creating-shapes-6-draw.png|center|frame]]

Go ahead and add a few more lines on top of the filled area to give it a mountain-like look. If brown ducks are in your way, you can hide them by clicking the {{Literal|Toggle vertex ducks}} button at the top of the canvas window (the second one from the left).

[[Image:Creating-shapes-7-draw.png|center|frame]]

{{Note|Warning!|Don't use {{Shortcut|Alt|2}} shortcut to turn off visibility of vertex ducks while you using Draw Tool. There's a bug that will cause Synfig Studio to hang.}}
Draw tool is great for drawing complex shapes, but you end up with a bunch of ducks, which are hard to manipulate with the Transform Tool in the way we described above. There are two solutions here.

First, you can increase the {{Literal|Smooth}} value in the Tool Options Dialog while using Draw Tool. That will reduce the count of vertices produced at drawing time, but will make your shape less detailed.

Second, you can use Smooth Move Tool to deform an existing shape. Go for it and click the Smooth Move Tool button in the toolbox. The trick about this tool is that it affects ''selected ducks only''. Press and hold your left mouse button in an empty place of the canvas. Drag to create a selection box. Release the mouse button when you are done. Or just hit {{Shortcut|Ctrl|a}} to select all ducks. Now you can deform the selected segments of BLines. You can change the size of the influence area by tweaking {{Literal|Radius}} in the Tool Options Panel.

What about outline width? There is a Width Tool for that purpose. It is designed for increasing or decreasing the width of a line much like you would with a pencil on paper. Click the Width Tool button in the toolbox, move your stylus over the line you want to change, press and move the cursor back and forth along the line, like you are scratching something. The width of the outline will be increased at the places where you moved the cursor. If you want to decrease the width, just hold "Ctrl" while scratching. Easy!

If you don't want Width Ducks to be displayed, during usage of the Width Tool, just turn them off by pressing the {{Literal|Toggle width ducks}} button at the top of the canvas window.

{{Note|Warning!|Don't use {{Shortcut|Alt|5}} shortcut to turn off visibility of width ducks while you using Width Tool. There's a bug that will cause Synfig Studio to hang.}}

== Other ways to create BLines ==

Is that all? Not yet. You can use Circle, Rectangle, Star and Polygon tools to create BLines too. Just check the {{Literal|Create Outline BLine}} and {{Literal|Create Region BLine}} options in the Tool Options Panel when using those tools.

Creating geometric primitive as BLine gives you a better control over it's shape and look. For example, if you want a deformed star, then you can use the Star Tool to create it as outline and region BLines and then use the Transform Tool to deform it.

Now you are ready for the {{L|Doc:Flower Animation|last tutorial}} in this section. Hang on!

Doc:Creating Shapes

2011-01-14T21:07:44Z

Mfwitten: /* BLine Tool */ I was getting confused because I didn't know I was in 'construction mode'; I rewrote the text in a way that I would have found to be more helpful.

{{Title|Creating Shapes}}
[[Category:Manual]]
[[Category:Tutorials]]
[[Category:Tutorials Basic]]
[[Category:Updated]]
{{Navigation|Category:Manual|Doc:Flower Animation}}


== Introduction ==

Basic primitives such as circles or rectangles are all great, but they are pretty much geometrically inflexible. What about creating more complex shapes? To do this, we use the BLine Tool.

== BLine Tool ==

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.

[[Image:Toolbox Reset Colors Button.png|right|frame|Reset Colors button in the Toolbox]] Before we start 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 Transform Tool.

Now, go ahead and click on the {{Literal|Reset Colors}} 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. Also, set the {{l|New Layer Defaults#Default Line Width|default line width}} to something nice and thick — 10pt should do the trick.

After you switched to BLine tool, take a look at the Tool Options Panel. Make sure that only {{Literal|Create Region BLine}}, {{Literal|Create Outline BLine}} and {{Literal|Link Origins}} are checked.

Clicking with your mouse in the canvas will place vertices. While you are placing a vertex, you can drag out its tangent by dragging the mouse. Do this over and over, and you construct a Bline.

Keep in mind, however, that during this construction, there is nothing stopping you from just moving it if you don't like where you placed a vertex or a tangent. Honest! If you want to remove a vertex, right click on it and select {{Literal|Delete Vertex}}. Want to split the tangents? Right click on the tangent and hit {{Literal|Split Tangents}}. Want to loop the bline? Right click on the first vertex and select {{Literal|Loop BLine}}.

[[Image:Creating-shapes-2-bline-construction.png|center|frame]]

When you are finished placing vertices, you must exit construction mode in order to actually create the BLine layer(s); there are 2 ways to do this:
#Switch to another tool.
#Press the {{Literal|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 switch to the {{l|Transform Tool}}, because we are done with the BLine Tool.

[[Image:Creating-shapes-3-bline-region-outline.png|center|frame]]

== Editing BLines ==

Ok, we now have a nice pretty white region with a thick black outline. Since we checked {{Literal|Create Region BLine}} and {{Literal|Create Outline BLine}} in previous steps, 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.

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 {{Literal|Remove Item (smart)}}. Want to insert a point somewhere? Right click on the segment where you want to insert something and hit {{Literal|Insert item (smart)}}.

{{Note|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 {{l|Doc:Adding Layers|previous tutorial}}, you can {{l|encapsulate|encapsulate}} layers into hierarchy.

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 Outline Layer, the Region Layer has no width data) and tweaking with the width ducks. By default, these are masked. To show them, press {{Shortcut|alt|5}} or click {{Literal|Toggle width ducks}} button at the top of the canvas window (the fifth one from the left). Repeat to hide them again. You can also see other things to mask via the {{l|Canvas Menu Caret}}: {{c|View|Show/Hide Ducks}}.

== Using tablet to draw shapes ==

If you have a [http://en.wikipedia.org/wiki/Graphics_tablet graphic tablet] you can use Draw Tool to create BLines.

Synfig Studio supports pressure sensitivity, but you need to configure it first. Go to {{c|File|Input Devices...}} from toolbox menu. In the Input dialog find your tablet's stylus device and set its mode to {{Literal|Screen}}. Click {{Literal|Save}} and then {{Literal|Close}}.

Now grab your stylus, create a new file and click on the Draw Tool button in the toolbox. Set the default line width value to be big enough — say, 15pt — otherwise you will not notice any pressure sensitivity effect. Choose brown as the default fill color.

{{Note|Note|Steps above should be done with the stylus of your tablet, not the mouse. Synfig Studio remembers settings for each input device independently. That's why if you set those options with your mouse device they will not have any effect when you switch to stylus.}}
In the Tool Options Panel, make sure that you have the same options as shown on the screenshot below.

[[Image:DrawToolOptions.png|center|frame]]

Now let's draw some thing like a curvy mountain background. Start drawing a line from the left border to the middle of the canvas. Try to vary your stylus pressure while you are drawing. Stop near the center of the canvas. This is your first line. Notice the new outline layer created in the Layers Panel.

[[Image:Creating-shapes-4-draw.png|center|frame]]

Point your stylus at the last duck of your new BLine and continue drawing to the right border of the canvas. When you finish, look at the Layers Panel again. There's still only one outline layer. Synfig Studio is smart enough to figure out that you don't need a new outline layer and properly extends the last one. You can extend the BLine from both ends, but if you start drawing from any other place of the canvas a new outline layer will be created. Though your first line will remain selected and nothing stops you from extending it later.

Back to our artwork. In the Tool Panel hit the button with the bucket icon to fill the outline we just created. A region layer will appear at the top of the layer we are working with. Select the outline layer and press the {{Literal|Raise Layer}} button in the layers panel to put the outline layer on top of the region.

[[Image:Creating-shapes-5-draw.png|center|frame]]

Extend a line from both sides down to the corners of the canvas to make the fill appear at the bottom. Great.

[[Image:Creating-shapes-6-draw.png|center|frame]]

Go ahead and add a few more lines on top of the filled area to give it a mountain-like look. If brown ducks are in your way, you can hide them by clicking the {{Literal|Toggle vertex ducks}} button at the top of the canvas window (the second one from the left).

[[Image:Creating-shapes-7-draw.png|center|frame]]

{{Note|Warning!|Don't use {{Shortcut|Alt|2}} shortcut to turn off visibility of vertex ducks while you using Draw Tool. There's a bug that will cause Synfig Studio to hang.}}
Draw tool is great for drawing complex shapes, but you end up with a bunch of ducks, which are hard to manipulate with the Transform Tool in the way we described above. There are two solutions here.

First, you can increase the {{Literal|Smooth}} value in the Tool Options Dialog while using Draw Tool. That will reduce the count of vertices produced at drawing time, but will make your shape less detailed.

Second, you can use Smooth Move Tool to deform an existing shape. Go for it and click the Smooth Move Tool button in the toolbox. The trick about this tool is that it affects ''selected ducks only''. Press and hold your left mouse button in an empty place of the canvas. Drag to create a selection box. Release the mouse button when you are done. Or just hit {{Shortcut|Ctrl|a}} to select all ducks. Now you can deform the selected segments of BLines. You can change the size of the influence area by tweaking {{Literal|Radius}} in the Tool Options Panel.

What about outline width? There is a Width Tool for that purpose. It is designed for increasing or decreasing the width of a line much like you would with a pencil on paper. Click the Width Tool button in the toolbox, move your stylus over the line you want to change, press and move the cursor back and forth along the line, like you are scratching something. The width of the outline will be increased at the places where you moved the cursor. If you want to decrease the width, just hold "Ctrl" while scratching. Easy!

If you don't want Width Ducks to be displayed, during usage of the Width Tool, just turn them off by pressing the {{Literal|Toggle width ducks}} button at the top of the canvas window.

{{Note|Warning!|Don't use {{Shortcut|Alt|5}} shortcut to turn off visibility of width ducks while you using Width Tool. There's a bug that will cause Synfig Studio to hang.}}

== Other ways to create BLines ==

Is that all? Not yet. You can use Circle, Rectangle, Star and Polygon tools to create BLines too. Just check the {{Literal|Create Outline BLine}} and {{Literal|Create Region BLine}} options in the Tool Options Panel when using those tools.

Creating geometric primitive as BLine gives you a better control over it's shape and look. For example, if you want a deformed star, then you can use the Star Tool to create it as outline and region BLines and then use the Transform Tool to deform it.

Now you are ready for the {{L|Doc:Flower Animation|last tutorial}} in this section. Hang on!

Doc:Adding Layers

2011-01-14T19:11:31Z

Mfwitten: /* Using layers to modify other layers */ Default blend method is now "Straight".

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


== 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's layers are 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, 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 ==

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. Next, create a simple rectangle with the Rectangle Tool.

[[Image:Adding-layers-tutorial-1.png|frame|center]]

Pick the {{l|Gradient Tool|Gradient Tool}} from the {{l|Category:Toolbox|Toolbox}}, press the left mouse button on the canvas, drag to change the gradient direction and release the button when you are done. You should note that another layer was added in the {{l|Layers Panel}} called '''Gradient'''. This is nothing special.

[[Image:Adding-layers-tutorial-2.png|frame|center]]

{{Note|Note|If you see no gradient but just a plain color, that means that you probably just clicked on the canvas without dragging your mouse. To fix that pick the {{l|Transform Tool|Transform 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.}}
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. Then, right-click and select {{Literal|Encapsulate}} from the menu. The view of your Layers Panel should change now, showing a small box called {{l|Paste Canvas|Inline Canvas}} with an arrow in front. By clicking on the arrow you can expand the inline canvas to see its contents, your previous two layers: the gradient and the rectangle.

[[Image:Adding-layers-tutorial-3.png|frame|center]]

You can treat this layer like any other layer — move it around, duplicate it, copy and paste it. 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.

== Using locality ==
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 Layers Panel. Now go to the {{l|Params Panel}} (by default it resides in the bottom window), and search for the attribute called {{Literal|Blend Method}}. Double-click the entry and select {{Literal|Onto}} from the drop-down menu.

[[Image:Adding-layers-tutorial-4.png|frame|center]]

The gradient should now be restricted to the rectangle. Congratulations! You just made your first effect by interacting layers with Synfig.

[[Image:Adding-layers-tutorial-5.png|frame|center]]

If only for the additional organization, encapsulating layers into inline canvases dramatically improves the ease of use of Synfig Studio. But lots of programs can do this. The concept of ''scope'' as just demonstrated sets Synfig apart from other programs with layer hierarchies. The key point is that a layer can '''only''' 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 created, it would just blur them — anything under the inline canvas would not be blurred! Let's try it.

== Using layers to modify other layers==
Make sure you have the Inline Canvas layer selected and create two red {{l|Circle Tool|circles}}. They will appear on top of the Inline Canvas. Select the Inline Canvas layer and use the {{Literal|Raise Layer}} button in the Layers Panel to place it on top of the circles.

[[Image:Adding-layers-tutorial-6-raise-layer.png|center|frame]]

Now our inline canvas layer (with rectangle and gradient) is in front of those two circles.

[[Image:Adding-layers-tutorial-7.png|center|frame]]

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.

[[Image:Adding-layers-tutorial-8.png|center|frame]]

Now, right click on the black circle layer in the Layers Panel and a popup menu will appear. The first item in that popup is {{Literal|New Layer}}. Inside of the {{Literal|New Layer}} menu, you'll see several categories of layers you could create, but what we want is a blur, so go to the Blurs category and select the {{Literal|Blur}} layer (so that would be {{c|New Layer|Blurs|Blur}}).

[[Image:Adding-layers-tutorial-10-composite-blur.png|center|frame]]

Well, it blurred... but something is not quite right — the outside edge of the contents of the inline canvas is still sharp. It is doing this because the blend method of the blur defaulted to {{Literal|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 Toolbox). What we want is a blend method of {{Literal|Straight}}. Just select the blur layer, and change the Blend Method to {{Literal|Straight}} in the Params Panel.

{{Note|Note|In at least Synfig version {{Literal|0.62.02}}, the default blend method is {{Literal|Straight}}.}}
[[Image:Adding-layers-tutorial-11.png|frame|center]]

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 under {{c|Layer|New Layer}} you will note quite a lot of different possibilities for making layers. Several of them sound rather unusual, like {{c|Transform|Rotate}} for example. You can use this to add new attributes to your objects. And just like other, basic attributes in the {{L|Doc:Animation Basics|previous animation tutorial}}, you can change them to be different on certain {{L|Keyframe|keyframes}}. Synfig will take care of interpolating the steps in between.

For example, you could create a {{L|Doc:Creating Shapes|shape}} and add a {{L|Rotate Layer}} over it. Combine this with the lesson learned in the {{L|Doc:Animation Basics|last tutorial}} and you can create a rotating effect. This technique is used for creation of {{L|Doc:Cut-out Animation}}.