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

Свернуть

Новости

Форум Лучшее из галереи Уроки и статьи
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_5458_9_112597.jpg

© godcreated
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
сообщение 19.01.2012 - 12:57
Сообщение #1


Постоялец
**


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



Симпатии:  9  


     Допустим, Ваш персонаж удобно расположился в кресле у камина и, глядя на мерцающее пламя… Или: – "Огни факелов ярко освещали вход в сторожевую башню замка "; " Мело, мело по всей земле во все пределы. Свеча горела на столе, Свеча горела". Думаю, найдется еще немало поводов, чтобы потратить некоторое время на этот урок и разобраться в том, как зажигать свечи и разводить костры с помощью непрограммной флеш анимации.
     Представьте, сидят как-то раз у костра индейцы – Чингачук и его младший брат Чингачгек. Сидят, закутавшись в одеяла, глядят на звезды и ведут неспешную беседу о будущем своего племени… Но давайте не станем вникать в беседу двух братьев, а сразу заострим внимание на слове "костер" и попробуем визуализировать его с помощью флеш анимации.



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

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



Шаг 2. Скопируйте в свой рабочий документ эскиз, представленный ниже. С помощью инструментов построения векторных форм обведите все детали и залейте их красно-желтым радиальным градиентом, чтобы получить примерно такие же объекты без контура. Получившиеся объекты преобразуйте в символы типа Movie Clip (Видеоклип) с точкой регистрации расположенной в центре, и сохраните их в рабочей библиотеке под названиями "Язык", "Язык 1", "Язык 2" и "Язык 3". Именно этот тип символов выбирается для того, чтобы по отношению к ним можно было применить программный фильтр Blur (Размытие).

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



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

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



Шаг 4. Не снимая выделения с вновь созданного графического символа, преобразуйте его еще раз в символ, но на этот раз выберите тип Movie Clip (Видеоклип) и назовите его "Искра_м". Дважды кликнув по эллипсу, перейдите на уровень редактирования подобъектов, и слой, на котором находится графический символ "Искра", тоже назовите "Искра". К этому слою добавьте направляющий слой, нажав кнопку Add Motion Guide (Добавить направляющую движения). В версиях CS 4/5 направляющий слой добавляется командой контекстного меню, вызвать которое можно щелчком правой кнопки мыши на управляемом слое. В направляющем слое с помощью инструмента построения линий Line Tool (N) проведите вертикальную волосяную линию длиной 180200 рх. Придайте линии изогнутую форму, как показано на эскизе ниже. Именно по такой траектории некоторые искры будут уноситься ввысь и гаснуть. Нижняя вершина направляющей линии должна находиться над точкой регистрации графического объекта "Искра".

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



Шаг 5. Последовательность кадров в направляющем слое продлите до 30-го кадра. Ровно столько будет длиться общий цикл одной искорки. Теперь надо поместить нашу искру в самое верхнее положение ее полета, где она и исчезнет. Это может произойти примерно в 25-ом кадре временной диаграммы. Выделите 25 кадр на слое "Искра" и преобразуйте его в ключевой кадр (F6). Символьный объект "Искра" в новом ключевом кадре расположите над верхней вершиной направляющей линии.

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



