Шейповая графика в тренде уже последние несколько лет. Однако, за большой популярностью скраывается кропотливая работа по анимации каждого элемента на рабочей области.
Если до этого вы никогда не занимались шейповой анимацией, сейчас - самое время!
Подобрали 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
Стильная шейповая анимация
Как сделать шейповый анимированный баннер
Описание:
Цели урока:
1. обучающая
– сформировать представление о процессе заполнения кадров с изменением формы, который используется для трансформации рисованных фигур между начальными и конечными точками кадров
2. развивающая
- развивать интеллектуальные умения анализировать и сравнивать полученную информацию, развивать творческие способности при создании анимации
3. воспитательная
– воспитывать эстетическое восприятие действительности, любовь к экранному искусству, формировать навыки самоконтроля.
Оборудование и дидактический материал: ПЭВМ, программа Flash, мультимедийный проектор, демонстрационный материал, электронная презентация, задания.
Структура и ход урока:
- Организационный момент. Проверка учащихся и их готовности к уроку.
- Проверка домашнего задания
Что такое анимация? Какие виды анимации вы знаете, их достоинства и недостатки? Как выполняется анимация движения?
На прошлом уроке мы познакомились с анимацией движения. Сегодня продолжим изучение анимации. Запишите тему урока: Создание анимации формы в программе Flash. - Целеполагание.
Формулируются цели урока
(Демонстрируется файл – Создание анимации формы в программе Flash.ppt – слайд 1).
- Объяснение нового материала, его конспектирование, показ выполнения основных операций
Анимация формы с заполнением первого и последнего ключевого кадра Shape tweening.
Заполнение кадров с изменением формы используется для трансформации рисованных фигур между начальными и конечными точками. Flash может выполнить операцию заполнения кадров с изменением формы только для фигур. На одном слое можно выполнить заполнение кадров для нескольких фигур. Но для четкой организации нужно, чтобы каждая фигура находилась на отдельном слое, если вы впоследствии вернетесь к этому анимационному фрагменту, чтобы внести определенные изменения, то работа упростится. (Демонстрируется файл слайд 2). Учащиеся ведут краткий конспект. (Далее все операции показываются на экране с помощью мультимедийного проектора. )
Для создания расчетной анимации формы нужно выполнить следующие действия:
1. Нарисовать объект в ключевом кадре.
2. Находясь в первом кадре, использовать панель «Кадр », выбрать пункт Shape , изменить ослабление.
3. Указать конечный кадр и включить команду чистый ключевой кадр , это можно сделать, щелкнув правой клавишей мыши на кадре, который и будет ключевым, появится список, в котором и выбрать чистый ключевой кадр . В нем расположить изображение, затем проиграть анимацию. Для этого выбрать пункт меню «Управление » команда «Воспроизведение » или нажать клавишу Enter на клавиатуре. После этого анимация будет, воспроизводится.
После того как у вас есть два ключевых кадра, вы делаете активным первый из них (просто переходите на него), и выбираете на панели «Кадр » в списке Tweening строку Shape :Кадры на временной шкале должны окраситься в зеленоватый цвет и от первого кадра ко второму должна протянуться стрелочка.
В результате вы получите ряд промежуточных кадров, которые будут отражать переход от первой фигуры ко второй. (Демонстрируется файл – Создание анимации движения в программе Flash.ppt – слайд 3):В этой анимации круг переходит в некое подобие полумесяца. На первом ключевом кадре нарисован круг, а на другом ключевом кадре (это 10-й кадр сцены) полумесяц. В панели «Кадр » есть два параметра Easing (Ускорение) и Blend (Переход)
Easing (Ускорение) задает обратное экспоненциальное ускорение. Величина этого параметра может изменяться от - 100 до + 100. Это означает, что если вы зададите отрицательный easing (ускорение), скорость будет увеличиваться (См. рис. 4). И наоборот, если easing (ускорение) будет положительным, анимация будет замедляться (См. рис. 5).Параметр Blend (Переход), определяет алгоритм перехода: Distributive (распределяющий, общий) и Angular (угловатый). Первый старается максимально смягчить, сгладить переход от одной фигуры к другой. Второй же пытается сохранить пропорции углов. Если переход вас не удовлетворяет, можно поэкспериментировать с этим параметром.
- Закрепление пройденного материала.
(Демонстрируется файл – Создание анимации движения в программе Flash.ppt – слайд 4).
Создание анимации формы: «Ночной цветок» - Подведение итогов урока.
Ребята, предлагаю вам просмотреть работы друг друга. Обратите внимание на достоинства и недостатки разных анимаций. Отдельные анимации демонстрируются всем с помощью проектора. Обсуждаются положительные моменты, ошибки, недочеты, если есть.
Повторим основные моменты урока.
С какой программой мы сегодня продолжили знакомство? Как создать анимацию формы? Какое расширение имеет файл анимации? Понравились ли вам возможности программы и где вы могли бы их использовать?
Анализ ответов учащихся; аргументация и выставление оценок. - Домашнее задание: конспект; продумать и подготовить материал для собственной анимации
Список используемой литературы
- Macromedia Flash 5/ Книга + Видеокурс: Учебное пособие – М.: Лучшие книги. Под редакцией В.Б. Комягина.
- Flash 8. Просто как 2х2. А.А. Борисенко
- ИНТЕРНЕТ: www.flashblog.ru; www.adobe.com
Вся работа по созданию фильма происходит с помощью панели Timeline (Шкала времени), изображение которой приводится ниже. Панель Timeline разделена на две части вертикальной линией, которую можно перемещать мышкой. Правая часть панели представляет собой так называемую "линейку кадров" — линейку, на которой располагаются символы кадров, имеющие вид небольших прямоугольников. Содержанием кадров являются сменяемые во времени статические картинки, появляющиеся на рабочем поле. Нумерация кадров представлена в верхней части линейки. Под линейкой кадров располагается "строка состояния".
Ключевые кадры
— это кадры, в которых размещаются статические картинки, "оживающие" при анимации. Нажатие клавиши
— основной инструмент при работе с анимацией во Flash. На ней отображается информация о слоях, о том какие кадры являются ключевыми, а какие генерирует Flash. С помощью временной шкалы можно понять, какие кадры содержат действия или метки. Она позволяет перемещать ключевые кадры и целые куски анимации.
Основные возможности временной шкалы:
- Чтобы сделать слой активным, его надо выделить. Рисовать и редактировать можно только на активном слое. Активный слой подсвечивается на Монтажной линейке, и значок с изображением карандаша показывает, что его можно редактировать (Layer 3).
- Содержимое слоёв, которые находятся сверху на Монтажной линейке, отображается поверх содержимого слоёв, находящихся под ними. Для обмена слоёв местами надо перетащить название слоя на нужное место на Монтажной линейке.
- Для создания нового слоя надо выбрать позицию на Монтажной линейке для нового слоя и нажать кнопку "Добавить слой".
- Для удаления слоя достаточно перетащить его в корзину.
- Для переименования слоя дважды щелкните мышью по нему на Монтажной линейке.
- При создании многослойного изображения используйте элементы управления слоями. Щелчок в колонке под изображением замка заблокирует любое редактирование, а в колонке под изображением глаза сделает слой невидимы.
Ниже приводится пример анимационного ролика, в котором в разных слоях со сдвигом в 25 кадров, помещён разный фон (пейзаж) с соответствующим текстовым блоком. Пейзаж получен заливкой фона растровым изображением Color Mixer->Bitmap с последующей обработкой инструментом Трансформатор заливок.
- Изображение (graphic) , представляет собой символ, состоящий из единственного кадра. Отсюда следует его статичное название. Если символ действительно представляет собой статичный (не анимирующийся) объект, лучше сделать его изображением (graphic).
- Кнопка (button)
. Во Flash есть специально приспособленный под функции кнопки вид символа. В нем имеется 4 кадра: Up, Over, Down, Hit, которые содержат следующие состояния кнопок:
- Hit — обычное состояние, для кнопки, содержащей ссылку, которую пользователь уже посещал.
- Анимация (movie clip) . Это самый "полноценный" тип символа. В нем может быть любое количество кадров. Символ этого типа может восприниматься как объект типа Movie в ActionScript (встроенный язык Flash).
В Macromedia Flash существуют два принципиально разных способа анимировать что-либо:
- Прорисовать каждый кадр самому, используя Flash только для пролистывания кадров.
- Заставить Flash автоматически просчитывать промежуточные кадры.
Пошаговая (покадровая) анимация
Это анимация, полностью составленная из ключевых кадров. Т.е. Вы сами определяете, как содержимое кадра, так и его "длительность" (т.е. сколько таких статических кадров будет занимать изображение).
Перед тем как нарисовать очередной кадр надо вставить пустой ключевой кадр (
К достоинствам этого способа можно отнести:
- Покадровая анимация даёт, в некотором смысле, больший контроль над анимацией, и если Вы опытный аниматор, то Вы можете выгодно ею пользоваться.
- Это единственный способ организовать смену абсолютно независимых изображений — слайд-шоу (например, создавая обычный баннер средствами Flash).
- И все остальное, что вытекает из возможности прорисовывать каждый кадр вручную.
К недостаткам можно отнести следующее:
- Покадровую анимацию сложно модифицировать. Особенно, если это не дискретный набор изображений, а связанная анимация. Приходится модифицировать все кадры.
- Покадровая анимация занимает достаточно большой объем, так как приходится хранить информацию о каждом кадре.
Элементарные операции с кадрами:
- Вставить пустой ключевой кадр — Insert -> Blank keyframe,
. - Ключевой кадр, повторяющий содержание предыдущего — Insert -> Keyframe,
. - Очистить ключевой кадр — Insert -> Clear keyframe,
+ . - Вставить обычный кадр — Insert Frame,
. - Удалить кадр — Insert -> Remove Frames,
+ .
Элементарные операции с роликом:
- Просмотр ролика — Control, Test movie.
- Изменение высоты и ширины ролика — Modify, Movie.
- Преобразование Flash-ролика в HTML-документ File, Publish Setting, вкладка HTML.
- Просмотр HTML-документа — File, Publish Preview.
Создадим многослойный фильм с пошаговой анимацией «Жизнь цветка». 1-й слой — рамка, 2-й слой — горшок, 3-й слой — цветок. Можно 3-й слой представить тремя слоями: лист, стебель, соцветие.
Горшок и рамка находятся всё время перед нашими глазами, а цветок за 25 ключевых кадров успевает вырасти и увять. В слое «цветок» каждый кадр отличается от предыдущего, но можно сделать изменение состояния цветка чере один кадр.
Публикация ролика происходит с помощью File->Publish Setting. На вкладке Formats выбираются варианты публикации, их можно выбрать несколько, на соответствующих вкладках задаются параметры для выбранного варианта публикации, затем нажимается кнопка Publish. При этом, созданные файлы сохраняются в той же папке, что и исходный файл с расширением.fla. В нашем примере для публикации выбран вариант Gif-анимированный файл, как и во всех последующих примерах.
Второе задание попробуйте выполнить самостоятельно, используя ниже приведённый алгоритм. Это будет создание анимации «Движущийся автомобиль»:
- создаим слой «Пейзаж»;
- выполним команду File/Import и импортируем картинку с изображением пейзажа или создадим фон "асфальт";
- выделим на линейке 30-й кадр и нажмём F5. создадим цепочку дублирующих кадров для пейзажа;
- создадим новый слой «Авто»;
- нарисуем в первом ключевом кадре автомобиль без колёс;
- сгруппируем нарисованный автомобиль и нажав F8 создадим библиотечный образец — клип automobile;
- сдвинем автомобиль, выделим второй кадр и нажмём F6;
- будем перемещать автомобиль и создавать новые ключевые кадры до тех пор, пока, автомобиль не скроется за пределами рабочего поля;
- создадим новый слой и назовём его «Колесо1»;
- нарисуем в первом кадре колесо и создадим из него библиотечный образец wheel;
- создадим новый ключевой кадр и передвинем в нём колесо за передвинутым автомобилем и т.д. во всех остальных кадрах, поворачивая колесо при этом на небольшой угол;
- заблокируем слой «Колесо1» и скопируем в буфер всю полученную последовательность кадров;
- создадим новый слой и назовём его «Колесо2»;
- выделим первый кадр и скопируем из буфера всю последовательность кадров;
- для зацикливания просмотра нажмём
+ .
В качестве ещё одного самостоятельного задания можно предложить создать пошаговую анимацию "Горение спички":
Во Flash существует два варианта построения промежуточных изображений — motion tweening (построение анимации на основе модификации символов) shape tweening (построение анимации на основе изменения формы). Эти способы отличаются в корне.
Анимация движения
При таком способе анимации задают начальное положение, цвет, размеры, ориентацию и конечные параметры, а программа сама осуществляет это движение. При этом способе анимации Flash автоматически строит промежуточные кадры между ключевыми кадрами, заданными вами. Это означает, что Вы рисуете объект, потом на другом кадре производите изменения, о которых мы поговорим ниже, и просите Flash рассчитать те кадры, которые лежат между этими двумя ключевыми кадрами. Он выполняет эту работу, и Вы получаете плавную анимацию.
Скорость и плавность анимации зависят от количества кадров, которые отведены под движение и скорости Flash фильма (movie). Скорость фильма можно изменить следующим образом: Modify->Movie…,
Рассмотрим анимацию с построением промежуточных кадров (tweened motion). Это наиболее часто используемая техника анимации во Flash. В этом случае анимация строится на основе модификации символов, т.е. объектом анимации является символ. Как и в анимации shape tweening, на каждый объект в один момент времени, нам нужен один слой. На этом слое должен находиться один символ, с которым и будут происходить все изменения.
При использовании Motion Tweening модифицируются следующие параметры:
- размер (как пропорционально, так и непропорционально — отдельно высоту и ширину);
- наклон;
- расположение;
- угол поворота;
- цветовые эффекты;
- можно использовать направляющие слои для задания траектории движения объекта.
Включить motion tweening можно несколькими способами (а отключить, к сожалению, только одним). Для того, чтобы включить motion tweening, нужно сделать активным начальный кадр вашего перехода, затем, нажав правую клавишу мыши, в контекстном меню выбрать Create motion tween (это же можно сделать, выбрав Insert->Create motion tween). Универсальный способ включения/выключения motion tweening — с помощью панели Frame, выбрав Motion в поле Tweening. Там же можно контролировать параметры анимации:
- Easing — обратное экспоненциальное ускорение, работает абсолютно так же, как и в shape tweening.
- Rotate позволяет управлять вращением. Auto — Flash автоматически пытается определить количество витков. CW (Clockwise, по часовой стрелке) и ССW (Counter Clockwise — против часовой стрелки). При этом рядом в поле справа появляется возможность ввести количество оборотов. Можно использовать только целые значения. Можно отключить вращение, выбрав None.
- Orient to path — поворачивает символ в соответствии с направляющей линией. Snap привязывает символ к этой направляющей.
В случаях, когда количество кадров основной сцены не бывает кратным количеству кадров символа, флажок Synchronize позволяет синхронизировать эти две анимации.
Слои, которые содержат кривую, по которой должен двигаться объект называются направляющими слоями (guide layers) (т.е. они содержат траекторию движения объекта). Для того, чтобы добавить направляющий слой, нужно Выбрать слой, на котором находится ваш символ; затем Нажав правую клавишу мыши, в контекстном меню выбрать Add Guide. При этом исходный слой становится направляемым (guided layer). Это далеко не единственный способ создать направляющий слой (guide layer). Любой слой можно сделать направляющим, указав это в его свойствах, или направляемым, перетащив нужный слой мышкой, так, чтобы он находился под направляющим.
Далее, нужно нарисовать траекторию движения. Траекторией может быть любая кривая, не являющаяся областью заливки. Всё! Управляющий слой готов. Вы можете его запретить для редактирования, чтобы было удобней работать, а в дальнейшем и вовсе сделать его невидимым.
Теперь, чтобы использовать этот слой, нужно взять символ за центральную точку (это такой маленький кружочек) и перетащить ее на траекторию. Вы почувствуете, когда символ "зацепится" за нее, и увидите, как он будет по ней скользить.
Далее все по знакомому сценарию — ключевые кадры, включаем motion tweening… Если нужно, чтобы объект поворачивался согласно траектории, а не просто двигался по ней, то на панели Frame нужно включить флажок Orient to path.
Motion tweening позволяет использовать различные цветовые эффекты применительно ко всему символу. Эта возможность отсутствует в shape tweening. Для того, чтобы применить эффект к символу, нужно выделить этот символ, и на панели эффектов (Windows ->Panels ->Effects), выбрать нужный эффект, установив яркость, цветовое смещение, оттенок.
Создайте самостоятельно очень простой пример анимации движения шара по кругу, пользуясь ниже приведённым алгоритмом:
- нарисуем в первом кадре круг и зальём его радиальной градиентной заливкой;
- сгруппируем рисунок;
- выделим его инструментом Трансформатор и перенесём центр вращения на некоторое расстояние;
- перейдём в 30 кадр, нажмём
, т.е. сделаем его копией первого кадра; - вернёмся в первый кадр и откроем панель Properties и в списке Tween выберем Motion;
- в дополнительном списке Rotate выберем принудительное вращение по часовой стрелке (CW) или против часовой стрелки (CCW).
Следующий пример несколько сложнее — это создание анимации движения букв текста:
- с помощью инструмента Текст создадим текстовый блок;
- выделим написанное слово и разобьём его на отдельные буквы (Modifi/Break Apart);
- разведём буквы по отдельным слоям Modify/Distribute to Layers;
- преобразуем каждую букву в каждом слое в рисунок, повторим команду Modifi/Break Apart. Выдели каждую букву и сгруппируем её;
- на линейке кадров на некотором удалении создадим копии первого кадра, для этого нажмём
; - по очереди будем выделять первые кадры для каждой буквы, выносить её за пределы рабочей области, изменяя пропорции буквы, центр вращения и т.д.;
- в панели Properties в списке Tween выберем Motion. В дополнительном списке Rotate выберем один поворот по часовой стрелке;
- просмотрим анимацию в окне просмотра
+ .
Анимация формы — это плавное изменение объекта анимации на рабочем поле. Под объектом понимаем здесь не группу или текстовый блок, как при анимации движения, а обычный многоцветный рисунок, который может состоять из нескольких фрагментов. Более того, количество таких фрагментов в начале и в конце анимации может быть различным.
В процессе анимации формы рисунок может распадаться на песколько независимых фрагментов, каждый из которых постепенно преобразится во что-то неожиданное. Или, наоборот, несколько независимых изображений, находящихся на рабочем поле, в процессе анимации, постепенно меняя свой облик (размеры, цвет, форму), становятся частью единого изображения. Скажем, нужно, чтобы квадрат плавно превратился в круг, или силуэт кролика плавно перетёк в силуэт волка. В этих случаях используется shape tweening.
Как обычно, Вы задаете два ключевых кадра на некотором расстоянии друг от друга. В этом варианте анимации есть жесткое ограничение: анимация должна занимать отдельный слой и быть единой нарисованной фигурой (не должно быть групп или символов).
После того как есть два ключевых кадра, надо сделать активным первый из них (просто переходите на него), и выбирать на панели Frame (Windows->Panels->Frame,
При использовании shape tweening необходимо задать два параметра:
- Easing задает обратное экспоненциальное ускорение. Величина этого параметра может изменяться от - 100 до + 100. Это означает, что если вы зададите отрицательный easing, движение будет происходить с положительным ускорением, скорость будет увеличиваться. И наоборот, если easing будет положительным, анимация будет замедляться;
- Параметр Blend, определяет алгоритм перехода:
- Distributive — сглаживает переход от одной фигуры к другой.
- Angular (угловатый) — пытается сохранить пропорции углов.
Последний инструмент в анимации shape tweening — контрольные точки (shape hints, дословно — подсказки для форм). Это точки, с помощью которых Вы помогаете Flash правильно осуществить переход. Без них не обойтись в случае сложных форм.
Пользоваться ими очень легко. На первом ключевом кадре (с которого начинается анимация) Вы добавляете контрольную точку (Modify->Transform->Add shape hint, Удалить все точки можно с помощью Modify->Transform->Remove All Hints. Удалить же единственную точку можно, нажав на ней правую кнопку мыши, и в контекстном меню выбрав Remove Hint.
Так как контрольные точки обозначаются буквами латинского алфавита, то их может быть максимум 27. Вариантов перехода из одной формы в другую может быть множество, поэтому анимация может пойти и по тому пути, который устроит Вас в меньшей степени. Даже преобразование такой простой геометрической фигуры, как прямоугольник, расположенный вертикально, в такой же прямоугольник,
но расположенный горизонтально, может происходить по разному. Например, в процессе такого преобразования фигура может побывать в форме овала или даже круга. Для контроля анимационного процесса нужно постараться упростить анимацию, разделив рисунки на несколько
независимых фрагментов, расположенных в разных слоях, но одновременно участвующих в анимации. Более координальным приёмом является применение меток формы, о которых говорилось выше. Если вам нужно отключить shape tweening, в панели Frame выберите Tweening: None. Ниже приводится на этот способ анимации пример «превращения» слона в овцу и обратно. Попробуйте самостоятельно создать анимацию формы "превращения" змеи в орла и обратно: Часто в процессе анимации необходимо, чтобы объект двигался не по прямой, а по заданной траектории. Анимация в этом случае создаётся обычным образом, а траектория рисуется в отдельном слое. Слой траекторий может обслуживать несколько разных анимаций, каждая из которых размещена в отдельном слое,
но все эти слои с анимацией должны располагаться под слоем траекторий. Для рисования траектории можно использовать различные инструменты: Карандаш, Кисть, Перо, Эллипс, или Прямоугольник.
Чтобы привязать движущийся объект к этой траектории нужно в начальном и конечном ключевых кадрах анимации просто перенести этот элемент на траекторию.
При этом в панели Properties следует подкорректировать параметры анимации таким образом, чтобы был включён флажок Snap (привязать). Для этого нужно предварительно выделить первый ключевой кадр анимации,
полезно также выбрать команду View/Snap to Objects. Для примера, создадим ролик «Полёт бабочки над цветком», по ниже приведённому алгоритму: Этот слой призван закрывать и делать невидимой часть изображения, расположенного непосредственно под ним. Если слой-маска не содержит никакого изображения, то он полностью закрывает
собой (маскирует) расположенный ниже и связанный с ним слой, который называется маскируемым слоем
. Если же в слое-маске что-то нарисовано, то любая заливка этого рисунка становится прозрачной частью слоя.
Если анимировать изображение, созданное в слое-маске, то прозрачная часть маски будет перемещаться по экрану. Слой-маска может маскировать несколько слоёв. Сделать обычный слой маскируемым можно,
изменив его положение в стеке слоёв. Нужно просто перенести мышкой обычный слой под слой-маску.
Анимация в этом случае может быть двух видов. Либо анимация объектов, расположенных на маскируемых слоях. Либо анимация изображения, находящегося на слое-маске. Пример создания эффекта постепенного появления текста на экране буква за буквой. Для этого используем анимацию движения изображения, находяшегося в слое-маске, используя следующий алгоритм: Ниже приводится gif-анимированный файл, в котором используется анимация формы букв текста "С Новым Годом", а затем появившийся текст "стирается", с использованием слоя-маски, прямоугольника с градиентной заливкой,
поэтому получается эффект "переливчатости" букв. Фоном является фрагмент растровой графики. Следующий пример демонстрирует «вырастание» из точки слова, где в качестве маскируемого слоя используется импортированная растровая графика, а в слое-маске создана анимация, в которой из точки вырастает слово, а затем оно опять уменьшается.
В данном примере также используется анимация формы. Кнопка — специальный вид символа, предназначенный для реагирования на действия пользователя, например, нажатия на саму кнопку, её клавишный аналог или активную область в фильме.
Временная шкала кнопки содержит следующие четыре кадра: Если необходимо создать несколько одинаковых кнопок, то в этом случае достаточно создать только один образец кнопки. А далее нанести на него необходимые надписи, менять цвет или размер.
Если кнопка должна содержать анимированные объекты, для этого необходимо заранее создать символы Movie clip, а затем просто разместить их в соответствующем кадре кнопки. В качестве примера создадим кнопку со встроенной анимацией по ниже приведённому алгоритму: Публикация данного объекта выполнена в режиме HTML с указанием на соответствующий swf-файл. Создадим кнопки, управляющие работой слайд-шоу: On (release) { GotoAndStop(k); — цифра в скобках указывает на номер соответствующего кадра. On (press) { GotoAndStop("begin)"; On (press) { Root.prevFrame (); On (press) { Root.nextFrame (); On (press) { GotoAndStop("end"); Ниже приводится результат нашей работы: При создании анимаций с использованием языка ActionScript часто используется трёхкадровый цикл. В первом кадре (подготовка) записываются начальные данные, во втором кадре
размешаются элементы тела цикла, а втретьем кадре пишется команда вернуться во второй кадр gotoAndPlay (2);. Работа трёхкадрового цикла заключается в попеременном просмотре
кадров, участвующих в цикле, до тех пор пока не будет выполнено условие выхода из цикла. Рассмотрим использование трёхкадрового цикла на примере создания движения маски. Наш фильм будет состоять из трёх слоёв:
<маскируемый клип>.setMask (<клип-маска>) При каждом обращении ко второму кадру клип Mask будет поворачиваться на 2°. Перед глазами пользователя вращается окно, имеющее форму клипа Mask,
сквозь которое видна часть клипа Masked. Научимся управлять цветом экземпляра библиотечного клипа. Создадим фильм, в котором на фоне восходящего солнца разнонаправленно вращаются звёзды, изменяя свой цвет. Экземпляр объекта Color создаётся с помощью конструктора в среде ActionScript и имеет следующий формат: <имя экземпляра объекта Color> = new Color (<имя экземпляра клипа>) OnClipEvent (load) { Star1Color = new Color(this); ColorTransform = {rb:0, gb:255, bb:255}; G = 255; B = 255; Step = 5; OnClipEvent (enterFrame) { G -= step; ColorTransform.gb = g; If (r >=0 && b == 255 && g == 0) { R += step; ColorTransform.rb = r; If (g == 0 && r == 255 && b B -= step; ColorTransform.bb = b; If (b == 0 && r == 255 && g >=0) { G += step ; ColorTransform.gb = g; If (g == 255 && b == 0 && r R -= step; ColorTransform.rb = r; If (r == 0 && g == 255 && b>=0) { B += step; ColorTransform.bb = b; Star1Color.setTransform(colorTransform); This._rotation -= 3; Кнопки и меню — это одна из самых главных частей сайта и любого другого приложения, где важна интерактивность. Создадим Flash-меню. on (release) {getURL ("1.html", "_self");} На прошлом уроке мы ознакомили вас с автоматической анимацией движения (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). Дважды щелкнем
по имени нового символа в окне библиотеки, что вызовет окно редактирования нового
символа. Поменяем положение листа в последнем кадре, перейдем к основной сцене
и добавим несколько экземпляров нового символа. В результате мы получим окончательную
версию В этом уроке я хочу рассказать начинащим изучать 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-файл прилагаются.При использовании shape tweening могут модифицироваться следующие параметры фигуры:
Направляющий слой и слой траекторий
Маскируемый слой и слой-маска
Создание кнопок
Основные типы действий:
Алгоритм создания кнопки (алг1):
Алгоритм создания кнопки для перехода на указанную Web-страницу:
Алгоритм создания кнопки для остановки клипа:
Создание сценариев с помощью языка ActionScript
Использование хинтов в анимации формы
Начнем с самого главного - анимация формы будет работать только в том случае, если вы оперируете графическими объектами.
Теперь нам нужно их установить. Я предлагаю свой вариант, но вы можете сделать и иначе, т.к. конечных рекомендаций нет, вы выставляете их сообразуясь с собственным восприятием и вкусом.