Уроки

Новости

Статьи

Анимация

Анимация вращения блестящих предметов 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
Человек на сайте: 3

 

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

Stock Photos from 123RF

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

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

Дата: 2015-01-21

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


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

    

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


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

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


    Шаг 2. Если Вы уже выполнили предыдущий урок, то можете взять уже готовый символьный объект "Шина" из библиотеки того документа и немного его модифицировать. В случае создания символа "Шина" заново, добавьте новый слой над слоем "Фон", и с помощью инструмента построения окружностей Oval Tool (O) нарисуйте на нем в режиме изолированного рисования объектов – Object Drawing (J) окружность правильной формы без контура. Диаметр окружности сделайте 280 рх. и залейте ее радиальным градиентом с цветами и расположением маркеров, как это показано на эскизе ниже. Окружность преобразуйте в символ любого типа Graphic или Movie Clip (F8) с центральной точкой регистрации и назовите этот символ – "Шина".
Слой назовите так же.
    Если Вы используете символ "Шина" из 2-й части этой серии уроков, то можете оставить в этом же символе слой "Блики", но удалите "тормозной блок". Позже Вам придется добавить только блик на колпак ступицы в центре колеса.


    Шаг 3. Продолжая работу над символом "Шина", находясь на уровне редактирования подобъектов, в новом слое (назовите его "Диск"), с помощью инструмента построения окружностей Oval Tool (O) нарисуйте окружность правильной формы и диаметром 165 рх. и с контуром толщиной 3 рх. Окружность залейте радиальным градиентом из четырех цветов. Контур залейте линейным градиентом из двух цветов и с помощью инструмента Gradient Transform Tool (F) разверните его на 90°, чтобы более светлая часть градиента оказалась внизу. Цвета маркеров и их положение смотрите на эскизе ниже.


    Шаг 4. В основной сцене, над слоем с символьным объектом "Шина" создайте еще один слой и нарисуйте на нем еще две окружности правильной формы в режиме изолированного рисования объектов – Object Drawing (J). Первую окружность с контуром толщиной 4 рх. и диаметром 155 рх., вторую без контура и диаметром всего – 70 рх. Бо’льшую окружность залейте четырехцветным линейным градиентом, и разверните его на 90°, как показано на эскизе ниже. Примените к этой окружности команду контекстного меню – Break Apart (Разбить на части Ctrl+B). Оставьте выделенным только контур и уменьшите его диаметр до 100 рх. (Уменьшать диаметр целесообразней, вводя нужное цифровое значение на панели свойств "Shape" (Форма) в окошках Width или Height при заблокированном соотношении высоты и ширины). Слой назовите "Хром". Далее выделите все объекты, находящиеся на слое "Хром", и выровняйте их по обеим осям относительно друг друга. Потом оставьте выделенным только уменьшенный контур в слое "Хром" и примените к нему команду главного меню Modify=>Shape=>Convert Lines to Fills (Изменить=>Форма=>Преобразовать линии в заливку). К маленькой окружности в этом же слое примените команду контекстного меню – Break Apart (Разбить на части Ctrl+B). Щелчком левой кнопкой мыши в любое свободное пространство рабочего окна, снимите какое-либо существующее выделение с объектов. После чего снова выделите бывший контур и маленькую окружность в слое "Хром" и удалите их. Таким образом, они вырежут в бо’льшей окружности отверстие в центре и узкую прорезь по кругу, как показано на эскизе ниже.


    Шаг 5. Если Вы не использовали символьный объект "Шина" из предыдущего урока, и впервые выполняете сразу этот урок, то пришло время придать объем и легкий блеск нашей шине. Для этого выполните действия описанные в 4-5 шаге того урока. Так как блики не перекрываются ни одним из объектов, находящихся на верхних слоях, их можно создавать внутри символа "Шина" или на отдельном слое, как это показано в начале урока. В дополнение к действиям описанным в прошлом уроке, добавьте еще один маленький блик на сероватый колпак ступицы в центре колеса. Возьмите инструмент построения окружностей Oval Tool (O) и нарисуйте в слое с бликами эллипс шириной 55 рх. и высотой 35 рх. Заливка линейным градиентом и форма этого блика показаны на эскизе ниже. Изменять форму, в данном случае, лучше с помощью инструмента Subselection Tool (A), пермещая узловые точки.


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

    Шаг 6. В палитре слоев основной сцены, над слоем "Хром" создайте новый слой. Возьмите инструмент создания окружностей Oval Tool (O) и нарисуйте на новом слое окружность правильной формы диаметром – 20рх. и толщиной контура – 1рх.. Цвет окружности сделайте чисто черным, а контур залейте линейным градиентом из четырех цветов. Градиент разверните вертикально так, чтобы его светлая часть оказалась внизу. Цвета и расположение маркеров смотрите на эскизе ниже. Получившуюся деталь преобразуйте в символ (F8) любого типа с центральной точкой регистрации. Символ и слой, на котором он расположен, назовите - "Отверстие".


    Шаг 7. Вновь в палитре слоев основной сцены, над слоем "Отверстие" создайте еще один слой и нарисуйте в нем еще одну окружность правильной формы диаметром – 9 рх. и толщиной контура – 1 рх. Окружность залейте радиальным градиентом, а контур линейным. Линейный градиент разверните вертикально, чтобы светлая часть оказалась сверху. Центр радиальной заливки сместите к нижней границе окружности. Цвета и положение маркеров для обеих заливок показаны на эскизе ниже – 1. Получившуюся деталь, также преобразуйте в символ любого типа (F8), кроме Button (Кнопка), с центральной точкой регистрации. Символ и слой для него назовите одинаково – "Заклепка". Чтобы придать заклепке блеск, выделите в слое "Блики" центральный блик и скопируйте его в буфер обмена (Ctrl+C). Затем, дважды щелкнув левой кнопкой мыши на символе "Заклепка", перейдите на уровень редактирования символа. Внутри этого символа добавьте еще один слой и вставьте на него содержимое буфера обмена (Ctrl+V). Размеры скопированного блика уменьшите примерно до 7 рх. по ширине и 3,7 рх. по высоте. блик расположите так как показано на эскизе ниже – 2.


    Шаг 8. Теперь пришло время задать траектории, по которым будут двигаться символьные объекты "Отверстие" и "Заклепка". Для этого в палитре слоев основной сцены выделите сначала слой "Отверстие" и нажмите кнопку в нижней части палитры – Add Motion Guide (Добавить траекторию движения). Над слоем "Отверстие" появится управляющий слой с характерной пиктограммой. С помощью инструмента построения окружностей Oval Tool (O) нарисуйте в этом слое окружность правильной формы, состоящую из одного только контура волосяной толщины – hairline и диаметром 130 рх.
     Все то же самое проделайте и для слоя "Заклепка". Но в его управляющем слое диаметр окружности-траектории сделайте 83.5 рх.
     Вид сцены и палитры слоев к этому моменту должен быть примерно таким, как показано на эскизе ниже.


    Шаг 9. И еще немного вспомогательных линий, которые помогут нам точно распределить все отверстия и заклепки по кругу. В любом из управляющих слоев, в режиме изолированного рисования, используя инструмент создания прямых линий – Line Tool (N), нарисуйте вертикальную линию длиной 200-260 рх. Сочетанием клавиш Ctrl+D продублируйте эту линию еще три раза. На панели Transform (Ctrl+T) в окошке параметра Rotate (Поворот) для первой копии введите значение – 45°, для второй – 90°, для третьей – 135°. И теперь, чтобы в дальнейшем соблюсти идеальное совмещение всех элементов колеса, выделите все вспомогательные линии в управляющих слоях, объекты на слоях "Хром" и "Шина", и выровняйте их по обеим осям относительно друг друга. Обратите внимание, что режим выравнивания относительно сцены должен быть выключен!


"Лирическое отступление"

     Давайте разберемся – как должны располагаться на слоях объекты? Как вообще организовать слои для анимации вращения по своей траектории восьми копий символа "Отверстие" и такого же количества копий символа "Заклепка" – по своей? Специфика программы не позволяет анимировать несколько символьных объектов, находящихся в одном слое. В этом случае, программа автоматически создаст свой символьный объект (Tween), состоящий из набора всех объектов на слое после того, как к этому слою/треку будет применена команда Create Motion Tween(CS3-)/Create Classic Tween(CS4+). Чтобы этого не происходило, нам придется каждый экземпляр любого символа поместить на отдельный слой.
    – Неужели и для каждого экземпляра понадобится свой управляющий слой с траекторией? – напрашивается логический вопрос.
     И следует совершенно неожиданный, на первый взгляд, ответ: – Нет!
     Если между управляющим и управляемым слоями поместить еще один или несколько слоев, то все они автоматически становятся управляемыми. В нашем случае, такая особенность программы оказывается как нельзя кстати.

    Шаг 10. Выделите в палитре слоев основной сцены слой "Отверстие" и создайте над ним новый слой. (Слой можно не переименовывать). Перетащите из библиотеки в сцену символьный объект "Отверстие" и расположите его так, чтобы его центр оказался в точке пересечения линии траектории на слое "Guide: Отверстие" и вспомогательной линии, проходящей под углом 45°. Максимально точно расположить символьный объект над точкой пересечения Вам поможет контурный режим просмотра слоев (Show All Layers as Outline). Над этим слоем создайте еще один, и опять перетащите в сцену еще один экземпляр символьного объекта "Отверстие". Центр этого экземпляра расположите в точке пересечения лини траектории на слое "Guide: Отверстие" и вспомогательной линии, проходящей под углом 90°. Затем еще и еще, пока все восемь экземпляров символьного объекта "Отверстие" ни окажутся на своих управляемых слоях. Все они должны расположиться по кругу, как это показано на эскизе ниже.
    С символьным объектам "Заклепка" поступите аналогично, создавая группу управляемых слоев с экземплярами под слоем "Guide: Заклепка". В сцене эти экземпляры расположите в точках пересечения вспомогательных линий и траектории в управляющем слое "Guide: Заклепка" (Каждую группу из управляющего и управляемых слоев, можно заключить в отдельную папку, чтобы сократить размеры палитры слоев по высоте, как это показано в начале урока).


    Шаг 10. Завершая подготовку сцены к анимации, добавьте еще падающую тень от колеса. Для этого выделите слой, на котором расположен фон и создайте над ним новый слой. Возьмите инструмент построения окружностей Oval Tool (O) и нарисуйте на новом слое окружность правильной формы без контура диаметром – 150-160 рх. Преобразуйте окружность в символ с центральной точкой регистрации (F8) типа Movie Clip и назовите его "Тень". На панели свойств, для этого символа, из списка режимов наложения выберите – Multiply (Умножить). С помощью инструмента свободной трансформации Free Transform Tool (Q) придайте тени соответствующую форму, как показано на эскизе ниже.
    Если в будущем, создавая подобную анимацию, Вы не планируете, что колесо во время вращения будет отрываться от поверхности земли, подскочив, к примеру, на кочке, то символьный объект "Тень", вполне можно поместить и внутри символа "Шина" на самый нижний слой.


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

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

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


    Шаг 12. Установите бегунок на линейке временной диаграммы в положение 13-го кадра. В каждом треке управляемых слоев в папках "Отверстия" и "Заклепки" преобразуйте этот кадр в ключевой (F6). С помощью инструмента выделение и перемещения Selective Tool (V) переместите в сцене все экземпляры символьных объектов "Отверстие" и "Заклепка" вдоль своих траекторий на четверть круга вправо. Поскольку верхние объекты при перемещении будут оказываться на месте объектов расположенных на нижних слоях и перекрывать их, для удобства временно блокируйте или отключайте вышестоящий слой с перемещенным экземпляром, чтобы можно было выделить и переместить экземпляр на нижнем слое.
     После того, как все отверстия и заклепки в 13-ом ключевом кадре благополучно переместите на четверть круга, переставьте бегунок в положение 25-го кадра. И опять, во всех анимируемых треках, сделайте этот кадр ключевым (F6). Разблокируйте или сделайте снова видимыми все слои и повторите процедуру с каждым экземпляром символьного объекта "Отверстие" и "Заклепка" в сцене, переместив их вдоль своих траекторий еще на четверть круга по часовой стрелке.
     И еще одним ключевым кадром в анимируемых треках, сделайте 37-й кадр временной диаграммы. В этом кадре все экземпляры символьных объектов "Отверстие" и "Заклепка" должны будут оказаться в конце третьей четверти пути от своего первоначального положения.


    Шаг 13. Удалите все радиальные вспомогательные линии, оставив в управляющем слое только контур окружности-траектории. Выделите во всех слоях/треках с отверстиями и заклепками 1-е, 13-е, 25-е и 37-е ключевые кадры и примените к ним команду контекстного меню Create Motion Tween (CS3-)/Create Classic Tween (CS4+).
     Если Вы прямо сейчас посмотрите тестовую анимацию, то вполне справедливо заметите, что, в общем-то, все готово… Но в таком результате все-таки есть один маленький изъян. И он заключается в двух абслютно одинаковых положениях в первом и последнем ключевых кадрах, всех анимируемых объектов. Из-за чего на стыке цикла вращения происходит небольшое временное "залипание". Исправить это довольно просто, и я советую так поступать в большинстве случаев с такими циклами, как – маятник/качели, походка, не программное вращение.
    Итак, выделите на временной диаграмме 49-е кадры во всех анимируемых слоях/треках и преобразуйте их в ключевые кадры (F6). И сразу же после этого, выделите на временной диаграмме 50-е всех слоев/треков и примените к ним команду контекстного меню - Remove Frames (Удалить кадры).
     Вот теперь действительно – все, можно ехать!




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

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




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


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

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

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


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


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

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