https://wiki.synfig.org/api.php?action=feedcontributions&user=Claus&feedformat=atomSynfig Studio :: Documentation - User contributions [en]2024-03-28T14:51:08ZUser contributionsMediaWiki 1.26.3https://wiki.synfig.org/index.php?title=User:Claus&diff=3370User:Claus2006-01-30T07:48:36Z<p>Claus: </p>
<hr />
<div>Contact via [http://clausi.cl.funpic.de/ clausi's soon-to-be-hosted-elsewhere page].</div>Claushttps://wiki.synfig.org/index.php?title=Dev_talk:Software_roadmap&diff=135Dev talk:Software roadmap2006-01-30T07:37:23Z<p>Claus: </p>
<hr />
<div>I'd like to work on improving the UI and making it comply to the [http://developer.gnome.org/projects/gup/hig/ HIG].<br />
<br />
Progress so far:<br />
<br />
* [http://i36.photobucket.com/albums/e27/droden/software/synfig/abb7847a.png] Canvas Properties Dialog<br />
* [http://i36.photobucket.com/albums/e27/droden/software/synfig/b25cdfb6.png] Canvas Properties Dialog, Tab 2<br />
* [http://i36.photobucket.com/albums/e27/droden/software/synfig/e504b02a.png] Canvas Properties Dialog, Tab 3<br />
* [http://i36.photobucket.com/albums/e27/droden/software/synfig/c1909071.png] Render Dialog<br />
* [http://i36.photobucket.com/albums/e27/droden/software/synfig/ac411a1c.png] Preview Options<br />
* [http://i36.photobucket.com/albums/e27/droden/software/synfig/724a0495.png] Waypoint Editor<br />
* [http://i36.photobucket.com/albums/e27/droden/software/synfig/7f0360d2.png] Canvas Options Dialog<br />
* [http://i36.photobucket.com/albums/e27/droden/software/synfig/a840f627.png] Canvas Options Dialog, Tab 2<br />
* [http://i36.photobucket.com/albums/e27/droden/software/synfig/6bb96bb7.png] Canvas Options Dialog, Tab 3<br />
<br />
Any suggestions or comments? --[[User:Bombe|Bombe]] 14:40, 29 Jan 2006 (PST)<br />
<br />
* Rocks! See also [[http://sourceforge.net/tracker/index.php?func=detail&aid=1411992&group_id=144022&atid=757416 bug 1411992]] --[[User:Claus|Claus]] 23:35, 29 Jan 2006 (PST)</div>Claushttps://wiki.synfig.org/index.php?title=Dev_talk:Software_roadmap&diff=134Dev talk:Software roadmap2006-01-30T07:35:38Z<p>Claus: Added comment</p>
<hr />
<div>I'd like to work on improving the UI and making it comply to the [http://developer.gnome.org/projects/gup/hig/ HIG].<br />
<br />
Progress so far:<br />
<br />
* [http://i36.photobucket.com/albums/e27/droden/software/synfig/abb7847a.png] Canvas Properties Dialog<br />
* [http://i36.photobucket.com/albums/e27/droden/software/synfig/b25cdfb6.png] Canvas Properties Dialog, Tab 2<br />
* [http://i36.photobucket.com/albums/e27/droden/software/synfig/e504b02a.png] Canvas Properties Dialog, Tab 3<br />
* [http://i36.photobucket.com/albums/e27/droden/software/synfig/c1909071.png] Render Dialog<br />
* [http://i36.photobucket.com/albums/e27/droden/software/synfig/ac411a1c.png] Preview Options<br />
* [http://i36.photobucket.com/albums/e27/droden/software/synfig/724a0495.png] Waypoint Editor<br />
* [http://i36.photobucket.com/albums/e27/droden/software/synfig/7f0360d2.png] Canvas Options Dialog<br />
* [http://i36.photobucket.com/albums/e27/droden/software/synfig/a840f627.png] Canvas Options Dialog, Tab 2<br />
* [http://i36.photobucket.com/albums/e27/droden/software/synfig/6bb96bb7.png] Canvas Options Dialog, Tab 3<br />
<br />
Any suggestions or comments? --[[User:Bombe|Bombe]] 14:40, 29 Jan 2006 (PST)<br />
<br />
* Rocks! See also [[http://sourceforge.net/tracker/index.php?func=detail&aid=1411992&group_id=144022&atid=757416|bug 1411992]] --[[User:Claus|Claus]] 23:35, 29 Jan 2006 (PST)</div>Claushttps://wiki.synfig.org/index.php?title=Doc:Adding_Layers&diff=88Doc:Adding Layers2006-01-11T14:45:13Z<p>Claus: Tried to make sense of the notes, added a remark</p>
<hr />
<div>''Usual note to the reader: This is not yet finished; please be patient.''<br />
<br />
<br />
== Introduction ==<br />
<br />
In the previous tutorial, you made a first simple animation by changing the attributes of primitive objects such as its position, color, and size. These simple types, however, are seldomly sufficient to create advanced characters and objects. To do so, Synfig uses [[Layers]]. They are similar to layers known from other drawing application such as the GIMP, for instance.<br />
<br />
However, Synfig is different to 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) or 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.<br />
<br />
<br />
== Combining Layers ==<br />
<br />
Now there are two ways to proceed. In the first way, pick the Gradient Tool from the Synfig main window, and click into the canvas once. You should note that another layer was added in your Layer tab called 'Gradient'. This is nothing special. If you see no gradient but just a plain color, pick the Normal tool, click into the canvas to acivate the gradient's ducks. You need to grab the one you see and move it a bit until a gradient appears.<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 your Layer tab. They should appear with a blue background now. Then, context-click (ie. right-click on Windows and Linux) and select 'Encapsulate' from the menu. The view of your layer tab should change now, showing a small box called 'Inline canvas' with an arrow in front. If you click the arrow, it will unfold and show your previous two layers; the gradient and the rectangle.<br />
<br />
You can treat this layer like any other layer -- move it around, duplicate it, copy and paste it. You'll notice an arrow next to the icon of the box. By clicking on this arrow, you can expand the inline canvas to see its contents. <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 />
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 activate the Params tab in the Parameter Window, and search the attribute called 'Blend method'. Double-click the entry and select 'Unto' from the appearing drop-down menu.<br />
<br />
The gradient should now be restricted to the rectangle. Congratulations! You just made your first interacting layers with Synfig.<br />
<br />
If only for it's organizational capability, encapsulating canvases into inline canvases dramatically improves the usability and usefulness of Synfig Studio. But lots of programs can do this. The concept of locality as just demonstrated sets Synfig apart from other programs with layer hierarchies.<br />
<br />
''Note: The following remarks seem to be outdated already! A blur defaults to 'Straight' here (using SVN 110).'' -- --[[User:Claus|Claus]] 06:45, 11 Jan 2006 (PST)<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 blur layer at the top of the objects inside the inline canvas we just created, it would just blur them -- anything under it would not be blurred!<br />
<br />
Lets try it. Add a few circles under the inline canvas we just created. Expand the inline canvas to show its contents, and select the top layer inside of it (should be the "Outline" layer). This is where we want to insert the blur. Right click on the selected layer 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->Blurs->Blur")<br />
<br />
Well, it blurred... but something is not quite right--the inside edge of the outline is now all soft, but it still kinda looks like there is a hard edge on the outside. It is doing this because the blend method of the blur defaulted to "composite" (you can change the default blend method for new layers from the toolbox). What we want is a blend method of "Straight". Just select the blur layer, and change the blend method to "straight" in the params tab. <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 />
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; 'Transform > Rotade' for example. You can use this to add new attributes to your objects. And just like other, basic attributes in the previous animation tutorial, you can change them to be different in certain keyframes. And of course, Synfig aill take of the steps in between.<br />
<br />
For example, you could create a star from the layers menu, add a 'Rotate' layer. Combine this with the lesson learnt in the last tutorial and you can create a rotating star. Change its color, too, and you'll get a quite impressive effect for 2 minutes of work.</div>Claushttps://wiki.synfig.org/index.php?title=Doc:Adding_Layers&diff=79Doc:Adding Layers2006-01-11T14:26:12Z<p>Claus: Corrected typos</p>
<hr />
<div>''Usual note to the reader: This is not yet finished; please be patient.''<br />
<br />
<br />
== Introduction ==<br />
<br />
In the previous tutorial, you made a first simple animation by changing the attributes of primitive objects such as its position, color, and size. These simple types, however, are seldomly sufficient to create advanced characters and objects. To do so, Synfig uses [[Layers]]. They are similar to layers known from other drawing application such as the GIMP, for instance.<br />
<br />
However, Synfig is different to 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) or 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.<br />
<br />
<br />
== Combining Layers ==<br />
<br />
Now there are two ways to proceed. In the first way, pick the Gradient Tool from the Synfig main window, and click into the canvas once. You should note that another layer was added in your Layer tab called 'Gradient'. This is nothing special. If you see no gradient but just a plain color, pick the Normal tool, click into the canvas to acivate the gradient's ducks. You need to grab the one you see and move it a bit until a gradient appears.<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 your Layer tab. They should appear with a blue background now. Then, context-click (ie. right-click on Windows and Linux) and select 'Encapsulate' from the menu. The view of your layer tab should change now, showing a small box called 'Inline canvas' with an arrow in front. If you click the arrow, it will unfold and show your previous two layers; the gradient and the rectangle.<br />
<br />
You can treat this layer like any other layer -- move it around, duplicate it, copy and paste it. You'll notice an arrow next to the icon of the box. By clicking on this arrow, you can expand the inline canvas to see its contents. <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 />
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 activate the Params tab in the Parameter Window, and search the attribute called 'Blend method'. Double-click the entry and select 'Unto' from the appearing drop-down menu.<br />
<br />
The gradient should now be restricted to the rectangle. Congratulations! You just made your first interacting layers with Synfig.<br />
<br />
If only for it's organizational capability, encapsulating canvases into inline canvases dramatically improves the usability and usefulness of Synfig Studio. But lots of programs can do this. What sets Synfig apart from other programs with layer hierarchies is the concept of locality. Remember how some layers can muck with what is under them, like blur? Well, a layer can only modify the data that it gets from directly below it. In other words, if you were to throw a blur layer at the top of that inline canvas we just created, the only thing it would blur would be the region and outline that are inside of the inline canvas--the circles under it would not be blurred!<br />
<br />
Lets try it. Make sure all the circles are under the inline canvas we just created. Expand the inline canvas to show its contents, and select the top layer inside of it (should be the "Outline" layer). This is where we want to insert the blur. Right click on the selected layer 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->Blurs->Blur")<br />
<br />
Well, it blurred... but something is not quite right--the inside edge of the outline is now all soft, but it still kinda looks like there is a hard edge on the outside. It is doing this because the blend method of the blur defaulted to "composite" (you can change the default blend method for new layers from the toolbox). What we want is a blend method of "Straight". Just select the blur layer, and change the blend method to "straight" in the params tab. <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 />
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; 'Transform > Rotade' for example. You can use this to add new attributes to your objects. And just like other, basic attributes in the previous animation tutorial, you can change them to be different in certain keyframes. And of course, Synfig aill take of the steps in between.<br />
<br />
For example, you could create a star from the layers menu, add a 'Rotate' layer. Combine this with the lesson learnt in the last tutorial and you can create a rotating star. Change its color, too, and you'll get a quite impressive effect for 2 minutes of work.</div>Claushttps://wiki.synfig.org/index.php?title=Doc:Adding_Layers&diff=78Doc:Adding Layers2006-01-11T14:24:48Z<p>Claus: Adding more stuff from Getting_Started tutorial</p>
<hr />
<div>''Usual note to the reader: This is not yet finished; please be patient.''<br />
<br />
<br />
== Introduction ==<br />
<br />
In the previous tutorial, you made a first simple animation by changing the attributes of primitive objects such as its position, color, and size. These simple types, however, are seldomly sufficient to create advanced characters and objects. To do so, Synfig uses [[Layers]]. They are similar to layers known from other drawing application such as the GIMP, for instance.<br />
<br />
However, Synfig is different to 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) or 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.<br />
<br />
<br />
== Combining Layers ==<br />
<br />
Now there are two ways to proceed. In the first way, pick the Gradient Tool from the Synfig main window, and click into the canvas once. You should note that another layer was added in your Layer tab called 'Gradient'. This is nothing special. If you see no gradient but just a plain color, pick the Normal tool, click into the canvas to acivate the gradient's ducks. You need to grab the one you see and move it a bit until a gradient appears.<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 your Layer tab. They should appear with a blue background now. Then, context-click (ie. right-click on Windows and Linux) and select 'Encapsulate' from the menu. The view of your layer tab should change now, showing a small box called 'Inline canvas' with an arrow in front. If you click the arrow, it will unfold and show your previous two layers; the gradient and the rectangle.<br />
<br />
You can treat this layer like any other layer -- move it around, duplicate it, copy and paste it. You'll notice an arrow next to the icon of the box. By clicking on this arrow, you can expand the inline canvas to see its contents. <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 />
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 activate the Params tab in the Parameter Window, and search the attribute called 'Blend method'. Double-click the entry and select 'Unto' from the appearing drop-down menu.<br />
<br />
The gradient should now be restricted to the rectangle. Congratulations! You just made your first interacting layers with Synfig.<br />
<br />
If only for it's organizational capability, encapsulating canvases into inline canvases dramatically improves the usability and usefulness of Synfig Studio. But lots of programs can do this. What sets Synfig apart from other programs with layer hierarchies is the concept of locality. Remember how some layers can muck with what is under them, like blur? Well, a layer can only modify the data that it gets from directly below it. In other words, if you were to throw a blur layer at the top of that inline canvas we just created, the only thing it would blur would be the region and outline that are inside of the inline canvas--the circles under it would not be blurred!<br />
<br />
Lets try it. Make sure all the circles are under the inline canvas we just created. Expand the inline canvas to show its contents, and select the top layer inside of it (should be the "Outline" layer). This is where we want to insert the blur. Right click on the selected layer 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->Blurs->Blur")<br />
<br />
Well, it blurred... but something is not quite right--the inside edge of the outline is now all soft, but it still kinda looks like there is a hard edge on the outside. It is doing this because the blend method of the blur defaulted to "composite" (you can change the default blend method for new layers from the toolbox). What we want is a blend method of "Straight". Just select the blur layer, and change the blend method to "straight" in the params tab. <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 />
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; 'Transform > Rotade' for example. You can use this to add new attributes to your objects. And just like other, basic attributes in the previous animation tutorial, you can change them to be different in certain keyframes. And of course, Synfig aill take of the steps in between.<br />
<br />
For example, you could create a star from the layers menu, add a 'Rotate' layer. Combine this with the leeson learn in the last tutorial and you can create a rotating star. Change its color, too, and you'll get a quite impressive effect for 2 minutes of work.</div>Claushttps://wiki.synfig.org/index.php?title=Doc:Adding_Layers&diff=77Doc:Adding Layers2006-01-11T14:20:43Z<p>Claus: Adding stuff from Getting_Started tutorial</p>
<hr />
<div>''Usual note to the reader: This is not yet finished; please be patient.''<br />
<br />
<br />
== Introduction ==<br />
<br />
In the previous tutorial, you made a first simple animation by changing the attributes of primitive objects such as its position, color, and size. These simple types, however, are seldomly sufficient to create advanced characters and objects. To do so, Synfig uses [[Layers]]. They are similar to layers known from other drawing application such as the GIMP, for instance.<br />
<br />
However, Synfig is different to 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) or 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.<br />
<br />
<br />
== Combining Layers ==<br />
<br />
Now there are two ways to proceed. In the first way, pick the Gradient Tool from the Synfig main window, and click into the canvas once. You should note that another layer was added in your Layer tab called 'Gradient'. This is nothing special. If you see no gradient but just a plain color, pick the Normal tool, click into the canvas to acivate the gradient's ducks. You need to grab the one you see and move it a bit until a gradient appears.<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 your Layer tab. They should appear with a blue background now. Then, context-click (ie. right-click on Windows and Linux) and select 'Encapsulate' from the menu. The view of your layer tab should change now, showing a small box called 'Inline canvas' with an arrow in front. If you click the arrow, it will unfold and show your previous two layers; the gradient and the rectangle.<br />
<br />
You can treat this layer like any other layer -- move it around, duplicate it, copy and paste it. You'll notice an arrow next to the icon of the box. By clicking on this arrow, you can expand the inline canvas to see its contents. <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 />
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 activate the Params tab in the Parameter Window, and search the attribute called 'Blend method'. Double-click the entry and select 'Unto' from the appearing drop-down menu.<br />
<br />
The gradient should now be restricted to the rectangle. Congratulations! You just made your first interacting layers with Synfig.<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; 'Transform > Rotade' for example. You can use this to add new attributes to your objects. And just like other, basic attributes in the previous animation tutorial, you can change them to be different in certain keyframes. And of course, Synfig aill take of the steps in between.<br />
<br />
For example, you could create a star from the layers menu, add a 'Rotate' layer. Combine this with the leeson learn in the last tutorial and you can create a rotating star. Change its color, too, and you'll get a quite impressive effect for 2 minutes of work.</div>Claushttps://wiki.synfig.org/index.php?title=Doc:Adding_Layers&diff=76Doc:Adding Layers2006-01-11T14:08:22Z<p>Claus: A little bit more structure</p>
<hr />
<div>''Usual note to the reader: This is not yet finished; please be patient.''<br />
<br />
<br />
== Introduction ==<br />
<br />
In the previous tutorial, you made a first simple animation by changing the attributes of primitive objects such as its position, color, and size. These simple types, however, are seldomly sufficient to create advanced characters and objects. To do so, Synfig uses [[Layers]]. They are similar to layers known from other drawing application such as the GIMP, for instance.<br />
<br />
However, Synfig is different to 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) or 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.<br />
<br />
<br />
== Combining Layers ==<br />
<br />
Now there are two ways to proceed. In the first way, pick the Gradient Tool from the Synfig main window, and click into the canvas once. You should note that another layer was added in your Layer tab called 'Gradient'. This is nothing special. If you see no gradient but just a plain color, pick the Normal tool, click into the canvas to acivate the gradient's ducks. You need to grab the one you see and move it a bit until a gradient appears.<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 your Layer tab. They should appear with a blue background now. Then, context-click (ie. right-click on Windows and Linux) and select 'Encapsulate' from the menu. The view of your layer tab should change now, showing a small box called 'Inline canvas' with an arrow in front. If you click the arrow, it will unfold and show your previous two layers; the gradient and the rectangle.<br />
<br />
<br />
== Using locality ==<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 activate the Params tab in the Parameter Window, and search the attribute called 'Blend method'. Double-click the entry and select 'Unto' from the appearing drop-down menu.<br />
<br />
The gradient should now be restricted to the rectangle. Congratulations! You just made your first interacting layers with Synfig.<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; 'Transform > Rotade' for example. You can use this to add new attributes to your objects. And just like other, basic attributes in the previous animation tutorial, you can change them to be different in certain keyframes. And of course, Synfig aill take of the steps in between.<br />
<br />
For example, you could create a star from the layers menu, add a 'Rotate' layer. Combine this with the leeson learn in the last tutorial and you can create a rotating star. Change its color, too, and you'll get a quite impressive effect for 2 minutes of work.</div>Claushttps://wiki.synfig.org/index.php?title=Doc:Getting_Started&diff=116Doc:Getting Started2006-01-11T13:37:24Z<p>Claus: Moving stuff to provide a better overview</p>
<hr />
<div>== Introduction ==<br />
<br />
Synfig, like most every other competent graphics program, breaks down individual elements of a [[Canvas]] into [[Layer]]s. However, we differ from other programs in two major ways:<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 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 can act much like Filters would in PhotoShop. For example, we have a [[Blur layer]], [[Radial blur layer]], [[Spherical Distortion layer]], [[color-correct layer]], [[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 [[layer tab]]), you will see its parameters in the param tab.<br />
<br />
Synfig Studio has an autorecover feature. If you are working on something that you haven't saved for a while and the program crashes, you will not loose more than 5 minutes of work. Simply restart Synfig studio and it will 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 />
I have some fairly major re-implementations and optimizations that I am about to implement that should quite dramatically improve the performance of Synfig on all platforms. My goal is not a 200% speed increase, my goal is at least a 2000% speed increase. With the optimizations that I plan to implement, I 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 />
<br />
== The user interface ==<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 [[toolbox]]. This is where you can open files, change [[tools]], etc. You'll notice that most of the buttons are greyed out--because there is no file open yet.<br />
<br />
The other two windows (one on the bottom, and one to the right) are customizable [[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 [[dock tab|tab]] out of the dock dialog it was inside of.<br />
<br />
If you ever accidently close a [[dock tab]]s (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 "File->Dialogs", and then click on the name of the dialog you need.<br />
<br />
There are a lot of [[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 />
Here are some of the more important ones:<br />
<br />
* [[Layers Tab|Layers]] - This tab shows you the layer hierarchy for the currently selected canvas. It also allows you to manipulate these layers.<br />
* [[Paramss Tab|Params]] - 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 />
* [[Tool Options Tab|Tool Options]] - Shows you any options specific to the currently selected tool<br />
* [[Navigator Tab|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 />
* [[History Tab||History]] - 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 [[composition]] will be opened and the [[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 comprehendible in the next few days. 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 [[Canvas window]]. This window represents the [[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 an arrow. If you click on this button, the canvas window menu will pop up. (As an aside, if you right click in the canvas area and there is not a [[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 />
Lets 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 [[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 [[tool options tab]] changed. But we'll get to that later.<br />
<br />
With the circle tool selected, you can now create circles in the [[canvas window]]. This pretty much works exactly as you might expect it to. Go ahead and create two (or more, if you fancy) circles.<br />
<br />
Now go back to the toolbox and click on the [[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 [[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 ''[[duck]]s''. If you want to modify the circle, grab a duck and drag it around. Easy!<br />
<br />
So you can select a [[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 [[canvas window]] and the [[layer tab]]. 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 [[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 [[normal tool]]. Thus, a more descriptive name for this tool might have been the "move" or "translate" tool. <br />
<br />
The [[rotate tool|Rotate]] and [[Scale tool]]s work much like the [[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 [[tool options tab]] to see if it is set up like you want it. <br />
<br />
== Linking ==<br />
<br />
Now lets try [[linking]]. Lets 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 dot). Then 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 [[outline layer|outlines]] are attached to their [[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 />
Lets 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. It's 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 lets 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 [[Animation_Basics|next tutorial]].</div>Claushttps://wiki.synfig.org/index.php?title=Doc:Creating_Shapes&diff=104Doc:Creating Shapes2006-01-11T13:20:10Z<p>Claus: Initial draft from main tutorial</p>
<hr />
<div>(Draft) ''Note to the reader: This is still incomplete; please be patient.''<br />
<br />
=== Introduction ===<br />
<br />
Basic primitives such as circles or rectangles are all great, but they are pretty much geometrically inflexible. What about shapes? To do this, we use the Bline tool.<br />
<br />
=== Headline ===<br />
<br />
In Synfig, the construct for describing shapes is called a Bline. This is roughly analogous to a "path" in other programs, except that it is strictly a hermite spline.<br />
<br />
When you click on the Bline tool, you will see that the ducks from your currently selected layer (if there was one) will disappear, but the layer(s) will still remain selected in the layer tab. This is normal. Anything you create in the Bline tool will be inserted above the currently selected layer. Keep in mind that if you want to insert a shape somewhere, you should select where you want to insert it before you go into the Bline tool--changing the selection afterward will automaticly swap you back to the normal tool. <br />
<br />
If you take a look at the tool options tab, you'll notice that the first things you see are three checkboxes. Make sure that only "Fill" AND "Outline" are checked. <br />
<br />
First, go ahead and click on the "R" button in the lower left corner of the FG/BG color widget in the toolbox. This will reset us back to black and white. Also, go ahead and set the default line width (right next to the FG/BG widget) to something nice and thick -- 10pt should do the trick.<br />
<br />
Clicking with your mouse in the canvas will place vertices. While you are placing a vertex, you can drag out its tangent by dragging the mouse. Do this over and over, and you construct a Bline.<br />
<br />
Keep in mind, however, that during this construction, there is nothing stopping you from just moving it if you don't like where you placed a vertex or a tangent. Honest! If you want to remove a vertex, right click on it and delete it. Want to split the tangents? Right click on the tangent and hit "split tangents". Want to loop the bline? right click on the first vertex and select "loop".<br />
<br />
So I assume you got your first Bline laid out like you want it. That's great. But we are still in construction mode -- the layers haven't been created yet. There are two ways to create the layers:<br />
# just switch to another tool, or <br />
# press the "create" button at the bottom of the tool options tab (it's the icon that looks like a gear).<br />
<br />
For now, just go ahead and click on the Normal tool because we are done with the Bline tool.<br />
<br />
// Insert Figure about here<br />
<br />
Ok, we now have a nice pretty white region with a thick black outline. Notice that there are two layers that we have created--the Outline and the Region. Despite the fact that they are two separate layers, their vertices parameter has already been linked--so you can select either one and move its ducks around and the other one will also change.<br />
<br />
If you want to manipulate the vertices after you have created the layers, it is very easy to do so. Just click on one of the layers and have at it. If you want to remove a vertex, right click on it and hit "Remove Item (smart)". Want to insert a point somewhere? Right click on the segment where you want to insert something and his "Insert item (smart)".<br />
<br />
NOTE: The only major difference between this normal editing mode and the construction mode is in how you split the tangents--in construction mode you right click on the tangent itself. In normal duck editing mode, you must right click on the vertex that the tangents are attached to. This could be considered a usability bug, and it will be resolved at some point.<br />
<br />
I know what you are thinking. This is going to lead to a mess of layers. And yes, if you aren't using the software properly, that is exactly what you will get. But there is a way to make this more sane: Just study the [[Adding_Layers|previous tutorial]]<br />
<br />
One quick thing to mention before I finish up. You can change the width of an outline at each vertex. You do this by selecting the outline layer (NOTE: selecting the region layer won't work, you must select the outline layer) and tweaking with the width ducks. The only problem is, where are the width ducks? by default, they are masked. To toggle width ducks, press ALT-5. You can also see other things to mask via the CanvasWindow->View->MaskDucks menu.<br />
<br />
That should give you enough of a grasp of the software to be able to figure out more stuff on your own.</div>Claushttps://wiki.synfig.org/index.php?title=Doc:Adding_Layers&diff=75Doc:Adding Layers2006-01-08T12:29:52Z<p>Claus: Initial draft</p>
<hr />
<div>== Working with Layers ==<br />
<br />
Usual note to the reader: This is not yet finished; please be patient.<br />
<br />
In the previous tutorial, you made a first simple animation by changing the attributes of primitive objects such as its position, color, and size. These simple types, however, are seldomly sufficient to create advanced characters and objects. To do so, Synfig uses [[Layers]]. They are similar to layers known from other drawing application such as the GIMP, for instance.<br />
<br />
However, Synfig is different to 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) or 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.<br />
<br />
Now there are two ways to proceed. In the first way, pick the Gradient Tool from the Synfig main window, and click into the canvas once. You should note that another layer was added in your Layer tab called 'Gradient'. This is nothing special. If you see no gradient but just a plain color, pick the Normal tool, click into the canvas to acivate the gradient's ducks. You need to grab the one you see and move it a bit until a gradient appears.<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 your Layer tab. They should appear with a blue background now. Then, context-click (ie. right-click on Windows and Linux) and select 'Encapsulate' from the menu. The view of your layer tab should change now, showing a small box called 'Inline canvas' with an arrow in front. If you click the arrow, it will unfold and show your previous two layers; the gradient and the rectangle.<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 activate the Params tab in the Parameter Window, and search the attribute called 'Blend method'. Double-click the entry and select 'Unto' from the appearing drop-down menu.<br />
<br />
The gradient should now be restricted to the rectangle. Congratulations! You just made your first interacting layers with Synfig.<br />
<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; 'Transform > Rotade' for example. You can use this to add new attributes to your objects. And just like other, basic attributes in the previous animation tutorial, you can change them to be different in certain keyframes. And of course, Synfig aill take of the steps in between.<br />
<br />
For example, you could create a star from the layers menu, add a 'Rotate' layer. Combine this with the leeson learn in the last tutorial and you can create a rotating star. Change its color, too, and you'll get a quite impressive effect for 2 minutes of work.</div>Claushttps://wiki.synfig.org/index.php?title=Tutorials&diff=57Tutorials2006-01-08T11:41:51Z<p>Claus: Added the next pages</p>
<hr />
<div>This is an index of all of the tutorials for Synfig Studio.<br />
<br />
{| border="1" cellspacing="0" align="center" width="80%"<br />
|'''Tutorial Name'''||'''Description'''<br />
|-<br />
| [[Getting Started]] || New to Synfig Studio? This tutorial will help you get the gist of things<br />
|-<br />
| [[Animation Basics]] || ...<br />
|-<br />
| [[Adding Layers]] || ...<br />
|-<br />
| [[Creating Shapes]] || ...<br />
|-<br />
| [[Tips and Tricks]] || Quickie tutorials, and commonly-needed tasks.<br />
|}<br />
<br />
== See Also ==<br />
* [[Keyboard Shortcuts]]</div>Claushttps://wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=47Doc:Animation Basics2006-01-06T11:50:42Z<p>Claus: Short additional note , and corrected typo</p>
<hr />
<div>== Animation Basics (Draft) ==<br />
<br />
''Note to the reader: Please be patient. It may take a few days to finish the initial draft.''<br />
<br />
Creating an animation in Synfig is really easy: It basically means to change a drawing - you just need to create the first state and the last state of a change, and Synfig will take care of the steps in between.<br />
<br />
Let's have a look at a simple example. Consider a moving light similar to the one in front of the KnightRider car. Drop the realism and you get a circle that is moving from the left to the right, and back. In other words, you need to create three 'steps' or 'stages': <br />
1. The circle is on the left. <br />
2. The circle is on the right. <br />
3. The circle is back on the left. <br />
<br />
Let's do it.<br />
<br />
Start Synfig Studio, and create a new file. A dialog called 'Properties' will appear. 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 />
Figure 1 about here<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 />
Figure 2 about here<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 />
This 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 />
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 />
Previously, three 'steps' or 'stages' were mentioned. These are represented by so-called '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 />
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 keyframe list is rather easy to understand: It displays 'Time' which is basically the start time, 'Lenght' which is self-explanatory, 'Jump' which we'll cover next, and 'Description' which is, agagin, self-explanatory. Now what the hell are 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 />
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? Snyfig 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 />
Before you can see your animation, you need to process (or render) your work. 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<br />
<br />
Open a terminal, change to the directory you saved the file, and type something like<br />
<br />
synfig -t gif BasicKnightRider.sif<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. 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 />
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>Claushttps://wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=46Doc:Animation Basics2006-01-06T11:36:09Z<p>Claus: Switched to keyframe explanation</p>
<hr />
<div>== Animation Basics (Draft) ==<br />
<br />
''Note to the reader: Please be patient. It may take a few days to finish the initial draft.''<br />
<br />
Creating an animation in Synfig is really easy: It basically means to change a drawing - you just need to create the first state and the last state of a change, and Synfig will take care of the steps in between.<br />
<br />
Let's have a look at a simple example. Consider a moving light similar to the one in front of the KnightRider car. Drop the realism and you get a circle that is moving from the left to the right, and back. In other words, you need to create three 'steps' or 'stages': <br />
1. The circle is on the left. <br />
2. The circle is on the right. <br />
3. The circle is back on the left. <br />
<br />
Let's do it.<br />
<br />
Start Synfig Studio, and create a new file. A dialog called 'Properties' will appear. 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 />
Figure 1 about here<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 />
Figure 2 about here<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 />
This 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 />
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 />
In the beginning, three 'steps' or 'stages' were mentioned. This are represented by so-called 'keyframes' (if 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 />
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 keyframe list is rather easy to understand: It displays 'Time' which is basically the start time, 'Lenght' which is self-explanatory, 'Jump' which we'll cover next, and 'Description' which is, agagin, self-explanatory. Now what the hell are 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 />
You wonder where the animation is? You first need to process (or render) your work. 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<br />
<br />
Open a terminal, change to the directory you saved the file, and type something like<br />
<br />
synfig -t gif BasicKnightRider.sif<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. 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 youshort 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 />
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>Claushttps://wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=42Doc:Animation Basics2006-01-05T10:50:32Z<p>Claus: Minor edits</p>
<hr />
<div>== Animation Basics (Draft) ==<br />
<br />
''Note to the reader: Please be patient. It may take a few days to finish the initial draft.''<br />
<br />
Creating an animation in Synfig is really easy: It basically means to change a drawing - you just need to create the first state and the last state of a change, and Synfig will take care of the steps in between.<br />
<br />
Let's have a look at a simple example. Consider a moving light similar to the one in front of the KnightRider car. Drop the realism and you get a circle that is moving from the left to the right, and back. In other words, you need to create three 'steps' or 'stages': <br />
1. The cirle is on the left. <br />
2. The circle is on the right. <br />
3. The cirle is back on the left. <br />
<br />
Let's do it.<br />
<br />
Start Synfig Studio, and create a new file. A dialog called 'Properties' will appear. 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 />
Figure 1 about here<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 />
Figure 2 about here<br />
<br />
We now need a circle. Change the painting color to red, and draw a cirle. 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 />
This 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 />
// Short explanation of the timeline widget about here<br />
<br />
Switch to Animate Editing Mode, grab the cirle and move it to the right location. You should note a green dot appear in the Parameters dialog.<br />
<br />
Figure 4 about here.<br />
<br />
Now move the time edit to 1 sec, and move your red circle to the right. You should note another green dot appears on the Parameter dialog.<br />
<br />
Of course, now it's time to bring the cirle back to the original position. You may start to fiddle around and try to move it manually, but there's a better way: Move the time slider to the 2 sec position, then context-click on the first green dot of the Parameter dialog, and select 'Duplicate'. You should get another green dot in the Parameter dialog, and your red circle should be back on its original position in your canvas.<br />
<br />
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<br />
<br />
Open a terminal, change to the directory you saved the file, and type something like<br />
<br />
synfig -t gif BasicKnightRider.sif<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. Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. However, Firfoy will replay the GIF all the time which makes youshort 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 />
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>Claushttps://wiki.synfig.org/index.php?title=Doc:Animation_Basics&diff=41Doc:Animation Basics2006-01-05T10:17:07Z<p>Claus: First draft</p>
<hr />
<div>== Animation Basics (Draft) ==<br />
<br />
Creating an animation in Synfig is really easy: It basically means to change a drawing - you just need to create the first state and the last state, and Synfig will take care of the steps in between.<br />
<br />
Let's have a look at a simple example. Consider a moving light similar to the one in the front of the KnightRider car. Drop the realism and you get a circle that is moving from the left to the right, and back. In other words, you need to create three 'stages': The cirle on the left, the cirle on the right, and the cirle back on the left. Let's do it.<br />
<br />
Start Synfig Studio, and create a new file. A 'property' dialog will appear. Make sure to edit 'End Time'. The strange looking '0f' will change to a more familiar presentation. Set this to 2 seconds.<br />
<br />
Figure 1 about here<br />
<br />
Now create a simple black rectangle that will serve as our background.<br />
<br />
Figure 2 about here<br />
<br />
We now need a circle. Change the painting color to red, and draw a cirle. It doesn't matter if it's not perfect: You can edit it. Activate the 'Normal' tool, and clicking the circle 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 when you click on the green dot in the middle.<br />
<br />
This were the first steps to draw an object and to move it. That's not yet an animation you may say! Indeed. Let's have a look how this works.<br />
<br />
// Short explanation of the timeline widget about here<br />
<br />
Switch to Animate Editing Mode, grab the cirle and move it to the right location. You should note a green dot appear in the Parameters dialog.<br />
<br />
Figure 4 about here.<br />
<br />
Now move the time edit to 1 sec, and move your red circle to the right. You should note another green dot appears on the Paramters dialog.<br />
<br />
Of course, now it's time to bring the cirle back to the original position. You may start to fiddle around and try to move it manually, but there's a better way: Move the time slider to the 2 sewc position , then context-click on the first green dot of the Parameters dialog, and select 'Duplicate'. You should get another green dot in the Parameter dialog, and your red circle should be back on its original position in your canvas.<br />
<br />
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<br />
<br />
Open a terminal, change to the directory you saved the file, and type something like<br />
<br />
synfig -t gif BasicKnightRider.sif<br />
<br />
A few messages appear that don't matter right now. Depending on your processor speed it should a short while, but finally a line like<br />
<br />
BasicKnightRider.sif ==> BasicKnightRider.gif: DONE<br />
<br />
should appear. Open BasicKnightRider.gif in Firefox or another application that is able to show animated gif's. 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 />
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>Claus