Уроки

Новости

Статьи

Анимация

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

Раз, два и полетели.

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

Дата: 2012-07-12

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



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


Шаг 1. Не будем долго обсуждать создание фонового изображения. Это может быть и многоплановое векторное изображение тропического пейзажа, и растровый рисунок, и обычная фотография с цветком на переднем плане импортированная в сцену, или прямоугольник с линейной градиентной заливкой, какие уже не раз использовались в предыдущих уроках. Этот вопрос Вы решите самостоятельно. А пока создайте новый документ немного панорамного формата, чтобы колибри хватило места для небольшого полета, примерно 650 рх по ширине и 400 рх по высоте. Частоту смены кадров назначьте 25 fps. На первый слой поместите фоновое изображение (прямоугольник с линейной градиентной заливкой в размер Вашего документа), слой назовите "Фон" и заблокируйте его. Документ назовите "Полет" и сохраните его в удобной для Вас директории.


Шаг 2. Над слоем с фоном создайте новый слой и с помощью инструментов построения векторных форм нарисуйте на нем волосяной линией (hairline) абрис силуэта колибри в профиль, как показано на эскизе, который Вы увидите, нажав на кнопку ниже. (Для удобства просто перетащите изображение с эскизом контуров в свой рабочий документ и отрисуйте поверх него все необходимые детали). Еще на одном слое, согласно этому же эскизу, нарисуйте крыло. Более тщательную проработку цвета и объема объектов можно будет осуществить чуть позже, а пока залейте абрис тельца колибри предложенным мной или любым подходящим на Ваш взгляд цветом. Получившийся силуэт преобразуйте в графический символ с центральной точкой регистрации (F8) и сохраните его в рабочей библиотеке под названием "Колибри".


    Абрис крыла тоже залейте каким-нибудь цветом или предложенными на эскизе линейными градиентами. Выделенные контур и заливку также преобразуйте в графический символ (F8) и сохраните в рабочей библиотеке под названием "Крыло". Оба символьных объекта расположите друг над другом в рабочем пространстве сцены так, как показано на эскизе ниже.


Шаг 3. Вот и все элементы, которые необходимы для создания пробного полета нашей пока "фанерной" птички. Далее нам предстоит создать коротенькую циклическую анимацию машущих крыльев, состоящую всего из двух кадров. Не снимая выделения с вновь созданного графического символа "Крыло", преобразуйте его теперь в символ типа Movie Clip (Видеоклип F8) и назовите его "Крылья". Дважды кликнув по нему левой кнопкой мыши, перейдите на уровень редактирования подобъектов. Правой кнопкой мыши выделите первый ключевой кадр в пока единственном слое, где расположен графический символ "Крыло" и выполните команду контекстного меню Copy Frames (Копировать кадры). Затем создайте новый слой и, выделив в нем правой кнопкой мыши пустой ключевой кадр, выполните команду контекстного меню Paste Frames (Вставить кадры). Копию графического объекта "Крыло" в новом слое отразите по горизонтали, выполнив команду главного меню Modify=>Transform=>Flip Horizontal (Модифицировать, Трансформировать, Отразить по горизонтали). С помощью инструмента свободной трансформации Free Transform Tool (Q) немного разверните копию крыла против часовой стрелки и расположите ее аналогично тому, как это показано на эскизе ниже. Первый ключевой кадр в верхнем слое выделите и перетащите на позицию второго кадра временной диаграммы. Также его можно стащить на нижний слой в ту же позицию, это кому как удобней, суть от этого не изменится.

Запустив на данном этапе тестовую анимацию (Ctrl + Enter), Вы должны увидеть что-то похожее на мой пример приведенный ниже.


Шаг 4. Чтобы не пришлось делать отдельно анимацию перемещения в сцене для тельца колибри и отдельно для ее крыльев, вполне уместно будет объединить эти два символьных объекта в один. Это упростит и создание анимации вдоль направляющей траектории, и поможет избежать нежелательной асинхронности.
     Вернитесь на уровень редактирования сцены, на слой "Колибри". Двойным щелчком левой кнопкой мыши по силуэту колибри перейдите на уровень редактирования подобъектов. Над первым слоем с контуром и заливкой создайте новый слой и разместите на нем в рабочем пространстве сцены символьный объект типа Movie Clip (Видеоклип) "Крылья". Положение крыла внутри символьного объекта "Колибри" должно быть идентично положению внешней копии крыла, расположенной в сцене.
     После того, как закончите преобразования внутри символьного объекта "Колибри", вернитесь на уровень редактирования сцены и удалите из нее слой "Крыло" с внешней копией символьного объекта "Крылья". При просмотре тестовой анимации визуальных отличий от анимации в предыдущем шаге быть не должно.


Шаг 5. Теперь пришло время задать траекторию полета для нашего колибри. Выделите слой "Колибри" и в нижней части палитры слоев нажмите кнопку Add Motion Guide (Добавить направляющую движения). В появившемся управляющем слое Guide: Колибри с помощью инструментов построения векторных форм нарисуйте волнообразную кривую, примерно такую же, как изображена на эскизе ниже. Кривая должна выходить за пределы рабочего пространства сцены, откуда будет появляться колибри и куда "улетать". После построения кривой (траектории) продлите последовательность кадров всех треков до 65 кадра временной диаграммы. В соответствии с интерактивной раскадровкой (кнопка для просмотра расположена ниже), создайте ключевые кадры на треке "Колибри". В этой интерактивной схеме при наведении курсора на любой ключевой кадр Вы увидите местоположение, размер и угол наклона птички. При нажатии на тот или иной ключевой кадр будет проигрываться анимация до следующего ключевого кадра. Используя инструмент свободной трансформации Free Transform Tool, перемещайте, масштабируйте и поворачивайте символьный объект "Колибри" вокруг своей оси так же, как это показано в раскадровке, и следите, чтобы точка регистрации символьного объекта в каждом ключевом кадре находилась под направляющей линией. В заключение на 1, 10, 25, 45, 54 и 56 ключевые кадры из контекстного меню назначьте анимацию движения – Create Motion Tween (для Flash Cs 3) или Create Classic Tween (для Flash Cs 4/ Cs 5).


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

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



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


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

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


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

Комментарий добавил(а): Сергей
Дата: 2012-08-12

Да уж. Я на ролик посмотрел и понял, что там еще работа была наверное с маской проделана, что бы птичка носик в цветок засовывала а потом еще и за цветок залетала, Плюс размытие сделано тоже интересно, когда птичка близко к экрану прилетела. Плюс летающие шарики тоже интересно. Плюс кнопка с музыкой. У меня проблема. Я тоже делаю кнопку и она отключает и включает музыку. Но когда ролик заходит на второй круг, то музыка не отключается а накладывается друг на друга. Что же делать? Какой код нужно в кнопке прописать? Спасибо.

Комментарий добавил(а): Сергей
Дата: 2012-08-12

Жалко, что исходник не прилагается. Так один раз посмотрели и все как на ладони. А за уроки огромное спасибо.

Комментарий добавил(а): Игорь
Дата: 2012-08-12

За уроки не меньшее пожалуйста, Сергей))) Рад, что вы находите в них для себя что-то полезное. А исходник со звуком из деморолика к этому уроку разыгрывался в качестве бонуса за привлечение трех новых подписчиков на рассылку нашего проекта. Завтра в полночь, к сожалению, эта акция заканчивается.

Комментарий добавил(а): Игорь
Дата: 2012-08-12

Весь секрет в том, что кнопка не выключает звук, а переключает звуковой мувик на следующий кадр - on (release) {gotoAndStop(2);}, где звука нет. А на том кадре, такая же кнопка с символом "Паузы", возвращает на первый кадр со звуком - on (release) {gotoAndStop(1);}. С маской Вы догадались правильно, но особых хлопот с ней не было.


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

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