Анимация цветов | Анимация сакуры

Сегодня мы рассмотрим один пример, как можно сделать анимацию распускающихся цветов во флэш. Идея данной анимации цветов будет заключаться в том, что цветы будут постепенно появляться лепесток за лепестком, тем самым будет складываться ощущение, что цветы распускаются, а через определенное время цветы также лепесток за лепестком будут осыпаться, чтобы дать возможность появиться новым цветам, в данном примере будет использоваться анимация сакуры. Для данной анимации цветов вам потребуется изображения этого цветка по отдельности: картинка ветки без цветов, изображение цветка на прозрачном фоне и картинки лепестков и пестика (центральной части цветка, кажется она так называется), тоже с прозрачным фоном, все эти изображения можно Скачать используемые в этом примере, или сделать свои, например с помощью 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 Когда ролики цветов размещены по нужным местам и их размеры откорректированны, можно наконец удалить слой с картинкой цветка в ролике "Цветок_мс" и его дублях, чтобы перед началом анимации распускания цветка не появлялась эта картинка, для этого опять вызываем меню "Изменить символы", выбираем там нужный клип и удаляем в нем слой с цветком (так делаем с каждым роликом цветка).