Основы анимации в Flash CS3, Motion guide

Уроки анимации в Adobe Flash
Аватара пользователя
admin
Администратор
Сообщения: 217
Зарегистрирован: 01 мар 2016, 12:32
Контактная информация:

Основы анимации в Flash CS3, Motion guide

Сообщение admin » 28 мар 2016, 18:42

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

1) как создавать направляющие движения (на направляющем слое)
2) как заставить мувиклип следовать по заданному пути (по направляющей движения)
3) как сделать направленную анимацию более реалистичной, и кое что ещё

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

Изображение


1. Создание простой моушен-твин анимации, которая потом будет следовать по направляющей

1.1 Создайте новый документ (File > New, выберите Flash File (ActionScript 3.0) (прим.: можете выбрать и AS2, это не важно, скриптов не будет), затем OK)
1.2 Сохраните свой документ, задав ему имя и выбрав место его хранения. Далее вы сможете сохранять его просто нажатием Ctrl+S – не забывайте это делать после любых значимых изменений в вашей работе. Лучше сохранять почаще, чем потерять вашу работу из-за глюка компьютера или скачка электричества.
Ок. начнём с создания мувиклипа. Вам нужно сделать моушен-твин анимацию, которая потом будет следовать по гайду (направляющей). Бумажный самолётик хорошо подойдёт для наших целей.

1.3 Выберите инструмент «линия» (N). Выберите тёмно-серый для цвета обводки (Stroke color) - у меня получился оттенок #646464. Включите привязку к объектам (Snap to Objects) и убедитесь, что рисование объектами (Object Drawing) выключено. Смотрите поясняющий скриншот.

Изображение


1.4 Щёлкните и начните рисовать линию вниз. Сделайте линию примерно в 60-65 пикселей.

Изображение


При включённой привязке к объектам вертикальная линия должна нарисоваться у вас без проблем

1.5 Выберите инструмент Zoom tool (Z) и приблизьте линию, которую только что нарисовали – для этого выделите инструментом Zoom tool область, которую желаете увидеть поближе.

Изображение


Так вам будет проще работать.

1.6 Снова используйте Line tool (N). Привязка к объектам - Snap to Objects – должна быть включена, об этом говорилось и ранее. Это такая маленькая иконка магнита внизу панели инструментов. Подвинув курсор поближе к верху линии, щёлкните и тащите новую линию влево и вниз. Вы автоматически начнёте рисовать из вершины существующей линии, благодаря опции Snap to Objects.

Изображение


1.7 И далее рисуйте ещё линии, как показано на рисунке, чтобы закончить левую половину самолётика.

Изображение


1.8 Теперь выделите весь рисунок, используя Selection tool (V)

Изображение


1.9 Скопируйте выделенное, нажав Ctrl+C , либо выбрав в мею Edit > Copy

1.10 Теперь вам нужно вставить в те же координаты копию рисунка половины самолётика. Сделайте это либо нажав сочетание клавиш Ctrl+Shift+V , либо выбрав в меню Edit > Paste in Place.На вид ничего не изменилось - но вы только что вставили точную копию рисунка поверх него самого. Чтобы проверить это – подвигайте копию с помощью стрелок влево и вправо на клавиатуре.

Изображение


Примечание: если вы щёлкните мышкой где-то на сцене, после того как вставили копию картинки – вы потеряете эту копию - копия объединится с оригиналом автоматически. Такие вот вещи происходят с графикой во флеш (именно с нарисованной, и не мувиклипами). Если вы не хотите потерять копию, просто переместите её туда, где она не будет пересекаться с оригиналом, и потом щёлкайте где угодно.

1.11 Для свежевставленной выделенной копией половины самолётика выберите в меню Modify > Transform > Flip Horizontal. (отразить по горизонтали)

Изображение


1.12 Переместите отражённую половину самолётика так, чтобы её вершина совпала с вершиной оригинальной половины. Вы можете сделать это с помощью стрелок на клавиатуре, но я рекомендую использовать Selection tool (V), потому что при включённой привязке к объектам, вершины состыкуются идеально, как показано на картинке ниже

Изображение


1.13 Если вы хотите придать реализма вашему самолётику, вы можете добавить немного градиентных переходов. Сделать это можно с помощью Paint Bucket tool (K)

Изображение


На рисунке показано меню Color, где настраивается градиент, его можно найти в меню Window > Color.

1.14 Верните увеличение на 100%

Изображение


прим.: или сделайте двойной клик на инструменте Zoom Tool

1.15 Выделите ваш рисунок, весь, все линии и заливки с помощью Selection tool (V), и сконвертируйте в мувиклип (Modify > Convert to Symbol). Назовите его «paper airplane» (или как вам угодно иначе), выберите тип: мувиклип, а также выберите центральный квадратик для точки регистрации (registration point). Последнее – не является обязательным, но упростит работу при создании моушен-твина. Кликните ОК.

Изображение


…и как только вы это сделаете, голубая обводка появится вокруг вашего новоиспечённого мувиклипа, и панель свойств (Properties inspector) покажет вам, что теперь вы имеете дело с мувиклипом, а не просто с графикой

Изображение


Теперь вы можете приступить к созданию простой моушен-твин анимации

1.16 Щёлкните правой кнопкой на 50 кадре, и выберите Insert Keyframe (или нажмите F6)

Изображение


1.17 Используйте Selection tool (V), чтобы подвинуть мувиклип. Просто кликните по нему и тащите в нужное место. Вы можете поставить его где угодно, потому что сейчас нам важно просто создать моушен твин, а положение самолётика в кадре пока не важно.

Изображение


1.18 Щёлкните правой кнопкой между ключевыми кадрами на временной шкале, и выберите Create Motion Tween

Изображение


если вы всё правильно сделали, на временной шкале появится непрерывная стрелочка на пурпурном фоне

Изображение


Если у вас стрелочка пунктирная… что же, ищите на демиарте уроки по моушен твинам

1.19 Назовите текущий слой «airplane» и замкните его.

Изображение


Молодцы! Теперь у вас есть всё необходимое для создания направленной анимации – простой моушен твин. Продолжим – и я покажу вам, как сделать сделать для него гайд.

2. Создание motion guide – направляющей движения

2.1 Кликните на иконку «Add Motion Guide», которая находится под слоями.

Изображение


Вы тут же увидите, как гайд добавился. Нижний слой (airplane) стал связанным с ним, стал «guided layer». Слой Airplain теперь направлен гайдом - слоем Guide: airplane. Это наглядно видно по иконкам – слой сместился вправо.

Изображение


также, длительность у слоя – гайда такая же, как и у слоя airplane50 кадров в данном случае.

2.2 Выберите карандаш - Pencil tool (Y), и на панели инструментов, в конце её, выберите настройку Smooth для рисования вашим карандашом.

Изображение


На панели свойств (Properties inspector) выберите тип линии: hairline, а также значение 100 для параметра Smoothing. Выберите любой цвет, какой вам нравится, гайд в результате будет невидим. Здесь выбран тип линии hairline чтобы было проще рисовать и править линию в деталях. (прим.: Вы можете выбирать любой тип линии, и любые настройки, рисуя карандашом или пером.)

Изображение


2.3 Щёлкните и начните рисовать линию карандашом, на слое Guide: airplane. Нарисуйте кривую, похожую на траекторию полёта бумажного самолётика. Я начинаю и заканчиваю линию за пределами сцены, чтобы создать ощущение, что самолётик летит в сцене, и исчезает за её пределами.

Изображение


3. создание направленной анимации
3.1 Теперь замкните слой Guide: airplane и отомкните слой airplane. Щёлкните на первом кадре в таймлайне слоя airplane, чтобы выбрать его содержимое.

Изображение


3.2 Кликните на «paper airplane» один раз с помощью Selection tool (V), чтобы выбрать его (прим.: он уже выбран вообще-то, после того, как вы щёлкнули на кадре)

3.3 Теперь вам нужно придвинуть этот мувиклип к начальной точке гайда – направляющей линии. Потащите мувиклип так, чтобы его registration point – точка регистрации – попала точно в начало гайда. Когда мувиклип уже привяжется к гайду, вы увидите чёрный жирный кружок рядом с курсором, как показано ниже

Изображение


Если привязка не происходит, проверьте, включена ли она:

Изображение


3.4 Кликните на другой ключевой кадр (конечный), чтобы выбрать его.

Изображение


3.5 Дальше проделайте похожие действия с мувиклипом в этом кадре: с помощью Selection tool (V) прикрепите самолётик к другому концу линии-гайда. Он тоже должен привязаться, также, как в прошлый раз.

Изображение


3.6 Давайте немного ускорим и сделаем плавнее нашу анимацию увеличив количество кадров в секунду (frame rate) в документе. Сделайте двойной клик на цифре frame rate – под слоями, чтобы открыть окошко свойств документа.

Изображение


Задайте frame rate = 24 fps, и щёлкните ОК

Изображение


3.7 Выберите в меню Control > Test Movie. Вы должны увидеть что-то похожее на это:

Изображение


Вааау! Мувиклип двигается по направляющей! Вы это сделали. Но тут есть один очевидный косяк. Мувиклип не поворачивается, как это должно происходить в реальности.Он должен поворачивать носовую часть вслед за изгибами траектории. Что ж, давайте я покажу вам, как просто это сделать. Вам нужно это сделать, потому что анимация уже в шаге от реалистичности.

3.8 Выберите снова первый ключевой кадр.

Изображение


3.9 Выберите инструмент трансформации - Free Transform tool (Q). Также отключите привязку к объектам - Snap to Objects, чтобы иметь полную свободу в трансформации, не ограничиваясь привязкой.

Изображение


3.10 Подведите курсор к любому из углов мувиклипа (если мувиклип не выбран, то вначале выберите его). Кликните, и начните вращать, до тех пор, пока нос самолётика не попадёт на траекторию пути (кривую, которая слоем выше).

Изображение


3.11 Выберите следующий ключевой кадр снова (последний кадр)

Изображение


3.12 Поверните нужным образом мувиклип и здесь, с помощью Free Transform tool (Q). Важный момент в том, что мувклип здесь должен быть сориентирован так, как будто он следовал за гайдом в течение всего пути – он должен быть повёрнут по его направлению.

Изображение


3.13 Теперь остался один последний момент, и мы получим готовую анимацию по направляющей. Снова выберите первый ключевой кадр (как в пункте 3.8. вы уже делали), и обратитесь к панели свойств (Properties inspector). Теперь здесь, поставьте галочку около свойства Orient to path. Убедитесь, что свойство включено, как на картинке:

Изображение


3.14 Тестируйте вашу флешку, выбрав Control > Test Movie (ctrl + enter), и вы увидите, что ваш самолётик движется реалистично, как вы видели в начале этого урока.

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

Автор : Luka
Перевод: wind-wings
Источник demiart.ru
Изображение

Вернуться в «Уроки Flash»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость