Macromedia Flash 8: уроки малювання
Всі можливі приводи для гулянь позаду, п'ятий семестр моєї залікової книжки повністю заповнений, за вікном -25 градусів - у мене просто немає причин відкладати виконання своєї обіцянки, даної вам перед Новим роком в "КВ" № 50 . Отже, продовжимо розмову про технології Flash і популярному пакеті для створення інтерактивних додатків Macromedia Flash Professional 8. Сьогодні загострити нашу увагу на хитрих прийомах малювання.
Повинен відразу попередити, що нудного перерахування інструментів Flash з описом властивостей і методів кожного ви тут не зустрінете. Цю інформацію легко можна знайти в самовчителі, електронних довідниках і help'у по Flash. Я ж спробував зібрати найцікавіші технічні прийоми, які використовуються просунутими користувачами і які будуть цікаві як початківцям user'ам, так і Flash-дизайнерам зі стажем. Ну-с, за справу!
Кнопки-модифікатори
Припустимо, що вам необхідно створити на монтажному столі Flash 8 прямокутник з округленими кутами. Дана геометрична фігура малюється за допомогою інструменту Rectangle Tool (R), для якого за допомогою з'явилася в нижній частині панелі інструментів (в розділі "Options") кнопки-модифікатора "Set Corner Radius" встановлено радіус сполучення. Цей метод може успішно застосовуватися для швидкого написання нескладних кнопок.
Блокування заливки
Якщо використовувати інструмент 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