Создание анимации macromedia flash
Анимация — это иллюзия движения, создаваемая с помощью ряда последовательных неподвижных изображений, незначительно отличающихся друг от друга. Еще в эпоху Возрождения было замечено, что при быстрой смене изображений создается эффект движения.
Для создания анимации используется временная шкала (Timeline), на которой располагаются все кадры, а также “головка воспроизведения кадров” — небольшой закрашенный прямоугольник в области временной шкалы с номерами кадров (см. рис. 1). При проигрывании фильма головка автоматически перемещается.
Кадры бывают ключевыми и статическими. В ключевых кадрах, как правило, и содержится изображение (они определяют содержание фильма). Такие кадры обозначаются черными кружочками 1 . Остальные кадры — статические (они проигрываются как бы “впустую”).
Настройка временной линейки осуществляется с помощью кнопки , которая имеет следующие режимы:
- Tiny (Очень маленький);
- Small (Маленький);
- Normal (Нормальный);
- Medium (Средний);
- Large (Большой).
С кадрами можно выполнять различные операции (копировать, удалять и др.). Для операций с отдельным кадром достаточно предварительно щелкнуть на нем мышью, с несколькими последовательными кадрами — их необходимо выделить, щелкнув сначала по первому из них, а затем при нажатой клавише — по последнему.
Сделать некоторый кадр ключевым можно с помощью функциональной клавиши F6 или используя главное меню — команды Insert — Timeline — KeyFrame (Вставка — Временная шкала — Ключевой кадр).
Для удаления кадра (кадров) необходимо после его (их) выделения выбрать в контекстном меню пункт Remove Frames (Удалить кадры) или выполнить команды главного меню Edit — Timeline — Remove Frames (Правка — Временная линейка — Удалить кадры).
Для перемещения кадров их можно переместить мышью, как показано на рис. 2.
Копирование кадров осуществляется с помощью контекстного (пункт Copy Frames (Копировать кадры)) или главного меню (Edit — Timeline — Copy Frames (Правка — Временная шкала — Копировать кадры)). Вставка скопированного кадра (скопированных кадров) выполняется аналогично с использованием команды Paste Frames (Вставить кадры). Естественно, нужно указать место вставки на временной шкале.
Для вставки статического и пустого ключевого кадра используются функциональные клавиши и соответственно.
По умолчанию анимация происходит при увеличении номеров кадров. Чтобы изменить направление анимации на обратное, необходимо выделить кадры и в контекстном меню выбрать пункт Reverse Frames (Обратить кадры). Можно также применить команды главного меню Modify — Timeline — Reverse Frames (Изменить — Временная шкала — Обратить кадры).
Автоматическая анимация
Рис. 10. Объект автоматически превращается в графический символ
Рис. 11. Каждый новый символ становится частью библиотеки
Если выполнить команду Window => Library, то можно убедиться, что в библиотеке появился символ и ему по умолчанию присвоено имя Tween 1. Для того чтобы присвоить символу другое имя, достаточно дважды щелкнуть по названию и заменить его на желаемое. После того как мы сформировали графический символ, перейдем в конечный кадр нашей анимации (пусть это будет 15-й кадр) и вставим ключевой кадр (по команде Insert Keyframe). В этом кадре появится копия символа, которую мы переместим и повернем вокруг оси (по команде Modify Transform=>Free Transform), как в предыдущем примере. Как видно из рис. 12, все кадры между двумя ключевыми окрасились в голубой цвет и от первого ключевого кадра к последнему протянулась стрелка, что указывает на создание анимации Motion Tween.
Рис. 12. Стрелка на голубом фоне свидетельствует о создании анимации Motion Tween
Выполнив команду Control => Test Movie, получим информацию, представленную на рис. 13.
Рис. 13. Просмотр фильма в режиме Bandwidth Profiler
Несмотря на то что в этом примере у нас 15, а не шесть кадров, как в предыдущем, и анимация получилась более плавная, размер результирующего файла оказывается меньше — всего 900 байт. Как видно из диаграммы (рис. 13), информация об объекте хранится только в первом кадре, а в каждом новом кадре необходимо запоминать лишь новые положения листка. На это уходит в среднем всего по 20 байт.
Для того чтобы проиллюстрировать падение листа с поворотом вокруг плоскости листа, повторим предыдущий пример, только при модификации последнего ключевого кадра добавим команду Modify => Transform => Flip Horizontal. В результате получим следующий фильм.
Теперь рассмотрим пример, когда листочек приближается к зрителю. Для этого в конечном кадре вместо зеркального отображения (Flip Horizontal) будем увеличивать размер листка. Для того чтобы не возникало ощущения замедления движения при приближении объекта к зрителю, скорость его движения необходимо увеличивать. Для того чтобы добиться этого эффекта, необходимо щелкнуть по первому кадру и обратиться к разделу Ease в панели Properties. Положительные значения параметра Ease приводят к замедлению движения, а отрицательные — к ускорению. Выберем максимальное ускорение объекта.
Рис. 14. Выберем максимальное ускорение объекта Ease = –100
Для этого выставим значение параметра Ease равным –100 (рис. 14). В результате получим фильм. Отметим, что первый кадр можно поместить и за сценой, тогда мы получим фильм, в котором листок будет влетать в кадр и двигаться навстречу зрителю. Можно моделировать вращение листа вокруг смещенного центра симметрии. Надеюсь, читатель сам сможет поэкспериментировать, усложняя модификацию конечного кадра и изменяя таким образом характер движения листа.
Из представленных примеров очевидно, что автоматическая анимация движения эффективна, когда трансформация объекта при его движении задается простыми функциями (поворот, масштабирование и т.п.). Если же необходимо анимировать сложные движения (например, движение руки героя мультфильма), то здесь анимация трансформации движения не применима. Каждый кадр приходится рисовать вручную, то есть применять покадровую анимацию, состоящую из набора ключевых кадров. Таким образом, покадровая анимация — это наиболее универсальный, но вместе с тем и самый трудоемкий вид анимации, кроме того, он создает наиболее «тяжелые» файлы. Всегда, когда можно заменить покадровую анимацию автоматической, — это предпочтительно. Рассмотрим ряд примеров, которые позволяют использовать автоматическую анимацию движения при имитации полета.
Практическая часть
1. Проект “Движущийся человечек”.
2. Проект “Движение по замкнутой кривой”.
3. Проект “Превращение фигуры в букву”.
1. Проект “Движущийся человечек”
Создадим фильм, в котором средствами анимации движения (Motion Tween) будет двигаться человечек.
Перед созданием проекта надо хорошо себе представить, из каких отдельных элементов будет состоять “герой нашего фильма”. Ведь каждая деталь должна двигаться при проигрывании фильма. Надо продумать и такой момент — какие элементы должны быть на переднем плане, а какие — на заднем. Для более наглядного представления желательно предварительно сделать рисунок на листе бумаги.
Итак, пусть наш человечек будет выглядеть так, как на рис. 4.
Такое изображение можно получить из простейших фигур — окружностей, эллипсов и прямоугольников.
Приступим к рисованию. Нарисуем всего человека на одном слое, а затем распределим по слоям отдельные части, такая возможность в программе имеется. Сначала нарисуем голову (окружность) и командой Modify — Convert to Symbol (Изменить — Преобразовать в символ) преобразуем ее в символ, при этом примем тип (Behavior) символа Movie clip (Символ-клип); назовем этот символ голова.
Затем создадим объект, который будет служить “телом”. Выполним команду Insert — New Symbol (Вставка — Новый символ) и установим параметры, как на рис. 5. После щелчка на кнопке OK попадаем в режим редактирования символа, рисуем прямоугольник (см. рис. 6а). Нужно обратить внимание на то, чтобы центр каждого нарисованного объекта в режиме редактирования совпадал с точкой регистрации, которая обозначается знаком “+”.
Созданный символ попадает в библиотеку фильма. Переходим на сцену и переносим его в рабочую область.
Затем создаем таким же образом “бедро” (обратите внимание — прямоугольник нарисован со скругленными углами) и копированием получаем второй такой же элемент (рис. 6б). Так же получаем две голени и, наконец, башмачки (см. рис. 4). Имена всем символам дадим в соответствии с рис. 8.
В результате получился человечек! Пусть вас не волнуют красота и правдоподобие рисунка, нам важнее всего понять идею анимации и воплотить ее в фильме.
Итак, человечек находится в первом ключевом кадре на одном слое. Распределим по слоям все составляющие его фигуры — для этого выполним команду Modify — Timeline — Distribute to Layers (Изменить — Временная шкала — Распределить по слоям) — см. рис. 7.
В результате выполнения данной команды слои должны быть расположены так, как показано на рис. 8.
Самым нижним слоем сделаем фон нашего фильма. Рисунок для него выберите на свое усмотрение.
После этого надо определиться с длиной фильма и указать те кадры, на которых будут показаны различные положения человека при движении. Для этого выберем следующие кадры: 5-, 9-, 13-й и 17-й. Это означает, что длина фильма будет составлять 17 кадров, а названные кадры следует сделать ключевыми (используя функциональную клавишу F6 во всех слоях, кроме слоя фон.
Теперь рассмотрим, как должны выглядеть эти ключевые кадры. В первом кадре рисунок должен быть таким, как на рис. 4, в 5-м — как на рис. 9а, в 9-м — как на рис. 9б, в 13-м — как на рис. 9в и в 17-м — как на рис. 9г.
Желательно в 5-м и 13-м кадрах слоев “тело” и “голову” немного приподнять для более реалистичного движения. Возможно, какие-то кадры вам придется подкорректировать.
После этого создадим анимацию движения в ключевых кадрах. С этой целью щелкнем по ключевому кадру правой клавишей мыши и в контекстном меню выберем команду Create — Motion Tween (Создать — Анимацию движения). В результате временная шкала примет вид, показанный на рис. 10.
Фильм готов, и его можно протестировать.
3. Проект “Превращение прямоугольника в букву”
В данном проекте прямоугольник превращается в букву, т.е. применяется анимация формы.
1. На слое, который назовем прямоугольник, нарисуем прямоугольник без контура, а рядом напишем букву, например, Е (рис. 26).
2. Разобьем букву на части по команде Modify — Break Apart (Изменить — Разбить).
3. Наложим букву на прямоугольник, после чего нажмем на пиктограмму
на панели инструментов и растянем букву по высоте и ширине прямоугольника так, как показано на рис. 27.
4. Не отменяя выделения, в контекстном меню выберем команду Cut (Вырезать), после чего разместим букву на отдельном слое по команде Edit — Paste in Place (Правка — Вставить в то же место).
5. Скроем слой с буквой, щелкнув на точке под значком .
6. На временной шкале выделим, например, 35-е кадры в обоих слоях и сделаем их ключевыми (нажав клавишу F6).
7. Выделим первый ключевой кадр в слое буква, скопируем его, выбрав в контекстном меню пункт Copy Frames (Копировать кадры), и вставим в последний ключевой кадр слоя прямоугольник по команде Paste Frames (Вставить кадры). Получилось так, что в первом ключевом кадре слоя прямоугольник нарисован прямоугольник, а в последнем ключевом кадре этого же слоя — буква. Слой с буквой можно теперь удалить.
8. Теперь создадим анимацию. Щелкнем по первому ключевому кадру и на панели Properties (Свойства) в списке Tween (Анимация) выберем Shape (Форма). Появилась горизонтальная линия со стрелкой, а кадры окрасились в зеленоватый цвет, что свидетельствует о создании анимации формы.
Надо указать, какая точка прямоугольника в какую точку буквы должна переместиться. Для этого существуют так называемые метки подсказки. Чтобы задать их, надо выделить первый ключевой кадр и выполнить команду Modify — Shape — Add Shape Hint (Изменить — Форму — Добавить подсказку формы). Появится красная метка с буквой a (рис. 28).
Добавим еще одну метку — для этого правой клавишей мыши щелкнем по имеющейся метке и в контекстном меню выберем команду Add Hint (Добавить подсказку), снимем выделение, щелкнем по красной метке (с буквой b) и перетащим ее мышью в верхний правый угол прямоугольника (см. рис. 29).
После этого перейдем на последний ключевой кадр. Щелкнем мышью по белому рабочему полю и только потом перенесем красную точку на то же место в правый верхний угол буквы Е.
Аналогичным образом создадим еще две метки (см. рис. 30) на прямоугольнике и укажем их место на букве.
Примечание. Знакомство с эффектами временной шкалы можно предложить учащимся провести самостоятельно.
1 Возможны также “пустые” ключевые кадры. Они обозначаются не закрашенным кружочком. — Прим. ред.
Macromedia Flash MX 2004 предоставляет несколько способов создания анимационных последовательностей:
• анимационные эффекты — программа сама создает последовательность кадров, имитирующую тот или иной эффект применительно к некоторому объекту;
• покадровая анимация — пользователь создает каждый кадр будущей анимации;
• автоматическая tweened-анимация, или анимация трансформации, — пользователь задает начальный и конечный кадр, а программа сама создает промежуточные кадры на основе программной интерполяции.
Виды анимации
В программе Macromedia Flash возможны следующие виды анимации:
— анимация движения (Motion Tween);
— анимация формы (Shape);
— анимация с использованием эффектов временной шкалы.
Рассмотрим каждый вид анимации отдельно.
Покадровая анимация
Покадровая анимация реализуется с помощью ряда последовательных ключевых кадров, каждый из которых должен быть создан “вручную” (рис. 3).
Анимация движения (Motion Tween)
При такой анимации происходит перемещение объекта из одного места в другое. Для ее создания нужно указать только начальный и конечный ключевые кадры, все промежуточные кадры будут определены программой автоматически. Рассмотрим поподробнее технологию создания такой анимации.
Нарисуем на рабочем поле окружность, на временной шкале первый кадр автоматически станет ключевым.
Щелкнем по ключевому кадру правой клавишей мыши и выберем команду контекстного меню Create Mоtion Tween (Создать анимацию движения). Вокруг окружности образуется голубая рамка, что означает, что объект сгруппирован. Затем выделяем на временной шкале, например, 30-й кадр (указываем длительность фильма) и при нажатой правой клавише мыши выбираем команду Insert — KeyFrame (Вставить ключевой кадр) — на временной шкале появляется горизонтальная линия со стрелкой на конце, что означает, что движение создано. Промежуточные кадры автоматически окрашиваются в голубоватый цвет.
Далее нужно переместить окружность в другое место и, наконец, протестировать фильм, нажав комбинацию клавиш + или выбрав команды Control — Test Movie (Управление — Тестирование фильма).
С помощью панели Properties (Свойств) можно задать также дополнительные параметры анимации:
— Rotate (Вращение) определяет направление вращения — по часовой стрелке (CW) или против (CWW), или нет вращения совсем (None). Возможно также значение Auto (объект поворачивается один раз в направлении поворота на наименьший угол);
— Easy (Замедление хода); если значение параметра положительное, то движение при анимации будет замедленным, если отрицательное — ускоренным;
— Orient to Path (Ориентация относительно пути) позволяет ориентировать движение объекта относительно заданной траектории и другие.
Анимация формы (Shape Tween)
Анимация формы позволяет плавно превращать один объект в другой. Применять ее можно только к несгруппированным объектам. Для изменения формы нескольких объектов их следует располагать на одном слое. Рассмотрим все на примере.
Нарисуем на рабочем столе окружность, выберем длину фильма в 30 кадров, для этого щелкнем мышью по 30-му кадру, вернемся в первый ключевой кадр и на панели Properties (Свойства) в списке Tween выберем режим Shape (Форма), появится горизонтальная линия со стрелкой на конце, промежуточные кадры окрасятся в зеленый цвет, это означает, что создана анимация формы, в последнем ключевом кадре вместо окружности нарисуем квадрат.
Протестируем фильм — увидим, как окружность плавно превращается в квадрат. Для указания конкретного характера изменения формы (перетекания точек одного объекта в точки другого) необходимо создать так называемые метки подсказки. С ними мы познакомимся позже на конкретном примере.
Анимация с использованием эффектов временной шкалы
В версии программы Macromedia Flash MX 2004 появилась возможность создать анимацию с помощью встроенных эффектов. Эффекты можно применять к текстам, фигурам, группам, графическим символам, растровым изображениям и кнопкам. Их можно использовать и для клипов, но в этом случае эффект встраивается в клип.
Для применения эффекта следует выделить объект и выполнить команду Insert — Timeline Effects (Вставка — Эффекты временной шкалы); далее выбираете тип эффекта: Assistants (Помощники), Effects (Эффекты), Transition — Transform (Переход — Трансформация). Эффекты группы Assistants не являются анимационными. Они просто либо создают дубликаты заданного объекта и размещают их на определенном расстоянии друг от друга, либо создают равномерное перетекание объекта в его дубликат.
После выбора эффекта появляется диалоговое окно, в котором можно установить параметры его проявления.
При создании эффекта автоматически создается слой, куда переносится объект (имя слоя совпадает с названием эффекта). На основе объекта создается графический символ, который записывается в библиотеку в папку Effects (Эффекты).
2. Проект “Вращение спутника вокруг Земли”
Модель Земли со спутником на орбите изобразим в виде, показанном на рис. 11.
Опишем основные этапы создания проекта, в котором используется анимация движения (Motion Tween).
1. С помощью панели Color Mixer (Смеситель цвета) установим радиальную заливку, выбрав два цвета на градиентной шкале: зеленый и коричневый.
2. Нарисуем окружность без контура, с выбранной на этапе 1 заливкой, которая будет служить “Землей”. Слой назовем планета (рис. 12).
3. Создадим фон (самый нижний слой), в качестве которого можно взять любую картинку, имитирующую небо.
4. Нарисуем (инструментом Oval) траекторию орбиты в виде эллипса любого цвета без заливки, т.е. панель инструментов управления цветом (Colors) будет выглядеть так, как на рис. 13.
5. Для поворота траектории на 45 ° необходимо ее сгруппировать, так как при пересечении областей происходит разбиение фигуры на части. Выделим отдельные части траектории мышью при нажатой клавише . Для их группировки выберем команду Modify — Group (Изменить — Сгруппировать) — появилась голубая рамка. Повернем сгруппированный объект на 45 ° (см. рис. 11). Для этого можно воспользоваться панелью Transform (Трансформация), выполнив команду Window — Design Panels — Transform (Окно — Панели дизайна — Трансформация) и введя в поле Rotate (Поворот) значение угла –30 ° (рис. 14).
6. Затем вновь разобьем траекторию на отдельные части по команде Modify — Break Apart (Изменить – Разбить). Чтобы сымитировать движение по замкнутой траектории, необходимо указать точку начала движения и его окончания. Для этого нарисуем еще один эллипс меньшего размера и наложим его на орбиту (рис. 15). Образовавшуюся при пересечении двух эллипсов область удалим клавишей .
7. С помощью инструмент и клавиши выделим ненужные части малого эллипса и удалим их. Таким образом, получилась траектория, имеющая начало и конец.
8. Выделим ближайшую часть траектории (см. рис. 16), скопируем ее (Edit — Copy) и вставим в то же место (Edit — Paste in Place) на отдельный слой с названием кусок. Сделаем этот слой невидимым, щелкнув по точке под значком на панели слоев.
9. Выделим все части траектории и при нажатой правой клавише мыши выберем команду Cut (Вырезать) и поместим на отдельный слой с названием орбита в то же самое место (Edit — Paste in Place).
10. Над слоем орбита создадим слой с именем спутник. На нем создадим объект “спутник”, который будет являться клипом. Для этого выполним команду Insert — New Symbol (Вставка — Новый символ), указываем тип символа Movie clip (Клип), а имя даем спутник. В режиме редактирования нарисуем окружность без контура, выберем заливку, при этом не забудем, чтобы центр объекта совпал с точкой регистрации (“+”), иначе спутник не будет привязан к орбите.
11. Возвратимся на сцену, перенесем символ спутник на рабочее поле и установим его в начальную точку на орбите, откуда он и начнет движение, — рис. 17.
12. Создадим анимацию движения спутника, для этого щелкнем правой клавишей мыши по ключевому кадру в слое спутник и в контекстном меню выберем пункт Create — Motion Tween (Создать — Анимация движения), переместимся, например, на 40-й кадр и в том же меню выберем команду Insert — Keyframe (Вставка — Ключевой кадр). Появится горизонтальная стрелка, свидетельствующая о создании анимации. В последнем ключевом кадре переместим спутник в конечную точку траектории и сделаем его по размеру меньше (см. рис. 18).
13. Во всех остальных слоях сделаем такую же длину фильма, для этого просто нажмем клавишу F6.
Если сейчас запустить фильм, то спутник “побежит” в конечную точку кратчайшего пути. Чтобы спутник двигался по всей траектории, создадим над слоем спутник специальный направляющий слой (Guide), щелкнув по пиктограмме (Add Motion Guide) в нижней части панели слоев. И уже на этот слой перенесем кадры со слоя орбита.
Последовательность слоев фильма на временной шкале показана на рис. 19.
Протестируем фильм (нажав комбинацию клавиш + ), а затем усовершенствуем его.
14. Сделаем так, чтобы спутник скрывался, проходя по соответствующей части орбиты. Для этого надо создать хотя бы в четырех слоях спутник новые ключевые кадры (например, 21-, 25-, 27-й и 29-й — рис. 20) и изменить прозрачность спутника на панели Properties (Свойства), выбрав в списке Color (Цвет) значение
Alpha (см. рис. 21) и установив в указанных кадрах значение прозрачности, соответственно, 68, 57, 28 и 9%.
15. Чтобы скрыть невидимую часть орбиты, следует поменять местами слои планета (он должен быть выше) и орбита. Направляющий слой Guide должен быть невидимым, а слой кусок, наоборот, видимым, т.е. на временной линейке это будет выглядеть как на рис. 22–23. Необходимо изменить цвет участка орбиты на слое кусок (аналогично п. 7).
16. Усовершенствуем нашу “планету”. Скроем временно все слои, кроме слоя планета. Выберем инструмент
панели инструментов Tools. Он позволяет изменить заливку.
Щелкнем по первому ключевому кадру слоя планета, затем по “планете” — появится окружность с маркерами, управляющими градиентом. “Подцепим” мышью центральный маркер и потянем градиент вниз по диагонали, примерно под 45 ° до точки касания с орбитой (см. рис. 24).
Такие же действия надо проделать в последнем кадре, только градиент в нем надо “тащить” вверх (см. рис. 25).
17. Осталось оформить анимацию. Для этого щелкнем по первому ключевому кадру слоя планета и на панели Properties (Свойства) в списке Tween (Анимация) выберем Motion (Движение).
18. Протестируем фильм.
Движение по заданной траектории
Flash позволяет задать движение объекта вдоль заданной траектории. Для того чтобы задать эту траекторию, выполните команду Insert => Timeline => Motion Guide.
В результате над текущим слоем появится специальный слой, который по умолчанию будет иметь имя Guide Layer 1.
Щелкнем мышью по слою траектории и с помощью инструмента «карандаш» нарисуем линию, вдоль которой планируется перемещение листка (рис. 15).
Рис. 15. Пример задания траектории движения
Теперь перейдем в первый кадр (щелкнем по нему мышью) и в появившейся панели Properties установим флажок Snap (задает режим привязки к траектории движения) — рис. 16.
Рис. 16. Параметр Snap задает режим привязки к траектории движения
После того как вы поставите флажок Snap, центр листа совместится с траекторией движения. Пользуясь инструментом Arrow, можно переместить листочек вдоль кривой движения, но если вы попробуете оторвать листок от траектории и расположить его рядом с ней, он будет притягиваться назад и вновь «прилипать» к траектории движения (рис. 17).
Рис. 17. Объект как бы прилипает к траектории движения своим центром
Перейдите на последний кадр и аналогично привяжите листок к конечной точке траектории движения. Для придания фильму объемности добавим трансформацию Flip Horizontal, — в результате получим фильм.
При движении листа вдоль траектории нам не важно, как он будет повернут в направлении движения. Но если мы аналогичным образом задаем траекторию полета птицы, то на некоторых участках кривой окажется, что птица летит хвостом вперед.
Очевидно, что если мы хотим анимировать полет самолета или птицы, то нам нужно, чтобы они все время двигались носом вперед. Во Flash такой характер движения задать очень просто (рис. 18).
Рис. 18. Если поставить флажок Orient to Path, птица будет лететь головой вперед
Необходимо поставить флажок Orient to Path, и движение птицы изменится на вполне привычное (исходник к данному ролику — полет птицы.fla).
Рис. 19. Добавление одноцветного фона
Если вы хотите добавить одноцветный фон, щелкните мышью по фону и в появившейся панели Properties (рис. 19) в поле Background выберите необходимый цвет фона.
Если мы хотим добавить фоновый рисунок, нам понадобится для этого отдельный слой. В принципе, программа Flash предлагает возможность создания системы слоев, сходной с теми, что используются в классической анимации, при которой фон и различные подвижные объекты рисуются каждый на своем слое прозрачной пленки.
Расположив фоновое изображение и каждый анимируемый объект на своем слое, добиться контроля над ними гораздо проще. Итак, для того чтобы добавить фоновый рисунок, создадим для него новый слой. Для этого щелкнем правой кнопкой мыши по слою, который на рис. 19 обозначен как layer 1, и в выпадающем меню выберем строку Insert layer. В добавленном слое нарисуем солнце. Чтобы не запутаться в номерах слоев, дадим слою название «фон». Для этого необходимо щелкнуть на текущем названии и ввести необходимое имя (рис. 20).
Рис. 20. На новом слое создадим неподвижный фоновый объект
Как видно из рис. 20, птица находится за солнцем, что противоречит здравому смыслу. Для того чтобы поменять местами слои, достаточно в режиме drag-and-drop перетащить слой с именем «фон» вниз.
Подредактируем объекты фильма (для того чтобы птица кружила на фоне солнца, изменим траекторию ее полета и поменяем соотношения размеров солнца и птицы) и получим следующий ролик.
Рис. 21. Для анимации облака создадим отдельный слой
Теперь добавим к нашей анимации подвижные объекты, например облако. Для облака создадим новый слой и на нем зададим анимацию трансформации движения. Для того чтобы облако влетало в сцену, расположим его, как показано на рис. 21. В результате получим следующий фильм (исходник к данному фильму находится в прилагаемом файле полет птицы-с облаком.fla).
Обращаем Ваше внимание, что в соответствии с Федеральным законом N 273-ФЗ «Об образовании в Российской Федерации» в организациях, осуществляющих образовательную деятельность, организовывается обучение и воспитание обучающихся с ОВЗ как совместно с другими обучающимися, так и в отдельных классах или группах.
Рабочие листы и материалы для учителей и воспитателей
Более 2 500 дидактических материалов для школьного и домашнего обучения
Столичный центр образовательных технологий г. Москва
Получите квалификацию учитель математики за 2 месяца
от 3 170 руб. 1900 руб.
Количество часов 300 ч. / 600 ч.
Успеть записаться со скидкой
Форма обучения дистанционная
- Онлайн
формат - Диплом
гособразца - Помощь в трудоустройстве
Видеолекции для
профессионалов
- Свидетельства для портфолио
- Вечный доступ за 120 рублей
- 311 видеолекции для каждого
Муниципальное бюджетное общеобразовательное учреждение
города Костромы «Гимназия № 15»
«Создание анимации в Macromedia »
Кайянен Ирина Александровна, учитель информатики
I РАЗДЕЛ Программа Macromedia Flash и ее возможности …………… 4 с.
II РАЗДЕЛ Создание анимации в Macromedia Flash……… …………….. 7 с.
СПИСОК ЛИТЕРАТУРЫ ……………………………………… …………. 11 с.
Тема проекта и её актуальность: Создание анимации в Macromedia .
В современном мире анимация занимают важное место, оказывая влияние на развитие различных областей ее применения. Анимация предоставляет своим создателям широкие возможности в экспериментах, связанных с поиском новой художественной образности, с созданием новых и соединением уже исследованных разнообразных техник, с применением новейших достижений науки. Возрастающее число анимационных лент, выходящих в прокат, анимационных роликов, появляющихся в цифровых сетях и на телевидении.
Этот проект имеет информационный интерес, так как рассказывает о методах создания анимационных роликов в программе Macromedia Flash , что в наше время достаточно актуально
Программное средство Macromedia Flash MX позволяет интегрировать видео-, аудио-, текстовую и графическую информацию. Дает возможность подготавливать презентации, интерактивные обучающие программы и пользовательские интерфейсы различных приложений. А также с применением Flash-технологий разрабатываются Web-сайты, обеспечивающие совместимость различных платформ.
Гипотеза работы: каждый может научиться создавать мультфильмы, проявляя своё воображение и творческие способности.
Цель проекта:
Раскрыть возможности и особенности использования компьютерной анимации, н аучиться создавать анимацию самостоятельно в программе Macromedia Flash.
1. Познакомиться с технологией создания анимационных роликов.
2. Научить основам работы с программой «Macromedia Flash».
3. Создать анимационный ролик.
Этапы работы над проектом:
1. Определить направление работы и выбрать руководителя проекта.
2. Найти актуальные проблемы, тему проекта, обосновать актуальность и практическую значимость темы, разработать паспорт проекта.
3. Проанализировать источники информации, подготовить введение и 1-ю главу с выводами.
4. Провести исследование или разработку проекта, сформулировать его описание во 2-ой главе.
5. Подготовить заключение, приложения, оформить описание исследования, сформулировать тезисы для выступления, выполнить электронную презентацию.
6. Подготовить речь для защиты итоговой версии электронной презентации проекта.
7. Защита проекта.
РАЗДЕЛ I . Программа Macromedia Flash и ее возможности.
Анимация (animation) - производное от латинского "anima" - душа, следовательно, анимация означает одушевление или оживление. В ходе работы над проектом по информатике на создание анимаций использованы такие методы исследования, как анализ источников информации, сравнение, опрос. Сравнение различных технологий необходимо для выбора наиболее доступных для младшего школьного возраста программ, в которых можно оживить разные истории. Разработанные алгоритмы позволят описанные технологии изучать как самостоятельно дома, так и на уроках информатики и во внеурочной деятельности. В этом практическая значимость проекта.
Macromedia Inc. — один из крупнейших производителей программ, так или иначе связанных с WEB. Приобретена компанией Adobe 5 декабря 2005 года. Macromedia Flash – это инструмент для создания анимированных объектов (изображений, схем навигации, динамических web-узлов, игр, проигрывателей, мультфильмов, музыкального видео и т. д.) на основе векторной графики со встроенной поддержкой интерактивности, для создания веб-приложений или мультимедийных презентаций рекламных баннеров , анимации,видеороликов. Это позволило добавлять в проекты движение, звук и интерактивность объектов.. Macromedia Flash интенсивно используется дизайнерами и веб-художниками как очень простое в использовании и при этом позволяющее создавать разнообразные веб-проекты со звуковой анимацией.
Изначально программа Flash предназначалась для создания быстро загружаемой веб-анимации. Но, постепенно развиваясь, Flash становился все более эффективным и мощным. В настоящее время Flash широко используется для анимирования изображений, но наряду с этим его можно применять и для решения более сложных интерактивных задач. Технология базируется на векторной графике. Программа имеет свой язык программирования Action Script. Загрузка программы возможна на множестве платформ и поддерживается многими операционными системами, она широко используется как новичками, так и профессионалами для работы. Доступно множество дополнений для программы, возможно самостоятельное создание возможных ресурсов.
Возможности видеоредактора:
- Новый и улучшенный метод рисования.
- Коллекция новых градиентов.
- Улучшенный, более понятный интерфейс.
- Поддержка нового формата видео.
- Новые фильтры для графики.
- Улучшенная обработка изображений.
Основные инструменты для работы:
· Use device fonts (различный выбор шрифтов).
· bitmap text(no anti-alias) - символы растеризуются исходя из указанного размера текста и используются полученные спрайты.
· Аnti-alias for animation - анти-алиасинг заточенный под анимацию.
Это панель монтажного слоя и таймлайна, что позволяет увидеть покадровую рисовку анимации на шкале времени. Возможность добавить новый слой, изменить частоту обновления кадров и сохранения анимации. Редактирование указанного слоя.
Панель инструментов:
· Перемещение и выделение объектов
· Построение линий и фигур
· Кисти и другие материалы для рисования
· Изменение масштаба и свободное перемещение
Теперь каждый объект на рабочем поле или в библиотеке имеет свою собственную историю изменений и вернуть их можно отдельно, не меняя других действий (мне почему то казалось, что в предыдущей версии флэша что- то похожее уже было).
Редактор плавности движения: Редактируется только скорость движения и положение объекта строго между пунктом а и б. Итак, рядом с (параметром кейфрэйма) Ease появилась кнопочка, расширяющая шкала X - последующие кадры возможности Ease: до следующего ключевого кадра, шкала Y - процент пути для каждого параметра (Position, Rotation, Scale, Color, Filters) можно задавать свои кривые
- Drop Shadow
- Blur
- Glow
- Bevel
- Gradient Glow
- Gradient Bevel
- Adjust Color
- покадровая (“классическая”) анимация, когда автор сам создает или импортирует из других приложений каждый кадр будущего “мультика” и устанавливает последовательность их просмотра;
- автоматическое анимирование (так называемая tweened-анимация), при использовании которой автор создает только первый и последний кадры мультипликации, а Flash автоматически генерирует все промежуточные кадры; различают два вида tweened-анимации: анимация, основанная на перемещении объекта (motion animation), и анимация, основанная на трансформации (изменении формы) объекта (shape animation);
- анимация на основе сценариев; сценарий представляет собой описание поведения объекта на собственном языке Flash, который называется ActionScript; синтаксис этого языка напоминает синтаксис других языков сценариев, используемых в Web-публикациях (например, JavaScript и VBScript).
- во-первых, автор избавлен от необходимости создавать каждый кадр в отдельности;
- во-вторых, для воспроизведения такого “мультика” Flash достаточно хранить только первый и последний кадры, что обеспечивает значительное уменьшение объема такого фильма.
- Вместе с тем, tweened-анимация пригодна для создания лишь наиболее простых сюжетов, в которых свойства объектов изменяются равномерно.
- С помощью сценариев на ActionScript можно описать достаточно сложное поведение объектов, однако. Однако для этого нужно изучить язык ActionScript.
- Другими словами, прежде чем приступить к созданию собственного “мультика”, следует определиться с выбором механизма его реализации.
Они позволяют изменить вид и цветокоррекцию исходной анимации не перерисовывая её. Так же с их помощью можно добавить различные эффекты, которые улучшат вид анимации и придадут ей новые краски. Возможность регулировать интенсивность, качество, угол и расстояние (дистанция) до объекта, задавать цвет (градиенты использовать нельзя).
Это панель управления кадром, где можно указать все эффекты для видео. Добавить какой-то новый объект в анимацию, изменить очерёдность кадров, время их движения, функции, разметку на экране вывода. С помощью оператора можно написать команды, которые будут выполняться при анимации, что позволяет не перерисовывать каждый кадр по отдельности, а перемещать его с помощью программирования. Так же в этой панели можно получить полную информацию о проекте, его характеристиках и возможности конвертирования.
Панель управления цветом позволяет выбрить цвет для изменения контура, заливки, изменения подложки для анимации. Можно выбрать градиент для фона, заливки. Изменить наложение цветов на рисунке, копировать подобный цвет и другое. Это позволяет проекту принять новые краски и текстуры, что придаст разнообразия и цветности изображению. Можно создать личный цветовой набор или цветовую палитру, чтобы использовать в дальнейшем.
РАЗДЕЛ II . Создание анимации в Macromedia Flash
Создание анимации поэтапно:
Запускаем программу Macromedia Flash. И выбираем : Create New > Flash Document.
Выполняем заливку
Следующим этапом создаем новый слой и делаем набросок нашего рисунка «Карандашом»
Далее создаем палитру основных цветов для нашего рисунка и делаем цветовые пятна.
Чтобы добиться размытого изображения можно изменить настройки кисти и ее опции. Для лучшего качества изображения можно загрузить дополнительные кисти из интернета, использование дополнительных ресурсов поможет разнообразить исходное изображение и принесёт много дополнительных возможностей для создания анимации.
Для того, чтобы картинка получилась более детально нужно использовать сочетание нескольких материалов.
На первом кадре важно прорисовать все возможные детали, ведь это будет основной подложкой под все наши последующие кадры анимации.
Следует разобрать часть, которая будет двигаться покадрово. На каждом новом слое необходимо задать новый контур и цвет.
Для добавления эффектов к слою, нажимаем на нем правую кнопку мыши и выбираем пункт:
Для добавления звука, импортируем файлы, выполнив команду: File > Import > Import to Library .
Выбираем файлы и нажимаем на кнопку: Открыть. В палитре Library появятся импортированные файлы.
В свойствах ( Properties ) добавляем из списка звуковой файл.
Главной целью моей исследовательской работы было изучение программы по созданию анимации Macromedia Flash и форматов графических файлов, а также создание своего собственного проекта. Просмотрев и изучив различные источники, я научилась работать с этой программой. Эта программа – оптимальный способ создать анимацию. В отличие от других программ, она проста в использовании и в ней легко разобраться самостоятельно. На интернет ресурсах есть дополнительные источники новых функций для программы, которые можно будет использовать в дальнейшем для разработки новых способов рисования.
Анимация – очень интересный, постоянно развивающийся вид информационных технологий. В данное время анимация популярна в сфере рекламы и других медиа, так как за небольшой промежуток времени можно создать хороший проект.
В процессе достижения поставленной цели проекта было рассмотрено, что такое анимация и изучена технология создания анимации. Для изучения этой сферы была выбрана программа Macromedia Flash . В первую очередь следовало познакомиться с программой и освоить основные функции, эффекты и возможности программы.
Все поставленные цели проекта были завершены по ходу работы. По итогам работы была найдена практическая значимость проекта, представлен ход работы и её результат . По ходу создания анимации я получила необходимые навыки для работы с данной программой, научилась создавать собственный продукт и смогу применить эти знания для дальнейшей работы.
Цель достигнута, все поставленные задачи решены, а гипотеза подтверждена.
Анимация во Flash основана на изменении свойств объектов, используемых в “мультике”. Например, объекты могут исчезать или появляться, изменять свое положение, форму, размер, цвет, степень прозрачности и т. д.
Если в рабочей области редактируется графическое содержимое, то в шкале времени фактически пишется сценарий флэш-фильма.
Линейка - отображает все кадры по возрастающей. Числом отмечен каждый пятый кадр.
Указатель шкалы времени - выполняет ту же функцию, что и инструмент Стрелка в рабочей области. Он выделяет кадр, для последующей с ним работы.
Чтобы выделить конкретный кадр, щелкните по нему левой клавишей мыши.
Наша анимация состоит из последовательности кадров. Кадр может быть как составленным вручную, так и сгенерированным Flash. Это относится к кадрам одного слоя. Так как сцены Flash состоят обычно из нескольких слоев, то итоговые "многослойные" кадры, могут содержать, как сгенерированные, так и "самодельные" слои.
Ключевой кадр - кадр доступный для обработки. В анимации этот кадр будет отображаться так, как нарисует пользователь. На временной шкале ключевой кадр отображается чёрным кружочком, если в нём есть изображение, и белым, если нет никакого рисунка.
Обычный кадр - кадр, который будет отображаться в анимации, но пользователь непосредственного участия в прорисовке кадра не принимал. Он будет таким же, как ключевой кадр слева или, если была проведена раскадровка, то кадр автоматически сформированный программой.
Раскадровка - автоматический переход изображения из одного ключевого кадра в другой.
Кадр-фантом - пустая клетка на временной диаграмме, в которой может быть установлен либо ключевой кадр, либо обычный кадр.
По кадровое формирование изображения.
Самое простое формирование анимации - это по кадровое изменение рисунка, т.е. на каждом кадре изменяется положение объекта, его характеристики, или добавляются новые и удаляются старые объекты.
Элементарные операции с кадрами:
Действие | Контекстное меню | Комбинация клавиш | Примечание |
Вставить пустой ключевой кадр | Вставить пустую клавиатуру | F7 | |
Ключевой кадр, повторяющий содержание предыдущего | Вставить клавиатуру | F6 | Если перед вставляемым кадром уже был ключевой кадр, содержащий объекты, то они будут скопированы в создаваемый кадр. |
Очистить ключевой кадр | Очистить клавиатуру | Shift-F6 | |
Вставить обычный кадр | Вставить кадр | F5 | Вставляя обычный кадр (не ключевой), увеличиваем время анимации или время отображения предыдущего ключевого кадра. |
Удалить кадр | Стереть кадры | Shift-F5 |
Покадровая анимация – это анимация, полностью составленная из ключевых кадров. Т.е. вы сами определяете, как содержимое кадра, так и его "длительность" (т.е. сколько таких статических кадров будет занимать изображение).
Достоинства: Покадровая анимация дает вам, в некотором смысле, больший контроль над анимацией, и если вы опытный аниматор, вы можете выгодно ею пользоваться. Это единственный способ организовать смену абсолютно независимых изображений – слайд-шоу (например, создавая обычный баннер средствами Flash).
И все остальное, что вытекает из возможности прорисовывать каждый кадр вручную.
Недостатки: Покадровую анимацию сложно модифицировать. Особенно, если это не дискретный набор изображений, а связанная анимация. Приходится модифицировать все кадры. На деле, у опытных Flasher-ов, такая ситуация практически не встречается.
Покадровая анимация занимает достаточно большой объем, так как приходится хранить информацию о каждом кадре.
Практическая работа № 1.
Создание покадровой анимации
Рассмотрим технологию покадровой анимации на примере создания анимированного заголовка "Анимация во Flash".
1. Выберите Документ Flash.
2. Выберите инструмент Стрелка и кликните левой клавишей мыши в первом кадре шкалы времени (Выбор кадра).
3. Выберите инструмент Текст и задайте параметры его модификаторов (тип шрифта, размер, цвет и пр.).
4. Кликните левой клавишей мыши в левом верхнем углу сцены, чтобы установить текстовую метку.
5. На клавиатуре наберите заглавную букву А.
6. Для того, чтобы в анимации буквы в разных кадрах располагались на одной линии, воспользуемся инспектором объектов. Для этого выберите инструмент Стрелка и кликните левой клавишей мыши на букве А. Чтобы оптимизировать площадь заголовка, задайте нулевые координаты в строках X и Y. Буква А будет размещена в самой верхней левой точке основной сцены.
7. Для формирования следующего кадра, в котором будет появляться новая буква, необходимо выполнить следующие действия: Кликните левой клавишей мыши в следующем пустом кадре шкалы времени. (Он станет темным).
8. Выберите Вставить клавиатуру или просто нажмите на клавиатуре клавишу F6. В кадре шкалы времени появится черная точка.
9. Выберите инструмент Текст и если это необходимо задайте новые параметры его модификаторов (тип шрифта, размер, цвет и пр.). Для лучшего усвоения технологии покадровой анимации будем рассматривать пример без изменения параметров модификаторов текста.
10. Кликните левой клавишей мыши рядом с предыдущей буквой, чтобы установить текстовую метку.
11. На клавиатуре наберите следующую букву.
12. Выберите инструмент Стрелка и кликните левой клавишей мыши на новой букве. С помощью этого же инструмента букву, как графический объект, можно перемещать.
13. Задайте нулевую координату в строке Y, для того, чтобы все буквы располагались на одной прямой.
Тестирование анимации
Для того чтобы протестировать полученную анимацию:
1. Выберите в главном меню Регулировака – Проверить клип или просто нажмите на клавиатуре клавиши Ctrl-Enter.
2. Просмотрев анимацию, нажмите левой клавишей мыши в правом верхнем углу окна тестирования кнопку Закрыть окно (Х).
Формирование оптимальной сцены анимации
Перед публикацией в Web обрежем все лишнее:
1. Выберите в главном меню Преобразовать – Документ или на клавиатуре нажмите клавиши Ctrl+J.
2. В открывшемся окне Характеристики документа нажмите на клавишу Содержимое.
В результате сцена примет размеры содержимого анимации.
3. Сохраните файл под именем pr_1.fla.
Анимация с построением промежуточных кадров
Гораздо эффективнее другой тип анимации, когда создаются только начальный и конечный кадры некоторого фрагмента, а все промежуточные кадры система достраивает сама. Такой тип анимации называется автоматический (tweened-анимация).
При этом способе анимации Flash автоматически строит промежуточные кадры между ключевыми кадрами, заданными вами. Это означает, что вы рисуете объект, потом на другом кадре производите изменения и просите Flash рассчитать те кадры, которые лежат между этими двумя ключевыми кадрами. Он выполняет эту работу, и вы получаете плавную анимацию.
Скорость и плавность анимации зависят от количества кадров, которые вы отводите под движение и скорости вашего Flash фильма. Скорость фильма можно изменить здесь: Выберите в главном меню Преобразовать – Документ или на клавиатуре нажмите клавиши Ctrl+J. В открывшемся окне Характеристики документа параметр Частота смены кадра задает количество кадров в секунду. Для качественной анимации скорость должна быть не меньше 25-30 кадров в секунду.
Плавность и длительность задается количеством кадров, отведенных на анимацию (ее фрагмент). Например, если скорость вашего фильма - 30 кадров/сек., и вам нужно совершить перемещение, скажем, самолетика, из одного угла картинки - в другой за 2.5 секунды, то на это движение вам нужно отвести 75 кадров.
Во Flash существует два варианта построения промежуточных изображений - motion tweening (анимация движения) и shape tweening (построение анимации на основе изменения формы). Эти способы отличаются в корне. Первый используется чаще всего, т.к. с помощью него можно построить подавляющее большинство анимации. Второй применяется в случаях, когда нужно плавное изменение формы.
Практическая работа №2. Анимация перемещения объекта
1. В левом верхнем углу нарисуйте квадрат.
2. Первый кадр шкалы времени видоизменился – окрасился в бледно-красный цвет, и в нем появилась жирная точка – признак того, что кадр стал ключевым.
3. Вызовете контекстное меню и выберите “Создать промежуточное изображение”.
4. Вызовете контекстное меню в кадре диаграммы времени, где предпочитаете закончить анимацию и выберите команду “Вставить клавиатуру”
5. С помощью инструмента “Средства Выделения” (V) переместите объект в новое положение, но в начале проверьте, что вы находитесь в последнем ключевом кадре.
6. Отмените выделение объекта, и нажмите Enter – объект пришел в движение.
7. Для замедления движения надо переместить влево конечный ключевой кадр, для ускорения – вправо. Выделите слой.
8. Нажмите и не отпускайте клавишу Ctrl. Наведите курсор на ключевой кадр – указатель превратился в двунаправленную стрелку.
10. Сохраните файл под именем pr_2.fla.
Практическая работа №3. Анимация изменения размера объекта
1. Создайте новый файл.
2. В 1-м ключевом кадре – создать промежуточное изображение.
3. Выберите время анимации и команду “Вставить клавиатуру”.
4. Измените размер объекта конечного ключевого кадра, используя инструмент “Свободная трансформация” (Q).
5. Протестируйте проект.
6. Сохраните файл под именем pr_3.fla.
Практическая работа №4. Анимация изменения цвета объекта
1. Создайте новый файл, нарисуйте новый объект и примените к нему правила создания анимации движения.
2. Находясь в конечном ключевом кадре выделите объект инструментом “Средства Выделения” (V). В результате в панели “Свойства” высветится поле “Цвет”. Выбрать вариант “Тон”, появятся дополнительные поля, с помощью которых можно выбрать цвет.
3. Сохраните файл под именем pr_4.fla.
Некоторые особенности анимации
Одновременно можно изменять несколько свойств объекта. Для этого в конечном ключевом кадре необходимо указать их новые значения, например, переместить объект и одновременно изменить его размер.
Можно задать анимацию, не изменяя ни одного свойства. В результате объект “замрет” на протяжении указанного промежутка времени
Практическая работа №5. Создание анимации постепенно исчезающий рисунок
Объект маленький квадрат, расположен в левом верхнем углу кадра; анимация включает в себя следующие пять шагов:
1. Квадрат увеличивается.
2. Квадрат движется направо строго горизонтально и останавливается у правой границе кадра.
3. Квадрат движется по направлению к левому нижнему углу, изменяя свой цвет, и останавливается в точности под своим увеличенным на 1-м шаге изображением.
4. Квадрат некоторое время стоит неподвижно.
5. Квадрат возвращается в исходное положение с изменением размера до первоначального.
Сохраните файл под именем pr_5.fla.
Практическая работа №6. Морфинг
Морфинг - это трансформация объектов. Например из квадрата может получится круг, а из круга, объект, который захотите.
1. Создайте новый файл.
2. Нарисуйте круг.
3. Выделите ключевой кадр и выберите на панели Свойства – Твин – Форма.
4. Выберите 20 кадр и нажмите F6.
5. Измените круг используя инструмент Выделение (заливку можно сделать другого цвета, получится очень красиво!).
Анимационные эффекты
Flash MX 2004 включает предварительно подготовленные анимационные эффекты (timeline-эффекты), которые позволяют создавать сложные анимации, используя минимальное количество действий. Вы можете применять функцию Timeline Еffects к следующим объектам:
• графические объекты, включая формы, сгруппированные объекты и графические символы;
Когда вы добавляете анимационные эффекты к объекту, Flash автоматически создает соответствующий слой и все трансформации движения и формы, необходимые для данного эффекта, реализуются в этом слое. Новый слой автоматически получает то же имя, что и эффект.
В качестве примера создадим эффект «взрыв» применительно к тексту. Для этого напечатаем некоторую фразу или слово (рис. 1), выделим его с помощью инструмента Arrow и выполним команду Insert => Timeline Effects => Effects => Explode.
Рис. 1. Выделенный текстовый объект
В результате появится одноименная панель (рис. 2), предоставляющая возможность настройки целого ряда параметров эффекта.
Рис. 2. Панель Explode
Наличие окна предпросмотра позволяет анализировать разные вариации эффектов, не покидая панели Explode. После того как вы выберете необходимые параметры, нажмите кнопку ОК и получите примерно такую анимацию.
Аналогично эффекты можно применить к растровому изображению. Рассмотрим пример с плавным исчезновением растровой картинки. Импортируем растровое изображение на сцену по команде File => Import => Import to stage (рис. 3) и применим эффект Вlur по команде Insert => Timeline Effects => Effects => Blur. В результате получим следующий ролик.
Рис. 3. Растровое изображение, импортированное на сцену
Для того чтобы отредактировать анимационный эффект, выделите на сцене объект, ассоциированный с эффектом, и в появившемся окне Properties нажмите кнопку Edit (рис. 4) — в результате появится панель Blur.
Рис. 4. Кнопка Edit находится внизу на панели Properties
В панели Blur можно вновь поменять параметры эффекта и сохранить новые настройки (рис. 5).
Рис. 5. Панель Blur позволяет поменять настройки эффекта
Рассмотрим простейший пример — листочек перемещается из одной точки экрана в другую с поворотом вокруг своей оси.
Рис. 6. Первый ключевой кадр анимации
Нарисуем кленовый листочек, например такой, как показано на рис. 6, — соответствующий кадр на панели Timeline окрасится в серый цвет и внутри него появится точка, указывающая на то, что это ключевой кадр. Ключевой кадр — это кадр, в котором происходит помещение содержимого или его изменение.
Рис. 7. Второй кадр создадим перетаскиванием и трансформацией первого
Затем щелкнем правой кнопкой мыши по соседнему кадру и вставим еще один ключевой кадр, используя команду Insert Keyframe. В результате в этом кадре появится копия листочка; переместим ее вниз (пользуясь инструментом Arrow) и повернем, используя команду Modify => Transform => Free Transform (рис. 7).
Повторим процедуру таким образом, чтобы в 6-м кадре лист занимал конечное положение (рис. 8).
Рис. 8. Последний кадр анимации
Обратите внимание на панель Properties (рис. 8) — в левой ее части указывается тип объекта. В каждом кадре листок является объектом типа Shape (форма), о других типах объектов будет рассказано чуть позже.
Для того чтобы экспортировать фильм в виде SEF-файла (родной формат Macromedia для Flash-фильмов), выполним команду File => Export => Export Movie. В результате получим следующий фильм (исходник к данному фильму находится в прилагаемом файле leave1.fla). Просмотреть получившийся фильм можно не покидая программы Flash по команде Control => Test Movie. Причем для того, чтобы просмотреть, какой объем занимают отдельные кадры фильма, следует выполнить команду . В результате мы увидим, что каждый из шести кадров занимает около 600 Кбайт (рис. 9). Таким образом, объем всего фильма составляет 3686 байт.
Рис. 9. Просмотр фильма в режиме Bandwidth Profiler
Для того чтобы оценить, много это или мало, рассмотрим, как аналогичный фильм можно сделать с помощью автоматической анимации, или анимации трансформации движения.
Виды анимации
В программе Macromedia Flash возможны следующие виды анимации:
— анимация движения (Motion Tween);
— анимация формы (Shape);
— анимация с использованием эффектов временной шкалы.
Рассмотрим каждый вид анимации отдельно.
Покадровая анимация
Покадровая анимация реализуется с помощью ряда последовательных ключевых кадров, каждый из которых должен быть создан “вручную” (рис. 3).
Анимация движения (Motion Tween)
При такой анимации происходит перемещение объекта из одного места в другое. Для ее создания нужно указать только начальный и конечный ключевые кадры, все промежуточные кадры будут определены программой автоматически. Рассмотрим поподробнее технологию создания такой анимации.
Нарисуем на рабочем поле окружность, на временной шкале первый кадр автоматически станет ключевым.
Щелкнем по ключевому кадру правой клавишей мыши и выберем команду контекстного меню Create Mоtion Tween (Создать анимацию движения). Вокруг окружности образуется голубая рамка, что означает, что объект сгруппирован. Затем выделяем на временной шкале, например, 30-й кадр (указываем длительность фильма) и при нажатой правой клавише мыши выбираем команду Insert — KeyFrame (Вставить ключевой кадр) — на временной шкале появляется горизонтальная линия со стрелкой на конце, что означает, что движение создано. Промежуточные кадры автоматически окрашиваются в голубоватый цвет.
Далее нужно переместить окружность в другое место и, наконец, протестировать фильм, нажав комбинацию клавиш + или выбрав команды Control — Test Movie (Управление — Тестирование фильма).
С помощью панели Properties (Свойств) можно задать также дополнительные параметры анимации:
— Rotate (Вращение) определяет направление вращения — по часовой стрелке (CW) или против (CWW), или нет вращения совсем (None). Возможно также значение Auto (объект поворачивается один раз в направлении поворота на наименьший угол);
— Easy (Замедление хода); если значение параметра положительное, то движение при анимации будет замедленным, если отрицательное — ускоренным;
— Orient to Path (Ориентация относительно пути) позволяет ориентировать движение объекта относительно заданной траектории и другие.
Анимация формы (Shape Tween)
Анимация формы позволяет плавно превращать один объект в другой. Применять ее можно только к несгруппированным объектам. Для изменения формы нескольких объектов их следует располагать на одном слое. Рассмотрим все на примере.
Нарисуем на рабочем столе окружность, выберем длину фильма в 30 кадров, для этого щелкнем мышью по 30-му кадру, вернемся в первый ключевой кадр и на панели Properties (Свойства) в списке Tween выберем режим Shape (Форма), появится горизонтальная линия со стрелкой на конце, промежуточные кадры окрасятся в зеленый цвет, это означает, что создана анимация формы, в последнем ключевом кадре вместо окружности нарисуем квадрат.
Протестируем фильм — увидим, как окружность плавно превращается в квадрат. Для указания конкретного характера изменения формы (перетекания точек одного объекта в точки другого) необходимо создать так называемые метки подсказки. С ними мы познакомимся позже на конкретном примере.
Анимация с использованием эффектов временной шкалы
В версии программы Macromedia Flash MX 2004 появилась возможность создать анимацию с помощью встроенных эффектов. Эффекты можно применять к текстам, фигурам, группам, графическим символам, растровым изображениям и кнопкам. Их можно использовать и для клипов, но в этом случае эффект встраивается в клип.
Для применения эффекта следует выделить объект и выполнить команду Insert — Timeline Effects (Вставка — Эффекты временной шкалы); далее выбираете тип эффекта: Assistants (Помощники), Effects (Эффекты), Transition — Transform (Переход — Трансформация). Эффекты группы Assistants не являются анимационными. Они просто либо создают дубликаты заданного объекта и размещают их на определенном расстоянии друг от друга, либо создают равномерное перетекание объекта в его дубликат.
После выбора эффекта появляется диалоговое окно, в котором можно установить параметры его проявления.
При создании эффекта автоматически создается слой, куда переносится объект (имя слоя совпадает с названием эффекта). На основе объекта создается графический символ, который записывается в библиотеку в папку Effects (Эффекты).
Читайте также: