Летящий цветок анимация

Добавлено: 06.06.2018, 13:21 / Просмотров: 45495
Закрыть ... [X]

 

 

 

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

 

Для данного урока я использовал программу Adobe Flash CS5.

 

1 Во-первых создаем новый документ с нужными параметрами.

 

2 Импортируем в библиотеку программы изображения ветки, на которой будет осуществлена анимация распускающихся цветов, лепестков и самого цветка.

 

3 Переименовываем слой в "Фон" и находясь на нем перетаскиваем из библиотеки программы изображение ветки и выставляем его по центру сцены.

 

4 Создаем новый слой и находясь на нем перетаскиваем из библиотеки на сцену изображение цветка и помещаем его в любое место сцены.

 

 

5 Пока изображение цветка выбрано, преобразуем его в Фрагмент ролика, нажимая кнопку "F8" и называем его "Цветы".

 

 

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

 

 

7 Находясь внутри ролика "Цветы" пока изображение цветка все еще выбрано преобразуем его снова в "Фрагмент ролика" и называем его "Цветок_мс".

 

 

7 Вновь дважды кликаем по созданному ролику, чтобы войти в него. Когда вы находитесь внутри ролика "Цветок_mc" переименовываем слой в "Цветок" и создаем еще 8 слоев, давая им названия лепестков по счету и последнему слою "Пестик", после чего перемещаем слой "Цветок" выше всех слоев.

 

 

8 Теперь выбираем слой "Лепесток_1", находясь на нем перетаскиваем из библиотеки на сцену программы изображение первого лепестка, так как картинка лепестка имеет теже размеры по ширине и высоте, что и картинка цветка, выставляем его на туже позицию по оси "Х" и"У", что и изображение цветка, в результате лепесток должен пролностью совместиться с картинкой всего цветка, после чего блокируем и отменяем видимость слоя "Цветок".

 

 

 

 

9 Затем пока картинка первого лепестка все еще выбрана преобразуем его в Фрагмент ролика и называем его "Лепесток_1".

 

 

Так проделываем с каждой картинкой лепестка.

 

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

 

10 Блокируем все слои и разблокируйте первый слой "Лепесток_1".

 

 

11 Находясь на слое "Лепесток_1" создаем ключевые кадры на 20, 300 и 400 кадре нажимая кнопку "F6".

 

12 Выбираем первый ключевой кадр летящий слоя "Лепесток_1", выбираем инструмент "Свободное преобразование (Q)", зажимаем кнопку "Shift" и как можно меньше уменьшаем ролик "Лепесток_1", для удобства работы можно увеличить рабочую область, затем создайте "Классическую анимацию движения" между 1 и 20 кадрами.

 

 

13 Затем выбираем 400 ключевой кадр слоя "Лепесток_1" и перемещаем ролик "Лепесток_1" немного вниз и задаем ему в панели "Свойства" нулевую прозрачность, после чего создадим "Классическую анимацию движения" между 300 и 400 ключевыми кадрами.

 

14 Потом кликаем по анимированной области между 300 и 400 ключевыми кадрами и в панели свойства выбираем например "Поворот по часовой стрелке--> 1 оборот", чтобы в момент падения лепесток вращался.

 

 

15 Теперь блокируем слой "Лепесток_1", переходим на слой "Лепесток_2", разблокируем его, перетаскиваем его первый ключевой кадр предположим на второй кадр, затем создаем ключевые кадры на 21, 350 и 450 кадре, потом переходим на 2 ключевой кадр, опять выбираем инструмент "Свободное преобразование (Q)", выбираем им ролик "Лепесток_2", зажимаем кнопку "Shift" и как можно меньше уменьшаем ролик "Лепесток_2", затем создайте "Классическую анимацию движения" между 2 и 21 кадрами.

 

 

14 Далее выбираем 405 ключевой кадр слоя "Лепесток_2" и перемещаем ролик "Лепесток_2" вниз и задаем ему в панели "Свойства" нулевую прозрачность, после чего создадим "Классическую анимацию движения" между 350 и 450 ключевыми кадрами и снова кликаем по анимированной области между 350 и 450 ключевыми кадрами и в панели свойства выбираем например "Поворот против часовой стрелки --> 2 оборота".

 

Думаю суть действий понятна, так проделываем и с остальными лепестками (беспорядочное появление лепестков по времени в пределах 5-8 кадрах от появление первого лепестка и такое-же беспорядочное облетание лепестков по времени с разным кол-вом поворотов и направления вращения). Что касается слоя "Пестик", у нас там размещен ролик "Пестик" (центральная часть лепестка), надо чтобы он появился раньше лепестков (так как это центр цветка и из него ростут все лепестки) и должен позже лепестков исчезнуть, опять-же так ка это центральная часть цветка и из нее растут все лепестки, для этого я создал ключевые кадры на 15, 450 и 455 кадре, на 15 ключевом кадре слоя с Пестиком также как и с лепестками уменьшаем размеры ролика "Пестик" как можно меньше и создаем анимацию движения между 1 и 15 кадрами, а на 455 кадре уменьшаем пестик как можно меньше, зададим ему нулевую прозрачность и создадим анимацию движения между 450 и 455 кадрами, в результате центральная часть цветка просто исчезнет.

 

В результате у меня получилась вот такая история на временной шкале с анимацией появлением цветка:

 

 

И вот такая картина на временной шкале с анимацией увядания летящий цветок анимация цветка:

 

 

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

 

16 Теперь в Библиотеке рпограммы находим ролик "Цветок_мс" и дублируем его, при этом называя его "Цветок_2_мс" и в результате в Библиотеке появится новый ролик под названием "Цветок_2_мс".

 

 

 

 

так дублируем ролик цветка несколько раз, чтобы интервал между анимациями цветов был разнообразней.

 

 

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

 

 

18 Теперь нам надо задать индивидуальное время распускания или облетания цветов, для этого поочередно изменяем эти параметры у каждого ролика "Цветок_мс", для этого кликаем по кнопке "Изменить символы" и поочередно выбираем там ролики цветов и на свой выбор добавляем или удаляем дополнительные кадры у анимации и после всех редактирований возвратитесь на главную сцену "Монтажный кадр".

 

 

 

19 Находясь на главной сцене вновь дважды кликаем по ролику "Цветы", чтобы войти в него.

 

20 Помните в 15 пункте мы оставляли слой "Цветок" и говорили, что он нам еще пригодится, вот и настало это время, благодаря тому, что слой не был удален сразу теперь мы можем видеть ролики цветов и изменять их размеры. Находясь внутри ролика "Цветы" создаем еще 4 слоя (можно и больше, как в этом примере), затем на каждый из слоев мы разместим один из 5 вариантов ролика "Цветок_мс" и для разнообразия инструментом "Свободное преобразование (Q)" уменьшим размеры некоторых цветов.

 

 

21 Когда ролики цветов размещены по нужным местам и их размеры откорректированны, можно наконец удалить слой с картинкой цветка в ролике "Цветок_мс" и его дублях, чтобы перед началом анимации распускания цветка не появлялась эта картинка, для этого опять вызываем меню "Изменить символы", выбираем там нужный клип и удаляем в нем слой с цветком (так делаем с каждым роликом цветка).

 

 

 

На этом урок закончен, можно протестировать, что у нас получилось.

 

 

 


Источник: http://flashyroki.ru/animation_cvetov.html


Поделись с друзьями



Рекомендуем посмотреть ещё:



Похожие новости


Чем правильно подкормить помидоры
Реанимируем розу в горшке
Высший сорт и первый разница
Удобрение нитроаммофоска для картофеля
Цветок в японской культуре
Сорт земляники эвис делайт описание
Песня опять идёт посадка на борты


Летящий цветок анимация Летящий цветок анимация Летящий цветок анимация Летящий цветок анимация
Летящий цветок анимация


Футажи (гиф анимация) - летящие цветы на прозрачном. - Pinterest
Анимация на белом фоне: картинки и фото анимация летящей



ШОКИРУЮЩИЕ НОВОСТИ