Уроки

Новости

Статьи

Анимация

Анимация вращения блестящих предметов III

Анимация вращения блестящих предметов II

Анимация вращения блестящих предметов I

Создание анкерного колеса.

1 международный благотворительный фестиваль мультфильмов

2015-01

2014-12

2013-08

2013-03

2012-12

2012-11

2012-09

м/с "Пилот"

Аниматор.ру

От мульта

flash-animated.com

Клуб аниматоров рунета

Arttower.ru

flashyroki.ru

группа Учимся работать в компьютерных программах

Уроков: 19
Статей: 4
Комментариев: 68
Человек на сайте: 1

 

Яндекс цитирования   Jokerom Stock Images

Stock Photos from 123RF

Анимация вращения блестящих предметов II

Автор: Игорь Романов

Дата: 2015-01-11

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


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



* Чтобы корректно отображались все всплывающие окна, на которые ссылаются такие кнопки,
пожалуйста, закрывайте после просмотра уже открытые окна,
иначе они будут перекрываться Ваши браузером с просматриваемой темой!

Строительством спорткара мы заниматься не будем, его кузов, в общем-то, статичен и это отдельная тема. А приступим непосредственно к созданию самого колеса и подготовим входящие в него детали к анимации.

Подготовка сцены.

Шаг 1. Создайте новый документ шириной = 600 рх. и высотой = 400 рх, с частотой смены кадров 25 fps. и сохраните его в любой удобной для Вас директории на своем компьютере под названием – "Вращение колеса с маской". Возьмите инструмент построение прямоугольных форм Rectangle Tool (R) и в первом, уже существующем слое, создайте прямоугольник без контура по ширине и высоте равный размеру документа. Залейте его линейным градиентом. С помощью инструмента трансформации градиента GradientTransformTool (F) разверните его на 90°, а положение маркеров и их оттенки настройте примерно так, как показано на эскизе ниже. С помощью панели Align (Выровнять Ctrl+K) расположите основной фоновый прямоугольник в центре рабочего пространства сцены по вертикали и по горизонтали. Слой назовите "Фон".


Шаг 2. Создание колеса начнем с самой массивной его детали – с шины. Добавьте новый слой, и с помощью инструмента построения окружностей Oval Tool (O) нарисуйте на нем в режиме изолированного рисования объектов – Object Drawing (J) две окружности правильной формы и разных цветов. Диаметр одной окружности сделайте 280 рх., диаметр второй окружности – 190 рх. С помощью панели Align (Выровнять Ctrl+K) выровняйте эти окружности между собой, как показано на эскизе ниже. Обратите внимание, чтобы режим выравнивания объектов относительно границ документа был выключен.


Шаг 3. Выделите одновременно обе окружности и примените к ним команду контекстного меню – Break Apart (Разбить на части Ctrl+B). Снимите выделение с окружности большего диаметра и удалите окружность меньшего диаметра (Delete или Backspace). В результате у Вас должен получиться "бублик", который залейте радиальным градиентом из четырех оттенков темно-серого цвета. Цвета и положение маркеров установите аналогично тому, как показано на эскизе ниже. Получившуюся деталь, преобразуйте в символ любого типа Graphic или Movie Clip (F8) с центральной точкой регистрации и назовите этот символ – "Шина".


Как это ни странно прозвучит, но символ "Шина" в результирующем видеоклипе вращаться не будет. Поэтому в нем можно заключить все дополнительные детали, которые будут находиться за вращающимся диском. Т.е. все, что будет находиться в статике и перекрываться диском колеса, можно расположить в символе "Шина". Это будут дополнительные блики на шине и тормозной блок.


Шаг 4. Дважды щелкните на "Шине" левой кнопкой мыши, чтобы перейти на уровень редактирования подобъектов символа.
Слой с шиной заблокируйте, а над ним добавьте новый слой, назовите его – "Блики" и нарисуйте на нем окружность правильной формы, состоящую из одного только контура серого цвета. Диаметр окружности сделайте 200 рх., а толщину контура установите – 10 рх. С помощью панели Align (Ctrl+K) расположите окружность строго по центу по обеим осям (включите режим выравнивания относительно границ документа). Используя инструмент выделения и перемещения объектов Selection Tool (V), соответствующим движением выделите среднюю часть окружности и удалите выделенные сегменты контура.
Если Вам проще сделать это методом вычитания форм, то нарисуйте в этом же слое, в режиме изолированного рисования, прямоугольник без контура шириной 250 рх. и высотой 120 рх. Выровняйте его относительно центра по обеим осям, разбейте на части (Ctrl+B) и окружность, и прямоугольник. После чего снимите выделение с видимой части окружности и удалите прямоугольник.
Увеличьте толщину верхней части контура до 35 рх. и, с помощью инструмента свободной трансформации Free Transform Tool (Q), слегка растяните ее в ширину. Расположите эту часть контура у верхней границы шины, как показано на эскизе ниже.


