Створення flash-анімації за допомогою програми SwishMAX

У цій статті ми розглянемо три простих приклади, які допоможуть вам зрозуміти, як працювати з програмою SwishMAX. Спочатку ми покажемо, як в програмі створюється анімація, потім зробимо текстовий банер з анімаційними ефектами, створимо кнопку з декількома ефектами для вашого майбутнього сайту і, нарешті, навчимося додавати в ролик музику.

Приклад 1. Створення простої анімації

Наведемо приклад створення найпростішої Flash-анімації - створимо "бігають очі". Відкрийте вікно програми і виберіть у виниклому вікні What do you want to do? (Що ви бажаєте зробити) пункт Start a new empty movie (створити новий проект-анімацію). Програма також дозволяє створювати нові проекти на основі шаблонів, але в даному випадку ними ми користуватися не будемо. На закладці Movie вікна Scene виберіть фон проекту і встановіть його розміри. Ми використовували значення за замовчуванням - колір фону білий, розмір 400 на 300.

На панелі з інструментами закладки Layout: Scene_1 робочого вікна виберіть інструмент для створення еліпса. Намалюйте в робочій області цю фігуру, після чого в настройках вікна Scene (закладка з назвою - Shape) встановіть колір заливки - жовтий. Виділіть лівою кнопкою миші створений об'єкт, скопіюйте його в буфер обміну (ctrl + c) і вставте його назад в проект (ctrl + v), продублировав таким чином створену форму.

Створіть ще один еліпс, меншого розміру і "пофарбуйте" його в чорний колір, використавши ту ж опцію. Скопіюйте його в буфер обміну і вставте об'єкт в сцену. Тепер розташуйте всі об'єкти в робочій області таким чином, щоб чорні еліпси були всередині жовтих.

Утримуючи кнопку CTRL, виділіть обидві чорні зіниці і згрупуйте об'єкти. Для цього викличте правою кнопкою миші контекстне меню програми і виберіть команду контекстного меню Grouping> Group as Group. Після виконання цієї дії два менших еліпса будуть переміщатися як одне ціле.

Клацніть два рази мишкою на часовій шкалі в районі двадцятого кадру. На шкалі анімації з'явиться білий ділянку, який позначає часовий відрізок анімації. Виділіть згруповані об'єкти і перемістити їх на деяку відстань таким чином, щоб вони змінили своє становище всередині фігур з більшою площею.

Після того різання цієї операції в робочій області з'явиться пунктирний слід, який вказує на траєкторію руху об'єкта. На панелі інструментів Control Toolbar натисніть кнопку Play Movie і програйте створену вами анімацію.

Включивши фантазію і витративши небагато часу на проект, можна доповнити малюнок і отримати таке зображення. Для цього використовуйте інструменти Line, Pencil.

Готову сцену експортуємо в формат SWF. Для цього виконайте команду File> Export> SWF. Тепер цю анімацію програти звичайним флеш-плеєром.

Якщо ви хочете створити HTML-сторінку, яка буде містити створену вами флеш-анімацію, виберіть команду File> Export> HTML + SWF. При цьому крім SWF-файлу програма згенерує HTML-код, необхідний для програвання SWF-файлу у вікні браузера.

Приклад 2. Створення банера з текстом

У цьому прикладі створимо банер з рекламним текстом з використанням анімаційного ефекту. SwishMAX розпорядженні великою бібліотекою шаблонів, на основі яких можна створювати банери стандартних розмірів. Виконайте команду File> New From Template і виберіть зі списку шаблон Full Banner (468x60).

На закладці Movie вікна Scene встановіть білий колір фону.

Виберіть інструмент Text і намалюйте прямокутник, що задає напрямок тексту. Якщо просто клацнути по робочій області, текст буде розташований вертикально, що для цього типу банера не підходить.

У вікні налаштувань створеного об'єкта (вкладка Text вікна Scene) впишіть потрібний текст, а також підберіть його розмір, гарнітуру, колір (в нашому прикладі - синій) і накреслення. Виділіть об'єкт і викличте контекстне меню. Програма SwishMAX дозволяє застосовувати величезну кількість ефектів, які розбиті на групи (про них див. Вище). З групи Looping Countinuously виберіть ефект Surfin-Pass The Bucket. Ви побачите, що він з'явився на шкалі анімації.

