Getting Started

From Synfig Studio :: Documentation
Jump to: navigation, search
m (The user interface)
m (fix panel stuff (1.0))
 
(66 intermediate revisions by 14 users not shown)
Line 2: Line 2:
 
{{Title|Getting Started}}
 
{{Title|Getting Started}}
 
{{Navigation|Category:Manual|Doc:Animation_Basics}}
 
{{Navigation|Category:Manual|Doc:Animation_Basics}}
 +
{{TOCright}}
 
{{Category|Manual}}
 
{{Category|Manual}}
 
{{Category|Tutorials}}
 
{{Category|Tutorials}}
 
{{Category|Tutorials Basic}}
 
{{Category|Tutorials Basic}}
 +
{{NewTerminology}}
 
<!-- Page info end -->
 
<!-- Page info end -->
  
== Introduction ==
+
== User interface ==
 +
The screenshot below displays Synfig Studio's window layout:
  
Synfig, like most every other competent graphics program, breaks down individual elements of a {{l|canvas}} into {{l|layer|layers}}. However, it differs from other programs in two major ways:
+
[[File:Interface 1.0.png|900px|thumb|center|border|Default interface layout of Synfig Studio]]
  
{| border="0" cellspacing="0" align="center" width="100%"
+
Synfig Studio  main interface components are:
|
+
# An individual layer in Synfig usually represents a single "Primitive". ie: A single region, an outline of a region, an imported JPEG, etc... This allows you to have a great deal of flexibility and control. It is not uncommon for a composition to have hundreds of layers(organized into a hierarchy for artist's sanity of course).
+
# A layer can not only composite information on top of the image below it, but also distort and/or modify it in some other way. In this sense, Synfig Layers act much like filters do in Adobe Photoshop or the GIMP. For example, we have a {{l|Blur Layer}}, {{l|Radial Blur Layer}}, {{l|Spherize Layer}}, {{l|Color Correct Layer}}, {{l|Bevel Layer}}, etc...
+
  
Each layer has a set of parameters which determine how it behaves. When you click on a layer (either in the canvas window, or in the {{l|Layers Panel}}), you will see its parameters in the {{l|Params Panel}}.
+
* {{l|Toolbox}} &mdash; is the main Synfig Studio window. It contains tools and more to create and edit your artwork.
 +
* {{l|Canvas}} &mdash; displays your artwork and animation.
 +
* {{l|Category:Panels}} &mdash; contain tools and information about certain elements of your project.  Some panels will allow you to modify those elements.
  
|| ||  
+
{{Note|Note|Synfig Studio can be reset to its default window arrangement (as shown in the screenshot). In the {{Literal|File}} menu select {{c|Window|Workspace|Default}}.}}
http://i170.photobucket.com/albums/u243/zenoscope/layer.png 
+
|}
+
  
Synfig Studio has an autorecover feature. If it crashes, even if the current file has not been saved, it will not lose more than 5 minutes of work. At restart it will automatically prompt the user to recover the unsaved changes. Unfortunately history isn't recovered yet. That feature comes later.
+
The center of the window is the {{L|Category:Canvas_Window|Canvas Window}}. A new Canvas Window appears each time Synfig Studio starts. The window represents the {{l|Root Canvas}}, not that it means much to you at the moment, but that's OK &mdash; we're just trying to show you around. In the upper left corner of the Canvas Window, you'll see a button with a {{l|Canvas Menu Caret|caret}}. If you click on this caret button, the {{l|Canvas Menu Caret|canvas window menu}} will pop up. If you right-click in the canvas area and there is no {{l|layer}} under the mouse position, this menu will also appear. So now you know where the most important canvas menu is. Good.
  
One thing you may notice is that Synfig Studio is SLOW, making it practically unusable on hardware that is over 3 years old. The biggest reason for this is that all of the color calculations are done in floating point--because Synfig Studio was built from the ground up with High-Dynamic-Range Imaging in mind. HOWEVER, this will not be the case forever.  
+
The other part of the window (on the bottom/top, to the right/left) are customizable {{l|Category:Panels|dock panel}}. Each dock contains a set of {{L|Category:Panels}}, arranged horizontally or vertically. Some panels share the same space inside the dock and you can switch between them by clicking on their {{l|panel tab|tabs}}. You can rearrange the contents of dock panels as you wish by dragging the panel tab to where you want it. You can even create a new dock by dragging a tab out.
  
