Від редакції:
Минулого разу ми бавилися з чоловічком, цього разу ми спробуємо заглибитися в основи Flash – будемо вчитися малювати м’ячики.

Теоретично, основи створення графічних зображень (малювання) у Flash, повинні були досліджуватися ще до роботи з анімацією. Якщо ви візьмете до рук практично будь-який посібник з флеш – то з великою ймовірністю побачите там саме таку організацію матеріалу. Втім, зізнаюся чесно – за час роботи із флешем мені не так часто доводилося працювати власне із малюванням. Вся робота зі створення банерів (якими я займався найчастіше) зазвичай полягала в імпортуванні необхідних готових зображень у флеш та їх анімації. Ну і звісно ж – анімації тексту (до якої ми дійдемо вже зовсім скоро).
З іншого боку, якщо використовувати флеш не лише для створення банерів, але для повноцінного дизайну анімаційних фільмів та ігор – без основ малювання ніяк не обійтися. Тому я пропоную вашій увазі першу ввідну статтю про малювання у флеші, в якій коротко і по суті спробую розповісти, що воно за звірі такі – «векторна» (vector) та «растрова» (bitmap) графіка і з чим їх «їдять».

Два способи подання графічної інформації

Будь-яке зображення може бути подане у комп’ютері двома способами. Розуміння принципової різниці між ними допоможе вам працювати із флешем більш ефективно.
Перший спосіб подання графічної інформації них полягає в тому, що для кожної точки зображення точно вказується її колір. В такому випадку зображення зберігається у вигляді списку, кожен пункт якого визначає колір однієї із точок цього зображення. Саме за таким принципом працює один із найвідоміших растрових редакторів Photoshop. В цій програмі картинка є по суті сіткою дрібних квадратів (пікселів). Кожен піксель має свій колір і картинка складається із них, як мозаїка.
Такий підхід дозволяє достатньо точно відображати зображення фотографічного характеру. Наприклад, якщо у комп’ютер з допомогою сканера вводять реальну паперову фотографію, то якість отриманого зображення безпосередньо залежатиме від того, на скільки точок воно «розбивається». Цей параметр називають роздільною здатністю (ви вже напевне знайомі із ним у контексті «роздільна здатність екрану») і вимірюють кількістю точок на дюйм (dpi, від англ. dots per inch).
Таке подання зображень називається растровим (bitmap). І у нього, як і в кожного формату, є своє переваги та недоліки. Наприклад, неважко здогадатися, що розмір файлу растрового зображення напряму залежить від ширини та висоти зображення в точках. Що більшим буде зображення – то більшим буде його розмір.
Окрім того, якщо у нас є готове растрове зображення, то ми фактично не можемо збільшити його шляхом масштабування (оскільки фактично при будь-якому збільшенні виникають видимі спотворення, спричинені збільшенням кожної окремої точки).
Саме тому у багатьох випадках буває доцільніше користуватися так званим векторним (vector) поданням зображень. На відміну від растрового, цей формат описує зображення не у вигляді кольорових точок, а у вигляді конкретних фігур (кривих (контурів), заливок та опорних точок).
Якщо опис зображення зеленого м’яча у растровому форматі виглядав би приблизно так: «Перший ряд: біла точка, біла точка, біла точка… … … зелена точка, зелена точка… … … Другий ряд: біла точка, біла точка, біла точка… … … зелена точка і т. п.», то у векторному варіанті він був би приблизно таким: «Білий фон, зелений круг з центром у такій то точці і таким то радіусом». Як бачите – все набагато простіше. Але тільки у випадку, якщо саме зображення також доволі просте.
Втім, векторна графіка здатна зобразити і більш складні зображення. Їх також можливо представити у вигляді набору «графічних примітивів». Це можуть бути лінії та дуги (які називаються векторами), кола, криві Безьє, різноманітні фігури і т. п. До опису об’єктів у векторній графіці включаються також ознаки позицій та кольорів.
До переваг векторних зображень належить простота редагування, невеликий розмір файлів, який до того ж не залежить від масштабів зображення, відсутність будь-яких викривлень чи спотворень під час масштабування, тощо. Звісно, передавати фотографічні зображення у векторному форматі недоречно (оскільки їх розмір буде невиправдано великим), але для багатьох «мальованих» зображень векторна графіка підходить набагато краще, ніж растрова.
Щоб ще раз порівняти можливості растрової та векторної графіки, наводжу приклад, який використовується самими розробниками Flash. Це фотографія листка, збережена у растровому та векторному форматах. Різниця очевидна:

Різниця між інструментами «олівець» (pencil) та «пензлик» (brush) у Flash

