O простої анімації під флеш. Як створити флеш анімацію Створення сцен і маніпулювання ними

Початок роботи

Перший кадр шару відзначений порожнім гуртком. Це означає, що як кадр 1, так і шар "Layer 1" порожні - на шарі немає вставлених об'єктів. Вставимо будь-який об'єкт на шар "Layer 1". Наприклад, імпортуємо растрове зображення (див. Імпорт) і вставимо його на шар "Layer 1". Зображення показано зліва. Ви можете переглянути створену мультиплікацію, натиснувши клавішу Enter. Зазвичай фоновий шар блокується, щоб запобігти його зміна - ставиться значок замка. Приклад 4: Ви можете додати або видалити прості кадри. видалення кадрів: Для видалення кадру його потрібно виділити, в контекстному меню вибрати Remove Frames. Для виділення декількох кадрів утримуйте Ctrl. Наприклад, нам потрібно зменшити число кадрів для фону на 5 кадрів. Виділимо 5 кадрів і видалимо їх - замість 30-ти кадрів залишається 25. Додавання кадрів: Наприклад, нам потрібно на шарі "Фон" додати кілька кадрів. Для цього можна клацнути по кадру 30 і, коли поруч з курсором з'являється маленький прямокутник, просто перетягнути кадр 30 вправо по шкалі часу. Або можна натиснути на будь-якому кадрі між 1-м і 30-м і в контекстному меню вибрати Додати кадр (Insert Frame). Останнє оновлення: грудень 2014 р

До сих пір ми розглядали Flash-фільми, які відтворювалися без втручання глядача від початку і до кінця. Однак Flash дозволяє також створювати інтерактивні додатки, в яких користувач може управляти демонстрацією контенту. В даному уроці ми почнемо знайомство з елементами мови опису сценаріїв Action Script і розглянемо, як з його допомогою можна створити інтерактивні додатки. Як приклад створимо фотоальбом з елементами інтерактивного інтерфейсу. Але перш ніж приступити до опису Action Script, слід розповісти ще про один вид символів, який ми до сих пір залишали без уваги, - це символи-кнопки. Для побудови інтерактивного інтерфейсу вони просто необхідні.

створення кнопок

Кнопка є четирехкадровий інтерактивний мувікліп. Коли ми присвоюємо символу тип «Кнопка», Flash створює для нового символу монтажну лінійку з чотирьох кадрів:

Up-стан це кадр, відповідний ситуації, коли кнопка не було натиснуто і покажчик миші розташований не над кнопкою;

Over-стан кадр, який ілюструє вид кнопки, коли курсор миші розташований над кнопкою, але кнопка не було натиснуто;

Down-стан даний кадр показує вид кнопки при її натисканні;

Hit-стан визначає область, в якій кнопка реагує на клацання миші; цю область в кліпі не видно.

Щоб створити кнопку, виконайте команду Insert \u003d\u003e New Symbol (можна набрати поєднання клавіш Control + F8). У діалоговому вікні Create New Symbol введіть ім'я символу-кнопки (наприклад, but1) і виберіть тип символу Button ( «Кнопка»).

Flash переключиться в режим редагування символу, надавши кадри Up, Over, Down і Hit. Перший кадр, Up, стає порожнім ключовим кадром. Намалюємо в цьому кадрі ненажатом вид кнопки (рис. 1).

Рис. 1. UP-кадр кнопки

Виділимо другий кадр, позначений як Over і відповідний станом, коли курсор занесений над кнопкою. Вставимо в цьому кадрі ключовий кадр (по команді Insert \u003d\u003e Keyframe), в результаті чого з'явиться ключовий кадр, повністю повторює зміст Up-кадру. Змінимо колір кнопки, як показано на рис. 2.

Рис 2. Over-кадр кнопки

Аналогічно додамо наступний кадр (Down-кадр) і намалюємо натиснутий стан кнопки (рис. 3).

Рис. 3. Down-кадр кнопки

У Hit-кадрі поки не будемо нічого малювати, а повернемося до цього кадру трохи пізніше.

Перейдемо до основній сцені, викличемо бібліотеку по команді Window \u003d\u003e Library і створимо екземпляр символу кнопки шляхом перетягування його на сцену (рис. 4.)

Рис. 4. Створимо екземпляр кнопки, перетягнувши його з бібліотеки

В результаті отримаємо наступний фільм. Як видно з даного фільму, натиснення кнопки відбувається не тільки тоді, коли ми натискаємо мишею на центральну (робочу) зону кнопки, але і при натисканні на рамку навколо неї. Пов'язано це з тим, що якщо Hit-кадр не намальований, то робоча область кнопки буде відповідати Up-кадру.

Для того щоб натискання кнопки відбувалося тільки в робочій зоні, необхідно в Hit-кадрі визначити цю зону, тобто намалювати кнопку без рамки (див. Рис. 5)

Рис. 5. Hit-кадр кнопки

Після того як ми додамо необхідний Hit-кадр отримаємо наступний фільм, в якому при натисканні на рамку продавлювання кнопки не відбувається.

Щоб зробити кнопку інтерактивною, необхідно пов'язати факт натискання кнопки з виконанням певних команд, тобто описати певний сценарій. Для завдання сценаріїв у Flash існує спеціальна мова Action Script. В даному уроці ми торкнемося лише незначну частину можливостей цієї мови, а в подальшому будемо повертатися до структури і синтаксису Action Script в міру ускладнення прикладів створення інтерактивних фільмів на Flash.

Поняття про Action Script

Action Script являє собою мову написання сценарію - набору інструкцій, які керують елементами Flash-фільму. Сценарії Action Script можуть бути вбудовані в фільм або зберігатися в зовнішньому текстовому файлі з розширенням AS.

При встановленні сценарію до фільму його можна впроваджувати в різні частини фільму. Точніше, сценарії Action Script можуть містити ключові кадри, екземпляри кнопок і екземпляри мувікліп. Відповідно сценарії називаються сценаріями кадру (Frame Action), сценарієм кнопки (Button Action) і сценарієм кліпу (MovieClip Action).

Сценарії Action Script виконуються по настанні певних подій, ініційованих користувачем або системою. Механізм, який вказує програмі Flash, який оператор слід виконати при настанні тієї чи іншої події, називається обробником подій.

Action Script має власний синтаксис, багато в чому схожий з синтаксисом JavaScript. Flash MX 2004 підтримує Action Script всіх попередніх версій Flash.

Одним з основних понять Action Script є Actions - команди, які видають інструкції під час виконання SWF-файлу. Наприклад, gotoAndStop () відсилає б відтворювала головку (Рlayhead) на певний кадр або мітку. Від слова Actions і походить назва мови - Action Script (дослівно - сценарій дій). З більшістю понять цієї мови ми ознайомимося на конкретних прикладах.

інтерактивний фотоальбом

Продемонструємо використання кнопок для управління фотоальбомом - створимо набір фотографій і додамо дві кнопки, які будуть гортати фото вперед і назад.

Помістимо на основний монтажної лінійці перше фото і додамо кнопку зі стандартного набору. Для доступу до потрібної папки слід виконати команду Windows \u003d\u003e Сontrol Panels Common Libraries \u003d\u003e Buttons (рис. 6).

Рис. 6. Додамо кнопку зі стандартної бібліотеки

В результаті виконання даної команди з'явиться панель, що містить великий набір заздалегідь намальованих кнопок різних типів. Виберемо, наприклад, Key Buttons (кнопки, схожі на клавіатурні клавіші), відкриємо відповідну папку, виберемо кнопку key-left (рис. 7) і створимо екземпляр даної кнопки (шляхом перетягування її на сцену).

Рис. 7. Елементи папки Key Buttons

Зверніть увагу, що, коли ви встановлюєте другу кнопку (key-right) на сцені і переміщує її, щоб встановити на одному рівні з першою кнопкою, програма дає підказку (пунктирну лінію), яка дозволяє точно позиціонувати кнопку (рис. 8).

Рис. 8. Автоматичне вирівнювання кнопок на одному рівні

Для того щоб додати сценарій, необхідно викликати редактор Action Script по команді Window \u003d\u003e Development Panels \u003d\u003e Actions або натиснувши клавішу F9. Якщо ви збираєтеся часто писати скрипти, то цю клавіатурну команду варто запам'ятати. В результаті з'явиться редактор Action Script (рис. 9).

Рис. 9. Панелі редактора Action Script

Якщо ви поексперіментіруете, виділяючи різні елементи на сцені, одночасно відстежуючи повідомлення в панелях редактора Action Script, то виявите, що програма підказує, на який елемент можна «вішати» код. Якщо виділити на сцені кадр, то в верхньому лівому кутку панелі редактора з'являється напис Actions - Frame, якщо клацнути по кнопці, то з'явиться напис Actions - Button, тобто програма підказує, що вводиться код буде ставитися до сценарію кнопки. А якщо виділити фотографію, то в поле, призначеному для введення скрипта, з'явиться повідомлення: Current selection can not have actions applied to it (до даного виділеному об'єкту можна застосувати сценарію).

Ми будемо привласнювати сценарій кнопці. В останніх версіях ActionScript є можливість писати централізований код, тобто код, який розміщений в одному місці, і така можливість дозволяє краще розбиратися в великих програмах. Однак в простих прикладах (які ми і розглядаємо) присвоювання сценарію кнопці цілком допустимо.

Отже, для кнопки зі стрілкою вліво нам потрібно формалізувати такий сценарій: «Якщо кнопка відпускається на деякому кадрі, то з цього кадру необхідно перейти на попередній кадр». Відповідно до синтаксисом мови Action Script (рис. 10) це буде виглядати наступним чином:

У першому рядку записано обробник подій кнопки on (), що має формат:

Тепер додамо кілька ключових кадрів так, що в них скопійовано створені в першому кадрі кнопки, і помістимо в новостворені кадри потрібні фотографії.

Якщо запустити на виконання створений фільм, то кадри будуть безперервно програватися один за іншим, а отже, перш за все нам потрібно дати команду «Стоп» на першому кадрі. Для цього першого кадру додамо відповідну команду (рис. 11).

Рис. 11. Сценарій, присвоєний першого кадру

Зверніть увагу: команда присвоюється вже не кнопці, а кадру. Той факт, що кадру присвоєно сценарій, відзначається на основний монтажної лінійці - в позначенні кадру над жирною крапкою з'являється мала літера «a».

В результаті ми отримали наступний фільм.

Якщо у нас в фотоальбомі всього кілька кадрів, то двох кнопок - «Вперед» і «Назад» - цілком достатньо, але якщо набір фотографій великий, то бажано мати ще й кнопки, що відсилають в початок і кінець фільму. У наступному прикладі ми додамо відповідні кнопки: «У перший кадр» і «В останній кадр». Вибрати кнопки підходящої мнемоніки можна зі стандартної бібліотеки кнопок з папки Сircle Вuttons (рис. 12).

На пропонованому прикладі ми ознайомимося з ще однією командою gotoAndStop (), яка дозволяє перейти до потрібного кадру з подальшою зупинкою.

Рис. 12. Кнопки з папки Circle Buttons

На кнопку переходу до першого кадру (третя зліва на рис. 13) повісимо код, як показано на рис. 13.

Рис. 13. Сценарій для кнопки «В перший кадр»

У випадку з фотоальбомом з п'яти кадрів в останню кнопку додамо сценарій переходу «В останній кадр»:

Автоматизоване написання скрипта

До сих пір ми набирали все команди вручну, однак панелі редактора ActionScript надають цілий ряд сервісів для автоматизованого написання скрипта. Розглянемо ці можливості.

Рис. 14. Засоби автоматизованого написання скрипта

Панель редактора Action Script дозволяє вибирати, перетягувати, перерозподіляти і видаляти команди.

Покажемо, як можна написати той же скрипт для кнопки «Вперед» в автоматизованому режимі. Вибравши папку Movie Clip Control (верхнє ліве вікно на рис. 14) можна отримати доступ до обробника подій on, а далі потрібно або двічі клацнути по відповідному пункту, або перетягнути вираз на поле написання скрипта в режимі Drag and Drop.

Рис. 15. Підказка для завершення вираження

В результаті на робочому полі з'явиться необхідне вираження і підказка виду (рис. 15): ви вибираєте з меню потрібну команду і вираз завершується автоматично. Як видно з меню, можна вибрати не тільки умова, пов'язане з екранними кнопками, - можна, також, вибрати з меню рис. 15 пункт keyPress " ", Або keyPress" ", Що відповідає натискання клавіатурних клавіш (стрілка вліво, стрілка вправо), тобто є можливість створити фотоальбом, який буде« перегоратися »за допомогою клавіш клавіатури.

Рис. 16. Звернення до кнопки клавіатури

Задіємо команду keyPress " "(Рис. 16), потім перейдемо в папку Timeline Control, виберемо команду nextFrame і перетягнемо її на робоче поле (рис. 17).

Рис. 17. Команду nextFrame можна знайти в папці Timeline Control

Для кнопки, що переводить фільм в початок фотоальбому, як події можна вибрати з меню натискання клавіші Home, а далі (рис. 18) перетягнути на поле команду gotoAndStop, в результаті чого з'явиться ще одна підказка щодо можливого синтаксису даної команди.

Стрілки в підказці дозволяють переглянути різні варіанти синтаксису. Програма надає два варіанти (рис. 18 і 19), тобто пропонує поставити сцену і кадр або тільки кадр. У нашому випадку досить вказати тільки кадр (Frame). Якщо назва сцени опущено, то за замовчуванням здійснюється перехід до кадру поточної сцени.

Рис. 18. Підказка щодо можливого синтаксису команди

Рис. 19. Стрілка-трикутник дозволяє переглядати варіанти синтаксису

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

Чи можна забезпечити сценарій, при якому різні події будуть приводити до одних і тих же дій? Виявляється, можна - для цього в обробнику подій on необхідно перерахувати список найменувань подій. Якщо ви поставите кому в списку подій після першої події, то програма сама запропонує вам меню (рис. 20).

Рис. 20. При введенні коми в списку подій автоматично з'являється меню додаткових команд

