Методы анимации

В Director'e вы сможете создавать анимацию с помощью четырех основных методов: записи в реальном масштабе времени, пошаговой записи, записи с прорисовкой промежуточных фаз и поячеечной анимации (cell animation). В последующем материале будут описаны эти методы анимации. Затем в практических упражнениях вы освоите процесс применения первых трех методов.

Запись в реальном масштабе времени является методом Director'a, позволяющим вам непосредственно записывать движение элемента труппы на сцене. Этот процесс выполняется настройкой атрибутов записи и ручным перетаскиванием элемента труппы по сцене. Director записывает производимые вами движения и сохраняет их как ключевые кадры в спрайте на партитуре. В результате записи кадров при последующем воспроизведении будет получена «анимация».

Пошаговая запись является измененным вариантом записи в реальном масштабе времени. В этом методе головка движется каждый раз вперед на один кадр. Каждый раз, когда головка продвигается на один кадр, позиция элемента труппы незначительно изменяется. Каждый кадр становится ключевым кадром для спрайта на партитуре.

Запись с прорисовкой промежуточных фаз охватывает два или больше ключевых кадров. Эти ключевые кадры определяют спрайт в двух позициях на сцене или с разными наборами атрибутов (которые вы создаете в двух ключевых кадрах). Такие различные атрибуты включают в себя размеры, цвет, вращение и другие эффекты, применяемые для изменения внешнего вида элемента труппы или его позиции на сцене. Director затем автоматически выполняет изменение спрайта в кадрах между двумя обозначенными ключевыми кадрами для создания анимации в промежутке времени, когда спрайт находится в партитуре.

Поячеечная анимация является, вероятно, самым распространенным методом анимации. Это просто последовательность элементов труппы, размещенных в партитуре, по одному в каждом кадре и с очень небольшими изменениями от кадра к кадру. Когда последовательность кадров воспроизводится, то это выглядит как движение. Этот метод является ядром голливудских мультфильмов. Например, в профессиональной студии для анимирования персонажа художники-мультипликаторы создают множество ячеек (графических элементов труппы по терминологии Director'a), каждую с персонажем со слегка измененной позицией. При воспроизведении их в виде последовательности кадров получается анимация. Director работает таким же образом: то есть по мере продвижения головки по каждому кадру на сцене появляется слегка измененный элемент труппы. При воспроизведении получается поячеечная анимация.

Очень важным для процесса этих четырех методов является использование ключевых кадров. Ключевой кадр содержит конкретную информацию о спрайте. Эта информация определяет, какой элемент труппы воспроизводится, а также позицию элемента труппы на сцене, его размеры, цвет и многие другие атрибуты. Когда головка проходит между двумя ключевыми кадрами, между которыми изменены атрибуты спрайта, то происходит анимация. Давайте приобретем некоторый опыт в Практическом упражнении 5.1, используя первый из четырех методов - запись в реальном масштабе времени.

Практическое упражнение 5.1: Запись в реальном масштабе времени

В этом упражнении мы будем анимировать космический корабль и использовать каждый кадр спрайта в качестве ключевого кадра. Каждый ключевой кадр будет указывать элементу труппы, как изменить свою позицию. Когда головка будет входить в кадр, то на сцене будет обновляться позиция элемента труппы, создавая анимацию космического корабля.

Нашим первым методом анимации будет запись в реальном масштабе времени. Вы будете настраивать Director на запись позиции космического корабля при ручном перетаскивании его по сцене. Director будет создавать ключевой кадр для каждого кадра спрайта, записывая его новую позицию. Ключевой кадр обозначается в партитуре кружком в соответствующем кадре. Примеры ключевых кадров приведены в дальнейшем материале.

Если вы посмотрите в партитуре на канал 1, то заметите, что первый кадр является ключевым. За этим кадром следуют кадры, по которым проходит линия, показывающая в каждом случае наличие экземпляра или копии предыдущего ключевого кадра. Каждый кадр может стать ключевым, как вы увидите дальше в упражнении. Значок «ограничителя» (прямоугольник) в кадре просто указывает на конец спрайта.

Рассмотрим пример

1. Давайте посмотрим на завершенное упражнение.

1. Откройте файл *.dir.

а) Выберите File | Open .

б) Выберите и откройте файл *.dir.

