Движение по заданной траектории. Урок для Adobe Flash

В качестве первого шага при создании анимации движения создаем для нее отдельный слой (правило "каждому анимированному объекту - отдельный слой" остается в силе). Затем в пустой ключевой кадр этого слоя (такой кадр можно создать клавишей F7 в любом месте слоя) помещаем или создаем объект анимации: группу, текстовый блок или экземпляр символа.

На достаточном удалении по линейке кадров (простой подсчет: частота кадров, умноженная на секунды. Т е. если анимация будет идти 3 секунды, надо найти 36-й кадр) с помощью клавиши F6 создаем копию этого ключевого кадра. Здесь будет конечная фаза анимации.

Редактируя в этом ключевом кадре изменения расположения, размеров, пропорций или ориентации объекта анимации, получим конечную фазу анимации. Более "глубокие" виды редактирования, например с применением режима редактирования групп или с применением команды меню "Разделить" - не допускаются. Начальная и конечная фазы анимации должны быть получены из одного и того же объекта.

Перейдем к первому ключевому кадру, щелкнув в ячейке кадра. В панели свойств выберем из списка "Анимация - Движение". Такой выбор, как хорошо видно на рис. 7.3, немедленно определяет сиреневый цвет промежуточных кадров временной шкалы, и появляется стрелка, соединяющая начало и конец анимации. Если вместо стрелки появляется штриховая линия, значит, что-то сделано не так и анимации скорее всего не будет. Даже если анимация и получится, очевидно, сбой произойдет позднее. Вот некоторые причины ошибки: в кадре находится неподходящий объект (например, просто несгруппированный рисунок), в кадре сохранились "остатки" каких-то объектов, движение применяется, например, к двум группам сразу. Взгляните на панель свойств кадра: если там появилась желтая треугольная кнопка с предупреждающим знаком (!), то Flash пытается сообщить вам об ошибке.

Рис. 7.3. Временная линейка с раскадровкой анимации движения

При выборе "Движение" в панели свойств открываются дополнительные параметры настройки "анимации движения" (рис. 6 4).

Рис. 7.4. Панель свойств при выборе анимации движения

Чтобы анимация шла корректно, проследим за тем, чтобы был установлен флажок "Масштаб", иначе не будет возможности изменения пропорций.
При выборе положительных значений параметра "Замедлить" анимация будет идти замедленно, а при выборе отрицательных - ускоренно.
В списке "Поворот" можно предусмотреть принудительный поворот по часовой стрелке или против. В окошке рядом можно задать количество таких принудительных оборотов объекта в процессе анимации.

Изменение положения центра вращения можно изменить инструментом "Свободное преобразование".

Заставим объект двигаться по кругу.

Начнем с того, что нарисуем в первом кадре квадрат (звезду, круг…). Удалим у фигуры контур (если он нарисован).
Сгруппируем рисунок. Зачем? У нас всего один объект? Но этот объект - не группа, не текстовый блок и не экземпляр символа. Поэтому - группируем.
Выделим группу инструментом преобразования и перенесем центр будущего вращения на некоторое расстояние, а сам объект-группу сдвинем от центра монтажного стола.
Оценим длительность анимации - если наша анимация будет длиться в течении 4-6 кадров, даже компьютер не сможет сделать ее плавной. Условимся, что в данном случае нам "хватит" 30 кадров.
Перейдем в тридцатый кадр. Вставим ключевой кадр - копию первого кадра - с помощью клавиши F6.
Вернемся в первый кадр.
В панели свойств кадра выберем анимацию движения. В дополнительном списке "Поворот" обязательно выберем принудительное вращение либо по часовой, либо против часовой стрелки. Количество принудительных оборотов - один.

Вот и все. Просмотрим (протестируем) фильм. Если требуется, внесем изменения. Да, внесем. Причем такие: в некоторой точке наш объект должен уменьшиться, а потом вернуться в первоначальный размер. Для этого:

поставим считывающую головку в середину "сиреневой полоски" на временной шкале;
на монтажном столе видим некоторое промежуточное положение нашего объекта. В этом месте нет ключевого кадра, но его легко сделать, просто выполнив одним из способов вставку ключевого кадра;
во вновь созданном ключевом кадре изменим масштаб нашего объекта;
можно тестировать фильм.

Можно создать анимацию движения двумя способами:

o с помощью панели свойств кадра;

o с помощью команды "Создать анимацию движения" контекстного меню по правой кнопке мыши на кадре.

Для анимации движения с помощью команды контекстного меню выполняем следующие действия:

o Рисуем или вставляем любой объект в ключевой кадр.

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

o Создаем последний ключевой кадр в анимации движения и перемещаем, трансформируем объект.

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

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

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

18. Щелкнуть правой кнопкой мыши на имени слоя, содержащего анимацию движения. В контекстном меню выбрать "Добавить путеводитель" или щелкнуть по соответствующей пиктограмме внизу слева.

