https://wiki.synfig.org/api.php?action=feedcontributions&user=Jancsika&feedformat=atomSynfig Studio :: Documentation - User contributions [en]2024-03-29T08:20:04ZUser contributionsMediaWiki 1.26.3https://wiki.synfig.org/index.php?title=Doc:Adding_Layers&diff=11806Doc:Adding Layers2010-03-10T06:24:33Z<p>Jancsika: /* Introduction */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Adding Layers}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
<!-- Page info end --><br />
<br />
''Usual note to the reader: This is not yet finished; please be patient.''<br />
<br />
<br />
== Introduction ==<br />
<br />
In the {{l|Animation Basics|previous tutorial}}, you made your first simple animation by changing the attributes of primitive objects, such as: position, color, and size. These simple types, however, are seldom sufficient to create advanced characters and objects. To do so, Synfig uses {{l|Layer|Layers}}. They are similar to layers used in other drawing applications, such as the GIMP, for instance.<br />
<br />
{|<br />
|<br />
However, Synfig is different from simple layers in at least two respects:<br />
# You can organize layers into hierachical groups.<br />
# You can use upper layers to change the behaviour (or look) of underlying layers.<br />
<br />
Doing so is quite easy. Let's look at a simple example.<br />
<br />
# Create a new file with 0 duration. There's no need to bother with a timeline at this point.<br />
# Create a simple rectangle with corresponding tool.<br />
|| ||<br />
{{l|Image:Rectangle-tool-on-panel.jpg}}<br />
|}<br />
<br />
{{l|Image:Adding-layers-tutorial-0.jpg}}<br />
<br />
== Combining Layers ==<br />
<br />
Now there are two ways to proceed. In the first way, pick the {{l|Gradient Tool|gradient tool}} from the Synfig {{l|Toolbox}}, and click into the canvas once. You should note that another layer was added in the {{l|Layers Panel}} called 'Gradient'. This is nothing special. If you see no gradient but just a plain color, pick the {{l|Normal Tool|normal tool}}, click into the canvas to activate the gradient's ducks. You need to grab the one you see and move it a bit until a gradient appears.<br />
<br />
{{l|Image:Adding-layers-tutorial-1.jpg}}<br />
<br />
You now have a gradient but it is not what you wanted: It spreads the whole canvas and the goal was to have a gradient on the rectangle. Let's fix this now.<br />
<br />
Select the gradient and the rectangle layer in the {{l|Layers Panel}}. They should appear with a blue background now. Then, context-click (ie. right-click on Windows and Linux) and select '{{l|Encapsulate}}' from the menu. The view of your layer tab should change now, showing a small box called '{{l|Paste Canvas|Inline Canvas}}' with an arrow in front.<br />
<br />
You can treat this layer like any other layer -- move it around, duplicate it, copy and paste it. By clicking on the arrow you can expand the inline canvas to see its contents, your previous two layers, the gradient and the rectangle. <br />
<br />
If you want to change the name of it to something more descriptive, just select the layer in the layer tab and click on its label. Then you just edit it in place. You can do this for ANY layer, and are strongly encouraged to do so.<br />
<br />
== Using locality ==<br />
<br />
{{l|Image:Adding-layers-tutorial-2.jpg}}<br />
<br />
However, there is still a problem: The gradient still covers the whole canvas althought we wanted it to be restricted on the rectangle. To do so, activate the gradient layer in the Layer tab. Now go to the {{l|Params Panel}} (by default a tab in the Params-Children-Keyframes window), and search the attribute called '{{l|Blend Method}}'. Double-click the entry and select '{{l|Blend Method#Onto|Onto}}' from the appearing drop-down menu.<br />
<br />
{{l|Image:Adding-layers-tutorial-3.jpg}}<br />
<br />
The gradient should now be restricted to the rectangle. Congratulations! You just made your first interacting layers with Synfig.<br />
<br />
{{l|Image:Adding-layers-tutorial-4.jpg}}<br />
<br />
If only for the additional organization, encapsulating layers into inline canvases dramatically improves the ease of use of Synfig Studio. But lots of programs can do this. The concept of scope as just demonstrated sets Synfig apart from other programs with layer hierarchies.<br />
<br />
However, a layer can only modify the data that it gets from directly below it. In other words, if you were to throw a {{l|Blur Layer}} on top of the layers inside the {{l|Paste Canvas|inline canvas}} we just created, it would just blur them -- anything under the inline canvas would not be blurred!<br />
<br />
Let's try it. Create two red {{l|Circle Tool|circles}} and in the {{l|Layers Panel}} move them under the inline canvas. Now our inline canvas (with rectangle and gradient) is in front of those two circles.<br />
<br />
{{l|Image:Adding-layers-tutorial-5.jpg}}<br />
<br />
Expand the inline canvas to show its contents, and select the top layer inside of it (should be the "Gradient" layer). This is where we want to insert new layer. Create another circle filled with a black color. Layer with circle will be created over the gradient layer inside the inline canvas.<br />
<br />
{{l|Image:Adding-layers-tutorial-6.jpg}} {{l|Image:Adding-layers-tutorial-7.jpg}}<br />
<br />
Now, right click on the layer with black circle in the {{l|Layers Panel}} and a popup menu will appear. The first item in that popup is "New Layer". Inside of the "New Layer" menu, you'll see several categories of layers you could create, but what we want is a blur, so goto the Blur category and select the "Blur" layer. (so that would be "New Layer->{{l|Blur Layer Category|Blurs}}->{{l|Blur Layer|Blur}}")<br />
<br />
{{l|Image:Adding-layers-tutorial-8.jpg}}<br />
<br />
Well, it blurred... but something is not quite right - outside edge of contents of the inline canvas is still sharp. It is doing this because the blend method of the blur defaulted to "{{l|Blend Method#Composite|Composite}}" (you can change the {{l|New Layer Defaults#Default Blend Method|default blend method}} for new layers from the {{l|New Layer Defaults}} section of the {{l|Toolbox}}). What we want is a blend method of "{{l|Blend Method#Straight|Straight}}". Just select the blur layer, and change the {{l|Blend Method}} to "{{l|Blend Method#Straight|Straight}}" in the {{l|Params Panel}}. <br />
<br />
: NOTE: I will probably change the way that default blend methods are handled in the future--as the way it is currently handled seems to only create hassles like this.<br />
<br />
{{l|Image:Adding-layers-tutorial-9.jpg}} {{l|Image:Adding-layers-tutorial-10.jpg}}<br />
<br />
Ok, now we have all of the contents of the inline canvas blurred, but everything under it is sharp!<br />
<br />
== Digging further... ==<br />
<br />
If you care to look into Synfig's main menu 'Layer > New Layer' you will note quite a lot of different possibilities for making layers. Several of them sound rather unusual; '{{l|Transform Layers Category|Transform}} > {{l|Rotate Layer|Rotate}}' for example. You can use this to add new attributes to your objects. And just like other, basic attributes in the {{l|Animation Basics|previous animation tutorial}}, you can change them to be different on certain {{l|Keyframe|keyframes}}. Synfig will take care of interpolating the steps in between.<br />
<br />
For example, you could create a {{l|Creating Shapes|some shape}} and add a {{l|Rotate Layer}} over it. Combine this with the lesson learned in the {{l|Animation Basics|last tutorial}} and you can create a rotating effect. This technique is used for creation of {{l|Cut-out Animation}}.</div>Jancsikahttps://wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=11805Doc:Animation Basics2010-03-10T06:14:36Z<p>Jancsika: /* The Keyframe List */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
Creating an animation in Synfig 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 will take care of the steps in between.<br />
<br />
Let´s see 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':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
Let's do it.<br />
<br />
== Setting up the workspace ==<br />
<br />
Start Synfig Studio, and create a new file. Click the 'caret' menu (between the horizontal and vertical rules, in the top left hand corner of the canvas), then "Edit" and then "Properties". A dialog called 'Properties' will appear. Give your new file a name and a description, and then click "Apply" (don't click "Save" yet -- we're not quite done with the 'Properties' dialog). Make sure to edit 'End Time'. The strange looking '0f' will change to a more familiar presentation as soon as you click it. Set this to 2 seconds.<br />
<br />
{{l|Image:File Properties Dialog - End Time.jpg}}<br />
<br />
Now create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas.<br />
<br />
{{l|Image:synfig_tut_2.png}}<br />
<br />
We now need a circle. Change the painting color to red, and draw a circle. It doesn't matter if it's not perfect: You can edit it. Activate the 'Normal' 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 grapping it on its green dot in the middle.<br />
<br />
{{l|Image:synfig_tut_3.png}}<br />
<br />
These are the first steps to draw an object and to move it, but not yet an animation, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the 'Properties' dialog. Due to this, your canvas window (the one where you draw) got additional capabilities. There's a grey time slider, for instance. You can click on it, and a small orange indicator will appear but nothing changes. This is because you need to switch to 'Animate Editing Mode' first by clicking the green dot just to the right of the grey time slider. You will note that your canvas gets a red outline; it reminds you that changes to your objects now affect your animation.<br />
<br />
{{l|Image:synfig_tut_4.png}}<br />
<br />
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.<br />
<br />
Click the keyframe tab -- this is the one with the small key in the 'Params, etc.' window -- to be able to edit keyframes. Now click the small 'plus' sign and you should get a new entry in the list displaying '0f, 0f, (JMP)'.<br />
<br />
{{l|Image:params.png}}<br />
<br />
If this didn't happen, you made something not mentioned so far. Close your file and start again.<br />
<br />
If the entry appears, go to the '1s 0f' 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 of'. You should have three keyframes in the list, now.<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious '1s 0f'-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
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.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f."<br />
<br />
== The Keyframe List ==<br />
<br />
The keyframe list is rather easy to understand: It displays 'Time' which is basically the start time, 'Length' which is self-explanatory, 'Jump' which we'll cover next, and 'Description' which is, again, self-explanatory. <br />
<br />
Now, you might be wondering about the entries called '(JMP)'. In fact, these are links just like web links: Click them, and the indicator in your timeslider will jump to the correct time.<br />
<br />
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!<br />
<br />
{{l|Image:synfig_tut_5.png}}<br />
<br />
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.<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to process (or render) your work. There are two ways to do so; using the synfigstudio (what you have been using so far), or the command-line program synfig.<br />
<br />
To do so, close 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.sif. Then press on the > symbol in the upper left corner of the image window to open the menu, open the File menu and click on the Render item. Change the filename to BasicKnightRider.gif in the same location you saved BasicKnightRider.sif 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". The "magick++" target (if it is available) produces much better gifs than the "gif" target because it can optimise the palette for the image.<br />
<br />
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!<br />
<br />
''Note: you can also preview your animation. Press on the > symbol in the upper left corner of the image window to open the menu. There choose File->Preview.''<br />
<br />
{{l|Image:synfig_tut_6.png}}<br />
<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (On Windows, go Start -> Run -> type cmd<enter>), change to the directory you saved the file, and type something like<br />
<br />
synfig -t gif BasicKnightRider.sif<br />
<br />
WARNING: The version you are using may not support the GIF output format at the moment, it depends on the version and compilation settings.<br />
<br />
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<br />
<br />
BasicKnightRider.sif ==> BasicKnightRider.gif: DONE<br />
<br />
should appear, then you are done and can view your animated gif using firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
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.</div>Jancsikahttps://wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=11804Doc:Animation Basics2010-03-10T06:10:10Z<p>Jancsika: /* The Keyframe List */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
Creating an animation in Synfig 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 will take care of the steps in between.<br />
<br />
Let´s see 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':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
Let's do it.<br />
<br />
== Setting up the workspace ==<br />
<br />
Start Synfig Studio, and create a new file. Click the 'caret' menu (between the horizontal and vertical rules, in the top left hand corner of the canvas), then "Edit" and then "Properties". A dialog called 'Properties' will appear. Give your new file a name and a description, and then click "Apply" (don't click "Save" yet -- we're not quite done with the 'Properties' dialog). Make sure to edit 'End Time'. The strange looking '0f' will change to a more familiar presentation as soon as you click it. Set this to 2 seconds.<br />
<br />
{{l|Image:File Properties Dialog - End Time.jpg}}<br />
<br />
Now create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas.<br />
<br />
{{l|Image:synfig_tut_2.png}}<br />
<br />
We now need a circle. Change the painting color to red, and draw a circle. It doesn't matter if it's not perfect: You can edit it. Activate the 'Normal' 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 grapping it on its green dot in the middle.<br />
<br />
{{l|Image:synfig_tut_3.png}}<br />
<br />
These are the first steps to draw an object and to move it, but not yet an animation, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the 'Properties' dialog. Due to this, your canvas window (the one where you draw) got additional capabilities. There's a grey time slider, for instance. You can click on it, and a small orange indicator will appear but nothing changes. This is because you need to switch to 'Animate Editing Mode' first by clicking the green dot just to the right of the grey time slider. You will note that your canvas gets a red outline; it reminds you that changes to your objects now affect your animation.<br />
<br />
{{l|Image:synfig_tut_4.png}}<br />
<br />
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.<br />
<br />
Click the keyframe tab -- this is the one with the small key in the 'Params, etc.' window -- to be able to edit keyframes. Now click the small 'plus' sign and you should get a new entry in the list displaying '0f, 0f, (JMP)'.<br />
<br />
{{l|Image:params.png}}<br />
<br />
If this didn't happen, you made something not mentioned so far. Close your file and start again.<br />
<br />
If the entry appears, go to the '1s 0f' 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 of'. You should have three keyframes in the list, now.<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious '1s 0f'-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
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.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f."<br />
<br />
== The Keyframe List ==<br />
<br />
The keyframe list is rather easy to understand: It displays 'Time' which is basically the start time, 'Length' which is self-explanatory, 'Jump' which we'll cover next, and 'Description' which is, again, self-explanatory. <br />
<br />
Now, you might be wondering about the entries called '(JMP)'. In fact, these are links just like web links: Click them, and the indicator in your timeslider will jump to the correct time.<br />
<br />
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!<br />
<br />
{{l|Image:synfig_tut_5.png}}<br />
<br />
You wonder where the animation is? Just click to arbitray position on the timeslider: You will note that the red circle is in positions where you didn't move it to! What happen? Synfig figured out what you would like to do, namely move the circle, and draw all the images between these states. Each image will later make a frame in your animation; and the circle will appear to be moving.<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to process (or render) your work. There are two ways to do so; using the synfigstudio (what you have been using so far), or the command-line program synfig.<br />
<br />
To do so, close 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.sif. Then press on the > symbol in the upper left corner of the image window to open the menu, open the File menu and click on the Render item. Change the filename to BasicKnightRider.gif in the same location you saved BasicKnightRider.sif 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". The "magick++" target (if it is available) produces much better gifs than the "gif" target because it can optimise the palette for the image.<br />
<br />
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!<br />
<br />
''Note: you can also preview your animation. Press on the > symbol in the upper left corner of the image window to open the menu. There choose File->Preview.''<br />
<br />
{{l|Image:synfig_tut_6.png}}<br />
<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (On Windows, go Start -> Run -> type cmd<enter>), change to the directory you saved the file, and type something like<br />
<br />
synfig -t gif BasicKnightRider.sif<br />
<br />
WARNING: The version you are using may not support the GIF output format at the moment, it depends on the version and compilation settings.<br />
<br />
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<br />
<br />
BasicKnightRider.sif ==> BasicKnightRider.gif: DONE<br />
<br />
should appear, then you are done and can view your animated gif using firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
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.</div>Jancsikahttps://wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=11803Doc:Animation Basics2010-03-10T06:09:29Z<p>Jancsika: /* The Keyframe List */ changed wandering to wondering</p>
<hr />
<div><!-- Page info --><br />
{{Title|Animation Basics}}<br />
{{Navigation|Category:Manual|Doc:Adding Layers}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
Creating an animation in Synfig 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 will take care of the steps in between.<br />
<br />
Let´s see 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':<br />
<br />
# The circle is on the left.<br />
# The circle is on the right.<br />
# The circle is back on the left.<br />
<br />
Let's do it.<br />
<br />
== Setting up the workspace ==<br />
<br />
Start Synfig Studio, and create a new file. Click the 'caret' menu (between the horizontal and vertical rules, in the top left hand corner of the canvas), then "Edit" and then "Properties". A dialog called 'Properties' will appear. Give your new file a name and a description, and then click "Apply" (don't click "Save" yet -- we're not quite done with the 'Properties' dialog). Make sure to edit 'End Time'. The strange looking '0f' will change to a more familiar presentation as soon as you click it. Set this to 2 seconds.<br />
<br />
{{l|Image:File Properties Dialog - End Time.jpg}}<br />
<br />
Now create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas.<br />
<br />
{{l|Image:synfig_tut_2.png}}<br />
<br />
We now need a circle. Change the painting color to red, and draw a circle. It doesn't matter if it's not perfect: You can edit it. Activate the 'Normal' 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 grapping it on its green dot in the middle.<br />
<br />
{{l|Image:synfig_tut_3.png}}<br />
<br />
These are the first steps to draw an object and to move it, but not yet an animation, you may say. Indeed. Let's have a look how this works.<br />
<br />
== Adding movement ==<br />
<br />
In the beginning, you entered a value of 2 seconds in the 'Properties' dialog. Due to this, your canvas window (the one where you draw) got additional capabilities. There's a grey time slider, for instance. You can click on it, and a small orange indicator will appear but nothing changes. This is because you need to switch to 'Animate Editing Mode' first by clicking the green dot just to the right of the grey time slider. You will note that your canvas gets a red outline; it reminds you that changes to your objects now affect your animation.<br />
<br />
{{l|Image:synfig_tut_4.png}}<br />
<br />
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.<br />
<br />
Click the keyframe tab -- this is the one with the small key in the 'Params, etc.' window -- to be able to edit keyframes. Now click the small 'plus' sign and you should get a new entry in the list displaying '0f, 0f, (JMP)'.<br />
<br />
{{l|Image:params.png}}<br />
<br />
If this didn't happen, you made something not mentioned so far. Close your file and start again.<br />
<br />
If the entry appears, go to the '1s 0f' 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 of'. You should have three keyframes in the list, now.<br />
<br />
== The s's and f's: Understanding the Timeline ==<br />
By now, you may have figured out what those mysterious '1s 0f'-type marks represent. They indicate a specific point on the timeline, expressing a location in terms of seconds (s) and frames (f).<br />
<br />
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.<br />
<br />
For example, when five whole seconds and three frames have passed, using this timeline notation would be "5s 3f."<br />
<br />
== The Keyframe List ==<br />
<br />
The keyframe list is rather easy to understand: It displays 'Time' which is basically the start time, 'Length' which is self-explanatory, 'Jump' which we'll cover next, and 'Description' which is, again, self-explanatory. <br />
<br />
Now, you might be wondering about the entries called '(JMP)'? In fact, these are links just like web links: Click them, and the indicator in your timeslider will jump to the correct time.<br />
<br />
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!<br />
<br />
{{l|Image:synfig_tut_5.png}}<br />
<br />
You wonder where the animation is? Just click to arbitray position on the timeslider: You will note that the red circle is in positions where you didn't move it to! What happen? Synfig figured out what you would like to do, namely move the circle, and draw all the images between these states. Each image will later make a frame in your animation; and the circle will appear to be moving.<br />
<br />
== Rendering your animation ==<br />
<br />
Before you can see your animation, you need to process (or render) your work. There are two ways to do so; using the synfigstudio (what you have been using so far), or the command-line program synfig.<br />
<br />
To do so, close 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.sif. Then press on the > symbol in the upper left corner of the image window to open the menu, open the File menu and click on the Render item. Change the filename to BasicKnightRider.gif in the same location you saved BasicKnightRider.sif 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". The "magick++" target (if it is available) produces much better gifs than the "gif" target because it can optimise the palette for the image.<br />
<br />
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!<br />
<br />
''Note: you can also preview your animation. Press on the > symbol in the upper left corner of the image window to open the menu. There choose File->Preview.''<br />
<br />
{{l|Image:synfig_tut_6.png}}<br />
<br />
If you would rather use the command line instead of the menu to render your animation, then open a terminal (On Windows, go Start -> Run -> type cmd<enter>), change to the directory you saved the file, and type something like<br />
<br />
synfig -t gif BasicKnightRider.sif<br />
<br />
WARNING: The version you are using may not support the GIF output format at the moment, it depends on the version and compilation settings.<br />
<br />
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<br />
<br />
BasicKnightRider.sif ==> BasicKnightRider.gif: DONE<br />
<br />
should appear, then you are done and can view your animated gif using firefox or another program as mentioned above.<br />
<br />
== Conclusion ==<br />
<br />
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.</div>Jancsikahttps://wiki.synfig.org/index.php?title=Doc:Getting_Started&diff=11800Doc:Getting Started2010-03-10T03:21:39Z<p>Jancsika: /* Linking */ you programmers and your gotos :)</p>
<hr />
<div><!-- Page info --><br />
{{Title|Getting Started}}<br />
{{Navigation|Category:Manual|Doc:Animation_Basics}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
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:<br />
<br />
{| border="0" cellspacing="0" align="center" width="100%"<br />
|<br />
# 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).<br />
# 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...<br />
<br />
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}}.<br />
<br />
|| || <br />
http://i170.photobucket.com/albums/u243/zenoscope/layer.png <br />
|}<br />
<br />
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.<br />
<br />
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. <br />
<br />
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.<br />
<br />
== The user interface ==<br />
<br />
{| border="0" cellspacing="5" align="center" width="100%"<br />
| |<br />
|http://i170.photobucket.com/albums/u243/zenoscope/toolbar.png<br />
|| ||<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
|}<br />
<br />
Here are some of the more important ones:<br />
<br />
* {{l|Layers Panel}} - This tab shows you the layer hierarchy for the currently selected canvas. It also allows you to manipulate these layers.<br />
* {{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).<br />
* {{l|Categorical Help#Synfig Dialogs|Tool Options Panel}} - This tab shows you any options specific to the currently selected tool.<br />
* {{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.<br />
* {{l|History Panel}} - This tab shows you the history stack for the current composition. You can also edit the actions in history.<br />
<br />
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.<br />
<br />
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. <br />
<br />
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.<br />
<br />
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.)<br />
<br />
== First steps ==<br />
<br />
Let's create something so that we can play with it and tweak 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"). <br />
<br />
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.<br />
<br />
: '''Note''': Some laptop users might experience the following problem: when you click-drag on the canvas using the {{l|Circle Tool|circle tool}}, either nothing seems to happen or you end up making insanely huge circles. The problem is that Synfig has detected the touchpad and (incorrectly) enabled that device. To fix this: click {{c|File|Input devices...}}, then in the resulting dialog window select 'Disabled' for your touchpad device. After this change, your external mouse and your touchpad will work as expected.<br />
<br />
With the circle tool selected, you can now create circles in the {{l|Work Area}}. 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 accidently 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.<br />
<br />
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 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}}s''. If you want to modify the circle, grab a duck and drag it around. Easy!<br />
<br />
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!<br />
<br />
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. <br />
<br />
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. <br />
<br />
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. <br />
<br />
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 the way you want.<br />
<br />
== Linking ==<br />
<br />
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). <br />
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?<br />
<br />
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". <br />
<br />
<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><br />
<br />
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. <br />
<br />
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.<br />
<br />
That's all great, but we still haven't changed the color of the circle. There are two ways to do this. The first is to select the circle layer you want to modify, go to the params tab and double-click on the color parameter. A color selector dialog will then show up, and you can just tweak away. But let's say you already selected your color 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.<br />
<br />
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.<br />
<br />
== Digging deeper ==<br />
<br />
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}}.</div>Jancsikahttps://wiki.synfig.org/index.php?title=Doc:Getting_Started&diff=11799Doc:Getting Started2010-03-10T03:16:21Z<p>Jancsika: /* First steps */ changed some awkward sentences</p>
<hr />
<div><!-- Page info --><br />
{{Title|Getting Started}}<br />
{{Navigation|Category:Manual|Doc:Animation_Basics}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
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:<br />
<br />
{| border="0" cellspacing="0" align="center" width="100%"<br />
|<br />
# 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).<br />
# 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...<br />
<br />
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}}.<br />
<br />
|| || <br />
http://i170.photobucket.com/albums/u243/zenoscope/layer.png <br />
|}<br />
<br />
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.<br />
<br />
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. <br />
<br />
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.<br />
<br />
== The user interface ==<br />
<br />
{| border="0" cellspacing="5" align="center" width="100%"<br />
| |<br />
|http://i170.photobucket.com/albums/u243/zenoscope/toolbar.png<br />
|| ||<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
|}<br />
<br />
Here are some of the more important ones:<br />
<br />
* {{l|Layers Panel}} - This tab shows you the layer hierarchy for the currently selected canvas. It also allows you to manipulate these layers.<br />
* {{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).<br />
* {{l|Categorical Help#Synfig Dialogs|Tool Options Panel}} - This tab shows you any options specific to the currently selected tool.<br />
* {{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.<br />
* {{l|History Panel}} - This tab shows you the history stack for the current composition. You can also edit the actions in history.<br />
<br />
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.<br />
<br />
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. <br />
<br />
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.<br />
<br />
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.)<br />
<br />
== First steps ==<br />
<br />
Let's create something so that we can play with it and tweak 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"). <br />
<br />
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.<br />
<br />
: '''Note''': Some laptop users might experience the following problem: when you click-drag on the canvas using the {{l|Circle Tool|circle tool}}, either nothing seems to happen or you end up making insanely huge circles. The problem is that Synfig has detected the touchpad and (incorrectly) enabled that device. To fix this: click {{c|File|Input devices...}}, then in the resulting dialog window select 'Disabled' for your touchpad device. After this change, your external mouse and your touchpad will work as expected.<br />
<br />
With the circle tool selected, you can now create circles in the {{l|Work Area}}. 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 accidently 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.<br />
<br />
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 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}}s''. If you want to modify the circle, grab a duck and drag it around. Easy!<br />
<br />
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!<br />
<br />
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. <br />
<br />
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. <br />
<br />
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. <br />
<br />
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 the way you want.<br />
<br />
== Linking ==<br />
<br />
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). <br />
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?<br />
<br />
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". <br />
<br />
<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><br />
<br />
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. <br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
== Digging deeper ==<br />
<br />
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}}.</div>Jancsikahttps://wiki.synfig.org/index.php?title=Doc:Getting_Started&diff=11798Doc:Getting Started2010-03-10T03:00:58Z<p>Jancsika: /* First steps */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Getting Started}}<br />
{{Navigation|Category:Manual|Doc:Animation_Basics}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
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:<br />
<br />
{| border="0" cellspacing="0" align="center" width="100%"<br />
|<br />
# 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).<br />
# 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...<br />
<br />
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}}.<br />
<br />
|| || <br />
http://i170.photobucket.com/albums/u243/zenoscope/layer.png <br />
|}<br />
<br />
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.<br />
<br />
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. <br />
<br />
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.<br />
<br />
== The user interface ==<br />
<br />
{| border="0" cellspacing="5" align="center" width="100%"<br />
| |<br />
|http://i170.photobucket.com/albums/u243/zenoscope/toolbar.png<br />
|| ||<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
|}<br />
<br />
Here are some of the more important ones:<br />
<br />
* {{l|Layers Panel}} - This tab shows you the layer hierarchy for the currently selected canvas. It also allows you to manipulate these layers.<br />
* {{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).<br />
* {{l|Categorical Help#Synfig Dialogs|Tool Options Panel}} - This tab shows you any options specific to the currently selected tool.<br />
* {{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.<br />
* {{l|History Panel}} - This tab shows you the history stack for the current composition. You can also edit the actions in history.<br />
<br />
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.<br />
<br />
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. <br />
<br />
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.<br />
<br />
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.)<br />
<br />
== First steps ==<br />
<br />
Let's create something so that we can play with it and tweak 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"). <br />
<br />
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.<br />
<br />
: '''Note''': Some laptop users might experience the following problem: when you click-drag on the canvas using the {{l|Circle Tool|circle tool}}, either nothing seems to happen or you end up making insanely huge circles. The problem is that Synfig has detected the touchpad and (incorrectly) enabled that device. To fix this: click {{c|File|Input devices...}}, then in the resulting dialog window select 'Disabled' for your touchpad device. After this change, your external mouse and your touchpad will work as expected.<br />
<br />
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.<br />
<br />
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!<br />
<br />
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!<br />
<br />
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. <br />
<br />
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. <br />
<br />
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. <br />
<br />
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.<br />
<br />
== Linking ==<br />
<br />
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). <br />
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?<br />
<br />
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". <br />
<br />
<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><br />
<br />
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. <br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
== Digging deeper ==<br />
<br />
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}}.</div>Jancsikahttps://wiki.synfig.org/index.php?title=Doc:Getting_Started&diff=11797Doc:Getting Started2010-03-10T02:53:50Z<p>Jancsika: /* The user interface */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Getting Started}}<br />
{{Navigation|Category:Manual|Doc:Animation_Basics}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
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:<br />
<br />
{| border="0" cellspacing="0" align="center" width="100%"<br />
|<br />
# 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).<br />
# 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...<br />
<br />
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}}.<br />
<br />
|| || <br />
http://i170.photobucket.com/albums/u243/zenoscope/layer.png <br />
|}<br />
<br />
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.<br />
<br />
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. <br />
<br />
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.<br />
<br />
== The user interface ==<br />
<br />
{| border="0" cellspacing="5" align="center" width="100%"<br />
| |<br />
|http://i170.photobucket.com/albums/u243/zenoscope/toolbar.png<br />
|| ||<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
|}<br />
<br />
Here are some of the more important ones:<br />
<br />
* {{l|Layers Panel}} - This tab shows you the layer hierarchy for the currently selected canvas. It also allows you to manipulate these layers.<br />
* {{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).<br />
* {{l|Categorical Help#Synfig Dialogs|Tool Options Panel}} - This tab shows you any options specific to the currently selected tool.<br />
* {{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.<br />
* {{l|History Panel}} - This tab shows you the history stack for the current composition. You can also edit the actions in history.<br />
<br />
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.<br />
<br />
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. <br />
<br />
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.<br />
<br />
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.)<br />
<br />
== First steps ==<br />
<br />
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"). <br />
<br />
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.<br />
<br />
: '''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.<br />
<br />
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.<br />
<br />
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!<br />
<br />
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!<br />
<br />
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. <br />
<br />
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. <br />
<br />
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. <br />
<br />
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.<br />
<br />
== Linking ==<br />
<br />
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). <br />
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?<br />
<br />
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". <br />
<br />
<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><br />
<br />
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. <br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
== Digging deeper ==<br />
<br />
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}}.</div>Jancsikahttps://wiki.synfig.org/index.php?title=Doc:Getting_Started&diff=11796Doc:Getting Started2010-03-10T02:52:21Z<p>Jancsika: /* The user interface */ took a redudant paragraph about the canvas menu and moved it up two paragraphs</p>
<hr />
<div><!-- Page info --><br />
{{Title|Getting Started}}<br />
{{Navigation|Category:Manual|Doc:Animation_Basics}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
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:<br />
<br />
{| border="0" cellspacing="0" align="center" width="100%"<br />
|<br />
# 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).<br />
# 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...<br />
<br />
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}}.<br />
<br />
|| || <br />
http://i170.photobucket.com/albums/u243/zenoscope/layer.png <br />
|}<br />
<br />
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.<br />
<br />
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. <br />
<br />
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.<br />
<br />
== The user interface ==<br />
<br />
{| border="0" cellspacing="5" align="center" width="100%"<br />
| |<br />
|http://i170.photobucket.com/albums/u243/zenoscope/toolbar.png<br />
|| ||<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
|}<br />
<br />
Here are some of the more important ones:<br />
<br />
* {{l|Layers Panel}} - This tab shows you the layer hierarchy for the currently selected canvas. It also allows you to manipulate these layers.<br />
* {{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).<br />
* {{l|Categorical Help#Synfig Dialogs|Tool Options Panel}} - This tab shows you any options specific to the currently selected tool.<br />
* {{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.<br />
* {{l|History Panel}} - This tab shows you the history stack for the current composition. You can also edit the actions in history.<br />
<br />
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.<br />
<br />
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. <br />
<br />
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.<br />
<br />
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)<br />
<br />
== First steps ==<br />
<br />
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"). <br />
<br />
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.<br />
<br />
: '''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.<br />
<br />
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.<br />
<br />
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!<br />
<br />
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!<br />
<br />
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. <br />
<br />
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. <br />
<br />
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. <br />
<br />
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.<br />
<br />
== Linking ==<br />
<br />
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). <br />
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?<br />
<br />
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". <br />
<br />
<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><br />
<br />
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. <br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
== Digging deeper ==<br />
<br />
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}}.</div>Jancsikahttps://wiki.synfig.org/index.php?title=Doc:Getting_Started&diff=11795Doc:Getting Started2010-03-10T02:45:08Z<p>Jancsika: /* The user interface */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Getting Started}}<br />
{{Navigation|Category:Manual|Doc:Animation_Basics}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
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:<br />
<br />
{| border="0" cellspacing="0" align="center" width="100%"<br />
|<br />
# 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).<br />
# 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...<br />
<br />
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}}.<br />
<br />
|| || <br />
http://i170.photobucket.com/albums/u243/zenoscope/layer.png <br />
|}<br />
<br />
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.<br />
<br />
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. <br />
<br />
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.<br />
<br />
== The user interface ==<br />
<br />
{| border="0" cellspacing="5" align="center" width="100%"<br />
| |<br />
|http://i170.photobucket.com/albums/u243/zenoscope/toolbar.png<br />
|| ||<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
|}<br />
<br />
Here are some of the more important ones:<br />
<br />
* {{l|Layers Panel}} - This tab shows you the layer hierarchy for the currently selected canvas. It also allows you to manipulate these layers.<br />
* {{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).<br />
* {{l|Categorical Help#Synfig Dialogs|Tool Options Panel}} - This tab shows you any options specific to the currently selected tool.<br />
* {{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.<br />
* {{l|History Panel}} - This tab shows you the history stack for the current composition. You can also edit the actions in history.<br />
<br />
If you click the "new composition" button in the toolbox, a new {{l|Work Area Window}} will be opened. Click the caret menu (between the horizontal and vertical rulers in the top left corner of the work area), then "Edit" then "Properties", and the {{l|Canvas Properties Dialog|canvas properties dialog}} will appear.<br />
<br />
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. <br />
<br />
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.<br />
<br />
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) 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)<br />
<br />
== First steps ==<br />
<br />
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"). <br />
<br />
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.<br />
<br />
: '''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.<br />
<br />
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.<br />
<br />
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!<br />
<br />
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!<br />
<br />
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. <br />
<br />
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. <br />
<br />
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. <br />
<br />
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.<br />
<br />
== Linking ==<br />
<br />
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). <br />
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?<br />
<br />
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". <br />
<br />
<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><br />
<br />
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. <br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
== Digging deeper ==<br />
<br />
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}}.</div>Jancsikahttps://wiki.synfig.org/index.php?title=Doc:Getting_Started&diff=11794Doc:Getting Started2010-03-10T02:41:57Z<p>Jancsika: /* The user interface */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Getting Started}}<br />
{{Navigation|Category:Manual|Doc:Animation_Basics}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
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:<br />
<br />
{| border="0" cellspacing="0" align="center" width="100%"<br />
|<br />
# 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).<br />
# 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...<br />
<br />
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}}.<br />
<br />
|| || <br />
http://i170.photobucket.com/albums/u243/zenoscope/layer.png <br />
|}<br />
<br />
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.<br />
<br />
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. <br />
<br />
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.<br />
<br />
== The user interface ==<br />
<br />
{| border="0" cellspacing="5" align="center" width="100%"<br />
| |<br />
|http://i170.photobucket.com/albums/u243/zenoscope/toolbar.png<br />
|| ||<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
|}<br />
<br />
Here are some of the more important ones:<br />
<br />
* {{l|Layers Panel}} - This tab shows you the layer hierarchy for the currently selected canvas. It also allows you to manipulate these layers.<br />
* {{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).<br />
* {{l|Categorical Help#Synfig Dialogs|Tool Options Panel}} - This tab shows you any options specific to the currently selected tool.<br />
* {{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.<br />
* {{l|History Panel}} - This tab shows you the history stack for the current composition. You can also edit the actions in history.<br />
<br />
If you click the "new composition" button in the toolbox, a new {{l|Work Area Window}} will be opened. Click the caret menu (between the horizontal and vertical rulers in the top left corner of the work area), then "View" then "Properties", and the {{l|Canvas Properties Dialog|canvas properties dialog}} will appear.<br />
<br />
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. <br />
<br />
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.<br />
<br />
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) 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)<br />
<br />
== First steps ==<br />
<br />
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"). <br />
<br />
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.<br />
<br />
: '''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.<br />
<br />
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.<br />
<br />
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!<br />
<br />
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!<br />
<br />
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. <br />
<br />
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. <br />
<br />
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. <br />
<br />
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.<br />
<br />
== Linking ==<br />
<br />
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). <br />
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?<br />
<br />
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". <br />
<br />
<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><br />
<br />
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. <br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
== Digging deeper ==<br />
<br />
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}}.</div>Jancsikahttps://wiki.synfig.org/index.php?title=Doc:Getting_Started&diff=11793Doc:Getting Started2010-03-10T02:38:07Z<p>Jancsika: /* The user interface */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Getting Started}}<br />
{{Navigation|Category:Manual|Doc:Animation_Basics}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
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:<br />
<br />
{| border="0" cellspacing="0" align="center" width="100%"<br />
|<br />
# 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).<br />
# 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...<br />
<br />
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}}.<br />
<br />
|| || <br />
http://i170.photobucket.com/albums/u243/zenoscope/layer.png <br />
|}<br />
<br />
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.<br />
<br />
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. <br />
<br />
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.<br />
<br />
== The user interface ==<br />
<br />
{| border="0" cellspacing="5" align="center" width="100%"<br />
| |<br />
|http://i170.photobucket.com/albums/u243/zenoscope/toolbar.png<br />
|| ||<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
|}<br />
<br />
Here are some of the more important ones:<br />
<br />
* {{l|Layers Panel}} - This tab shows you the layer hierarchy for the currently selected canvas. It also allows you to manipulate these layers.<br />
* {{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)<br />
* {{l|Categorical Help#Synfig Dialogs|Tool Options Panel}} - Shows you any options specific to the currently selected tool<br />
* {{l|Navigator|Navigator}} - Shows you a thumbnail of what the currently selected Canvas looks like. You can also zoom in and move the focus around with this tab.<br />
* {{l|History Panel}} - Shows you the history stack for the current composition. You can also edit the actions in history.<br />
<br />
If you click the "new composition" button in the toolbox, a new {{l|Work Area Window}} will be opened. Click the caret menu (between the horizontal and vertical rulers in the top left corner of the work area), then "View" then "Properties", and the {{l|Canvas Properties Dialog|canvas properties dialog}} will appear.<br />
<br />
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. <br />
<br />
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.<br />
<br />
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) 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)<br />
<br />
== First steps ==<br />
<br />
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"). <br />
<br />
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.<br />
<br />
: '''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.<br />
<br />
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.<br />
<br />
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!<br />
<br />
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!<br />
<br />
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. <br />
<br />
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. <br />
<br />
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. <br />
<br />
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.<br />
<br />
== Linking ==<br />
<br />
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). <br />
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?<br />
<br />
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". <br />
<br />
<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><br />
<br />
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. <br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
== Digging deeper ==<br />
<br />
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}}.</div>Jancsikahttps://wiki.synfig.org/index.php?title=Doc:Getting_Started&diff=11792Doc:Getting Started2010-03-10T02:36:34Z<p>Jancsika: /* The user interface */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Getting Started}}<br />
{{Navigation|Category:Manual|Doc:Animation_Basics}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
<!-- Page info end --><br />
<br />
== Introduction ==<br />
<br />
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:<br />
<br />
{| border="0" cellspacing="0" align="center" width="100%"<br />
|<br />
# 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).<br />
# 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...<br />
<br />
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}}.<br />
<br />
|| || <br />
http://i170.photobucket.com/albums/u243/zenoscope/layer.png <br />
|}<br />
<br />
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.<br />
<br />
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. <br />
<br />
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.<br />
<br />
== The user interface ==<br />
<br />
{| border="0" cellspacing="5" align="center" width="100%"<br />
| |<br />
|http://i170.photobucket.com/albums/u243/zenoscope/toolbar.png<br />
|| ||<br />
<br />
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.<br />
<br />
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.<br />
<br />
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 goto the toolbox and goto {{c|File|Dialogs}}, and then click on the name of the dialog you need.<br />
<br />
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.<br />
|}<br />
<br />
Here are some of the more important ones:<br />
<br />
* {{l|Layers Panel}} - This tab shows you the layer hierarchy for the currently selected canvas. It also allows you to manipulate these layers.<br />
* {{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)<br />
* {{l|Categorical Help#Synfig Dialogs|Tool Options Panel}} - Shows you any options specific to the currently selected tool<br />
* {{l|Navigator|Navigator}} - Shows you a thumbnail of what the currently selected Canvas looks like. You can also zoom in and move the focus around with this tab.<br />
* {{l|History Panel}} - Shows you the history stack for the current composition. You can also edit the actions in history.<br />
<br />
If you click the "new composition" button in the toolbox, a new {{l|Work Area Window}} will be opened. Click the caret menu (between the horizontal and vertical rulers in the top left corner of the work area), then "View" then "Properties", and the {{l|Canvas Properties Dialog|canvas properties dialog}} will appear.<br />
<br />
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. <br />
<br />
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.<br />
<br />
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) 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)<br />
<br />
== First steps ==<br />
<br />
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"). <br />
<br />
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.<br />
<br />
: '''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.<br />
<br />
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.<br />
<br />
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!<br />
<br />
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!<br />
<br />
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. <br />
<br />
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. <br />
<br />
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. <br />
<br />
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.<br />
<br />
== Linking ==<br />
<br />
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). <br />
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?<br />
<br />
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". <br />
<br />
<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><br />
<br />
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. <br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
== Digging deeper ==<br />
<br />
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}}.</div>Jancsika