Создание анимационных клипов в программе Adobe Flash

Министерство общего и профессионального образования Свердловской области

государственное автономное образовательное учреждение

среднего профессионального образования Свердловской области

«Каменск-Уральский политехнический колледж»

Лабораторный практикум

Создание анимационных клипов

в программе

Автор: Малинина Алена Игоревна,

преподаватель информатики

ГАОУ СПО СО «Каменск-Уральский

политехнический колледж»

2013

Пособие посвящено изучению технологии создания анимационной графики в программе AdobeFlashCS3. В результате освоения практикума можно научиться рисовать изображения в программе Adobe Flash; импортировать векторную и растровую графику; преобразовывать импортированную растровую графику в векторную; работать с текстовыми полями; производить изменение формы, цвета и положения объекта (его частей) во времени и пространстве; создавать анимацию формы, анимацию движения по прямой и произвольной траектории; озвучивать ролик; работать со слоями; получать конечный продукт в виде flash-мультфильма

Пособие имеет функции самоучителя и справочника.

СОДЕРЖАНИЕ

Лабораторная работа №1 «Автоматическая анимация движения»…………………….4

Лабораторная работа №2 «Анимированное движение по заданной траектории»……7

Лабораторная работа №3 «Изменение свойств символа»……………………………….9

Лабораторная работа №4 «Импортирование звука»……………………………………10

Лабораторная работа №5 «Вставка графики»…………………………………………..11

Лабораторная работа №6 «Автоматическая анимация изменения формы»…………..12

Лабораторная работа №7 «Сложные анимированные символы»……………………..13

Лабораторная работа №8 «Анимация изменения формы для импортированных картинок»………………………………………………………………………………………….14

Литература…………………………………………………………………………………16

Л абораторная работа №1

«Автоматическая анимация движения»

Создадим клип - нарисованный Колобок перемещается по рабочему полю.

Запустите программу AdobeFlash и создайте новый файл ActionScript3.

Создадим новый символ и нарисуем Колобка. Для этого:

В менюWindow выберите Library

В меню Insert выберите Newsymbol или нажмите кнопку справа внизу окна Library.

В появившемся окне замените имя Symbol 1на Колобок. Выбираем тип MovieClip→ОК.

Нарисуйте колобка при помощи инструментов панелиTools (Рисование). Крестик (точка регистрации) должен находиться примерно в центре рисунка.

В рабочем окне щелкните кнопку Scene 1.

В окне Library возьмите пиктограмму нарисованного символа Колобок и тащите его на рабочее поле в верхний левый угол.

В меню Insert выберите Timeline →MotionTween для создания анимации типа движение.

Щелкните в окне монтажной линейки по первому кадру. Обратите внимание, что маркер на монтажной линейке находится на первом кадре и этот кадр выделен, а внутри его появилась жирная точка. Окно панели инструментов Frame будет выглядеть следующим образом:

НажмитеInsert →Timeline →Keyframe(клавишаF6), чтобы сделать этот кадр ключевым. На монтажной линейке маркер автоматически переместится на второй кадр.

Выделите колобка и переместите в правый нижний угол рабочего поля.

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

Проверьте анимацию, для этого в меню ControlвыберитеPlay или нажмите клавишу Enter. Если хотите, чтобы анимация была непрерывной, предварительно в менюControlвыберитеLoopPlayback (проигрывать по кольцу).

Вы можете изменить свойства клипа: частоту кадров в секунду, размеры высоты и ширины в пикселях, цвет фона. Для этого:

В меню Modify выберите Document… или щелкните дважды на кнопке внизу монтажной линейки .

В появившемся окне установите частоту кадров 24. Цвет фона выберите голубой.

Сохраните созданный файл в своей папке с именем Колобок.

Этот файл можно сохранить и в других форматах: для просмотра через проигрыватель Flash и через обозреватель InternetExplorer. Для этого:

ВменюFileвыберитеPublish Preview →Flash.

ВменюFileвыберитеPublish Preview →Default.

Л абораторная работа №2

«Анимированное движение по заданной траектории»

Зададим созданному ранее колобку заданную траекторию движения. Для этого мы будем работать со слоями.

Слоиможно представить как прозрачные пленки, сложенные в стопку друг на друга. Если на слое ничего нет, то сквозь него видны слои, расположенные под ним.

Откройте файл Колобок.fla.

Удалите кадры анимации на слое Layer 1, оставив только первый кадр с изображением Колобка. Для этого выделите эти кадры на монтажной линейки (начальный кадр удаления +Shift+конечный кадр удаления), щелкните на выделенномПКМ→RemoveFrames.

Теперь Вам понадобится направляющий слой к основному слою Layer 1 - MotionGuide(используя этот тип слоя в качестве «ведущего», можно заставить символы в ведомом слое двигаться по любому заданному пути).Для этогощелкните ПКМ на слое Layer 1 →AddMotionGuide.

Выделитепервый кадр слоя Guide:Layer 1.

Нарисуйте карандашом или кисточкой траекторию движения колобка. Рисовать линию начинайте примерно из середины символа (там, где находится крестик).

В50-м кадре в направляющем слое вставьте простой кадр (ПКМ на кадре→InsertFrame), а в 50 кадре основного слоя — ключевой кадр (ПКМ на кадре→ InsertKeyFrame). Монтажная линейка будет выглядеть следующим образом:

Выделитепервый кадр основного слоя создайте классическуюанимацию движения:щелкните ПКМ на кадре→CreateMotionTween, затем переместите Колобка на начало направляющей линии.

Выделите последний кадр в основном слое Layer 1. На монтажной линейке это будет выглядеть так:

Выделите и переместите Колобка в конечную точку траектории.

Проверьте анимацию (клавиша Enter).

Если анимация была сделана правильно, сделайте так, чтобы траектория движения колобка была скрыта. Для этого:

В слоеGuide:Layer 1 щелкните по точке, находящейся под изображением глаза. Вместо точки появится крестик, а в рабочем поле исчезнет изображение траектории.

Если вы хотите защитить слой от случайных изменений, то можете щелкнуть по точке под изображением замка. Точка изменится на замок.

Сохраните внесенные изменения в файлы Колобок.fla, Колобок.swf, Колобок.html.

Л абораторная работа №3

«Изменение свойств символа»

Зададим изменение размеров, цвета, прозрачности и повороты для Колобка. Для этого:

Откройте файл Колобок.fla.

Включите панель инструментов Main, выполнив следующие действия: Windows →Toolbars→Main.

Увеличьте количество кадров анимации до 170. Последний ключевой кадр переместите на отметку монтажной линейки 170.

Щелкните в монтажной линейке по любому кадру внутри движения, например по 10 кадру (выделится весь слой, а курсор изменит форму на изображение ).

Сделайте этот кадр ключевым. Монтажная линейка будет выглядеть так:

На панели инструментов Mainщелкните кнопку Scale. колобок станет выделенным.

Измените размер колобка.

Ключевые кадры внутри движения тоже можно перемещать. Переместите внутренний кадр на отметку монтажной линейки 20. Проверьте анимацию.

Сделайте следующий ключевой кадр, например 50 (клавиша F6).

На панели инструментов Main щелкните кнопку RotateandSkew . Задайте поворот Колобку.

Сделайте ключевые кадры с интервалом в 25-35 кадров. Задайте в них изменение формы и поворота Колобка.

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

На нижней панели Effect выставите цвет стиля Advanced и нажмите кнопку Settings, появится окно эффектов:

Разным ключевым кадрам самостоятельно задайте различные эффекты, изменяя параметры с помощью бегунков окна AdvancedEffects.

Проверьте анимацию.

Сохраните внесенные изменения в файлы Колобок.fla, Колобок.swf, Колобок.html.

Л абораторная работа №4

«Импортирование звука»

Добавим к нашему Колобку звуковое сопровождение:

Откройте файл Колобок.fla.

Добавьте еще один слой InsertвыберитеTimeline →Layer.

Выделите первый кадр этого слоя.

ВменюFileвыберитеImport…→Import to Library

Укажите путь к файлу и импортируйте файлпесенка.wav. В окне Library появится пиктограмма импортированной звукозаписи.

Возьмите этот значок (ЛКМ) и перетащите на рабочее поле. На монтажной линейке появится графическое изображение внедренной звукозаписи.

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

Щелкнув кнопку Edit, уменьшите масштаб просмотра и попробуйте укорачивать звукозапись.

Поставьте курсор на первый кадр и проверьте анимацию (нажмите Enter).

Сохраните внесенные изменения в файлы Колобок.fla, Колобок.swf, Колобок.html.

Л абораторная работа №5

«Вставка графики»

Добавим к нашему клипу фоновый рисунок:

Откройте файл Колобок.fla.

На монтажной линейке создайте новый слой.

Переместите его вниз под другие слои для того, чтобы Колобок двигался на фоне какой-нибудь статистической картинки.

Выделите первый кадр этого слоя.

Теперь можно либо нарисовать картинку, либо вставить уже нарисованную из файла или скопировать картинку из другого приложения. Рассмотрим последний вариант.

Импортируйте любую понравившуюся картинку, подходящую в качестве фона к движению Колобка, например картинку природы (File →Import…→ImporttoLibrary→укажите путь к картинке).

Если панель инструментов Main выключена, включите ее.

Растяните картинку до размеров рабочего поля с помощью кнопки Scale.

Если необходимо, подкорректируйте траекторию движения колобка

Проверьте анимацию.

Сохраните изменения в файлах.

Л

«Автоматическая анимация изменения формы»

Рассмотрим создание другого типа автоматической анимации, называемой Shapetweening (анимация типа «превращение» или изменение формы). Нарисуем облачко, летящее по небу и меняющее свою форму.

Откройте файл Колобок.fla.

Вставьте новый слой

В первом кадре нарисуйте облачко примерно в правой стороне рабочего поля.

Сделайте кадр ключевым (клавиша F6).

В нижнем окне Frame в поле TweenзадайтеShape, в поле Blend→Angular (ключевой кадр должен быть выделенным).

Монтажная линейка примет следующий вид.

Сделайте следующий ключевой кадр, например, 50-й.

В нижнем окне Frame в поле TweenзадайтеShape, в поле Blend→Angular (ключевой кадр должен быть выделенным).

В нем вырежьте нарисованное облачко и нарисуйте другое облачко, уже ближе к середине рабочего поля.

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

Проверьте анимацию.

Сохраните изменения в файлах.

Л абораторная работа №7

«Сложные анимированные символы»

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

! просмотреть сложную анимацию возможно только в проигрывателе Flash.

Создайте новый анимированный символ, назовите его Лучи.

Инструментом Карандаш нарисуйте лучи, задав анимацию типа изменение формы, примерно на 35-45 кадров с 5 ключевыми кадрами, где вы зададите изменение формы лучей, толщины и их цвета.

Создайте аналогично анимированный символ Улыбка

Создайте анимированный символ Глаза(анимацию делаем без зрачков во избежание ошибок). Если захотите сделать зрачки, то делайте их как отдельный символ.

Создайте символ Круг (это диск солнца).

Вставьте новый слой, в котором затем будете рисовать солнышко. Переместите слой, если необходимо так, чтобы облачко, пролетая, закрывало солнышко.

Выделите первый кадр и перетащите по очереди на рабочее поле символы Лучи, Круг, Глаза, Улыбка.

Теперь в меню Insert →Timeline →CreateMotionTween, автоматически появляется новый символTween 1 в окне Library. Переименуйте его в Солнышко (дважды ЛКМ на названии).

Задайте солнышку анимацию типа движение (по траектории).

Проверьте анимацию, выполнив Control →TestMovie.

Сохраните изменения в файлах.

Лабораторная работа №8

«Анимация изменения формы для импортированных картинок»

Запустите программу AdobeFlash и создайте новый файл ActionScript3.

Включите программу MSWord.

В коллекции MSOffice найдите картинку лягушки и скопируйте ее в буфер обмена.

ВоFlash вставьте лягушку из буфера в первый кадр.

Выделите первый кадр на монтажной линейке и выполните Modify→BreakApart, картинка преобразуется в рисунок.

Укажите вид анимации (изменение формы) в окнеFrame (Tween – Shape,Blend - Angular).

Сделайте следующий ключевой кадр (F6).

Переместите его на монтажной линейке на отметку25.

Во втором ключевом кадре вырежьте рисунок лягушки и вставьте картинку балерины.

Преобразуйте картинку в рисунок Modify→BreakApart и укажите вид анимации – изменение формы.

Проверьте анимацию.

Таким же образом задайте изменение формы тексту. Добавьте слой с текстом и в нем самостоятельно сделайте анимацию изменения слова ЛЯГУШКА в слово БАЛЕРИНА.

Импортируйте из MSWord картинку дерева, назовите символ Дерево.

ЩелкнитеModify – BreakApart для преобразования картинки в рисунок.

Используя инструмент LassoTool, выделите ветку дерева и вырежьте ее.

Добавьте новый слой и поместите в него ветку. С помощью инструмента SelectionTool переместите ветку. Назовите второй слой Ветка 1.

Примените к ветке анимацию типа движение (Insert→Timeline→CreateMotionTween). Назовите новый символ Ветка 1.

Анимируйте движение ветки (используя поворот).

Аналогично анимируйте другие ветки.

После того, как анимация всех символов закончена, выйдите из режима редактирования символа в Scene1, нажав синюю стрелочку

Из библиотеки символов перетащите значок дерева на рабочее поле. Дереву можно задать анимацию типа движение или оставить его статическим.

Проверьте анимацию, нажавCtrl+Enter.

Литература

1. Страница в Интернет http://flash-help.narod.ru/

Адрес публикации: https://www.prodlenka.org/metodicheskie-razrabotki/15121-sozdanie-animacionnyh-klipov-v-programme-adob