Двічі клікнувши по ефекту у вікні Timeline, ви отримаєте доступ до його налаштувань. Так, зокрема, ви можете змінювати швидкість протікання ефекту, напрямок, амплітуду рухів і ін. Не закриваючи це вікно з настройками, можна подивитися, як впливає зміна того чи іншого параметра на характер протікання анімації. Натиснувши на кнопку More Options, можна отримати доступ до більш детальним налаштувань ефекту. Як можна переконатися, кожен ефект має дуже велику кількість налаштувань, що дозволяє створювати унікальні і неповторні ефекти.

Готову сцену експортуйте в формат SWF. Для цього виконайте команду File> Export> SWF. Тепер цю анімацію програти звичайним флеш-плеєром.

Приклад 3. Створення кнопки

Для створення простої кнопки в новому документі намалюйте відповідну форму кнопки за допомогою інструменту Ellipse, Rectangle або AutoShape. Додайте текст поверх цього об'єкта. Встановіть бажані настройки тексту і векторного об'єкта у вікні Scene.

Тепер перейдіть на вкладку Script вікна Layout і, натиснувши на кнопку Add Script, виконайте команду Browser / Network> getURL (...). У який з'явився поле getURL введіть посилання, на яку буде спрямований користувач після натискання кнопки, і натисніть Enter. Для того щоб посилання відкривалася в новому вікні браузера, в поле Window впишіть "_blank" (без лапок) і натисніть Enter. Щоб перевірити, чи працює посилання, натисніть кнопку Play Movie на панелі інструментів Control Toolbar і спробуйте натиснути на кнопку. У вікні браузера повинна відкритися, зазначена в налаштуваннях веб-сторінка. Якщо все вийшло, залишилося тільки експортувати її в формат SWF або SWF + HTML.

Для створення цієї простої кнопки ми не використовували ніяких ефектів, але якщо хочеться чогось більш складного, можна використовувати наявний в програмі об'єкт Button.

Цей об'єкт можна створити окремо за допомогою команди Insert> Button або ж перетворити в кнопку вже наявні у нас об'єкти Text і векторний малюнок. Для виконання останньої операції виділіть обидва об'єкти, утримуючи кнопку Shift, і виконайте команду Modify> Grouping> Group As Button. Після цього ви побачите, що у вікні Output замість об'єктів Text і Shape з'явився об'єкт Button.

Тепер перейдіть на закладку Button вікна Scene і поставте "прапорці" напроти опцій Has Separate Over State, Has Separate Down State і Has Separate Hit State. Ці опції означають, що кнопка буде змінюватися при:

• Has Separate Over State - наведенні курсору на кнопку
• Has Separate Down State - після натискання на кнопку
• Has Separate Hit State - при натисканні на кнопку.

Для завдання параметрів кожного з станів кнопки розгорніть список Button в вікні Outline. Ви побачите, що для кожного з станів кнопки можна задати свої параметри для тексту і векторного об'єкта. Крім описаних вище станів ви побачите ще одне - Up State. Воно описує зовнішній вигляд кнопки в звичайному стані. Змініть настройки для об'єктів в режимах Up State або Over State і натисніть кнопку Play Movie на панелі інструментів Control Toolbar. При підведенні курсору до кнопки її зовнішній вигляд повинен змінюватися.

Приклад 4. Додавання фонової музики в ролик

Для того щоб додати в проект фонову музику, виконайте наступні дії. Створіть у програмі анімаційну сцену, робочому вікні Layout викличте правою кнопкою миші контекстне меню програми і виберіть команду Script> Sound> playSound (...). Автоматично на екрані відкриється закладка Script робочого вікна, в якому буде відображатися вставлений скрипт. Виділіть рядок playSound (). У нижній частині вікна програми відкриється вікно з настройками звукового файлу. За допомогою кнопки Import вкажіть розташування на жорсткому диску необхідного звукового файлу в форматі wav або mp3. Його назва з'явиться у вікні програми.

Спробуйте відтворити анімацію. Якщо все зроблено правильно, анімаційну сцену повинна супроводжувати, обрана вами, фонова музика.

Всього повідомлень 6, показано 5.
Чітатай далі ...