Adobe flash і виготовлення своїх анімованих зображень в ній (робота з текстом і приємним деякі ефекти)

Відео: Рух камери в Adobe Flash. Анімація. / VideoForMe - відео уроки

Приступаємо до освоєння нових можливостей. На лівій панелі вибираємо інструмент "Text». Щелкнем мишкою в будь-якому місці робочого поля і напишемо який-небудь текст, наприклад, «FLASH ANIMATION».

Відео: Растрове зображення в Векторное в редакторі Adobe Flash

Введений текст можна змінювати. Майже як в стандартному текстовому редакторі. Виділимо текстовий блок мишкою і звернемо увагу на закладку «Properties» в нижній частині вікна. Спробуємо змінити накреслення і розмір шрифту, колір ... Всі основні параметри тексту знаходяться тут. Іноді потрібно збільшити відстань між буквами. Це нескладно зробити. В поле «A V» зі списку вибираємо потрібне значення або вносимо його вручну. Якщо ми хочемо розмістити текст (або будь-який інший об`єкт) по центру робочої області, то доведеться включити додаткову панель вирівнювання. Входимо в меню «Window» і вибираємо пункт «Align». Панель «Align» з`явилася в списку панелей праворуч. Клацнувши мишкою по заголовку, ми викличемо вікно з усіма функціями. Пункт «To Stage» ( «До виділеного об`єкту») вже включений. Тепер залишилося вирівняти текст по центру. Для цього натискаємо на кнопки «Align horizontal center» і «Align vertical center». Після внесення змін можна закрити панель. Давайте спробуємо використовувати ефект роботи з прозорістю. Об`єкт (в даному випадку текст) на заданому кадрі буде ставати прозорим до повного зникнення, а потім знову з`являтися. Ця трансформація відбуватиметься протягом 20 кадрів. Працюватимемо поступово. Отже, на десятому кадрі створимо ключову позначку. Для цього клацаємо правою кнопкою мишки на десятому кадрі і вибираємо пункт «Insert Keyframe». Тепер вказуємо, що протягом цього фільму відбуватимуться зміни (рух). Для цього зазначимо клацанням миші шар з текстом. А потім натискаємо правою кнопкою мишки в будь-якому місці виділеної області і в меню вибираємо пункт «Create Motion Tween». До речі, послідовність створення кадрів може бути іншою. Можливо, буде зручніше спочатку створити рух ( «motion tween»), а потім вставляти ключові кадри ( «keyframe»). Переходимо на останній кадр і інструментом «Selection Tool» відзначаємо текст. Спробуємо зробити його невидимим. Для цього нам буде потрібно управляти настройками кольору по alfa-каналу. На панелі додаткових опцій в нижній частині вікна програми зі списку «Color» вибираємо пункт «Alfa». Переконаємося, що у нас відзначений останній кадр. Саме на ньому зображення стане прозорим (невидимим). В поле «Alfa Amount» встановлюємо значення ефекту в 0% (повна прозорість). Напис зникла на робочому полі. Подивимося на результат наших дій. Для цього клацнемо мишкою по першому кадру і натиснемо клавішу «Enter» на клавіатурі. Запуститься програвання анімації. Збережемо вихідний файл. Входимо в меню «File» і вибираємо пункт «Save As ...». Відкриється стандартне вікно збереження файлу. Вибираємо зі списку потрібний каталог (папку) і вносимо назву файлу. Після цього натискаємо кнопку «Зберегти». Якщо ми захочемо змінити текст і його параметри (колір, накреслення і т.д.), то нам доведеться відкрити розділ редагування. Клацаємо правою кнопкою мишки по тексту і в меню вибираємо пункт «Edit». Тут ми можемо внести будь-які зміни. Наприклад, змінимо колір тексту на синій. Для повернення в редагування анімації натискаємо кнопку «Edit Scene» і зі списку вибираємо «Scene 1». Половина нашого фільму готова. Напис плавно зникає на останньому кадрі. Давайте додамо останню частину фільму і змусимо напис з`явитися знову. Клацаємо правою кнопкою мишки по двадцятому кадру і в меню вибираємо пункт «Insert Keyframe». Нам не потрібно вказувати додатково, що у нас будуть відбуватися зміни. Програма враховує це автоматично. Тепер у нас зворотна ситуація. Ми будемо працювати з альфа-каналом, але значення прозорості зображення потрібно встановити 100%. У цьому випадку об`єкт знову стане видимим. Переходимо на останній кадр, виділяємо текст і в поле «Alfa Amount» встановлюємо потрібне значення. Анімація готова! Запустимо програвання. Пам`ятайте, як це робиться? Встановлюємо покажчик на перший кадр клацанням миші і натискаємо клавішу «Enter». Вихідний файл у нас є, але буде непогано зберегти і зміни. Входимо в меню «File» і на цей раз обираємо пункт «Save». У цьому випадку файл анімації збережеться під уже наявним іменем. Для того щоб створити і переглянути HTML-файл з уже включеною в нього анімацією в форматі «Flash», натискаємо клавішу «F12» на клавіатурі або входимо в меню «File» і вибираємо пункт «Publish Preview» - «Default».

У програмі «Flash» ми освоїли прості рухи фігур. Смайлик рухався по прямій лінії, заголовок з текстом стояв на одному місці. Тепер нам належить рух об`єктів по складних траєкторіях. Наприклад, спробуємо зробити банер з плаваючим по хвилях корабликом. Як і зазвичай, створюємо новий чистий файл натисканням кнопки «Flash File (ActionScript 3.0)». У редакторі векторної графіки, такому як CorelDRAW !, ми підготували зображення простого парусника і зберегли його в формат WMF. Тепер його потрібно імпортувати в новий файл програми Flash. Входимо в меню «File» - «Import» - «Import to Stage» і у вікні, вибираємо потрібний каталог. Відзначаємо файл клацанням миші і натискаємо кнопку «Відкрити». На робочому полі програми з`явився симпатичний кораблик. Оскільки картинка створена в редакторі векторної графіки, зараз кожен її елемент являє собою окремий об`єкт. Об`єднаймо всі елементи для більш комфортної роботи. Виділяємо всі частини зображення, входимо в меню «Modify» і вибираємо пункт «Group». Тепер кораблик являє один об`єкт. Зображення трохи завеликий, тому зменшимо розмір кораблика. На лівій панелі вибираємо інструмент «Free Transform Tool». Утримуючи клавішу "Shift" на клавіатурі, захоплюємо мишкою будь-яку з кутових міток і рухом по діагоналі зменшуємо розмір картинки. Не забуваємо, що те ж саме можна зробити, внісши значення в поля «W» (ширина) і «H» (висота) на панелі «Properties» в нижній частині вікна. Потім помістимо кораблик в ліву частину робочої області. Наше наступне завдання - змусити кораблик рухатися по вигнутій лінії. Для цього ми спочатку повинні її намалювати. Для позначення траєкторії руху існують спеціальні шари. Створимо такий шар з меню «Insert» - «Time Line» - «Motion Guide». На панелі управління анімацією з`явився новий шар «Guide: Layer 1». Слова «Layer 1» в назві цього поля говорять про те, що ми будемо створювати траєкторію руху для об`єкта, що знаходиться на шарі «Layer 1». Щоб зображення кораблика нам не заважало малювати лінію, тимчасово відключимо його. Для цього клацаємо по точці, яка знаходиться в рядку шару «Layer 1» під зображенням очі. Можна приступити до позначення траєкторії руху. На лівій панелі вибираємо інструмент «Pen Tool». Малювання вигнутих ліній в програмі Flash схоже на малювання ліній Безьє в програмі CorelDRAW !. Клацаємо лівою кнопкою мишки в тому місці, де кораблик почне свій шлях. Відпускаємо кнопку. Зміщуємося трохи в сторону і клацаємо ще раз. Тепер, не відпускаючи кнопку мишки, згинає лінію до потрібного результату. І відпускаємо кнопку. Зміщуємося ще трохи вправо, ставимо крапку і згинає лінію так, як нам потрібно. Якщо раніше вам не доводилося малювати таким способом, то потренуйтеся небагато - і ви освоїте цю нескладну техніку. Її використовують майже у всіх редакторах векторної графіки. Потім ми ставимо ще кілька точок, згинаючи лінії, і виводимо лінію за межі банера. У цьому випадку наш кораблик зникне з картинки зовсім в кінці програвання анімації. Що робити, якщо лінія вийшла не зовсім вдала? Вибираємо на лівій панелі інструмент «Subselection Tool». А далі виправляємо дефекти. Захоплюємо мишкою точку вигину лінії і рухаємо в потрібному напрямку. При необхідності можна змістити і всю траєкторію. Просто захоплюєте її курсором мишки поза точки вигину і плавно рухаєте. Траєкторія готова. Зробимо тривалість нашого фільму приблизно 30 кадрів. Позначимо ключову позначку на шарі «Guide: Layer 1». Клацаємо правою кнопкою мишки на тридцятому кадрі і в меню вибираємо пункт «Insert Keyframe». На відміну від попередніх прикладів тут нам не потрібно відзначати рух кадрів ( «Motion tween»). Всі кадри шару траєкторії будуть статичними, адже сам шлях змінюватися не буде. Тепер можна включити зображення кораблика. Захоплюємо його лівою кнопкою мишки і підтягаємо до початку шляху. Ви відчуєте, що картинку «притягує», як магнітом, до намальованої траєкторії. Тепер позначимо кінцеву ключову позначку на шарі «Layer 1». Переходимо на 30-й кадр і клацаємо правою кнопкою миші. У меню, вибираємо пункт «Insert Keyframe». Захоплюємо кораблик і підтягаємо його до останньої точки траєкторії, поки він не «прімагнітілась» до лінії. А ось тепер нам обов`язково потрібно вказати, що кораблик буде рухатися вздовж всієї траєкторії. Пам`ятайте, як це робиться? Відзначаємо мишкою шар «Layer 1» і на виділеній чорним кольором області клацаємо правою кнопкою мишки. Зі списку вибираємо пункт «Create Motion Tween». Що ж у нас вийшло в результаті? Програємо анімацію. Щоб лінія траєкторії не заважала сприйняттю, відключимо її зображення в рядку шару «Guide: Layer 1». Для цього необхідно клацнути по точці під зображенням очі. Лінія зникла. Переходимо на перший кадр і натискаємо клавішу «Enter». Ми виявили маленький недолік. Кораблик в середині шляху частково знаходиться за межами банера. Це особливо помітно на 13-му кадрі. Підкоригуємо траєкторію руху. Вибираємо інструмент «Subselection Tool». Не забуваємо відзначити показ лінії шляху нашого кораблика. Захоплюємо мишкою потрібну точку вигину лінії і піднімаємо її трохи вище. Перейдемо на перший кадр і запустимо анімацію. Тепер все буде в порядку. Збережемо результат роботи. Входимо в меню «File» - «Save As ...», у вікні, вибираємо каталог для збереження, вказуємо назву файлу і натискаємо кнопку «Зберегти». Щоб створити і переглянути HTML-файл з анімацією, натискаємо на клавішу «F12» на клавіатурі. Або входимо в меню «File» - «Publish Preview» - «Default».

У програмі Flash ми освоїли основні навички роботи з анімацією. Тепер перед нами буде стояти більш конкретне завдання. Уявімо, що нам потрібно зробити банер, який рекламує сайт туристичної фірми. Звичайно, в банері повинні бути картинки, текст і можливість переходу на сайт з додатковою інформацією. Для створення такого банера ми будемо використовувати не тільки старі навички, а й освоювати нові можливості. Отже, створюємо новий файл клацанням миші по пункту «Flash File (ActionScript 3.0)». У нас є досить симпатичний кораблик. Імпортуємо знайоме зображення в новий файл. Входимо в меню «File» - «Import» - «Import to Stage», вибираємо потрібний каталог, відзначаємо файл і натискаємо кнопку «Відкрити». Кораблик розмістився на робочому полі програми. Нам необхідно об`єднати всі елементи зображення. Виділяємо всю картинку одночасним натисканням клавіш «Ctrl» + «A», а потім входимо в меню «Modify» і вибираємо пункт «Group». Кораблик занадто великий за розміром. Зменшимо його (інструмент «Free Transform Tool») і поставимо в лівий верхній кут. Як і в попередньому прикладі, наша задача - створити кораблик, що пливе по хвилях. Для цього вказуємо траєкторію руху. Створюємо окремий шар для малювання лінії. Наша дорога лежить в меню «Insert» - «Time Line» - «Motion Guide». Намалюємо лінію таким чином, щоб остання точка була розташована ближче до правого нижнього кута. Тут кораблик буде зупинятися. На шарі «Guide: Layer 1» клацаємо правою кнопкою миші по тридцятого кадру і створюємо ключову позначку - «Insert Keyframe». Далі переходимо на шар із зображенням кораблика - «Layer 1». Захоплюємо кораблик і встановлюємо його в початковій точці лінії. Встановлюємо ключову позначку на 30-му кадрі шару «Layer 1». Залишаючись на 30-му кадрі, підтане кораблик до кінця лінії. Зазначаємо, що кораблик буде рухатися протягом усього фільму. Для цього відзначаємо шар з корабликом, клацаємо по виділеній області і вибираємо пункт «Create Motion Tween». Збережемо результати нашої праці. Входимо в меню «File» - «Save As ...», вибираємо каталог для збереження і вносимо назву файлу. Далі натискаємо кнопку «Зберегти». Щоб перевірити працездатність підготовленої анімації, входимо в меню «Control» і вибираємо пункт «Test Movie». Створимо такий ефект, як ніби кораблик до нас наближається. Для цього розміри картинки повинні плавно збільшуватися. Тобто на першому кадрі кораблик буде маленьким, а на останньому - вже великим. Клацанням мишки переходимо на останній, 30-й, кадр, вибираємо інструмент «Free Transform Tool» і, утримуючи клавішу «SHIFT», доводимо картинку до потрібного розміру. Вибираємо інструмент «Selection Tool» на лівій панелі, переходимо на шар «Guide: Layer 1» і піднімаємо останню крапку. Наш кораблик «прив`язаний» до цієї точки, тому він зміститься автоматично на потрібне місце. Так виглядає набагато краще. Тепер можна подивитися, як працює анімація. Пам`ятайте, як це робиться? З меню «Control» - «Test Movie». Запускається html-файл з анімацією. Але одного кораблика, плаваючого по морських просторах, буде мало. Давайте намалюємо сонечко в лівому верхньому кутку банера. Сонечко розмістимо на новому шарі. У цьому випадку малюнок набагато зручніше редагувати і простіше з ним працювати. Входимо в меню «Insert» - «Timeline» - «Layer». Якщо ми почнемо малювати на першому кадрі, то зображення закриє кораблик, так як він теж поки «пропливає» по лівій частині банера. Перейдемо на 10-й кадр. Тут кораблик вже досить змістився вправо, звільнивши ліворуч частина для малювання. Створимо ключову позначку. На шарі «Layer 3» клацаємо правою кнопкою миші за 10-ому кадру і вибираємо пункт «Insert Keyframe». Тепер спробуємо намалювати сонечко. Спочатку вибираємо інструмент «Oval Tool» зі списку інструментів на лівій панелі. На панелі «Properties» в нижній частині вікна відкриємо колірну палітру у поле «Fill color» і виберемо жовтий колір. Тепер клацаємо мишкою в потрібному місці робочої зони і рухом по діагоналі створюємо коло потрібного розміру. За допомогою інструменту «Line Tool» намалюємо сонечку лучи. Зараз намальоване зображення являє собою розрізнені елементи. Виберемо на лівій панелі інструмент «Selection Tool», виділяємо весь об`єкт рухом миші по діагоналі і групуємо всі частини зображення. Не забуваємо час від часу зберігати проект. Зробимо це і зараз, а потім перевіримо, як працює анімація, з меню «Control» - «Test Movie». Наше наступне завдання - включити в банер текст. Це буде невеликий рекламний блок, що складається з двох словосполучень. Для тексту ми теж створимо окремий шар. Початкову ключову позначку поставимо на 16-му кадрі. Використовуючи інструмент «Text Tool», надрукуємо текстовий блок. Якщо потрібно, можна змінити параметри тексту на панелі «Properties» в нижній частині вікна. В даному випадку ми розташуємо напис «МОРСЬКІ КРУЇЗИ» у центрі, діючи знайомим способом. На правій панелі інструментів відкриємо панель вирівнювання текста. Натискаємо на центральні кнопки лінійки «Align». Після внесення змін «звертаємо» панель. Для плавного появи тексту в банері скористаємося спеціальним ефектом, вбудованим в програму «Flash», - «шторки». У таких випадках він незамінний. Входимо в меню «Insert» - «Timeline Effects» - «Transform / Transition» - «Transition». Відкривається вікно настройки ефекту. «За замовчуванням» текст буде з`являтися «входом» (в поле «Direction» перемикач «IN») згори вниз протягом 30 кадрів (у полі «Effect Duration» зазначено кількість кадрів). Змінимо налаштування тривалості ефекту. В поле «Effect Duration» поставимо значення 15 кадрів. Змінимо також і напрямок появи тексту - зліва направо. В поле «Direction» відзначимо відповідну стрілку. Для попереднього перегляду натискаємо кнопку «Update Preview» у верхньому правому кутку вікна. Якщо результат нас влаштовує, то натискаємо кнопку «ОК». На часовій шкалі на шарі тексту з`являються кадри, відмічені сірим кольором. Це означає, що в цих кадрах знаходяться статичні об`єкти, з якими нічого не відбувається. Нам же необхідно, що текст з`являвся. Тобто має відбуватися дія. А воно можливе тільки між двома ключовими кадрами. Перша мітка - на 15-му кадрі - у нас є. Встановлюємо ключову позначку на останньому, 30-ом, кадрі. Клацаємо по ньому правою кнопкою миші і із списку вибираємо пункт «Insert Keyframe». Напис має рухатися, тому не забуваємо вказати це програмі. Зберігаємо проект ( «File» - «Save») і тестуємо його ( «Control» - «Test Movie»). Зверніть увагу, що напис «Морські круїзи» дуже швидко зникає. Необхідно її трохи затримати в кінці. Ми не зможемо продовжити шар з текстом «Transition 2», так як на ньому встановлений ефект шторки. Якщо ми спробуємо продовжити роботу з цим шаром, то доб`ємося всього лише повторення ефекту. Створимо новий шар і поставимо той же самий текст ще раз. Новий шар отримає назву «Layer 6». Першу ключову позначку створимо на 31-му кадрі, відразу після завершення роботи ефекту. Напишемо тексту так само, що і на шарі «текст», зберігаючи параметри кольору, шрифту, накреслення. Після цього розмістимо його строго по центру, використовуючи панель вирівнювання «Align». Цей текст буде програватися на протязі п`яти кадрів, тому зробимо 35-й кадр ключовим. Зберігаємо проект і перевіряємо його працездатність. Тепер у нас інший дефект. Напис варто надто самотньо. Має сенс продовжити зображення з сонечком і корабликом на цей час. Переходимо на шар «Layer 3» з сонечком і встановлюємо ключову позначку на 35 ом кадрі. Аналогічно Продлять час перегляду шару з корабликом. Перейдемо на шар «Layer 1» і зробимо 35-й кадр ключовим. Подивимося, що у нас вийшло, з меню «Control» - «Test Movie». Виходить досить симпатичний банер. Далі можна змусити зникнути напис «Морські круїзи» і замість неї поставити другий рекламний слоган. Це все ви вже зможете зробити самостійно. Давайте подивимося, що у нас повинно вийти. Залишилося найголовніше. Що таке банер? Це рекламний ролик, який показується на сторінці в Інтернеті. Клік миші по цьому ролику повинен привести нас на сайт, який рекламує банер. Можна, звичайно, зробити посилання в HTML-сторінці. А можна вказати перехід безпосередньо в банері. У цьому випадку ніхто не зможе підмінити посилання в інший ресурс. Правда, для цього нам доведеться познайомитися з азами програмування. Створюємо новий шар «Layer 11». Він повинен бути вище всіх інших шарів. На ньому ми зробимо невидимий прямокутник, який буде служити кнопкою переходу. Вибираємо інструмент «Rectangle Tool» і малюємо прямокутник будь-якого кольору так, щоб він заходив за межі банера. Для того щоб прямокутник став кнопкою, необхідно конвертувати його в символ «Button» ( «Кнопка»). Для цього відзначаємо прямокутник і заходимо в меню «Modify» - «Convert to Simbol». У вікні вносимо назву кнопки (латинськими літерами) і ставимо перемикач «Type» в положення «Button». Після цього натискаємо кнопку «ОК». Кнопка обов`язково повинна бути прозорою. Тут нам доведеться згадати, як працювати з альфа-каналом. Прямокутник повинен бути відзначений. На панелі «Properties» в нижній частині вікна зі списку «Color» вибираємо «Alfa» і встановлюємо ступінь прозорості кольору 0%.

Наступний етап - призначити ярлик. Це не так просто. Вся справа в тому, що програма Adobe Flash дозволяє створити непросту анімацію у вигляді послідовності картинок, а інтерактивну. Іншими словами, що реагує на дії користувача. Для цього використовується спеціальна мова програмування - «Action Script». Ми не будемо зупинятися докладно на його можливостях. Просто навчимося створювати перехід по посиланню. Клацаємо правою кнопкою мишки по прямокутнику і в меню вибираємо пункт «Actions». Відкривається вікно для написання програмного коду. «Action Scripts» - мова об`єктно-орієнтованого програмування. Тобто робота йде із об`єктами. У нашому випадку об`єкт - це кнопка «BTN». У правій частині вікна пишемо текст коду, як показано ілюстрації. Вставляємо свій адреса сайту. У нашому випадку сайт буде відкриватися в новому вікні. Якщо ви хочете, щоб сторінка відкривалася в тому ж вікні, то просто приберіть рядок `_blank`. Про всяк випадок перевіряємо правильність написання коду. Для цього натискаємо кнопку «Check Syntax». Якщо щось буде неправильно, то вискочить вікно, в якому буде вказано, в якому рядку міститься помилка. У нас все в порядку, і тому сміливо натискаємо кнопку «ОК». Після цього закриваємо вікно програмного коду. Зберігаємо проект і перевіряємо роботу анімації.
Банер повністю готовий. Тепер можна зберегти його у вигляді SWF-файлу, придатного для перегляду в Інтернеті. Входимо в меню «Export» - «Export Movie». У вікні, знаходимо каталог на жорсткому диску, вказуємо назву файлу і натискаємо кнопку «Зберегти». Відкривається вікно налаштувань. Раніше ми в ньому міняли тільки версію flash-програвача. Коли ми використовуємо в проекті програмний код, то необхідно ще звернути увагу на пункт «Local Playback Security». Зазвичай тут обраний пункт «Access local files only». В цьому випадку скрипт працює тільки на сервері. Його робота на нашому (локальному) комп`ютері заблокована. Для можливості роботи програмної частини (в нашому випадку переходу на іншу сторінку) локально необхідно із списку вибрати пункт «Access network only». Після внесення змін натискаємо кнопку «ОК». На що ще потрібно звернути увагу? У деяких випадках ми не хочемо, щоб анімація програвалася «по колу». Тобто необхідно зупинити ролик в кінці. Як це зробити? Заходимо в меню «File» - «Publish Settings ...». В вікні, переходимо на закладку «HTML». Тут в розділі «Playback» є поле «Loop». Якщо позначка стоїть, то ролик програється без кінця. Якщо позначку зняти, то анімація зупиниться на останньому кадрі. Протестуємо роботу банера в HTML-сторінці. Входимо в меню «Publish Preview» - «Default» або натискаємо кнопку «F12» на клавіатуру. Відкривається вікно браузера з анімацією. Обов`язково перевірте роботу переходу по посиланню.