Шаг 6. В слое с графическим символом "Искра" выделите первый ключевой кадр временной диаграммы и выполните команду контекстного меню Create Motion Tween (для Flash Cs3) и Create Classic Tween (для Flash Cs 4/ Cs 5). В окне Custom Ease In/Ease Out форму кривой скорости настройте примерно так, как показано на эскизе ниже. Затем выделите 17 кадр временной диаграммы в этом же слое и преобразуйте его в ключевой кадр (F6). В 1-ом ключевом кадре выделите символьный объект "Искра", и в группе Color на панели Properties наложите на него ярко-желтый оттенок (Tint = #FFFF00) с уровнем непрозрачности в 75%. Поднявшись вверх, искра полностью сгорит и исчезнет. Для этого в 25-ом ключевом кадре в группе Color на панели Properties непрозрачность символьного объекта "Искра" снизим до минимума (Alpha = 0).
Так как костер не может "искрить" всего одной искрой, то на основе этого клипа можно создать еще пару других дублирующих символов типа Movie Clip (Видеоклип), в которых нужно изменить длину и форму траектории полета искры, начало и срок ее жизни. Количество, имена и периодичность для таких видеоклипов с искрами продумайте и осуществите самостоятельно. В конце концов, искры в пламени - это процесс второстепенный, а в пламени свечи, к тому же, процесс еще и достаточно редкий.

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

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

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



Шаг 7. С отдельными искрами мы разобрались, если нет, то разберитесь. И теперь начнем анимировать отдельные языки пламени, из которых, в основном, и состоит наш костер. Вернитесь на самый верхний уровень редактирования сцены и, при выделенном объекте "Искра_м" в слое "Пламя", создайте еще один символ (F8) типа Movie Clip (Видеоклип) и назовите его "Пламя". Двойным щелчком по выделенному в сцене объекту искры перейдите на уровень редактирования подобъектов, где над слоем с клипом искры (этот слой так и назовите), создайте еще один слой и назовите его "Язык". Последовательность кадров обоих слоев продлите до 30-го кадра временной диаграммы. Из рабочей библиотеки перетащите на верхний слой и разместите в центре символьный объект "Язык". Во вкладке Filters (Фильтры) примените к объекту "Язык" программный фильтр Blur с коэффициентом размытия по осям Х и Y равным 9. Качество размытия выберите – Medium (Среднее).

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

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



Шаг 8. Теперь придадим некое циклическое движение колебанию первого языка пламени. Пусть в начале цикла он будет, практически, прозрачным и широким, а к середине цикла наберет плотность окраски и вытянется по вертикали. Преобразуйте обычные кадры 14 и 17 в слое "Язык" в ключевые кадры, символьному объекту "Язык" придайте такие же формы и параметры, как и на эскизе ниже. Копию 1 ключевого кадра поместите в 31 кадр временной диаграммы. После этого на 1, 14 и 17 ключевые кадры назначьте анимацию типа Motion Tween (для Flash Cs3) и Classic Tween (для Flash Cs 4/ Cs 5). Преобразуйте 30 кадр в ключевой, а в конце 31 ключевой кадр удалите, чтобы "подровнять" цикл.

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

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



Шаг 9. Добавьте еще слой над слоем "Язык", назовите его "Язык 1" и поместите на него из рабочей библиотеки одноименный символьный объект. Как и в предыдущем шаге, примените к этому объекту программный фильтр Blur с таким же коэффициентом по обеим осям. На временной диаграмме создайте дополнительные ключевые кадры, где трансформируйте символьный объект и измените его непрозрачность согласно эскизу, представленному ниже.

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

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



Шаг 10. Далее, еще в одном новом слое полностью повторите всю процедуру с символьным объектом "Язык 2". Но обратите внимание на различия раскадровки временной диаграммы и параметры непрозрачности, показанные на эскизе ниже.

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

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



Шаг 11. У нас остался еще один неиспользованный и самый маленький язычок пламени. Такие мелкие язычки обычно срываются с краев основных языков пламени и быстро угасают. Как и в случае с символьным объектом "Искра", давайте создадим отдельный циклический видеоклип, который потом и поместим в общую композицию сборного символьного объекта "Пламя". Между слоями "Искра" и "Язык" добавьте еще один слой и назовите его "Язык 3". Перетащите на этот слой из рабочей библиотеки одноименный символьный объект и, не снимая с него выделения, преобразуйте его в новый символьный объект (F8) типа Movie Clip (Видеоклип), который назовите "Язык 3 м". Затем первый ключевой в слое "Язык 3" переместите вдоль хронометрической линейки на место 6-го кадра. Именно с этого момента будет начинаться цикл движения этого язычка пламени.

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



Шаг 12. Дважды кликнув левой кнопкой мыши на символьном объекте "Язык 3 м", перейдем еще глубже на уровень редактирования подобъектов и анимируем движение самого маленького языка пламени. Продлите последовательность кадров в единственном слое до 40-го кадра, ровно столько будет длиться цикл "жизни и небытия" языка пламени. К символьному объекту "Язык 3" также примените программный фильтр Blur с такими же коэффициентом и качеством размытия, как и к остальным языкам пламени. Преобразуйте 4, 9 и 13 кадры временной диаграммы в ключевые кадры. Задайте координаты, параметры по высоте, по ширине, и непрозрачность Alpha в 1 и 13 ключевых кадрах, как показано на эскизе ниже. В 9-ом ключевом кадре с помощью инструмента свободной трансформации Free Transform Tool (Q) придайте объекту небольшой скос по вертикали вправо, а в 13-ом ключевом кадре чуть больший скос, но уже влево. На 1, 4 и 9 ключевые кадры назначьте анимацию типа Motion Tween (для Flash Cs3) и Classic Tween (для Flash Cs 4/ Cs 5).

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


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

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



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

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




________________________________________________________________________________


!


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


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

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

 



- Текстовая версия форума Сейчас: 16.12.2017 - 13:57