Ваш перший Flash-банер, Програми для роботи з графікою, Програмні керівництва, статті

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

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

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

Визначившись зі сценарієм, приступимо до творчості. Для початку вирішимо, якого розміру має бути банер. Нехай це буде загальноприйнятий в банерообмінних мережах формат 468×60. Саме ці розміри необхідно вказати в панелі 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, або включивши режим попереднього перегляду: Control Test Movie [Ctrl+Enter].

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

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

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

    Якщо передбачається, що на кнопках будуть анімовані об’єкти, створіть заздалегідь символи Movie clip, а потім просто розмістіть їх у відповідному кадрі кнопки.

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


  • Вставте новий ключовий кадр, на цей раз 60-й. Сподіваюся, ви вже звикли до того, що для цього треба виділити відповідний кадр і натиснути F6? Тим самим ми встановили час статичного відображення тексту після його зупинки – приблизно на три з половиною секунди.
  • Вставте останній ключовий кадр, наприклад 80-й.
  • У списку оберіть ефект Alpha і, пересуваючи повзунок, встановіть нульову прозорість.

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


  • Перейдіть на попередній ключовий кадр (60-й) і встановіть для нього тип анімації Motion так само, як ми робили це з першим ключовим кадром.

    Основа нашого банера готова. Текст робить те, що ми від нього хотіли, переконайтеся в цьому, включивши тестовий перегляд: Control Test Movie [Ctrl + Enter].

    Тепер необхідно додати останній елемент фільму – обертається квадрат:


  • Створіть новий символ: 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:


  • Виділіть кнопку і відкрийте панель Object Action, натиснувши в нижньому правому куті кнопку із зображенням блакитний стрілки або вибравши в меню Window Actions [Ctrl + Alt + A].
  • У правому вікні панелі, знайдіть групу Basic Actions і двічі клацніть на команді Get URL або просто перетягнете її в праве вікно.
  • Виділіть другий рядок.
  • Заповніть поля в нижній частині вікна. В поле URL введіть ім’я свого улюбленого сайту (наприклад, http://www.flash.polarcom.ru), а в полі Window виберіть значення «_blank» – відкривати в новому вікні (якщо ви створювали свої веб-проекти, це значення має бути вам добре знайоме). Поле Variable використовується при необхідності передавати дані серверному CGI-скрипту з використанням методів GET і POST; в нашому випадку залиште значення «Don” t sent ». У результаті у правій частині вікна у нас вийде наступний сценарій:

    on (release) {
    getURL (“http://www.flash.polarcom.ru”, “_blank”);
    }

    Ось ми і створили банер, а точніше – Flash-ролик з елементами інтерактивності. Прийшла пора зберегти створений проект. Збереження нічим не відрізняється від аналогічного процесу в інших програмах. Створений файл має розширення. fla, його не можна використовувати для розміщення в Інтернеті, так як це формат редактора, та й обсяг цього файлу може бути досить великим, в нашому випадку близько 20 Кбайт. Для розміщення фільму на веб-сторінці необхідно зберегти його у відповідному форматі. Як правило, створюються відразу два файли: HTML-сторінка і файл формату. Swf – власне сам фільм. Це зовсім не означає, що ми не можемо використовувати інші формати! При бажанні можна опублікувати проект в таких поширених графічних форматах, як GIF, JPEG, PNG, доступний відеоформат MOV, а при бажанні Flash створить для вас виконуваний файл у форматі. exe, і ваш фільм можна буде показати навіть на комп’ютерах, де не встановлено Flash.


  • Відкрийте панель настройки публікації: File Publish Settings.
  • Виберіть потрібні формати, в нашому випадку – HTML і Flash.
  • Натисніть кнопку Publish.

    Все! Процес створення банера можна вважати закінченим. Тепер в папці, в якій ви зберегли Flash-проект, з’являться ще два файли. Після публікації розмір готового файлу. Swf буде набагато менше вихідного . Fla (в нашому випадку менше 3 Кбайт).

    Звичайно, в невеликій статті неможливо описати всі прийоми роботи в Flash. Але сподіваюся, після цього невеликого прикладу, коли буквально за кілька хвилин був створений Flash-банер, застосована пара ефектів анімації і створена кнопка, що реагує на проходження над нею курсору миші і відкриває сайт після натискання, ви переконалися, що працювати з Flash дійсно легко і цікаво. Ми не встигли торкнутися таких прийомів анімації, як трансформація, коли один об’єкт перетворюється в інший, або рух по заданій траєкторії. Не познайомилися з різними типами шарів, наприклад маскуючим шаром, що дозволяє досягати дивно красивих ефектів. Не вивчили можливості текстових полів: динамічних – змінюваних в ході роботи сценарію ActionScript, полів для введення – дають можливість користувачеві вводити необхідну інформацію, яку потім можна передати для обробки серверу. Ми майже не говорили про ActionScript, мовою, дуже схожому за своєю структурою на JavaScript, але призначеному для роботи з об’єктами анімації. Його застосування дозволяє створити фільм, повний руху, але складається з одного-двох кадрів. Не торкнулися ми і такого нововведення п’ятої версії Flash, як інтелектуальні Smart-кліпи. Власне, і прийоми малювання у Flash ми не розглядали. Але все це неважко вивчити самостійно. Головне почати, а це, будемо сподіватися, ви сьогодні змогли.

  • Схожі статті:


    Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

    Коментарів поки що немає.

    Ваш отзыв

    Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

    *

    *