19. В результате в списке слоев появится новый слой, помеченный специальным значком (рис. 7.5), а имя слоя с анимацией сдвинется вправо - признак того, что этот слой стал ведомым.

20. Щелкнуть на имени слоя-путеводителя, чтобы сделать его активным.

21. В ключевом кадре этого слоя любым инструментом рисования контуров нарисовать траекторию движения объекта. Эта линия не должна содержать пересекающиеся участки, разрывы и не должна быть замкнутой.

22. Выделить ключевые кадры анимации и в панели свойств кадра (включив анимацию движения) задать:

23. "Ориентировать по пути", если нужно сориентировать ось симметрии объекта по направляющей линии;

24. "Привязать", так как надо привязать точку регистрации объекта к направляющей движения (Без этого параметра объект не захочет двигаться по кривой!).

Протестировать фильм.

Рис. 7.5. Создание траекторий движения

Основные ошибки при направлении объекта по заданному пути две: учащиеся не привязывают объект во втором ключевом кадре или направляющая линия имеет мелкие (видимые только при большом увеличении) разрывы.

Выполним еще одно мини-упражнение - движение карандаша по бумаге. Для этого:

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

Обратите внимание: траектория пути объекта невидима в режиме тестирования фильма и не будет видна в готовом фильме. Если вы хотите видеть траекторию в фильме, ее надо скопировать и вставить на любой другой (видимый) слой (в меню редактирования существует команда "Вставить на место").

Вот и все! Основы автоматической анимации в программе Flash нами изучены. Осталось только познакомиться с более сложными приемами, чтобы стать настоящими профессионалами.

Примерные вопросы для контроля

Как отредактировать текст?
Как превратить текст в "нарисованные буквы"?
Для каких целей применяют анимацию движения?
Чем анимация движения отличается от анимации формы?
Чем анимация движения отличается от пошаговой анимации?
Для каких объектов можно создать анимацию движения?
Каким образом задаются настройки анимации движения?
Для чего и как создается слой-путеводитель?

8. Практическая работа: Пляшущие человечки:

Жизнь - движение. Можно анимировать шарики, круги, прямоугольники, линии и другие фигуры… Но давайте замахнемся на грандиозную задачу: заставим двигаться (танцевать) "человечка".

Что надо знать и уметь, чтобы выполнить задание: уметь пользоваться инструментами рисования, уметь редактировать векторные объекты, знать основы создания покадровой анимации и анимации движения.

Как создать анимацию движения в Фотошопе?

В данном уроке мы научимся создавать простую анимацию движения объекта в Фотошопе .

Создадим новый документ размером 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

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

Итак, возьмем фотографию с очаровательными собачками и начнем создавать анимацию.

1-Файл открыть.

Теперь нужно сделать две копии нижнего слоя.

3-Слой- создать дубликат слоя. И еще создать дубликат. В окне слоев теперь три слоя.

4-Активировать средний слой (кликнуть по нему в окне слоев). А на верхнем отключить глазок, кликнув по глазку.

5-Фильтр-пластика. В окне фильтра выбрать инструмент "скручивание по часовой стрелке" , размер кисти 200.(У Вас может быть другой размер, кисть должна быть такая, чтобы в нее входила область трансформирования).

Навести кисть на морду собаки и нажать на левую кнопку мыши, если результат не устроит, кликните по полоске "восстановить все" и повторите попытку и ok. Затем перейти к следующему слою.

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

7-Фильтр-пластика. Выбрать инструмент "деформация" , размер кисти 80.

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

Наверное, Вы заметили, что вместе с поворотом головы собаки смещается и фон возле нее.

А фон должен быть неподвижный. Часть неподвижного фона возьмем с нижнего слоя.

8-Активировать нижний слой.

9- На панели инструментов выбрать "перо" и аккуратно выделить часть фона возле головы собаки.(Выделить можно и инструментом лассо, если хорошо им владеете).

Как только контур соединится, он примет такой вид:

10-В окне слоев кликнуть по слову "контур". Затем правой кнопкой мыши- по области "рабочий контур" и выбрать "образовать выделенную область", в появившемся поставить окне радиус растушевки -0, и нажать "ok"

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

11-Слой-новый-скопировать на новый слой.

12-В окне слоев захватить мышкой этот слой и, не отпуская левой кнопки мыши, переместить его на самый верх. Теперь фон будет неподвижен.

Перейдем к анимации.

13-В окне анимации поставить на первом кадре время 0,2 сек и сделать 4 копии кадра, нажимая на значок копирования.

14-В окне анимации кликнуть по первому кадру. Перейти в окно слоев.

15-В окне слоев у нас четыре слоя. Отключить глазок (кликнуть по глазку) на втором слое и на третьем.

16-В окне анимации кликнуть по второму кадру,

а в окне слоев включить глазок на втором слое.

Тема: Анимация движения в системе 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. Подведение итогов урока

Лабораторная работа № 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% - полная прозрачность).

Возможно, будет полезно почитать: