Тема: Анимация движения в системе Flash.
Тип урока : Урок-проект с элементами творческой работы.
Цель:
Образовательный аспект – развитие творческих способностей учащихся с помощью активного образного мышления, развитие умения работать с компьютером и информацией для расширения своих познаний.
Развивающий аспект – творческое применение своих знаний в области двухмерной компьютерной графики.
Цели урока: Познакомить учащихся с типами анимации. Сформировать умение создавать простейшую анимацию в системе Flash.
Формы организации учебно-познавательной деятельности учащихся:
- индивидуальная – каждый ученик создает индивидуальный проект фрагмента сказки «Колобок»;
- групповая – индивидуальные проекты учеников позволяют реализовать групповой проект сказки «Колобок». Работа на перспективу – показ сказки детям ДОУ и начальной школы в рамках развития социокультурного центра в школе.
План урока:
- Организация урока.
- Постановка проблемы урока.
- Получение сведений о классификации анимации во Flash (эвристическая беседа).
- Актуализация знаний по созданию рисованных объектов в системе.
- Демонстрация создания простой анимации.
- Практическая работа учащихся за компьютером.
- Подведение итогов урока.
- Домашнее задание.
ХОД УРОКА
1. Организация урока
Учитель проверяет готовность учеников к уроку.
2. Постановка проблемы урока
Рассмотрим некоторые объекты и выясним, каким из них вы отдаете предпочтения. Какие вам нравятся больше и почему?
Просмотр некоторых Web-страниц, слайдов презентаций с анимацией и без нее.
В ходе беседы выясняем, что красивее, симпатичнее сайты и слайды презентаций с анимацией.
Как создать анимацию – это и есть тема сегодняшнего урока (Приложение 1 ).
3. Получение сведений о классификации анимации во Flash (эвристическая беседа с демонстрацией. Приложение 1 )
Основное назначение системы во Flash – «оживление» рисованных изображений.
Овладев основными приемами работы в системе, вы сможете:
Создать эффективную презентацию или обучающую программу;
- сделать Web-сайт или внести «живую изюминку» в оформление вашего сайта, т.е. создание рекламных web роликов (баннеры);
- создать мультфильм;
- запрограммировать свою первую игру.
Прежде чем начинать что то делать на практике, давайте рассмотрим базовые понятия в анимации: кадр (frames), ключевой кадр,слой (layers), и временная шкала (timeline), символы (symbols ) (Приложение 1 ).
Анимация - это изменение свойств объекта с течением времени (Анимация – процесс изменения размера, положения, цвета или формы объекта во времени).
Кадр. Все фильмы состоят из кадров (фреймов). Каждый кадр содержит одно статическое изображение. Иллюзия движения создается благодаря незначительным изменениям в рисунках от одного кадра к другому. Кадр может быть как составленным вручную, так и сгенерированным Flash
Ключевой кадр – кадр доступный для обработки (отображается чёрным кружочком, если в нём есть изображение, и белым, если нет никакого рисунка). Кадр, в котором создатель фильма выполняет смену анимированного изображения.
Слой – это блок фильма, состоящий из отдельных изображений, из анимации со своей шкалой времени.
Временная шкала – поле, на котором отображается информация о слоях, о том какие кадры являются ключевыми, а какие генерирует Flash.
Во Flash анимация, с точки зрения создания , можно выделить следующие подвиды: покадровая анимация, автоматическая (трансформационная) анимация и анимация на основе сценариев . У каждого типа анимации есть свои преимущества и недостатки, сферы применения.
Покадровая анимация полностью состоит из ключевых кадров, причем содержимое кадров вы создаете сами. Это напоминает процесс создание мультфильмов, когда каждый кадр рисуется на отдельном листе и если у вас в мульте 5000 кадров, то соответственно вам придется нарисовать 5000 рисунков. (показ бумажного слайд шоу). Во Flash это сделать, конечно намного проще, чем на бумаге, но все равно это тяжелый труд, к тому же размер файла при покадровой анимации получается большим. Во flash покадровая анимация используется в тех случаях, когда задачу нельзя решить другими способами.
В трансформационной анимации основной труд при её создании выполняет Flash, что позволяет получить несложную анимацию. Автоматическое анимирование (так называемая tweened-анимация), при использовании которой автор создает только первый и последний кадры мультипликации, а Flash автоматически генерирует все промежуточные кадры.
Анимация на основе сценариев . Сценарий представляет собой описание поведения объекта на собственном языке Flash, который называется ActionScript.
С точки зрения способа построения анимация подразделяется на анимацию движения и анимацию изменения формы . Анимация движения выполняется над экземплярами обьекта и позволяет его переместить, изменить масштаб, трансформировать, прозрачность, наложить цвет; при этом форма обьекта остаётся неизменной. Анимации изменения формы работает непосредственно с рисунками и позволяет изменить один рисунок на другой, изменяя при этом его положение, размер и цвет.
Анимация формы
Сегодня мы познакомимся с принципами создания анимации формы.
В отличие от анимации движения, анимация формы, работает только с примитивами, то есть с формами, созданными с помощью инструментов рисования. Так же как и в анимации движения в одном слое не должно быть больше одной анимированной формы.
Анимация движения
Создание анимации движения отличается от покадровой анимации тем что нам не нужно каждый кадр создавать вручную, достаточно создать первый кадр анимации и последний, программа заполнит все промежуточные кадры автоматически. Нужно иметь в виду что анимация движения применима только к символам и на одном слое должно быть не более одного анимированного символа.
Другими словами, прежде чем приступить к созданию собственного “мультика”, следует определиться с выбором механизма его реализации.
4. Актуализация знаний по созданию рисованных объектов в системе.
Выяснить как можно создать объект, выбрать цвет фона и цвет контура фигуры, выделить объект, где располагаются свойства объектов (с демонстрацией на интерактивной доске ).
5. Демонстрация создания простой анимации.Алгоритм выполнения .
6. Практическая работа учащихся за компьютером
Создание мини-проекта по сказке «Колобок».
Комментарий для учителя. Каждому ученику выдается практическая работа для создания отдельного фрагмента сказки. Рекомендуется озвучить сказку «Колобок» заранее и разбить звуковой файл на отдельные сюжеты, чтобы в работе указать ученикам длительность анимации.
Практическая работа по теме «Простейшая анимация движения в системе Flash»
Вариант – 1
Задание . Картинка1.jpg) по тропинке катиться колобок и при этом звучат следующие слова:
Колобок полежал, полежал да и покатился с окна на лавку, с лавки на пол, по полу к двери, прыг через порог – и дальше по дорожке.
Звук занимает 9 секунд. 13 кадров – 1 секунда. Анимируйте картинку в течении всего этого времени (117 кадров) и экспортируйте фрагмент фильма в каталог D:/User/_ под именем побег.avi
Алгоритм выполнения
- Откройте программу Flash MX 2004 (D:/SCHOOL/ Flash MX 2004/*.exe).
- При помощи панели инструментов на рабочем поле создайте колобка из сказки.
- Добавьте фоновую картинку:
- Создайте новый слой, выбрав команду Вставить – Шкала времени – Слой (перейти на второй слой, щелкнув клавишей мыши на название слоя).
- Импортируйте фоновую картинку Файл – Импорт – Импортировать на стадию. (Картинку выбрать из каталога D:/FOTO/Колобок/Рисунок1.jpg).
- Измените размеры картинки, используя инструмент «свободная трансформация» , до размеров кадра.
Вариант – 2
Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка2.jpg) по тропинке катиться колобок навстречу зайцу и при этом звучат следующие слова:
Катиться колобок, а навстречу ему заяц:
- Не ешь меня, косой, я тебе песенку спою.
Вариант – 3
Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка3.jpg) колобок убегает от зайца и при этом звучат следующие слова: И покатился колобок дальше – только заяц его и видел.
Вариант – 4
Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка4.jpg ) по тропинке катиться колобок навстречу волку и при этом звучат следующие слова:
Катиться колобок по тропинке в лесу, а навстречу ему заяц:
- Колобок, колобок! Я тебя съем!
- Не ешь меня, серый волк, я тебе песенку спою.
Вариант – 5
Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка5.jpg ) колобок убегает от волка и при этом звучат следующие слова:
Вариант – 6
Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка6.jpg ) по тропинке катиться колобок навстречу медведь и при этом звучат следующие слова:
Катиться колобок по лесу, а навстречу ему медведь:
- Колобок, колобок! Я тебя съем!
- Ну где тебе, косолапому, съесть меня!
Вариант – 7
Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка7.jpg ) колобок убегает от медведя и при этом звучат следующие слова:
И опять покатился колобок – медведь только вслед ему посмотрел.
Вариант – 8
Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка8.jpg ) по тропинке катиться колобок навстречу лиса и при этом звучат следующие слова:
Катиться колобок, а навстречу ему лиса:
- Здравствуй, колобок! Спой мне песенку!
Колобок и запел свою песенку, Алиса слушает да все ближе подкрадывается.
Вариант – 9
Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка9.jpg ) колобок прыгает на нос лисе и при этом звучат следующие слова:
Славная песенка! – сказала лиса.- Да стара я стала – плохо слышу. Сядь ко мне на носочек да пропой еще разочек.
Вариант – 10
Задание . Создайте фрагмент сказки «Колобок», где на фоновой картинке (D:/FOTO/Колобок/Картинка10.jpg ) лиса съела колобка и при этом звучат следующие слова:
Колобок прыгнул лисе на нос и запел:
- Я колобок, колобок!..
Алиса его – ам! – и съела.
7. Подведение итогов урока
Четверг, 09 Октября 2014 г. 13:07
+ в цитатник
Многие из вас, те кто занимается флешками, умеют делать классическую анимацию движения. При этом объект помещается в определенную точку в первом ключевом кадре, а затем перемещается в другую ключевую точку. На Временной шкале между этими ключевыми точками создаётся определённое количество простых промежуточных кадров.
Объект анимации при этом движется из одной ключевой точки в другую строго по прямой линии.
Как же заставить объект анимации двигаться по заданной траектории. Для этого эту траектории, во - первых, надо конечно же задать. Во - вторых, привязать наш объект к этой траектории. Такая траектория во флеш называется Направляющей.
И так, разберёмся подробнее как же создать движение объекта по заданной траектории. Будем анимировать осенние листики.
Для этого создадим новый флеш документ Action Script 3
Файл - Создать
Далее на Временной шкале Основного рабочего поля (Монтажный кадр 1) создаём 2 слоя
1. Фон
2. Листики
Временная шкала Основного рабочего поля (Монтажный кадр 1) будет выглядеть следующим образом.
Сохраняем созданный проект под каким либо названием, например "Падающий лист"
В Библиотеку программы импортируем любую картинку с осенним фоном и файл AI "Лист", который можно скачать из вложения ниже 
Вложение:
Файл - Импорт - Импортировать в библиотеку
После загрузки в Библиотеке будут следующие файлы
Инструментом "Стрелка" на слой "Фон" на основном Рабочем поле Монтажный кадр 1 из Библиотеки перетаскиваем фоновую картинку и, либо изменяем размеры Рабочего поля под размеры картинки, либо трансформируем размеры картинки под размеры Рабочего поля.
После того как в диалоговом окне создания нового символа нажмёте "ОК", то попадаем в окно редактирования символа "Лист". Переименовываем Слой 1 на Временной шкале в "Анимация лист"
Из Библиотеки инструментом "Стрелка" на Рабочее поле символа "Лист" добавляем графический символ "Лист".
На Временной шкале на слое "Анимация лист" щелкаем в кадре 140 и, вызвав контекстное меню, выбираем пункт "Вставить ключевой кадр".
Между кадрами 1 и 140 появились промежуточные кадры. Теперь щелкаем на любом кадре между первым и сто сороковым и, в появившемся контекстном меню, выбираем пункт "Создать классическую анимацию движения". После этого автоматически такая анимация будет создана.
Добавленный на Рабочее поле листик, мы пока не трогаем, а продолжаем работать с Временной шкалой.
На Временной шкале щелкаем 140 (последний и ключевой) кадр нашей анимации и, вызвав контекстное меню, также выбираем пункт "Создать классическую анимацию движения". Таким образом мы включаем последний 140 ключевой кадр в созданную нами классическую анимацию движения.
Теперь пришло время создать траекторию по которой будет лететь наш объект "Падающий лист"
Для этого щелкаем по слою "Анимация лист" и, вызвав контекстное меню, выбираем пункт "Добавить направляющую классической анимации".
После этого мы увидим, что на Временной шкале появился новый слой - "Направляющая", а слой "Анимация лист" оказался в "подчинении" у этого слоя.
Теперь, траектория для движения объекта, созданная на слое "Направляющая", будет руководством к действию (движению) для слоя "Анимация лист", то есть вся классическая анимация движения созданная на слое "Анимация лист", будет происходит по траектории изображенной на слое "Направляющая".
Слой "Направляющая" при этом является рабочим и вся графика размещённая на нём при публикации флеш ролика отображаться не будет.
Итак создадим (нарисуем) на слое "Направляющая" какую - либо траекторию для падения осеннего листочка сверху вниз.
Для рисования траектории воспользуемся инструментом "Карандаш" в режиме "Режим карандаша со сглаживанием" и, выделив слой "Направляющая" и его первый кадр, изобразим кривую линию для необходимой траектории.
После того как направляющая линия создана, переходим на слой "Анимация лист", выделяем первый ключевой кадр и начинаем создавать классическую анимацию движения для падающего листика. Для этого Инструментом "Стрелка" помещаем листик в начало нарисованной нами траектории. При этом точка регистрации нашего листика (в нашем случае точка регистрации находится в центре) должна обязательно!!! находится на линии траектории направляющей.
При этом щелкните ещё раз на первом кадре слоя "Анимация лист" и убедитесь, что он выделен. Теперь откройте вкладку "Свойства" и найдите там раздел "Анимация". Проставьте галочки в чекбоксах, как указано на картинке.
На слое "Анимация лист" щёлкните 140 (последний) ключевой кадр и Инструментом "Стрелка" поместите наш осенний листик в конец нарисованной траектории. При этом точка регистрации графического объекта листик также должна находится на линии траектории движения.
Либо если привязка к "Направляющей" у вас сработает без всяких проблем, то когда вы щелкните последний кадр анимации, листочек автоматически сам переместиться в конец направляющей.
После этого ещё раз щелкните 140 кадр, чтобы убедиться, что он выделен и открыв вкладку "Свойства" в разделе "Анимация" также проставьте галочки в чекбоксах, как указано на картинке.
Ещё раз щёлкните по выбору любой кадр на слое "Анимация лист", например 40 кадр, и убедитесь, что наш листик двигается строго по нарисованной траектории.
Если всё нормально, то анимация "Падающего листа" по заданной траектории создана и можно вернуться на Основную Рабочую сцену - Монтажный кадр 1.
Находясь на Монтажном кадре 1, выделите слой "листики" и Инструментом "Стрелка" перетащите из Библиотеки на него видеоролик "Лист", поместив его в самом верху фоновой картинки.
Видеоролику "Лист" примените фильтр "Тень" со следующими параметрами. Напоминаю, что раздел "Фильтры" можно найти на вкладке "Свойства".
Зажав клавиши Shift+Ctrl можно размножить видеоролик "Лист" и получить несколько падающих листиков. С помощью Инструмента "Свободное преобразование" можно изменить размер и угол поворота видеоролика "Лист", чтобы листочки падали не совсем одинаково.
Зажав клавиши Ctrl+Enter просматриваем полученный в результате флеш ролик. Если всё устраивает, то сохраняем флешку как проект в формате FLA
Файл - Сохранить
Экспортируем флеш ролик для дальнейшей публикации
Файл - Экспорт - Экспортировать ролик
Лабораторная работа № 2
Информация
Анимировать объект – значит заставить его плавно изменять свои свойства. Состояние объекта характеризуется его размером, цветом, положением в пространстве, формой. При создании простейшей анимации объекта инструментами программы Flash изменяются эти свойства. Программа Flash позволяет рисовать плоские, двухмерные объекты.
При создании анимации необходимо учитывать и время. Для учета времени используется шкала времени. Каждая клеточка шкалы соответствует одной абстрактной единице времени. Это не минута и не секунда – это кадры (frames). Это момент времени, которому соответствует моментальный снимок состояния объектов.
Если шкала времени отсутствует на экране, то необходимо выполнить команду W indow → Tim eline (Окно → Монтажный стол)
Программа Flash позволяет создавать фильм, рисуя каждый кадр по отдельности, как в былые времена поступали художники-мультипликаторы. Такая анимация называется покадровой . Есть и другой тип анимации, когда создаются только начальный и конечный кадры некоторого фрагмента, а все промежуточные кадры программа достраивает сама. Такой тип анимации называется автоматической (tweened-анимация) .
Flash поддерживает следующие типы анимации:
ü Анимации движения. Можно воспользоваться элементами анимации движения, чтобы задать свойства объекта, такие как положение и альфа-прозрачность в одном кадре, а затем снова в другом кадре. Flash затем интерполирует значения свойств для кадров, находящихся в промежутке между указанными кадрами. Анимация движения полезна в тех случаях, когда анимация состоит из непрерывного движения или преобразования объекта. Анимация движения отображается на временной шкале как непрерывный диапазон кадров, который по умолчанию может быть выбран как один объект.
ü Классическая анимация. Классическая анимация похожа на анимацию движения, но более сложна в создании. Классическая анимация позволяет создавать некоторые анимированные эффекты, которых невозможно добиться с использованием диапазонов анимированных кадров.
ü Позы обратной кинематики. Позы обратной кинематики позволяют растягивать и поворачивать объекты фигур, а также соединять группы экземпляров символов, чтобы перемещать их одновременно, обеспечивая тем самым естественность движения. Можно разместить объект фигуры или связанные экземпляры различным образом в отдельных кадрах, а Flash произведет интерполяцию положений в промежуточных кадрах.
ü Анимация формы. При анимации формы в отдельном кадре на временной шкале рисуется форма, а в другом кадре эта форма изменяется, либо рисуется новая форма. Flash затем интерполирует формы для промежуточных кадров, создавая анимацию одной формы, перетекающей в другую.
ü Покадровая анимация. Такая техника анимации позволяет указывать различные объекты для каждого кадра временной шкалы. Эта техника используется для создания эффекта, при котором создается впечатление быстрого воспроизведения кадров фильма. Эта техника полезна при создании комплексной анимации, где графические элементы каждого кадра должны быть различны.
Идентификация анимаций на временной шкале
Flash отличает tween-анимацию от покадровой анимации на временной шкале путем показа различных индикаторов в каждом кадре с содержимым.
На временной шкале появляются следующие индикаторы содержимого кадра:
ü Диапазон кадров с синим фоном указывает на анимацию движения. Черная точка в первом кадре означает, что диапазону анимации присвоен целевой объект. Черные ромбы указывают последний кадр и другие ключевые кадры свойств. Ключевые кадры свойств - это кадры, содержащие изменения, явно определенные пользователем. Можно выбрать тип отображаемых ключевых кадров свойств, щелкнув диапазон анимации правой кнопкой мыши и выбрав из контекстного меню пункт «Показывать ключевые кадры» → тип. По умолчанию Flash отображает все типы ключевых кадров свойств. Все остальные кадры диапазона содержат интерполированные значения, относящиеся к свойствам анимации целевого объекта.
ü Диапазон кадров с зеленым фоном указывает на использование слоя позы обратной кинематики (IK). Слои позы содержат каркасы IK и позы. Все позы отмечены на временной шкале черными ромбами. Flash интерполирует положения каркаса в кадрах между позами.
ü Пунктирная линия означает, что классическая анимация движения прервана или неполна, например пропущен последний ключевой кадр.
ü Черная точка означает отдельный ключевой кадр. Содержимое кадров светло-серого цвета после отдельного ключевого кадра остается точно таким же, без изменений. Эти кадры содержат вертикальную черную линию и пустой прямоугольник в последнем кадре диапазона.
Пример 1. Анимация перемещения объекта
1. Нарисовать в углу кадра какой-нибудь объект, например, прямоугольник.
Первый кадр шкалы времени видоизменился – в нем появилась жирная черная точка. Это признак того, что кадр стал ключевым. В ключевом кадре система фиксирует объект вместе со всеми его свойствами. Только в ключевом кадре можно редактировать свойства объекта.
2. Щелкнуть правой кнопкой мыши по этому кадру и в открывшемся контекстном меню выбрать команду Create Classic Tween (Создать классическую анимацию движение) .
3. Вокруг объекта появилась голубая рамка, в его центре – окружность с крестом.
4. Рисованный объект превратился в так называемый символ.
Кадры, расположенные между начальным и конечным ключевыми кадрами, окрасились в серый цвет. Между ключевыми кадрами появилась сплошная стрелка.
6. В последнем ключевом кадре (он должен быть выделен – подсвечен черным цветом) инструментом Selection Tool (Указатель) переместить объект в новое положение, например, в другой угол кадра.
Описание перемещения объекта закончено. Надо проверить, правильно ли все получилось. Отменить выделение объекта, щелкнув мышкой вне его границ. Нажать клавишу Enter – объект начал движение.
Для смены скорости движение объекта надо переместить конечный ключевой кадр: для ускорения движения – влево (уменьшая время, отведенное на перемещение), для замедления – вправо (увеличивая диапазон времени, в течение которого происходят изменения характеристик объекта).
Чтобы передвинуть ключевой кадр необходимо выполнить следующие действия:
ü выделить слой, на котором находится объект;
ü навести курсор мыши на ключевой кадр и зажать клавишу Ctrl (курсор превратится в двунаправленную стрелку);
ü нажать левую кнопку мыши и, не отпуская ее, передвинуть кадр.
Пример 2. Анимация изменения размера объекта
1. Нарисовать объект, например, прямоугольник и применить к нему изложенные выше правила анимации:
ü в первом ключевом кадре создать анимацию – Create Motion Tween (Создать анимацию движения) ;
ü в последнем ключевом кадре анимации – Insert Key frame →Zoom (Вставить ключевой кадр→Изменить масштаб) .
2. Выделить последний ключевой кадр и изменить размер объекта в 1,5 – 2 раза с помощью инструмента Free Transform Tool (Свободная трансформация)
3. Нажать клавишу Enter.
Пример 3. Анимация изменения цвета объекта
1. Создать новый файл, нарисовать объект и применить к нему правила создания анимации классического движения.
2. Находясь в конечном ключевом кадре, выделить объект, т.е. щелкнуть по нему левой кнопкой мыши при активном инструменте Selection Tool (Указатель)
В панели Properties (Свойства) появится поле Color Effect (Цветовой эффект).
Пример 4. Анимация изменения прозрачности объекта
1. Создать новый файл, нарисовать объект и применить к нему правила создания анимации движения.
2. Находясь в конечном ключевом кадре, выделить объект.
В панели Свойства появится поле Color Effect (Цветовой эффект).
 |
Если в раскрывающемся списке остановиться на варианте Alpha (Прозрачность), появится дополнительное поле, в котором можно задать значение прозрачности в процентах (100% - абсолютно непрозрачный цвет; 0% - полная прозрачность).
Анимацию движения (motion-tweened) также можно применять к экземплярам, группам или текстовым блокам, при этом Flash поддерживает расчет промежуточных кадров при перемещении, изменении размера, поворота и скоса объектов. Дополнительно можно изменять цвет экземпляров объектов или текста, применяя градиентную смену цветов или изменяя их прозрачность. Чтобы выполнить такие изменения для группы или текстового блока, их предварительно следует преобразовать в символы командой Insert > Convert to Symbol (Вставка > Преобразовать в символ). При этом преобразуемый объект становится экземпляром этого символа.
Создать анимацию движения можно двумя способами:
- Создать начальный и конечный ключевые кадры и для начального кадра установить значение Motion (Движение) в раскрывающемся списке Tweening (Расчет) на панели Frame (Кадр).
- Создать начальный ключевой кадр, затем выполнить команду Insert > Create Motion Tween (Вставка > Рассчитать движение) и переместить объект в новую позицию на сцене. При этом Flash автоматически создаст заключительный ключевой кадр.
Рис. 4.10. Результат расчета промежуточных кадров анимации
При каждом изменении положения ключевых кадров либо изменении их содержимого Flash автоматически рассчитывает промежуточные кадры.
Рассмотрим последовательность действий при создании анимации движения с помощью задания параметров на панели Frame (Кадр):
- Выделяем имя слоя, чтобы сделать его текущим, и выделяем один из ключевых кадров слоя, где должна начаться анимация.
- Создаем на рабочем столе экземпляр, группу или текстовый блок либо перетаскиваем экземпляр символа из окна библиотеки. Рисованный объект следует преобразовать в символ.
- Создаем завершающий ключевой кадр, определяющий длину последовательности кадров.
- Чтобы изменить экземпляр, группу или текстовый блок в последнем кадре, можно выполнить следующее: переместить их в новую позицию, изменить размер, угол поворота или скоса, изменить цвет экземпляра или текста.
- Выполняем команду Window > Panels > Frame (Окно > Панели > Кадр), чтобы открыть панель Frame (Кадр). В раскрывающемся списке Tweening (Расчет) выбираем значение Motion (Движение).
- При изменении размера объекта следует установить флажок Scale (Масштабировать).
- Значение Easing (Плавность) задаем в диапазоне от -100 до 100, определяя тем самым скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные - быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.
- Вращение можно задать выбором значения из раскрывающегося списка Rotate (Поворот). По умолчанию вращения нет. Значение CW соответствует вращению по часовой стрелке, a CCW - против, с указанием требуемого числа оборотов. Это вращение будет добавлено к повороту объекта, заданному на шаге 4.
- Флажок Orient to Path
- Флажок Synchronize
- Snap (Привязка) фиксирует на ней анимируемый экземпляр.
Рис. 4.11. Выбор параметров анимации движения
Рассмотрим последовательность действий при создании анимации по команде Create Motion Tween (Рассчитать движение):
- Выделяем пустой ключевой кадр и изображаем на рабочем столе объект или перетаскиваем на него экземпляр символа из окна библиотеки.
- Выполняем команду Insert > Create Motion Tween (Вставка > Рассчитать движение). Изображенный на первом шаге объект будет автоматически преобразован в символ, которому присвоено имя tweenl. Последующим объектам будут присваиваться имена tween2, tween3 и т. д.
- Щелчком указываем кадр, где должна завершиться анимация, и выполняем команду Insert > Frame (Вставка > Кадр).
- Перемещаем объект, экземпляр или блок текста в желаемую позицию. Изменяем его размер и угол поворота, если это требуется. После всех изменений снимаем с объекта выделение. В конце последовательности кадров автоматически появляется ключевой кадр.
- Выделяем конечный ключевой кадр последовательности и выполняем команду Window > Panels > Frame (Окно > Панели > Кадр). На открывшейся панели Frame (Кадр) автоматически должно появиться значение Motion (Движение).
- Если был изменен размер, то следует установить флажок Scale (Масштабировать).
- Значение Easing (Плавность) задается в диапазоне от -100 до 100, определяя скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные - быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.
- Вращение задается выбором значения из раскрывающегося списка Rotate (Поворот). По умолчанию указывается значение Auto (Автоматически), определяемое поворотом объекта на шаге 4. Значение CW соответствует вращению по часовой стрелке, a CCW - против, с указанием требуемого числа оборотов. Это вращение будет добавлено к повороту, заданному на шаге 4.
- Флажок Orient to Path (Ориентация на траекторию) устанавливается в случае, если задана криволинейная траектория движения.
- Флажок Synchronize (Синхронизировать) позволяет синхронизировать число кадров анимации с числом экземпляров графики, если они различны.
- При заданной траектории движения флажок Snap (Привязка) фиксирует на ней анимируемый экземпляр.
Как создать анимацию движения в Фотошопе?
В данном уроке мы научимся создавать простую анимацию движения объекта в Фотошопе .
Создадим новый документ размером 200 на 200 пикселей с прозрачным фоном. Для того, чтобы создать новый документ, выберем пункты меню «Файл» - «Новый», зададим ему ширину и высоту, и прозрачный фон. На панели инструментов выберем инструмент «Кисть», зададим ей главный диаметр – 15 пикселей и любой цвет. Теперь при помощи данного инструмента нарисуем траекторию, по которой будет двигаться наш объект.
Затем создадим новый слой.
При помощи инструмента «Кисть» аналогичным образом нарисуем насекомое, уменьшив немного размер кисти и изменив её цвет.
Теперь следует изменить положение насекомого таким образом, чтобы оно соответствовало направлению его движения. Для этого выберем пункты меню «Редактировать» - «Трансформирование» - «Поворот».
Создадим дубликат слоя с насекомым. Для этого щёлкнем по слою правой кнопкой мыши и выберем «Создать дубликат слоя». Зададим полученному слою произвольное имя. Далее немного изменим положение насекомого, снова применив к полученному слою «Трансформирование» - «Поворот».
Теперь будем повторять следующие действия: создание дубликата предыдущего слоя и изменение положения нашего насекомого таким образом, чтобы он «продвигался» вперёд по своей траектории. Данные действия будем повторять такое количество раз, пока не будет заполнена вся траектория движения.
Когда вся траектория будет «заполнена», перейдём к созданию анимации. Для этого выберем «Окно» - «Анимация».
В появившемся окне «Animation» на данный момент находится один кадр.
Сделаем все слои, кроме слоя с траекторией и слоя с насекомым, находящимся в начальном положении, невидимыми. Для того, чтобы сделать слой видимым или невидимым, нужно щёлкнуть мышью на «глаз», находящийся перед слоем в палитре слоёв. По умолчанию все слои являются видимыми.
Далее при создании каждого нового кадра анимации необходимо сделать видимым новый слой, предварительно отключив видимость предыдущего. Данные действия стоит выполнять до тех пор, пока не будет пройден весь путь.
Теперь выберем все имеющиеся кадры, зажав предварительно клавишу «Ctrl». Зададим время задержки для каждого кадра 0,2 секунды и сделаем слой с траекторией невидимым.
Анимация движения готова. Теперь сохраним полученное анимированное изображение. Для этого выберем пункты меню «Файл» - «Сохранить для web» и зададим файлу любое имя.
(0)| 1. | Простая текстовая анимация | 1:48 | 1 | 4175 | |
| 2. | Переливающийся текст | 2:44 | 0 | 5811 | |
| 3. | Мигание картинки | 1:51 | 0 | 2494 | |
| 4. | Сверкающие фары | 2:26 | 0 | 4242 | |
| 5. | Анимация дождя | 2:12 | 0 | 2095 | |
| 6. | Падающий Снег | 2:33 | 0 | 5332 | |