Revision as of 18:11, 26 November 2007

Language:

English • Deutsch • español • suomi • français • italiano • Nederlands • português • română • русский • 中文（中国大陆）‎

Warning! This page contains outdated information. The release of Synfig Studio 0.64.0 introduced new terminology and this translated page needs to be updated according to original English text. You can help updating this page - see instructions here. Thank you!

warning end

Введение

Создавать анимацию в Synfig достаточно просто - нужно просто каким либо образом изменять рисунок. Просто определяем начальное состояние и конечное состояние, а Synfig автоматически произведёт промежуточные преобразования, чтобы переход между двумя состояниями был плавным.

Рассмотрим простой пример. Попробуем заставить двигаться кружок слева направо, а потом обратно. Выполнение этого действия можно разбить на три стадии (этапа):

1. Кружок находится слева.
2. Кружок находится справа.
3. Кружок опять вернулся налево.

Поехали.

Подготовка рабочего места

Запустите Synfig Studio и создайте новый файл. Появится диалог свойств файла (Properties). Введите название файла (Name) и описание (Description). Затем перейдите на вкладку Time (Время) и отредактируйте поле End Time (Конец). Как только вы щёлкните мышью на этом поле, его содержимое - '0f' (что значит нулевой кадр) - превратится в '0h 0m 0s 0f', позволяя установить время окончания анимации в часах (h), минутах (m), секундах (s) и кадрах (f). Установите значение равное двум секундам: '0h 0m 2s 0f'.

Теперь создайте чёрный прямоугольник, который будет служить нам фоном. Не обязательно делать его размером во весь экран.

Теперь нам нужна окружность. Измените основной цвет на красный и нарисуйте окружность. Если она получилась не такой, какой нужно - ничего страшного. Вы можете отредактировать её. Для этого выберите Инструмент перемещение и щёлкните на получившейся окружности. В центре и у края окружности появятся "маркеры", позволяющие изменить её положение и радиус.

Итак, мы нарисовали объект и научились его двигать. Вы говорите что это ещё не анимация? Разумеется. Давайте посмотрим как это всё хозяйство работает.

Добавляем движение

До того в свойствах файла мы установили значение End Time (Конец) равное двум секундам (2s). В связи с этим у нашего рабочего окна появились дополнительные элементы. Например, серенькая шкала кадров внизу. Вы можете щёлкнуть левой кнопкой мыши в любом её месте, чтобы перейти к нужному моменту времени. Ваша текущая позиция на шкале кадров отмечается оранжевой полоской.

Чтобы начать анимировать, необходимо перейти в "режим анимации". Для этого щёлкните на кнопку с зелёным значком в левой части шкалы кадров. Как только вы это сделаете, вокруг вашего рисунка появится красная рамка - это напоминание о том, что теперь все действия с объектами, которые вы будете производить, будут влиять на их движение.

Непереведённая часть

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 s's and f's: Understanding the Timeline

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

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

For example: "three frames into the sixth second" of an animation using this timeline notation would be "5s 3f." Why "5s" instead of "6s"? Because we always begin counting from zero.

The Keyframe List

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

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? Synfig figured out what you would like to do, namely move the circle, and draw all the images between these states. Each image will later make a frame in your animation; and the circle will appear to be moving.

Rendering your animation

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

To do so, close the animate editing mode by clicking on the red dot in the timeline editing widget, and save your file; for instance under the name BasicKnightRider.sif. Then press on the > symbol in the upper left corner of the image window to open the menu, open the File menu and click on the Render item. Change the target filename to BasicKnightRider.gif in the same location you saved BasicKnightRider.sif and choose your render settings, then click Render. Depending on your processor speed it should take a few moments, but finally the image window status bar should say "File rendered successfully".

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.

If you would rather use the command line instead of the menu to render your animation, then open a terminal (On Windows, go Start -> Run -> type cmd<enter>), change to the directory you saved the file, and type something like

synfig -t gif BasicKnightRider.sif

WARNING: The version you are using may not support the GIF output format at the moment, it depends on the version and compilation settings.

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, then you are done and can view your animated gif using firefox or another program as mentioned above.

Conclusion

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

Language:

English • Deutsch • español • suomi • français • italiano • Nederlands • português • română • русский • 中文（中国大陆）‎