в) Вы можете уменьшить сцену до масштаба 50% и расположить панели так, чтобы было все видно.

2. Щелкните по кнопке Play на Control Panel.

а) Вы увидите головку воспроизведения, циклически двигающуюся по партитуре.

б) На сцене появятся два спрайта. Один будет фоном, а другой - анимированным космическим кораблем.

в) Все кадры спрайта Spaceship в канале 2 являются ключевыми кадрами.

Что должно получиться на экране

На рис. 5.1 показано, как будет выглядеть сцена с космическим кораблем, летающим по экрану.

Рис. 5.1. Завершенная сцена

Что должно получиться за сценой

На рис. 5.2 показано, как будет выглядеть ваша партитура в завершенном виде. Обратите внимание на то, что спрайт 1 является элементом фона, создающим изображение космического пространства. Спрайт 2 является космическим кораблем. Заметим, что каждый кадр спрайта 2 отмечен кружком, указывающим на то, что этот кадр является ключевым.

Рис. 5.2. Завершенная партитура

Пошаговые инструкции

1. Начнем с открытия файла, содержащего нужные нам элементы, следующим образом.

а) Выберите File | New .

2. Выберите File | Save As и поместите ваш новый файл в папку с именем SaveWork на вашем жестком диске. Назовите файл MySpaceship.dir.

3. Если окно Cast не открыто, то откройте его, выбрав Window | Cast.

4. Если партитура не открыта, то откройте ее, выбрав Window | Score. Обратите внимание, что фоновый элемент труппы с именем Space уже находится в канале 1.

5. Давайте поместим космический корабль.

а) Щелкните по кадру 1 в канале 2 партитуры.

б) Щелкните по элементу труппы Spaceship в окне Cast, перетащите его на сцену в верхний левый угол, как показано на рис. 5.3.

Рис. 5.3. Помещение космического корабля на сцену

в) Property Inspector, вероятно, уже открыт и находится справа на экране. Если нет, то выберите Window | Property Inspector.

г) Вкладка Sprite должна быть уже сверху. Если нет, то щелкните по ней.

д) В поле Ink измените опцию на Matte, как показано на рис. 5.4.

Рис. 5.4. Определен эффект прозрачности Matte

6. В следующем шаге спрайт настраивается для записи следующим образом. Функция записи в реальном масштабе времени требует того, чтобы спрайт был выбран в партитуре.

а) Выберите в партитуре кадр 1 в канале 2. Мы хотим, чтобы анимация начиналась в кадре 1.

б) Если Control Panel еще не выбрана, то выберите Window | Control Panel.

в) На Control Panel установите в поле Tempo значение 15.

г) На Control Panel установите опцию зацикливания в положение «автостоп».

д) Включите функцию записи в реальном масштабе времени, выбрав Control | Real Time Recording. Обратите внимание на то, что вокруг элемента труппы на сцене появилась красно-белая прямоугольная рамка и слева от канала 2 в партитуре появилась красная лампочка записи, как показано на рис. 5.5. Это свидетельствует о том, что активирована функция записи в реальном масштабе времени.

Рис. 5.5. Индикация записи в реальном масштабе времени на сцене и в партитуре

7. Запись начнется после щелчка мышью по космическому кораблю на сцене с последующим удерживанием кнопки мыши и будет продолжаться, пока не будет отпущена кнопка мыши. Создадим анимацию следующим образом.

а) Щелкните по космическому кораблю на сцене и не отпускайте кнопку мыши.

б) Перетаскивайте корабль по сцене по траектории в виде восьмерки, как показано на рис. 5.6. Если вы будете изменять скорость перетаскивания, то Director будет также учитывать при записи разницу в скорости.

в) Отпустите кнопку мыши. Когда вы это сделаете, то на сцене появится путь анимации.

8. Изучите партитуру. Все кадры элемента труппы Spaceship теперь стали ключевыми кадрами. Это происходит из-за того, что каждый кадр содержит информацию о различных позициях космического корабля на сцене.

9. Давайте отрегулируем фон по длине анимации.

а) Найдите последний кадр элемента труппы Spaceship. Возможно, вам придется прокрутить партитуру вправо, чтобы найти конечную точку элемента труппы Spaceship.

б) Щелкните по конечной точке спрайта 1 (фон) и перетащить ее к последнему кадру спрайта 2 (космический корабль).

Рис. 5.6. Путь анимации в режиме записи в реальном масштабе времени

10. Используя Control Panel, сначала выполните перемотку, а затем щелкните по Play, чтобы видеть вашу анимацию.

11. Сохраните вашу работу в папке SaveWork.

Практическое упражнение 5.2: Пошаговая запись

В этом упражнении вы изучите метод пошаговой записи. Это второй метод, который вы можете использовать для создания анимации в Director'e. По сравнению с методом записи в реальном масштабе времени, изученном вами в Практическом упражнении 5.1, пошаговая запись обеспечивает более высокую точность в определении позиции элемента труппы на сцене. Используйте пошаговую запись, когда вам нужно анимировать объект по определенному пути и лучше контролировать темп анимации.

Как можно понять из названия, этот метод заключается в покадровом перемещении элемента труппы для создания анимации. В данном упражнении вы поместите элемент труппы в виде мяча на сцену, наверху короткой лестницы. Затем вы запустите Step Recorder (Пошаговый Регистратор). После начала записи вы будете продвигать кадр в партитуре с помощью кнопки Step Forward (Шаг Вперед) на Control Panel. Затем вы будете перемещать элемент труппы на новое место сцены. Повторяя этот шаг, вы создадите очень специфичный путь следования мяча.

Рассмотрим пример

Давайте взглянем на завершенное упражнение.

1. Щелкните по кнопке Play на Control Panel.

а) Вы увидите головку, двигающуюся по партитуре.

б) На сцене теперь находятся два элемента-спрайта. Один из них представляет собой лестницу, а второй - анимированный прыгающий мяч.

в) Все кадры спрайта Ball в канале 2 являются ключевыми кадрами, созданными с помощью метода пошаговой записи.

Что должно получиться на экране

Рис. 5.7. Сцена при завершении упражнения

На рис. 5.7 показано, как будет выглядеть сцена после завершения упражнения: мяч должен прыжками спускаться вниз по ступенькам.

Что должно получиться за сценой

На рис. 5.8 показано, как будет выглядеть партитура при завершении упражнения. Фон находится в канале 1, а в канале 2 находится анимация мяча.

Рис. 5.8. Партитура при завершении упражнения

Пошаговые инструкции

1. Давайте начнем с открытия файла, содержащего нужные нам элементы, следующим образом.

а) Выберите File | New

2. Выберите File | Save As и поместите ваш новый файл в папку с именем SaveWork на вашем жестком диске. Назовите файл MyBall.dir.

3. Выберите элемент труппы Ball в окне Cast и перетащите его в верхний правый угол сцены, поместив его на верхнюю ступеньку лестницы, как показано на рис. 5.9.

Рис. 5.9. Поместите мяч на верхнюю ступеньку лестницы

4. Во вкладке Sprite в Property Inspector установите в поле Ink опцию Matte.

5. Давайте настроим регистратор пошаговой анимации.

а) Партитура должна быть открыта. Если нет, то выберите Window | Score.

б) В зависимости от того, какие вы установили предпочтительные настройки, количество добавляемых в канал 2 кадров может и не соответствовать количеству кадров, занимаемых элементом труппы Stairs в канале 1. Если такое несоответствие имеется, то щелкните по конечному кадру элемента труппы Ball в канале 2 и перетащите его к кадру 20 так, чтобы этот элемент имел количество кадров, одинаковое с каналом 1.

в) Выберите кадр 1 в спрайте Ball в партитуре, щелкнув по нему.

г) Выберите Control | Step Recording (Управление | Пошаговая Запись), как показано на рис. 5.10.

Рис. 5.10. Выбор опции Step Recording

6. Обратите внимание на индикатор записи рядом с кадром 1 в партитуре, показанный на рис. 5.11.

Рис. 5.11. Индикатор пошаговой записи в партитуре

7. Давайте создадим анимацию для мяча.

а) Если Control Panel еще не открыта, то выберите Window | Control Panel.

б) Щелкните по кнопке Step Forward (Шаг Вперед) на Control Panel, показанной на рис. 5.12, чтобы перейти в следующий кадр - кадр 2.

Рис. 5.12. Кнопка Step Forward на обеих панелях Control Panel

в) Поместите спрайт Ball на сцену так, чтобы мяч передвинулся вперед по первой ступеньке и оказался на самом краю этой ступеньки.

г) Щелкните по кнопке Step Forward на Control Panel для продвижения кадра. Обратите внимание на начало пути на сцене, как показано на рис. 5.13.

д) Передвиньте спрайт Ball по сцене так, чтобы он приземлился на второй ,ступеньке.

Рис. 5.13. Начало пути анимации

е) Щелкните по кнопке Step Forward на Control Panel для продвижения кадра. Передвиньте спрайт Ball вниз и влево.

ж) Щелкните по кнопке Step Forward на Control Panel для продвижения кадра.

з) Передвиньте спрайт Ball вниз так, чтобы он оказался на третьей ступеньке.

и) Щелкните по кнопке Step Forward на Control Panel для продвижения кадра.

к) Повторяйте эту процедуру, пока мяч не достигнет подножия лестницы.

л) Путь анимации на вашей сцене должен теперь выглядеть похожим на путь, показанный на рис. 5.14.

Рис. 5.14. Сцена, показывающая завершенный путь анимации

м) Перемотайте вашу анимацию и щелкните Play на Control Panel для того, чтобы наблюдать созданное вами. Вы можете всегда вернуться и выбрать кадр спрайта для изменения позиции элемента труппы Ball.

8. Сохраните вашу работу в папке Save Work.

Практическое упражнение 5.3: Запись с прорисовкой промежуточных фаз

Самым практичным методом для создания анимации является процесс, называемый в Director'e прорисовкой промежуточных фаз. Вы обнаружите, что этот метод позволяет сэкономить массу времени при создании длительных анимаций. Это упражнение вы начнете с помещения элемента труппы на сцену. Первый кадр для спрайта будет являться ключевым кадром. Затем вы создадите другой ключевой кадр в спрайте. В этом втором ключевом кадре вы измените позицию элемента труппы на сцене. Затем Director прорисует промежуточные фазы спрайта. Другими словами, Director автоматически подстроит позицию элемента труппы, вычислив всю необходимую информацию о спрайте для всех кадров между этими двумя ключевыми кадрами1 . Этот метод анимации часто используется из-за своей быстроты и эффективности анимирования объектов.

В это упражнение входит создание анимации автомобиля, несущегося к концу улицы и тормозящего на парковке. Фоном будет дорога, помещенная в канал 1. Вы поместите автомобиль в канал 2. Вы также изучите, как устанавливать предпочтительные настойки спрайта, такие как интервал показа.

Рассмотрим пример

Давайте рассмотрим завершенное упражнение.

1. Щелкните по кнопке Play на Control Panel.

а) Вы увидите головку, двигающуюся по партитуре.

б) На сцене теперь находятся два спрайта. Один из них является фоном, а второй - анимированным автомобилем.

в) Заметьте, что в канале 2 есть только четыре ключевых кадра, в которых анимируется автомобиль.

Что должно получиться на экране

На рис. 5.15 показан автомобиль, для которого вы должны создать анимацию. В этой анимации автомобиль пронесется по улице и, затормозив, припаркуется на стоянке.

Рис. 5.15. Сцена завершенного упражнения

Что должно получиться за сценой

На рис. 5.16 показана партитура в том виде, какой она должна иметь при завершении этого упражнения. Эта партитура походит на партитуру в Практическом упражнении 5.2. В ней имеется элемент заднего плана в канале 1 (улица) и объект, движущийся в канале 2 (автомобиль). Данное упражнение отличается тем, что не все кадры спрайта Саг являются ключевыми кадрами. На самом деле во всей анимационной последовательности имеется только четыре ключевых кадра.

Пошаговые инструкции

1. Начнем с открытия файла, содержащего необходимые нам элементы, следующим образом.

а) Выберите File | New .

Рис. 5.16. Завершенная партитура

Рис. 5.17. Выбор Edit | Preferences | Sprite

4. В поле Span Duration (Интервал Показа) в открывшемся диалоговом окне измените настройку на 48, как показано на рис. 5.18. После этого спрайт будет содержать в партитуре 48 кадров при помещении его в ваш проект.

Рис. 5.18. Установка поля Span Duration

5. Партитура, скорее всего, будет уже открыта. Если нет, то выберите Window | Score.

6. Окно Cast также, вероятно, будет открытым. Если нет, то выберите Window | Cast.