Шаг 5. Верхнюю и нижнюю части контура покрасьте линейным градиентом светло-серого цвета, в котором один из маркеров сделайте абсолютно прозрачным Alpha = 0%. С помощью инструмента трансформации градиента Gradient Transform Tool (F) разверните градиент нижнего блика вертикально так, чтобы его прозрачная часть находилась наверху. Верхний широкий блик, наоборот – должен постепенно становиться прозрачным книзу. В дополнение, на этом же или еще одном слое, Вы самостоятельно можете нарисовать некий механизм похожий на тормозной блок, как показано на эскизе ниже. (Сейчас мы не будем заострять внимание на рисовании этого блока, так как символ "Шина" и находящиеся внутри него объекты, никак не влияют на анимацию всего колеса).


Шаг 6. Ненадолго возвращаемся в основную сцену и приступаем к созданию одного из элементов диска колеса, который впоследствии и должен быть анимирован. Над слоем "Шина" добавьте новый слой и назовите его "Маска диска". В режиме изолированного рисования, с помощью инструмента создания окружностей Oval Tool (O) нарисуйте в этом слое две окружности, состоящие из одного только контура толщиной hairline (волосяная линия). Диаметр первой окружности сделайте – 180 рх., второй – 170 рх. Выделите обе окружности и преобразуйте их в символ (F8) типа Graphic с центральной точкой регистрации, символ назовите "Маска диска". Затем перейдите на уровень редактирования подобъектов и выровняйте окружности по центру по обеим осям. В дополнение к этим окружностям, в режиме изолированного рисования, с помощью инструмента построения многоугольников и звезд PolyStar Tool, нарисуйте в том же слое пятиконечную звезду, также состоящую из одного только контура. (Настройки и необходимые параметры звезды показаны на эскизе ниже). Получившуюся звезду симметрично расположите относительно двух окружностей.* И еще в этом же слое, не меняя настроек рисования, создайте третью окружность диаметром 15 рх. Продублируйте (Ctrl+D) эту маленькую окружность еще 14 раз, и расположите все 15 окружностей у основания лучей звезды и рядом с местами пересечения средней окружности и звезды. Все контуры форм должны накладываться друг на друга, как показано на эскизе ниже.


Шаг 7. Формируем, из получившегося набора окружностей и звезды, сложную геометрическую фигуру для нашей маски. Выделите все примитивы (Ctrl+A), находящиеся в символе "Маска диска" в единственном слое, и разбейте их на части (Ctrl+B). Удалите те фрагменты контура, которые окрашены в красный цвет на эскизе ниже – 1. Если Вам не удается выделить именно эти фрагменты, проверьте еще раз точность наложения контуров всех форм друг на друга. После всех манипуляций с удалением лишних деталей контура, залейте получившуюся фигуру любым цветом. Если все было сделано правильно, то у Вас должна получиться деталь похожая на ту, что показана на эскизе ниже – 2.


Шаг 8. Помимо области заливки, которая будет являться маской, в данный момент в символе "Маска диска" присутствует еще и контур. А из него мы сделаем дополнительные декоративные элементы для нашего колеса. Выделите внешний контур диска (окружность) и на панели свойств увеличьте его толщину до 4 рх., а диаметр увеличьте до 184 рх. Окружность при этом сместиться вправо и вниз, снова выровняйте ее относительно центра по обеим осям. Толщину остального контура сделайте – 2 рх. Выделите весь контур и залейте его единым радиальным градиентом, расположив маркеры и установив их цвета аналогично тому, как показано на эскизе ниже. Окружность внешнего контура преобразуйте в символ любого типа с центральной точкой регистрации и назовите его "Обод диска". Остальной контур – все пять треугольников с закругленными углами, также преобразуйте в отдельный символ любого типа с центральной точкой регистрации и назовите его "Фаска диска". После того, как эти оба символа появились в библиотеке, удалите их из символа "Маска диска" и отправляйтесь вновь в основную сцену.


