Здравствуйте, гость ( Вход | Регистрация )

Свернуть

Новости

Форум Лучшее из галереи Уроки и статьи
07.12.2015 Выставочный зал: кошарик - персональная выставка
31.08.2015 Интересные ссылки для рисовальщиков
21.01.2015 Выставочный зал 2: Игрушки Олеси Гавриленко

27.12.2014 Выставочный зал: кошарик - персональная выставка
17.11.2014 Дуэль "Рыбки" - победитель Лисичка
05.11.2014 Конкурс иллюстраций "Снежная королева", до 31 января
30.10.2014 Дуэль "Рыбки" до 16 ноября
14.07.2014 Мастер-класс Мини-мишка в технике фелтинга
26.05.2013 Ау! Мы ищем таланты! – приглашаем модераторов!
Рождение
tn_gallery_13507_850_1021035.jpg

06.01.2016 Виртуальный Музей: Русский живописец Василий Дмитриевич Поленов
28.12.2015 Виртуальный Музей: Нидерландский живописец Квентин Массейс
16.12.2015 Виртуальный Музей: Итальянский живописец Франче́ско Айец
17.11.2015 Виртуальный Музей: Луи Анкетен (Louis Anquetin)
11.11.2015 Виртуальный Музей: Русский живописец Алексей Иванович Корзухин
Файловый архив
06.09.2013 Прочее: Файлы к уроку "Чайная церемония"
05.09.2013 Журнал Art Tower: ArtTower Magazine #8
16.05.2013 Adobe Photoshop: Кисти: Reid Southen brush
16.05.2013 Adobe Photoshop: Кисти: Goro Fujita brush
16.05.2013 Adobe Photoshop: Кисти: Кисти для рисования в Photoshop
Блоги Новости в цифровом мире и мире дизайна
02.12.2014 Дама с каменьями: Вести с крыши 2
08.11.2014 Timenews: Вассерман: прежняя модель мировой экономики исчерпала себя
06.11.2014 Дама с каменьями: Приятные вести с крыши))) от Гаргула)
02.11.2014 Spell: Книги Дж. Кэмерон
22.10.2014 Vjaz: от ФУ до МА
25.11.2015 Комментарий от Foxx в Costa Rica Adventure Divers, Логотип для компании и рисунок на майку (maria_mer)
18.11.2015 Комментарий от maria_mer в Spellforce - майка, для фанов игры (maria_mer)
18.11.2015 Комментарий от maria_mer в Белая книга. Целитель - любительский прект (maria_mer)
09.04.2015 Комментарий от Romana в Книги Дж. Кэмерон (Spell)
08.04.2015 Комментарий от Romana в Я решил вернуться... (Элбирет)
16.03.2015 ФОТОФОРУМ-2015
01.01.2015 ARQUTE.com и ArtTalk.ru закрываются
19.01.2017 Конкурс дизайна логотипов
26.12.2016 ру/Ководство: О творческом развитии
14.10.2016 ру/Ководство: Разнообразие

 
Добавить ответ в эту темуОткрыть тему
> Маятник, Урок по непрограммной флеш-анимации.
V
Viva
сообщение 13.12.2011 - 14:11
Сообщение #1


Злая и пушистая. Белая и колючая.
******

1 место1 местоМеткий стрелок2 место2 местоМеткий стрелокЗвезда писателя I степени2 местоЗа вклад в развитие ArtTower.ruЗа вклад в развитие ArtTower.ru

Группа: Старшие советники
Сообщений: 4613
Регистрация: 10.05.2006
Из: Россия, Черноземье, Липецк
Пользователь №: 45
Вне группировок:)
Галерея Блог


Симпатии:  217  


Казалось бы, что может быть проще, чем заставить раскачиваться из стороны в сторону маятник часов-ходиков?
Достаточно изобразить нечто похожее на корпус-домик с циферблатом в одном слое, векторный или растровый (png) символьный объект маятника поместить в другой слой. Создать в этом слое на временной диаграмме ключевой кадр с крайним правым положением маятника и еще один ключевой кадр с крайним левым и замкнуть цикл копией первого ключевого кадра...
Но давайте сравним два варианта анимации такого маятника:

В первом случае используется только программная анимация, что в режиме Onion Skin отображает равные промежутки между фазами движения;
Во втором варианте видно, что промежутки между фазами в центре больше, чем по краям. Это обозначает, что в крайних левом и правом положениях маятник замедляется и снова ускоряется, изменяя направление движения.

Для просмотра и сравнения движения нажмите на любую иллюстрацию.



Как Вы заметили, в демонстрационном клипе левый вариант движения маятника выглядит несколько конвульсивно и уж никак не вызывает ассоциаций с ритмичными звуками "тик-так,тик-так..." И это все из-за того, что в первом случае используется только анимация типа - Motion Tween (Промежуточное движение). Во втором же случае, уже имеет место дополнительное применение настроек "кривой скорости" в окне Custom Ease In/Ease Out.

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

Шаг 1. Создайте новый документ шириной - 400рх. и высотой - 550рх, частоту смены кадров измените на 25fps. В первом же слое создайте фоновый прямоугольник с градиентной заливкой и размерами равными размерам документа (400х550рх). Слой назовите "Фон" и заблокируйте, чтобы не делать в нем никаких операций.

Шаг 2. В новом слое, над слоем "Фон", попробуйте изобразить корпус похожий на скворечник с циферблатом и стрелками (построение всех деталей корпуса в одном слое следует проводить в режиме - Object Drawing), Слой назовите "Корпус". Размеры корпуса часов должны примерно составлять: ширина - 237рх.; высота - 266рх. Для примера Вы можете воспользоваться эскизом корпуса и стрелок, которые получились у меня.



Шаг 3. Теперь давайте создадим еще один слой "Маятник" для одноименного символьного объекта, который в свою очередь может состоять из нескольких слоев с различными объектами такими как - стержень, диск, блики... Диаметр диска сделайте примерно равным 74-75рх., размеры стержня вместе с наконечником должны составить по ширине и высоте - 17 x 360px. Все объекты внутри символа "Маятник" располагайте по центру относительно вертикальной оси "X" и ниже горизонтальной оси Y так, чтобы верхний край объекта "Стержень" находился в начальной ее точке.
(На свое усмотрение Вы можете придумать форму маятника как и форму стрелок, форму бликов для придания блеска и объема.)



Шаг 4. Возвращаемся на уровень редактирования сцены и располагаем символьный объект "Маятник" в центре рабочего окна по вертикали и ниже оси минутной и часовой стрелок по горизонтали. Используя инструмент свободной трансформации Free Transform Tool (Q), переместите точку регистрации вверх на центральный прямоугольник габаритного контейнера маятника, как показано на иллюстрации. Это необходимо для того, чтобы все дальнейшие раскачивания маятника происходило именно вокруг этой точки.



Шаг 5. Теперь, в первом ключевом кадре можно поместить наш маятник в крайнее левое положение начала цикла. Для этого активируйте режим привязки объектов Snap to Object и с помощью инструмента свободной трансформации Free Transform Tool (Q) поверните маятник вокруг его точки регистрации на 22,5° по часовой стрелке.
(Благодаря активному режиму Snap to Object вращение маятника будет происходить не плавно, а с градацией в 1/16, что и позволит нам осуществить поворот на один шаг в нужном направлении).



Шаг 6. Далее, как Вы уже могли догадаться, надо определиться с правым крайним положением маятника, которое следует воссоздать в новом ключевом кадре. Выделите в слое "Маятник" второй кадр временной диаграммы и выполните команду контекстного меню Insert Keyframe (Вставить ключевой кадр). Сам же символьный объект "Маятник" в сцене, используя все тот же инструмент свободной трансформации в режиме привязки объектов, разверните на 45° против часовой стрелки относительно наклона в первом ключевом кадре.
И забегая немного вперед, предлагаю в слоях "Корпус" и "Фон" продлить последовательность кадров до 32 кадра, именно столько времени понадобится для полного цикла движения маятника.





Шаг 7. Чтобы замкнуть цикл раскачивания маятника, нужно создать еще один ключевой кадр в слое "Маятник", который будет абсолютной копией первого ключевого кадра. Выделите правой кнопкой мыши первый ключевой кадр и выполните команду контекстного меню Copy Frames (Копировать кадры). Выделив 33 кадр временной диаграммы в слое "Маятник", выполните команду контекстного меню Paste Frames (Вставить кадры). Это процедура временная и делается лишь для того, чтобы избежать в результате едва заметного залипания маятника в левом положении из-за двух одинаковых кадров. Когда все настройки анимации будут завершены, то этот "из ряда вон выходящий кадр" мы вырежем и цикл будет заканчиваться, как ему и положено, на 32 кадре временной диаграммы.



Шаг 8. Итак, расставим по местам все ключевые кадры и вдохнем наконец жизнь в наш маятник. Выделите второй ключевой кадр в слое "Маятник" и перетащите его на место 17 кадра временной диаграммы. Затем, не снимая выделения с этого ключевого кадра, одновременно нажмите и удерживайте клавиши Ctrl и Alt, выделите первый ключевой кадр и, вызвав контекстное меню, выполните команду Create Motion Tween (Создать промежуточное движение). Вся последовательность кадров от первого до тридцать второго окрасится в светло-фиолетовый цвет. Если сейчас просмотреть тестовую анимацию (Ctrl + Enter), то как раз и получим нечто похожее на левый вариант движения маятника в демонстрационном клипе, только с периодическим мельканием тридцать третьего кадра.



Шаг 9. Продолжаем настраивать движение маятника, не снимая выделения с первого и семнадцатого ключевых кадров, отправляемся на панель свойств Properties, где в группе Tweening открываем диалоговое окно Custom Ease In/Ease Out. Форму кривой скорости настраиваем примерно так, как показано на иллюстрации ниже.






Шаг 10. В заключении нам осталось только "подровнять" трек "Маятник", не нарушая цепь движения анимируемого объекта. Выделите 32 кадр в соответствующем слое и выполните команду контекстного меню Insert Keyframe (Вставить ключевой кадр). После этого выделите "выдающийся" за пределы цикла 33 ключевой кадр и в отношении него выполните команду контекстного меню Remove Frames (Удалить кадры). Запустите тестовую анимацию (Ctrl + Enter) и убедитесь, что Ваш результат близок или лучше того, что Вы увидите, нажав ниже ссылку - "Посмотреть результат".





Кто захочет, может также дополнить свою сцену тенями, которые отбрасывают маятник и сами часы. Для этого необходимо символьным объектам "Корпус" и "Маятник" на панели свойств изменить Поведение экземпляра на "Movie Clip" (Видеоклип). В разделе "Filters" (Фильтры) назначить эффект "Drop Shadow" (Падающая тень) на оба эти объекта и для каждого произвести индивидуальные настройки.
Можно пойти и еще дальше, дополнив сцену гирьками с цепочками, как у настоящих ходиков, поселить в часы кукушку, заставить двигаться стрелки а затем и точное время показывать... Но это - темы уже для других уроков.

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

Вторая часть урока - Маятник с пером

________________________________________________________________________________


!


Урок размещен с разрешения его автора Flashcinema.ru. Оригинал доступен здесь.
Запрещается копирование и публикация урока на других сайтах без письменного согласия автора и размещения ссылок.


The original Flashcinema.ru tutorial is written by Flashcinema.ru.
No part of this tutorial can be copied/pasted on any other website without the author's express written permission.

 


--------------------
Самая главная трудность как всегда не в технике, а в людях...

Нельзя дать всем все, ибо всех много, а всего мало.
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения

Быстрый ответДобавить ответ в эту темуОткрыть тему
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 



- Текстовая версия форума Сейчас: 24.10.2017 - 12:32