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

Свернуть

Новости

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


Постоялец
**


Группа: Жители
Сообщений: 78
Регистрация: 15.01.2012
Из: Россия, Москва
Пользователь №: 19009



Симпатии:  9  


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

Прикрепленное изображение


Шаг 1. Создайте новый документ шириной 500 px. и высотой 350 px.. Частоту смены кадров, как обычно, установите 25 fps., документ сохраните в удобной для Вас директории на локальном диске под названием "Юла". В первом слое создайте фоновый прямоугольник с линейным градиентом. С помощью инструмента трансформации градиента Gradient Transform Tool (F) разверните его на 90°, а маркеры и оттенки настройте примерно так, как показано на эскизе ниже. Если хотите, можете выбрать другие оттенки градиента или вообще оставить фоновую заливку гладкой, а то и вовсе обойтись без фона. Если фон все-таки решили сделать, назовите его "Фон" и заблокируйте.

Прикрепленное изображение


Шаг 2. В новом слое над слоем "Фон" с помощью инструментов построения векторных форм создайте половинку будущей юлы приблизительно такую же, как показано на эскизе ниже (1). При построении формы используйте волосяную линию обводки. Получившийся объект преобразуйте в символ (F8) типа Graphic (Графика) и сохраните его в рабочей библиотеке под названием "Юла". После этого перейдите на уровень редактирования подобъектов символа "Юла", дважды кликнув над ним левой кнопкой мыши, выделите и сгруппируйте полученную ранее форму, если вы не создавали ее в режиме Object Drawing (2). Создайте копию этой формы (Ctrl+C => Ctrl+Shift+V) и отразите по горизонтали контурную копию половинки юлы. Расположите и совместите оба сгруппированных объекта относительно вертикальной оси, чтобы они образовали симметричную фигуру аналогично показанной на эскизе ниже (3). Объекты разгруппируйте и получившуюся фигуру с замкнутым контуром залейте каким-нибудь темным оттенком #330000 (4).

Прикрепленное изображение


Шаг 3. Продолжая работу на уровне редактирования подобъектов, добавьте еще один слой над слоем с темным силуэтом и сформируйте в нем отдельные объекты - блики, которые подчеркнут объем нашей юлы. Приблизительные формы этих бликов показаны на эскизе ниже. Блики не должны иметь контуров, а заливать их лучше двухцветным градиентом с одинаковыми цветами маркеров, но непрозрачность одного из этих маркеров должна быть минимальной (Alpha=0). Значение альфа канала для маркеров с более плотным насыщением цвета варьируются от 35% до 85% в зависимости от расположения блика. Рефлексы — блики, обращенные к низу, темнее и имеют более прозрачные маркеры.

Прикрепленное изображение


Шаг 4. Как только закончите настройку градиентов и юла приобретет желаемый объем, возвращайтесь к основной сцене, где можно попробовать зкрутить ее. При выделенном в сцене символьном объекте "Юла" нажмите F8 и, в появившемся диалоговом окне Convert to Symbol (Преобразовать в символ) выберите тип Movie clip (Видеоклип), точку регистрации установите в нижнее центральное положение, символ назовите "Юла_м". И теперь уже внутри этого символьного объекта мы создадим анимацию вращения юлы. Как я и обещал в самом начале, этот анимационный трек состоит всего из двух кадров временной диаграммы. Выделите первый ключевой кадр и, нажав клавишу F6, создайте еще один такой же ключевой кадр. Во втором ключевом кадре с помощью инструмента свободной трансформации Free Transform Tool (Q) разверните выделенный символьный объект "Юла" относительно точки регистрации по часовой стрелке (можно и по минутной) буквально на 1°. Дополнительно, чтобы сделать вращение еще более явным, тем же инструментом придайте крошечный скос не больше, чем на пару пикселей по горизонтальной оси.
Если прямо сейчас запустить тестовую анимацию (Ctrl + Enter), то Вы сможете, скорей всего, испытать гордость за создание персонального "вечного двигателя". Ваш результат на данный момент не должен сильно отличается от моего, в противном случае еще раз внимательно проверьте, где была допущена неточность и добейтесь максимальной схожести.

Прикрепленное изображение

Прикрепленное изображение

Прикрепленное изображение


Шаг 5. Так как наша юла не является каким-то там НЛО, висящим в пространстве, предлагаю поместить ее на некую условную поверхность, добавив в сцену тень. Над слоем с фоном создайте новый слой. В нем с помощью инструмента для построения окружностей Oval Tool (O) сформируйте горизонтально вытянутый эллипс такой же ширины, как и ширина "юбки" юлы. Контур удалите, а градиент радиальной заливки настройте так, как показано на эскизе ниже.
В том варианте видеоклипа, который продемонстрирован в начале урока, тень была анимирована, а для этого, как Вы могли уже догадаться, ее тоже следует преобразовать в графический символ и анимировать отдельно. Также можно вращающийся объект и его тень пустить по какой-то траектории, назначив эту траекторию в управляющем слое Moution Guide.

Прикрепленное изображение



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

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

Прикрепленное изображение


________________________________________________________________________________


!


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

 


Сообщение отредактировал Viva - 16.04.2012 - 12:21


--------------------
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
T-Rex
сообщение 8.03.2012 - 12:22
Сообщение #2


Зажиточный Горожанин
*****

За вклад в развитие ArtTower.ru1 местоЗвезда писателя II степени
Группа: Почетные граждане
Сообщений: 1533
Регистрация: 14.12.2009
Пользователь №: 14921
Галерея Блог


Симпатии:  65  


Спасибо за урок, возможно пригоддиться в будущем.


--------------------
Мимо мчатся стальные поезда, а я еду в своем игрушечном локомотиве Чух Чух...Чух Чух
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
flashcinema
сообщение 8.03.2012 - 22:48
Сообщение #3


Постоялец
**


Группа: Жители
Сообщений: 78
Регистрация: 15.01.2012
Из: Россия, Москва
Пользователь №: 19009



Симпатии:  9  


T-Rex, Спасибо, что заглянули!
Надеюсь, что хоть в качестве тренинга сделаете что-нибудь подобное и выложите здесь)))


--------------------
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
T-Rex
сообщение 8.03.2012 - 23:35
Сообщение #4


Зажиточный Горожанин
*****

За вклад в развитие ArtTower.ru1 местоЗвезда писателя II степени
Группа: Почетные граждане
Сообщений: 1533
Регистрация: 14.12.2009
Пользователь №: 14921
Галерея Блог


Симпатии:  65  


flashcinema, честно говоря векторное конструирование во флэше для меня дикость и мучение. Помню там что-то крутил, это была пытка, объекты накладываются друг на друга, тут же искажаются, пришел к выводу что проще наверное импортить из других редакторов готовый вектор. Вот если бы обработка вектора была бы взята из корела, а в редактор actionscript было добавлено автоформатирование как в vba или из netbeans несколько особенностей редактора это было бы супер. Я попробую на actionscript реализовать управление скоростью вращения и передвижения, если это имеет смысл. Все предыдущие уроки видел, все это ведь не програмная анимация, я больше изучаю програмную. Вот дошел до создания своих событий в классе, немного запутанная там система. Кстати, было бы интересно посмотреть урок по програмной анимации эффектов вроде дыма, облаков, огня, какой ни будь плазмы, воды, взрывов с разными характеристиками, в общем чего-то такого. Помню, урок не програмного огня красивый и эффектный, но есть одно но, такой способ реализации не совсем гибкий если нужно что-то изменить. В этом плане програмная анимация позволила бы регулировать цвета, силу, форму, положение, количество источников эффекта.

Сообщение отредактировал T-Rex - 8.03.2012 - 23:39


--------------------
Мимо мчатся стальные поезда, а я еду в своем игрушечном локомотиве Чух Чух...Чух Чух
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
flashcinema
сообщение 10.03.2012 - 12:55
Сообщение #5


Постоялец
**


Группа: Жители
Сообщений: 78
Регистрация: 15.01.2012
Из: Россия, Москва
Пользователь №: 19009



Симпатии:  9  


T-Rex, ну, я как раз проповедую именно непрограммную анимацию ближе к классической перекладке.
На мой взгляд, анимация по скриптам уместна и хороша исключительно в некоторых эффектах и носит больше декоративный характер.
В сюжетной анимационном ролике программная анимация выглядит слишком механической и неживой, особенно когда динамика какой-нибудь искрометной мизансцены,
с меняющимся темпоритмом движения, ну никак не соответствует монотонному шевелению объектов/персонажей.
Что касается построения векторных форм во флеш, если не брезговать созданием дополнительных слоев (это совершенно не добавляет веса клипу),
или созданием форм в режиме Object Drawing (J), то искажений и вырезания нижележащих форм не произойдет.
Как и при работе в любой программе, здесь нужен определенный навык прежде, чем почувствуешь себя комфортно, работая во Flash.

Сообщение отредактировал flashcinema - 10.03.2012 - 12:56


--------------------
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
XoID
сообщение 14.03.2012 - 12:37
Сообщение #6


Кинет: Маг III ступени
***

2 место3 место
Группа: Почетные граждане
Сообщений: 526
Регистрация: 8.05.2006
Из: лесу почти
Пользователь №: 9



Симпатии:  31  


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

T-Rex, я пользуюсь адобовским Illusrtaror-ом. Инстремунтарий там не в пример удобнее, чем флэшевый, + полная интеграция через Ctrl-C >> Ctrl-V.
Попробуйте. Не думаю, что после Корела будут сложности большие.


--------------------
Master XoID... Call me Master.
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
flashcinema
сообщение 14.03.2012 - 21:31
Сообщение #7


Постоялец
**


Группа: Жители
Сообщений: 78
Регистрация: 15.01.2012
Из: Россия, Москва
Пользователь №: 19009



Симпатии:  9  


XoID, да я и не спорю, что иногда программная анимация весьма и весьма уместней.
Тот же снег, гораздо разумней делать именно программный, а не "протаскивать" многослойную вертикальную панораму
с множеством нарисованных белых точек, как это делалось бы при съемках на пленку. Потому и говорю, что в декоративности программный способ чище и выгодней.
Но ту же анимацию прыгающего мячика рациональней и зрелищней делать непрограммно.
Урок с анимацией огня предложен в качестве альтернативы для тех, кто не чувствует себя уверенно в написании скриптов или вообще далек от их понимания.
Да и стилистически программный огонь не всегда может соответствовать изобразительному ряду анимационного ролика.
Вот как-то так я смотрю на программную и непрограммную анимацию)))


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

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

 



- Текстовая версия форума Сейчас: 18.12.2017 - 23:34