<
  • Главная
Статьи

Macromedia Flash 8: уроки малювання

Всі можливі приводи для гулянь позаду, п'ятий семестр моєї залікової книжки повністю заповнений, за вікном -25 градусів - у мене просто немає причин відкладати виконання своєї обіцянки, даної вам перед Новим роком в "КВ" № 50 . Отже, продовжимо розмову про технології Flash і популярному пакеті для створення інтерактивних додатків Macromedia Flash Professional 8. Сьогодні загострити нашу увагу на хитрих прийомах малювання.

Повинен відразу попередити, що нудного перерахування інструментів Flash з описом властивостей і методів кожного ви тут не зустрінете. Цю інформацію легко можна знайти в самовчителі, електронних довідниках і help'у по Flash. Я ж спробував зібрати найцікавіші технічні прийоми, які використовуються просунутими користувачами і які будуть цікаві як початківцям user'ам, так і Flash-дизайнерам зі стажем. Ну-с, за справу!


Кнопки-модифікатори

Припустимо, що вам необхідно створити на монтажному столі Flash 8 прямокутник з округленими кутами. Дана геометрична фігура малюється за допомогою інструменту Rectangle Tool (R), для якого за допомогою з'явилася в нижній частині панелі інструментів (в розділі "Options") кнопки-модифікатора "Set Corner Radius" встановлено радіус сполучення. Цей метод може успішно застосовуватися для швидкого написання нескладних кнопок.

При активізації будь-якого інструменту в Flash слід звертати увагу на його кнопки-модифікатори, які можуть докорінно змінити принцип дії обраного засоби малювання. Наприклад, олівець (Pencil Tool) може працювати в одному з трьох режимів: випрямлення ліній (Straighten), згладжування гострих кутів (Smooth) і малюнок чорнилом (Ink). Кожен з перерахованих режимів задається за допомогою кнопки-модифікатора і може бути корисний при зайвому тремтінні мишки в руці під час малювання. У інструменту Eraser (ластик) також є кілька режимів роботи, які дозволяють налаштувати його на знищення ліній (режим "Erase Lines"), областей, заповнених кольором (режим "Erase Fills"), і ін. Зазвичай з назви кнопки-модифікатора прямо випливає її призначення.


Блокування заливки

Якщо використовувати інструмент Paint Basket ( "Заливка") для розмальовки декількох об'єктів з параметром, що відповідає за блокування заливки (кнопка-модифікатор "Fill Lock"), то текстура або градієнт, який використовується для заповнення фігури, буде повторюватися в кожному наступному об'єкті. Іншими словами, блокування заливки дозволяє створити відчуття того, що розфарбовувати фігури вирізані з одного кольорового аркуша паперу. Цим властивістю також володіє і інструмент "кисть" - Brush Tool (B).

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

Грубо кажучи, в кожній стулці вікна (і в кватирці теж) спостерігач повинен бачити частини однієї і тієї ж картини - нічне небо і місячний диск, світіння якого слабшає з відстанню. Цей ефект і забезпечує блокування заливки. Почнемо по порядку. Саме вікно я малював за допомогою порожніх прямокутників (інструмент Rectangle Tool) і олівцевих ліній (Pencil Tool) зі змінною товщиною і градієнтної заливкою (необхідні кольори були підібрані на панелі Window -> Color Mixer). Всі елементи вікна розташовані на одному шарі. Потім я виділив праву частину вікна і заповнив її (інструмент Paint Basket) радіальним градієнтом "чорний-синій-чорний", включивши режим блокування заливки (кнопка-модифікатор "Fill Lock"). Скориставшись засобом Gradient Transform Tool ( "Налаштування градієнта"), підібрав оптимальний спосіб накладення градієнта. Кватирка і друга половина вікна були зафарбовані все тим же вмістом Paint Basket. І останній штрих - місяць. Для цього беремо Oval Tool ( "Еліпс"), прибираємо контур, затискаємо shift і малюємо правильне коло в найяскравішою точці неба. Зірки додайте за смаком. :)

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


Заливка растрових зображенням

Повернемося до результатів попереднього уроку і намалюємо зимові візерунки на склі.

Для цього підберемо текстуру, вибравши у вікні "Color Mixer" в списку "Type" пункт "Bitmap". Заллємо всі вікна і інструментом Gradient Transform Tool відкоректуємо положення, розмір і нахил текстури. Видно, міцнішає мороз! :)

Нехай хтось намагався подивитися у вікно і розчистив деяку область від інею, як ми з вами часто чинимо зимою в транспорті. Візьмемо кисть (Brush Tool), завантажимо для неї растрове зображення (вид з вікна) і нанесемо кілька мазків, включивши режим "Fill Lock". Ось так "чарівна паличка"! У тих місцях, де попрацювала кисть, відкрився зимовий пейзаж. Однак захоплюватися растровими текстурами все ж не варто - розмір вихідного файлу при цьому зростає як на дріжджах. :)


Тінь у рухомого об'єкту

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

Давайте міркувати логічно. З об'єктом будь-якого типу (Graphic, Button і MovieClip) можна виконувати наступні операції: зміна розміру, поворот на кут, нахил і т.д. (Меню Modify -> Transform). Це ж векторна графіка! Припустимо, є ролик (візьмемо стандартний з мавпою, що розгойдується на гілці, з папки "Samples And Tutorials"). У бібліотеці даного кліпу знаходиться символ кліпу, а на монтажному столі - його уявлення (образ). Хто нам заважає перетягнути на робочу область ще одне подання цього кліпу, залити чорним кольором і розмістити в потрібній площині за допомогою процедури "Rotate And Skew" меню Modify -> Transform? Ніхто! І при цьому тінь буде повністю відповідати своєму об'єкту - обертовим мавпі і гілці, в нашому випадку. Так і зробимо.

Щоб весь кліп залити чорним кольором, можна піти двома шляхами: перефарбувати кожну деталь ролика, на що, звичайно ж, піде багато часу, або на панелі властивостей кліпу (Window -> Properties -> Properties або "Ctrl + F3") в списку Color вибрати Tint ( "Фарбувати") з 100% чорним кольором. Останнє явно краще. :) В результаті весь кліп забарвиться в чорний колір. Однак тінь не має чітких обрисів, тому отриманий ролик необхідно розмити. Для цього виберемо фільтр Blur і виставимо розмиття по горизонталі BlurX = 50, по вертикалі BlurY = 4, а якість встановимо низьке (Quality = Low), щоб при програванні всього кліпу навантаження на апаратну частину ПК була менше. Тепер тінь необхідно розташувати в необхідній площині (площині землі). Складна анімація, в якій рухомі предмети відкидають тінь по законам фізики, створюється описаним вище способом.

приклад .


взаємодія об'єктів

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


оформлення написів

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

Отже, будемо вважати, що у нас в робочій області мається текстова напис, з якої необхідно змайструвати логотип або шапку для web-сайту. А Flash, як будь-який повноцінний редактор векторної графіки, легко дозволить це зробити. Розіб'ємо командою Modify -> Break Apart фразу на літери (для цих цілей також можна використовувати поєднання "Ctrl + B"). В результаті вихідний текстовий блок розколовся на кілька частин, число яких дорівнює кількості символів у вихідному текстовому фрагменті. Щоб перетворити кожен символ в графіку, виконаємо цю процедуру ще раз. Тепер букви представлені областями заливки, і з ними можна проробляти ті ж дії, що і з графічними об'єктами. Наприклад, обводити по контуру. Для цього потрібно активувати інструмент Ink Bottle Tool ( "Чорнильниця"), підібрати товщину і колір лінії, а потім клікнути їм на кожній букві. Контурний текст (порожнисті літери) створюється шляхом видалення областей заливки. Крім того, кожну букву або слово цілком можна піддати деформації і т.д. Всі символи збираються в один графічний блок за допомогою команди Modify -> Convert To Symbol або клавіші "F8".


оптимізація графіки

У Flash існує кілька способів зменшення розміру вихідного файлу (стосовно форматам FLA, SWF і MOV). По-перше, при публікації ролика можна вибрати ступінь стиснення растрових зображень, а також включити додаткову компресію документа (меню File -> Publish Settings). Цей варіант, природно, не підходить для FLA - внутрішнього типу файлів Flash. По-друге, користувач може видалити непотрібні фігури і зайві лінії зі сцени, а також звести число використовуваних символів до мінімуму, заздалегідь продумавши структуру кожного об'єкта і видаливши зайві символи з бібліотеки. По-третє, можна скористатися вбудованим оптимізатором ліній, який дозволить обійтися мінімальним числом ліній, зменшивши тим самим обсяг необхідних для запам'ятовування даних. Для цього виділяємо весь документ ( "Ctrl + A") і вирушаємо в меню Modify -> Shape -> Optimize. У діалоговому вікні можна встановити необхідні параметри оптимізації. Я запустив майстра для картинки з видом на місяць. У вихідному файлі містилася інформація про 91 кривої, а після оптимізації число кривих ліній зменшилася до 43. Тобто розмір вихідного SWF-файлу зменшився вдвічі. Ці дії, звичайно ж, жодним чином не вплинули на якість картинки, тому що в даному випадку оптимізується формульне опис зображення. Якщо в векторній графіці замінити складові лінії суцільний, а криві трохи випрямити, потрібно менше інформації для опису всього малюнка.


замість висновку

На сьогодні все. Коли я працював над даними опусом, я виходив з того, що читач вже знайомий з попередніми статтями про Flash, опублікованими в "КВ" №№ 48 - 49 / 2005. Тому сьогодні я не приводив ніяких посилань на минулий матеріал. Однак якщо вам щось було незрозуміло, то, можливо, ключик захований в минулих номерах.

Всі питання автору можна задавати на форумі "КВ". Може бути, я навіть зможу на них відповісти. :)

Aspera Symfonia



Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью