Урок 25: Анимация формы
Цели урока:
формировать умение создавать анимацию формы;
развивать культуру речи, сосредоточенность; развивать познавательную и мыслительную деятельность учащихся, логическое и алгоритмическое мышление;
воспитывать самостоятельность, этику взаимоотношений.
Тип урока : урок усвоения новых знаний и умений.
Программное и методическое обеспечение урока : редактор Flash , § 20 учебника, раздаточный материал.
План урока:
Организационный момент
Проверка знаний предыдущего урока.
Объяснение нового материала.
Закрепление материала.
Подведение итогов и рефлексия.
Древо науки всеми корнями уходит в практику.
А.Н.Несмеянов
Ход урока
Организационный момент
Здравствуйте, ребята! Прежде чем начать наш урок я предлагаю пройти небольшой тест на настроение. У меня вот такое хорошее настроение (смайлик на слайде 1 ). А сейчас вы покажите всем, какое у вас (для этого сядьте за компьютеры и во Flash нарисуйте свое настроение). Молодцы! Сохраните ваше настроение. Мне бы очень хотелось, чтобы до конца или к концу нашего урока у всех было хорошее настроение.
Актуализация знаний
Фронтальная беседа с учащимися по следующим вопросам.
Ребята, чем мы с вами занимаемся на протяжении уже нескольких уроков? (учимся создавать анимацию)
Какую анимацию мы уже научились создавать? В чем их разница?
Всегда ли объекты движутся по прямой?
Приведите примеры не прямолинейного движения.
Как изменить названия слоя?
Как вставить ключевой кадр?
Как импортировать изображение в библиотеку?
Как открыть окно библиотеки?
Какая клавиша преобразовывает объект в библиотечный символ?
Какую анимацию мы создавали на прошлом уроке?
Теперь, давайте вспомним, алгоритм создания анимации движения. Для этого разделимся на две группы, каждая группа получает этапы (по одному на листочках). Ваша задача: выстроиться в порядке следования действий.
Алгоритм создания анимации движения.
Нарисовать или вставить объект в 1 кадре.
Преобразовать объект в библиотечный символ (F8) или сгруппировать.
Выделить на шкале времени последний кадр анимации. Нажать F6.
В последнем кадре анимации изменить перенести объект на новое место.
Нажать правую кнопку мыши: Создать движение
Изучение нового материала (метод проблемного изложения)
Как вы считаете, есть ли ограничение возможностей анимации движения?
Проблема: как можно анимировать превращение одного объекта в другой (например, яблоко в грушу).
Итак, тема нашего урока – Анимация формы . Сформулируем цели и задачи нашего сегодняшнего урока.
Анимация формы (Shape Tween) позволяет, как понятно из названия, анимировать изменение очертания изображения. Для ее создания не требуется, как при создании Motion Tween, преобразовывать рисунки в клипы. Достаточно:
создать рисунок, который нужно анимировать;
выделить кадр с рисунком щелчком левой кнопкой мыши по нему и на панели Properties (Свойства) в списке Tween выбрать тип Shape;
в том месте, где анимация должна закончиться, создать ключевой кадр. В него автоматически скопируется рисунок из начального кадра. Здесь рисунок можно изменить или нарисовать новый.
Анимация формы неприемлема к библиотечным объектам типа символ и сгруппированным объектам.
Анимация формы позволяет :
плавно трансформировать одну фигуру в другую;
плавно изменять цвет фигуры;
перемещать фигуру;
комбинировать перечисленные возможности.
Показать учащимся создание анимации формы на примере (видеоролик).
Алгоритм создания анимации формы.
Нарисовать объект в 1 кадре.
Выделить на шкале времени последний кадр анимации.
Нажать F6.
В последнем кадре анимации изменить форму объекта или нарисовать новый объект.
Выделить любой промежуточный кадр.
На панели Свойства Твин (Закрутка) выбрать: Форма (Shape ) (Фигур)
Ctrl + Enter – просмотреть анимацию.
Формирование практических умений учащихся (репродуктивный метод, индивидуальная форма работы)
Выполнить задания 1, 2, 3 на стр. 100-101 из рабочей тетради. Дополнительно задание 4 (любое) стр. 103.
Подведение итогов и рефлексия
Фронтальный опрос. Результаты опроса должны прояснить, какие моменты вызывают затруднения у учащихся.
Вопросы для опроса.
1. Что понимают под анимацией формы?
2. Перечислите этапы создания анимации формы.
3. К каким объектам неприменима анимация формы?
4. С каким настроением вы уходите с урока?
Для этого откройте свой файл с настроением, который создали в начале урока, в 30 кадре изобразите ваше настроение на конец урока и создайте анимацию формы. Продемонстрируйте его друг другу.
Спасибо за урок!!!
Что такое анимация. Временная шкала. Ключевые кадры. Операции с кадрами. Виды анимации. Покадровая анимация. Анимация движения. Анимация формы. Анимация с использованием эффектов временной шкалы
Анимация - это иллюзия движения, создаваемая с помощью ряда последовательных неподвижных изображений, незначительно отличающихся друг от друга. Еще в эпоху Возрождения было замечено, что при быстрой смене изображений создается эффект движения.
Для создания анимации используется временная шкала (Timeline ), на которой располагаются все кадры, а также “головка воспроизведения кадров” - небольшой закрашенный прямоугольник в области временной шкалы с номерами кадров (см. рис . 1). При проигрывании фильма головка автоматически перемещается.
Кадры бывают ключевыми и статическими. В ключевых кадрах, как правило, и содержится изображение (они определяют содержание фильма). Такие кадры обозначаются черными кружочками 1 . Остальные кадры - статические (они проигрываются как бы “впустую”).
Рис . 1
Настройка временной линейки осуществляется с помощью кнопки , которая имеет следующие режимы:
- Tiny (Очень маленький);
- Small (Маленький);
- Normal (Нормальный);
- Medium (Средний);
- Large (Большой).
С кадрами можно выполнять различные операции (копировать, удалять и др.). Для операций с отдельным кадром достаточно предварительно щелкнуть на нем мышью, с несколькими последовательными кадрами - их необходимо выделить, щелкнув сначала по первому из них, а затем при нажатой клавише - по последнему.
Сделать некоторый кадр ключевым можно с помощью функциональной клавиши F6 или используя главное меню - команды Insert - Timeline - KeyFrame (Вставка - Временная шкала - Ключевой кадр).
Для удаления кадра (кадров) необходимо после его (их) выделения выбрать в контекстном меню пункт Remove Frames (Удалить кадры) или выполнить команды главного меню Edit - Timeline - Remove Frames (Правка - Временная линейка - Удалить кадры).
Для перемещения кадров их можно переместить мышью, как показано на рис . 2.
Рис . 2
Копирование кадров осуществляется с помощью контекстного (пункт Copy Frames (Копировать кадры)) или главного меню (Edit - Timeline - Copy Frames (Правка - Временная шкала - Копировать кадры)). Вставка скопированного кадра (скопированных кадров) выполняется аналогично с использованием команды Paste Frames (Вставить кадры). Естественно, нужно указать место вставки на временной шкале.
Для вставки статического и пустого ключевого кадра используются функциональные клавиши и соответственно.
По умолчанию анимация происходит при увеличении номеров кадров. Чтобы изменить направление анимации на обратное, необходимо выделить кадры и в контекстном меню выбрать пункт Reverse Frames (Обратить кадры). Можно также применить команды главного меню Modify - Timeline - Reverse Frames (Изменить - Временная шкала - Обратить кадры).
Виды анимации
В программе Macromedia Flash возможны следующие виды анимации:
Покадровая анимация;
Анимация движения (Motion Tween );
Анимация формы (Shape );
Анимация с использованием эффектов временной шкалы.
Рассмотрим каждый вид анимации отдельно.
Покадровая анимация
Покадровая анимация реализуется с помощью ряда последовательных ключевых кадров, каждый из которых должен быть создан “вручную” (рис . 3).
Рис . 3
Анимация движения (Motion Tween )
При такой анимации происходит перемещение объекта из одного места в другое. Для ее создания нужно указать только начальный и конечный ключевые кадры, все промежуточные кадры будут определены программой автоматически. Рассмотрим поподробнее технологию создания такой анимации.
Нарисуем на рабочем поле окружность, на временной шкале первый кадр автоматически станет ключевым.
Щелкнем по ключевому кадру правой клавишей мыши и выберем команду контекстного меню Create Mоtion Tween (Создать анимацию движения). Вокруг окружности образуется голубая рамка, что означает, что объект сгруппирован. Затем выделяем на временной шкале, например, 30-й кадр (указываем длительность фильма) и при нажатой правой клавише мыши выбираем команду Insert - KeyFrame (Вставить ключевой кадр) - на временной шкале появляется горизонтальная линия со стрелкой на конце, что означает, что движение создано. Промежуточные кадры автоматически окрашиваются в голубоватый цвет.
С помощью панели Properties (Свойств) можно задать также дополнительные параметры анимации:
- Rotate (Вращение) определяет направление вращения - по часовой стрелке (CW ) или против (CWW ), или нет вращения совсем (None ). Возможно также значение Auto (объект поворачивается один раз в направлении поворота на наименьший угол);
- Easy (Замедление хода); если значение параметра положительное, то движение при анимации будет замедленным, если отрицательное - ускоренным;
- Orient to Path (Ориентация относительно пути) позволяет ориентировать движение объекта относительно заданной траектории и другие.
Анимация формы (Shape Twee n)
Анимация формы позволяет плавно превращать один объект в другой. Применять ее можно только к несгруппированным объектам. Для изменения формы нескольких объектов их следует располагать на одном слое. Рассмотрим все на примере.
Нарисуем на рабочем столе окружность, выберем длину фильма в 30 кадров, для этого щелкнем мышью по 30-му кадру, вернемся в первый ключевой кадр и на панели Properties (Свойства) в списке Tween выберем режим Shape (Форма), появится горизонтальная линия со стрелкой на конце, промежуточные кадры окрасятся в зеленый цвет, это означает, что создана анимация формы, в последнем ключевом кадре вместо окружности нарисуем квадрат.
Протестируем фильм - увидим, как окружность плавно превращается в квадрат. Для указания конкретного характера изменения формы (перетекания точек одного объекта в точки другого) необходимо создать так называемые метки подсказки . С ними мы познакомимся позже на конкретном примере.
Анимация с использованием эффектов временной шкалы
В версии программы Macromedia Flash MX 2004 появилась возможность создать анимацию с помощью встроенных эффектов. Эффекты можно применять к текстам, фигурам, группам, графическим символам, растровым изображениям и кнопкам. Их можно использовать и для клипов, но в этом случае эффект встраивается в клип.
Для применения эффекта следует выделить объект и выполнить команду Insert - Timeline Effects (Вставка - Эффекты временной шкалы); далее выбираете тип эффекта: Assistants (Помощники), Effects (Эффекты), Transition - Transform (Переход - Трансформация). Эффекты группы Assistants не являются анимационными. Они просто либо создают дубликаты заданного объекта и размещают их на определенном расстоянии друг от друга, либо создают равномерное перетекание объекта в его дубликат.
После выбора эффекта появляется диалоговое окно, в котором можно установить параметры его проявления.
При создании эффекта автоматически создается слой, куда переносится объект (имя слоя совпадает с названием эффекта). На основе объекта создается графический символ, который записывается в библиотеку в папку Effects (Эффекты).
Практическая часть
1. Проект “Движущийся человечек”.
2. Проект “Движение по замкнутой кривой”.
3. Проект “Превращение фигуры в букву”.
1. Проект “Движущийся человечек”
Создадим фильм, в котором средствами анимации движения (Motion Tween ) будет двигаться человечек.
Перед созданием проекта надо хорошо себе представить, из каких отдельных элементов будет состоять “герой нашего фильма”. Ведь каждая деталь должна двигаться при проигрывании фильма. Надо продумать и такой момент - какие элементы должны быть на переднем плане, а какие - на заднем. Для более наглядного представления желательно предварительно сделать рисунок на листе бумаги.
Итак, пусть наш человечек будет выглядеть так, как на рис . 4.
Рис . 4
Такое изображение можно получить из простейших фигур - окружностей, эллипсов и прямоугольников.
Приступим к рисованию. Нарисуем всего человека на одном слое, а затем распределим по слоям отдельные части, такая возможность в программе имеется. Сначала нарисуем голову (окружность) и командой Modify - Convert to Symbol (Изменить - Преобразовать в символ) преобразуем ее в символ, при этом примем тип (Behavior ) символа Movie clip (Символ-клип); назовем этот символ голова .
Затем создадим объект, который будет служить “телом”. Выполним команду Insert - New Symbol (Вставка - Новый символ) и установим параметры, как на рис . 5. После щелчка на кнопке OK попадаем в режим редактирования символа, рисуем прямоугольник (см. рис . 6а). Нужно обратить внимание на то, чтобы центр каждого нарисованного объекта в режиме редактирования совпадал с точкой регистрации, которая обозначается знаком “+”.
Рис . 5
Созданный символ попадает в библиотеку фильма. Переходим на сцену и переносим его в рабочую область.
Затем создаем таким же образом “бедро” (обратите внимание - прямоугольник нарисован со скругленными углами) и копированием получаем второй такой же элемент (рис . 6б). Так же получаем две голени и, наконец, башмачки (см. рис . 4). Имена всем символам дадим в соответствии с рис . 8.
В результате получился человечек! Пусть вас не волнуют красота и правдоподобие рисунка, нам важнее всего понять идею анимации и воплотить ее в фильме.
Рис . 6
Итак, человечек находится в первом ключевом кадре на одном слое. Распределим по слоям все составляющие его фигуры - для этого выполним команду Modify - Timeline - Distribute to Layers (Изменить - Временная шкала - Распределить по слоям) - см. рис . 7.
Рис . 7
В результате выполнения данной команды слои должны быть расположены так, как показано на рис . 8.
Рис . 8
Самым нижним слоем сделаем фон нашего фильма. Рисунок для него выберите на свое усмотрение.
После этого надо определиться с длиной фильма и указать те кадры, на которых будут показаны различные положения человека при движении. Для этого выберем следующие кадры: 5-, 9-, 13-й и 17-й. Это означает, что длина фильма будет составлять 17 кадров, а названные кадры следует сделать ключевыми (используя функциональную клавишу F6 во всех слоях, кроме слоя фон .
Теперь рассмотрим, как должны выглядеть эти ключевые кадры. В первом кадре рисунок должен быть таким, как на рис. 4, в 5-м - как на рис . 9а, в 9-м - как на рис . 9б, в 13-м - как на рис . 9в и в 17-м - как на рис . 9г.
а) б) в) г)
Рис . 9
Желательно в 5-м и 13-м кадрах слоев “тело” и “голову” немного приподнять для более реалистичного движения. Возможно, какие-то кадры вам придется подкорректировать.
После этого создадим анимацию движения в ключевых кадрах. С этой целью щелкнем по ключевому кадру правой клавишей мыши и в контекстном меню выберем команду Create - Motion Tween (Создать - Анимацию движения). В результате временная шкала примет вид, показанный на рис . 10.
Рис . 10
Фильм готов, и его можно протестировать.
2. Проект “Вращение спутника вокруг Земли”
Модель Земли со спутником на орбите изобразим в виде, показанном на рис . 11.
Рис . 11
Опишем основные этапы создания проекта, в котором используется анимация движения (Motion Tween).
1. С помощью панели Color Mixe r (Смеситель цвета) установим радиальную заливку, выбрав два цвета на градиентной шкале: зеленый и коричневый.
2. Нарисуем окружность без контура, с выбранной на этапе 1 заливкой, которая будет служить “Землей”. Слой назовем планета (рис . 12).
Рис . 12
3. Создадим фон (самый нижний слой), в качестве которого можно взять любую картинку, имитирующую небо.
4. Нарисуем (инструментом Oval ) траекторию орбиты в виде эллипса любого цвета без заливки, т.е. панель инструментов управления цветом (Colors ) будет выглядеть так, как на рис . 13.
Рис . 13
5. Для поворота траектории на 45 ° необходимо ее сгруппировать, так как при пересечении областей происходит разбиение фигуры на части. Выделим отдельные части траектории мышью при нажатой клавише . Для их группировки выберем команду Modify - Group (Изменить - Сгруппировать) - появилась голубая рамка. Повернем сгруппированный объект на 45 ° (см. рис . 11). Для этого можно воспользоваться панелью Transform (Трансформация), выполнив команду Window - Design Panels - Transform (Окно - Панели дизайна - Трансформация) и введя в поле Rotate (Поворот) значение угла –30 ° (рис . 14).
6. Затем вновь разобьем траекторию на отдельные части по команде Modify - Break Apart (Изменить – Разбить). Чтобы сымитировать движение по замкнутой траектории, необходимо указать точку начала движения и его окончания. Для этого нарисуем еще один эллипс меньшего размера и наложим его на орбиту (рис . 15). Образовавшуюся при пересечении двух эллипсов область удалим клавишей .
Рис . 15
7. С помощью инструмент и клавиши выделим ненужные части малого эллипса и удалим их. Таким образом, получилась траектория, имеющая начало и конец.
8. Выделим ближайшую часть траектории (см. рис . 16), скопируем ее (Edit - Copy ) и вставим в то же место (Edit - Paste in Place ) на отдельный слой с названием кусок. Сделаем этот слой невидимым, щелкнув по точке под значком на панели слоев.
Рис . 16
9. Выделим все части траектории и при нажатой правой клавише мыши выберем команду Cut (Вырезать) и поместим на отдельный слой с названием орбита в то же самое место (Edit - Paste in Place ).
10. Над слоем орбита создадим слой с именем спутник . На нем создадим объект “спутник”, который будет являться клипом. Для этого выполним команду Insert - New Symbol (Вставка - Новый символ), указываем тип символа Movie clip (Клип), а имя даем спутник . В режиме редактирования нарисуем окружность без контура, выберем заливку, при этом не забудем, чтобы центр объекта совпал с точкой регистрации (“+”), иначе спутник не будет привязан к орбите.
11. Возвратимся на сцену, перенесем символ спутник на рабочее поле и установим его в начальную точку на орбите, откуда он и начнет движение, - рис . 17.
Рис . 17
12. Создадим анимацию движения спутника, для этого щелкнем правой клавишей мыши по ключевому кадру в слое спутник и в контекстном меню выберем пункт Create - Motion Tween (Создать - Анимация движения), переместимся, например, на 40-й кадр и в том же меню выберем команду Insert - Keyframe (Вставка - Ключевой кадр). Появится горизонтальная стрелка, свидетельствующая о создании анимации. В последнем ключевом кадре переместим спутник в конечную точку траектории и сделаем его по размеру меньше (см. рис . 18).
Рис . 18
13. Во всех остальных слоях сделаем такую же длину фильма, для этого просто нажмем клавишу F6.
Если сейчас запустить фильм, то спутник “побежит” в конечную точку кратчайшего пути. Чтобы спутник двигался по всей траектории, создадим над слоем спутник специальный направляющий слой (Guide ), щелкнув по пиктограмме (Add Motion Guide ) в нижней части панели слоев. И уже на этот слой перенесем кадры со слоя орбита.
Последовательность слоев фильма на временной шкале показана на рис . 19.
Рис . 19
Протестируем фильм (нажав комбинацию клавиш + ), а затем усовершенствуем его.
14. Сделаем так, чтобы спутник
скрывался, проходя по соответствующей части
орбиты. Для этого надо создать хотя бы в четырех
слоях спутник
новые ключевые кадры (например,
21-, 25-, 27-й и 29-й - рис. 20) и изменить прозрачность
спутника на панели Properties
(Свойства), выбрав в
списке Color
(Цвет) значение
Alpha
(см. рис
. 21) и установив в
указанных кадрах значение прозрачности,
соответственно, 68, 57, 28 и 9%.
Рис . 21
15. Чтобы скрыть невидимую часть орбиты, следует поменять местами слои планета (он должен быть выше) и орбита . Направляющий слой Guide должен быть невидимым, а слой кусок, наоборот, видимым, т.е. на временной линейке это будет выглядеть как на рис . 22–23. Необходимо изменить цвет участка орбиты на слое кусок (аналогично п. 7).
Рис . 22
Рис . 23
16. Усовершенствуем нашу “планету”. Скроем временно все слои, кроме слоя планета . Выберем инструмент
панели инструментов Tools. Он позволяет изменить заливку.
Щелкнем по первому ключевому кадру слоя планета , затем по “планете” - появится окружность с маркерами, управляющими градиентом. “Подцепим” мышью центральный маркер и потянем градиент вниз по диагонали, примерно под 45 ° до точки касания с орбитой (см. рис . 24).
Рис . 24
Такие же действия надо проделать в последнем кадре, только градиент в нем надо “тащить” вверх (см. рис . 25).
Рис . 25
17. Осталось оформить анимацию. Для этого щелкнем по первому ключевому кадру слоя планета и на панели Properties (Свойства) в списке Tween (Анимация) выберем Motion (Движение).
18. Протестируем фильм.
3. Проект “Превращение прямоугольника в букву”
В данном проекте прямоугольник превращается в букву, т.е. применяется анимация формы.
1. На слое, который назовем прямоугольник , нарисуем прямоугольник без контура, а рядом напишем букву, например, Е (рис . 26).
Рис . 26
2. Разобьем букву на части по команде Modify - Break Apart (Изменить - Разбить).
3. Наложим букву на прямоугольник, после чего нажмем на пиктограмму
на панели инструментов и растянем букву по высоте и ширине прямоугольника так, как показано на рис . 27.
Рис . 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).
Рис . 28
Добавим еще одну метку - для этого правой клавишей мыши щелкнем по имеющейся метке и в контекстном меню выберем команду Add Hint (Добавить подсказку), снимем выделение, щелкнем по красной метке (с буквой b ) и перетащим ее мышью в верхний правый угол прямоугольника (см. рис . 29).
После этого перейдем на последний ключевой кадр. Щелкнем мышью по белому рабочему полю и только потом перенесем красную точку на то же место в правый верхний угол буквы Е .
Аналогичным образом создадим еще две метки (см. рис . 30) на прямоугольнике и укажем их место на букве.
Рис . 30
Протестируем фильм.
Примечание . Знакомство с эффектами временной шкалы можно предложить учащимся провести самостоятельно.
1 Возможны также “пустые” ключевые кадры. Они обозначаются не закрашенным кружочком. - Прим. ред.
Экспресс-план модуля:- Расчётная анимация типа Shape
- Звуковые форматы
- Озвучивание анимации
Расчётная анимация типа Shape
Анимация типа Shape (форма) позволяет создавать эффекты — метаморфозы, заставляя одну форму «перетекать» в другую. При этом Flash позволяет изменять координаты объекта, его размер и цвет.
Используя этот тип анимации, вы должны помнить, что Flash будет работать только с графическими примитивами (линиями и заливками) и не сможет анимировать группы, символы, блоки текста или растровые изображения. Для того, чтобы всё-таки использовать эти элементы в своей работе, вам необходимо будет разбить их на части (примитивы), используя команду Modify > Break Apart.
Для изучения этого типа расчётной анимации смоделируем метаморфозу, при которой круг будет превращаться в квадрат, в процессе превращения фигура будет двигаться, изменять свой цвет и размер.
Итак, создайте новый документ размером 100x300 px, назовите его metaphor и сохраните на диске.
В первом кадре ролика с помощью инструмента Oval в верхней части сцены нарисуйте круг. Затем перейдите на 20 кадр и сделайте его ключевым. В нижней части сцены на 20 кадре нарисуйте квадрат с помощью инструмента Rectangle, а круг, выделив предварительно инструментом Arrow, удалите. Размер нарисованного вами квадрата должен превышать размер круга. Цвета круга и квадрата подберите самостоятельно, установить фигуры на одной вертикали вы сможете, используя палитру Info.
После того как вы обыграете все эти моменты, вернитесь к 1 кадру и, обратившись к палитре Properties, в разделе Tween установите значение Shape. Обратите внимание, что пространство слоя на палитре Timeline между 1 и 20 кадром залилось светло-салатной краской и от 1 к 20 кадру, протянулась стрелочка. Если вместо стрелочки на палитре протянулась пунктирная линия, это значит, что вы что-то сделали неправильно, например, использовали в своей работе не графические примитивы, а группу или символы…
Протестируйте свой ролик, используя команду Control > Test Movie.
Поэкспериментируйте с палитрой Timeline. Вы можете управлять характером движения, используя уже знакомый вам из материала предыдущей лекции раздел Ease, а также определять характер способа трансформации формы в процессе её метаморфозы. Для этого вам необходимо будет обратиться к разделу Blend (переход), здесь вашему вниманию будут предложены два варианта:
Distributive (размазанный) — контуры линий и заливок в промежуточных кадрах будут сглажены.
Angular (угловатый) — контуры линий и заливок в промежуточных кадрах будут сохранять очевидные углы и прямые линии.
Обратите внимание на палитру Timeline этого ролика, его анимация несколько отличается от приведённого выше описания, я думаю, что, внимательно изучив характер движения фигуры, вы сможете самостоятельно разобраться в содержании верхнего слоя, на котором представлена анимация.
Примечания:
В данной работе частота кадров составляет 24 fps
!
Анимация сопровождается звуком. Для того, чтобы его многократное повторение не походило на агрессивную звуковую атаку, при выполнении публикации, на закладке HTML я намеренно убрала галочку в разделе Loop. Сделано это было, для того, чтобы браузер проиграл ролик только один раз! Если вы хотите просмотреть ролик ещё раз, воспользуйтесь панелью инструментов браузера и обновите страницу. И ещё, на будущее: к использованию звуковых фрагментов в ваших роликах следует относиться очень серьёзно.
Во-первых: звук очень много «весит». Во-вторых: если вы не можете управлять звуком программно, то есть не предоставляете пользователю возможность в любой момент выключить или включить звук, то в зацикленных роликах, например, рекламных баннерах использовать его вообще не стоит. Однако мультипликация и некоторые интерактивные элементы без звука просто немыслимы. Поэтому в рамках этой лекции мы остановимся на этом подробнее, а пока обратите внимание, что для звукового фрагмента на палитре Timeline выделен отдельный слой.
В этом ролике имеется ещё один слой — background (нижний слой), на этом слое расположены статические элементы — декорации.
Управление изменениями формы с помощью Shape Hint (узловых точек формы)
Для управления более сложными изменениями формы используются так называемые Shape Hints (узловые точки формы), которые определяют, как фрагменты первоначальной формы будут перенесены в новую форму. Другими словами, узловые точки используются для идентификации тех точек исходной формы, взаимное расположение которых требуется сохранить это своего рода бисеринки, фиксирующие некоторые элементы изображения. Наиболее характерный пример использования узловых точек — анимация мимики лица, при которой некоторые его части (например, глаза) не должны участвовать в трансформации.
Узловые точки обозначаются на изображении небольшими кружочками с буквами. Буквы (от а до z ) используются в качестве имён (идентификаторов) узловых точек. Каждой узловой точке на исходном изображении должна соответствовать точка с тем же именем на результирующем изображении. Всего для одной фигуры может быть использовано не более 26 узловых точек (по числу букв алфавита). Узловые точки на исходном изображении окрашены в жёлтый цвет, на результирующем в зелёный.
Для расстановки узловых точек требуется выполнить следующие действия:
- Щёлкните левой кнопкой мыши в кадре, соответствующем исходному изображению.
- Обратитесь к меню Modify > Shape > Add Shape Hint (модифицировать > форма > добавить узловую точку) в результате на сцене в вашем кадре появится «заготовка» первой узловой точки — кружочек красного цвета с буквой а .
- Переместите его мышью с помощью инструмента Arrow при включенном модификаторе Snap to Objects на ту точку изображения, которую вы хотите пометить как узловую.
- Щёлкните левой кнопкой мыши на кадре, соответствующем результирующему изображению, на сцене также будет присутствовать красный кружочек с той же буквой, что и в исходном кадре.
- Переместите кружочек в точку изображения, которая должна соответствовать отмеченной в исходном кадре, после перемещения кружочек изменит цвет на зелёный.
- Вернитесь к первому кадру и убедитесь, что цвет узловой точки изменился на жёлтый.
Если требуется продолжить расстановку узловых точек, повторите описанные выше действия.
Примечания:
Если вы используете при трансформации несколько узловых точек, то выполняйте их расстановку по часовой стрелке, начиная с левого верхнего угла изображения. Это обусловлено тем, что Flash обрабатывает узловые точки в алфавитном порядке.
В процессе расстановки узловых точек целесообразно периодически тестировать свой ролик. Чтобы изменить положение узловой точки, достаточно просто перетащить её на новое место (это можно сделать как на первом, так и на последнем кадре последовательности). Кроме того, всегда можно удалить лишние точки или добавить новые. Если результаты работы вас вполне устраивают, можете спрятать узловые точки. Все перечисленные операции удобнее всего выполнять с помощью контекстного меню. Чтобы его открыть, щёлкните на одной из узловых точек правой кнопкой мыши. Меню содержит четыре команды, из которых первые три доступны только для узловых точек исходного изображения:
Add Hint
(добавить узловую точку) — при выполнении команды на сцене появляется заготовка новой узловой точки.
Remove Hint
(удалить узловую точку) — узловая точка, на которой вы щёлкнули правой кнопкой мыши, открывая меню, будет удалена.
Remove All Hints
(удалить все узловые точки) — удаление всех узловых точек.
Show Hints
(показать узловые точки) — данный режим используется по умолчанию (рядом с именем команды стоит галочка). Повторный её выбор приведёт к тому, что узловые точки станут невидимыми. Этот вариант следует использовать только после достижения требуемого результата, поскольку для возврата в режим показа узловых точек вам придётся снова обратиться к меню Modify > Shape > Add Shape Hint.
Обратите внимание на анимационные flash-ролики представленные в этой лекции, в первом случае мишка коала превращается в филина без использования узловых точек, во втором случае мы управляем анимацией, используя три пары узловых точек.
Звуковые форматы
Звук представляет собой упругие волны, распространяющиеся в газах, жидкостях и твёрдых телах и воспринимаемые ухом человека и животных. Человек слышит звук с частотами от 16 Гц до 20 кГц. Звук с частотами до 16 Гц называют инфразвуком, 2·10 4 —10 9 Гц — ультразвуком, а 10 9 —10 13 Гц — гиперзвуком. В процессе оцифровки звука производится запись всех его волновых характеристик. Такая запись именуется импульсно-кодовой модуляцией и представляет собой последовательную запись дискретных значений. Разрядность устройства, исчисляемая в битах, говорит о том сколькими значениями одновременно в одном записанном дискретном фрагменте, берётся звук. Чем больше разрядность, тем больше звук соответствует оригиналу. Любой звуковой файл можно представить как базу данных. Она имеет свою структуру, о параметрах которой указывается обычно в начале файла. Потом идёт структурированный список значений по определённым полям. Иногда вместо значений стоят формулы, позволяющие уменьшать размер файла.
Познакомимся поближе с теми форматами звуковых данных, которые мы чаще всего будем использовать при озвучивании роликов в Macromedia Flash.
WAV (waveform) — дискретный формат, предназначенный для хранения и передачи аудиосигнала в цифровой форме, отличается высокой степенью качества и, к сожалению, неимоверным размером. В формате wav могут сохраняться стерео- или монофонические файлы с разрядностью выборки 8 или 16 бит. Помимо обычных дискретных значений, битности, количества каналов и значений уровней громкости в wav может быть указано еще множество параметров: метки позиций для синхронизации, общее количество дискретных значений, порядок воспроизведения различных частей звукового файла, а также есть место для того, чтобы вы смогли разместить там текстовую информацию.
MP3 (MPEG Layer3) — потоковый формат, предназначенный для хранения и передачи аудиосигнала в цифровой форме, отличается высокой степенью компактности. Используется главным образом для передачи аудио в реальном времени по сетевым каналам и для кодирования CD Audio. Термин «потоковый» означает, что передача данных происходит потоком независимых отдельных блоков данных — фреймов. Для этого исходный сигнал при кодировании разбивается на равные по продолжительности участки, именуемые фреймами и кодируемые отдельно. При декодировании сигнал формируется из последовательности декодированных фреймов. Ширина потока (bitrate) при кодировании сигнала, аналогичного CD Audio (44.1kHz 16Bit Stereo) обозначает общую величину потока — количество передаваемой за единицу времени информации. Эта величина варьируется от 320kbs (320 килобит в секунду, также пишут kbs, kbps или kb/s), до 96kbs и ниже.
Озвучивание анимации
Чтобы добавить звук к фильму, необходимо выполнить следующие действия:
Импортируйте в фильм один или несколько звуковых файлов в формате wav или mp3. Для этого обратитесь к меню File > Import (файл > импорт). Файлы будут автоматически размещены в библиотеке вашего ролика в виде символов. Откройте библиотеку ролика, используя меню Window > Library, и убедитесь в этом.
Создайте на палитре Timeline новый слой и разместите на нём звуковой фрагмент, используя символы в вашей библиотеке — перетащите его из библиотеки на сцену. «Разверните» звук — добавьте кадры (не ключевые), используя команду Insert Frame, таким образом, чтобы на палитре в этом слое волновая форма звука была полностью развёрнута. Flash позволяет создавать несколько звуковых слоев, и каждый из них будет работать подобно отдельному звуковому каналу. Это означает, что при воспроизведении фильма звуки на разных слоях, совпадающие во времени, воспроизводятся одновременно.
Перейдите на первый кадр слоя со звуком и обратитесь к палитре Properties разделу Sound (звук). Если в вашей библиотеке размещено несколько звуковых фрагментов, то, используя ниспадающий список этого раздела, вы сможете в любой момент заменить, выбранный вами звук, на какой-нибудь другой. В нижней части палитры вы видите исходные параметры звукового фрагмента: ширина полосы частот, моно/стерео, разрядность, длительность, занимаемый объём памяти.
В раскрывающемся списке Sync (synchronize — синхронизировать) выберите способ синхронизации звука:
Event (событие) — звук синхронизируется посредством привязки его к определенным событиям фильма, например по щелчку на кнопке. Звук, управляемый событием, воспроизводится с момента перехода к соответствующему ключевому кадру, и продолжается независимо от временной шкалы, даже если фильм будет остановлен (если, конечно, звук достаточно продолжителен).
Start (старт) — этот способ отличается от предыдущего тем, что при очередном наступлении заданного события начинается воспроизведение нового экземпляра звука, даже если воспроизведение предыдущего еще не закончено.
Stop (стоп) — воспроизведение указанного звука прекращается.
Stream (поток) — потоковый звук. Flash обеспечивает «насильственную» синхронизацию анимации и потокового звука (например, если кадры анимации не успевают воспроизводиться на Web-странице с той же скоростью, что и потоковый звук, Flash-плеер пропускает некоторые кадры). Воспроизведение потокового звука всегда прекращается при завершении анимации. Кроме того, потоковый звук никогда не продолжается дольше, чем воспроизводятся связанные с ним кадры анимации.
Число повторений звука можно задать в разделе Loop (циклы). Режим «бесконечного» воспроизведения не реализован, но его можно смоделировать, введя в этом разделе достаточно большое число.
Можно задать звуковые эффекты, воздействующие на громкость звука. Заранее подготовленные настройки выбирают в раскрывающемся списке Effect (эффект):
None — нет никаких эффектов, этот пункт следует выбрать в том случае если выбранные вами эффекты вам не понравились.
Left Channel
— запускает звук только в левом канале.
Right Channel
— запускает звук только в правом канале.
Fade Left to Right
— плавный переход звука между каналами слева на право.
Fade Right to Left
— плавный переход звука между каналами справа на лево.
Fade In
— постепенное увеличение амплитуды звука.
Fade Out
— постепенное уменьшение амплитуды звука.
Если требуется другой вид эффекта, следует выбрать в этом списке пункт Custom (другой), после чего произвести настройку при помощи панелей, на которых отображена волновая форма звука. При этом возможны следующие действия:
- На шкале, указывающей время воспроизведения звукозаписи, имеются вертикальные маркеры. Перетаскиванием этих маркеров можно отсечь ненужные фрагменты в начале и в конце звукозаписи.
- Переменную громкость звука можно задать при помощи специальных маркеров, располагающихся на панели волновой формы. Добавляя такой маркер (щелчком) или изменяя его положение (перетаскиванием), мы изменяем уровень громкости в определенные моменты. Всего может быть до восьми маркеров, которые соответствуют одним и тем же моментам времени на панелях левого и правого каналов. Громкость каналов в один и тот же момент времени может быть различной. Чтобы удалить маркер, его надо вытащить за пределы панели.
Другие элементы управления служат только для удобства работы. Так, изменить масштаб временной оси можно при помощи кнопок Zoom In и Zoom Out. Изменить способ представления шкалы времени можно при помощи кнопок Seconds (секунды) и Frames (кадры).
Если вы не располагаете собственной библиотекой звуковых фрагментов, вы можете воспользоваться библиотекой Macromedia Flash, для этого обратитесь к меню Window > Common Libraries > Sounds.
Запись и коррекция звукового фрагмента
В процессе работы над мультипликационным или интерактивным роликом у вас, безусловно, возникнет желание записать свой собственный музыкальный или речевой фрагмент. Итак, вы записали какой-то звук с помощью микрофона, и сохранили его как некий sound.wav.
Любой wav-файл имеет довольно большой размер, но это легко устранимый недочёт, ведь мы можем конвертировать его в mp3-файл с помощью PlayCentre , а также откорректировать этот фрагмент с помощью специальных программ, например, Sound Forge или Steinberg Wave Lab .
При записи с микрофона появляются паузы, до и после звукового фрагмента (например, слова). Появляется шум. Искажается голос. Все эти недочёты, используя перечисленные выше программы, сможет легко устранить даже новичок.
В этих программах звук представлен графически в виде волны. Поэтому здесь, мы можем, с хирургической точностью, отсечь ненужные нам части. Добавить различные эффекты, например, «А-ля Масяня», женский голос превратить в мужской голос, и вообще пофантазировать в своё удовольствие.
Домашнее задание: Основы создания анимации в Macromedia Flash MX
Во-первых, вам необходимо продублировать анимационные flash-ролики, представленные в материале этой лекции.
Во-вторых, создать ролик, позволяющий проиллюстрировать замечательные строки из стихотворения Сергея Александровича Есенина:
Ах, и сам я в чаще звонкой
Увидал вчера в тумане:
Рыжий месяц жеребенком
Запрягался в наши сани…
Итого: с вас четыре файла в формате fla (если суммарный размер файлов превысит 150 Кб, пожалуйста, упакуйте файлы в архив) и вышлите учителю.
Желаю Вам успехов в самостоятельном изучении Macromedia Flash MX!
Морфинг отличается от предыдущих типов анимации тем,что работает только исключительно с графическими(векторными) объектами,а не с символами.
Простой способ плавного изменения формы я думаю все встречали на сайтах по флеш(плавное перетекание квадратика в круг),
Это все графические элементы,не думаю,что кто-то будет это делать,интереснее смотреть на картинку в png,как она меняет форму,превращаясь в другую png,но морфинг с растром не работает.Следует выполнить определенный алгоритм действий.
Расскажу на своём примере.
Создаем документ,импортируем в библиотеку нужные нам картинки,заранее подготовленные по размеру и на прозрачном фоне.Сразу делаю акцент - картинка должна быть без градиентов,без теней и желательно не сильно пестрая(программа не сможет её просчитать),кто знает,что такое вектор,тот представляет,сколько плашечек оттенков цвета в какой-нибудь картинке,поэтому согласитесь,что программа Flash предназначена не для основной работы с вектором.
Итак, все загрузили в библ.,идём -вставка- создать символ- в самом символе с библ. вставляем картинку,выделяем,затем -модификация-растровое изображение-векторизация.
Откроется окошечко,если у вас стоит пороговое значение 100,исправьте на 10,а вот значение наименьшая область,можно поэкспериментировать,по умолчанию стоит 1,но это слишком долго прога будет просчитывать(каждую точку цвета),поэтому в зависимости,какая у вас картинка,насколько сложная по цвету,меняете это значение и смотрите,нажав предварительный просмотр,главное,чтобы не сильно исказилось качество,вот на моём примере,как бы 25 многовато,но качество сильно не пострадало,если устраивает результат,нажимаем ок.
Не снимая выделения,нажимаем -копировать
- 
и идем на монтажную сцену,выделяем 1 кадр и на сцене -вставить
.
Передвигать лучше стрелками на клавиатуре,или чтоб было выделено все изображение и стрелка показывала перекрестье,иначе сдвинете по кусочкам,это уже вектор,а не символ.
Выделяем первый кадр и выбираем -создать анимацию формы
,дальше примерно на 60 кадре вставляем пустой ключевой кадр.На шкале дорожка делается точками.
Повторяем действие со второй картинкой(вставка-создать символ-векторизация-...копировать...)
,возвращаемся на сцену,выделяем нужный кадр(у меня 60),
щелкаем по сцене и нажимаем -вставить
,на шкале дорожка меняется.
Я рассказала и показала простой пример,но дополнительно существуют еще инструменты редактирования при работе с морфингом,такие,как добавление хинтов(точек) для точного,плавного морфинга,изменение узловых точек,искажение,сглаживание... и т.д, если кому интересно могу расписать значение этих инструментов.
Проигрываем,смотрим.Вот получилась простая анимация формы.
В этом уроке я хочу рассказать начинащим изучать Flash, как можно сделать красивую анимацию формы на примере цифр. Урок сделан в Macromedia Flash 8.
Начнем с самого главного - анимация формы будет работать только в том случае, если вы оперируете графическими объектами.
Т.е. создав в нужных ключевых кадрах нужные, в нашем случае текстовые, объекты их нужно превратить в графические. Итак, начнем.
Создаем новый документ, указываем необходимые параметры (размер, цвет фона, частоту кадров). В моем примере размер 200х200, цвет фона белый, частота кадров 12.
Сразу указываем, что в первом кадре будет происходить анимация формы: на вкладке Properties, в выпадающем списке Tween, выбираем анимацию формы – Shape. В первом кадре с помощью инструмента Text Tool, кнопка T, мы пишем цифру 1. Для начала, чтобы было проще, выберите шрифт без засечек, Arial, Tahoma, Verdana. Далее переходим в 30-й кадр, нажимаем F6, т.е. создаем ключевой кадр, и редактируем нашу цифру 1, меняем ее на цифру 2.
Здесь тоже есть тонкий момент, если вы просто удалите цифру 1 и напишете цифру 2, то вы должны установить координаты цифры 2 такие же, как и цифры 1, чтобы при анимации создался эффект превращения цифр одной в другую. Если вы будет создавать далее цифру 3, 4 , 5 и далее, то соответственно координаты всех цифр должны быть одинаковы. С написанием цифр закончили, теперь их нужно превратить в графические объекты.
Выделяем каждую цифру по очереди и вызвав контекстное меню правой клавишей мыши выбираем пункт Break Apart, можно так же нажать комбинацию клавиш ctrl+B либо выбрать пункт Break Apart из меню Modify, кому как удобнее. Мы превратили цифры в графические объекты.
Теперь вы можете проиграть получившуюся анимацию с помощью комбинации клавиш ctrl+Enter или просто протянув бегунок по таймлайну. Но наша анимация не очень красива, превращения цифр одной в другую несколько «корявые». Давайте улучшим ситуацию. Для этого во Flash есть Shape Hint – это ключевые точки объекта используемые в анимации.
Их можно вставить вызвав меню Modify – Shape – Add Shape Hint либо с помощью комбинации клавиш ctrl+shift+H. Точки вставляются в виде маленьких кружочков красного цвета с буквами в центре. Именуются они по алфавиту: a, b, c , d и т.д. Вставляются они по умолчанию в центр объекта. Чем больше точек вы установите, тем более плавная анимация у вас получится. Нажав на точку правую кнопку мыши можно добавить новую точку - Add Hint, удалить лишнюю точку - Remove Hint и удалить все точки - Remove All Hint.
Если вы сейчас перейдете на второй ключевой кадр с цифрой 2, то увидите точно такие же точки красного цвета с теми же буквами в центре.
Теперь нам нужно их установить. Я предлагаю свой вариант, но вы можете сделать и иначе, т.к. конечных рекомендаций нет, вы выставляете их сообразуясь с собственным восприятием и вкусом.
Смысл точек такой: вы устанавливаете точку a в каком то месте первого объекта, переходите во второй объект и так же выставляете точку a в нужном месте. При анимации эти точки «перетекут» одна в другую. Если все сделано правильно, то точка на первом объекте станет желтой, а на втором зеленой. На скрине показано размещение по моему разумению. Ту же операцию проделываем для 2-го, 3-го объекта и т.д. Точек будет много, аккуратно, не запутайтесь.
Собственно если все сделано правильно, то проигрываем полученную анимацию с помощью клавиш ctrl+Enter или просто протянув бегунок по таймлайну и наслаждаемся результатом. Применять можно где и как угодно, только помните – работает только с графическими объектами. Исходник и результирущий swf-файл прилагаются.
