Уроки

Новости

Статьи

Анимация

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

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

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

Дата: 2015-01-01

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


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



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

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

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



    Шаг 2. Для большей убедительности добавим на задний план борт, также состоящий из прямоугольников. Для этого можно создать дополнительный слой/слои или нарисовать эти прямоугольники в режиме изолированного рисования объектов – Object Drawing (J) на этом же первом слое. Нижняя часть борта, обтянутая сукном, будет иметь вертикальную градиентную заливку из четырех оттенков, как показано на эскизе ниже. Размер этого прямоугольника сделайте 600 рх. – по ширине и 65 рх. – по высоте. Деревянная часть борта будет еще меньше по высоте (600 рх. – 27 рх.), и ее нужно залить вертикальным линейным градиентом желто-коричневых оттенков с пятью маркерами. С помощью панели Align (Выровнять Ctrl+K) расположите основной фоновый прямоугольник в центре рабочего пространства сцены по вертикали и по горизонтали. Прямоугольники, относящиеся к борту, отцентруйте только по вертикальной оси. Горизонтально они оба делят сцену примерно пополам (см. эскиз ниже). Слой назовите "Стол" * и заблокируйте его.


    Шаг 3.Теперь можно приступать к созданию самого бильярдного шара. Добавьте еще один слой в палитре слоев основной сцены, и на нем, с помощью инструмента построения окружностей Oval Tool (O) и нажатой клавшей Shift, создайте окружность правильной формы без контура в режиме изолированного рисования объектов – Object Drawing (J). Диаметр окружности сделайте примерно 155 рх. и залейте ее радиальным градиентом красных оттенков, как показано на эскизе ниже. Кликнув по этой окружности правой кнопкой мыши, вызовите контекстное меню и выберите в нем команду Convert to Symbol (Преобразовать в символ F8). Символ назовите "Шар", тип символа можно выбрать любой – Graphic или Movie Clip. Точку регистрации установите по центру.


    Шаг 4. Перейдите в режим редактирования подобъектов символа, для чего дважды щелкните на шаре левой кнопкой мыши. Займемся присвоением нашему шару номера. Вы можете выбрать любую цифру, какая Вам нравится, но по правилам игры в "Американку" бордовый шар всегда пронумерован цифрой семь, чему я, в своем примере, не стал возражать. Над имеющимся внутри символа "Шар" слоем с окружностью, добавьте еще два слоя. На среднем слое нарисуйте окружность с радиальной заливкой светло-бежевых оттенков и темно-бордовым контуром. диаметр окружности сделайте примерно – 60-67 рх., толщина контура 1 рх. Это будет кружок, на фоне которого в самом верхнем слое, используя инструмент создания текста Text Tool (T), поставьте семерку или любую другую цифру такого же цвета, что и контур бежевого кружка. (Какую именно выбрать гарнитуру шрифта для цифры, решите сами, исходя из установленных на Вашем компьютере шрифтов). Все объекты должны быть выровнены относительно центра по обеим осям. Таким образом, мы создали ту часть бильярдного шара, которая во время анимации будет вращаться вокруг центральной оси (центральной точки регистрации).


    Шаг 5.Теперь давайте отполируем наш шар, и тем самым – придадим ему дополнительный объем и привлекательность. Вернитесь в основную сцену, над слоем с символом "Шар" создайте еще один слой и подпишите его – "Блики". Скопируйте первый ключевой кадр в слое "Шар" (команда контекстного меню Copy Frames), затем, выделите первый ключевой кадр в слое "Блики" и так же, вызвав контекстное меню, выберите команду Paste Frames (Вставить кадры). Так на слое "Блики" в основной сцене, точно в том же месте, появится еще один символ под названием "Шар".
    – Зачем нам это надо? – спросите Вы. И я Вам отвечу…
    Нажмите левой кнопкой мыши на копию символа "Шар", чтобы на панели свойств появилась кнопка Swap (Заменить). Нажмите эту кнопку, и в открывшемся диалоговом окне Swap Symbol (Заменить символ), нажмите на пиктограммку Duplicate Symbol (Дублировать символ). В очередном появившемся окне, переименуйте дубликат на "Блики" и нажмите "ок" перед закрытием каждого окна. Одновременно в библиотеке появится одноименный символ.


    Шаг 6. И вновь переходим ну уровень редактирования подобъектов, но теперь уже символа "Блики". Все объекты, кроме окружности на нижнем слое "Шар", удалите, и на среднем высвободившемся слое, с помощью инструмента создания окружностей нарисуйте эллипс без контура с черно-белым линейным градиентом. Размер эллипса по ширине и высоте сделайте примерно 107х67 рх. В палитре Color (Shift + F9) черный цвет маркера замените на белый, а степень его непрозрачности Alpha сделайте – 0%. С помощью инструмента трансформации градиента GradientTransformTool (F) разверните его на 90° так, чтобы прозрачная часть оказалась внизу. Подрегулируйте положение и размер градиента по высоте, как показано на эскизе ниже. Верхняя точка эллипса должна почти совпадать с верхней точкой окружности шара. По вертикальной оси эллипс должен находиться строго по центру. Слой, на котором находится эллипс, переименуйте в "Блик" и переместите под слой с окружность "Шар". Слой "Шар" переименуйте – "Маска", и в диалоговом окне Layer Properties или в контекстном меню назначьте этому слою тип – Mask. Для удобства включите режим контурного отображения маскирующего слоя.


    Шаг 7. В противовес верхнему блику сделаем отражение поверхности стола в нижней части шара. Скопируйте окружность в слое "Маска" (Ctrl+C), в палитре слоев выделите пустующий слой "Номер" и, используя сочетание клавиш (Ctrl+Shift+V) вставьте по месту копию окружности на этот слой. Название слоя "Номер" измените на "Отражение" и также перетащите этот слой под слой "Маска". (Таким образом, и этот слой станет маскируемым). Не используемые слои "Блик" и "Маска" пока "заприте". Если скопированная окружность не имеет изолирующего контейнера, сгруппируйте ее (Ctrl+G). Еще раз скопируйте (Ctrl+C) и вставьте по месту (Ctrl+Shift+V) эту окружность в слое "Отражение". Верхнюю копию окружности переместите вверх примерно на 20 рх. Затем, выделите обе копии и разбейте их на составляющие части, выполнив команду контекстного меню, Break Apart (Ctrl+B). Снимите выделение (щелкните один раз левой кнопкой мыши на свободном пространстве). Снова выделите верхнюю окружность и удалите ее (Delete). В результате у Вас останется горизонтальный "полумесяц". Тип его градиентной заливки измените с радиальной на линейную, а цвета маркеров сделайте зелеными, как показано на эскизе ниже. Один из маркеров сделайте полупрозрачным (Alpha=60), другой обесцветьте полностью (Alpha=0) и разверните градиент вертикально, используя инструмент трансформации градиента Gradient Transform Tool (F), так чтобы его абсолютно прозрачная область оказалась вверху.


    Шаг 8. Чтобы такое отражение не выглядело инородным на поверхности бильярдного шара, необходимо немного подправить его. Не снимая выделения с "полумесяца" нажмите на клавиатуре клавишу F8 (Преобразовать в символ). В открывшемся диалоговом окне Convert to Symbol, в поле Name (Имя) напишите – "Отражение" и выберите тип символа (Type) – Movie clip, после чего, нажмите – "OK". На панели свойств Properties выберите режим наложения BlendMultiply (Умножение), а в панели Filters (Фильтры) нажмите на плюсик и выберите из списка фильтр Blur (Размытие). Значения по обеим осям оставьте без изменения, поменяйте только качество (Quality) с низкого на среднее (Medium).


    Шаг 8a факультативно. Вполне можнобыло бы закончить с приданием объема и блеска шару, но если есть желание, можно добавить еще некоторые нюансы. На эскизе и в мини-ролике в начале этого урока в бильярдном шаре видны отражения двух пар "софитов" сверху и рефлексы светлых стен по бокам. Пусть эти объекты не видны в кадре, тем не менее – их отражения не лишены логики существования и делают общую картину еще более реалистичной.
    Для всех дополнительных отражений в палитре слоев добавьте еще один слой над слоем "Отражение" и назовите его "Рефлексы". Отражение софитов, как не трудно догадаться, это всего лишь еще одна окружность с радиальной градиентной заливкой продублированная несколькими копиями. Создайте окружность диаметром 25 рх. с черно-белой радиальной заливкой из стандартного набора. Черный цвет маркера поменяйте на белый и понизьте степень его непрозрачности до минимума – Alpha=0. Должна получиться окружность с ярко-белым центром и прозрачными краями. Преобразуйте получившуюся окружность в символ типа – Movie clip и назовите его – "Софит". На панели свойств – Properties выберите для него режим наложения BlendScreen. Продублируйте этот символ в сцене еще три раза и расположите все копии вдоль верхней границы окружности бильярдного шара. (Можете не бояться располагать их у самого края. Все выступающие за края шара части этих символов обрежутся маскирующим слоем).
    Завершаем наводить лоск на бильярдный шар, и делаем по бокам треугольные отражения светлых стен. Временно разблокируйте маскирующий слой, выделите на нем окружность и скопируйте ее в буфер обмена (Ctrl+C). Вновь заблокируйте или отключите маскирующий слой, а на слой "Рефлексы" вставьте по месту (Ctrl+Shift+V) копию окружности. Не снимая выделения с окружности выполните команду контекстного меню Arrange=>Send to Back (Упорядочить=>На задний план). Возьмите инструмент построения линий Line Tool (N) и проведите на этом же слое две наклонные пересекающиеся лини, как показано на эскизе ниже (1). Возьмите инструмент выделения и перемещения Selection Tool (V) и придайте линиям форму, как показано на эскизе ниже (2). ** Разбейте на составные части (Ctrl+B) изолированные объекты – окружность и линии. Удалите большую часть окружности и все части контура. Оставшийся треугольник залейте линейным градиентом, установив значения маркеров и угол наклона аналогично эскизу ниже (3). Преобразуйте треугольник в символ типа – Movie clip, назовите его "Рефлекс" и на панели свойств – Properties выберите для него режим наложения BlendOverlay. Продублируйте этот символ в сцене и расположите его копию у правого края бильярдного шара, отразив ее по горизонтали (Modify=>Transform=>Flip Horizontal).


    Шаг 9. И наконец, перед тем, как перейти к анимации сцены, остается избавиться от ощущения висящего шара. Для этого нам необходимо сделать тень, которая сблизит шар и поверхность стола. Перейдите в основную сцену и над слоем "Стол" создайте еще один слой и назовите его "Тень". Воспользовавшись инструментом построения окружностей Oval Tool (O) и нажатой клавшей Shift создайте на этом слое окружность правильной формы без контура с радиальной градиентной заливкой буро-зеленого цвета и диаметром 145 рх. Маркеры в палитре Color (Shift+F9) приведите в соответствие с эскизом ниже. С помощью инструмента свободной трансформации Free transform Tool (Q) уменьшите высоту окружности до 23-25 рх. Преобразуйте объект в символ типа – Movie clip, назовите его "Тень", и на панели свойств – Properties установите для него режим наложения BlendMultiply.



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

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

    Шаг 10. Итак в сцене есть три объекта, которые нам предстоит привести в движение. Это – "Шар", его "Блики" и "Тень". Символьные объекты с бликами и тенью будут двигаться только горизонтально, слева на право. А "Шар" – и горизонтально, и еще будет вращаться вокруг своей оси.
    Выделите "Шар","Блики" и "Тень" и удерживая в нажатом положении клавишу Shift, передвиньте их за левую границу рабочего пространства сцены, как показано на эскизе ниже. Это будет – начальное положение всех анимируемых символьных объектов.


    Шаг 11. На временной шкале Timeline выделите 80-й кадр всех четырех слоев и нажмите клавишу F5. (Все четыре трека до 80-го кадра, при этом, окрасятся в серый цвет, что будет свидетельствовать о создании последовательности кадров для всех объектов в сцене). Выделите 80-е кадры в слоях/треках "Блики", "Шар" и "Тень" и нажмите F6, чтобы преобразовать последние кадры в треках этих символьных объектов в ключевые кадры. Объекты Блики", "Шар" и "Тень", удерживая в нажатом положении клавишу Shift , переместите вправо, немного не доходя до правой границы рабочего пространства сцены, как на эскизе ниже . Это будет – конечное положение всех анимируемых символьных объектов.


    Шаг 12. Вновь вернитесь к началу временной диаграммы, одновременно выделите первые ключевые кадры в слоях/треках "Блики", "Шар" и "Тень", и примените к этим кадрам команду контекстного меню Create Motion Tween (для версии CS 3 и ниже) и Create Classic Tween (для версии CS 4 и выше). Все три трека окрасятся в бледно-фиолетовый цвет с горизонтальными черными стрелками, после чего, на панели свойств Properties для ключевых кадров станет доступна кнопка Edit. Нажмите на эту кнопку, чтобы открыть диалоговое окно *** Custom Ease In/ Ease Out (Пользовательское ускорение/замедление). Настройте кривую скорости аналогично тому, как показано на эскизе ниже. Так бильярдный шар будет влетать в кадр слева и, замедляясь, докатываться почти до правой границы кадра.


    Шаг 13. Единственное, что осталось выполнить в нашей анимационной миниатюре это – вращение самого бильярдного шара. И тут мы не будем ничего усложнять, а воспользуемся программным режимом вращения, доступным на панели свойств для ключевых кадров в формате Motion. Оставьте выделенным только первый ключевой кадр в слое/треке "Шар" и на панели свойств Properties, из выпадающего списка Rotate, выберите значение CW – по часовой стрелке (Clockwise), и в окошке times поставьте цифру – 2. Такое число оборотов сделает бильярдный шар прежде, чем окончательно остановиться.


    Нажмите на клавиатуре Ctrl+Enter и полюбуйтесь на состоявшийся "бульк"…



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

    ** Длину и форму прямых линий можно редактировать с помощью инструмента Selection Tool (V). Когда объекты не выделены (изолирующий контейнер не виден), курсор вблизи линий или границ векторных форм принимает вид стрелочки с дугой внизу, рядом с крайними точками линий или углами векторных многоугольников курсор принимает вид стрелочки с уголком внизу.

    *** Графическая диаграмма в этом окне наглядно показывает, как с помощью манипуляторов исходящих от начальной и конечной точки диагональной линии можно настраивать ускорение или замедление анимируемых объектов. Чтобы манипуляторы стали доступны, поочередно выделяйте узловые точки линии диаграммы. Щелчок левой кнопкой мыши на любом свободном отрезке этой линии добавляет новую узловую точку с двумя манипуляторами. Прямая линия межу левой нижней и правой верхней точками обеспечивает равномерное движение объекта между соседними ключевыми кадрами. Если снять блокирующий флажок напротив надписи "Use one setting for all properties" (Использовать один параметр для всех свойств), то появляется возможность выбрать из списка, одно из пяти свойств объекта, на которые будут влиять настройки кривой скорости – Позиция; Поворот, Масштаб; Цвет и Фильтр.

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

В этом уроке Вы познакомились с подготовкой к анимации объектов, в элементах которых использованы линейные градиентные заливки. Применили некоторые фильтры и режимы наложения к символьным объектам типа – Movie clip. И, конечно же, поупражнялись в настройках кривой скорости в окне Custom Ease In/ Ease Out. Надеюсь, что приемы, использованные в этом уроке, смогут Вам пригодиться и в будущем для решения новых анимационных задач.

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





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


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

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

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


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

Комментарий добавил(а): LadyMaster
Дата: 2015-01-16

Спасибо за урок! Очень понравился. Заморочки с символами становятся всё понятнее ))

Комментарий добавил(а): Игорь
Дата: 2015-01-17

LadyMaster, спасибо Вам! Очень достойный результат!


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

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