sitesaid.ru

Скачайте исходник

Для создания этой графики можно использовать графику нарисованную в самой программе Flash,или в графических редакторах,предпочтительно в Adobe Fotoshop.Создайте папку и помещайте в неё все файлы связанные с этой анимацией.Сперва определитесь что будет в изображении двигаться отдельно от других элементов.Здесь можно обойтись движением крыльев и перемещением всей птицы по окну.

Нарисуйте изображение птицы и отдельно цветок в Adobe Fotoshop.Затем выделите инструментом лассо крыло ,создайте новую страницу размером под крыло.Обратите внимание чтобы у создаваемой новой страницы было включена прозрачность.Перетащите выделенное крыло из первого окна во второе и сохраните в созданной папке в формате GIF.Проделайте эту процедуру и со вторым крылом, корпусом птицы и хвостом.В результате у вас должно получиться 4 изображения.

Откройте Adobe Flash Pro.В меню "Файл" откройте "Новый" - ActionScript 3.0. Напомню основные инструменты для создания анимации.

Рисунок 1

Рисунок 2

Рисунок 3

Установите размеры окна показа анимации нажав правую кнопку в поле среды разработки и в открывшемся меню нажмите "Document Properties".В окне установите размеры окна показа и фон анимации - "Background color".

Включите меню "Файл" затем "Импорт" - "Import to Library" (Импорт в Библиотеку).После того как вы поместили все части птицы и цветок в Библиотеку,нажмите на кнопку библиотеки (Рис. 2),затем нажмите на элемент ,к примеру крыло и в окне ,включив левую кнопку мыши перетащите элемент на рабочую площадь Flash.Это будет 1 слой.Включите 2 слой и перетащите 2 элемент.Проделайте это с остальными элементами,включая новый слой для нового элемента.У вас получится 5 слоев.

Если вы ранее не установили фон окна разработки то установите фон его.Кнопка установки фона показана на Рис.1 Соедините курсором мыши крылья, хвост и корпус.Поместите цветок к краю окна .

Щелкните в слое крыло п на временной шкале два деления вперед правой кнопкой мыши и выберите в контекстном меню "Insert Keyframe" (Включить ключевой кадр).

Нажмите кнопку "Free Transform" в панели инструментов.Переместите центр крыла, (кружочек в середине)в основание крыла ,затем подведите курсор к краю выделенной области (при этом изображение курсора изменится на круговую стрелку) и измените угол крыла в зависимости от первоначального положения вверх или вниз.Еще раз нажмите правую кнопку мыши на 1 ключевом кадре и в открывшемся меню нажмите Create Classic Tween (Создание классической анимации)

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

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

Чтобы просмотреть как выглядит анимация в среде разработки нажимайте "Enter" на клавиатуре.
Для просмотра в проигрывателе Flash нажмите пункт меню "Control" далее "Test Move" далее "in Flash Professional."

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

Теперь надо сделать полет птицы к цветку.Для этого все части птицы надо соединить в единое целое.Для этого в панели меню включите пункт "Modify" и затем "Group". Скопируйте один цикл взмаха крыла на временной шкале.Вставьте в следующий кадр после последнего.Передвиньте птицу на некоторое расстояние и создайте анимацию Create Classic Tween (Создание классической анимации). Как это сделать описано выше.

Проделайте это столько раз ,пока птица не передвинется к цветку.Здесь просто вставляйте скопированные кадры несколько раз без передвижения птицы по окну.Потом можно продолжить передвижение птицы за пределы разрабатываемой области.
Посмотрите как выглядит анимация полета птицы в среде разработки Adobe Flash Professional cs5.

Посмотрите как выглядит временная шкала.

Для сохранения проекта нажмите меню "Файл" и далее "Сохранить как...". Выберите папку, имя файла, нажмите "Сохранить" ,формат FLA. Для сохранения фильма в формате SWF нажмите "Экспорт" и сохраните фильм. Также можно экспортировать фильм в форматы AVI и GIF.Наилучший вариант для такого фильма будет SWF. GIF применяется для очень коротких и маленьких по объему роликов.AVI получается большим по объему ,также могут быть проблемы при вставке на сайт.

Несколько советов при создании данной анимации.
1.Почаще сохраняйте проект в FLA ,чтобы избежать потери данных.
2.Почаще включайте "Enter" на клавиатуре для просмотра и контроля проекта.
3.Частоту кадров лучше установить - 12,для уменьшения объема.
4.Имейте ввиду что интерфейс программы Adobe Flash Pro в разных версиях может немного отличаться от приведенного здесь.
5.Сохраняйте проект английским шрифтом.