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