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