Вивчаємо macromedia flash

Вивчаємо Macromedia Flash. Урок 2. Створення статичних зображень

Більшість користувачів думають, що програма Flash призначена виключно для створення анімації - динамічних зображень, що цілком логічно. Однак не слід забувати, що Flash має потужні інструменти і для створення статичних зображень. Flash дозволяє малювати статичні зображення (цим ми займалися на минулому уроці), складати їх з готових елементів, модифікуючи різним чином, переводити відповідні растрові зображення в векторні. При цьому статичні зображення зовсім не обов'язково розглядати як заготовку для мультфільму. Flash - це універсальна програма, яка надає великий набір інструментів для створення різних зображень. Знайомитися з ними ми продовжимо і на даному уроці.

трансформація об'єктів

Будь виділений елемент можна модифікувати: змінити його масштаб, здійснити поворот, дзеркальне відображення відносно горизонтальної і вертикальної осі, а також зрушення.

Розглянемо все це на прикладі. Припустимо, що ви намалювали чоловічка і вас не влаштовують розміри окремих елементів на його обличчі (рис. 1). Зовсім не обов'язково перемальовувати все заново. Можна модифікувати окремі елементи зображення. По-перше, будь-який елемент можна повернути. Для цього виділяємо очей за допомогою інструменту Arrow і виконуємо команду Modify> Transform> Rotate. в результаті навколо виділеного об'єкта з'являються маркери (рис. 1). Ту ж саму операцію можна здійснити, скориставшись кнопкою Rotate (вона натиснута на рис. 1). Чотири кутових маркера дозволяють здійснювати поворот, а інші чотири - зрушення.

Мал. 1. Будь-який елемент зображення можна модифікувати

Взявшись за верхній правий маркер, можна здійснити поворот виділеного зображення, а за верхній середній маркер - зсув (рис. 2).

Якщо вам необхідно повернути об'єкт на певний кут, можна скористатися командою Modify> Transform> Scale and Rotate. яка дозволяє точно вказати в градусах, на який кут необхідно повернути об'єкт (рис. 3).

Мал. 2. Приклад виконання зсуву

Мал. 3. Приклад виконання повороту виділеного елемента

Тепер розглянемо дію команди Scale. Для прикладу змінимо розмір носа чоловічка. Виділимо цей елемент і виконаємо команду Modify> Transform> Scale. Замість цього можна скористатися кнопкою Scale, що знаходиться в панелі Options (вона натиснута на рис. 4).

Мал. 4. Переміщуючи маркери, можна масштабувати виділений елемент

Виділений об'єкт буде обрамлений прямокутними маркерами. Кутові маркери дозволяють змінювати масштаб по обох осях (вертикальної і горизонтальної) одночасно, лівий і правий маркери дозволяють змінювати масштаб тільки по горизонтальній осі, а верхній і нижній - по вертикальній (рис. 4).

Доступна також функція вертикального перевороту (Flip Vertical), що дозволяє дзеркально відобразити виділений елемент відносно горизонтальної осі. Наприклад, виділимо нашому герою рот за допомогою інструменту Arrow і виконаємо команду Modify> Transform> Flip Vertical. в результаті явно песимістичне вираз обличчя стане оптимістичним (рис. 5).

Мал. 5. Дзеркальне відображення лінії рота за допомогою Flip Vertical змінює настрій

Тепер до того ж об'єкту застосуємо перетворення Flip Horizontal, яке відповідно виконує горизонтальний поворот (дзеркальне відображення щодо вертикальної осі). В результаті людина буде виглядати як на рис. 6.

Мал. 6. Дзеркальне відображення лінії рота за допомогою Flip Horizontal

модифікація фігур

Не всі фігури легко намалювати від руки, а, наприклад, фігуру з градієнтним пом'якшенням країв вручну намалювати практично неможливо. Втім, Flash дозволяють створювати подібні ефекти одним клацанням миші. Продовжимо знайомство з функціями, доступними в спадаючому меню пункту Modify, і поговоримо про функції панелі Shape. Форму фігур можна змінювати, перетворюючи лінії в заповнені області, розширюючи форму заповненого об'єкта або пом'якшуючи межі заповненої фігури, змінюючи криві лінії фігури. Розглянемо всі ці можливості на простих прикладах.

Для того щоб пом'якшити межі об'єкта, виберемо заповнену форму, наприклад прямокутник із заливкою синього кольору, і виконаємо команду пом'якшення країв заповнення: Modify> Shape> Soften Fill Edges. Прямокутник набуде вигляду як на рис. 7. В залежності від параметрів настройки (Distance - ширина в пікселах пом'якшеній межі, Number of Steps - параметр, що визначає кількість кривих, використовуваних для пом'якшення межі, Expand / Inset - параметри, що визначають режим збільшення / зменшення фігури при пом'якшенні граней) можна домогтися різних ефектів.

Мал. 7. Приклад використання команди пом'якшення граней об'єкта

Мал. 8. Еліпс з лінією обведення великої товщини

Мал. 9. Лінія обведення стала областю і може бути заповнена градієнтною заливкою

Розглянемо, як перетворити лінії в зафарбовувати області.

Намалюємо еліпс (для наочності виберемо велику товщину лінії обведення і радіальну градієнтну заливку) - рис. 8. Виділимо лінію обведення і виконаємо команду перетворення ліній в області: Modify> Shape> Convert Lines to Fills. Лінія обведення стала областю і може бути заповнена градієнтною заливкою (рис. 9).

