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

Свернуть

Новости

Форум Лучшее из галереи Уроки и статьи
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_3299_464_140351.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 - 15:44
Сообщение #1


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

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

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


Симпатии:  217  


Маятник с пером земляной кукушки, которое лежало в старом блокноте, найденном на чердаке заброшенного дома одного американского натуралиста, жившего в США на границе с Мексикой с 1864 по 1927 гг.

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

Шаг 1. Создайте новый слой над слоем "Маятник" и назовите его - "Перо". С помощью инструмента перо Pen Tool и его вспомогательных функций нарисуйте в первом ключевом кадре этого слоя перо, на примере иллюстрации ниже. Получившийся результат конвертируйте в символ "Перо" и уже внутри этого символа можете поколдовать над расцветкой пера. (Павлинье или попугаичье перья тоже вполне подойдут).





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



Шаг 3. В качестве связующего элемента между пером и маятником у нас будет выступать тоненький шнурок или толстая нитка, кому, что больше нравится. Мы не будем придавать объем или какое-то сложное строение этому объекту, тем более, что при таком масштабе всего этого и не будет видно, просто используем отрезок линии темно-коричневого цвета. Создадим новый слой между слоями "Маятник" и "Перо", в котором с помощью инструмента для построения линий Line Tool(N) проведем линию от точки регистрации пера к верхней части наконечника маятника. Позже эту нитку мы снабдим анимацией формы (Shape Tween), поэтому ее не надо конвертировать в символ. А если Вы ее нарисовали в режиме Object Drawing (J), то разбейте ее на составляющие командой контекстного меню Break Apart (Ctrl+B), и придайте ей слегка изогнутую форму, как это показано на иллюстрации ниже.





Шаг 4. Далее, как не трудно догадаться, мы создадим аналогичное положение пера и нитки относительно маятника, когда он находится в крайнем правом положении. Для этого выделим в слоях "Перо" и "Нитка" 17 кадр временной диаграммы и конвертируем их в ключевые командой контекстного меню Convert to Keyframes. Объекты "Перо" и "Нитка" в этих ключевых кадрах, отразите по горизонтали и поместите их в соответствующие места в рабочем пространстве сцены.





Шаг 5. Теперь можно приступать к созданию новых ключевых кадров между 1 и 17 ключевыми кадрами. (От 17 до 32 кадра мы будем использовать "зеркальные" копии со смещением из первой половины цикла). Для большей наглядности, я предлагаю анимировать сразу оба объекта – и "Перо" и "Нитку". Выделяем третьи кадры временной диаграммы в обоих слоях и конвертируем их в ключевые. Притом, что маятник в это время уже начал свое движение вправо, перо продолжает двигаться по инерции влево и окажется в этот момент примерно на одном уровне с маятником по вертикали. Нитка, связывающая их, утратит натяжение и примет более изогнутую форму. В рабочем пространстве сцены придайте положение перу и форму нитке такие же, как показано на иллюстрации ниже. То же самое проделайте для кадров – 5, 11, 14 (это совпадающие номера ключевых кадров для объектов "Перо" и "Нитка", в остальном будут некоторые расхождения).



Шаг 5. Вы, наверняка, обратили внимание, что объект "Перо", согласно приведенной выше схеме, в ключевых кадрах 5 и 11 имеет более широкую часть оперения внизу. Если прямо сейчас временно назначить анимацию движения на пятый ключевой кадр и подвигать селектор кадров вдоль хронометрической линейки в сторону одиннадцатого ключевого кадра, то Вы увидите, что перо "уплощается", а в 8 промежуточном кадре и вовсе становится невидимым. В данном случае (если это не является частью творческого замысла), избежать такой визуальной ошибки нам поможет дополнительный ключевой кадр. Во время движения быстрая подмена будет незаметна для глаза, а нежелательных программных трансформаций нам удастся избежать.
Удалите анимацию движения с 5 ключевого кадра, если Вы ее назначали, конвертируйте 6 кадр временной диаграммы в ключевой кадр, а символьному объекту "Перо" задайте положение в сцене, как показано на правой иллюстрации ниже.


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






