Анимация во Flash MX. Работа с TimeLine. Работа с кадрами. Работа со слоями. Пошаговая анимация. Каждый, кто знаком с Интернетом, не может представить его без анимации, которая украшает практически каждый сайт, рекламу, баннер. Обратимся немного к истории анимации и кино. Всем известно, что если нарисовать какой-либо видоизменяющийся объект на уголках страниц блокнота, а затем очень быстро его пролистать, то создается впечатление постепенно изменяющейся картинки. Подобный эффект был назван анимацией. Если посмотреть пленку с кинофильмом, то там действует тот же принцип, только переворачиваются не страницы, а перемещаются кадры, которых в одну секунду проходит 24 штуки. Если рассматривать компьютерную анимацию, то, в принципе, она работает так же, однако существуют различные способы ее создания и реализации. Рассмотрим самый простой, но от этого ничуть не менее популярный, способ создания анимации, который можно назвать пошаговым. При таком способе создаются отдельные кадры изображения, которые потом сменяют друг друга. Лабораторная работа. Цель: Рассмотреть на практике принципы работы с TimeLine (временная шкала), слоями (Layers), кадрами (Frame). На примере изучить способы пошаговой анимации. Задание№1: Изучить интерфейс временной шкалы. Рассмотреть все имеющиеся инструменты и возможности интерфейса. Ход работы: 1) Внешний вид временной шкалы представляет собой прямую поделенную на равные промежутки (кадр, frame), каждый из которых имеет цифровое обозначение начиная с «1» и заканчивая «567». Рисунок №1 Рис №1 Применение: Временная шкала с расположенными на ней кадрами – основной инструмент по созданию анимации. 2) В левой части находят так называемые слои (Layer). Слой это отдельная временная шкала, анимация на которой будет работать отдельно от анимации на других слоях. Содержимое одного слоя не может смешиваться и изменять содержимое других слоев. Каждый слой может содержать разные виды анимации. Количество слоев не ограничено. При работе со слоями может возникнуть неудобство при переизбытке количества слоев. Для этого разработчики включили так называемые папки (Folder). В папку можно включать уже отработанные, не нужные на данный момент слои, сворачивая их на экране. a. Существует три вида слоя: Обычный слой (Layer) – отображает все что на нем находится. Направляющий слой (Guide Layer) – на данном виде слоя располагается только траектория движения объектов, которые расположены на слоях находящихся под направляющим слоем. Траектория как правило скрыта от глаз конечного зрителя. Слой маска (Mask Layer) – слой, который позволяет отображать содержимое находящихся под ним слоев только в указанных областях. См. рисунок №2 Рис №2 Применение: Вспомогательный инструмент при создании сложных анимационных фрагментов (движение нескольких объектов одновременно, исчезновение объектов, расположение одного объекта над другим). 3) Калькирование (калька) (Onion Skin). Калькирование используется для удобства пользователя при создании пошаговой анимации. Включение калькирования позволяет видеть расположение объекты на несколько кадров назад или вперед. На рисунке №3 отображено калькирование первого кадра. Находясь на втором кадре мы видим прямоугольник расположенный на первом. Рис №3 На рисунке №4 калькирование Onion Skin Outlines отображает только контур объекта, находящегося на предыдущем кадре. Рис №4 Применение: Калькирование применяется в случаях когда необходимо видеть положение объекта на предыдущих кадрах (при создании покадровой анимации, положение объекта на первом кадре должно совпадать с положением на последнем кадре анимации). 4. Кадр (Frame) – рабочая область, содержащая промежуточное изображение анимационного клипа. Кадры расположены в определённой последовательности. Меняясь, друг за другом с заданной частотой, они составляют анимационный эффект. Все кадры в целом составляют клип (Клип – упорядоченная последовательность кадров, сменяющих друг друга с определенной частотой). Кадр и его содержимое схематично отображается на временно шкале. На рисунке №5 показано положение при котором редактор не готов к созданию графических объектов (пользователь ни чего не сможет нарисовать). Рис №5 Что бы приступить к началу работы необходимо вставить пустой кадр. Для этого нужно выполнить следующую команду Insert>Frame или нажать клавиатурное соответствие «F5» (далее будем использовать только клавиатуру). Отображение пустого кадра на временной шкале показано на рисунке №6 Рис №6 Если на первом кадре поместить графический объект, то кадр уже не будет пустым. Он будет ключевым. Отображение ключевого кадра на временной шкале показано на рисунке №7. Рис №7 Ключевой кадр – кадр на котором находится начальное графическое изображение в начале анимационного фрагмента или конечное графическое изображение в конце анимационного фрагмента. Для простоты создания анимации и использования возможностей flash существует возможность копирования содержимого ключевого кадра на последующие кадры. Для этого нам необходимо выполнить команду Insert>Keyframe либо нажать «F6». На рисунке №8 показано копирование содержимого 1 кадра на 3 кадра вперед (нажатие «F6» 3 раза). Рис №8 Теперь мы можем менять содержимое каждого из 4 кадров в отдельности. Каждый кадр в этом случае ведет себя самостоятельно и все изменения, произведенные на каком либо кадре не отображаются на последующих. Иногда возникает необходимость копирования первого кадра на несколько кадров вперед таким образом, что бы изменения, вносимые в первый кадр так же применялись и на остальные (что бы не изменять каждый кадр вручную). Для этого необходимо выбрать мышкой необходимый кадр и выполнить команду Insert>Keyframe либо нажать «F6». На рисунке №9 показано копирование содержимого 1 кадра на 4 кадра вперед, с установкой ключевого кадра в конце. Рис №9 На рисунке №9 показано, что на 2,3,4 кадрах содержимое будет такое же как и на первом, а вот кадр 5, пользователь может менять на свое усмотрение. Задание№2: Выполнить простую кадровую анимацию. Появление слова «Привет!» Ход работы: 1) Открыть редактор Flash; 2) В открывшимся пустом бланке с помощью Text Tool создаем текстовую надпись «Привет!» так как показано на рисунке №10; Рис 10 3) Для того что бы у нас получился эффект появления текста необходимо чтобы анимация была длительностью равной количеству знаков в слове, плюс первый пустой кадр (нужен для того что бы слово появлялось из пустоты). Итого получилось 8 кадров; 4) Что бы покадровая анимация получилась реалистичной необходимо объект с первого кадра (слово «Привет!») скопировать на следующие 7 кадров. Для этого нужно вставить 7 ключевых кадров с помощью нажатия клавиши «F6». Должно получиться так как на рисунке №11. Рис №11 5) Теперь когда у нас на всех кадрах (с 1 по 8) находится одно и то же, можно приступать к созданию анимационного эффекта: a. Первый кадр – удаляем все что есть. Рис. №12; Рис №12 b. Второй кадр – используя инструмент правки текста Text Tool оставляем только первую букву в слове. Рис. №13; Рис. №13 c. Третий кадр – используя инструмент правки текста Text Tool оставляем первые две буквы в слове. Рис. №14; Рис №14 d. Четвертый кадр – используя инструмент правки текста Text Tool оставляем первые три буквы в слове; e. Пятый кадр – используя инструмент правки текста Text Tool оставляем первые четыре буквы в слове; f. Шестой кадр – используя инструмент правки текста Text Tool оставляем первые пять букв в слове; g. Седьмой кадр – используя инструмент правки текста Text Tool оставляем первые шесть букв в слове; h. Восьмой кадр – оставляем без изменений. Там должно быть полное слово с восклицательным знаком; 6) Анимация готова. Для ее тестирования достаточно нажать клавишу «Enter» или «Ctrl+Enter». Буквы должны появляться последовательно; 7) Таким образом, мы видим, что покадровая анимация состоит из сменяющих друг друга кадров. Каждый кадр незначительно отличается от предыдущего. На первом кадре у нас было пусто, на последнем слово целиком. В промежутке кадры на которых буквы добавлялись по возрастанию их количества. Самостоятельное задание: Попробуйте создать свою покадровую анимацию, в которой слово целиком будет менять цвет. Для этого начиная с пункта №4 задания №2 надо поменять цвет слова на каждом из 8-ми кадров. Или на каждом из восьми кадров поменять место расположения слова. Виды анимации во Flash MX (Motion Tween) Прежде всего, необходимо помнить, что анимация это быстрая смена статичных изображений, перенесенных на кадровую шкалу. Для создания эффекта движения необходимо, что бы каждый последующий кадр отличался от предыдущего. Для этого необходимо копировать первый нарисованный кадр на второй и вносить незначительные изменения, затем копировать второй кадр на третий и опять вносить изменения… Так необходимо повторять до конца фильма. Если фильм будет состоять из 100 и более кадров, то придется прорисовывать каждый кадр в ручную. К приему прорисовки кадров прибегают только профессиональные художники-аниматоры. Иногда этого можно избежать и воспользоваться возможностями Flash MX. При создании анимационного клипа часто приходится рисовать объекты, которые в своем движении не меняют форму и цвет. Рисовать их каждый раз на новом кадре без изменений и просто менять положение не имеет смысла. Заставить двигаться такой объект, задавая только начальный и конечный кадр, можно средствами Flash MX Анимация такого типа называется Motion Tween. Задание №1. Нарисовать во Flash MX объект «Бумажный змей». На фоне неба создать иллюзию полета бумажного змея. Полет должен состоять из двух поворотов. При создании движения использовать свойство кадров Motion Tween. Ход выполнения №1: 1. Открыть Flash MX; 2. На первом кадре с помощью инструмента Line Tool/Линия нарисовать объект «Бумажный змей» (Рис. 1); Рис. 1 2.1. Установить объект за границы основной сцены (Рис. 2). Это делается для того, чтобы в начале полета создалась иллюзия появления из «ниоткуда». Рис. 2 2.2. Создадим движение до первого поворота. Первый поворот будет происходит на 21 кадре. Поэтому движение до 20 кадра будет происходить без изменений. Чтобы правильно создать такое движение нам необходимо указать положение объекта на 1 начальном кадре и на 20 конечном. Сейчас у нас заполнен только кадр 1. Нажимаем правой кнопкой мыши на 20 кадр и выбираем пункт меню Insert Keyframe. Затем нажимаем правой кнопкой мыши по кадру 1 и выбираем пункт меню Create Motion Tween. То же самое проделываем и с 20 кадром. В результате на Timeline от 1 до 20 кадра появиться стрелка на синем фоне. Это означает, что объект из положения на кадре 1 перейдет в положение на кадре 20 (Рис. 2). 2.3. Для того, чтобы закончить анимацию, необходимо на кадре 20 переместить объект в центр основной сцены. Выбрать левой кнопкой мыши 20 кадр, с помощью клавиш «влево», «вправо» переместить объект. Так как это показано на Рис. 3. Рис. 3 2.4. Первая часть анимационного клипа готова. Для ее проверки нажмем клавишу «Enter». Бумажный змей должен переместиться из-за границы основной сцены на ее середину. Если видимого движения не произошло или объект передвигается «скачками», необходимо еще раз повторить пункт №2. 3. Следующим шагом нашего клиппа будет поворот бумажного змея в противоположную сторону. 3.1. Поворот необходимо сделать так, чтобы наша предыдущая анимация (с 1 по 20 кадр) не была нарушена. Для этого скопируем объект на 21 кадр. 3.2. Нажимаем правой кнопкой мыши на 21 кадр, выбираем Insert Keyframe. Теперь у нас существует отдельный кадр с объектом, который мы можем поворачивать. 3.3. Поворот объекта. Нажимаем левой кнопкой мыши на объекте и выбираем Modify>Transform>Scale and Rotate. В открывшемся окне можно указать два значения Scale (размер объекта в процентах) и Rotate (поворот объекта в градусах). Scale оставляем без изменений (100%), Rotate указываем -40 градусов. Объект должен сменить угол наклона. 4. Теперь необходимо создать движение бумажного змея с середины сцены в ее левый верхний угол. 4.1. Объект будет двигаться от кадра 21 до кадра 40. Движение объекта будет осуществляться также, как и в самом начале, с помощью Motion Tween. 4.2. Размножим объект до кадра 40. Нажимаем правой кнопкой мыши на кадр 40 и выбираем пункт меню Insert Keyframe. Затем нажимаем правой кнопкой мыши по кадру 21 и выбираем пункт меню Create Motion Tween. То же самое проделываем и с кадром 40. В результате на Timeline от 21 до 40 кадра появиться стрелка на синем фоне, это означает, что объект из положения на кадре 21 перейдет в положение на кадре 40 (Рис. 4). Рис. 4 4.3. Для того, чтобы закончить анимацию, необходимо на кадре 40 переместить объект в левый верхний угол сцены. Выбрать левой кнопкой мыши кадр 40, с помощью клавиш «влево» и «вверх» переместить объект. Так как это показано на Рис. 4. 4.4. Вторая часть анимации закончена. Для проверки необходимо нажать «Enter». В результате объект должен двигаться из-за границы сцены на ее центр, затем поворачиваться и двигаться в левый верхний угол сцены. Если объект не двигается или двигается скачками, то значит при создании анимации были допущенны ошибки. Проверьте все еще раз. 5. В этом пункте нам необходимо развернуть объект в обратную сторону, по направлению в правый нижний угол сцены. 5.1. Поворот необходимо сделать так, что бы наша предыдущая анимация (с 21 по 40 кадр) не была нарушена. Для этого скопируем объект на 41 кадр. 5.2. Нажимаем правой кнопкой мыши на 41 кадр, выбираем Insert Keyframe. Теперь у нас существует отдельный кадр с объектом, который мы можем поворачивать. 5.3. Поворот объекта. Нажимаем левой кнопкой мыши на объекте и выбираем Modify>Transform>Scale and Rotate. В открывшемся окне можно указать два значения: Scale (размер объекта в процентах) и Rotate (поворот объекта в градусах). Scale оставляем без изменений (100%), Rotate указываем 100 градусов. Объект должен сменить угол наклона. 6. Последний этап анимации. Перемещение объекта за сцену. 6.1. Анимация будет проходить от кадра 41 до кадра 60. Движение объекта будет осуществляться также, как и в предыдущих вариантах, с помощью Motion Tween. 6.2. Размножим объект до кадра 60. Нажимаем правой кнопкой мыши на кадр 60 и выбираем пункт меню Insert Keyframe. Затем нажимаем правой кнопкой мыши по кадру 41 и выбираем пункт меню Create Motion Tween. То же самое проделываем и с 60 кадром. В результате на Timeline от 41 до 60 кадра появиться стрелка на синем фоне, это означает, что объект из положения на кадре 41 перейдет в положение на кадре 60. 6.3. Для того, чтобы закончить анимацию, необходимо на кадре 60 переместить объект за границы основной сцены. Выбрать левой кнопкой мыши кадр 60, с помощью клавиш «вправо» и «вниз» переместить объект. Так как это показано на рисунке (Рис. 5). Рис. 5 7. Последним шагом создания иллюзии полета будет установка фонового рисунок cloud.jpg 7.1. Для того, чтобы анимация не бала нарушена, необходимо фоновый рисунок поместить на другой слой клиппа. Слой с фоновым рисунком должен находиться ниже всех имеющихся слоев с анимацией. 7.2. Выберем Insert>Layer: в панели Timeline появится дополнительный слой Layer 2. С помощью мышки его необходимо поместить под слой Layer 1 (Рис. 6). Рис. 6 7.3. На кадр 1 слоя Layer 2 необходимо поместить фоновый рисунок. File>Import>выбрать файл cloud.jpg, растянуть вставленный рисунок на всю основную сцену. Вставленный рисунок автоматически скопирован до конца анимации (Рис. 7). Рис. 7 8. Анимацию можно считать законченной. Для окончательной проверки необходимо нажать «Ctrl+Enter». Виды анимации во Flash MX (Shape) Часто при создании анимационных эффектов мало просто передвинуть объект с одного места на другое. Часто возникает необходимость изменить не только размер, но и форму, цвет анимируемого объекта. Необходимость изменения форм и цвета может возникнуть при создании эффекта появления из «ниоткуда» или эффекта растворения. Такой вид анимации называется Shape Tween. Реализация такого вида анимации несколько отличается от предыдущего Motion Tween. Задание №1. Рассмотреть на практике примеры построения анимации типа Shape Tween. На основной сцене нарисовать объект «Капля воды». С помощью Shape Tween создать эффект падения, растекания и растворения капли. Ход выполнения №1: 1. На первом кадре основной сцены, средствами панели инструментов Flash создаем объект каплевидной формы. Объект должен быть расположен на середине верхней части сцены. Так как показано на рисунке №1 Рис. 1 1.1. Далее нужно заставить каплю двигаться вниз. Левой кнопкой мышки на временно шкале выбираем 20 кадр, вставляем ключевой кадр «F6». На кадре 20 объект передвигаем в нижнюю часть основной сцены. Так как показано на рисунке №2. Рис. 2 1.2. Возвращаемся на первый кадр. В панели Properties (свойства) для первого кадра устанавливаем свойство Shape. Вызов панели осуществляется нажатием комбинации «Ctrl+F3». См. рисунок №3. Рис. 3 1.3. После установки свойства на временной шкале появляется схематическое отображение анимации Shape Tween (длинная стрелкана зеленом фоне). См. рисунок №4. Рис. 4 1.4. Первая половина анимации готова. Переходим на кадр 20. 2. Следующим шагом будет растекание капли из своего первоначального положения в лужицу. 2.1. Необходимо вставить пустой ключевой кадр. Выбираем кадр 30. Жмем «F7» - установка пустого ключевого кадра. Временная шкала должна приобрести такой вид как на рисунке №5. Рис. 5 2.2. На кадре 30 нужно средствами Flash нарисовать объект, в который должна будет превратиться капля. В нашем случаем овал такого же цвета как и капля. Овал должен располагаться в центральной нижней части основной сцены так как показано на рисунке №6. Рис. 6 2.3. Переходим на кадр 20. В панели Properties (свойства) устанавливаем свойство Shape. Так как показано на рисунке №3 п. 1.2. 2.4. Анимация почти готова, осталось сделать исчезновение лужицы. 3. Эффект исчезновения тоже делается с помощью Shape Tween. Только в здесь объект должен поменять не форму, а цвет. Лучше всего менять с исходного цвета на цвет фона или на цвет с Alpha/прозрачность 0%. Поменять цвет объекта и его прозрачность можно в панели Color Mixer (Shift+F9). 3.1. Перейдем на кадр 50. Вставим ключевой кадр «F6». Поменяем цвет объекта на другой. В нашем случае на цвет фона (белый). Необходимо помнить, чтобы цвет заливки и цвет контура были одинаковыми. 3.2. Переходим на кадр 30. В панели Properties (свойства) устанавливаем свойство Shape. Так как показано на рисунке №3 п. 1.2. Временная шкала, должна приобрести вид как показано на рисунке №7 Рис. 7 3.3. В принципе анимация готова. Для ее проверки можно нажать «Enter» или «Ctrl+Enter». Но для того что бы анимационный эффект приобрел хоть какой-нибудь смысл необходимо его доделать. 3.4. Создаем новы слой в панели Layers. Помещаем его под слой на котором находится анимационный эффект. 3.5. Переходим на первый кадр нижнего (нового) слоя (Layer2). Выполняем следующую команду File>Import. В открывшемся окне выбираем файл kran.jpg. На протяжении всей анимации у нас появится фон виде кухонного крана. 3.6. Совместите первый кадр на первом слое (Layer1) и первый кадр на втором слое (Layer2) так что бы было похоже, что вода капает из крана. 3.7. Анимация готова. Виды основной сцены и конечный вид временно шкалы показаны на рисунках №8 и №9. Рис. 8