Synfig Studio :: Documentation - User contributions [en]

Doc:Animation Basics

2010-11-30T07:44:41Z

Auldsbel: /* Adding movement */

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


== Introduction ==

Creating an animation in Synfig Studio is really easy. It basically means to change a drawing — you just need to create the first stage and last stage of a change, and Synfig take care of the steps in between.

Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':

# The circle is on the left.
# The circle is on the right.
# The circle is back on the left.

== Setting up the workspace ==

Let's do it. Start Synfig Studio. New file is automatically created at the start. Click the 'caret' menu (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. A canvas properties dialog will appear.

Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet — we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" — that will make our animation to be 2 seconds long.

[[Image:File Properties Dialog - End Time.png|center|frame|Canvas Properties Dialog]]

Now create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. Also, uncheck {{Literal|Low Res}} checkbox at the top of the canvas window to disable low resolution view mode - that will make your image look sharper. Generally, having that option enabled increases canvas redraw speed, but that's not what we need now.

[[Image:synfig_tut_2.png|450px|center|thumb]]

Now we need a circle. Change the fill color to red, and create a circle. It doesn't matter if it's not perfect: You can edit it. Activate the Transform Tool, and click the circle. It will go into a sort of editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the red circle by grabbing it on its green dot in the middle.

[[Image:synfig_tut_3.png|450px|center|thumb]]

These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.

== Adding movement ==

In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) got a grey time slider at the bottom. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of time slider changing its values to something like "12f", "1s 15f", etc. You can set your position on the timeslider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of time slider, and entering "2s" will move it to the end of time slider.

{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of time slider, putting the indicator out of view.}}
You may notice nothing changes on the canvas at this point. Switch to {{Literal|Animate Editing Mode}} by clicking the green dot to the right of the gray time slider (if you have version 0.62.02, you may see a green checkmark). The canvas will display a red outline; it reminds you that changes to your objects now affect your animation.

[[Image:synfig_tut_4.png|450px|center|thumb]]

Previously, three "steps" or "stages" were mentioned. These are represented by so-called "{{l|Keyframe|keyframes}}". (Just in case you're familiar with video encoding: No, it's not the same!) A keyframe is an image in time where something important happens with your objects.

Go to Keyframes panel — click on the little tab one with the small key icon in the bottom window — to edit keyframes. Now press the small button with "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.

[[Image:Keyframes Panel.png|center|frame]]

Now, go to the "1s" mark in the timeslider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should now have three keyframes in the list.

[[Image:Keyframes Panel 2.png|center|frame]]

== The s's and f's: Understanding the Timeline ==
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).

By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.

For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".

== The Keyframe List ==

The keyframe list is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory.

Now, you might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your timeslider will jump to the correct time.

You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!

{{l|Image:synfig_tut_5.png|center|frame}}

Wondering where the animation is? Just click to an arbitrary position on the timeslider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.

Notice, that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember image state at particular time. That's why when we modified circle position at "1s", it stays on the left at "2s" (as well as at "0s"). If you switch back to Params Panel, and look at the Timetrack Panel you'll notice a three green dots appeared on the right of {{Literal|Origin}} parameter. Those are called {{L|Waypoints}} and they used to indicate changes of parameter over time.

[[Image:TimetrackOriginWaypoints.png|thumb|center|450px]]

== Rendering your animation ==

Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".

Let's try the first way. Leave the animate editing mode by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ("caret" button in the upper left corner) and select {{c|File|Render}}. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose "gif" target format instead of "Auto", then click Render. Depending on your processor speed it should take a few moments, but finally the image window status bar should say "File rendered successfully".

[[Image:synfig_tut_6.png|618px|thumb|center|Calling "Render" from menu in Synfig Studio]]

{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimise the palette for the image.}}
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!

