Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Основы анимации


С помощью этого простого урока вы изучите очень полезную для анимации технику: как используя направляющие движения (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) выключено. Смотрите поясняющий скриншот.
alt
1.4 Щёлкните и начните рисовать линию вниз. Сделайте линию примерно в 60-65 пикселей.
alt
При включённой привязке к объектам вертикальная линия должна нарисоваться у вас без проблем

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

1.6 Снова используйте Line tool (N). Привязка к объектам - Snap to Objects – должна быть включена, об этом говорилось и ранее. Это такая маленькая иконка магнита внизу панели инструментов. Подвинув курсор поближе к верху линии, щёлкните и тащите новую линию влево и вниз. Вы автоматически начнёте рисовать из вершины существующей линии, благодаря опции Snap to Objects.
alt
1.7 И далее рисуйте ещё линии, как показано на рисунке, чтобы закончить левую половину самолётика.
alt
1.8 Теперь выделите весь рисунок, используя Selection tool (V)
alt
1.9 Скопируйте выделенное, нажав Ctrl+C , либо выбрав в мею Edit > Copy

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

1.11 Для свежевставленной выделенной копией половины самолётика выберите в меню Modify > Transform > Flip Horizontal. (отразить по горизонтали)
alt
1.12 Переместите отражённую половину самолётика так, чтобы её вершина совпала с вершиной оригинальной половины. Вы можете сделать это с помощью стрелок на клавиатуре, но я рекомендую использовать Selection tool (V), потому что при включённой привязке к объектам, вершины состыкуются идеально, как показано на картинке ниже
alt
1.13 Если вы хотите придать реализма вашему самолётику, вы можете добавить немного градиентных переходов. Сделать это можно с помощью Paint Bucket tool (K)
alt
На рисунке показано меню Color, где настраивается градиент, его можно найти в меню Window > Color.

1.14 Верните увеличение на 100%
alt
прим.: или сделайте двойной клик на инструменте Zoom Tool

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

1.16 Щёлкните правой кнопкой на 50 кадре, и выберите Insert Keyframe (или нажмите F6)
alt
1.17 Используйте Selection tool (V), чтобы подвинуть мувиклип. Просто кликните по нему и тащите в нужное место. Вы можете поставить его где угодно, потому что сейчас нам важно просто создать моушен твин, а положение самолётика в кадре пока не важно.
alt
1.18 Щёлкните правой кнопкой между ключевыми кадрами на временной шкале, и выберите Create Motion Tween
Основы анимации
если вы всё правильно сделали, на временной шкале появится непрерывная стрелочка на пурпурном фоне
Основы анимации
1.19 Назовите текущий слой «airplane» и замкните его.
alt
Молодцы! Теперь у вас есть всё необходимое для создания направленной анимации – простой моушен твин. Продолжим – и я покажу вам, как сделать сделать для него гайд.

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

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

2.2 Выберите карандаш - Pencil tool (Y), и на панели инструментов, в конце её, выберите настройку Smooth для рисования вашим карандашом.
alt
На панели свойств (Properties inspector) выберите тип линии: hairline, а также значение 100 для параметра Smoothing. Выберите любой цвет, какой вам нравится, гайд в результате будет невидим. Здесь выбран тип линии hairline чтобы было проще рисовать и править линию в деталях. (прим.: Вы можете выбирать любой тип линии, и любые настройки, рисуя карандашом или пером.)
alt
2.3 Щёлкните и начните рисовать линию карандашом, на слое Guide: airplane. Нарисуйте кривую, похожую на траекторию полёта бумажного самолётика. Я начинаю и заканчиваю линию за пределами сцены, чтобы создать ощущение, что самолётик летит в сцене, и исчезает за её пределами.
Основы анимации
3. создание направленной анимации
3.1 Теперь замкните слой Guide: airplane и отомкните слой airplane. Щёлкните на первом кадре в таймлайне слоя airplane, чтобы выбрать его содержимое.
Основы анимации
3.2 Кликните на «paper airplane» один раз с помощью Selection tool (V), чтобы выбрать его (прим.: он уже выбран вообще-то, после того, как вы щёлкнули на кадре)

3.3 Теперь вам нужно придвинуть этот мувиклип к начальной точке гайда – направляющей линии. Потащите мувиклип так, чтобы его registration point – точка регистрации – попала точно в начало гайда. Когда мувиклип уже привяжется к гайду, вы увидите чёрный жирный кружок рядом с курсором, как показано ниже
Основы анимации
Если привязка не происходит, проверьте, включена ли она:
alt
3.4 Кликните на другой ключевой кадр (конечный), чтобы выбрать его.
Основы анимации
3.5 Дальше проделайте похожие действия с мувиклипом в этом кадре: с помощью Selection tool (V) прикрепите самолётик к другому концу линии-гайда. Он тоже должен привязаться, также, как в прошлый раз.
Основы анимации
3.6 Давайте немного ускорим и сделаем плавнее нашу анимацию увеличив количество кадров в секунду (frame rate) в документе. Сделайте двойной клик на цифре frame rate – под слоями, чтобы открыть окошко свойств документа.
alt
Задайте frame rate = 24 fps, и щёлкните ОК
alt
3.7 Выберите в меню Control > Test Movie. Вы должны увидеть что-то похожее на это:
Вааау! Мувиклип двигается по направляющей! Вы это сделали. Но тут есть один очевидный косяк. Мувиклип не поворачивается, как это должно происходить в реальности.Он должен поворачивать носовую часть вслед за изгибами траектории. Что ж, давайте я покажу вам, как просто это сделать. Вам нужно это сделать, потому что анимация уже в шаге от реалистичности.
3.8 Выберите снова первый ключевой кадр.
alt
3.9 Выберите инструмент трансформации - Free Transform tool (Q). Также отключите привязку к объектам - Snap to Objects, чтобы иметь полную свободу в трансформации, не ограничиваясь привязкой.
alt
3.10 Подведите курсор к любому из углов мувиклипа (если мувиклип не выбран, то вначале выберите его). Кликните, и начните вращать, до тех пор, пока нос самолётика не попадёт на траекторию пути (кривую, которая слоем выше).
Основы анимации
3.11 Выберите следующий ключевой кадр снова (последний кадр)
<!-- ALIGN begin -->
alt
3.12 Поверните нужным образом мувиклип и здесь, с помощью Free Transform tool (Q). Важный момент в том, что мувклип здесь должен быть сориентирован так, как будто он следовал за гайдом в течение всего пути – он должен быть повёрнут по его направлению.
alt
3.13 Теперь остался один последний момент, и мы получим готовую анимацию по направляющей. Снова выберите первый ключевой кадр (как в пункте 3.8. вы уже делали), и обратитесь к панели свойств (Properties inspector). Теперь здесь, поставьте галочку около свойства Orient to path. Убедитесь, что свойство включено, как на картинке:
alt
3.14 Тестируйте вашу флешку, выбрав Control > Test Movie (ctrl + enter), и вы увидите, что ваш самолётик движется реалистично, как вы видели в начале этого урока.

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


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.