2.2. Морфинг

В отличие от покадровой анимации, морфинг и анимацию движения называют промежуточной анимацией (tweened animation). Смысл этого названия заключается в следующем. Вместо того чтобы последовательно рисовать все кадры подряд, пользователь рисует только первый и последний кадр анимации, а все промежуточные рассчитывает программа.

Итак, рассмотрим вначале морфинг - анимацию, позволяющую плавно изменять форму объектов. Например, можно получить круг, плавно превращающийся в квадрат.

Пример морфинга
Давайте посмотрим, как воплотить в жизнь эту простейшую анимацию. Нарисуем в первом кадре круг, а затем выделим, например, позицию 48 на шкале времени и клавишей F7 вставим туда пустой ключевой кадр. Теперь изобразим в этом кадре квадрат. Сейчас у нас 48 кадров, причем в первых 47 из них находится изображение круга.

Отметим на шкале времени ключевой кадр в позиции 1. Теперь посмотрим на вспомогательную панель Frame (Кадр) (рис. 2.4).

 

На ней нас сейчас интересует раскрывающийся список Tweening (Тип анимации), в котором первоначально выбрано значение None (Нет). Морфинг в программе Flash обозначают термином shape tweening (промежуточная анимация формы), поэтому выберем в этом списке пункт Shape (Форма). Если все сделано правильно, то на шкале времени вся цепочка обычных кадров окрасится в салатовый цвет и по ней пройдет стрелка, указывающая на следующий ключевой кадр (рис. 2.5).

 

Теперь можно нажать клавиши CTRL+ENTER и увидеть, как круг плавно превращается в квадрат (рис. 2.6). Кстати, имеется также возможность сделать текущим любой из промежуточных кадров и рассмотреть все «промежуточные» состояния между квадратом и кругом. Правда, изменить эти промежуточные состояния программа Flash не позволит, поскольку рисовать можно только в ключевых кадрах.

 

Ошибки при создании анимации
В некоторых случаях вместо стрелки на шкале времени отображается пунктиром, как показано на рис. 2.7. Это означает, что что-то сделано неправильно и анимация не может быть выполнена. Если выделить начальный ключевой кадр такой «неправильной» анимации, то на вспомогательной панели Frame (Кадр) появится кнопка с изображением восклицательного знака, щелкнув на которой, можно узнать предполагаемую причину неудачи. При морфинге в большинстве случаев эта причина состоит в наличии в ключевом кадре флэш-символов или сгруппированных объектов.

 

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

Интересно, что если «неправильный» объект находится в заключительном ключевом кадре морфинга, то программа не отобразит пунктир на шкале времени. Там располагается обычная стрелка морфинга, однако анимация не работает! Поэтому, если морфинг не идет непонятно почему, прежде всего проверьте заключительный ключевой кадр.

Вернемся к нашей анимации превращения круга в квадрат. Давайте отметим в ней заключительный ключевой кадр, выделив квадрат двойным щелчком мыши, нажмем кнопку Scale (Масштабирование) и уменьшим размер нашего квадрата.

Нажав клавиши CTRL+ENTER, мы увидим, что морфинг идет, как ни в чем бывало, - вместе с формой изменяется и размер фигуры.

Теперь попробуем изменить расположение квадрата в последнем кадре. При просмотре анимации мы увидим, что одновременно с изменением формы фигура перемещается на новое место.

А теперь попробуйте с помощью инструмента «заливка» изменить цвет квадрата в последнем кадре. Нажав клавиши CTRL+ENTER, мы увидим, цвет изменяется так же плавно, как и форма. Интересно провести такой опыт: залить фигуру в первом кадре сплошным цветом, а в последнем - круговым или линейным градиентом. В этом случае плавное измененение цвета смотрится особенно эффектно.

Хорошо также смотрится превращение одного градиента в другой, которое происходит корректно, даже если один из градиентов был повернут или увеличен/уменьшен. Единственное, чего программа Flash в этом контексте не умеет делать, - это превращать круговой градиент в линейный и обратно.

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

Кстати, весьма интересно поместить в первый и последний кадры морфинга одну и ту же фигуру, залив ее одним и тем же круговым градиентом, но центр этого градиента сместить по-разному. При просмотре такой анимации кажется, что источник освещения фигуры перемещается (рис. 2.8).

Рис. 2.8. Иллюзия перемещения источника освещения.