darco has some fairly major re-implementations and optimizations that he plans to implement that should quite dramatically improve the performance of Synfig on all platforms. The goal is not a 200% speed increase, it is at least a 2000% speed increase. With the optimizations that are planned to be implemented, we will be able to pipeline operations in such a way that this performance improvement can be realized. It should also pave the way to hardware acceleration using todays powerful graphics processors, which should yield further performance improvements measurable in orders of magnitude.
+
If you accidentally close a {{l|panel|panel}} (by dragging it out, and closing the new dock that gets created), no worries. Simply go to the {{l|Category:Main_Menu}}, select {{l|Category:Window_Menu}} there and then click on the name of the panel you need.
  
== The user interface ==
+
The most important panels are:
  
{| border="0" cellspacing="5" align="center" width="100%"
+
* {{l|Layers Panel}} &mdash; shows you the hierarchy of the layer of your working canvas. It also allows you to manipulate these layers.
|             |
+
* {{l|Parameters Panel}} &mdash; shows you the parameters of the layer currently selected. When multiple layers are selected, only the parameters that the selected layers have in common are displayed.
|http://i170.photobucket.com/albums/u243/zenoscope/toolbar.png
+
* {{l|Tool Options Panel}} &mdash; shows you any options specific to the currently selected tool.
||            ||
+
* {{l|Navigator|Navigator}} &mdash; shows a thumbnail image of what the currently selected canvas looks like. You can also zoom in and move the focus around with this panel.
 +
* {{l|History Panel}} &mdash; shows you the history stack for the current composition. You can also edit the actions in history.
  
When you start Synfig Studio, it will display a splash graphic and boot itself up. After it finishes loading, you should see three windows. The window in the upper left is the {{l|toolbox}}. This is where you can open files, change {{l|tools}}, etc. You'll notice that most of the buttons are grayed out-- this is because there is no file open yet.
+
There are also many other {{l|panel|panels}} in Synfig Studio. If you have no idea what a panel does, simply hold your mouse over its icon and a tooltip will pop up describing its function.
  
The other two windows (one on the bottom, and one to the right) are customizable {{l|dock dialogs}}. You can rearrange the contents of these however you wish by simply dragging the tab to where you want it. You can even create a new dock dialog by dragging a {{l|dock tab|tab}} out of the dock dialog it was inside of.
+
== Under the hood ==
  
If you ever accidentally close a {{l|dock tab}} (by dragging it out of the dock dialog, and closing the new dock dialog that gets created), no worries. Simply go to the toolbox, go to {{c|File|Dialogs}}, and then click on the name of the dialog you need.
+
[[File:Adding-Layer-tutorial-12 0.63.06.png|right|frame|Layers Panel]]
  
There are a lot of {{l|dock tab}}s. If you have no idea what a dock tab does, simply hold your mouse over its icon and a tooltip will pop up describing the name of the tab.
+
Synfig Studio, like most every other competent graphics program, breaks down individual elements of a {{l|canvas|canvas}} into {{l|layer|layers}}. However, it differs from other programs in two major ways:
|}
+
  
Here are some of the more important ones:
+
# An individual layer in Synfig usually represents a single "Primitive". I.e. a single region, an outline of a region, an imported image, etc... This allows you to have a great deal of flexibility and control. It is not uncommon for a composition to have hundreds of layers (organized into a hierarchy for the artist's sanity of course).
 +
# A layer can not only add information on top of the image below it, it can also distort and/or modify it in some other way. In this sense, Synfig's Layers act much like filters do in Adobe Photoshop or GIMP. For example, we have a {{l|Blur Layer}}, {{l|Radial Blur Layer}}, {{l|Spherize Layer}}, {{l|Color Correct Layer}}, {{l|Bevel Layer}}, etc...
  
