microbik.ru
1


Параграф 5_1. Анимация движения.


В этом параграфе мы

  • научимся создавать анимацию, в которой программа Flash MX сама рассчитывает все промежуточные фазы движения.

  • убедимся в более высокой эффективности «анимации движения» по сравнению с «пошаговой анимацией».


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


Что такое «анимация движения»?

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

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

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

Такая простейшая анимации объекта получила название "анимации движения". Ее можно применить к объектам, форма которых неизменна. Какие это объекты? Во-первых, это сгруппированный рисунок. Не любой рисунок, а только сгруппированный, т.е. такой, форма которого зафиксирована. Во-вторых, объектом анимации движения может служить текстовый блок или отдельная буква (форма букв тоже строго фиксирована). Третьим типом объектов является так называемый «экземпляр». Что такое группа и текстовый блок мы уже знаем, а определение понятия "экземпляр" будет дано в дальнейшем.


Создание начальной и конечной фаз анимации движения.

В качестве первого шага при создании «анимации движения» создаем для нее отдельный слой. Затем, в пустой ключевой кадр этого слоя (такой кадр можно создать клавишей F7 в любом месте слоя) помещаем объект анимации: группу, текстовый блок или «экземпляр». Этот ключевой кадр будет служить началом анимации. В этом кадре не должно быть ничего кроме одного объекта анимации.

На достаточном удалении по линейке кадров с помощью клавиши F6 создаем копию этого ключевого кадра. Здесь будет конечная фаза анимации. Ясно, что чем дальше отстоят друг от друга эти ключевые кадры, тем дольше будет идти анимационный процесс. Просто потому, что скорость анимации фиксирована (например, 12 кадров в секунду).

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

Кроме того, для редактирования можно воспользоваться возможностями, которые открывает перед нами панель ^ Properties (Свойства). Ранее уже говорилось, что панель Properties принимает различный вид (и предлагает различные возможности) в зависимости от того, какой объект выделен на рабочем поле. Поэтому выбор допустимых преобразований в начальной и конечной фазах анимации зависит от того, к какому классу принадлежит подлежащий анимации объект: является ли он группой, текстовым блоком или экземпляром. Другие, более глубокие виды редактирования, с применением режима редактирования групп, или с применением команды меню Modify/Break Apart (Разбить на части), недопустимы.

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

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


Настройка «анимации движения» на панели Properties.

При выделении кадра панель Properties (Свойства) наполняется содержанием, которое нам еще не приходилось видеть. Это содержание расположено в трех столбцах. Правая часть панели (правый столбец) заполнена элементами управления, которые отвечают за звуковое оформление анимации, но об этом в другой раз. В верхнем левом углу панели можно задать имя кадра, а также написать комментарий к нему. Имя кадра может потребоваться при обращении к кадру в рамках языка программирования Action Script. Мы вернемся к этому вопросу, когда начнем заниматься программированием сценариев для анимации.

Сейчас нам нужна средняя часть (средний столбец) панели Properties, где находится список Tween (Тип анимации). Здесь необходимо выбрать тип анимации и задать некоторые ее параметры. В списке мы выбираем Motion (Движение). Такой выбор, как хорошо видно на рис.1, немедленно определяет сиреневый цвет так называемых "промежуточных кадров" временной шкалы (линейки кадров), на которых прорисовывается стрелка, соединяющая начало и конец анимации. Будьте внимательны. Если вместо стрелки появляется штриховая линия, значит Вы сделали что-то не так и анимации скорее всего не будет. Даже, если анимация и состоится, сбой произойдет позднее, в любой самый неподходящий момент. Необходимо не дожидаясь неприятностей сразу тщательно проверить последовательность описанных шагов.

При выборе ^ Motion (Движение) открываются дополнительные элементы настройки «анимации движения». Это хорошо видно на рис.1. Чтобы анимация шла корректно, проследим за тем, чтобы был установлен флажок Scale, иначе не будет возможности плавного изменения размеров объекта во время анимации. При выборе положительных значений параметра Easing (Замедление) анимация будет идти замедленно, а при выборе отрицательных – ускоренно. В списке Rotate (Поворот) можно предусмотреть принудительный поворот по часовой стрелке (CW), или против (CCW). В окошке рядом можно задать количество таких принудительных оборотов объекта в процессе анимации. Изменение положения центра вращения можно сделать либо в меню Modify/Transform/Edit Center либо воспользоваться инструментом "Transform".

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


Упражнение 1. Пример создания анимации «движения».

  1. Начнем с того, что нарисуем в первом кадре круг. В качестве заливки используем радиальный градиентный цветовой переход. Сгруппируем рисунок. Теперь выделим его инструментом Трансформатор и перенесем центр будущего вращения на некоторое расстояние.

  2. Перейдем в тридцатый кадр. С помощью клавиши F6 сделаем его копией первого кадра. Убедимся, что шар находится на том же месте и что центр вращения по-прежнему вынесен. Вернемся в первый кадр. Откроем панель Properties (Редактор Свойств) и в списке Tween выберем Motion. В дополнительном списке Rotate (Вращение) обязательно выберем принудительное вращение либо CW (по часовой стрелке), либо CCW (против часовой стрелки). Вот и все. Очень просто, не правда ли?