Для того щоб продемонструвати можливості функції розширення фігури, покажемо, як швидко намалювати трикутник з округленими вершинами. Намалюємо трикутник, як показано на рис. 10, і виконаємо команду: Modify> Shape> Expand Fill. У діалоговому вікні Expand Fill вкажіть в пікселах значення відстані розширення (Distance) - 44 пікселя і включіть перемикач Expand (визначає режим збільшення фігури).

Мал. 10. Панель Expand Fill

В результаті отримаємо трикутник з округленими кутами (рис. 11).

Мал. 11. Трикутник з округленими кутами, отриманий за допомогою команди Expand Fill

Вирівнювання і розподіл об'єктів

Різні операції з вирівнювання та розподілу графічних об'єктів в кадрі сконцентровані в панелі Align, доступ до якої здійснюється клацанням по відповідній кнопці (розташована на верхній панелі, натиснута на рис. 23).

Мал. 23. Панель Align

Кнопки панелі Align дозволяють вирівнювати об'єкти відносно один одного, розподіляти їх в просторі кадру і міняти їх розміри, підганяючи габарити об'єктів. Розглянемо різні групи кнопок.

Група кнопок Align (Вирівнювання)

Кнопки цієї групи служать для вирівнювання об'єктів відносно один одного. Продемонструємо їх роботу на прикладі об'єктів, показаних на рис. 23. Виділіть вирівнюється об'єкти і клацніть на кнопці вирівнювання по лівому краю (перша в верхньому ряду) - всі виділені об'єкти змістяться, як показано на рис. 24: ліві боку їх габаритних контейнерів вирівняються по самому лівому з групи.

Мал. 24. Вирівнювання по лівому краю

Мал. 25. Вирівнювання по правому краю

Аналогічно вирівнюванню по лівому краю виконується вирівнювання по правому краю (рис. 25). Доступно також вирівнювання по вертикальній осі по верху, по горизонтальній осі і по низу.

Група кнопок Distribute (Розподіл)

У даній групі є шість кнопок для розподілу елементів по вертикалі і по горизонталі. Не будемо розглядати призначення кожної з них, сподіваємося, Новомосковсктелі розберуться самостійно. Краще розглянемо приклад. Припустимо, необхідно розподілити з рівними проміжками по вертикалі ряд кнопок (рис. 26). Виділіть їх і натисніть на кнопку розподілу по верхньому краю Distribute top edge (вона виділена на рис. 27).

Мал. 26. Початкове нерівномірне положення кнопок

В результаті елементи розподіляться, як показано на рис. 27.

Мал. 27. Кнопки вирівняні по вертикалі з розподілом по верхньому краю

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

Група кнопок Match Size (Вирівняти розмір)

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

Мал. 28. Вихідні об'єкти різного розміру

На рис. 28 показані чотири елементи, які потрібно привести до однакових розмірах по вертикалі і горизонталі. Домогтися цього можна, натиснувши кнопку Match width and height (натиснута на рис. 29).

Мал. 29. За допомогою кнопки Match width and height всі об'єкти можна привести до однакових розмірах по вертикалі і по горизонталі.

З іншими параметрами ви легко розберетеся самостійно.

Переклад растрового зображення у векторне

Для перекладу растрового зображення у векторне необхідно імпортувати растрове зображення по команді File> Import. потім виділити імпортоване зображення і виконати команду Modify> Trace Bitmap - в результаті з'явиться однойменна панель (рис. 30).

Мал. 30. Панель Trace Bitmap

В панелі Trace Bitmap задайте поріг кольору (Color Threshold), який може змінюватися в межах від 1 до 500. Цей параметр обмежує кількість квітів в результуючому векторному зображенні. Чим менше параметр Color Threshold, тим більше повнокольоровим і докладним буде трассіроваться зображення.

Потім необхідно зазначити параметр мінімальна область (Minimum Area), який може змінюватися в межах від 1 до 1000 і визначає розмір мінімальної області, обводімой контуром.

Параметр Curve Fit задає точність, з якою контур огинає область, обмежену кольором. Чим вище точність, тим більше відповідність з вихідним растровим зображенням, але тим більше «важить» результуючий файл. Найточніший режим огибания - піксельний (Pixels), самий грубий - Very Smooth (дуже гладко).

Параметр Corner Threshold (поріг кутів) визначає, наскільки детально описуються кути. Цей параметр впливає на кількість опорних точок в результуючому векторному малюнку.

При зазначених на рис. 30 параметрах на панелі Trace Bitmap вийде векторне зображення, близьке до растровому (рис. 30). Тепер спробуйте оптимізувати зображення, виконавши команду Modify> Optimize. що призведе до появи панелі Optimize Curves (рис. 31). Дана панель дозволяє міняти кількість ліній і опорних точок, на базі яких будується зображення. Варіюючи параметри панелі Optimize Curves, можна домогтися оптимального співвідношення «обсяг файлу / якість зображення» (рис. 32).

Мал. 31. Панель Optimize Curves

Мал. 32. Векторне зображення після оптимізації кількості кривих трасування

Мал. 33. Інструмент Subselect дає можливість побачити результат трасування

Якість зображення знижується в міру зменшення кількості кривих трасування і збільшення їх гладкості, однак, підбираючи параметри перекладу растрового зображення в векторне, можна створювати лаконічні векторні зображення, які можуть бути навіть цікавіше й виразніше вихідних растрових. Спеціально для цього уроку я експериментував з фотографіями з моєї колекції і отримав кілька цікавих результатів, які ілюструють, як можна створювати композиції шляхом перекладу растрових зображень в векторні (рис. 34, 35 і 36).

Мал. 34. Зображення, отримане за допомогою програми Flash

Мал. 35. При перекладі растрового зображення у векторне залишені чотири кольори, які після трасування змінені. Деталі домальовані вручну