Иллюстрированный самоучитель по анимации для интернет. Электронная школа macromedia flash mx ii курс: основы создания анимации в macromedia flash mx модуль iii: анимация типа shape, озвучивание анимации Анимированные формы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Упражнения

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

В этом уроке я хочу рассказать начинащим изучать 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-файл прилагаются.

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

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

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

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

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

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

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

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

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

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

Шейповая графика в тренде уже последние несколько лет. Однако, за большой популярностью скраывается кропотливая работа по анимации каждого элемента на рабочей области.

Если до этого вы никогда не занимались шейповой анимацией, сейчас - самое время!

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

Animação Feliz de Shapes com Textos

Sequence Animation – Adobe After Effects Tutorial

Shape Layer Repeater (radial) – Adobe After Effects tutorial

Tutorial – Quick tips 03 – 2D Circles & Dashed stroke

Animating infographic scene Episode 1 After Effects

Earth Hour Tutorial After effects

Делаем анимированные паттерны, используя Shape Layers Repeater в After Effects

Summit 1.2 – Intro to Motion Graphics – After Effects

Как импортировать и анимировать векторный файл в After Effects

Знакомство с Ancor Point. Анимация ладоней

Как создать шестеренки?

Шейповый переход Radial Wipe

Прямой и обратный отсчет в Adobe After Effects

Работа со скриптом Lines Creator

Окружности – наше всё! Урок 1. Создаем интро

Окружности – наше всё! Урок 2. Закольцовываем шейпы

Окружности – наше всё! Урок 3. Подбор цветов в Adobe Kuler

Окружности – наше всё! Урок 4. Работа с Dashes

Эффект растекающихся кругов

Анимация шейпов

Создание простого шейпового видео

Создание шейповой анимированной иконки

Создание простого шейпового интро

Эффектная шейповая анимация смартфона

Потрясающая шейповая анимация

Создание простого шейпового морфинга

Шейпы! Делаем анимированные паттерны, используя Shape Layers Repeater

Стильная шейповая анимация

Как сделать шейповый анимированный баннер

Главная » Полезное » Иллюстрированный самоучитель по анимации для интернет. Электронная школа macromedia flash mx ii курс: основы создания анимации в macromedia flash mx модуль iii: анимация типа shape, озвучивание анимации Анимированные формы