Шаг 6. Теперь на все ключевые кадры первой половины цикла в слое "Перо" назначим анимацию типа – промежуточное движение (Motion Tween, для CS 4, CS5 – Classic Tween) и настроим ускорение/замедление в диалоговом окне Custom Ease In/Ease Out для ключевого кадра 6. Это лучше сделать сейчас, чтобы потом было проще определиться с формой и местоположением нитки в будущих ключевых кадрах и синхронизировать ее анимацию с анимацией пера и маятника.
Кривая скорости имеет вначале, у 6 ключевого кадра, крутой подъем и к 11 ключевому кадру, практически, горизонтальное направление, что обеспечит непродолжительное состояние невесомости перу до тех пор, когда нитка натянется и вновь потянет его вслед за маятником. Но при этом, подлетая вверх, перо по инерции немного смещается вправо.







Шаг 7. Переходим к анимации формы объекта "Нитка" в первой половине цикла. Назначьте на 1 и 3 ключевые кадры слое "Нитка" анимацию формы типа – Shape Tween. Перемещая селектор кадров вдоль хронометрической линейки, Вы заметите, что между 1 и 3 ключевыми кадрами в изменении формы проблем не возникало, то в 4 кадре программа внесла свои коррективы и вывела усредненную форму нитки. Вершины линии поменялись местами и, ни одна из них, не оказалась в нужном месте. Этот недочет мы быстро исправим. Конвертируйте в ключевой 4 кадр слоя "Нитка" и с помощью инструмента редактирования подобъектов Subselection Tool (A) переместите вершины на наконечник маятника и под пучок пуха на пере. Векторными манипуляторами придайте форму линии такую, как показано на правой иллюстрации ниже.



Шаг 8. Выделите все ключевые кадры с 5 по 14 и задайте им анимацию формы типа - Shape Tween. Так как с 6 по 11 ключевые кадры мы регулировали скорость движения пера, то в этом промежутке нарушилась синхронизация с ниткой. Чтобы исправить это, конвертируйте 8 кадр в слое "Нитка" в ключевой и с помощью инструмента Subselection Tool (A) настройте форму линии нитки, как и на правой иллюстрации ниже.





Шаг 9. После того, как анимация обоих объектов – "Пера" и "Нитки" в первой половине цикла выполнена и синхронизирована, можно переходить к анимации этих объектов во второй половине цикла. Это будет гораздо проще, так как почти все ключевые кадры у нас есть, их нужно только последовательно скопировать, а в сцене "отзеркалить" и передвинуть объект нитки и символьный объект пера вслед за маятником. Если в первой половине цикла мы изначально анимировали "Перо", то теперь, в первую очередь, удобней обозначить все ключевые кадры для объекта "Нитка", она послужит и ориентиром для положения пера в сцене.
Итак, согласно приведенным ниже таблицам скопируйте и расставьте вдоль хронометрической линейки копии ключевых кадров на соответствующих слоях:



Шаг 10. Выделяем поочередно в каждом ключевом кадре во второй половине цикла объект "Нитка" и применяем к нему команду Главного меню – Изменить => Трансформация => Отразить по вертикали (Modify => Transform => Flip Horizontal). С помощью клавиш перемещения курсора "Right" перемещаем нитку к маятнику, как это показано на иллюстрации ниже. Затем, аналогичные операции проделываем и с символьным объектом "Перо", ориентируясь на "свободный конец" нитки.



Шаг 11. Ну и в завершении остается только замкнуть цепь последовательности кадров в конце второй половины цикла. А именно нам нужно создать 32 ключевой кадр в слоях "Перо" и "Нитка", в котором будет отображаться фаза движения объектов, предшествующая первому кадру. Мы можем поступить аналогично тому, как мы завершали цикл в уроке "Маятник", но более логичным и быстрым в исполнении здесь будет иной способ. Выделите одновременно в слоях "Перо" и "Нитка" 16 кадр временной диаграммы. Из контекстного меню примените к выделенным кадрам команду – Конвертировать в ключевые кадры (Convert to Keyframes). Перетащите эти выделенные кадры вдоль хронометрической линейки на место 32 кадра. Не снимая выделения, примените к объектам в сцене команду Главного меню – Изменить => Трансформация => Отразить по вертикали (Modify => Transform => Flip Horizontal). С помощью клавиши перемещения курсора "Left" передвиньте "Перо" и "Нитку" влево, до того места, где нитка должна касаться верхней части наконечника маятника.






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


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

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

________________________________________________________________________________


!


Урок размещен с разрешения его автора 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

 



- Текстовая версия форума Сейчас: 17.12.2017 - 05:26