В ходе экспериментов с морфингом может возникнуть желание осуществить двусторонний морфинг, при котором, например, круг превращается в квадрат, а тот - обратно в круг. Для такого реверса анимации легче всего выделить на шкале времени нужные кадры и дать команду Edit/Copy Frames (Правка/Копировать кадры) или нажать клавиши CTRL+ALT+C. Затем следует отметить первую свободную позицию и дать команду Edit/Paste Frames (Правка/Вставить кадры) (эквивалентная клавиатурная комбинация - CTRL+ALT+V).

Анимация копируется в новое место. Теперь осталось выделить скопированные кадры и дать команду Modify/Frame/Reverse (Изменить/Кадры/Обратить). Порядок кадров изменится на обратный.

Настройка морфинга
Обратите внимание на еще два элемента управления на вспомогательной панели Frame (Кадр), которые появляются при выборе промежуточной анимации формы. Раскрывающийся список Blend (Перетекание) отвечает за гладкость промежуточных фигур, получающихся при морфинге. При выборе пункта Distributive (Распределенное) формы получаются более сглаженными, а при выборе пункта Angular (Угловое) - более угловатыми.

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

Метки морфинга
Поэкспериментировав с морфингом, нетрудно заметить, что иногда превращение фигур друг в друга происходят не совсем так, как этого хотелось бы.

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

Отметим на шкале времени позицию 24 (чтобы при скорости воспроизведения 12 кадров в секунду превращение произошло приблизительно за 2 секунды) и скопируем туда ключевой кадр, нажав клавишу F6. В новом ключевом кадре заменим в текстовом поле цифру 1 на цифру 2. Выделим это текстовое поле и нажмем клавиши CTRL+B, чтобы представить его как графику. То же самое сделаем в первом кадре.

Выделив первый кадр, откроем вспомогательную панель Frame (Кадр) (если она еще не открыта) и в раскрывающемся списке Tweening (Тип анимации) выберем пункт Shape (Форма). Вроде бы, анимация готова.

Нажмем клавиши CTRL+ENTER... и увидим, что превращение единицы в двойку как будто бы происходит, однако при этом фигура буквально переворачивается по ходу дела, чуть ли не исчезая в некоторых кадрах (рис. 2.9). Согласитесь, что это не особенно впечатляет. Как же получить более убедительное превращение?

Для подобных случаев существует механизм меток морфинга. Смысл его в следующем: необходимо указать некоторую «ключевую» точку (метку) на контуре фигуры и в первом, и в заключительном кадре анимации. Этим действием мы как бы приказываем программе переместить эту точку контура в конкретное место. Часто для получения желаемого результата достаточно поставить одну-две метки. Слишком большое количество меток морфинга ставить не рекомендуется, поскольку этим можно вконец "запутать" программу, которая в некоторых кадрах начнет вообще убирать изображение (особенно если в фигурах есть «дырки», как, например, в цифрах 6 или 8).

Чтобы добавить метку морфинга, перейдите в первый кадр анимации и нажмите клавиши CTRL+SHIFT+H. Можно также дать команду Modify/Transform/Add Shape Hint (Изменить/Преобразование/Добавить метку морфинга). Где-то в середине рисунка появится красный кружочек, помеченный буквой. Переместите его в нужную точку контура (проследите, чтобы он лег непосредственно на контур, иначе программа вас не поймет). Затем перейдите в заключительный кадр анимации и переместите аналогичную метку в соответствующую точку контура. Если все сделано корректно, то метка в заключительном кадре станет зеленой, а в первом - желтой. Если метка осталась красной, значит, в одном из кадров она находится не на контуре (или не на краю заливки) фигуры, и программа не понимает, что надо делать.

В данном случае одной метки морфинга недостаточно. Для удовлетворительного результата поставим еще три метки, как показано на рис. 2.10. Как видите, метки автоматически обозначаются буквами латинского алфавита - в данном случае у нас есть метки а, b, с, d.

 

Нажав клавиши CTRL+ENTER, мы увидим, что теперь результат вполне приемлем - превращение происходит естественно (рис. 2.11).

Рис. 2.11. Так можно построить морфинг с помощью меток.

Опытные флэшеры всегда рекомендуют, во-первых, ставить метки последовательно (поставил - переместил в первом кадре - переместил в заключительном кадре, затем также ставится вторая метка и т. д.), а во-вторых, располагать их по контуру против часовой стрелки. В последней версии программы Flash разработчики постарались снизить зависимость результативности морфинга от порядка расположения меток, однако об этих советах по-прежнему лучше не забывать. Во всяком случае, их стоит вспомнить, если морфинг почему-то не идет, как надо.