Анимацию формы. Практическая работа «Создание анимации формы в программе Flash» Методическое пособие «Учимся создавать анимацию на уроках информатики. Создание простого шейпового интро

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

Анимация формы фигур позволяет создать эффект метаморфозы, когда одна форма превращается в другую. Для управления этими изменениями служат специальные идентификаторы формы (shape hints ), которые позволяют создавать сложные изменения и превращения отдельных частей исходной фигуры в новые. Идентификаторы формы отмечают отдельные точки фигуры до и после изменения ее формы. Каждая из них обозначается буквой латинского алфавита, что позволяет задать до 26 идентификаторов. Таким образом можно создать изменение выражения нарисованных лиц, превращения одних животных в других и т. п. Для фигур сложной формы желательно задать промежуточные состояния в виде дополнительных ключевых кадров, что позволит контролировать фазы превращения. Лучше все анимируемые фигуры размещать в отдельных слоях, хотя можно выполнять одновременную анимацию для слоя, содержащего сразу несколько фигур.

Рис. 4.15 . Преобразование формы: автоматическое и с использованием идентификаторов

Для применения анимации формы (shapes-tweened ) к группам, символам, текстовым блокам и растровым изображениям их предварительно следует преобразовать командой Modify › Break Apart (Изменить › Разбить на части). По этой команде разрывается связь между экземпляром и символом, превращая экземпляр в набор несвязанных линий и фигур, что позволяет изменять его, не оказывая воздействия на другие экземпляры. Изменения символа в дальнейшем также не будут влиять на данный экземпляр.

Рассмотрим последовательность действий при создании анимации формы:

Выделим слой и пустой ключевой кадр на нем, с которого начнется анимация.
Создадим объект для первого кадра последовательности с помощью любого инструмента рисования.
Выделим требуемый заключительный кадр последовательности и превратим его в ключевой.
Создаем новый объект в этом кадре, к которому должен быть преобразован исходный объект.
Выполним команду Window › Panels › Frame (Окно › Панели › Кадр), чтобы открыть панель Frame (Кадр).
Из раскрывающегося списка Tweening (Расчет) выберем значение Shape (Форма).
Зададим значение Easing (Плавность) в диапазоне от - 100 до 100, определяя скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные - быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.
В раскрывающемся списке Blend (Переход) выбираем значение Distributive (Распределенный) - для гладких промежуточных форм или значение Angular (Острый) - для сохранения четких углов и прямых линий в промежуточ ных формах. Последнее значение применимо только к формам, имеющим острые углы и прямые линии, в противном случае автоматически будет задано значение Distributive (Распределенный).

Рис. 4.16 . Задание параметров анимации формы

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

Идентификаторы формы (shape hints ), помеченные буквой латинского алфавита, представлены желтым цветом в начальном и зеленым цветом в конечном ключевых кадрах. Красный цвет идентификатора означает, что он расположен не на кривой и не может участвовать в трансформации. При использовании идентификаторов формы следует придерживаться нескольких правил:

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

Урок 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 кадре изобразите ваше настроение на конец урока и создайте анимацию формы. Продемонстрируйте его друг другу.

Спасибо за урок!!!

Практическая работа №1

Практическая работа №2:

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

Для создания анимации формы текстового объекта на первом и последнем ключевых кадрах цифры необходимо "разбить" - преобразовать из текста в графику. Это делается таким образом – к выделенному объекту применяется команда разделения (режим меню "Модификация" - "Разделить").

Практическая работа №3:

Получившаяся анимация в предыдущем задании нас может не устраивать по причине "некрасивого" "перетекания" точек объекта на первом кадре в некие точки объекта на последнем кадре. Для улучшения реалистичности преобразования одного объекта в другой необходимо указать – в какую точку объекта на последнем кадре "перетечет" выбранная точка объекта на первом кадре.

Для этого выполним следующие действия (используя анимацию предыдущей работы):

Примеры создания анимации формы приведены в папке " Анимация " - " Анимация формы".

Краткие итоги лекции:

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

Для создания анимации формы текстового объекта на первом и последнем ключевых кадрах текст необходимо "разбить", преобразовав его в графику.

Для улучшения реалистичности преобразования одного объекта в другой необходимо указать – в какую точку объекта на последнем кадре "перетечет" выбранная точка объекта на первом кадре. Для этого используют точки привязки (хинты кривой).

Если применить анимацию формы к фигурам с разным цветом, то во время трансформации будет происходить изменение цвета.

Ключевые термины

Анимация формы
Разбиение текста
Хинт кривой

Набор для практики:

