Створювати власну анімацію в Flash може навіть той, хто абсолютно позбавлений здібностей до малювання (або здатностей хоч відбавляй, а ось по пальчикам проїхав бульдозер). Не варто впадати у відчай! Забінтуем багатостраждальні пальці, пообіцявши собі в черговий раз не перевіряти, чому так добре працює м'ясорубка, і приступимо до вивчення основ майбутнього майстерності.
Як відомо, в кінематографі використовується частота 24 кадру в секунду, але в мультиплікації, особливо призначеної для Інтернету, цілком достатньо 12. Чим більше буде частота кадрів, тим більш плавними вийдуть руху, але при цьому значно сильніше завантажується процесор, що стає істотно в складних сценах. Саме від процесора залежить швидкість відтворення Flash, і на різних комп'ютерах вона може помітно відрізнятися. Зазвичай це проявляється в гальмуванні або переривчастому русі, особливо коли складна анімація синхронізована зі звуком.
Визначившись зі сценарієм, приступимо до творчості. Для початку вирішимо, якого розміру має бути банер. Нехай це буде загальноприйнятий в банерообмінних мережах формат 468x60. Саме ці розміри необхідно вказати в панелі Movie properties (параметри фільму) Modify Movie [Ctrl + M], в полях Width (ширина) і Height (висота). У цьому ж вікні виберемо колір фону (background Color) нашого банера, а також в поле Frame Rate вкажемо значення fps - кількість кадрів в секунду.
Після того як вказані всі параметри фільму і натиснута кнопка ОК, перевірте масштаб відображення сцени. При необхідності встановіть 100%.
Тепер створимо основу майбутнього банера - рухому напис:
Виберіть інструмент Text [T].
Відкрийте панель настройки даного інструменту: Window panels Characters [Ctrl + T] або натисніть в правому нижньому кутку вікна кнопку з зображенням букви «А».
У випадаючому меню Font відкритої панелі Characters виберіть кириличний шрифт, наприклад arial Cyr.
Встановіть необхідний розмір, наприклад 35, і колір.
Клацніть на місці початку написи (в нашому випадку - на початку банера) і введіть текст. Якщо раптом з'ясувалося, що обраний розмір або колір не підходять, перейдіть на інструмент arrow [M] (чорна стрілка на панелі інструментів) і виділіть текст, клацнувши по ньому. Навколо тексту з'явиться рамка, тепер на панелі Characters можна змінити його параметри: розмір, колір шрифту і т. П.
Настав час вашої першої анімації. Заспокойте тремтіли від хвилювання руки і продовжуйте творити:
Перетворіть текст у символ: Insert Convert to Symbol [F8]. Не забудьте дати йому відповідне ім'я і вказати тип Graphic. При цьому створений символ буде поміщений в бібліотеку поточного проекту.
Виділіть 20-й кадр на лінійці Timeline і вставте ключовий кадр Insert Keyframe [F6]. Зліва від нового кадру з'явиться сіра смужка, що йде від першого ключового кадру.
Поверніться в перший кадр і перемістіть напис на банері за егограніцу, наприклад, за правий край.
Не знімаючи виділення з першого кадру, відкрийте панель параметрів кадру Window panels Frame [Ctrl + F] (можна також натиснути кнопку Show Instance в правому нижньому кутку екрану), потім перейдіть на вкладку Frame.
У випадаючому меню Tweening (побудова проміжних кадрів) виберіть тип анімації - Motion, тобто анімацію руху. При цьому сіра смужка між ключовими кадрами стане блакитний зі стрілкою вправо.
Час, яке займе програвання фільму або кліпу від початку відтворення, відображається в рядку статистики Timeline. Реальна тривалість окремих епізодів може незначно відрізнятися від відображуваного значення, яке обчислюється на основі встановленого fps. Воно залежить в основному від складності розрахунків, потрібних для побудови зображення окремого кадру, і швидкодії комп'ютера.
Використання шарів дає великі можливості при створенні фільму. Крім того, що об'єкти, поміщені на різні верстви, можна накладати або приховувати, створюючи імітацію об'єму сцени, правильне застосування шарів може помітно зменшити розмір готового файлу. Будь-який об'єкт, який належить анімувати, потрібно поміщати на власний шар. Так ви значно швидше досягнете потрібних ефектів і скоротіть завантаження процесора.
Для кожного шару намагайтеся придумати відповідну назву. Для зміни імені шару клацніть двічі лівою кнопкою миші на назві шару і введіть нове.
Якщо передбачається, що на кнопках будуть анімовані об'єкти, створіть заздалегідь символи Movie clip, а потім просто розмістіть їх у відповідному кадрі кнопки.
Згідно з нашим сценарієм, текст повинен не тільки «виїхати» на екран, але і, побувши якийсь час, зникнути. Отже, доведеться ще трохи помучити символ з текстом, адже ми анімуємо саме символ, а не сам текст.
Вставте новий ключовий кадр, на цей раз 60-й. Сподіваюся, ви вже звикли до того, що для цього треба виділити відповідний кадр і натиснути F6? Тим самим ми встановили час статичного відображення тексту після його зупинки - приблизно на три з половиною секунди.
Вставте останній ключовий кадр, наприклад 80-й.
У списку оберіть ефект alpha і, пересуваючи повзунок, встановіть нульову прозорість.
Перейдіть на попередній ключовий кадр (60-й) і встановіть для нього тип анімації Motion так само, як ми робили це з першим ключовим кадром.
Тепер необхідно додати останній елемент фільму - обертається квадрат:
Створіть новий символ: Insert New Symbol [Ctrl + F8], присвоївши йому необхідне ім'я і встановивши тип Movie Clip.
Виберіть інструмент Rectangle [R] і встановіть потрібний колір заливки і тип кордонів. Колір можна вибрати на палітрі (панель Mixer), що викликається через меню (Window panels Mixer), або відповідною кнопкою в правому нижньому кутку програми.
Намалюйте квадрат, постаравшись зробити так, щоб мітка центру об'єкта дійсно припадала на центр квадрата, або перемістіть вже намальований квадрат.
Перетворіть квадрат в графічний символ, як ви раніше це зробили з текстом.
Вставте ключовий кадр, наприклад, на 30-му фреймі.
Виділіть перший кадр, відкрийте панель Frame для даного кадру і вкажіть вже знайомий тип анімації Motion.
У випадаючому меню Rotation виберіть обертання за годинниковою стрілкою - CW, а в поле Times вкажіть, скільки оборотів повинен зробити об'єкт (наприклад, один).
Залишилося зовсім небагато - розмістити створений Movie-кліп на сцені, тобто на нашому банері:
Перейдіть в режим сцени, клацнувши на вкладці Scene1 над списком шарів.
Додайте новий шар. Для цього необхідно натиснути на зображення папірці з загнутим куточком і плюсик під списком шарів.
Перейдіть в перший кадр створеного шару, виділивши його мишкою.
Відкрийте бібліотеку проекту: Window Library [Ctrl + L] або клацнувши на книжці в правому нижньому кутку екрану.
Знайдіть в бібліотеці Movie-кліп обертового квадрата і перенесіть його на сцену, розташувавши на потрібному місці банера.
Якщо, створюючи квадрат, ви помилилися з розмірами, - нічого страшного, скористайтеся модифікатором Scale, змінивши розміри квадрата до необхідних.
Переконайтеся, що Flash створив на панелі Timeline неанімірованние лінійку для даного шару, що дорівнює за тривалістю попереднього. Якщо цього не відбулося, клацніть на останньому кадрі шару і вставте порожній кадр: Insert / Flame [F5].
Звичайно, можна було б зупинитися на тому, що вже створено, але спокій нам тільки сниться! Чи не здається вам, що обертається квадрат дуже самотній і йому не завадила б пара різнокольорових приятелів? Для цього не доведеться створювати нові Movie-кліпи, досить використовувати вже наявний з невеликими змінами для кожного екземпляра:
Додайте на банері ще пару квадратів, перетягнувши відповідний Movie-кліп з бібліотеки проекту на сцену, можна на вже наявний шар з першим квадратом.
Після того як квадрати зайняли своє місце і підігнані по розмірах, виділіть один з них, клацнувши по ньому мишею.
Відкрийте панель ефектів примірника Effects і в випадаючому меню виберіть ефект Tint (відтінок). Встановіть необхідний колір для кожного з примірників квадратів.
Раз вже мова зайшла про банерах, хочеться згадати, що деякі банерообмінні мережі обмежуються прийняттям Flash-роликів певного розміру, а деякі вимагають обов'язкового розміщення кнопки, яка виконує роль фону (підкладки) зі спеціальним сценарієм на actionSript.
Банер немислимий без можливості переходу на сайт при натисканні на ньому мишею, в іншому випадку це вже не банер, а звичайний Flash-ролик. За обробку натискань у Flash відповідають символи-кнопки з присвоєними їм фрагментами коду на actionScript.
Створення кнопки мало відрізняється від створення Movie-кліпу: Insert New Symbol [Ctrl + F8] (тип символу - button). Основна особливість кнопки полягає в тому, що її Timeline використовується нестандартно. Вона містить всього чотири кадри, ніяк не пов'язаних з послідовністю анімації. У кадрі Up представлено звичайний стан кнопки, в кадрі Over - вид, коли над нею знаходиться курсор миші, Down - натиснута кнопка і Hit - область реагування.
Намалюйте прямокутник в першому кадрі кнопки, рівний за розмірами всьому банеру і має колір фону. Розміри можна проконтролювати на панелі Info, спричиненої кнопкою в правому нижньому кутку вікна із зображенням квадрата і координатних стрілок, або через меню: Window panels Info [Ctrl + alt + I].
Перейдіть на другий фрейм - Over, вставте ключовий кадр [F6]. Змініть колір прямокутника, виділивши його і вибравши колір залівкіFill.
Встановіть область реагування кнопки у фреймі - Hit, просто вставивши ще один кадр [F5] для даного фрейма.
Поверніться на основну сцену, створіть новий шар і розмістіть в ньому кнопку, поєднавши її з межами банера.
Тепер необхідно змусити кнопку відкривати необхідний сайт. Для цього нам треба навчитися привласнювати об'єктам сценарій на actionScript: