АНІМАЦІЯ У FLASH (Частина 1)

У попередньому розділі ми розглядали програму Flash лише як векторний графічний редактор. Однак головне призначення Flash полягає у створенні анімаційної графіки, тобто мультфільмів. Анімація у Flash може містити звуковий супровід та інтерактивні елементи. Таким чином, йдеться не просто про графік, а про створення мультимедійних продуктів. За допомогою Flash можна створювати цікаві програми, зокрема Web-сторінки.
Результати роботи Flash (файли, анімації, Web-сторінки) прийнято називати мультфільмами, кліпами, відеофрагментами, роликами та анімаціями(Загальний термін – movie). Зазвичай, кліпами називають мультфільми, що входять до складу інших мультфільмів. Процес створення мультфільму полягає у наступному. Спочатку створюється вихідний або так званий авторський файл із розширенням fla. Цей файл можна редагувати та переглядати у середовищі Flash. Потім він перетворюється на SWF-файл, який вже можна переглянути у Flash-програвачі та Web-браузері. Крім того, можна експортувати результати вашої роботи до файлів інших поширених форматів: MOV, анімаційний GIF, JPEG і ряд інших.

Увага! При описі інструментів Flash, якщо спеціально не зазначено, мається на увазі версія 5.0. Особливості Flash MX ми обговорюватимемо особливо.

У попередньому розділі ми вже відзначали основні відмінності Flash 5.0 від Flash MX. Нагадаємо лише одне з них, що є найважливішим. У Flash 5.0 властивості об'єкта розосереджені за декількома палітрами або за декількома вкладками однієї палітри. Відкрити або закрити ці панелі можна за допомогою меню Window>Panels (Вікно>Палітри). У Flash MX скорочено кількість палітр. У меню Window немає підменю Panels, в якому можна вибрати панель (палітру), щоб відкрити або закрити її. Палітри у Flash MX відкриваються та закриваються безпосередньо за допомогою меню Window. Зверніть увагу на те, що всі властивості поточного (тобто виділеного) елемента на робочому полі Flash MX відображаються на одній палітрі Properties (Властивості), яка за замовчуванням розташована внизу. Зміст цієї палітри залежить від поточного об'єкта (тобто виділеного на даний момент). Інакше висловлюючись, зміст палітри властивостей контекстно залежно.

Пробна анімація

Для першого знайомства з анімаційними можливостями Flash створимо простий мультфільм: кружок, який переміщується ліворуч по екрану. Спочатку ми покажемо, як це робиться у Flash 5.0, а потім – у Flash MX. Насамперед
всього нам знадобляться інструменти («Овал») та («Виділення»). Виконайте у Flash 5.0 такі кроки:

Тепер можна відкрити створений HTML-файл у браузері. Втім, це можна зробити навіть з Flash, вибравши команду File>Publish Preview>HTML (Файл>Попередній перегляд публикації>HTML) або натиснувши клавішу . Flash скористається браузером, встановленим за замовчуванням. От і все! Далі ми розглянемо питання створення анімації докладніше.
Все описане вище точно відповідає Flash 5.O. Якщо ви використовуєте Flash MX, слід врахувати, що гаряча клавіша не створює ключовий кадр, а всі параметри поточного (виділеного об'єкта) зосереджені в одній палітрі, яка називається Properties (Властивості). Flash MX, взагалі кажучи, зручніший, ніж Flash 5.0, проте шкода, що гаряча клавіша зникла.
Тепер розглянемо створення анімації у Flash MX. На робочому полі малюємо коло. Виділяємо його і групуємо в одне ціле його контур та заливку. Це можна зробити за допомогою команди Modify>Group (Модифікувати>Групувати). Далі, клацніть правою кнопкою миші на кінцевому кадрі та в контекстному меню виберіть команду Insert Keyframe (Вставити ключовий кадр). Перетягніть коло на місце. Клацніть лівою кнопкою на першому кадрі. При цьому коло опиниться у вихідному положенні. Тепер звертаємося до панелі Properties, що містить параметри першого кадру. У списку Tween, що розкривається, вибираємо значення Motion (Рух). При цьому на часовій шкалі між першим та останнім ключовими кадрами з'явиться стрілка, що говорить про успішне створення анімації. Щоб відтворити мультфільм, натисніть клавішу .

Мал. 551. Створення анімації у Flash MX

Якщо на тимчасовій шкалі замість стрілки з'явилася штрихова лінія, це означає, що ви припустилися якоїсь помилки. При цьому на палітрі властивостей з'являється кнопка із зображенням трикутника та знака оклику. Клацніть на ній відкриє панель з повідомленням про помилку. Невдача при створенні анімації найчастіше зумовлена ​​наступними двома причинами: або ви намагаєтеся анімувати несгруповані об'єкти (у разі кола це контур і заливка), або в цьому шарі знаходяться кілька об'єктів, що згруповані.
Крім способу, розглянутого вище, у Flash MX можна створити анімацію за допомогою команди Create Motion Tween (Створити анімацію руху). У цьому випадку клацніть правою кнопкою миші на першому кадрі і в контекстному меню виберіть команду Create Motion Tween. При цьому зображення кола буде перетворено на символ типу Graphic. Клацніть правою кнопкою миші на останньому кадрі та в контекстному меню виберіть команду Insert Frame (Вставити кадр). Між першим та останнім кадрами з'явиться штрихова лінія. Тепер потрібно перемістити коло на місце. В результаті останній кадр автоматично стане ключовим, а штрихову лінію буде замінено стрілкою. Створення анімації завершено.
Як неважко помітити, способи створення анімації у Flash 5.0 та Flash MX дуже схожі та прості. Спробуйте застосувати їх кілька разів, і вони добре запам'ятаються.

Основні поняття анімації

Під терміном анімація розуміється послідовність змінюваних зображень (кадрів), в результаті перегляду якої виникає ілюзія руху (плавної зміни форми та/або положення зображення). У Macromedia Flash реалізовано два способи анімації:

• Покадрова анімація.Цей спосіб полягає в тому, щоб досить швидко перегорнути заздалегідь намальовані кадри. В даному випадку ілюзія руху виникає за рахунок вибору відповідних швидкості перегортання та ступеня схожості сусідніх кадрів. Цей спосіб аналогічний способу, що застосовується при створенні анімаційних GIF-файлів (див. розділ 3).
• Інтерполяційна анімація. Цей спосіб у тому, щоб створити кілька опорних (ключових) кадрів, та був з їхньої основі «обчислити» проміжні кадри (tweening animation). Даний спосіб аналогічний малюванню гладкої лінії, що проходить через ці точки. Наприклад, припустимо, що потрібно перемістити якусь фігуру з лівої частини екрана в праву за допомогою 25 кадрів. У разі першого, покадрового способу анімації нам доведеться намалювати всі двадцять п'ять кадрів, і в кожному наступному кадрі трохи зрушувати фігуру вправо. А якщо потрібно зробити так, щоб фігура, рухаючись праворуч, поступово зникала чи змінювала форму? Очевидно, робити вручну кожен кадр у цьому випадку буде надто стомлюючим заняттям. Ось для таких ситуацій і передбачено другий спосіб анімації. У найпростішому випадку вам знадобиться задати лише два ключові кадри: початковий і кінцевий. За промовчанням Flash розраховує проміжні кадри за лінійним законом, але можна задати й експонентний закон.

Спочатку розглянемо основні елементи, що використовуються під час роботи з Flash: тимчасову шкалу (timeline), кадри (frames), символи (symbols) та шари (layers).

Тимчасова шкала

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

Мал. 552. Тимчасова шкала у Flash 5.0

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

Мал. 553. Тимчасова шкала у Flash MX

Перелічимо основні елементи тимчасової шкали.

• Маркер - виділений червоним кольором прямокутник, що вказує на поточний кадр, вміст якого відображається у робочій області. Осередки прямокутної сітки (шкали кадрів) відповідають кадрам. При натисканні на будь-якій клітинці маркер автоматично переміщається на неї, а в робочій області відображається вміст відповідного кадру.
• Шари. Ліворуч від лінійки кадрів знаходиться список шарів. Під ним розташовані кнопки, що дозволяють додавати та видаляти шари. За бажанням кожен шар можна зробити невидимим або заборонити його редагування.
• Шкала кадрів - поле, де можна додавати та видаляти прості та ключові кадри. Якщо викликати контекстне меню, клацнувши правою кнопкою миші на якомусь кадрі, ви побачите перелік дій, які можна зробити. На шкалі кадрів відображається така інформація:
  • ключові кадри позначаються чорними кружками;
  • кадри, із якими пов'язані дії, позначаються буквою «а» над кружком;
  • на позначені кадри вказують червоний прапорець та назву мітки.
• Колір також говорить про тип кадрів. Кадри, які точно повторюють ключовий кадр (keyframe), забарвлюються в сірий колір. Бузкове або зелене підсвічування говорить про те, що кадри згенеровані Flash. Білий колір вказує на пусті кадри.
• Кнопки керування тінямидозволяють відображати сусідні кадри через кальку, щоб бачити відмінності між сусідніми кадрами. Інакше кажучи, вони дозволяють створити шлейф для зображення, що рухається. Можна задавати кількість сусідніх кадрів, що відображаються.

Кадри

Анімація складається із послідовності кадрів. Кадр може бути створений як вручну, так і згенерований Flash. Це стосується кадрів одного шару. Так як сцени Flash (що це таке, описано нижче в цьому розділі) складаються зазвичай з декількох шарів, то підсумкові багатошарові кадри можуть містити як згенеровані, так і самомодельні кадри.
У комп'ютерній анімації існує поняття ключові кадри (keyframes) - це кадри, які Flash не змінює у процесі створення анімації, але використовує як опорні при генерації проміжних кадрів.
Існує два типи проміжних кадрів:

• Кадри, побудовані з урахуванням зміни форми (shape tweening).
• Кадри, побудовані з урахуванням зміни символів (motion tweening). Найчастіше вони використовуються при створенні анімації руху робочим полем.

Слід згадати і про порожні кадри, які нічого не містять.

На тимчасовій шкалі послідовність незмінних кадрів має сірий колір, послідовність кадрів motion tweening – бузковий, послідовність кадрів shape tweening – зелений, порожні кадри – білий. Ключові кадри позначаються чорною точкою.
Елементарні операції над кадрами:

• вставити порожній ключовий кадр: команда Insert>Blank keyframe ( );
• вставити ключовий кадр, що повторює зміст попереднього: команда Insert>Keyframe ( , Тільки Flash 5.0);
• очистити ключовий кадр: команда Insert>CIear keyframe ( +);
• вставити звичайний кадр: команда Insert>Frame ( );
• видалити кадр: команда Insert>Remove Frames ( +).

Символи (Symbols)

Символ - одне з ключових понять у Flash. Ми вже говорили про нього у попередньому розділі. Символом може бути найпростіша фігура, поєднання кількох фігур і навіть ціла анімація (movie). Наприклад, можна створити символи "колесо", "кузов" та "фара", а потім все це об'єднати в символ "автомобіль". Потім можна створити сцену, в якій цей автомобіль буде їхати. Ви можете зробити колесо анімаційним символом, щоб його обертання відчувалося. Двері автомобіля можна зробити символом типу «кнопка», щоб вони відкривалися при клацанні на ній. При цьому в будь-який момент ви можете змінити зміст та тип символу. Іншими словами, символ це – об'єкт. Начебто термін «об'єкт» більш звичний, але у Flash використовується саме «символ» (тому символи тексту щоб уникнути плутанини ми називатимемо знаками ).
Символи можуть бути вкладеними один в одного незалежно від типу, що є найголовнішим їхнім достоїнством. Символи можна створювати як «з нуля» (команда Insert>New Symbol (Вставити>Новий символ) або клавіші +), так і використовуючи поточне виділення в робочій області, перетворивши його на символ (команда Insert>Convert to Symbol або клавіша ). Другий прийом використовується набагато частіше, ніж перший, тому що відпадає необхідність позиціонувати виділення та підганяти його розмір.
Для керування символами використовуються так звані бібліотеки (Library), про які ми розповімо нижче. Все, що ви намалювали або імпортували в робочу область, можна перетворити (конвертувати) на символ. Цей символ відразу ж потрапить до бібліотеки поточного (створюваного або редагованого) мультфільму. Символи з бібліотеки можуть бути перенесені на сцену або інший мультфільм. При цьому те, що ви перенесли, фігурує не як символ, а як екземпляр (instance) символу. Ви можете редагувати символ, і результат ваших модифікацій пошириться на всі його екземпляри. Можна редагувати екземпляр символу, не торкаючись символу. Модифікований екземпляр символу можна перетворити на самостійний символ. Вікно бібліотеки відкривається командою Window>Library (Вікно>Бібліотека) або натисканням клавіш +. Рекомендується розібратися з нею самостійно.
Існує три типи символів: графічний (Graphic), кнопка (Button) та анімація (мультфільм, кліп)(Movie Clip). Команда Insert>New Symbol відкриває вікно, в якому слід вказати тип символу, що створюється. Розглянемо типи символів докладніше.

Мал. 555. Діалогове вікно, в якому вказуються ім'я та тип створюваного символу

Графічний (Graphic)

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

  Кнопка (Button)

  Кнопка – тип символу, спеціально пристосованого до функцій кнопки. Цей символ може виглядати як завгодно, не обов'язково як прямокутна або кругла кнопка. Тут важливо те, що цей символ має функціональність кнопки. Коли ви створюєте символ Button , на часовій шкалі з'являються чотири кадри, які відповідають наступним ситуаціям:

• Up - покажчик миші над кнопкою;
• Over – покажчик мишки знаходиться над кнопкою;
• Down - покажчик миші знаходиться над кнопкою і при цьому натиснута кнопка
  миші;
• Hit - кадр визначення активної області кнопки, реагує на клацання; його вміст невидимий і може бути як меншим, так і більшим за видиме зображення кнопки. Якщо ви не опишете цей кадр, для нього використовуватиметься зображення кнопки з кадру Up.

Зауважимо, що у попередньому розділі ми малювали зображення кнопки, але з створювали символ кнопки.
Щоб створити кнопку, виконайте команду Insert>New Symbol або натисніть клавіші +. У діалоговому вікні введіть ім'я символу і виберіть його тип (Behavior (поведінка)) Button . Flash перейде в режим редагування символу. При цьому на часовій шкалі відобразяться чотири кадри: Up, Over, Down та Hit.
Перший кадр – Up. Тепер потрібно створити зображення для кнопки, використовуючи інструменти для малювання, імпорт графіки або вставку екземпляра іншого символу. При цьому можна використовувати символи Graphic (Графічний) та Movie Clip (Анімація), але не Button (Кнопка). Використовуйте Movie Clip, якщо хочете, щоб кнопка була анімованою. Створене зображення для кнопки буде вставлено у кадр Up, який автоматично стане ключовим.
Далі, клацніть на часовій шкалі кадру Over і зробіть його ключовим (Insert>Keyframe або клавіша ). Вміст попереднього кадру (Up) буде автоматично скопійовано у кадр Over. Повторіть це для кадрів Down та Hit. Тепер можна відредагувати зображення кнопки для кожного з чотирьох кадрів. Наприклад, можна змінити колір та/або напис на кнопці, що надасть динамічності кнопці: вона змінюватиме зовнішній вигляд залежно від положення покажчика та стану кнопки миші. На малюнках, як приклад, показано зображення кнопки для різних кадрів.
Якщо потрібно відтворювати звук, який залежить від станів кнопки, виділіть відповідний кадр на часовій шкалі і виконайте команду Modify>Frame (Модифікувати>Кадр), щоб відкрилася панель Frame, на якій є вкладка Sound (Звук). У цій вкладці можна встановити потрібні параметри.
Завершивши створення символу кнопки, перейдіть до режиму редагування мультфільму (команда Edit>Edit Movie ) і перетягніть символ кнопки з вікна бібліотеки в робочу область, щоб створити екземпляр цього символу у мультфільмі (сцені).

Мал. 557.

Мал. 559.

Все, що ми зробили є лише візуальним об'єктом. Однак кнопки, як відомо, є елементами управління. Ми хочемо, щоб, наприклад, при натисканні на кнопці щось відбувалося. Інакше кажучи, кнопку необхідно наділити функціональністю. Для цього клацніть правою кнопкою миші на зображенні кнопки і в меню виберіть команду Actions (Дії). В результаті розкриється панель Object Actions, показана на малюнку. На вкладці Object Actions цієї панелі можна вибрати дію в лівому списку. У правому полі записуються інструкції сценарію на мові ActionScript. Ви можете вибирати дії та значення їхніх параметрів (поля введення та/або перемикачі), спостерігаючи, що пише Flash у правому полі, або вручну писати сценарій. На малюнку показано приклад, у якому як дію вибрано функцію getURL(adpec) , що викликає документ (файл), розташований за вказаною адресою. Причому ця дія станеться у разі натискання кнопки (при натисканні лівою кнопкою миші на зображенні кнопки) - за це відповідає функція on (press)

.

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

Докладніше про панель дій і, зокрема, про функціональність кнопок буде розказано нижче в цьому розділі.
Зверніть увагу, що дії слід призначати екземпляру символу Button у мультфільмі, а не кадрам кнопки на часовій шкалі. Іншими словами, ви розміщуєте екземпляр кнопки на робочій ділянці і потім призначаєте йому дії.
У спільній бібліотеці символів Flash, що відкривається командою Window>Common Libraries, є вже готові кнопки. Ви можете відкрити цю бібліотеку і перетягнути з неї в робочу область символ, що сподобався, стільки разів, скільки його екземплярів знадобиться в мультфільмі. При цьому символ одразу потрапите до приватної бібліотеки вашого мультфільму. Ви можете модифікувати як символ, так і його екземпляри. Наприклад, якщо потрібно створити ряд кнопок в однаковому стилі, але з різними написами, слід модифікувати екземпляри, для чого виділіть на робочій області екземпляр кнопки і виконайте команду Modify>Instance (Модифікувати>Екземпляр).
У Flash MX модифікація кадрів, екземплярів символів та самих символів здійснюється за допомогою панелі Properties (Властивості).
Якщо вам потрібна проста прямокутна кнопка без особливих художніх вишукувань, то у Flash MX можна скористатися вже готовим компонентом PushButton (Кнопка) з панелі Components (Компоненти). Примірники цього компонента можна редагувати. Про це ми розповідали у попередньому розділі.

Мал. 561. Два екземпляри кнопки, що розрізняються написами. Library – Moviel – вікно бібліотеки символів нашого мультфільму (на даний момент у ній міститься лише один символ Push Bar); Library - Buttons.fla - вікно бібліотеки кнопок із спільних бібліотек (Common Libraries)

Анімація, розваги (Movie Clip)

Анімація - найцікавіший тип символу. У цьому символі може бути будь-яка кількість кадрів. У мові сценаріїв ActionScript цей символ сприймається як об'єкт типу Movie Clip. Кожен символ цього типу (кліп) має власну тимчасову шкалу, яка відтворюється незалежно від шкали тимчасового основного мультфільму. З іншого боку, кліп може містити інші кліпи та елементи інтерактивного керування.
Ми вже розглядали створення простого мультфільму вище у цьому розділі. Більш детальна розповідь – у наступному розділі. Тут зазначимо, що велика спільність поняття символу типу Movie clip потребує певного досвіду, щоб його повною мірою. У багатьох випадках вся анімація (весь мультфільм) складається із одного кліпу.

Бібліотеки символів

З поняттям бібліотеки ми вже зустрічалися і в попередньому, і в цьому розділі. Тепер розглянемо його докладніше. Бібліотека символів дозволяє розробнику використовувати у новому мультфільми символи, створені раніше інших мультфільмах. Це дає можливість накопичувати напрацьований матеріал та організовувати колективну роботу.

У Flash є такі типи бібліотек:

• Мультфільм Бібліотека (Library)
• Загальна бібліотека (Common Library)
• Постійна бібліотека (Permanent Library)
• Бібліотека, що розділяється (Shared Library)

У Flash MX, на відміну від Flash 5.0, бібліотеки, що розділяються, бувають двох видів:

• Run-time - бібліотека часу виконання, що розділяється;
• Author-time - бібліотека часу розробки, що розділяється.

У Flash 5.0 єдиний тип бібліотеки, що розділяється, є бібліотека Run-time.
З точки зору інтерфейсу користувача робота з бібліотеками різного типу організована однаково, її вміст можна переглянути в спеціальному діалоговому вікні.
Мультфільм Бібліотека- бібліотека символів, пов'язана із конкретним мультфільмом. Вона створюється автоматично, коли ви створите перший символ. Цей символ одразу потрапить до бібліотеки. Порожню бібліотеку можна створити, виконавши команду Window>Library (Вікно>Бібліотека). Бібліотека, якщо вона створена, існує стільки часу, скільки існує мультфільм. Можна видалити весь вміст, але видалити власне бібліотеку не можна. У заголовку вікна бібліотеки виводиться назва мультфільму (ім'я файлу). Символи біліотеки можуть бути використані у будь-якому іншому мультфільмі. Для цього достатньо відкрити новий файл, не закриваючи файл, бібліотекою якого потрібно скористатися. При цьому вікно бібліотеки файла-джерела має бути відкрито.
Загальна бібліотека- Вбудована бібліотека Flash. На відміну від бібліотеки мультфільму її вміст не можна змінити. Загальна бібліотека складається з декількох бібліотек, таких як Buttons (Кнопки), Learning Interactions (Інтерактивне навчання) та ін. Загальна бібліотека Flash MX включає, крім іншого, ще й розділ Developer Assets (Ресурси розробника), який містить компоненти інтерфейсу користувача (див. розділ 8).
Елементи загальної бібліотеки можна використовувати у своїх мультфільмах і в наявному вигляді, і як початкові заготовки для наступної модифікації.
Постійна бібліотека- бібліотека, що створюється користувачем та доступна з будь-якого мультфільму. Для створення постійної бібліотеки виконайте таке:

1. Створіть Flash-файл (новий мультфільм, тобто файл з розширенням fla) з бібліотекою, що містить символи, які потрібно включити в постійну бібліотеку.
2. Збережіть створений Flash-файл у папці Libraries, яка знаходиться серед інших папок Flash.

Після створення нова бібліотека з'явиться у меню Window>Common Libraries (Вікно>Загальні бібліотеки).
бібліотека, що розділяєтьсядозволяє використовувати символи, що містяться в ній, в декількох мультфільмах без копіювання цих символів в приватні бібліотеки мультфільмів. Елементи бібліотеки, що розділяється, називаються ресурсами (asset). Бібліотека, що розділяється, використовується як зовнішній файл і не міститься всередині мультфільму.
Застосування бібліотек, що розділяються, корисно в таких випадках:

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

Щоб створити бібліотеку розділеної, слід визначити її ресурси (входять до неї символи), дозволити експорт символів, що встановлюються, вказати URL-адресу сайту, на якій буде розміщена бібліотека, експортувати Flash-файл у SWF-формат і розмістити його на Web-сайті.
Після створення бібліотеки, що розділяється, необхідно вказати, які з її символів можуть бути експортовані в інші мультфільми. Для цього у вікні бібліотеки виберіть потрібний символ та клацніть на ньому правою кнопкою миші. У контекстному меню виберіть Linkage (Зв'язування). В результаті відкриється вікно, яке у Flash 5.0 називається Symbol Linkage Properties (Властивості зв'язування символу), а у Flash MX - просто Linkage Properties (Властивості зв'язування). У різних версіях Flash ці вікна дещо відрізняються, але суть одна.
У полі Identifier (Ідентифікатор) вводиться ім'я символу (без пробілів), з яким він буде експортований у фільм-співвласник.
У Flash 5.0 можна вибрати експорт символу або імпортувати його. В останньому випадку потрібно вказати URL-адресу мультфільму-джерела, тобто SWF-файлу з бібліотекою, що розділяється. Це ж можна зробити і у Flash MX, але є і додаткові можливості. Зокрема, щоб експортований символ міг використовуватися відразу з першого кадру мультфільму-співвласника, встановіть прапорець Export in first frame . Якщо експортований символ слід зробити доступним у сценарії мовою ActionScript, встановіть прапорець Export for ActionScript.

Мал. 562. Вікно властивостей зв'язування символу у Flash 5.0

Мал. 563. Вікно властивостей зв'язування у Flash MX

Щоб використати символи з бібліотеки, що розділяється, у мультфільмі-співвласнику, відкрийте бібліотеку цього мультфільму і в розкривному меню бібліотеки виберіть команду New Symbol (Новий символ). В результаті з'явиться вікно Create New Symbol (Створення нового символу). У Flash 5.0 у цьому вікні можна задати лише ім'я та тип символу. Тому після появи нового символу в бібліотеці потрібно відкрити вікно Symbol Linkage Properties, розглянуте вище. У Flash MX вікно Create New Symbol одразу містить усі параметри символу.

Мал. 564. Вікно Create New Symbol у Flash MX

Вище ми розглянули роботу з бібліотеками виду Run-time, що розділяються. Нагадаємо, що у Flash 5.0 це єдиний вид бібліотеки, що розділяється. У Flash MX, крім того, є ще один вид бібліотек, що розділяються - Author-time. Тут ми не будемо його детально розглядати. Зазначимо лише, що застосування бібліотек Author-time дозволяє замінювати вміст символів у редагованому Flash-файлі.

Створення анімації

Розглянемо способи та приклади створення анімації.

Покадрова анімація

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

Мал. 565. Покадрова анімація складається лише з ключових кадрів. Те саме зображення може займати кілька таких кадрів

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

Мал. 566. Чотири послідовні кадри з мультфільму, в якому виростає квітка

Однак покадрову анімацію складно модифікувати. Якщо ця анімація є пов'язаною, доводиться модифікувати практично всі кадри. Крім того, покадрова анімація займає досить великий обсяг, тому що потрібно зберігати інформацію про кожен кадр.
Зауважимо, що анімаційні GIF-файли, що широко використовуються в Web-дизайні, створюються у Flash методом покадрової анімації. Ви можете створити кілька ключових кадрів (якщо необхідно, то використовуйте кілька шарів), а потім перетворіть свій твір на GIF-файл з параметром Animated за допомогою операції публікації. Докладніше про це розказано в останньому розділі цього розділу.

Інтерполяційна анімація

У такому способі анімації Flash автоматично створює проміжні кадри, які вбудовуються між ключовими кадрами, заданими вами. Це означає, що ви в одному кадрі малюєте об'єкт, потім в іншому кадрі здійснюєте його зміни. Створені кадри є ключовими. Потім ви просите Flash розрахувати кадри, які мають зайняти місце між двома ключовими кадрами. В результаті ви отримуєте анімацію.
Швидкість та плавність анімації залежать від кількості кадрів, які ви відводите під рух, а також від швидкості прокручування вашого Flash-мультфільму (movie). Швидкість прокручування мультфільму можна встановити у Flash 5.0 командою Modify>Movie або клавішами +, а у Flash MX - командою Modify>Document. Параметр Frame Rate визначає кількість кадрів, що показуються в секунду. Для високоякісної анімації швидкість повинна бути не менше ніж 25-30 кадрів/с. За замовчуванням швидкість дорівнює 12 кадрів/с. Під час створення мультфільмів вона зазвичай підбирається експериментально, залежно від динамічності вашого твору, необхідної якості, обмежень обсяг файлу тощо.
Плавність та тривалість задаються кількістю кадрів, відведених на всю анімацію (її фрагмент). Наприклад, якщо швидкість вашого мультфільму становить 30 кадрів/с, і вам потрібно, щоб відбувалося переміщення об'єкта з одного кута картинки в інший за 2,5 с, то на рух потрібно відвести 75 кадрів. У Flash є два варіанти побудови проміжних зображень:

• Shape tweening – побудова анімації на основі зміни форми;
• Motion tweening – побудова анімації на основі зміни символів.

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

Анімація на основі зміни форми (Shape tweening)

Допустимо, потрібно, щоб квадрат плавно перетворився на коло, або зображення кішки плавно перетворилося на зображення собаки. У разі використовується shape tweening (зміна форми, трансформація). При цьому ви задаєте два ключові кадри на деякій відстані один від одного. У варіанті анімації є жорстке обмеження: анімація повинна займати окремий шар і бути єдиною намальованою фігурою (не повинно бути груп або символів). Після того, як ви створили два ключові кадри, зробіть активним перший з них (просто перейдіть на нього клацанням кнопкою миші) і виберіть на панелі Frame (кліпом Windows>Panels>Frame або натисканням клавіш на панелі Frame). + ) у списку Tweening рядок Shape (Форма), як показано на малюнку.

Мал. 567. Вказуємо варіант анімації Shape tweening

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

Мал. 568. Коло плавно переходить у півмісяць. Тут перший ключовий кадр містить коло, а останній, 10-й кадр – півмісяць. На малюнку показані усі кадри мультфільму

Розглянемо параметри перетворення shape tweening. При виборі цього варіанта на панелі Frame з'явилися параметри Easing і Blend і поле введення мітки кадру Label.

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

Мал. 569. Анімація з прискоренням (Easing< 0)

Мал. 570. Анімація із уповільненням (fusing > 0)

• Параметр Blend (Перехід) визначає алгоритм переходу: Distributive (Розмитий) та Angular (Кулькуватий). Перший намагається максимально пом'якшити, згладити перехід від однієї фігури до іншої. Другий намагається зберегти пропорції кутів і відрізки прямих ліній. Рекомендується поекспериментувати з цим параметром, щоб зрозуміти, у яких випадках параметр параметра краще використовувати.

Останній інструмент в анімації типу shape tweening - контрольні точки(shape hints), за допомогою яких ви допомагаєте Flash правильно здійснити перехід. Без них не обійтися під час роботи зі складними формами. Користуватись контрольними точками дуже легко. У першому ключовому кадрі (з якого починається анімація) ви додаєте контрольну точку (команда Modify>lransform>Add shape hintабо клавіші ++). На сцені з'явиться маленька червона цятка, позначена буквою латинського алфавіту. Ви прикріплюєте її до частини зображення, яка рухається не так, як ви хотіли. Потім ви переходите на другий ключовий кадр і прикріплюєте цю точку до частини, в яку повинна перейти позначена частина в початковому кадрі. Ця точка буде зеленого кольору, а на початковому кадрі вона стане жовтою. Таким чином, ви можете відрізняти початкові та кінцеві контрольні точки (на одному кадрі можуть бути і ті, й інші). Видалити всі точки можна за допомогою команди ModifyTransform>Remove All Hints. Видалити ж єдину точку можна, клацнувши на ній правою кнопкою миші і в контекстному меню, вибравши команду Remove Hint . Оскільки контрольні точки позначаються літерами латинського алфавіту, їх може бути не більше ніж 27.
На наступних двох малюнках можна помітити різницю між кадрами, створеними без використання контрольних точок, і кадрами, створеними з використанням таких.

Мал. 571. Shape tweening без використання контрольних точок

Мал. 572. Shape tweening із використанням контрольних точок

При використанні анімації на основі зміни форми (shape tweening) можуть модифікуватися такі параметри фігури:

• Форма
• Розташування
• Розмір (будь-які пропорції)
• Кут повороту

Якщо вам потрібно вимкнути shape tweening, то на панелі Frame виберіть у списку Tweening значення None.

Анімація на основі зміни символів (Motion tweening)

Як зазначалося вище, найчастіше використовується варіант анімації motion tweening (анімація руху). І тут анімація будується з урахуванням модифікації символів, т. е. об'єктом анімації є символ. Як і в анімації shape tweening, для кожного об'єкта в кожний момент часу потрібно один шар. У цьому шарі повинен бути один символ, з яким і відбуватимуться всі зміни.
Ось які параметри символу можуть модифікуватися під час використання motion tweening:

• розмір (як пропорційно, так і непропорційно - окремо висота та ширина)
• нахил
• розташування
• кут повороту
• колірні ефекти

Увімкнути motion tweening можна кількома способами, а відключити – лише одним. Щоб увімкнути motion tweening, потрібно зробити активним початковий кадр переходу, та був, натиснувши праву кнопку миші, у контекстному меню вибрати команду Create motion tween , чи вибрати команду Insert>Create motion tween ). Універсальний спосіб увімкнення/вимкнення motion tweening- у палітрі Frame вибрати значення у списку Tweening .

Параметри анімації:

• Easing – задає зворотне експоненційне прискорення; працює так само, як і в shape tweening;
• Rotate - дозволяє керувати обертанням:
  • Auto – змушує Flash автоматично намагатися визначити кількість витків;
  • CW - задає обертання за годинниковою стрілкою;
  • CCW - задає обертання проти годинникової стрілки; при цьому в доступному полі праворуч можна ввести кількість обертів (можна використовувати тільки цілі значення або відключити обертання, вибравши в списку Rotate значення None ).
• Options - додаткові параметри:
  • Orient to path - повертає символ відповідно до напрямної лінії;
  • Snap - прив'язує символ до напрямної лінії;
  • У разі коли кількість кадрів основної сцени не кратна кількості кадрів символу, прапорець Synchronize (Синхронізувати) дозволяє синхронізувати ці дві анімації.

Напрямні шари

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

Мал. 574. Об'єкт у вигляді стрілки, який має рухатись

Далі, клацніть правою кнопкою миші на ім'я шару Стрілка і в контекстному меню виберемо команду Add Motion Guide (Додати напрямну руху). У результаті списку шарів з'явиться новий шар Guide: Стрілка з характерним значком ліворуч від імені. Це і є напрямний шар(guide layer). Шар, що знаходиться у списку безпосередньо під ним, є спрямовується (guided). У напрямному шарі намалюємо траєкторію руху. Для цього можна використовувати будь-який інструмент малювання ліній, наприклад, «Олівець» (Pencil). Головне, щоб траєкторія була лінією (контуром), а не заливкою.
Виділимо наш об'єкт у вигляді стрілки та перемістимо його на початок траєкторії. При переміщенні в центрі зображення об'єкта з'явиться кружок, який повинен потрапити на траєкторію і як би зачепитися за неї. Цим ми прив'язуємо об'єкт до траєкторії.
На тимчасовій шкалі виберемо кадр, що відповідає закінченню руху траєкторією (у нашому прикладі це 30-й кадр). Зробимо його ключовим. Це потрібно зробити спочатку в напрямному шарі, а потім - в напрямному.
Переконаємося, що активним є шар, що направляється (у нашому прикладі це шар Стрілка). Перетягнемо об'єкт на кінець траєкторії, а потім повернемося до першого кадру в тому самому шарі. Створимо анімацію (команда Insert Motion Tween). У загальних рисах організацію руху по напрямній траєкторії завершено.

Мал. 575. У напрямному шарі малюється траєкторія руху

Мал. 576. Завдання параметрів руху траєкторією

Мал. 577. Рух об'єкта з його орієнтацією вздовж траєкторії

Щоб траєкторія руху була невидимою, достатньо зробити невидимим напрямний шар. Якщо ви хочете, щоб об'єкт орієнтувався вздовж траєкторії, встановіть властивість Orient to Path для першого кадру шару з об'єктом. Прискорення або уповільнення руху по траєкторії визначається параметром Easing.
Якщо напрямний шар вже існує, будь-який шар можна зробити направляючим. Для цього достатньо або просто перетягнути його ім'я у списку шарів безпосередньо під ім'я напрямного шару, або створити новий шар, розташований нижче за напрямний, і встановити тип цього шару Normal .

Шари-маски

Вміст шару можна розглядати через отвір, приховавши все інше. Для цього служить так званий шар-маска – особливий тип шару, що містить власне маску. Маска (отвор або вікно перегляду) може бути створена на основі об'єктів різних типів: області заливки, текстового поля, екземпляра графічного символу та навіть мультфільму. Маску можна змусити змінювати форму або переміщатися. Однак, не можна використовувати шари-маски всередині кнопок.
Маска являє собою шар, в якому будь-яка область заливки інтерпретується як отвір, через який видно шар нижче. При цьому колір заливки, градієнт та контур ігноруються. За замовчуванням шар-маска закриває (маскує) лише той шар, який лежить безпосередньо під ним.
Розглянемо створення простої маски з урахуванням області заливки. Створимо спочатку маскується шар. Назвемо його Фон. Ми імпортували в нього растрову картинку з Photoshop 7.O. Далі, створимо шар-маску. Для цього достатньо клацнути на кнопці зі знаком + внизу списку шарів. Назвемо його Маска. У цьому шарі намалюємо якусь фігуру і заллємо її якимось кольором, тобто створимо область заливання. Ми намалювали овал, потім трансформували його за допомогою інструмента Subselect (біла стрілка). Тепер зазначимо, що цей шар є шаром-маскою. Для цього достатньо клацнути правою кнопкою миші на його імені та у контекстному меню вибрати команду Mask (Маска). При цьому ліворуч від імені шару-маски і шару, що маскується, з'являться характерні значки, і обидва шари будуть заблоковані (справа від їх імен з'являться зображення замків). Маскування набуде чинності, верби побачите на робочій області лише ділянку фону, що накривається фігурою шару-маски.
Щоб перейти в режим редагування маски і побачити як фон, так і вікно перегляду маски, розблокуйте шар-маску (клацніть на відповідному зображенні замка) У режимі редагування можна змінити форму, розташування і навіть кількість вікон перегляду маски.
Загалом можна маскувати кілька шарів, а не тільки той, який знаходиться безпосередньо під шаром-маскою. Якщо необхідно зробити який-небудь шар, що маскується, то його перш за все слід розташувати нижче шару-маски, а потім у властивостях цього шару встановити перемикач Masked (Маскований). Навпаки, щоб вивести шар з-під маски, встановіть перемикач Normal.
Отже, ми розглянули найпростіший спосіб створення маски. Для чого потрібні маски? Маска у статичному вигляді є інструментом для створення колажів.
Тут ми не будемо зупинятися на тому, в яких випадках і навіщо може знадобитися приховувати щось із того, що вже існує, щоб те, що залишилося, постало в цікавому або потрібному нам вигляді.

Мал. 578. Маска в режимі редагування. Щоб побачити дію маски, встановіть блокування шару-маски (замок)

Мал. 579. Вигляд сцени при увімкненому режимі маскування: шар-маска заблоковано (замок). Фон видно тільки через вікно перегляду маски.

Найбільш цікаві та корисні ефекти застосування масок виходять при їх анімуванні: переглядові вікна масок можуть змінювати свою форму і переміщатися на тлі шарів, що маскуються. Саме тому вони знаходять широке застосування в мультфільмах. Розкриваються меню, бриж на воді, метаморфози хмар, рух губ при розмові - все це можна зробити за допомогою анімованих масок.
Тепер розглянемо створення анімованих масок. По суті, анімована маска - це маска, переглядове вікно якої або змінює свою форму, або переміщається в робочій області. Ви можете створити кілька вікон перегляду, але всі вони повинні бути згруповані в єдиний об'єкт за допомогою команди Modify>Groupe (Модифікувати>Групувати).
Для простоти створимо переглядове вікно овальної форми і змусимо його переміщатися на тлі шару, що маскується. Як створити маску, ми показали вище. Повторіть цю процедуру як вправу.
Для шару-маски створимо анімацію руху. Спочатку зробимо переміщення переглядового вікна у шарі-масці. У нашому прикладі як останній обраний 20-й кадр (він є ключовим). У шарі-масці переміщуємо фігуру вікна перегляду на нове місце. Повертаємося до першого кадру та виконуємо команду Insert>Create Motion Tween (Вставити>Створити анімацію руху). В результаті між першим та останнім кадрами з'явиться стрілка. Щоб анімація вийшла, радимо вам спочатку виділити фігуру вікна перегляду, а потім застосувати до неї команду угруповання Modify>Groupe . Ми вже відзначали цю обставину при розгляді напрямних шарів. Якщо щось не так, між першим та останнім кадрами замість стрілки з'являється штрихова лінія. Потім в маскуваному шарі вставте кадр на 20 позицію. Це може бути звичайний, не обов'язково ключовий кадр. Заблокуйте шари та натисніть клавішу , щоб побачити маску в дії.

Мал. 580.

Мал. 581. Тимчасова шкала при створенні маски, що переміщається, і вид робочого поля в режимі редагування (шари розблоковані)

У Flash MX створення анімації дещо відрізняється від того, як це робиться у Flash 5.O. Ці відмінності ми розглядали у розділі «Пробна анімація» цієї глави. Їх суть полягає у виборі відповідних значень властивостей кадру на панелі Properties (Властивості).
Перегляд вікна маски може змінювати форму. Для цього замість motion tweening (анімація руху) слід використовувати shape tweening (анімація форми). Для цього у властивостях першого кадру слід вибрати в списку Tweening значення Shape (Форма). Значення Distributive (Розмитий) параметра Blend (Перехід) дозволяє отримати більш згладжені проміжні кадри; значення Angular (Куглуватий) цього ж параметра дозволяє зберегти в проміжних кадрах кути та відрізки прямих ліній.
Особливість анімації на основі зміни форми полягає в тому, що до об'єкта, що трансформується, не слід застосовувати операцію угруповання, як це робиться при створенні анімації руху. Найкращий візуальний ефект при трансформації досягається, якщо трансформується лише один об'єкт. Якщо необхідно трансформувати кілька об'єктів, то розташуйте їх в одному шарі.
У Flash MX анімація типу трансформації провадиться аналогічним чином. Особливість полягає в тому, що властивості першого кадру встановлюються на панелі Properties (Властивості).
Цікаві візуальні ефекти виходять, коли під маскою є кілька фонових шарів. Розглянемо випадок, коли потрібно променем ліхтарика висвітлити якесь темне зображення. У нашому прикладі це растрова картинка – фрагмент інтер'єру сільського будинку. Очевидно, що в шарі-масці можна використовувати кругле вікно перегляду, яке імітуватиме світлову пляму. Далі, нам знадобляться два шари, що містять ідентичні зображення, що відрізняються один від одного тільки тим, що одне з них світліше за інше. Ці зображення можна отримати з одного і того ж файлу шляхом корекції яскравості та контрастності в якомусь растровому графічному редакторі, наприклад, у Photoshop. Світле зображення помістимо у шар безпосередньо під шаром-маскою, а темне зображення – у шарі, розташованому ще нижче. Картинки у цих двох шарах мають бути розташовані так, щоб одна повністю накривала іншу. Маскованим буде шар зі світлим зображенням.

Мал. 582. Картинки в різних шарах повинні бути поєднані так, щоб світліша накривала темну

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

Мал. 583. Використання маски для створення ефекту переміщення променя від ліхтарика

Зауважимо, що керувати рухом вікна перегляду маски можна за допомогою сценаріїв, написаних мовою ActionScript. Без сценаріїв не обійтися при створенні, наприклад, меню, що розкриваються.
Інший спосіб створення анімацій на основі масок полягає в тому, що вікно маски залишається нерухомим, а елементи шару, що маскується, переміщуються. Таким чином можна створити, наприклад, ефект зміни пейзажу за вікном поїзда, що рухається, або титри, що біжать. Якщо, скажімо, створити групу з кількох переглядових вікон (кілька областей заливки, згрупованих в один об'єкт), то при відповідному виборі зображення і фону, що маскується, можна створити ілюзію рухомих і змінюються за формою хмар або морських хвиль. Нарешті, можна переміщати одночасно як об'єкти шару, що маскується, так і переглядові вікна.
Розглянемо приклад, в якому маска нерухома, а картинка в шарі, що маскується, переміщається. На вихідній картинці, яка є фоном усієї композиції, зображені дюна та хмарне небо. Ми хочемо, щоб хмари рухалися. З цією метою ми помістили в шар, що маскується, розтягнуте по ширині вихідне зображення, а переглядове вікно маски зробили так, щоб воно збігалося з ділянкою неба на вихідній картинці. Розтягнуте зображення в шарі, що маскується, переміщається по горизонталі. При цьому у вікно маски потрапляє лише небо, а дюна маскується. Ширина розтягнутого зображення має бути такою, щоб до закінчення руху його лівий край збігався з лівим краєм фонової картинки. Звичайно, як зображення, що переміщається можна було б взяти тільки смугу з хмарами, але наш спосіб виявився в даному випадку більш швидким: ми просто скопіювали вихідну картинку в шар, що маскується, і застосували до неї команду Scale.

Мал. 584. Створення ефекту хмар, що пливуть, на основі нерухомого переглядового вікна маски і шару, що переміщається.

Колірні ефекти

Motion tweening дозволяє використовувати різні колірні ефекти стосовно всього символу. Ця можливість відсутня у shape tweening.
У Flash 5.0, щоб застосувати ефект до символу, потрібно виділити цей символ і на палітрі ефектів, що відкривається командою Windows>Panels>Effects, вибрати потрібний ефект (див. малюнки).

Мал. 587. Точне встановлення всіх складових кольору (Advanced)

Мал. 588. Встановлення прозорості (Alpha)

У Flash MX аналогічні ефекти вибираються в списку Color (Колір), що розкривається, на панелі Properties (Властивості).

Мал. 589. Встановлення ефектів на панелі Properties у Flash MX

Приклади анімації

Ряд прикладів створення анімації ми вже розглядали вище, наприклад, у розділах «Пробна анімація», «Напрямні шари» та «Шари-маски». Тут ми наведемо додаткові приклади.

Акваріум

Розглянемо, як на основі одного символу Риба можна зробити Акваріум з безліччю різних рибок. Для цього скористаємося бібліотекою символів, що постачається разом із пакетом Flash 5.0 (команда Window>Common Libraries>Movie Clips). Виберемо символ Fish Movie Clip (Мультфільм «Риба»). Це не просто картинка, а мультфільм, тобто риба переміщається в деякій області. Перенесемо екземпляр цього символу на робочу область редактора. Тепер виділимо його та відредагуємо. Наприклад, змінимо розміри і трохи повернемо, як показано на малюнку. Можна змінити колір та зробити інші трансформації.

Мал. 590. Екземпляр символу з бібліотеки можна модифікувати

Повторимо цю операцію кілька разів, тобто створимо кілька екземплярів символу Риба. Кожен екземпляр повинен «плавати» у своєму окремому шарі. Далі, створимо ще один шар, заллємо його блакитним кольором та намалюємо водорості. В результаті вийде приблизно те, що показано на малюнку.

Мал. 591. У робочій області розташовано кілька екземплярів символу «Риба», що відрізняються розмірами, кольором та початковим положенням. «Ворості» намальовані вручну у шарі Фон

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

Мал. 592. Кадр мультфільму, створеного шляхом композиції фрагментів растрової графіки

Обертання планет навколо Сонця

Розглянемо тепер обертання трьох планет – Меркурія, Венери та Землі – навколо Сонця. Цей дуже повчальний і красивий приклад описаний Олександром Рибніковим на сайті http://zona5.al.ru. Детально, крок за кроком опишемо процес створення мультфільму.
Крок 1. Створимо новий файл. Виконаємо команду Modify>Movie і в діалоговому вікні вкажемо фізичні розміри області в пікселах. Не будемо себе обмежувати, Flash-мультфільми добре виглядають у повноекранному варіанті, тому задамо розмір кадру 800x600. За промовчанням швидкість зміни кадрів мультфільму встановлюється 12 кадрів/с. В даному випадку розумно це число збільшити до 16, тому що інакше зображення помітно смикається.
Крок 2. Намалюємо спочатку Космос. Для цього просто окреслимо робочу область прямокутником та заллємо його чорним кольором.
Крок З. Тепер у центрі нашого Всесвіту необхідно помістити Сонце. Постарайтеся зобразити його більш-менш правдоподібно, тобто намалювати не просто якесь червоне коло, а ще й нанести на нього трохи несиметричний градієнт, що має надати вашому твору деякої об'ємності, а потім оточити Сонце ореолом, що світиться, що додасть правдоподібності. Усього перерахованого можна досягти як засобами самого редактора Flash, так і імпортувати вже готову картинку з будь-якого растрового графічного редактора. Але другий спосіб у нашому випадку вкрай недоцільний, оскільки Сонце є досить великим об'єктом, і якщо воно буде представлене у вигляді растрового зображення, значно збільшиться обсяг вихідного файлу. Розглянемо, як намалювати Сонце засобами Flash.
Намалюємо коло, для заливки в списку зі зразками кольорів виберемо будь-який градієнт. За допомогою команди Window>Panels>Fill (Вікно>Палітри>3аливка) відкриємо діалогове вікно, яке дозволить задати значення кольорів градієнта. Нехай Сонце буде залито яскраво-жовтим кольором, що плавно переходить у яскраво-червоний. Ореол зробимо аналогічним чином, підклавши коло більшого розміру, забарвлене градієнтом із червоного кольору в чорний. Важливо, щоб Сонце було точно в центрі, тобто координати центру повинні бути (400,300).
Крок 4. Настав час малювати три планети. Важливо, що вони досить маленькі, тому в даному випадку можна імпортувати растрове зображення у форматі прозорого GIF (точніше, малюнок із прозорим фоном). Таке зображення повинне займати не більше 500 байт дискового простору. Імпортування здійснюється в такий спосіб.
Спочатку потрібно створити новий шар командою Insert>Layer (Вставити>Шар). Для кожної планети потрібно окремий шар, тому шари має сенс назвати іменами планет. Далі у цьому шарі необхідно створити новий символ (команда Insert>Symbol (Вставити>Символ)). У меню File виберемо команду Import та імпортуємо потрібне GIF-зображення.
Крок 5. Після цього створений символ потрібно помістити у шар. Для цього відкриємо бібліотеку символів (команда Window>Library (Вікно> Бібліотека)) та перетягнемо звідти символ із зображенням планети в робочу область (сцену).
Крок 6. Зазначимо, що планети повинні згодом обертатися навколо Сонця. Центру сцени. Тому треба знову повернутися до редагування символу (2 рази натиснути на планеті) і вказати в діалоговому вікні Info (команда Window>Info) віддаленість його від центру. Вибрано віддаленість по горизонтальній осі (всі ці значення негативні, тобто спочатку планети розташовуються зліва від Сонця):

• для Землі: - 250 пікселів;
• для Венери: - 180 пікселів;
• для Меркурія: - 120 пікселів.

Стаціонарна картинка готова! Вона має бути якомога більше схожа на наступний малюнок:

Мал. 593. Стаціонарна сцена: Сонце та три планети, розташовані ліворуч від нього

Крок 7. Тепер змусимо наші планети обертатись проти годинникової стрілки навколо Сонця. Відомо, що ті планети, які знаходяться ближче до Сонця, обертаються швидше. Спробуємо кількість кадрів мультфільму розрахувати таким чином, щоб Земля за один цикл робила один оберт, Венера – два, а Меркурій – три. Оптимальним числом кадрів, кратним двом, трьом і чотирьом, є число 120. Було б негарно, якби всі планети в якийсь момент часу ставали в ряд. Тому задаємо початковий кут розташування планет:

• для Землі – 150°;
• для Венери – 120°;
• для Меркурія – 0°.

Ці дані можна задавати та змінювати у діалоговому вікні Info.
Крок 8. Тепер створимо перший ключовий кадр для будь-якої планети, наприклад, для Землі. Для цього клацнемо на першому кадрі відповідного шару правою кнопкою миші і в меню виберемо команду Create Motion Tween. Потім скопіюємо цей кадр у буфер обміну (Сору) і вставимо його (Paste) на місце кадру з номером 60. Потім повернемо Землю на кут 180, тобто вкажемо значення кута у вікні Transform рівним -30 (див. рисунок). Наступним ключовим кадром буде 90-й (поворот на 90°) і останній ключовий кадр - 120-й (повний оборот Землі навколо Сонця завершений).

Мал. 594. Розробка анімації у мультфільмі з Сонцем та планетами

Крок 9. Аналогічно ми можемо задати рух Венери та Меркурія. Щоб встановити рух Венери, потрібно вдвічі більше опорних кадрів, для Меркурія - втричі. При цьому можна копіювати одразу кілька кадрів. Тому в діалоговому вікні достатньо встановити кути тільки для одного обороту кожної з планет.
Крок 10. Залишається тільки опублікувати отриману сцену (команда File>Publish) і насолодитися отриманим ефектом.
Об'єм SWF-файлу виявився меншим за 10 Кбайт. Навіть не анімований GIF або JPG-файл зайняв би набагато більше місця на диску. А наш мультфільм тривалістю 7,5 с має об'єм лише 10 Кбайт!

Звук у мультфільмах

До мультфільму можна додати звуковий супровід. Для цього необхідно спочатку імпортувати звуковий файл в одному із таких форматів: WAV, AIFF або МРЗ. Імпорт здійснюється за допомогою команди File>Import (Файл>Імпорт).
Звуковий супровід може прикрасити мультфільм. Однак багато користувачів нерідко воліють відключити звук. Тому непогано, розробляючи озвучений мультфільм, передбачити в ньому кнопку для вимикання звуку. Цій кнопці слід призначити дію Stop All Sounds (Припинити всі звуки) (подібні дії, що призначаються об'єктам, ще називають Action або сценарієм). Звуковий файл має такі параметри, які впливають як на якість звуку, так і обсяг файлу:

• Частота дискретизації (Sample rate).Кількість вибірок із звукового сигналу, що виробляються за одну секунду. Зазвичай ця величина не перевищує 22 кГц, що відповідає смузі частот 11 кГц (за теоремою Котельникова ширина смуги частот, що відтворюються, дорівнює половині частоти дискретизації).
• Бітовий дозвіл (Bit resolution).Кількість бітів (двійкових розрядів), що використовуються для дискретизації звукового сигналу за рівнем. 16-бітові файли характеризуються меншим фоновим шумом, але для зменшення обсягу файлу у Flash-мультфільмах зазвичай використовують 8-бітовий звук.
• Канали (Channels). Звук може бути одно- та двоканальний (моно та стерео). Для Flash-мультфільмів зазвичай достатнім є монозвук, що вимагає приблизно вдвічі менше пам'яті, ніж стереозвук.

При розробці мультфільму можна використовувати високоякісні звукові файли, а потім, при публікації у файл SWF-формату, встановити потрібні параметри звуку.
Щоб імпортувати звуковий файл у мультфільм, виконайте команду File>Import і в діалоговому вікні Import, що відкрилося, виберіть файл звукового формату, який хочете імпортувати. Потім натисніть кнопку Open (Відкрити). В результаті вибраний звуковий файл потрапить до бібліотеки мультфільму.
Після імпортування звукового файлу до мультфільму його потрібно розмістити та задати параметри. Виконайте таке:

1. Створіть новий шар звукового файлу.
2. Виділіть потрібний ключовий кадр на цьому шарі, відкрийте бібліотеку (Window>Library) і перетягніть звуковий файл на робоче поле. При цьому звуковий файл буде поширений на всі кадри до наступного ключового кадру, якщо такий є.
3. У Flash 5.0 виконайте команду Wmdow>Panels>Sound (Вікно>Палітри>Звук). Відкриється панель Sound (Звук). У Flash MX зверніться до панелі Properties (Властивості). У розкривному списку Sound виберіть потрібні звуки. У цьому списку наведено всі імпортовані звукові файли. Відомості про файл наведені нижче списку під назвою файлу: частота дискретизації в кГц, канали, роздільна здатність, тривалість звучання і розмір файлу.
4. У розкривному списку Effect (Ефект) за бажанням виберіть звуковий ефект. За замовчуванням використовується None (Ні). Наприклад, ефект Fade In (Наростання) відтворює звук із поступовим збільшенням гучності.
5. У розкривному списку Sync (Синхронізація) виберіть одне з таких значень:
   • Event (Подія). Починає відтворення звуку з першого ключового кадру і продовжує до закінчення файлу, навіть якщо мультфільм закінчився. Це значення використовується за умовчанням.
   • Start (Почати). Починає відтворення звуку першого ключового кадру. Однак, якщо ключовий кадр знову відтворюється під час звучання, Flash починає програвати звук знову. Це значення зазвичай використовується для озвучування кнопок.
   • Stop (Зупинити). Зупиняє відтворення звуку.
   • Stream (Потік). Синхронізує звук із анімацією. Flash укорочує або подовжує анімацію, щоб вона збіглася зі звуком. Відтворення звуку припиняється під час відтворення останнього кадру, що містить звук. Щоб вказати місце закінчення звучання, можна додати заключний ключовий кадр перед додаванням звуку.
6. У полі Loop (Цикл) вкажіть кількість циклів повторення відтворення звуку. Якщо відома тривалість звукового файлу, кількість циклів анімації та частота відтворення кадрів, можна розрахувати, скільки циклів відтворення звуку знадобиться під час відтворення вашої анімації. Наприклад, якщо анімація містить 48 кадрів, які частота відтворення дорівнює 12 кадрів/с, то тривалість мультфільму становить 4 з; якщо тривалість звукового файлу дорівнює 2 з, кількість циклів відтворення звуку дорівнює 2. Насправді, ніж займатися обчисленнями, зазвичай вказують явно більше циклів.
7. Після додавання звукового файлу, щоб переглянути результати, натисніть клавішу або виконайте команду Control>Play (Керування> Відтворити).

Після розміщення звукового файлу у мультфільмі його можна відредагувати. Наприклад, можна видалити непотрібні фрагменти звуку, змінити його гучність. Для цього на панелі Sound клацніть на кнопці Edit (Редагувати). В результаті відкриється вікно Edit Envelope (Редагувати огинаючу).
Між панелями лівого та правого звукових каналів знаходиться лінійка з повзунками, за допомогою яких можна встановити початок та кінець звукового файлу. Переміщуючи лівий повзунок праворуч, видаляємо початковий фрагмент файлу. Аналогічно зрушуючи правий повзунок, видаляємо кінцевий фрагмент звукового файлу.
На панелях лівого та правого каналів відображаються лінії, що огинають, які приблизно вказують напрямок зміни гучності звуку. У місцях, де це відбувається, встановлюються квадратні маркери огинаючої. Щоб збільшити гучність, перетягніть маркер вгору, щоб зменшити гучність вниз. Огинальної лінії можна надати химерну форму. Для цього слід спочатку клацаннями на огинаючій встановити додаткові маркери, а потім перетягнути їх у потрібні місця.
Після закінчення редагування звукового файлу клацніть на кнопці ОК, щоб закрити вікно Edit Envelope.

Мал. 595. Вікно Edit Envelope

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

• Для визначення властивостей всіх звукових файлів мультфільму використовуйте вкладку Flash діалогового вікна Publish Settings (Параметри публікації), яке відкривається командою File>Publish (Файл>Публікація). Цей спосіб є хорошим, якщо мультфільм містить один або кілька схожих звуків.
• Для встановлення властивостей окремих звукових файлів використовуйте діалогове вікно Sound Properties (Властивості звуку). Для цього спочатку відкрийте бібліотеку мультфільму (Window>Library) та двічі клацніть на значку звукового файлу, властивості якого хочете змінити. У верхній частині діалогового вікна відображаються відомості про звуковий файл. Нові значення параметрів можна вибрати в списках групи Export Settings (Параметри експорту). При цьому в нижній частині діалогового вікна відображається новий розмір файлу в кілобайтах та відсотках від початкового розміру. Ви можете використовувати формат стиснення (compression) MP3 як найкращий із наявних у Flash.

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

1. На часовій діаграмі кнопки додати шар, в якому ви розміщуватимете звуки.
2. У звуковому шарі створіть ключовий кадр, який відповідає стану кнопки, яку ви хочете озвучити.
3. Перейдіть до цього ключового кадру та встановіть параметри звуку.

Мультфільм композиція - сцени і кліпи

Мультфільм може складну структуру (композицію). Так, окремі елементи одного мультфільму можуть бути мультфільмами. У розглянутому вище прикладі з акваріумом риби були різні екземпляри символу типу Movie Clip, тобто були мультфільмами. Кожен мультфільм має свою тимчасову шкалу, яка керує його відтворенням. Якщо мультфільм входить складовою до іншого мультфільму, то щоб підкреслити цю обставину, його називають кліпом. У свою чергу, кліп може містити інші кліпи.
Для управління безліччю елементів кліпу їх зазвичай розподіляють шарами. Багатошарову структуру використовують при створенні практично будь-якого більш менш складного об'єкта, чи то просто малюнок або ціла анімація.
Крім декомпозиції мультфільму (кліпу) на шари, можна розділити його на тимчасові відрізки, тобто на сцени. Потім ці сцени можна розташовувати у довільному порядку. Підстави для розбиття мультфільму на сцени можуть бути:

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

При створенні нового мультфільму (File>New) за замовчуванням створюється лише одна сцена під назвою Scene 1 . При цьому будь-яка анімація стає частиною цієї сцени. Щоб додати сцену, виконайте команду Insert>Scene (Вставити>Сцена). При цьому робоче поле очиститься і над шкалою ліворуч з'явиться інша назва - Scene 2.

Мал. 596.

Якщо ваш мультфільм містить кілька сцен та кліпів, то для відображення на робочому полі потрібних сцени та кліпу скористайтеся відповідними кнопками меню. Вони розташовані над (Flash 5.0) або під (Flash MX) тимчасовою шкалою праворуч.
Для завдання параметрів сцени виконайте команду Window>Panels>Scene (Вікно>Палітри>Сцена). У Flash MX ця команда коротша: Window>Scene (Вікно>Сцена). На панелі Scene, що відкрилася, відобразиться список всіх сцен даного мультфільму. Порядок сцен у списку важливий, оскільки саме так вони відтворюватимуться. Щоб його змінити, просто перетягніть назву сцени в нове положення. Щоб змінити назву сцени, двічі клацніть на ній, введіть нову назву та натисніть клавішу .

Мал. 597. Палітра Scene. У нижній частині панелі розташовані три кнопки для дублювання, додавання та видалення сцени

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

У першому уроці базового міні-курсу «Основи анімації в Actionscript 3.0» ви дізнаєтесь про те:

1. Що таке анімація
2. Як досягти ілюзії руху за допомогою кадрів
3. Про можливості покадрової анімації
4. Про особливості та переваги програмної анімації

Adobe Flash є своєрідною машиною для анімації. Вже у своїх перших версіях він створював її за допомогою концепції Tween . Вона являє собою таке:

• на шкалі часу створюються два ключові кадри з різним змістом (змінюються положення об'єктів, їх форма, колір тощо);
• всі проміжні (перехідні) кадри Flash створює самостійно (рис. 1).

Ось як це виглядає у програмі Adobe Flash CS6.

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

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

Що таке анімація?

Отже, чим, по суті, є анімація? Визначення цього поняття можна знайти у багатьох словниках. Ось, наприклад, одне з них, яке дає Wikipedia:

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

Але об'єкт не обов'язково повинен змінювати своє становище для того, щоб вважатися анімованим. Він може легко змінити свою зовнішню форму. У 90-х роках (страшно сказати, минулого століття!) були популярні комп'ютерні програми, які робили морфінг.

Наприклад, у вас є дві картинки: дівчина та тигр. Програма створює плавний перехід/анімацію між ними (морфінг).

Під час створення цього флеш-ролика використовувалася програма Sqirlz Morph 2.1

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

Прив'язка до часу анімації - це важлива концепція.

Без видимого руху чи зміни анімації немає, а отже, відсутнє і відчуття часу у глядача!

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

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

Все сказане вище підводить нас до дуже важливого висновку: анімація, рух викликають у нас зоровий інтерес.

Усі пам'ятають картину Леонардо да Вінчі «Мона Ліза» - шедевр живопису, одну із найвідоміших картин у світовій історії мистецтв.

Можна з великою ймовірністю припустити, що звичайна людина занудьгує вже після декількох хвилин огляду і дуже скоро почне шукати наступний об'єкт для «вивчення». Але, почніть показувати йому останній голлівудський блокбастер і він не помітить як пролетить кілька годин. Ось у чому сила анімації!

Як створюється ілюзія руху у покадровій анімації

Давайте на секунду повернемося до визначення анімації, з якою ми познайомилися вище:

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

Автори подібних визначень змушені вводити у них слово ілюзія. Часто відбувається так, що тільки ілюзія руху і існує в тих видах мистецтва або носіях, з якими ми стикаємося в житті. Тому тут саме час запровадити концепцію кадрів.

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

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

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

Тоді чому ми маємо називати це ілюзією руху?

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

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

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

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

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

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

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

Концепція кадрів уможливлює три речі:

• зберігання
• передачу
• і показ

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

Настав час дати більш загальне визначення кадру. Досі, говорячи про нього, ми мали на увазі фотографію, картинку або малюнок. Тепер давайте рахувати наступним чином: кадр - це запис системи у певний момент часу.

Цією системою може бути:

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

Програмування кадрів

Оскільки комп'ютер може вважати «на льоту», ви маєте можливість обійтися без довгого списку описів для кадрів. Ви можете спростити все, описавши лише перший кадр і встановивши правила зі створення всіх наступних кадрів. Тепер комп'ютер не просто створює картинку з опису, а:

• спочатку створює опис,
• потім генерує картинку на основі цього опису
• і наприкінці показує цю картинку.

Тільки уявіть собі скільки місця ви могли б заощадити, використовуючи такий підхід! Картинки завжди займають пристойний обсяг дискового простору та пропускну здатність мереж. А 24 картинки за секунду можуть стати просто «непідйомними». Якщо вам вдасться звести все до одного опису та визначення правил, у вас з'являється можливість зменшити розмір файлу в сотні разів.

У 90 випадках зі 100 навіть найбільша об'ємна програма з правилами того, як об'єкти повинні рухатися і взаємодіяти займає менше місця, ніж одна картинка середнього розміру. Тому, один із перших ефектів, який був відзначений при вивченні програмної анімації – це її економічність з погляду розміру файлу.

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

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

Переваги програмної анімації

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

Ви, мабуть, дивилися фільм «Термінатор 2: Судний день». Наприкінці фільму, щоразу Термінатор зникає у плавильному котлі із фразою «I'll be back». Він робить це у кінотеатрах, по телевізору та на DVD. Навіть натискаючи на кнопку "Стоп" або "Пауза", ви не в змозі його зупинити. І це тому, що звичайний фільм - це не більше ніж послідовність картинок. Наприкінці цього фільму вони (картинки) показують зникаючого в пеклі Термінатора і це все, на що вони здатні.

Тепер перейдемо від Термінатора до звичайного флеш-сайту. Наприкінці 90-х, коли Flash стрімко набирав свою популярність, тільки лінивий не хотів використати його можливості у себе на сайті:

• рухомі, що з'являються та зникаючі форми;
• супроводжуюча музика;
• раптово вискакуючий заклик до чогось;
• пляма світла або тіні, що з'являється.

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

За тривалістю анімація на них була трохи більше хвилини. Цього вистачало тільки на те, щоб я переглянув їх три рази поспіль. Вони що були поганими? Ні, просто після кількох переглядів увага слабшала, тому що дивитися вже було більше нічого, як у фільмі про Термінатора. І тут можна говорити про певний парадокс - у фільмах такого роду анімація не змінюється, кожен кадр, від першого до останнього наперед визначений.

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

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

Але є третій варіант. Після запуску ролика визначатиметься час дня, місяць і рік і на підставі цих даних будуватиметься сцена, наприклад, зимовий ранок, літній опівдні чи вересневий вечір?

А ось і четвертий. Під час фільму, глядач, за допомогою миші чи клавіатури, за власним бажанням, міг би змінювати деякі чинники? Це дозволило йому взаємодіяти з об'єктами на сцені. Такий фільм був би вже далеко не таким, яким ми його звикли бачити, правда? Можна було б навіть врятувати Термінатора!

Віртуальна реальність

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

Після цього ви могли б дозволити користувачеві взаємодіяти з ним:

• «взяти» його мишею
• або переміщення за допомогою клавіатури.

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

Ви можете переконатися в цьому самі, погравши з червоним м'ячем нижче.

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

Підсумки

У цьому вступному уроці ми обговорили:

• основи анімації;
• відмінності покадрової та програмної анімації;
• основні переваги динамічної анімації

Це концептуальні, базові знання, на основі яких будуватиметься весь наступний матеріал безкоштовного міні-курсу «Основи анімації в Actionscript 3.0».

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

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

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

До зустрічі у наступному уроці!

Будь ласка, увімкніть JavaScript, щоб побачити коментарі.

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

До цієї збірки увійшли 50 веб-сайтів тривимірної Flash-анімації, які дійсно виділилися на загальному тлі, привернули до себе небувалу увагу і отримали нагороди! Перед вами не просто черговий список – ці веб-сайти підкажуть вам безліч ідей, адже кожен із них – шедевр!

Цей сайт настільки незрівнянний, що важко описати словами! Дуже красива заставка, за якою вам відкриваються шикарні зразки тривимірної анімації на просто чудовій веб-сторінці.

Класний веб-сайт з красивими тривимірними об'єктами та анімованими фрагментами. Кожну сторінку прикрашають власні тривимірні "родзинки".

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

Простий, але дуже красивий веб-сайт із тривимірним меню та такими ж переходами.

Симпатичний веб-сайт з чудовими тривимірними повітряними кулями та чудовою анімацією. Є в нього і ще дещо особливе - за відсутності будь-яких дій з боку користувача протягом деякого часу, у людини-мотора закінчується пальне, і він падає з неба - все це як цікавий анімований фрагмент. Цей сайт був відзначений нагородою FWA як найкращий сайт дня.

Це ще що? А це Coca Cola! Веб-сайт дуже оригінальної конструкції, що складається з безлічі окремих підсайтів, кожен з яких відрізняється від інших своїми оформленням, ескізом та анімацією.

Чудово побудований веб-сайт. Відмінний тривимірний підводний простір. Веб-сайт відзначений нагородою FWA як "найкращий сайт дня".

Дуже елегантний веб-сайт із тривимірною графікою та анімацією. Тривимірні переходи теж чудові.

Незрівнянне тривимірне меню. Дане тривимірне портфоліо є чудовим зразком стилю під назвою "мінімалізм".

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

Прекрасний тривимірний веб-сайт із відмінними ефектами передачі обсягу. Просто диво. Веб-сайт відзначений нагородою FWA як "найкращий сайт дня".

Цікавий веб-сайт на Flash-основі із чудовою Flash-заставкою та масою тривимірних елементів.

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

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

Гарний веб-сайт. Все навколо тривимірне і дуже чуйно реагує на переміщення миші.

Прекрасний і простий веб-сайт з тривимірним об'єктом у середині сторінки.

Чудово побудований веб-сайт. З відмінною тривимірною анімацією та міжсторінковими переходами. Здорово й те, що кожна сторінка керується рухами миші. Веб-сайт відзначений нагородою FWA як "найкращий сайт дня".

Веб-сайт соціальної мережі, де можна створити власний неповторний тривимірний портрет. Чудова ідея, добре втілена засобами тривимірної обробки.

Симпатична тривимірна фотогалерея з чудово відтвореним відображенням. Суворо і просто.

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

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

Зразкова робота! Прекрасне тривимірне меню та анімовані фрагменти. Навіть 4 варіанти об'ємного відображення меню на ваш вибір.

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

Простий в оформленні веб-сайту з тривимірним меню навігації у вигляді планети. Гарний приклад застосування бібліотеки Papervision3D.

Відмінне виконання. Повністю тривимірна конструкція. З однієї сторінки на іншу переходиш, як із кімнати до кімнати. Тривимірна анімація високої якості.

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

Дуже цікавий корпоративний веб-сайт із тривимірною анімацією. Ескіз теж карколомний. Відмінна робота.

Цікавий веб-сайт з безліччю тривимірних об'єктів, які можна крутити.

Суворий і простий в оформленні веб-сайт із тривимірною анімацією, краса!

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

Компактний веб-сайт із тривимірними ефектами, який виглядає чудово. Веб-сайт відзначений нагородою FWA як "найкращий сайт дня".

Веб-сайт на Flash-основі, меню якого має дуже цікавий тривимірний ефект. Гарні тривимірні переходи.

Суворий та простий у оформленні тривимірний веб-сайт. Дуже добре сконструйований. Веб-сайт відзначений нагородою FWA як "найкращий сайт дня".

Подібність тривимірної фільмотеки з красивими тривимірними переходами. Усі анімовані фрагменти відтворюються дуже плавно. Відмінна робота.

Простий та строгий в оформленні тривимірний веб-сайт.

Цікавий спосіб нанесення малюнків – розміщуйте їх у центрі зоряного неба! Шикарний тривимірний простір. Може послужити і милим маленьким подарунком вашій подругі/другу (в сенсі, ваш малюнок на ньому) – їй точно сподобається. Веб-сайт відзначений нагородою FWA як "найкращий сайт дня".

Симпатичний веб-сайт з дуже вражаючим тривимірним навігаційним меню. Просто натисніть кнопку "Перегляд" ("Browse") праворуч на сторінці і побачите тривимірне меню навігації.