Difference between revisions of "Doc:Animation Basics"
(First draft) |
(Minor edits) |
||
| Line 1: | Line 1: | ||
== Animation Basics (Draft) == | == Animation Basics (Draft) == | ||
| − | + | ''Note to the reader: Please be patient. It may take a few days to finish the initial draft.'' | |
| − | + | 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. | |
| − | Start Synfig Studio, and create a new file. A ' | + | 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': |
| + | 1. The cirle is on the left. | ||
| + | 2. The circle is on the right. | ||
| + | 3. The cirle is back on the left. | ||
| + | |||
| + | Let's do it. | ||
| + | |||
| + | 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 | Figure 1 about here | ||
| − | Now create a simple black rectangle that will serve as our background. | + | 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 | Figure 2 about here | ||
| − | 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 | + | 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. |
| − | This | + | 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. |
// Short explanation of the timeline widget about here | // Short explanation of the timeline widget about here | ||
| Line 23: | Line 30: | ||
Figure 4 about here. | Figure 4 about here. | ||
| − | 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 | + | 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. |
| − | 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 | + | 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. |
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 | 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 | ||
| Line 33: | Line 40: | ||
synfig -t gif BasicKnightRider.sif | synfig -t gif BasicKnightRider.sif | ||
| − | A few messages appear that don't matter right now. Depending on your processor speed it should a | + | 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 | BasicKnightRider.sif ==> BasicKnightRider.gif: DONE | ||
| − | 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: | + | 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! |
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. | 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. | ||
Revision as of 12:50, 5 January 2006
 |
Language: |
English • Deutsch • español • suomi • français • italiano • Nederlands • português • română • русский • 中文（中国大陆） |
Animation Basics (Draft)
Note to the reader: Please be patient. It may take a few days to finish the initial draft.
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': 1. The cirle is on the left. 2. The circle is on the right. 3. The cirle is back on the left.
Let's do it.
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 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.
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.
// Short explanation of the timeline widget about here
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.
Figure 4 about here.
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.
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.
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, 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!
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.