Создадим еще одну анимацию, также как и первая она продемонстрирует нам мощь технологии «анимации движения», ее неоспоримые преимущества перед возможностями пошаговой анимации.

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

Мы уже знаем, что к текстовому блоку, в частности к букве, также как к группе, применима технология "анимации движения". Однако мы пойдем другим путем и немного усложним процесс создания анимации. Для того, чтобы в анимации участвовали не скучные буквы, а веселые «рисованные» буквы – картинки, мы сначала превратим текст в графическое изображение. После этого графическими средствами отредактируем его дизайн, а затем сгруппируем рисунки и заставим их весело двигаться.

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


Упражнение 2. Создание анимации «движения» букв текста. (privet.fla )

  1. Сначала с помощью инструмента Text создадим текстовый блок и напишем слово (или ту фразу), которое должно оживать на экране. Открыв окно панели Properies, убедимся в том, что созданный текстовый блок является Static text.

  2. Инструментом "^ Черная стрелка" выделим написанное слово и командой меню Modify/break Apart (Изменение/Разбить на части) разобьем его на отдельные буквы

  3. Командой меню Modify/Distridute to Liyers разведем буквы написанного нами слова по отдельным слоям. В результате проделанной работы каждая буква, оставаясь в первом кадре, оказалась в своем слое. Слои автоматически получили соответствующие имена.

  4. Займемся дизайном каждой буквы. Для этого выделим кадр, содержащий конкретную букву. (Полезно предварительно заблокировать и сделать невидимыми все остальные слои.)

  5. Выделим букву на рабочем поле. Применив к ней (еще раз) команду меню ^ Modify/break Apart, преобразуем выделенную букву в рисунок. Теперь можно не только раскрасить "букву" в разные цвета, но и придать ей новую, самую экстравагантную форму.

  6. Для того чтобы можно было создать анимацию движения такой отредактированной «рисованной буквы», выделим и сгруппируем ее.

  7. На линейке кадров, на некотором удалении от начала будущей анимации нажатием клавиши F6 создадим копию первого кадра. Этим мы создадим конечную фазу будущей анимации.

  8. Выделив первый кадр вернемся в начало анимации. Изменим стартовые значения анимации. Для этого выделим изображение буквы и вынесем его за пределы рабочей области. Инструментом Трансформатор (шестая кнопка слева на панели инструментов) изменим пропорции этого изображения. Если нужно перенесем центр вращения в другое место.

  9. Оставаясь в первом кадре, выберем в панели Properties в списке Tween значение Motion. В списке Rotate закажем один оборот по часовой стрелке. Теперь при запуске анимации, буква будет влетать из-за пределов рабочего поля. Постепенно изменяя свои размеры и пропорции, и совершив при этом оборот вокруг центра вращения, она встанет на свое место в строю.

  10. Следуя описанной процедуре, создадим анимации движения всех «букв» (а точнее рисунков) по очереди. Пусть «буквы», двигаясь по разным круговым или ломаным траекториям, кувыркаясь, изменяя свои размеры и пропорции, влетают в пределы рабочего поля. Время движения различных букв может быть разным. Одна буква летит быстро, другая медленно. Третья, прежде чем встать на свое место может долго кувыркаться. И так далее. Вариантов множество. На рис.1 показана начальная фаза движения. Здесь выделен стартовый кадр слоя "Т", в котором находится последняя "буква" слова "ПРИВЕТ". Видно, что остальные буквы, также находящиеся на стартовых позициях, имеют самый разный вид и размеры.





Рис. 1.


Можно усложнить движение и заставить «буквы» двигаться по сложной ломаной траектории. Для этого нужно выделить один из промежуточных кадров анимации движения и, нажав клавишу F6, сделать его ключевым. Сама анимация при этом не изменится. В этом можно убедиться просматривая ее до и после создания нового ключевого кадра. Однако во вновь созданном ключевом кадре можно изменить расположение, а также текущий размер и пропорции буквы. Вот теперь вся анимация изменит свой характер. Можно добавить еще ключевых кадров (Как видно из рис.1, это сделано для буквы «В»). Так можно добиться интересных эффектов, например, пульсации размеров движущейся буквы или зигзагов в ее траектории.

Можно с самого начала создать на линейке кадров кроме ключевых кадров для начала и конца анимации еще несколько ключевых кадров для обозначения "этапов большого пути". И так далее. Все это видно на рис.1.


Вопросы для самопроверки.

  1. Чем «анимация движения» отличается от «пошаговой анимации»?

  2. Для каких объектов можно создать анимацию движения?

  3. На каком этапе создания анимации движения, и каким образом задаются ее настройки?