Для каких объектов возможно создание классической анимации формы?
Возможно ли изменять цвет анимированного объекта при создании анимации формы?
Назначение точек привязки (хинтов кривой) при создании анимации формы?
Что понимается под графическим представлением текстового объекта?
Применима ли анимация формы к текстовому объекту? Какие преобразования для этого необходимо провести с текстовым блоком?

Упражнения

Создайте анимацию дыма.
Создайте анимацию движения и изменения формы облака в небе.
Создайте анимацию изменения формы языка пламени.
Создайте анимацию развевающегося на ветру полотна знамени.

На прошлом уроке мы ознакомили вас с автоматической анимацией движения (Motion Tween), а теперь продолжим разговор об автоматической анимации и рассмотрим автоматическую анимацию формоизменения (Shape Tween). Следует отметить, что термин Shape Tween в различных изданиях переводят по-разному, в частности встречается название «анимация заполнения кадров с изменением формы». Впрочем, точно перевести это сочетание весьма сложно, поскольку tween - это сокращение от between (между). Таким образом, имеется в виду, что данный вид анимации строится на базе начального и конечного кадра, а всё, что находится между этими кадрами, интерполируется по тем или иным алгоритмам. Анимация формоизменения позволяет создать эффект перетекания одной фигуры в другую с одновременным изменением расположения, размера и цвета фигур.

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

Рис. 1. Контур с радиальной заливкой

Затем щелкните на имени слоя нарисованного объекта (в данном случае имя слоя по умолчанию принято Layer 1) - слой станет выделенным (рис. 2), а внизу в панели Properties появится окошко Tween, в котором нужно выбрать пункт Shape.

Рис. 2. В меню Tween следует выбрать пункт Shape

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

Рис. 3. Поместим результирующую форму в 30-й кадр

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

Рис. 4. В окошке Ease задается режим ускорения/замедления анимации

Аналогично тому, как это реализовано в автоматической анимации движения, в автоматической анимации формоизменения возможно задание анимации с замедлением или ускорением. Продемонстрируем эту возможность на нашем примере. Выделите слой и нажмите на треугольник рядом с окошком Ease (рис. 4), в результате чего появится ползунок, который позволяет установить режим ускорения/замедления. Чтобы движение ускорилось, необходимо ввести отрицательное число от –1 до –100, а для замедления процесса превращения введите положительное число от 1 до 100. Зададим параметр Easing, например равный +100, и получим следующий фильм .

Рис. 5. Выпадающее меню Blend

Обратите внимание на возможность выбора характера анимации, которое задается в выпадающем меню Blend (рис. 5). В данном меню можно выбрать два варианта - Distributive, при котором промежуточные фигуры будут более гладкими, и Angular, при котором фигуры будут угловатыми.

Использование хинтов в анимации формы

В предыдущем параграфе мы изучали процесс анимации формоизменения, при котором яблоко превращается в грушу. Логичным был бы процесс морфинга, при котором веточка переходит в веточку, а плод в плод, программа же генерирует промежуточные кадры преобразования, «ничего не зная» о строении яблок и груш. Поэтому, если мы хотим сохранить некоторую логику морфинга, необходимо указать программе, какие области должны наследоваться. С этой целью в программе Flash используются так называемые хинты (shape hints) контрольные маркеры, с помощью которых можно управлять процессом формоизменения. Хинтами отмечаются точки, которые должны переходить сами в себя в начальной и конечной фигурах. Хинты помечаются буквами (от «a» до «z»).

Рассмотрим, как можно усовершенствовать нашу анимацию с помощью хинтов.

Выделим первый ключевой кадр и выполним команду Modify => Shape => Add Shape Hint, в результате выполнения которой на фигуре появится начальный хинт в виде красного кружка с буквой «а». Передвинем хинт в верхнюю точку веточки (рис. 6).

Рис. 6. Процесс установки хинта

Рис. 7. В последнем кадре установите точку, в которую должен переходить хинт

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

Рис. 8. Положение хинтов в результирующей фигуре

Рис. 29. Создание мувиклипа «ветка»

Поскольку нашей задачей является построение анимированного дерева, которое, в свою очередь, состоит из веток, превратим созданную нами ветку в мувиклип, выполнив команду Modify => Convert to symbol (рис. 29). Теперь можно из совокупности клипов «ветка» построить дерево (рис. 30). Как видно из рис. 30, клип «ветка» многократно применяется с различными трансформациями (поворот, зеркальное отображение и масштабирование).

Рис. 30. На базе мувиклипов «ветка» строится дерево

Рис. 41. Добавление на сцену экземпляров символа Symbol 1 copy