{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file, and type something like this:

synfig -t gif BasicKnightRider.sif

A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

Then you are done and can view your animated gif using Firefox or another program as mentioned above.

== Conclusion ==

Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities incude its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.

Doc:Animation Basics

2010-11-30T07:30:47Z

Auldsbel: /* Adding movement */

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


== Introduction ==

Creating an animation in Synfig Studio is really easy. It basically means to change a drawing — you just need to create the first stage and last stage of a change, and Synfig take care of the steps in between.

Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':

# The circle is on the left.
# The circle is on the right.
# The circle is back on the left.

== Setting up the workspace ==

Let's do it. Start Synfig Studio. New file is automatically created at the start. Click the 'caret' menu (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. A canvas properties dialog will appear.

Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet — we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" — that will make our animation to be 2 seconds long.

[[Image:File Properties Dialog - End Time.png|center|frame|Canvas Properties Dialog]]

Now create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. Also, uncheck {{Literal|Low Res}} checkbox at the top of the canvas window to disable low resolution view mode - that will make your image look sharper. Generally, having that option enabled increases canvas redraw speed, but that's not what we need now.

[[Image:synfig_tut_2.png|450px|center|thumb]]

Now we need a circle. Change the fill color to red, and create a circle. It doesn't matter if it's not perfect: You can edit it. Activate the Transform Tool, and click the circle. It will go into a sort of editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the red circle by grabbing it on its green dot in the middle.

[[Image:synfig_tut_3.png|450px|center|thumb]]

These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.

== Adding movement ==

In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) got a grey time slider at the bottom. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of time slider changing its values to something like "12f", "1s 15f", etc. You can set your position on the timeslider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of time slider, and entering "2s" will move it to the end of time slider.

{{Note|Note|At 2s the orange indicator won't be visible. That's because "2s" is at the far right boundary of time slider, putting the indicator out of view.}}
But when you changing your position on the time slider nothing changes on the canvas yet. First, you need to switch to {{Literal|Animate Editing Mode}} by clicking the green dot just to the right of the gray time slider. Note that your canvas gets a red outline; it reminds you that changes to your objects now affect your animation.

[[Image:synfig_tut_4.png|450px|center|thumb]]

Previously, three "steps" or "stages" were mentioned. These are represented by so-called "{{l|Keyframe|keyframes}}". (Just in case you're familiar with video encoding: No, that's not the same!) A keyframe is an image in time where something important happens with your objects.

Go to Keyframes panel — just click on the little tab one with the small key icon in the bottom window — to be able to edit keyframes. Now press the small button with "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.

[[Image:Keyframes Panel.png|center|frame]]

Now, go to the "1s" mark in the timeslider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should have three keyframes in the list, now.

[[Image:Keyframes Panel 2.png|center|frame]]

== The s's and f's: Understanding the Timeline ==
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).

By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.

For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".

== The Keyframe List ==

The keyframe list is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory.

Now, you might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your timeslider will jump to the correct time.

You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!

{{l|Image:synfig_tut_5.png|center|frame}}

Wondering where the animation is? Just click to an arbitrary position on the timeslider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.

Notice, that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember image state at particular time. That's why when we modified circle position at "1s", it stays on the left at "2s" (as well as at "0s"). If you switch back to Params Panel, and look at the Timetrack Panel you'll notice a three green dots appeared on the right of {{Literal|Origin}} parameter. Those are called {{L|Waypoints}} and they used to indicate changes of parameter over time.

[[Image:TimetrackOriginWaypoints.png|thumb|center|450px]]

== Rendering your animation ==

Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".

Let's try the first way. Leave the animate editing mode by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ("caret" button in the upper left corner) and select {{c|File|Render}}. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose "gif" target format instead of "Auto", then click Render. Depending on your processor speed it should take a few moments, but finally the image window status bar should say "File rendered successfully".

[[Image:synfig_tut_6.png|618px|thumb|center|Calling "Render" from menu in Synfig Studio]]

{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimise the palette for the image.}}
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!

