Как сделать анимацию бабочки во флэш.

На главную
Карта сайта
  • Flash баннеры
  • Эффекты с текстом
  • Flash меню
  • Flash игры
  • Эффекты с изображениями

  • Как сделать 3D логотип
  • 3D анимация
  • 3D куб
  • 3D пирамида
  • 3D треугольник
  • Анимация солнца
  • Переворачивание страницы
  • Эффект страниц
  • Эффект перелистывания страниц
  • Анимация развивающегося флага
  • Анимация флага
  • Эффект \ анимация матрицы
  • Эффект падающего снега
  • Эффект \ анимация падающих листьев
  • Эффект раздевания девушки
  • Эффект наклейки
  • Анимация полета птицы \ колибри
  • Анимация бабочки
  • Анимация цветов
  • Эффект летящих пузырьков \ шариков
  • Анимация движения машины
  • Анимация зубчатой передачи
  • Анимация бегущй кошки \ пантеры
  • Анимация бегущей лошади
  • Анимация идущего человека
  • Анимация бегущего человека
  • Человек поднимается по лестнице
  • Эффект огня
  • Анимация огня
  • Анимация горящей свечи
  • Эффект \ анимация дыма
  • Анимация сигареты
  • Эффект пара\парения
  • Анимация взрыва
  • Эффект анимации воды
  • Эффект анимации воды с AS
  • Анимация капли
  • Эффект дождя
  • Эффект \ анимация водопада
  • Эффект тумана
  • Анимация облаков
  • Анимация неба
  • Эффект линзы
  • Эффект лупы
  • 3D вращение кольца
  • Эффект появления узора
  • Эффект \ анимация сверкания молнии
  • Эффект \ анимация вращения Земли
  • Приближающийся вид
  • Эффект сварки
  • Блик \ блеск на изображении
  • Блик \ блеск на грани изображения
  • Блик \ блеск по маске
  • Сверкание изображения
  • Звонящий телефон
  • Анимация формы ( Shape Tween )

Друзья сайта:

  • TrueQuery.ru
  • flash-animated.com
  • flashcinema.ru

 

Как сделать летающую бабочку.

 

 

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

 

Для этого урока я использовал программу Macromedia Flash 8.

 

Для начала вам нужно подготовить изображение бабочки. Изображение бабочки, следует поместить на прозрачный фон и сделать из него 2 отдельных изображения (одно из крыльев и тельце). Можете скачать картинки, использованные в данном уроке.

 

1 Часть: Вид сверху

 

 

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

 

 

2 Импортируем в библиотеку программы свои изображения бабочки (крыло и тельце).

 

3 Создаем 3 слоя и называем их: (1 Telo, 2 Left Wing и 3 Right Wing).

 

 

4 Находясь на слое (Telo) перетаскиваем из библиотеки на сцену программы изображение тельца бабочки.

 

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

 

 

6 Так как крылья у бабочки симметричны, сделаем из левого крыла и правое, для этого пока крыло выбранно, нажимаем комбинацию кнопок "Ctrl+C", чтобы копировать его, затем переходим на слой (Right Wing) и нажимаем комбинацию кнопок "Ctrl+Shift+V", чтобы вставить скопированное изображение крыла, это будет второе крыло, потом идем в меню "Modify-->Transform-->Flip Horizontal", чтобы отразить его по горизонтали и помещаем его вплотную справа от тельца бабочки.

 

 

8 Создаем ключевые кадры на 10 и 20 кадре слоя (Right Wing), Кликаем правой кнопкой мыши между 1-10 и 10-20 кадрами этого слоя и из выпадающего списка выбираем "Create Motion Tween", (Создать анимацию движения).

 

 

9 Переходим на 1 кадр слоя (Right Wing), выбираем инструмент "Free Transform Tool (Q)", зажимаем центр изображения и перемещаем его влево (смещаем центр), тоже самое делаем на 10 и 20 кадрах.

 

 

 

10 Переходим на 10 кадр и все темже инструментом "Free Transform Tool (Q)" сужаем наше изображение крыла в 4 раза, так как мы сместили центр к левому краю оно будет сужаться только справа, а левый край останется неподвижным (ВАЖНО! Сначала сделайте анимацию между ключевыми кадрами, а уже потом сужайте крыло).

 

 

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

 

11 В завершении анимации бабочки создаем пустой ключевой кадр на 20 кадре слоя (Telo), чтобы тельце бабочки все время отображалось.

 

Можно протестировать, что у нас получилось "Control-->Test Movie".

 

 

2 Часть: Вид сбоку

 

 

Теперь сделаем анимацию бабочки вида сбоку (на одной плоскости).

 

1 Создаем новый документ.

 

2 Как только вы создали новый документ идем в меню "Insert-->New Symbol...", чтобы создать новый клип, называем его "Babochka_mc", жмем "Ok" и вы сразу попадаете в созданный мувик.

 

 

 

3 Импортируем в библиотеку программы все тоже изображение крыла, а тельце бабочки теперь необходимо вида сбоку.

 

4 Находясь в созданном мувике перетаскиваем из библиотеки на сцену крыло бабочки.

 

 

7 Кликаем инструментом "Selection Tool (V)" по крылу, чтобы выбрать его, затем нажмите комбинацию кнопок "Ctrl+C", чтобы скопировать его, затем создайте новый слой и находясь на нем нажмите комбинацию кнопок "Ctrl+Shift+V", чтобы вставить скопированное изображение.

 

 

8 Создаем новый слой, называем его (Telo), помещаем его между двумя слоями (между крыльями) и находясь на этом слое помещаем на сцену программы изображение тельца. Подгоняем это тельце под наши крылья инструментом "Free Transform Tool (Q)".

 

 

9 Выбираем слой (Layer 1), можно переименовать его в (Right Wing), чтобы было видно, что это правое крыло и находясь на этом слое создаем ключевые кадры на 10 и 20 кадре, нажимая кнопку "F6" и сразу создаем анимацию движения между этими кадрами.

 

 

10 Находясь на 1 кадре выбираем инструмент "Free Transform Tool (Q)" и смещаем центр изображения крыла в сторону тельца бабочки, как мы это делали в 1 флэшке 9 пункте, так проделываем еще на 10 и 20 кадре. После этого переходим на 10 кадр и темже инструментом сужаем наше крыло в 4 раза и немного растягиваем (смещаем вправо, а левое крыло влево) суженное крыло, это придаст объемности взмахам крыльев.

 

Аналогично поступаем и со вторым, левым крылом.

 

 

11 Возвращаемся на главную сцену, нажимая на ссылку.

 

 

12 Находясь на главной сцене перетаскиваем из библиотеки мувик "Babochka_mc", в котором мы работали и инструментом "Free Transform Tool(Q)" поворачиваем нашу бабочку так, как нам надо.

 

 

Можно протестировать, что у нас получилось "Control-->Test Movie".

 

 

Часть 3: Анимация пархания / полета бабочки

 

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

 

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

 

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

 

3 Создаем 3 слоя: ( Fon, Butterfly_1 и Butterfly_2).

 

4 Выбираем слой (Fon) и помещаем по центру сцены изображение, которое будет служить фоном, переходим на 150 кадр и создаем пустой кадр, нажимая кнопку "F5" для того, чтобы фон был на всех кадрах.

 

5 Переходим на слой (Butterfly_1) и создаем новый клип, для этого идем в меню "Insert-->New Symbol...", называем клип "Butterfly_1_mc" и нажимаем кнопку "Ok", одновременно попадая внутрь этого клипа.

 

6 Находясь внутри созданного клипа создаем и анимируем первую бабочку (вид сверху).

 

7 Возвращаемся на главную сцену.

 

8 Переходим на слой (Butterfly_2) и создаем новый клип, для этого идем в меню "Insert-->New Symbol...", называем клип "Butterfly_2_mc" и нажимаем кнопку "Ok", одновременно попадая внутрь этого клипа.

 

9 Находясь внутри созданного клипа создаем и анимируем вторую бабочку (вид сбоку).

 

10 Возвращаемся на главную сцену.

 

11 Переходим на слой (Butterfly_1) и перетаскиваем из библиотеки на сцену мувик первой бабочки "Butterfly_1_mc".

 

12 Теперь создаем направляющую для полета первой бабочки, для этого кликаем правой кнопкой мыши по слою (Butterfly_1) и из выпадающего списка выбираем "Add Motion Guide" и образуется новый слой (Guide:Butterfly_1).

 

 

13 Находясь на слое (Guide:Butterfly_1), выбираем инструмент "Pen Tool (P)", создаем им первую точку (где должна начинаться анимация полета бабочки), затем ставим вторую точку и образуется прямая линия, так ставим точки несколько раз, создавая ломанную линию, когда все точки расставлены и линии между ними проложены выбираем наш мувик бабочки и перемещаем его по центру первой точки начала движения, чтобы привязать его к направляющей.

 

 

14 Далее перемещаем мувик бабочки по направляющей линии (если необходимо поворачиваем бабочку инструментом "Free Transform Tool (Q)"), создавая при этом каждый раз новые ключевые кадры на слое (Butterfly_1) при перемещении. Главное, чтобы полет начинался и заканчивался за пределами сцены, это будет смотреться более интересно. Создаем ключевые кадры на 45, 50, 80, 100, 101, 120, 121, 125 и 150 кадре. В промежутках с 45-50, 80-100 и 120-125 кадра можно не создавать анимацию, на этих участках бабочка остается на месте.

 

 

15 Находясь на 101 и 120 кадре выбираем нашу бабочку и удаляем ее, нажимая кнопку "Delete", на этом промежутке будет виден второй мувик, где бабочка будет садиться на цветок. Когда все кадры расставлены, бабочка перемещена в конечный пункт (полет бабочки завершен) создаем анимацию движения между 1-45, 50-80 и 125-150.

 

 

16 Переходим на слой (Butterfly_2), на 101 кадр и создаем на нем ключевой кадр, нажимая на кнопку "F6". Находясь на этом кадре перетаскиваем из библиотеки на сцену второй мувик бабочки (Butterfly_2_mc) и выставляем его на то место сцены, где мы удалили первый мувик бабочки.

 

 

17 Создаем ключевой кадр на 105 кадре тогоже слоя и находясь на нем перемещаем бабочку чуть ниже (как будто она садится на цветок). Создаем 115 ключевой кадр и оставляем бабочку в нижнем положении (бабочка сидит на цветке). Создаем ключевой кадр на 120 кадре и перемещаем нашу бабочку наверх (в исходное положение). После этого создаем аниммацию движения между 100-105 и 115-120 кадрами этого слоя.

 

 

Все, мы завершили анимацию полета / пархания бабочки, теперь можно протестировать, что у нас получилось "Control-->Test Movie".

 

 

Похожие уроки:

 

Анимация полета колибри

 

 

www.webmoney.ru