В этом уроке я хочу рассказать начинащим изучать 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-файл прилагаются.
Описание:
Цели урока:
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
Морфинг отличается от предыдущих типов анимации тем,что работает только исключительно с графическими(векторными) объектами,а не с символами.
Простой способ плавного изменения формы я думаю все встречали на сайтах по флеш(плавное перетекание квадратика в круг),
Это все графические элементы,не думаю,что кто-то будет это делать,интереснее смотреть на картинку в png,как она меняет форму,превращаясь в другую png,но морфинг с растром не работает.Следует выполнить определенный алгоритм действий.
Расскажу на своём примере.
Создаем документ,импортируем в библиотеку нужные нам картинки,заранее подготовленные по размеру и на прозрачном фоне.Сразу делаю акцент - картинка должна быть без градиентов,без теней и желательно не сильно пестрая(программа не сможет её просчитать),кто знает,что такое вектор,тот представляет,сколько плашечек оттенков цвета в какой-нибудь картинке,поэтому согласитесь,что программа Flash предназначена не для основной работы с вектором.
Итак, все загрузили в библ.,идём -вставка- создать символ- в самом символе с библ. вставляем картинку,выделяем,затем -модификация-растровое изображение-векторизация.
Откроется окошечко,если у вас стоит пороговое значение 100,исправьте на 10,а вот значение наименьшая область,можно поэкспериментировать,по умолчанию стоит 1,но это слишком долго прога будет просчитывать(каждую точку цвета),поэтому в зависимости,какая у вас картинка,насколько сложная по цвету,меняете это значение и смотрите,нажав предварительный просмотр,главное,чтобы не сильно исказилось качество,вот на моём примере,как бы 25 многовато,но качество сильно не пострадало,если устраивает результат,нажимаем ок.
Не снимая выделения,нажимаем -копировать
- 
и идем на монтажную сцену,выделяем 1 кадр и на сцене -вставить
.
Передвигать лучше стрелками на клавиатуре,или чтоб было выделено все изображение и стрелка показывала перекрестье,иначе сдвинете по кусочкам,это уже вектор,а не символ.
Выделяем первый кадр и выбираем -создать анимацию формы
,дальше примерно на 60 кадре вставляем пустой ключевой кадр.На шкале дорожка делается точками.
Повторяем действие со второй картинкой(вставка-создать символ-векторизация-...копировать...)
,возвращаемся на сцену,выделяем нужный кадр(у меня 60),
щелкаем по сцене и нажимаем -вставить
,на шкале дорожка меняется.
Я рассказала и показала простой пример,но дополнительно существуют еще инструменты редактирования при работе с морфингом,такие,как добавление хинтов(точек) для точного,плавного морфинга,изменение узловых точек,искажение,сглаживание... и т.д, если кому интересно могу расписать значение этих инструментов.
Проигрываем,смотрим.Вот получилась простая анимация формы.
Практическая работа №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). Дважды щелкнем по имени нового символа в окне библиотеки, что вызовет окно редактирования нового символа. Поменяем положение листа в последнем кадре, перейдем к основной сцене и добавим несколько экземпляров нового символа. В результате мы получим окончательную версию
