Обучающие статьи

Урок Анимация автомобиля

В этом уроке художник-аниматор Максим Петрик расскажет как работать с анимацией типа “Classik Tweene”. Как экспортировать изображения, оптимизировать его качество. Вы узнаете как работать с символами в анимации, что из себя представляют символы в анимации, и зачем они нужны. Так же Вы научитесь анимации вращения, анимации движения и анимации деформации символов при помощи анимации типа “Classik Tweene” 

Глава1. Концепт.

Привет, на этот раз приступим уже ближе к делу =) . я предложу сегодня нарисовать спорт кар и его   анимировать. Урок будет не сложный, и думаю вам понравится.

Итак, с чего начнём. Запомните, поскольку в реальности, если вы хотите заработать, у вас будет заказчик. А у него есть свои представления – “что такое красиво, вкусно, и как это есть”, поэтому художнику приходят на помощь референсы. Кто не знает – это набор картинок, фотографий зарисовок… и прочего. Что объясняет в каком стиле, цветовой гамме, что и как рисовать (всегда их требуйте, чтоб не было разногласий, или подбирайте сами но утверждайте у заказчика). Итак, подбираем референсы. Допустим вот эту тачку

 Урок Анимация автомобиля

теперь откроем любой растровый графический пакет и немного по варганим =). Я использую, как вы помните, Krita и стараюсь рисовать при размере картинки не менее 2048×1536 pix. Так получаются четче линии. И еще, чтоб рука не дрожала – не налегайте на кофе =). В программе Krita  есть замечательная функция рисовать сглажеными линиями, так что если у вас чуть дрогнула рука при обводке, ничего страшного. Но это, я наверное расскажу как нибудь в следующий раз.

Продолжим: я не буду вырисовывать блики ка на фото, мне это сейчас не важно. Выберу палитру для тачки,

 Урок Анимация автомобиля

получится как то вот так. Можно было бы нарисовать машину  в векторе во Flash, но это мы сделаем в отдельной статье. Тут я хочу показать вот что. Дальше сохраняем машину как PNG, кузов отдельно, колесо отдельно.

 Урок Анимация автомобиля

Урок Анимация автомобиля

Глава 2. Привет Flash.

Отрываем Flash, создаем файл. Да, еще я пользуюсь английской версией Flash, просто мне так удобней. Если вы выучите «горячие клавиши», то в принципе, язык интерфейса мешать не будет. В русском языке в панелях названия переведены более длинными фразами, и это как то отвлекает. Разница только в  этом.

теперь подстроим параметры сцены, жмем правой кнопочкой по сцене и выбираем “Document Properties”

Урок Анимация автомобиля

изменим разрешение на 800х600. В этом окне можно также настроить частоту кадров – сейчас она выставлена как 24.00; фон заливки – сейчас он белый, но себе поставлю серый; автосохранение – поставите галочку, будет сохраняться каждые 10 минут, но можно поставить время любое.

Продолжим. Перетаскиваем наши png на сцену.

 Урок Анимация автомобиля

При стандартном виде окна у вас внизу находится “timeline” – это временная шкала на которой размещаются объекты, а еще она имеет функции “слоёв ” как в Photoshop, что позволяет размещать анимированные объекты друг под другом. Слои можно именовать, если нужно, делать невидимыми, закреплять и отображать только контур объекта. Почти все эти возможности есть во всех редакторах, так что задерживаться на этом сейчас не буду.

 Урок Анимация автомобиля