Додамо до першою подією (натискання клавіатурній кнопки) друга подія (відпускання екранної кнопки):

Повторимо процедуру для інших кнопок і в результаті отримаємо фотоальбом, в якому перегортання фотографій відбуватиметься як за допомогою миші, так і за допомогою клавіатури (вихідний FLA-файл можна отримати за посиланням).

У розглянутому прикладі ми використовували перехід за номером кадру, але цей спосіб не завжди зручний: якщо в процесі редагування фільму нумерація кадрів зміниться, то логіка може порушитися. Більш зручно використовувати перехід по мітці кадру. Розглянемо приклад, в якому буде потрібно не тільки перегортання альбому, а й перехід до різних розділів, тобто більш складна навігація.

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

Першого кадру розділу «малюнки» дамо мітку Pictures, аналогічно першим кадрам інших розділів дамо мітки graphics і photo.

Створимо шар для розміщення міток і назвемо його Lables. Для того щоб поставити мітку кадру, в панелі Properties необхідно вибрати тип мітки Name і записати її ім'я. У нашому випадку Pictures (рис. 21). Аналогічно розмістимо мітки в кадрах 5 і 10 (рис. 22).

Рис. 21. Приклад присвоєння кадру мітки

Тепер додамо новий шар і назвемо його Actions. У першому ключовому кадрі шару Actions викличемо панель Actions Frame (шляхом натискання кнопки F9) і наберемо команду stop () (див. Рис. 22)

Рис. 22. Сценарій першого кадру

Додамо ще один шар під ім'ям Subjects (тематика), в якому дамо заголовки відповідним кадрам: «Малюнки» (рис. 23), «Графіка» та «Фото».

Рис. 23. Назва для кадрів розділу «Малюнки»

Тепер додамо збоку кнопки меню з аналогічними назвами, які розташуємо на новому шарі під назвою Мenu.

Надрукуємо з лівого краю перший пункт меню «Малюнки» і переведемо його в кнопковий символ. За допомогою інструменту Arrow виділимо текстовий блок «Малюнки» і виконаємо команду Modify \u003d\u003e Convert to Symbol (цю команду можна виконати і за допомогою клавіші F8), в панелі Convert to Symbol задамо тип символу Button і визначимо його ім'я як pictureButton (рис. 24 ).

Рис. 24. Визначимо кнопці переходу до розділу малюнків ім'я рictureButton

Створимо чотири кадри для кнопки «Малюнки»: перший буде представляти просто вихідний текст (рис. 25), другий - той же текст тільки синього кольору, третій кадр ми пропустимо (в цьому випадку Down-кадр буде такою ж, як і Over-кадр ), а в Hit-кадрі намалюємо прямокутну область, яка визначить область натискання кнопки (рис. 26).

Рис. 25. Up-кадр кнопки pictureButton

Рис. 26. Hit-кадр кнопки pictureButton

Тепер нам потрібно повісити сценарій на новостворену кнопку. Для цього виділимо кнопку в сцені Scene 1 і, натиснувши F9, викличемо панель Actions, а потім внесемо код, показаний на рис. 27.

Рис. 27. Сценарій переходу на кадр з міткою

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

кроки

Частина 1

Основи анімації кадру. Цей метод вважається основним методом створення «традиційної» анімації, в якій кожний наступний кадр включає одне, але трохи змінений зображення. При відтворенні всіх кадрів зображення «оживає». Цей же метод використовується аніматорами, що малюють мультфільми від руки, і забирає більше часу, ніж Твінінг (дивіться наступний розділ).

• За замовчуванням Flash відтворює 24 кадру в секунду (FPS). Це означає, що за одну секунду будуть показані 24 кадру, але не всі з них мають бути обов'язково різними. Ви можете змінити цей параметр (якщо хочете) на 12 кадрів в секунду, але при 24 кадрах в секунду анімація буде відтворюватися більш «гладко».

1. Встановіть Flash Professional. Є безліч програм для створення флеш-анімації, але найбільш потужною є Adobe Flash Professional CC. Ви можете безкоштовно встановити пробну версію цієї програми або використовувати інший продукт (якщо ви не хочете реєструватися на Adobe Creative Cloud). Далі в цій статті описується робота з Flash Professional.

   Так як покадрова анімація вимагає наявності кількох зображень (які трохи відрізняються один від одного), то вам потрібно створити ці зображення вручну. Для цього скористайтеся Adobe Flash Professional або намалюйте зображення в будь-якому графічному редакторі.

   • Якщо ви хочете, щоб розмір ваших зображень легко змінювався без втрати їх якості, створюйте зображення у векторній, а не в растровій графіці. Векторні зображення будуть перемальовувати себе при зміні їх розміру (тобто ви уникнете пикселизации або згладжування). Растрові зображення - це традиційні зображення, наприклад, фотографії, намальовані картинки і так далі. При спробі збільшити такі зображення ви отримаєте сильно спотворену картинку.

