Synfig Studio :: Documentation - User contributions [en]

User:Matumio

2006-03-14T00:33:24Z

Matumio:

renamed to [[User:Maxy]]

Timetrack Panel

2006-03-14T00:25:33Z

Matumio:

:<small>Since there seems no documentation at all for this I just write what I have figured out. Someone should correct me and then remove this comment. [[User:Matumio|Matumio]] 16:25, 13 Mar 2006 (PST)</small>

The Timetrack tab shows a symbol (usually a green dot) for every <s>keyframe</s> ?waypoint? in the timeline.

When you change an object property while in ''Animate Editing Mode'', for example by moving an object, a ?waypoint? is inserted. The columns of the Timetrack tab are aligned with the ''Params'' tab. If you are animating the individual vertices, you have to expand the vertices list to see them individually.

You can drag those ?waypoints? through time, and you can change their interpolation method by right-clicking (eg. a sudden step change instead of a smooth transition).

TODO: describe meaning of keyframes - maybe in [[Keyframes Dialog]]. They seem to control what happens when adding a new ?waypoint?, but how?

Talk:Main Page

2006-03-13T23:30:54Z

Matumio:

==Spam==

Maybe move the contents of this page into a template, with a html-comment for users where to edit, and then protect it? (spambots...) [[User:Matumio|Matumio]] 11:43, 12 Mar 2006 (PST)

I'm not familiar with MediaWiki, how would I do that? [[User:PaulWise|PaulWise]] 15:50, 13 Mar 2006 (+800)

I have done it, you can protect it now. Let's hope this spambot is not smart enough. At least it doesn't get the most prominent linking location any more this way. [[User:Matumio|Matumio]] 15:30, 13 Mar 2006 (PST)

Template talk:Main Page

2006-03-13T23:20:26Z

Matumio: redir

#redirect [[talk:Main Page]]

Main Page

2006-03-13T23:14:57Z

Matumio: template + html comment

{{Main Page}}

Main Page

2006-03-13T23:12:09Z

Matumio: Main Page moved to Template:Main Page

#REDIRECT [[Template:Main Page]]

Doc:Animation Basics

2006-03-13T23:05:59Z

Matumio: /* Rendering your animation */ preview

(Draft)
''Note to the reader: Please be patient. It may take a few days to finish the initial draft.''

== Introduction ==

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.

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':
# The circle is on the left.
# The circle is on the right.
# The circle is back on the left.

Let's do it.

== Setting up the workspace ==

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.

Figure 1 about here

Now create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas.

Figure 2 about here

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.

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.

== Adding movement ==

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.

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.

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)'.

If this didn't happen, you made something not mentioned so far. Close your file and start again.

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.

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, again, 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.

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!

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.

== Rendering your animation ==

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

Open a terminal, change to the directory you saved the file, and type something like

synfig -t gif BasicKnightRider.sif

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

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

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!

''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.''

== Conclusion ==

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

Talk:Main Page

2006-03-12T19:43:19Z

Matumio: spambots

==Spam==
Maybe move the contents of this page into a template, with a html-comment for users where to edit, and then protect it? (spambots...) [[User:Matumio|Matumio]] 11:43, 12 Mar 2006 (PST)

Doc:Adding Layers

2006-03-12T15:56:23Z

Matumio: /* Using locality */

''Usual note to the reader: This is not yet finished; please be patient.''

== Introduction ==

In the [[Animation Basics|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.

However, Synfig is different to simple layers in at least two respects:
# You can organize layers into hierachical groups.
# You can use upper layers to change the behaviour (or look) or underlying layers.

Doing so is quite easy. Let's look at a simple example.

# Create a new file with 0 duration. There's no need to bother with a timeline at this point.
# Create a simple rectangle.

== Combining Layers ==

Now there are two ways to proceed. In the first way, pick the [[Gradient Tool|gradient tool]] from the Synfig [[Toolbox]], and click into the canvas once. You should note that another layer was added in the [[Layers Dialog]] called 'Gradient'. This is nothing special. If you see no gradient but just a plain color, pick the [[Normal Tool|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.

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.

Select the gradient and the rectangle layer in the [[Layers Dialog]]. 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.

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.

If you want to change the name of it to something more descriptive, just select the layer in the layer tab and click on its label. Then you just edit it in place. You can do this for ANY layer, and are strongly encouraged to do so.

== Using locality ==

However, there is still a problem: The gradient still covers the whole canvas 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 [[Params Dialog]] (by default a tab in the Params-Children-Keyframes window), and search the attribute called '[[Blend Method]]'. Double-click the entry and select '[[Blend Method#Onto|Onto]]' from the appearing drop-down menu.

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

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.

''Note: The following remarks seem to be outdated already! A [[Blur Layer|blur]] defaults to '[[Blend Method#Straight|Straight]]' here (using SVN 110).'' -- --[[User:Claus|Claus]] 06:45, 11 Jan 2006 (PST)
:''It defaulted to composite for me, as described (using SVN 147)'' [[User:Matumio|Matumio]] 07:56, 12 Mar 2006 (PST)

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|inline canvas]] we just created, it would just blur them -- anything under it would not be blurred!

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->[[Blur Layer Category|Blurs]]->[[Blur Layer|Blur]]")

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 "[[Blend Method#Composite|Composite]]" (you can change the [[New Layer Defaults#Default Blend Method|default blend method]] for new layers from the [[New Layer Defaults]] section of the [[Toolbox]]). What we want is a blend method of "[[Blend Method#Straight|Straight]]". Just select the blur layer, and change the [[Blend Method]] to "[[Blend Method#Straight|Straight]]" in the [[Params Dialog]].

(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)

Ok, now we have all of the contents of the inline canvas blurred, but everything under it is sharp!

== Digging further... ==

If you care to look into Synfig's main menu 'Layer > New Layer' you will note quite a lot of different possibilities for making layers. Several of them sound rather unusual; '[[Transform Layers Category|Transform]] > [[Rotate Layer|Rotate]]' for example. You can use this to add new attributes to your objects. And just like other, basic attributes in the [[Animation Basics|previous animation tutorial]], you can change them to be different on certain [[Keyframes|keyframes]]. Synfig will take care of interpolating the steps in between.

For example, you could create a [[Star Layer|star]] from the [[Layer Menu]], add a [[Rotate Layer]]. Combine this with the lesson learned in the [[Animation Basics|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.

Doc:Animation Basics

2006-03-12T15:21:23Z

Matumio: /* Adding movement */ typo

(Draft)
''Note to the reader: Please be patient. It may take a few days to finish the initial draft.''

== Introduction ==

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.

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':
# The circle is on the left.
# The circle is on the right.
# The circle is back on the left.

Let's do it.

== Setting up the workspace ==

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.

Figure 1 about here

Now create a simple black rectangle that will serve as our background. It's not necessary to make it cover the whole canvas.

Figure 2 about here

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.

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.

== Adding movement ==

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.

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.

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)'.

If this didn't happen, you made something not mentioned so far. Close your file and start again.

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.

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, again, 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.

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!

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.

== Rendering your animation ==

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

Open a terminal, change to the directory you saved the file, and type something like

synfig -t gif BasicKnightRider.sif

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

BasicKnightRider.sif ==> BasicKnightRider.gif: DONE

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!

== Conclusion ==

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

User:Matumio

2006-03-12T13:34:32Z

Matumio:

Let me put some dummy text in here so I don't look like a spambot.