Шаг 9. Создайте в основной сцене между слоями "Шина" и "Маска диска" еще один слой, и назовите его "Диск". С помощью инструмента построения прямоугольных форм Rectangle Tool (R) нарисуйте в этом слое квадрат с размером стороны - 200 рх. Залейте его линейным градиентом из четырех цветов зеленовато-голубоватых оттенков. Маркеры расположите так же, как показано на эскизе ниже 1.
С помощью инструмента трансформации градиентов Gradient Transform Tool (F) разверните градиент вертикально так, чтобы его половина с голубыми оттенками оказалась вверху. Настроив градиент, перейдите в палитру слоев, щелкните правой кнопкой мыши на слое "Маска диска" и выберите, в появившемся контекстном меню, тип слоя "Mask". Вид слоев и сцены после этого должен измениться так, как показано на эскизе ниже 2.


Шаг 10. Над слоем "Маска диска" в палитре слоев добавьте еще два слоя. Над маскирующим слоем, на новый слой поместите из библиотеки символ "Фаска диска" и дайте этому слою соответствующее название. На самый верхний слой поместите символ "Обод диска" и назовите "Обод/колпак". Как Вы уже догадались, на этот же слой можно поместить в самый центр еще один декоративный элемент, который будет имитировать хромированный колпак ступицы. С помощью инструмента построения окружностей Oval Tool (O) нарисуйте небольшую окружность правильной формы с таким же линейным градиентом, как и в квадрате на слое "Диск". Толщину контура окружности сделайте 2 рх., и его тоже раскрасьте вертикальным линейным градиентом из четырех оттенков. Цвета, входящие в состав градиента для контура, показаны на эскизе ниже. Выделите все объекты, относящиеся к колесу и, с помощью соответствующих команд на панели Align (Ctrl+K) с отключенным режимом To stage (относительно сцены), выровняйте их относительно друг друга по обеим осям. Положение символьного объекта "Фаска диска" подкорректируйте по вертикали, для удобства переведя просмотр слоев в контурный режим.


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


Анимация сцены.

Теперь, как и в случае с вращением блестящего бильярдного шара, после долгой "артподготовки" осталось буквально несколько шажочков до создания анимации вращения нашего колеса. Не смотря на большое количество слоев и объектов на них, анимировать мы будем всего два символьных объекта, и это – "Маска диска" и "Фаска диска". Вращение всего остального доделает воображение. Итак, не будем медлить и продолжим.

Шаг 11. Выделите на временной диаграмме основной сцены 50-й кадр в треках всех слоев и нажмите клавишу F5. С первого по пятидесятый кадр все треки окрасятся в серый цвет, что будет означать – создание последовательности кадров. В треках слоев "Маска диска" и "Фаска диска" 50-й кадры преобразуйте в ключевые кадры. Для этого выделите их и нажмите клавишу F6.


Шаг 12. Вернитесь в начало временной диаграммы, выделите на треках "Фаска диска" и "Маска диска" первые ключевые кадры и, вызвав контекстное меню, выполните команду Create Motion Tween (для версии CS 3 и ниже) и Create Classic Tween (для версии CS 4 и выше). Не снимая выделения, с первых ключевых кадров вышеуказанных треков, перейдите на панель свойств Properties, из выпадающего списка Rotate, выберите значение CW – по часовой стрелке (Clockwise), в окошке times оставьте цифру – 1. Теперь смело можно нажимать клавиши Ctrl+Enter и любоваться полученным результатом. Пусть наше колесо вовсе не планета Земля, но, тем не менее, про него тоже можно сказать – и все-таки оно крутится! Еще можно было бы добавить, падающую от колеса, тень, как мы это делали в первой части, но в данном случае, это уже не принципиально.



* Для максимальной точности расположения центра звезды относительно центра окружностей и символа в целом, нарисуйте в режиме изолированного рисования вертикальную линию произвольной длины, но не меньше 350 рх. Продублируйте эту линию (Ctrl+D) еще четыре раза и, с помощью цифровых значений, вводимых на панели Transform (Ctrl+T) в окошке параметра Rotate (Поворот), поверните первый дубликат на 72°, а каждый последующий дубликат на 72° больше предыдущего (144°, 216°, 288°). Все линии выровняйте по центру по обеим осям. Звезду расположите так, чтобы все ее внешние и внутренние вершины оказались на вспомогательных линиях. Вспомогательные линии удалите.

Подведение итогов:

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

Продолжение следует.





Если у Вас возникли какие-либо затруднения в процессе выполнения этого урока, можете задавать свои вопросы непосредственно в комментариях к этой теме. Желающие поделиться своими результатами, направляйте свои анимационные миниатюры на admin@flashcinema.ru


Данный урок подготовлен для Вас командой сайта www.flashcinema.ru
Правила перепечатки материалов сайта

Просмотров: 2414

Ваша оценка: 1 2 3 4 5


Пожалуйста, оставьте свой комментарий.
Спасибо!


Введите результат вычислений:

Поисковый запрос не должен
быть менее 4-х символов!