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

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



Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

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

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

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

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

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

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

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

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

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

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