* {{l|Layers Panel}} - This tab shows you the layer hierarchy for the currently selected canvas. It also allows you to manipulate these layers.
+
Each layer has a set of parameters which determine how it behaves. When you click on a layer (either in the Canvas Window, or in the illustrated {{l|Layers Panel}}), you will see its parameters in the {{l|Parameters Panel}}.
* {{l|Params Panel}} - This tab will show you the parameters of the currently selected layer, (OR, if multiple layers are selected, it shows you only the parameters that the selected layers have in common).
+
* {{l|Categorical Help#Synfig Dialogs|Tool Options Panel}} - This tab shows you any options specific to the currently selected tool.
+
* {{l|Navigator|Navigator}} - This tab shows a thumbnail image of what the currently selected Canvas looks like. You can also zoom in and move the focus around with this tab.
+
* {{l|History Panel}} - This tab shows you the history stack for the current composition. You can also edit the actions in history.
+
  
If you click the "new composition" button in the toolbox, a new {{l|Work Area Window}} will be opened.  In the upper left corner of the Canvas Window, you'll see a button with a {{l|Canvas Menu Caret|caret}}. If you click on this button, the {{l|Canvas Menu Caret|canvas window menu}} will pop up. (As an aside, if you right click in the canvas area and there is not a {{l|layer}} under the mouse position, this menu will also appear.) Click "Edit", then "Properties", and the {{l|Canvas Properties Dialog|canvas properties dialog}} will appear.
+
== First steps ==
  
The canvas properties dialog is a mess, I know. I'll have it re-designed into something much more comprehensible some time in the future. For now, ignore the "Image Area" and "Locks and Links" sections.
+
Let's create something fun so that we can play with it!
  
If you click OK, the canvas properties dialog will disappear and you will see the {{l|Canvas window}}. This window represents the {{l|Root Canvas}}, not that that means much to you at the moment, but that's OK--I'm just trying to show you around.
+
First, go over to the toolbox and click on the {{l|Circle Tool}} (if you don't know which one it is, just mouse over them until you find the one with the tooltip that says "Circle Tool").  
  
So now you know where the menu is in the Canvas Window. Good. Everything else should be pretty self-explanatory in the Canvas Window. (Explanations on the menu stuff is to come in a sec.)
+
When you click on the Circle Tool, you should notice that the {{l|Tool Options Panel}} changed. But we'll get to that later.
  
== First steps ==
+
With the Circle Tool selected, you can now create circles in the {{L|Category:Canvas_Window|Canvas Window}}. This works as you might expect &mdash; click on the canvas, drag to change length of the radius, and release the mouse button when you are done. Go ahead and create two circles (or more, if you fancy). If you accidentally release the mouse button before dragging, you end up creating a circle with 0 radius and it is effectively invisible! No need to worry, you can easily fix this. In the Parameters Panel, you can change the parameters of the selected object. If you just made a 0 radius circle, it should be the current selected object. You can change its radius to some value other than 0, say 10, and manipulate it to your liking with the handles later.
  
Let's create something so that we can tweak with it. Now that you have a new composition open and the properties dialog is out of the way, go over to the toolbox and click on the {{l|Circle Tool|circle tool}}(If you don't know which one it is, just mouse over them until you find the one with the tooltip that says "circle").  
+
{{Note|Note|Some users might experience the following problem: when you click and drag on the canvas using the Circle Tool, either nothing seems to happen or you end up making insanely huge circles. To fix this go to {{c|File|Input Devices}} and '''disable all the devices''' you can find there. If you have an extended input device that you want to use, such as a pressure-sensitive pen, then enable it in this screen. After this change Synfig will work as expected.}}
 +
Now go back to the toolbox and click on the {{l|Transform Tool}} (the button with the arrow on it). After you do this, click on one of your circles. You will see a "{{l|bounding box|bounding box}}" (which is kind of useless at this point in time, but we digress), a green dot at the center, and a cyan dot on the radius. Those dots are called "{{l|handle|handles}}". If you want to modify the circle, grab a handle and drag it around. Easy!
  
The second you click on the circle tool, you should notice that the {{l|Tool Options Panel}} changed. But we'll get to that later.
+
You can select a {{l|layer}} by clicking on it. If you want to select more than one layer, hold down {{Shortcut|ctrl}} key while you are clicking &mdash; this works in both the Canvas Window and the {{l|Layers Panel}}. Try it!
  
: '''Note''': Some laptop users might experience trouble where click-drag on the canvas when using the {{l|Circle Tool|circle tool}} doesn't seem to do anything or produce insanely huge circles. The problem is that Synfig has detected the touchpad and enabled that device (incorrectly!) To fix this: click {{c|File|Input devices...}} In the resulting dialog window, select 'Disabled' for your touchpad device. After this change, your external mouse and the touchpad will work as expected.
+
You can also select multiple handles. You can do this in several ways. First, you can hold down {{Shortcut|ctrl}} and individually click the handles that you want selected, but this can be tedious. However, there is a much faster method &mdash; just create a selection box by clicking the mouse and dragging it over the handles that you want.  
  
With the circle tool selected, you can now create circles in the {{l|Work Area}}. This pretty much works exactly as you might expect it to. Go ahead and create two (or more, if you fancy) circles. If by accident you just clicked on the canvas instead of clicking and dragging (with mouse button pressed) to draw the circle, you end up creating a circle with 0 radius and it is effectively invisible! No need to worry, you can easily fix this. In the Params Panel, you can change the parameters of the selected object. If you just made a 0 radius circle, it should be the current selected object. you can change its radius to some value other than 0, say 10, and manipulate it to your liking with the canvas ducks later.
+
Go ahead, select two circles and select all of their handles. With several handles selected, moving one handle will move all of them.
 +
<!-- TODO: About rotating and scaling with Ctrl and Alt keys -->
  
Now go back to the toolbox and click on the {{l|Normal Tool|normal tool}} (the blue circle with the arrow on it). After you do this, click on one of your circles. You will then see a {{l|bounding box}}(which is kinda useless at this point in time, but I digress), a green dot at the center, and a cyan dot on the radius. Those dots are called ''{{l|duck}}s''. If you want to modify the circle, grab a duck and drag it around. Easy!
+
{{Note|Note|Synfig Studio has an autorecovery feature. If it crashes, even if the current file has not been saved, you will not lose more than 5 minutes of work. At restart it will automatically prompt to recover the unsaved changes. Unfortunately history isn't recovered yet.}}
 +
The {{l|Rotate Tool|rotate}} and {{l|Scale Tool|scale}} tools work much like the Transform Tool, except in the case where you have multiple handles selected. It is much easier just to try, than read about it. Select a few circles, select all of their handles, and try using the rotate and scale tools.
  
So you can select a {{l|layer}} by clicking on it. If you want to select more than one layer, hold down CONTROL while you are clicking -- this works in both the {{l|Work Area}} and the {{l|Layers Panel}}. Try it!
+
Note that tools manipulating with handles have options associated with them. If a particular tool isn't doing what you want, take a look at the {{l|Tool Options Panel}} to see available options.
  
You can also select multiple ducks. You can do this in several ways. First, you can hold down CONTROL and individually click the ducks that you want selected, but this can be tedious. However, there is a much faster method -- just create a {{l|Selection|selection box}} by clicking the mouse and dragging it over the area of ducks that you want selected.
+
== Linking ==
  
Go ahead and select two circles, and select all of their ducks. With several ducks selected, moving one duck will move all of the ducks. This behavior is dependent on the {{l|Normal Tool|normal tool}}. Thus, a more descriptive name for this tool might have been the "move" or "translate" tool.  
+
Now let's try {{l|linking|linking}}. Suppose we always want these two circles to be the same size. Select two circles, and then select both of their radius handles (the cyan dots).
  
The {{l|Rotate Tool|rotate}} and {{l|Scale Tool|scale}} tools work much like the {{l|Normal Tool|normal tool}}, except in the case where you have multiple ducks selected. It is much easier to just try it than read about it. Select a few circles, select all of their ducks, and try using the rotate and scale tools.  
+
To select multiple handles, either drag a rectangle around them, or select the first one, then hold the {{Shortcut|ctrl}} key while selecting the rest.  Once you have the two radius handles selected, right click on either of them and a menu will pop up. Select {{Literal|Link}}. Boom. The parameters are linked together. You can prove it to yourself by selecting just one of the circles and changing its radius &mdash; the other one will change as well. Neat stuff, eh? This is how {{l|Outline Layer|outlines}} are attached to their {{l|Region Layer|regions}} &mdash; but we're getting ahead of to the chapter.
  
Note that, unlike the normal tool, the other duck manipulation tools DO have options associated with them. If a particular tool isn't doing what you want, take a look in the {{l|Tool Options Panel}} to see if it is set up like you want it.
+
Linking is a fundamental concept in Synfig. You can create links not only for handles, but also between parameters as well by selecting multiple layers, right clicking on the parameter in the Parameters panel, and selecting {{Literal|Link}}.
  
== Linking ==
+
== Color selection ==
  
Now let's try {{l|linking}}. Let's say we always want these two circles to be the same size. Select two circles, and then select both of their Radius ducks (the cyan dots).
+
Let's say you want one of the circles to be a different color. If you look in the toolbox below the tools, you'll see the outline/fill color selector, the outline width selector, and some other stuff like the default blend method and gradient. The outline/fill color widget works exactly as you might expect &mdash; you can click on the fill color, and a modest color chooser will appear. Now you can change the color pretty easily.  
To select multiple ducks, either drag a rectangle around them, or select the first one, then hold the Control key while selecting the rest. Once you have the two radius ducks selected, right click on either duck and a menu will pop up. Click on "Link". Boom. The parameters are linked together. You can prove it to yourself by selecting just one of the circles and changing its radius -- the other one will change as well. Neat stuff, eh?
+
  
Linking is a fundamental concept in Synfig. You can create links not only between ducks, but also between parameters as well by selecting multiple layers, right clicking on the parameter in the param tab, and selecting "Link".  
+
But sometimes you just want to click on a color and go. This is where the palette editor tab comes in.  
  
<small>DIGRESSION: This is how {{l|Outline Layer|outlines}} are attached to their {{l|Region Layer|regions}}&mdash;but I'm getting ahead of myself. At the moment, the fundamental power and flexibility of linking in Synfig Core is beyond what Synfig Studio currently allows for. This will change in the future. Anyway, back on track...</small>
+
Click on the Palette Editor panel tab and have a look &mdash; it's the one with the palette-ish looking icon. Clicking on colors with the left mouse button will immediately change the default outline color and clicking with the middle mouse button will change fill color.
  
Let's say you want one of the circles to be a different color. If you look in the toolbox below the tools, you'll see the foreground/background color selector, the outline width selector, and some other stuff like the default blend method and gradient. The foreground/background color widget works exactly as you might expect -- you can click on the foreground color, and a modest color chooser will appear. Now to can change the color pretty easily.  
+
That's all great, but we still haven't changed the color of the circle. There are three ways to do this. The first is to click on the {{Literal|Fill Tool}} from the toolbox, and then click on the circle in the Canvas Window. Boom. Circle changes color. This works with more than just circles. Also, you can select the circle layer you want to modify, go to the Parameters panel, right-click on the Color parameter and select {{Literal|Apply Fill Color}} or {{Literal|Apply Outline Color}} at you preference. Or simply double-click on the {{Literal|Color}} parameter - a color selector dialog will show up, and you can just tweak away.
  
But sometimes you just want to click on a color and go. This is where the palette editor tab comes in. Its functionality isn't quite 100% yet (ie: saving and loading custom palettes hasn't been implemented yet), but the default palette is pretty decent. Click on the Palette editor tab and have a look -- it's the one with the palette-ish looking icon. Clicking on colors in here will immediately change the default foreground color.
+
Try playing around with the circles for a bit. Muck around with the parameters, and see what happens. To get you started, try out to set the {{l|Feather Parameter}} to 5.
  
That's all great, but we still haven't changed the color of the circle. There are two ways to do this. The first way is that you select the circle layer you want to modify, goto the params tab and double click on the color parameter--a color selector dialog shows up and you just tweak away. But let's say you already got the color you wanted selected as the default foreground color. Easy. Just click on the "Fill tool" from the toolbox, and then click on the circle in the canvas window. Boom. Circle changes color. This works with more than just circles, but we'll get to that in a sec.
+
== Digging deeper ==
  
Try playing around with the circles for a bit. Muck around with the parameters, and see what happens. To get you started, play around with feather a bit.
+
Of course, so far you just found out how to use the basic features of Synfig Studio but not how you animate a drawing. This is covered in the {{l|Doc:Animation_Basics|next section}}.
  
== Digging deeper ==
+
{{Navigation|Category:Manual|Doc:Animation_Basics}}
  
Of course, so far you just found out how to use the basic features of Synfig Studio but not how you animate a drawing. This is covered in the {{l|Doc:Animation_Basics|next tutorial}}.
+
  You can download an archive which contains the project used for wiki illustration [[File:Interface.sfg]]
 +
  You can download the project used for the illustration of the illustration [[File:Spline-DotMan.sifz]]

Latest revision as of 18:53, 28 September 2016

Languages Language: 

English • čeština • Deutsch • español • suomi • français • italiano • 日本語 • Nederlands • polski • português • română • русский • 中文(中国大陆)‎ • 中文(台灣)‎


Navigation Navigation:  <<Manual>>



User interface

The screenshot below displays Synfig Studio's window layout:

Default interface layout of Synfig Studio

Synfig Studio main interface components are:

  • Toolbox — is the main Synfig Studio window. It contains tools and more to create and edit your artwork.
  • Canvas — displays your artwork and animation.
  • Panels — contain tools and information about certain elements of your project. Some panels will allow you to modify those elements.

Note

Synfig Studio can be reset to its default window arrangement (as shown in the screenshot). In the "File" menu select "Window → Workspace → Default".
note end


The center of the window is the Canvas Window. A new Canvas Window appears each time Synfig Studio starts. The window represents the Root Canvas, not that it means much to you at the moment, but that's OK — we're just trying to show you around. In the upper left corner of the Canvas Window, you'll see a button with a caret. If you click on this caret button, the canvas window menu will pop up. If you right-click in the canvas area and there is no Layer under the mouse position, this menu will also appear. So now you know where the most important canvas menu is. Good.

The other part of the window (on the bottom/top, to the right/left) are customizable dock panel. Each dock contains a set of Panels, arranged horizontally or vertically. Some panels share the same space inside the dock and you can switch between them by clicking on their tabs. You can rearrange the contents of dock panels as you wish by dragging the panel tab to where you want it. You can even create a new dock by dragging a tab out.

If you accidentally close a panel (by dragging it out, and closing the new dock that gets created), no worries. Simply go to the Main Menu, select Window Menu there and then click on the name of the panel you need.

The most important panels are:

  • Layers Panel — shows you the hierarchy of the layer of your working canvas. It also allows you to manipulate these layers.
  • Parameters Panel — shows you the parameters of the layer currently selected. When multiple layers are selected, only the parameters that the selected layers have in common are displayed.
  • Tool Options Panel — shows you any options specific to the currently selected tool.
  • Navigator — shows a thumbnail image of what the currently selected canvas looks like. You can also zoom in and move the focus around with this panel.
  • History Panel — shows you the history stack for the current composition. You can also edit the actions in history.

There are also many other panels in Synfig Studio. If you have no idea what a panel does, simply hold your mouse over its icon and a tooltip will pop up describing its function.

Under the hood

Layers Panel

Synfig Studio, like most every other competent graphics program, breaks down individual elements of a canvas into layers. However, it differs from other programs in two major ways:

  1. An individual layer in Synfig usually represents a single "Primitive". I.e. a single region, an outline of a region, an imported image, etc... This allows you to have a great deal of flexibility and control. It is not uncommon for a composition to have hundreds of layers (organized into a hierarchy for the artist's sanity of course).
  2. A layer can not only add information on top of the image below it, it can also distort and/or modify it in some other way. In this sense, Synfig's Layers act much like filters do in Adobe Photoshop or GIMP. For example, we have a Blur Layer, Radial Blur Layer, Spherize Layer, Color Correct Layer, Bevel Layer, etc...

Each layer has a set of parameters which determine how it behaves. When you click on a layer (either in the Canvas Window, or in the illustrated Layers Panel), you will see its parameters in the Parameters Panel.

First steps

Let's create something fun so that we can play with it!

First, go over to the toolbox and click on the Circle Tool (if you don't know which one it is, just mouse over them until you find the one with the tooltip that says "Circle Tool").

When you click on the Circle Tool, you should notice that the Tool Options Panel changed. But we'll get to that later.

With the Circle Tool selected, you can now create circles in the Canvas Window. This works as you might expect — click on the canvas, drag to change length of the radius, and release the mouse button when you are done. Go ahead and create two circles (or more, if you fancy). If you accidentally release the mouse button before dragging, you end up creating a circle with 0 radius and it is effectively invisible! No need to worry, you can easily fix this. In the Parameters Panel, you can change the parameters of the selected object. If you just made a 0 radius circle, it should be the current selected object. You can change its radius to some value other than 0, say 10, and manipulate it to your liking with the handles later.

Note

Some users might experience the following problem: when you click and drag on the canvas using the Circle Tool, either nothing seems to happen or you end up making insanely huge circles. To fix this go to "File → Input Devices" and disable all the devices you can find there. If you have an extended input device that you want to use, such as a pressure-sensitive pen, then enable it in this screen. After this change Synfig will work as expected.
note end

Now go back to the toolbox and click on the Transform Tool (the button with the arrow on it). After you do this, click on one of your circles. You will see a "bounding box" (which is kind of useless at this point in time, but we digress), a green dot at the center, and a cyan dot on the radius. Those dots are called "handles". If you want to modify the circle, grab a handle and drag it around. Easy!

You can select a Layer by clicking on it. If you want to select more than one layer, hold down Ctrl key while you are clicking — this works in both the Canvas Window and the Layers Panel. Try it!

You can also select multiple handles. You can do this in several ways. First, you can hold down Ctrl and individually click the handles that you want selected, but this can be tedious. However, there is a much faster method — just create a selection box by clicking the mouse and dragging it over the handles that you want.

Go ahead, select two circles and select all of their handles. With several handles selected, moving one handle will move all of them.

Note

Synfig Studio has an autorecovery feature. If it crashes, even if the current file has not been saved, you will not lose more than 5 minutes of work. At restart it will automatically prompt to recover the unsaved changes. Unfortunately history isn't recovered yet.
note end

The rotate and scale tools work much like the Transform Tool, except in the case where you have multiple handles selected. It is much easier just to try, than read about it. Select a few circles, select all of their handles, and try using the rotate and scale tools.

Note that tools manipulating with handles have options associated with them. If a particular tool isn't doing what you want, take a look at the Tool Options Panel to see available options.

Linking

Now let's try linking. Suppose we always want these two circles to be the same size. Select two circles, and then select both of their radius handles (the cyan dots).

To select multiple handles, either drag a rectangle around them, or select the first one, then hold the Ctrl key while selecting the rest. Once you have the two radius handles selected, right click on either of them and a menu will pop up. Select "Link". Boom. The parameters are linked together. You can prove it to yourself by selecting just one of the circles and changing its radius — the other one will change as well. Neat stuff, eh? This is how outlines are attached to their regions — but we're getting ahead of to the chapter.

Linking is a fundamental concept in Synfig. You can create links not only for handles, but also between parameters as well by selecting multiple layers, right clicking on the parameter in the Parameters panel, and selecting "Link".

Color selection

Let's say you want one of the circles to be a different color. If you look in the toolbox below the tools, you'll see the outline/fill color selector, the outline width selector, and some other stuff like the default blend method and gradient. The outline/fill color widget works exactly as you might expect — you can click on the fill color, and a modest color chooser will appear. Now you can change the color pretty easily.

But sometimes you just want to click on a color and go. This is where the palette editor tab comes in.

Click on the Palette Editor panel tab and have a look — it's the one with the palette-ish looking icon. Clicking on colors with the left mouse button will immediately change the default outline color and clicking with the middle mouse button will change fill color.

That's all great, but we still haven't changed the color of the circle. There are three ways to do this. The first is to click on the "Fill Tool" from the toolbox, and then click on the circle in the Canvas Window. Boom. Circle changes color. This works with more than just circles. Also, you can select the circle layer you want to modify, go to the Parameters panel, right-click on the Color parameter and select "Apply Fill Color" or "Apply Outline Color" at you preference. Or simply double-click on the "Color" parameter - a color selector dialog will show up, and you can just tweak away.

Try playing around with the circles for a bit. Muck around with the parameters, and see what happens. To get you started, try out to set the Feather Parameter to 5.

Digging deeper

Of course, so far you just found out how to use the basic features of Synfig Studio but not how you animate a drawing. This is covered in the next section.

Navigation Navigation:  <<Manual>>


  You can download an archive which contains the project used for wiki illustration File:Interface.sfg
  You can download the project used for the illustration of the illustration File:Spline-DotMan.sifz


Languages Language: 

English • čeština • Deutsch • español • suomi • français • italiano • 日本語 • Nederlands • polski • português • română • русский • 中文(中国大陆)‎ • 中文(台灣)‎