Цікавою є різниця між інструментами «олівець» (pencil) та «пензлик» (brush) у Flash. Якщо для растрового редактора (наприклад, Photoshop) ці інструменти виконують по суті однакову роль (просто олівець зазвичай малює тонші, а пензлик – товстіші лінії), і програмі абсолютно байдуже, яким інструментом намальований об’єкт (адже по суті це всього лише набір кольорових пікселів) то у векторних редакторах різниця між «олівцем» та «пензлем» дуже суттєва.
Векторні редактори оперують точками, а не пікселями. Різниця в тому, що піксель – це квадратик. Нехай навіть нікчемно маленький. Під точкою ж ми розуміємо математичну точку, яка не має ні ширини, ні довжини. Всі фігури, намальовані у векторному редакторі – це математично прораховані лінії між такими точками. Тому векторні малюнки можна збільшувати скільки завгодно – ефекту «драбинки» не з’явиться ніколи.
Для векторного редактора важливо, яким інструментом намальований об’єкт – «олівцем» чи «пензлем». «Олівець» малює лінії (тобто ланцюжки точок), які можуть бути достатньо товстими, але при цьому вони все-рівно будуть шириною в одну точку. Якщо «схопити» курсором одну з точок в лінії і потягнути – то вона не стане товстішою чи тоншою, а потягнеться за курсором, зберігаючи попередню товщину.
«Пензлик» малює геометричні фігури. Навіть надзвичайно тонка лінія, намальована пензлем, буде сприйматися програмою як замкнута геометрична фігура, яка «залита» тим чи іншим кольором. Якщо «схопити» і «потягнути» точку на такій лінії, то фігура зміниться: стане товстішою або тоншою в цьому місці.
Сподіваюся, цього матеріалу було достатньо для того, щоб зрозуміти принципи функціонування растрової та векторної графіки.

 

Векторне малювання. Малюємо м’ячик

Ми вже знаємо про основні відмінності між растровою (bitmap) та векторною (vector) графікою, а також про те, що програма Flash першочергово створена для роботи саме з векторними об’єктами. Звісно, з растровою графікою вона також працює, але тільки у вигляді імпортованих файлів (тобто створених у інших редакторах), тоді як векторні малюнки можна створювати безпосередньо у флеші.
Настав час переходити безпосередньо до практики.
Спробуймо навчитися користуватися найпростішими інструментами для малювання у Flash. Але нехай вас не вводить у оману слово «найпростіші». Адже саме з їхньою допомогою у флеші створюється графіка фактично будь-якої складності. Головне – майстерність. А вона, як відомо, приходить із часом.
Завдання даного уроку – показати основні принципи функціонування векторної графіки у флеші та навчитися користуватися ними на практиці (чи, простіше кажучи, створювати малюнки).
Звісно, можна було б розповідати про роботу таких інструментів як лінія (line), прямокутник (rectangle), овал (oval) і т. п. Але, щоб урок не видавався занадто нудним, ми просто спробуємо з нуля намалювати пляжний м’ячик.
Я описуватиму всі кроки максимально детально, щоб їх змогли повторити навіть люди, яким раніше ніколи не доводилося працювати із флешем (чи будь-якими іншими векторними редакторами).
Перше, що нам потрібно, це інструмент овал (oval tool), який потрібно вибрати у панелі інструментів.
Виберіть колір ліній (контур кола, яке ми будемо створювати) та колір заливки (колір, який буде наповнювати наше коло). Я вибрав червоний та блакитний кольори відповідно
Тепер, затиснувши клавішу SHIFT, намалюйте на сцені коло, приблизно таке, як на малюнку нижче.
Зверніть увагу, що якщо ви не затиснете клавішу SHIFT, то у вас вийде овал. А затискання цієї клавіші автоматично призводить до того, що малюються «правильні» об’єкти, такі, як коло.
Виберіть на панелі інструментів лінію (line tool) і намалюйте пряму, яка перетинатиме ваше коло близько до центру. Результат повинен вийти приблизно наступним:
Зверніть увагу на те, що коли ви наближаєте курсор близько до контуру кола, він неначебто автоматично «приклеюється» до нього. Ця опція нам на руку, оскільки дозволяє малювати більш точно. Скориставшись інструментом вибору (selection tool), ухопіть приблизно за середину щойно намальованої лінії і перетягніть її трішки праворуч, щоб утворилася дуга.
Тепер починається найцікавіше. Створіть новий шар (new layer) клікнувши по відповідному значку на шкалі часу (timeline).
Тепер у цьому новому шарі намалюйте ще одну лінію у колі, так, щоб вона дотикалася до контура кола і при цьому проходила приблизно через центр. Але зробіть це під нахилом, так щоб лінія трішки перетинала намальовану нами раніше дугу.
Перетягніть другу лінію таким чином, щоб утворилася ще одна дуга
Тепер нам потрібно скопіювати другу лінію на перший шар (щоб вона почала взаємодіяти з попередньо намальованими об’єктами). Для цього виберіть її, клікнувши по ній інструментом вибору (selection tool) і скопіюйте у «буфер» стандартною комбінацією клавіш Ctrl+C. Після цього другий (допоміжний) шар можна видалити. Вставляємо дугу в перший шар комбінацією клавіш Ctrl+V і стрілочками на клавіатурі переміщаємо її у потрібне місце.
Тепер весь шар із лініями функціонує як єдиний об’єкт. Ми можемо залити відповідні його елементи іншим кольором. Виберемо цей колір у опції fill color (там, де раніше у нас був блакитний). Я обрав жовтий.
Насамкінець, вибравши в панелі інструментів відро заливки (paint bucket tool) клікніть всередині тих елементів, колір яких хочете змінити. Оце й усе. В результаті у нас вийшов ось такий пляжний м’яч в кольорах національного прапора:
Звісно, до творів видатних художників Відродження цьому малюнку ще дуже далеко. Але для використання у мультфільмах та іграх, зроблених на флеш, він цілком підходить. Сподіваюся, цей урок допоміг вам зрозуміти основні принципи векторного малювання у Flash.
Залишайтеся на зв’язку. Попереду ще багато цікавого. Обіцяю, що у якомусь із наступних уроків ми навчимо цей м’яч стрибати.

Автор: Ярослав Федорак
Джерело: http://nub.com.ua