7. Выберите первый элемент труппы Background и перетащите его в партитуру в кадр 1 канала 1. При помещении этого элемента труппы прямо на сцену Director автоматически отцентрирует его на сцене.

8. Выберите второй элемент труппы Саr.

9. Перетащите автомобиль в кадр 1 канала 2 партитуры. Property Inspector, вероятно, уже открыт. Если нет, то выберите Window | Property Inspector.

10.На вкладке Sprite в Property Inspector установите опцию поля Ink в Matte (спрайт Саг должен быть все еще выбран).

11.Щелкните по кадру 1 канала 2. Это первый ключевой кадр. На это указывает имеющийся в нем кружок (см. рис. 5.19.).

Рис. 5.19. Первый ключевой кадр для спрайта Саг в канале 2

12. На сцене поместите автомобиль на улице в самой правой части сцены. Это будет стартовая точка анимации, как показано на рис. 5.20.

Рис. 5.20. Стартовая точка анимации

Подсказка

Когда спрайт выбирается в кадре, несодержащем ключевого кадра, как в шаге 13, то выделяется весь спрайт. И, наоборот, если бы вы выбрали кадр 1, содержащий ключевой кадр, то был бы выбран только этот кадр.

13. Щелкните по кадру 26 в канале 2 партитуры. Выделится весь спрайт. (См. Подсказку.)

14. Выберите Insert | Keyframe (Добавить | Ключевой Кадр). Вы создали ключевой кадр в кадре 26, и он стал выделенным в партитуре, как показано на рис. 5.21.

Рис. 5.21. Новый ключевой кадр в кадре 26 канала 2

15. На сцене перетащите автомобиль влево до перекрестка. Обратите внимание на путь анимации, создаваемый на сцене, как показано на рис. 5.22.

Рис. 5.22. Автомобиль у перекрестка и возникший путь анимации

16. В партитуре щелкните по кадру 40 (в канале 2) спрайта Саr.

17. Выберите Insert | Keyframe.

18. Перетащите автомобиль влево и поместите его рядом с пустым парковочным местом на расстоянии, примерно равном ширине автомобиля.

19. Выберите инструмент Rotation (Вращение) на палитре Tools (см. рис. 2.1).

20. Щелкните по капоту автомобиля (на сцене) и, удерживая нажатой кнопку мыши, поверните автомобиль вправо (примерно на 45 градусов) движением курсора вверх, как показано на рис. 5.23.

Рис. 5.23. Вращение спрайта Саr

21. Выберите последний кадр (48) в канале 2 партитуры.

22. Выберите Insert | Keyframe.

23. Передвиньте автомобиль на сцене влево и поставьте его на пустое парковочное место.

24. Выберите инструмент Rotation.

25. Поверните автомобиль в положение, параллельное стене, как показано на рис. 5.24.

Рис. 5.24. Автомобиль в окончательном припаркованном положении

26. Используя Control Panel, перемотайте фильм. Щелкните по кнопке Play и просмотрите анимацию.

27. Для того чтобы внести в анимацию эффект торможения автомобиля перед остановкой, необходимо применить еще один, заключительный, процесс. Вы можете изменить некоторые атрибуты, влияющие на прорисовку промежуточных фаз между кадрами. Модификатор Ease-Out (Плавное Торможение) обеспечит замедление автомобиля перед его остановкой.

а) Выберите кадр 48 (последний кадр) в канале 2 партитуры.

б) Выберите Modify | Sprite | Tweening (Изменить | Спрайт | Прорисовка Фаз). Откроется доступ к опциям прорисовки промежуточных фаз спрайта, как показано на рис. 5.25.

Рис. 5.25. Доступ к опциям прорисовки промежуточных фаз спрайта

в) Выберите Smooth Changes (Плавные Изменения) в диалоговом окне Sprite Tweening, показанном на рис. 5.26. Director сгладит все изменения между ключевыми кадрами так, чтобы изменения происходили постепенно, а не прерывисто.

Рис. 5.26. Диалоговое окно Sprite Tweening

г) Передвиньте бегунок Ease-Out на 10%. Это создаст иллюзию плавного заезда на стоянку и торможения автомобиля до полной остановки. Щелкните по кнопке ОК, чтобы закрыть диалоговое окно Sprite Tweening.

д) Перемотайте и просмотрите вашу анимацию.

28. Сохраните вашу работу.