2. Створіть перший кадр. При першому запуску Adobe Flash Professional ви побачите порожній полотно (шар) і порожню тимчасову шкалу. У міру додавання кадрів тимчасова шкала буде заповнюватися автоматично. Ви можете працювати з шарами так само, як ви робите це в Photoshop.

   • Перш ніж додати зображення, створіть базовий фон вашої анімації. Перейменуйте «Шар 1» в «Фон», а потім закріпіть його. Створіть другий шар і назвіть його як завгодно. Це буде шар, на якому ви будете створювати анімацію.
   • Додайте малюнок на полотно першого кадру. Ви можете імпортувати малюнок з вашого комп'ютера, або ви можете використовувати інструменти для малювання, щоб створити малюнок безпосередньо в програмі.
   • Перший кадр - це «ключовий» кадр. Ключовий кадр - це кадр, який включає зображення і утворює основу ( «кістяк») анімації. Ви будете створювати новий ключовий кадр кожен раз при зміні зображення.
   • Ключові кадри на часовій шкалі позначаються чорною точкою.
   • Ви не потрібен ключовий кадр в кожному наступному кадрі. Створюйте ключовий кадр через кожні чотири-п'ять кадрів, щоб зробити хорошу анімацію.

3. Перетворіть зображення в символ. В цьому випадку ви зможете додати зображення в кадр кілька разів. Це особливо корисно, якщо вам потрібно швидко додати кілька однотипних картинок в один кадр (наприклад, рибки в акваріумі).

   • Виділіть малюнок. Клацніть правою кнопкою миші по малюнку і виберіть «Convert to Symbol» (Перетворити в символ). Зображення буде додано в бібліотеку, що спростить його використання в майбутньому.
   • Видаліть малюнок. Не хвилюйтеся - ви зможете додавати його в кадр простим перетягуванням з бібліотеки. Так ви можете додати в кадр один і той же малюнок кілька разів.

4. Додайте порожні кадри. Якщо ваш перший ключовий кадр готовий, вставте порожні кадри, а потім приступайте до створення другого ключового кадру. Натисніть F5 (чотири або п'ять разів), щоб додати порожні кадри після першого ключового кадру.

   Створіть другий ключовий кадр (після того, як ви додали кілька порожніх кадрів). Є два різні способи зробити це: ви можете скопіювати існуючий ключовий кадр і внести в нього невеликі зміни, або ви можете створити порожній ключовий кадр і додати в нього нове зображення. Якщо ви використовуєте малюнок, створений в іншій програмі, скористайтеся другим способом. Якщо ви вставляєте зображення, створене за допомогою інструментів для малювання Adobe Flash Professional, скористайтеся першим методом.

   • Щоб створити ключовий кадр, використовуючи вміст попереднього ключового кадру, натисніть F6. Щоб створити порожній ключовий кадр, клацніть правою кнопкою миші по останнього кадру на часовій шкалі та виберіть «Insert Blank Keyframe» (Вставити порожній ключовий кадр).
   • Після того як ви створили другий ключовий кадр, вам потрібно внести зміни в його зображення, щоб анімація «ожила». Якщо ви користувалися інструментами для малювання Adobe Flash Professional, виберіть інструмент «Transform» (Перетворення), щоб виділити елемент вашого малюнка (наприклад, руку персонажа) і змінити його.
   • Якщо в кожен ключовий кадр ви вставляєте нове зображення, переконайтеся, що воно знаходиться в потрібному місці (згідно логічної послідовності кадрів).

5. Повторіть процес. Після створення двох ключових кадрів повторіть процес - додайте кілька порожніх кадрів між кожними ключовими кадрами і переконайтеся, що анімація буде програватися «гладко».

   • Вносьте невеликі зміни. Чим менше (непомітніше) зміни, тим глаже відтворюється анімація. Наприклад, якщо ви хочете, щоб персонаж піднімав руку, другий ключовий кадр не повинен включати малюнок, на якому персонаж зображений з уже піднятою рукою. Замість цього використовуйте кілька ключових кадрів для переходу від опущеної руки до піднятій руці. В цьому випадку анімація буде більш плавною.

6. Перетворіть малюнок. Якщо ви створили ключові кадри і траєкторію, ви можете перетворити зображення так, щоб воно плавно змінювалося при русі по траєкторії твін. Ви можете змінити форму, колір, нахил, розмір і будь-який інший параметр зображення.

   • Виберіть кадр, в якому малюнок буде перетворюватися.
   • Відкрийте панель властивостей малюнка. Для цього натисніть F3.
   • Змініть значення параметрів у вікні властивостей малюнка. Наприклад, ви можете змінити відтінок або колір, додати фільтри, змінити розмір.
   • Ви також можете використовувати інструмент «Free Transform» (Вільна перетворення), щоб змінювати малюнок так, як вам завгодно.

7. Додайте заключні штрихи. Перевірте створену анімацію, натиснувши Ctrl + Enter. Переконайтеся, що малюнок (персонаж) правильно змінюється і що анімація відтворюється з правильною швидкістю. Якщо анімація відтворюється занадто швидко, зменшіть значення FPS або збільште тривалість твін.

   • За замовчуванням FPS дорівнює 24, тому спробуйте зменшити це значення до 12. Змініть значення FPS на панелі властивостей. Однак при FPS \u003d 12 анімація може відтворюватися недостатньо плавно.
   • Щоб змінити тривалість твін, виберіть шар, що містить твін, і за допомогою повзунка змініть тривалість твін. Якщо ви хочете подвоїти тривалість твін, пересуньте повзунок на 48 кадрів. Не забудьте вставити фон в порожні кадри, щоб фон не зник посередині анімації. Для цього виберіть фоновий шар, клацніть по останнього кадру анімації (на часовій шкалі), а потім натисніть F5.

частина 3

1. Запишіть або скачайте звукові ефекти і музику. Ви можете додати в анімацію звукові ефекти, щоб зробити її більш ефектною. Музика зробить анімацію більш захоплюючою і може перетворити хорошу анімацію в чудову. Flash підтримує різні формати аудіофайлів, в тому числі AAC, MP3, WAV, і AU. Виберіть формат, який гарантує високу якість звуку при мінімальному розмірі файлу.

   • Формат MP3 гарантує високу якість звуку при мінімальному розмірі файлу. Файли формату WAV мають великий розмір.

2. Імпорт аудіофайли в бібліотеку, щоб мати можливість швидко додавати звуки і музику в анімацію. Натисніть «File» (Файл) - "Import" (Імпортувати) - «Import to Library» (Імпортувати в бібліотеку). Знайдіть аудіофайл на вашому комп'ютері. Переконайтеся, що аудіофайл має легко запам'ятовується, щоб ви могли швидко знайти його.

   Створіть новий шар для кожного аудіофайлу. Це не обов'язково і ви можете додати звук на існуючі шари, але вставка аудіофайлу на окремий шар дозволить вам краще контролювати звукову доріжку анімації.

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

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

технологія Flash

Мультимедійна основа, була розроблена компанією Macromedia. Але після її поглинання (злиття) все права на технологію перейшли новому власнику - компанії Adobe Systems.

Область сучасного застосування Adobe Flash:

• Створення веб-додатків - досить новий напрямок. Має на увазі повне або часткове застосування Flash для створення сайтів. При частковому застосуванні за допомогою даної технології створюються окремі елементи дизайну: різні інтерактивні меню, анімовані кнопки і т.д.

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

• Реалізація мультимедійних можливостей - для прослуховування аудіо і відтворення відео на сайтах часто використовують медіа плеєри, створені на основі Flash. Їх розробка включає в себе використання одного з скриптових мов (частіше JavaScript):

• У засобах інтернет-реклами - найчастіше технологія використовується для створення анімованих банерів. Вони мають на увазі не тільки програвання мультимедійної реклами, але і якесь взаємодія з користувачем на ігровій основі.

Основи і інструментарій для розробки Flash

Для створення флеш анімації найчастіше використовується традиційний інструментарій від Adobe:

• Adobe Flash Professional - програма для створення інтерактивної анімації (аніматор);
• Adobe Flash Builder - середовище для створення інтерфейсу веб-додатків;
• Adobe Flash Player - інтегрований в браузер плеєр для відтворення Flash.

Крім нього відтворювати вміст такого типу може ряд сторонніх додатків. Найбільш популярними з них є Gnash, QuickTime і деякі інші:

Дана технологія дозволяє відображати будь-який тип графіки ( растрову, векторну, 3D). А також підтримує потокову ретрансляцію аудіо і відео даних. Спеціально для мобільних пристроїв була розроблена полегшена версія Flash Lite.

Основним стандартом для флеш-файлів є розширення SWF. Абревіатура розшифровується як Small Web Format. Відео, записане в Flash, має файлові розширення FLV, F4V.

В основі розробки інтерактивної анімації на флеш лежить векторна графіка. Саме завдяки цьому вдалося реалізувати підтримку мультимедійної платформи і незалежність якості анімації від дозволу екрану.

Розмір файлу флеш додатка однаковий для всіх користувачів незалежно від технічних характеристик екрану (дозволу).

Інтерактивна анімація на Flash заснована на морфингом (векторного типу), при якому відбувається повільне перетікання між ключовими кадрами. Для відтворення даних використовується флеш-плеєр, робота якого багато в чому схожа з роботою віртуальної машини JavaScript. Програмна складова технології реалізована за допомогою мови ActionScript.

До недоліків технології можна віднести наступні моменти:

• Сильне навантаження на центральний процесор клієнтської машини. Це пов'язано з низькою ефективністю віртуальної машини флеш, що вбудовується разом з програвачем в браузер користувача;
• Висока ймовірність виникнення помилок - програвання флеш анімації може відбуватися з високою ймовірністю виникнення помилок. Причому збої в програванні Flash негативно впливають на роботу всього клієнтського додатка (браузера). Це пов'язано це з недостатнім контролем відмовостійкості програмного коду при створенні флеш-додатків;
• Неможливість індексування - весь текстовий контент, що відображається у вмісті Flash, не бере участі в процесі індексації. Дане обмеження особливо проблематично для тих ресурсів, які створені на основі цієї технології.

Огляд стороннього програмного забезпечення для створення Flash

Як досвідченого зразка додатка, на якому ми будемо демонструвати основи створення Flash, був узятий Sothink SWF Quicker. На думку багатьох фахівців, програма є найбільш зрозумілою і простою для вивчення.

Крім створення і редагування флеш редактор «вміє» працювати з усіма іншими видами веб-анімації (GIF, HTML і інші стандарти):

Після інсталяції заходимо в дружній інтерфейс програми. На жаль, після блукання по всіх закутках перемикача мови інтерфейсу ми не знайшли.

Для того щоб зрозуміти, як зробити флеш анімацію в цьому додатку, скористаємося вбудованими шаблонами. Діалогове вікно «New From Template» з'являється відразу після запуску програми. Крім того його можна викликати через пункт головного меню «File». Серед пропонованих варіантів ми вибрали створення банера:

У наступному вікні майстра зі списку потрібно вибрати шаблон, за яким буде відбуватися створення анімації. Під ним знаходиться невеликий фрейм, в якому програється вибраний шаблон:

На наступних етапах потрібно задати розміри банера і ввести 5 фраз тексту, які будуть програватися в анімації. Крім того необхідно вказати адресу ресурсу, на який користувача призведе клік по банеру:

Після компіляції проекту і закриття вікна майстра можна переглянути вийшов ролик у вбудованому програвачі. Для цього потрібно натиснути на зелену стрілку вгорі:

Після закриття програвача давайте більш детально вивчимо інтерфейс програми. Зверніть увагу, що він складається з двох основних вікон: верхнє призначене для редагування часового проміжку ролика, а нижня являє собою звичайний графічний редактор. Кожен з елементів розташований на окремому шарі, який доступний для зміни за допомогою стандартних інструментів, розташованих на бічній панелі.

Відкриваємо Flash MX.
Перед нами - наша робоча сцена, меню, панель інструментів ітд. Внизу є таке ось віконце: Properties (Властивості). Там основні настройки вашого мульта (рис.1).
Нас там цікавить FRAME RATE - швидкість прокрутки вашого мульта. Інакше 12 fps означає, що за одну секунду програватиметься 12 кадрів (frame) вашого мульта. Ця швидкість стандартна і, в принципі, те, що треба. Якщо вам треба уповільнити ваш мульт - зменшуєте, треба зробити швидше - збільшуєте цю цифру.

Тепер перейдемо до самої анімації.
У флеш є два основних способи: shape tweening і motion tweening.
Розглянемо перший. Shape - (англ.) Форма. Ви вже розумієте, що тут мова піде саме про зміну форми. Створюємо якусь форму, наприклад синій квадрат. Вгорі, в рядку часу (timeline) у нас на першому кадрі з'явиться кружечок на сірому тлі - ми створили ключовий кадр (keyframe). Тепер створимо такий же кадр в 10-м кадрі. Це можна зробити двома способами: наводимо мишку на 10 кадр, робимо клік (кадр стає синім) і в меню послідовно вибираємо: Insert-\u003e keyframe; інакше можна: наводимо на 10 кадр, натискаємо, натискаємо F6. У рядку часу все 10 кадрів сірі. Червона лінія показує на якому саме кадрі ми знаходимося. (Рис.2)

Переходимо в 10 кадр. Виділяємо наш квадратик (мишкою або натисканням ctrl + A, - це сполучення клавіш виділяє все, що у нас знаходиться в робочій області). Переміщаємо наш квадрат куди-небудь в сторону (прослідкуйте, що ви в 10-м кадрі!) І міняємо колір на, наприклад жовтий. Тепер переходимо назад в перший кадр. У рядку Properties є вибір Tween, де за замовчуванням стоїть атрибут "none". Тобто ніякої анімації. Змінюємо його на "shape". У рядку часу наші кадри набувають салатовий колір зі стрілочкою. Коли все зроблено натискаємо "enter". КРАСА! Квадратик рухається, та ще й колір змінює! Знову переходимо в 10 кадр. Виділяємо всі (ctrl + A). І натискаємо клавішу delete (тобто видаляємо). На місці квадратика малюємо какой-нить червоненькі кружечок. Знову переходимо в перший кадр і натискаємо enter. Квадрат тепер стає кружком і червоним. Ви вже зрозуміли, що вам не треба промальовувати кожен кадр - це за вас зробить flash! Хоча якщо вам потрібна особлива точність, або щось - можете промальовувати. тоді файл виросте в розмірах. Якщо вам потрібен більш плавний перехід від квадратика до того ж, наприклад, кухоль - зробіть цей процес не на 10, а, скажімо, на 25 кадрів. Якщо вам потрібно більше хитромудрі руху і переміщення - для цього існують шари-маски, але про них як-небудь наступного разу. Малюнок 3 показує, як на лінії часу виглядає ваша анімація. Тепер ви вмієте малювати найпростіший мувик зі зміною форми!

Тепер розглянемо другий спосіб завдання анімація: motion tweening (переклад щось типу: побудови проміжної анімації руху). Тут буде трішки складніше. Знову відкриваємо новий файл флеша.
Чим відрізняються shape і motion? Тим, що в другому випадку ми будемо працювати не над формами, а над готовими об'єктами, тобто символами. Символ - це так би мовити, найпростіша одиниця анімації під флеш. Це найбільш поширений спосіб малювання. Повторюємо все знову - в першому кадрі малюємо синенький квадратик. виділяємо його і натискаємо F8 (або виконуємо послідовно: Insert-\u003e convert to symbol). Перед нами з'являється діалогове вікно (рис. 4).

Що ж це таке? У флеш є три типи символів: мувик (moovie clip) - це якась додаткова анімація всередині символу. тобто, цей символ містить в собі якусь анімацію і т.д. має точно такий рядок часу, як і основна сцена; кнопка (button) - елемент, який реагує на натискання, присутність мишки над ним ітд. Коротше, кнопка і є; і третій елемент, самий статичний - graphic. Тобто просто графіка, якесь зображення. Ми будемо працювати з останнім. Якось його називаємо, натискаємо "ОК". На квадратику з'являється кружечок - інакше, центр нашого символу (центр теж можна задати в тому діалоговому вікні). Всі наші символи заносяться в бібліотеку. Звідти ми їх можемо редагувати, вставляти куди треба і куди не треба, видаляти, додавати. Щоб подивитися на свою бібліотеку натисніть F11 або виконайте дії: Window -\u003e Library. У 10-му кадрі створимо ключовий кадр (F6). Тепер можемо перемістити кудись наш квадрат. Потім зробимо його невидимим: для цього виділимо його в 10-м кадрі. На панелі propperties в розділі color задамо alpha (прозорість). Поставимо йому атрибут у відсотках: 0. Повернемося на 1-й кадр. Виконаємо всі ті ж дії, що і для shape tweening, тільки замість shape відзначимо motion. Кадри в тимчасовій рядку стануть фіолетовими і через них перетинаються стрілочка, як це показано на рис. 5. Натиснемо enter.

У нас вийде ефект "квадрат летить в порожнечу". Вітаю! Ви знаєте, як робити примітивну графіком у флеш!
Ще одна важлива особливість - на кожну анімацію у нас повинен бути виділений окремий шар (Layer). Якщо вам треба додати ще один шар за допомогою команди: Insert-\u003e Layer.
І зовсім трохи про рядку часу.
Як ви вже зрозуміли - салатовое зі стрілочкою - shape tweening, фіолетове зі стрілочкою - motion tweening. Салатове або фіолетове з лініями - ви задали анімацію, але цю анімацію створити неможливо, - ви зробили щось не правильно. Сірий колір - все кадри з такою закраской є точною копією попереднього ключового кадру (keyframe). Біле забарвлення лінії означає, що в цих кадрах нічого немає. Чорний кружечок - ключовий кадр. Білий кружечок - порожній ключовий кадр (blank keyframe). Ну, ніби все. (Рис. 6)

На цьому поки що все. Цей той мінімум, з яким можна працювати. Далі вивчіть додавання звуку, контроль над звуком, і вперед - писати Масяню. :) Обіцяю, що обов'язково незабаром напишу ще один урок - по просунутої анімації під флеш. Про те, як зробити "падіння пера", про маски, про контроль над зміною форми в shape tweening "е. Потім ще чогось напишу.
Якщо це комусь все-таки допомогло - скажіть спасибі всьому сайту FLASHER.RU. Це найкраще, чого в мережі є.
Радий був і радий є! Якщо питання - прошу на форум або: [Email protected]
(С) from St.Dimitryi aka Nirva to Flasher.ru
http://flasher.ru