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

Создания нового документа ActionScript 3.0

Как обычно, создаем новый документ «Action Script 3.0» . На правой панели инструментов выбираем «Rectangle Tool» и размещаем его на сцене.

Полученый объект переводим в символ, выделив его инструментом «Selection tool» и нажав правую кнопку мыши.

Теперь на панели «timeline» нужно выбрать пятидесятый кадр и сделать его ключевым. Нажимаем правую кнопку мыши и вызываем контекстное меню, где выбираем «Insert Keyframe» .

Создадим направляющую, путь, по которому объект будет двигаться. Для этого нажимаем на слой правой кнопкой мышке и в появившемся контекстном меню выбираем «Add Classic Motion Guide» .

Должно получиться два таких слоя:

Теперь нужно на слое «Guide» нарисовать путь, по которому будет двигаться объект. При помощи инструмента «Pencil Tool» , который находится на правой панели, рисуем направляющую.

Если нарисованный путь получился немного неровным, то его можно сгладить при помощи инструмента «Smooth Tool» , который также как и карандаш находится на правой панели. Сначала используя инструмент «Selection Tool» дважды щелкните по направляющей, а затем нажмите «Smooth Tool» .

Размещаем объект для создания анимации движения

Теперь давайте разместим наш объект на нарисованном пути. Чтобы это сделать, встаньте на первый кадр слоя, возьмите объект при помощи «Selection Tool» и поднесите его к левому краю линии, он как бы «прилипнет» к нему, вернее присоединится опорная точка объекта к направляющей.

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

Теперь нужно создать промежуточные кадры, чтобы программа сама разместила объект там где нужно в каждом кадре. Чтобы это сделать просто выбираем любой средний кадр на слое, где расположен объект, и нажимаем правую кнопку мыши, выбираем «Create Classic Tween» .

В итоге мы должны получить два таких слоя:

Запускаем анимацию движения объекта

Посмотрим, что получилось. Переходим в главное верхнее меню «File -> Publish Preview -> Flash» или нажимаем ctrl+enter на клавиатуре. Чтобы посмотреть прямо в программе — нажмите клавишу enter.

Давайте сделаем так, чтобы объект «поворачивал» , когда пробегает по пути. Для этого выберите первый кадр на слое, где расположен объект, и немного его поверните используя инструмент «Free Transform Tool» , который находится на правой панели.

Теперь в свойствах объекта, находясь на первом кадре, выберите «Orient to path» .

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

Чтобы посмотреть, что получилось, нажмите ctrl+enter.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Онлайн калькуляторы