{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file, and type something like this:

synfig -t gif BasicKnightRider.sif

A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

Then you are done and can view your animated gif using Firefox or another program as mentioned above.

== Conclusion ==

Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities incude its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.

Doc:Animation Basics

2010-11-30T05:33:29Z

Auldsbel: /* Setting up the workspace */

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


== Introduction ==

Creating an animation in Synfig Studio is really easy. It basically means to change a drawing — you just need to create the first stage and last stage of a change, and Synfig take care of the steps in between.

Let's look at a simple example. Consider a moving light like the one at the front of the Knight Rider car. Drop the realism, you get a circle moving from left to right and back. In other words, you need to create three 'steps' or 'stages':

# The circle is on the left.
# The circle is on the right.
# The circle is back on the left.

== Setting up the workspace ==

Let's do it. Start Synfig Studio. New file is automatically created at the start. Click the 'caret' menu (between the horizontal and vertical rules, in the top left hand corner of the canvas), then select {{c|Edit|Properties}}. A canvas properties dialog will appear.

Give a name and description for your canvas, then click {{Literal|Apply}} (don't click {{Literal|OK}} yet — we're not quite done with the Properties dialog). Go to the {{Literal|Time}} tab and make sure to edit {{Literal|End Time}}. Change "5s" to "2s" — that will make our animation to be 2 seconds long.

[[Image:File Properties Dialog - End Time.png|center|frame|Canvas Properties Dialog]]

Now create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas. Also, uncheck {{Literal|Low Res}} checkbox at the top of the canvas window to disable low resolution view mode - that will make your image look sharper. Generally, having that option enabled increases canvas redraw speed, but that's not what we need now.

[[Image:synfig_tut_2.png|450px|center|thumb]]

Now we need a circle. Change the fill color to red, and create a circle. It doesn't matter if it's not perfect: You can edit it. Activate the Transform Tool, and click the circle. It will go into a sort of editing mode which is easy to detect by the small green dot in the middle and the white rectangle around it. You can move the red circle by grabbing it on its green dot in the middle.

[[Image:synfig_tut_3.png|450px|center|thumb]]

These are the first steps to draw an object and to move it, but not an animation yet, you may say. Indeed. Let's have a look how this works.

== Adding movement ==

In the beginning, you entered a value of 2 seconds in the Properties dialog. Because the length of your animation is non-zero, your canvas window (the one where you draw) got a grey time slider at the bottom. You can click on it, and a small orange indicator will appear indicating your position in time. Try clicking in several places on the time slider and notice that the entry field on the left of time slider changing its values to something like "12f", "1s 15f", etc. You can set your position on the timeslider by changing values in that field. For example, if you enter "1s" and press {{Shortcut|enter}}, the orange indicator will move in the middle of time slider, and entering "2s" will move it to the end of time slider.

{{Note|Note|In the last case orange indicator will become invisible, because "2s" is right at the boundary of time slider, just believe us — it's there.}}
But when you changing your position on the time slider nothing changes on the canvas yet. First, you need to switch to {{Literal|Animate Editing Mode}} by clicking the green dot just to the right of the gray time slider. Note that your canvas gets a red outline; it reminds you that changes to your objects now affect your animation.

[[Image:synfig_tut_4.png|450px|center|thumb]]

Previously, three "steps" or "stages" were mentioned. These are represented by so-called "{{l|Keyframe|keyframes}}". (Just in case you're familiar with video encoding: No, that's not the same!) A keyframe is an image in time where something important happens with your objects.

Go to Keyframes panel — just click on the little tab one with the small key icon in the bottom window — to be able to edit keyframes. Now press the small button with "plus" sign and you should get a new entry in the list displaying {{Literal|0f, 0f, (JMP)}}.

[[Image:Keyframes Panel.png|center|frame]]

Now, go to the "1s" mark in the timeslider. The small orange indicator should move there. Then add another keyframe by clicking the small plus sign. Repeat the process with the time slider indicator set to "2s" (it's at the end of your animation). You should have three keyframes in the list, now.

[[Image:Keyframes Panel 2.png|center|frame]]

== The s's and f's: Understanding the Timeline ==
By now, you may have figured out what those mysterious "1s 10f"-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).

By default each second is divided into 24 frames, much like a meter on a measuring tape is divided into 100 centimeters. The frame markings begin at zero (0) and go up to 24, whereupon a new second is entered and the framecount returns to zero.

For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f".

== The Keyframe List ==

The keyframe list is rather easy to understand. It displays {{Literal|Time}} which is basically the start time, {{Literal|Length}} which is self-explanatory, {{Literal|Jump}} which we'll cover next, and {{Literal|Description}} which is, again, self-explanatory.

Now, you might be wondering about the entries called {{Literal|(JMP)}}. In fact, these are links just like web links: click them, and the indicator in your timeslider will jump to the correct time.

You can use this to edit your image for a given moment in time. For instance, you can now jump to the first second, and move the red circle to the right. There! You made your first movement, your first animation with Synfig!

{{l|Image:synfig_tut_5.png|center|frame}}

Wondering where the animation is? Just click to an arbitrary position on the timeslider: You will note that the red circle is in a new position, one that you didn't specify! So what happened? Synfig figured out what you would like to do, namely move the circle, and drew all the images between these states. Each image will later make a frame in your animation and the circle will appear to be moving.

Notice, that you don't need to go to the last keyframe at "2s" and move your circle back to the left. Keyframes make Synfig remember image state at particular time. That's why when we modified circle position at "1s", it stays on the left at "2s" (as well as at "0s"). If you switch back to Params Panel, and look at the Timetrack Panel you'll notice a three green dots appeared on the right of {{Literal|Origin}} parameter. Those are called {{L|Waypoints}} and they used to indicate changes of parameter over time.

[[Image:TimetrackOriginWaypoints.png|thumb|center|450px]]

== Rendering your animation ==

Before you can see your animation, you need to render your work. There are two ways to do so: using the Synfig Studio (what you have been using so far) or the command-line program called "synfig".

Let's try the first way. Leave the animate editing mode by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name "BasicKnightRider.sifz". Then go to menu in the Canvas Window ("caret" button in the upper left corner) and select {{c|File|Render}}. Change the filename to "BasicKnightRider.gif" in the same location where you saved "BasicKnightRider.sifz" and choose "gif" target format instead of "Auto", then click Render. Depending on your processor speed it should take a few moments, but finally the image window status bar should say "File rendered successfully".

[[Image:synfig_tut_6.png|618px|thumb|center|Calling "Render" from menu in Synfig Studio]]

{{Note|Note|The "magick++" target (if it is available) produces much better gif files than the "gif" target because it can optimise the palette for the image.}}
Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firefox will replay the GIF all the time which makes your short animation a rather long one. If you're now seeing a red circle moving from the left to the right and back, congratulations! You just made your first animation!

{{Note|Note|You can also preview your animation. Press the "caret" menu button in the upper left corner of the Canvas Window and choose {{c|File|Preview}}.}}
If you would rather use the command line instead of the menu to render your animation, then open a terminal (on Windows, go to {{c|Start|Run}}, type {{Literal|cmd}} and press {{Shortcut|enter}}), change to the directory you saved the file, and type something like this:

synfig -t gif BasicKnightRider.sif

A few messages appear that don't matter right now. Depending on your processor speed it should take a few moments, but finally a line like this will appear:

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

Then you are done and can view your animated gif using Firefox or another program as mentioned above.

== Conclusion ==

Of course, the position of an object is not the only thing you can change with Synfig Studio. Other possibilities incude its size, its outline, its color, etc. Synfig comes with several example files that should let you dig deeper into the possibilities.

Doc:Getting Started

2010-11-26T00:32:17Z

Auldsbel: /* User interface */

{{Title|Getting Started}}
{{Navigation|Category:Manual|Doc:Animation_Basics}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Basic}}
{{Category|Updated}}


== User interface ==
The screenshot below displays Synfig Studio's window layout:

[[Image:Interface.png|600px|thumb|center|border|Default interface layout of Synfig Studio]]

Synfig Studio main interface components are:

* {{l|Toolbox}} — is the main Synfig Studio window. It contains system menu and buttons, tools and more to create and edit your artwork. Closing it exits the application.
* {{l|Canvas}} — displays your artwork and animation.
* {{l|Category:Panels}} — 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 from the Toolbox select {{c|Panels|Reset Windows to Original Layout}}.}}

The center window is the {{L|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 — 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.

The other two windows (one on the bottom, and one to the right) are customizable {{l|dock dialogs|dock dialogs}}. Each dock dialog contains a set of {{L|panel|panels}}, arranged horizontally or vertically. Some panels share the same space inside the dock dialog and you can switch between them by clicking on their {{l|panel tab|tabs}}. You can rearrange the contents of dock dialogs as you wish by dragging the panel tab to where you want it. You can even create a new dock dialog by dragging a tab out of its dock dialog.

If you accidentally close a {{l|panel|panel}} (by dragging it out of the dock dialog, and closing the new dock dialog that gets created), no worries. Simply go to the {{l|Toolbox}}, select {{c|File|Panels}} in menu right there and then click on the name of the panel you need.

The most important panels are:

* {{l|Layers Panel}} — shows you the hierarchy of layer of your working canvas. It also allows you to manipulate these layers.
* {{l|Params 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.
* {{l|Categorical Help#Synfig Dialogs|Tool Options Panel}} — shows you any options specific to the currently selected tool.
* {{l|Navigator|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.
* {{l|History Panel}} — shows you the history stack for the current composition. You can also edit the actions in history.

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.

== Under the hood ==

[[Image:Adding-layers-tutorial-12.png|right|frame|Layers Panel]]

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:

# 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 artist's sanity of course).
# A layer can not only composite information on top of the image below it, but also distorts 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...

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|Params 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 {{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").

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

With the Circle Tool selected, you can now create circles in the {{l|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 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.

{{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 blue circle 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 I digress), a green dot at the center, and a cyan dot on the radius. Those dots are called "{{l|duck|ducks}}". If you want to modify the circle, grab a duck and drag it around. Easy!

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 — this works in both the Canvas Window and the {{l|Layers Panel}}. Try it!

You can also select multiple ducks. You can do this in several ways. First, you can hold down {{Shortcut|ctrl}} and individually click the ducks 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 area of ducks that you want selected.

Go ahead, select two circles and select all of their ducks. With several ducks selected, moving one duck will move all of the ducks.


{{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 ducks selected. It is much easier just to try, than read about it. Select a few circles, select all of their ducks, and try using the rotate and scale tools.

Note that duck manipulation tools 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 the way you want.

{{DevNotesBegin}}
You may find that Synfig Studio is SLOW, making it practically unusable on the old hardware. The biggest reason for this is that all of the color calculations are done in floating point — to enable High-Dynamic-Range Imaging.

However, some major re-implementations and optimizations are planned to be made that should quite dramatically improve the performance of Synfig on all platforms. The goal is not a 200% speed increase, but at least a '''2000% speed increase'''. Currently there is a work in progress in development branch implementing those optimization via OpenGL. It already shows very promising results, but is not ready for usage yet.
{{DevNotesEnd}}

== Linking ==

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 ducks (the cyan dots).

To select multiple ducks, 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 ducks selected, right click on either duck 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 — 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}} — but I'm getting ahead of myself.

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 Params panel, and selecting {{Literal|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.

{{DevNotesBegin}}
Its functionality isn't quite 100% yet (saving and loading custom palettes is not implemented), but the default palette is pretty decent.
{{DevNotesEnd}}

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 {{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 Params 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.

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.

== 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 {{l|Doc:Animation_Basics|next section}}.

Doc:Getting Started

2010-11-26T00:29:43Z

Auldsbel: /* User interface */

{{Title|Getting Started}}
{{Navigation|Category:Manual|Doc:Animation_Basics}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Basic}}
{{Category|Updated}}


== User interface ==
The screenshot below displays Synfig Studio's window layout:

[[Image:Interface.png|600px|thumb|center|border|Default interface layout of Synfig Studio]]

Synfig Studio main interface components are:

* {{l|Toolbox}} — is the main Synfig Studio window. It contains system menu and buttons, tools and more to create and edit your artwork. Closing it exits the application.
* {{l|Canvas}} — displays your artwork and animation.
* {{l|Category:Panels}} — 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 from the Toolbox select {{c|Panels|Reset Windows to Original Layout}}.}}

The window at the center is called {{L|Canvas Window}}. Each time you start Synfig Studio, a new Canvas Window is opened. This window represents the {{l|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 {{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.

The other two windows (one on the bottom, and one to the right) are customizable {{l|dock dialogs|dock dialogs}}. Each dock dialog contains a set of {{L|panel|panels}}, arranged horizontally or vertically. Some panels share the same space inside the dock dialog and you can switch between them by clicking on their {{l|panel tab|tabs}}. You can rearrange the contents of dock dialogs as you wish by dragging the panel tab to where you want it. You can even create a new dock dialog by dragging a tab out of its dock dialog.

If you accidentally close a {{l|panel|panel}} (by dragging it out of the dock dialog, and closing the new dock dialog that gets created), no worries. Simply go to the {{l|Toolbox}}, select {{c|File|Panels}} in menu right there and then click on the name of the panel you need.

The most important panels are:

* {{l|Layers Panel}} — shows you the hierarchy of layer of your working canvas. It also allows you to manipulate these layers.
* {{l|Params 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.
* {{l|Categorical Help#Synfig Dialogs|Tool Options Panel}} — shows you any options specific to the currently selected tool.
* {{l|Navigator|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.
* {{l|History Panel}} — shows you the history stack for the current composition. You can also edit the actions in history.

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.

== Under the hood ==

[[Image:Adding-layers-tutorial-12.png|right|frame|Layers Panel]]

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:

# 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 artist's sanity of course).
# A layer can not only composite information on top of the image below it, but also distorts 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...

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|Params 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 {{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").

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

With the Circle Tool selected, you can now create circles in the {{l|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 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.

{{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 blue circle 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 I digress), a green dot at the center, and a cyan dot on the radius. Those dots are called "{{l|duck|ducks}}". If you want to modify the circle, grab a duck and drag it around. Easy!

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 — this works in both the Canvas Window and the {{l|Layers Panel}}. Try it!

You can also select multiple ducks. You can do this in several ways. First, you can hold down {{Shortcut|ctrl}} and individually click the ducks 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 area of ducks that you want selected.

Go ahead, select two circles and select all of their ducks. With several ducks selected, moving one duck will move all of the ducks.


{{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 ducks selected. It is much easier just to try, than read about it. Select a few circles, select all of their ducks, and try using the rotate and scale tools.

Note that duck manipulation tools 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 the way you want.

{{DevNotesBegin}}
You may find that Synfig Studio is SLOW, making it practically unusable on the old hardware. The biggest reason for this is that all of the color calculations are done in floating point — to enable High-Dynamic-Range Imaging.

However, some major re-implementations and optimizations are planned to be made that should quite dramatically improve the performance of Synfig on all platforms. The goal is not a 200% speed increase, but at least a '''2000% speed increase'''. Currently there is a work in progress in development branch implementing those optimization via OpenGL. It already shows very promising results, but is not ready for usage yet.
{{DevNotesEnd}}

== Linking ==

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 ducks (the cyan dots).

To select multiple ducks, 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 ducks selected, right click on either duck 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 — 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}} — but I'm getting ahead of myself.

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 Params panel, and selecting {{Literal|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.

{{DevNotesBegin}}
Its functionality isn't quite 100% yet (saving and loading custom palettes is not implemented), but the default palette is pretty decent.
{{DevNotesEnd}}

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 {{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 Params 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.

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.

== 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 {{l|Doc:Animation_Basics|next section}}.

Doc:Getting Started

2010-11-21T05:35:11Z

Auldsbel:

{{Title|Getting Started}}
{{Navigation|Category:Manual|Doc:Animation_Basics}}
{{Category|Manual}}
{{Category|Tutorials}}
{{Category|Tutorials Basic}}
{{Category|Updated}}


== User interface ==
The screenshot below displays Synfig Studio's window layout:

[[Image:Interface.png|600px|thumb|center|border|Default interface layout of Synfig Studio]]

Synfig Studio main interface components are:

* {{l|Toolbox}} — is the main Synfig Studio window. It contains system menu and buttons, tools and more to create and edit your artwork. Closing it exits the application.
* {{l|Canvas}} — displays your artwork and animation.
* {{l|Category:Panels}} — 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 from the Toolbox select {{c|Panels|Reset Windows to Original Layout}}.}}
The window at the center is called {{L|Canvas Window}}. Each time you start Synfig Studio, a new Canvas Window is opened. This window represents the {{l|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 {{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.

The other two windows (one on the bottom, and one to the right) are customizable {{l|dock dialogs|dock dialogs}}. Each dock dialog contains a set of {{L|panel|panels}}, arranged horizontally or vertically. Some panels share the same space inside the dock dialog and you can switch between them by clicking on their {{l|panel tab|tabs}}. You can rearrange the contents of dock dialogs as you wish by dragging the panel tab to where you want it. You can even create a new dock dialog by dragging a tab out of its dock dialog.

If you accidentally close a {{l|panel|panel}} (by dragging it out of the dock dialog, and closing the new dock dialog that gets created), no worries. Simply go to the {{l|Toolbox}}, select {{c|File|Panels}} in menu right there and then click on the name of the panel you need.

The most important panels are:

* {{l|Layers Panel}} — shows you the hierarchy of layer of your working canvas. It also allows you to manipulate these layers.
* {{l|Params 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.
* {{l|Categorical Help#Synfig Dialogs|Tool Options Panel}} — shows you any options specific to the currently selected tool.
* {{l|Navigator|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.
* {{l|History Panel}} — shows you the history stack for the current composition. You can also edit the actions in history.

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.

== Under the hood ==

[[Image:Adding-layers-tutorial-12.png|right|frame|Layers Panel]]

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:

# 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 artist's sanity of course).
# A layer can not only composite information on top of the image below it, but also distorts 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...

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|Params 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 {{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").

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

With the Circle Tool selected, you can now create circles in the {{l|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 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.

{{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 blue circle 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 I digress), a green dot at the center, and a cyan dot on the radius. Those dots are called "{{l|duck|ducks}}". If you want to modify the circle, grab a duck and drag it around. Easy!

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 — this works in both the Canvas Window and the {{l|Layers Panel}}. Try it!

You can also select multiple ducks. You can do this in several ways. First, you can hold down {{Shortcut|ctrl}} and individually click the ducks 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 area of ducks that you want selected.

Go ahead, select two circles and select all of their ducks. With several ducks selected, moving one duck will move all of the ducks.


{{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 ducks selected. It is much easier just to try, than read about it. Select a few circles, select all of their ducks, and try using the rotate and scale tools.

Note that duck manipulation tools 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 the way you want.

{{DevNotesBegin}}
You may find that Synfig Studio is SLOW, making it practically unusable on the old hardware. The biggest reason for this is that all of the color calculations are done in floating point — to enable High-Dynamic-Range Imaging.

However, some major re-implementations and optimizations are planned to be made that should quite dramatically improve the performance of Synfig on all platforms. The goal is not a 200% speed increase, but at least a '''2000% speed increase'''. Currently there is a work in progress in development branch implementing those optimization via OpenGL. It already shows very promising results, but is not ready for usage yet.
{{DevNotesEnd}}

== Linking ==

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 ducks (the cyan dots).

To select multiple ducks, 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 ducks selected, right click on either duck 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 — 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}} — but I'm getting ahead of myself.

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 Params panel, and selecting {{Literal|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.

{{DevNotesBegin}}
Its functionality isn't quite 100% yet (saving and loading custom palettes is not implemented), but the default palette is pretty decent.
{{DevNotesEnd}}

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 {{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 Params 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.

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.

== 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 {{l|Doc:Animation_Basics|next section}}.

Doc:Overview

2010-11-21T04:59:12Z

Auldsbel:

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

Synfig Studio is an open-source, 2D vector animation software. It is designed to produce film-quality animation with fewer people and resources.

As you probably know, animation is the rapid display of a sequence of images creating the illusion of movement. Traditionally 2D animation is created by drawing each image individually. These images are called "frames". This method is called "frame-by-frame animation". The illusion of movement requires many such frames. This method is slow, requiring a lot of time and resources.


Synfig Studio uses two techniques to draw these frames:
* Morphing animation
* Cutout animation

'''Morphing''' takes two images and creates a smooth transition between them. This is done by changing one shape into another, often assisted by the use of '''control points'''. Synfig Studio morphs vector shapes automatically. Animation is done simply by supplying drawings in key positions at relatively wide time intervals. The artist supplies as many frames as needed to create the basic sense of motion for a scene. Synfig Studio takes care of creating the in-between frames.


'''Cutout animation''' is created by splitting objects into parts and applying some simple transformations to them (like translation, rotation or scale) at different points in time. Synfig Studio uses those values to interpolate the motion for in-between frames. Cutout animation can be produced from '''bitmap images''' or '''vector graphics'''.


In either case Synfig Studio's role is to fill the gaps between frames (also called "keyframes") to produce smooth, fluid animation. This process is called "tweening". But tweening is not the only advantage of Synfig Studio.

Although Synfig Studio is not directly intended to draw animation frame-by-frame, it can be used to bring your hand-drawn frame-by-frame animation to film-quality level. The artist converts each frame's bitmap data into vector format. This process, called "tracing", is usually done by hand by constructing vector shapes on top of bitmap images. Some fun and fascinating effects can be applied during the creation process to achieve a professional animation look.


Synfig Studio gives you flexible control over repeated data, such as colors, outline characteristics, textures, images and many more - even animation trajectories and their actions (sets). Re-using repeated data is done by linking. And for serious animation projects, Synfig Studio has the power to deliver to your satisfaction.

Among the plain linking pieces of artwork data you can also define relations between them using a set of functions. That allows the artist to create automatic animation based on the defined laws and bring whole animation process to a new level.



Synfig Studio's features are covered in detail within this manual.


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

Doc:Overview

2010-11-21T04:56:59Z

Auldsbel:

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

Synfig Studio is an open-source, 2D vector animation software. It is designed to produce film-quality animation with fewer people and resources.

As you probably know, animation is the rapid display of a sequence of images creating the illusion of movement. Traditionally 2D animation is created by drawing each image individually. These images are called "frames". This method is called "frame-by-frame animation". The illusion of movement requires many such frames. This method is slow, requiring a lot of time and resources.


Synfig Studio uses two techniques to draw these frames:
* Morphing animation
* Cutout animation

'''Morphing''' takes two images and creates a smooth transition between them. This is done by changing one shape into another, often assisted by the use of '''control points'''. Synfig Studio morphs vector shapes automatically. Animation is done simply by supplying drawings in key positions at relatively wide time intervals. The artist supplies as many frames as needed to create the basic sense of motion for a scene. Synfig Studio takes care of creating the in-between frames.


'''Cutout animation''' is created by splitting objects into parts and applying some simple transformations to them (like translation, rotation or scale) at different points in time. Synfig Studio uses those values to interpolate the motion for in-between frames. Cutout animation can be produced from '''bitmap images''' or '''vector graphics'''.


In either case Synfig Studio's role is to fill the gaps between frames (also called "keyframes") to produce smooth, fluid animation. This process is called "tweening". But tweening is not the only advantage of Synfig Studio.

Although Synfig Studio is not directly intended to draw animation frame-by-frame, it can be used to bring your hand-drawn frame-by-frame animation to film-quality level. The artist converts each frame's bitmap data into vector format. This process, called "tracing", is usually done by hand by constructing vector shapes on top of bitmap images. Some fun and fascinating effects can be applied during the creation process to achieve a professional animation look.


Synfig Studio gives you flexible control over repeated data, such as colors, outline characteristics, textures, images and many more - even animation trajectories and their actions (sets). Re-using repeated data is done by linking. And for serious animation projects, Synfig Studio has the power to deliver to your satisfaction.

Among the plain linking pieces of artwork data you can also define relations between them using a set of functions. That allows to create automatic animation based on the defined laws and bring whole animation process to the new level.



Synfig Studio's features are covered in detail within this manual.


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