Doc:Animation Basics/ru

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). В связи с этим у нашего рабочего окна появились дополнительные элементы. Например, серенькая шкала кадров внизу. Вы можете щёлкнуть левой кнопкой мыши в любом её месте, чтобы перейти к нужному моменту времени. Ваша текущая позиция на шкале кадров отмечается оранжевой полоской (курсором).

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

Выше я упомянул о трёх стадиях, на которые мы разбили действие, происходящее в нашей анимации. Так вот, эти три стадии представляют ключевые кадры. Ключевой кадр — это картинка, на которой фиксируется положение объектов в определённый момент времени.

Отобразите Панель ключевых кадров, щёлкнув на её заголовке (он находится в нижнем окне и на нём изображён ключик). Здесь мы будем редактировать ключевые кадры. Теперь щёлкните на маленькую кнопку со значком "плюс" — в списке появится новый элемент '0f, 0f, (JMP)'. Мы создали первый ключевой кадр.

Если этого не произошло, значит вы что-то сделали не то. Закройте файл и начните сначала.

Если всё нормально, то идём дальше. Установите курсор на шкале кадров в позицию '1s' (просто щёлкните левой кнопкой мыши в нужном месте на ней). Добавьте ещё один ключевой кадр, снова щёлкнув на кнопку со значком "плюс". Затем, установите курсор на шкале кадров в крайнее правое положение, соответствующее значению '2s'. Добавьте третий ключевой кадр.

f-ки и s-ки: Разбираем шкалу кадров

Сейчас вы, наверное уже сообразили, что значат эти аббревиатуры типа '1s 0f'. Они указывают на конкретные точки на шкале кадров, выражая время в секундах (s) и кадрах (f).

Каждая секунда делится на 24 кадра, также как метр на рулетке делится на 100 сантиметров. Отметки кадров начинаются с нуля (0) и нумеруются до 24-х, где начинается и новая секунда, в которой кадры опять начинают нумероваться с нуля.

Например, вместо того чтобы говорить "третий кадр шестой секунды", мы пишем "5s 3f". Почему "5s", а не "6s"? Потому что мы всегда начинаем считать "с нуля".

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

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.