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"? Потому что мы всегда начинаем считать "с нуля".

Список ключевых кадров

Рассмотрим список ключевых кадров (на панели Keyframes). В колонке 'Time' отображается время к которому привязан данный ключевой кадр, колонка 'Length' показывает его длительность (расстояние до следующего ключевого кадра), с колонкой 'Description' (Описание) тоже вроде бы всё и так понятно.

А что это за странные надписи '(JMP)' в колонке 'Jump' (Переход)? Просто представьте что это гиперссылки, типа ссылок в вашем web-браузере. Просто щёлкните на них и курсор на шкале кадров автоматически перескочит в позицию, соответствующую нужному времени.

Воспользуйтесь этим, чтобы отредактировать ваше изображение в конкретный момент времени. Например, перейдите к первой секунде и передвиньте красный кружок в правую часть экрана. Да-да, вот туда. Мои поздравления, вы создали вашу первую анимацию в Synfig!

Вы спрашиваете где тут анимация? Просто щёлкните в произвольной точке шкалы кадров и вы увидите, что кружок находится в положении, куда вы его не ставили! В чём дело? Благодаря позициям круга на различных ключевых кадрах, Synfig сообразила какое движение вы хотите получить и прорисовала промежуточные позиции между ключевыми кадрами. Каждая позиция курсора на шкале кадра - это кадр вашей анимации, которые, при быстром отображении на экране по порядку (воспроизведении) создают иллюзию движения.

Рендеринг анимации

Прежде чем увидеть анимацию в окончательном виде, вам необходимо её обсчитать - выполнить рендеринг. Есть два способа сделать это. Первый - использовать Synfig Studio (с которой вы сейчас и работаете), второй - использовать консольную программу 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.