Дублировать символ можно и с помощью использования его экземпляра. Продемонстрируем это на том же примере. Выделим экземпляр символа Symbol 1 на сцене и выполним команду Modify => Symbol => Duplicate Symbol (рис. 42).

Рис. 42. Дублирование символа на основе экземпляра

Рис. 43. Панель Duplicate Symbol

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

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

Каждая из них обозначается буквой латинского алфавита, что позволяет задать до 26 идентификаторов. Таким образом можно создать изменение выражения нарисованных лиц, превращения одних животных в других и т. п. Для фигур сложной формы желательно задать промежуточные состояния в виде дополнительных ключевых кадров, что позволит контролировать фазы превращения. Лучше все анимируе-мые фигуры размещать в отдельных слоях, хотя можно выполнять одновременную анимацию для слоя, содержащего сразу несколько фигур.

Рис. 4.15. Преобразование формы: автоматическое и с использованием идентификаторов

Для применения анимации формы (shapes-tweened) к группам, символам, текстовым блокам и растровым изображениям их предварительно следует преобразовать командой Modify > Break Apart (Изменить > Разбить на части). По этой команде разрывается связь между экземпляром и символом, превращая экземпляр в набор несвязанных линий и фигур, что позволяет изменять его, не оказывая воздействия на другие экземпляры. Изменения символа в дальнейшем также не будут влиять на данный экземпляр.

Рассмотрим последовательность действий при создании анимации формы:

Выделим слой и пустой ключевой кадр на нем, с которого начнется анимация.
Создадим объект для первого кадра последовательности с помощью любого инструмента рисования.
Выделим требуемый заключительный кадр последовательности и превратим его в ключевой.
Создаем новый объект в этом кадре, к которому должен быть преобразован исходный объект.
Выполним команду Window > Panels > Frame (Окно > Панели > Кадр), чтобы открыть панель Frame (Кадр).
Из раскрывающегося списка Tweening (Расчет) выбирем значение Shape (Форма).
Зададим значение Easing (Плавность) в диапазоне от -100 до 100, определяя скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные - быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.
В раскрывающемся списке Blend (Переход) выбираем значение Distributive (Распределенный) - для гладких промежуточных форм или значение Angular (Острый) - для сохранения четких углов и прямых линий в промежуточ ных формах. Последнее значение применимо только к формам, имеющим острые углы и прямые линии, в противном случае автоматически будет задано значение Distributive (Распределенный).

Рис. 4.16. Задание параметров анимации формы

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

Идентификаторы формы (shape hints), помеченные буквой латинского алфавита, представлены желтым цветом в начальном и зеленым цветом в конечном ключевых кадрах. Красный цвет идентификатора означает, что он расположен не на кривой и не может участвовать в трансформации. При использовании идентификаторов формы следует придерживаться нескольких правил:

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

Рис. 4.17. Изменение цвета идентификаторов при правильном размещении

Чтобы использовать идентификаторы формы, выполняют следующие действия:

Выделяют первый ключевой кадр в последовательности и выполняют команду Modify > Transform > Add Shape Hint (Изменить > Трансформировать > Добавить идентификатор). На объекте появится первый идентификатор красного цвета с буквой внутри.
Идентификатор перемещают в точку на контуре фигуры, которую хотят отметить.
Выделяют конечный ключевой кадр последовательности, на котором идентификатор красного цвета устанавливают в точку на контуре фигуры, в которую должна перейти первоначальная, при этом идентификатор изменяет свой цвет на зеленый.
Выполняют просмотр фильма, чтобы убедиться, что форма изменяется желаемым образом. В противном случае перемещают идентификатор для более точной настройки изменения формы.
Повторяют процесс, добавляя новые идентификаторы (b, с и т. д.).

Если идентификаторы формы не отображаются на экране, то выполняют команду View > Show Shape Hints (Вид > Показать идентификаторы формы), которая доступна, если выделенный слой и ключевой кадр содержат идентификаторы формы.

Использование идентификаторов формы позволяет не только выполнять анимацию формы, но и создавать дополнительные эффекты, например вращение.

Лишний идентификатор формы, размещенный на фигуре, можно удалить, щелкнув по нему правой кнопкой мыши и выбрав из контекстного меню команду Remove Hint (Удалить идентификатор). Делать это следует на первом ключевом кадре последовательности. Для удаления всех идентификаторов формы достаточно выполнить команду Modify > Transform > Remove All Hints (Изменить > Трансформировать > Убрать все идентификаторы).

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

Рис. 4.18. Пример покадровой анимации с использованием рисунков