Ну так вот, если вы перетащили два объекта сразу , то они помещаются на один слой, но чтоб их анимировать нужно разбить их по слоям. Сделать это можно двумя способами. Первый это нажать  кнопку создания слоя, выделить колесо, вырезать (либо через использование правой кнопки мыши, либо комбинацией Ctrl+X,и вставить на слой ниже Ctrl+V. Второй способ – выделить оба объекта, нажать ПКМ (правую кнопку мыши) выбрать  “Distribute to Layers”.

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

 Урок Анимация автомобиля

Получилось так, что объект “колесо” лежит слоем выше и перекрывает “кузов”.

Страшного ничего нет, просто мышкой перетащите слой колеса ниже слоя кузова, так как если бы вы меняли местами слои в другом редакторе.

Продолжим путешествие =). Следует обратить внимание вот на что, если вы используете растровые объекты, то Flash сжимает их по установленным в умолчании параметрам сжатия, и картинка может пикселится

 Урок Анимация автомобиля

 чтобы этого избежать, нужно сделать вот так – выберите меню библиотеки “Library”,в ней на объекте нажмите ПКМ и откройте свойства “Propetries”

 Урок Анимация автомобиля

 Урок Анимация автомобиля

выберите PNG и поставите галочку на сглаживание,  получится вот так.

 Урок Анимация автомобиля

Глава3. Ну давай уже анимировать!

Большинство анимаций во Flash осуществляются над символами. Символы можно помещать друг в друга, то есть есть дочерние и материнские символы. Каждый дочерний “символ” может быть материнским. Что это значит? Это значит что теоретически их может быть бесконечно, на практике в какой то момент начнутся баги. Надеюсь вы поняли, что я тут накрутил? Если не поняли –  не ломайте себе мозг,  продолжим, позже всё поймёте. Итак, самый простой способ “завернуть” объект (в данном случае наши картинки) это – ПКМ выделить объект на сцене

Урок Анимация автомобиля

и выбрать “Convert to Simbol”.

 Урок Анимация автомобиля

Вводим имя и сохраняем. Другой способ на выделенный объект использовать “F8”. В результате у нас в библиотеке помимо наших картинок появятся и символы, в которые обернуты картинки, то есть картинки как бы внутри символа.

Другими словами “символ”- это “Мама”, а PNG – это дочка.

Воооот =) и тут мы возьмём и завернём”символ”нашего колеса, еще в один “символ” (символ анимации). Выделяем на сцене колесо, которое уже не PNG – “колесо”, а “символ” “колесо”, и жмём “F8”. Именуем “символ” как “вращение колеса” (может получиться так, что один слой перекрывает другой, но вы можете на панели “timeline” поставить замок или сделать прозрачным мешающий слой) соответствующий этому названию “символ” появится в библиотеке

 Урок Анимация автомобиля

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

 Урок Анимация автомобиля

Урок Анимация автомобиля

Далее. придадим символу вращение. Использовать будем в этом уроке анимацию типа “Classik Tweene”. Для этого на слое «timeline» поставите курсор на отметку 20 (это 20 кадр) и нажмите “F6”. Так вы поставили первую контрольную точку.

 Урок Анимация автомобиля

Теперь ПКМ нажмите между двумя контрольными точками и выберите “Create Classic Tweene”.

 Урок Анимация автомобиля

эта область выделится синим с указанием стрелочки, которая обозначает автоматическое движение от “кадра 1” к “кадру 20”

 Урок Анимация автомобиля

придадим вращение. Теперь поставив курсор на область анимации между двумя контрольными точками, переходим в меню «Properties»

 Урок Анимация автомобиля

и в разделе “Rotate” выбираем “CCW” – это вращение против часовой стрелки. “Вуаля”, если вы нажмёте “CTRL+ENTER”увидите как чудесно вращается ваше колесо =).

Урок Анимация автомобиля

Но вот проблема, колесо то одно. Ну можно конечно, проделать повторную процедуру со вторым  колесом, хотя достаточно просто скопировать “символ” ”вращение колеса”,и подставить его на место второго колеса. Для этого нужно выйти из символа вращения, а это делается так, в верхнем левом углу окна нажмите на  “Scene”, это мы вышли.

теперь скопируйте колесо и подставте его на место второго колеса. Заметьте, что переднее колесо должно быть чуть меньше заднего. Поэтому, нажмите “Q” и удерживая “Shift”за уголочек  маштабируйте до нужного размера. Получится так

 Урок Анимация автомобиля

и если вы нажмёте волшебную комбинацию “CTRL+ENTER”, то увидите что оба колеса вращаются. А вот если вы теперь еще и кузову придадите небольшое движение вверх-вниз. То вообще будет хорошо. Для этого, “символ” кузова на сцене завернём еще раз в “символ” “анимация кузова”, двойным щелчком войдём внутрь символа.

 Урок Анимация автомобиля

На слое ”timeline”кузова с помощью кнопки “F6” создадимдве контрольные точки на 30-м и 60=м кадрах. Создадим анимацию  между точками с помощью ПКМ, используем “Create Classic Tweene”. Поставив курсор на “timeline” на 30 кадр, с помощью стрелочки “вверх” на клавиатуре, или мышкой. Чуть поднимем кузов выше – мы тем самым придадим ему анимацию движения вверх до 30-го кадра, и вниз  обратно к прежнему положению до 60-го кадра. И снова волшебная комбинация  “CTRL+ENTER”. И наш спорт кар уже сностно едет. А можно еще создать на “Timeline”слое, слойниже колес, нарисовать там тень. Сделаем это так, выйдем из символа “анимации кузова”

с помощью кнопки  создадим слой на “timeline”,  в инструментах выберем рисование прямоугольника с закруглёнными краями, в настройках выберем цвет и радиус закругления

Урок Анимация автомобиля

теперь обернём эту фому в “символ” чтобы получилось так

 Урок Анимация автомобиля

дальше “символ” тени обернём в” символ” “анимации тени”, и войдём внутрь. С помощью кнопки “F6” поставим две контрольные точки на 30-м и 60-м кадре. Удерживая “Shift” выделяем области между контрольными точками.

правой кнопкой мыши жмём, и создаём “Create Classic Tweene”. После этого, область на “timeline” должна выделиться в синий цвет. Так мы повторили действие создания анимации колеса, но вместо ”вращения”сделаем ”изменение формы”.

 Урок Анимация автомобиля

устанавливаем курсор на 30-й кадр, нажимаете “Q” и уменьшаете “символ” тени чуть-чуть по ширине, придавая ей тем самым движение ”деформации сужения”до 30-го кадра и возврат  к первому положению к 60-му кадру.

жмём “CTRL+ENTER”и смотрим результат.

И завершающая стадия, машина должна выезжать из-за кадра и уезжать за кадр. Для этого нужно вернуться снова на “Scene”, выделить теперь уже все элементы машины. Это: колёса, кузов и тень. Обернуть все эти элементы в “символ” кнопочкой “F8”,назовём его “машина едет”.

 Урок Анимация автомобиля

Обратите внимание, поскольку мы объединили все символы в “символ” “машина едет”, этот “символ” поместился на позицию самого высокого символа на “timtline”. Ну так вот,

теперь ставим контрольные точки на 60-й и 120-й кадр, и создаем уже знакомую нам анимацию “Create Classic Tweene”. Только теперь, на первом кадре, мы машину уводим за правый край экрана, а на 120-м за левый край.

Урок Анимация автомобиля

Урок Анимация автомобиля

Урок Анимация автомобиля

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

На этом примере Вы ознакомились: как экспортировать изображения, оптимизировать его качество, создавать символы и структуру из дочерних и материнских «символов», анимацию вращения, анимацию движения, и анимацию деформации символов при помощи анимации типа “Classik Tweene”

Что я еще хочу сказать. Что в принципе, можно было бы машину не рисовать, а просто нарезать части с какой нибудь фотки или рисунка, но всё таки приятней делать всё самому. Надеюсь сильно вас не запутал и объяснил всё понятно.

Исходник и образец анимации будет на сайте издания . Всем до встречи

Автор художник-аниматор Петрик Максим

Share: