Минулого разу ми вчилися малювати м’ячик. Цього разу перейдемо до малювання ялинки – а там і до вінка недалеко…

Малювання з допомогою кривих Безьє: перо (pen) та інструмент часткового вибору (subselection tool)
Спробую розпочати мініцикл публікацій про малювання у флеші з допомогою інструмента Перо (Pen). Для людей, яким ніколи раніше не доводилося працювати з цим інструментом, він може видатися дещо складним і навіть незрозумілим. Проте, вже у найближчих уроках я покажу, наскільки корисним може видатися цей інструмент на практиці. Для початку хочу розповісти про загальні принципи функціонування кривих Безьє.
Отже, можливість безпосереднього керування кривими Безьє з’явилася ще у п’ятій версії Flash. Для роботи з ними у програмі виділено відразу два інструменти. Це вже згадуваний нами інструмент перо (pen), а також інструмент часткового вибору (subselection tool).
Якщо раніше вам ніколи не доводилося задавати складну кривизну лінії, то, можливо, на початках ці інструменти вам не будуть потрібні. Але рано чи пізно (а особливо, коли ви перейдете до малювання складних контурів для анімації) вас зацікавить створення кривих саме з допомогою цих інструментів.
Як же працюють криві Безьє?

Щоб не записувати абсолютні координати кожної точки кривої лінії, у векторній графіці прийнято позначати координати «керуючих» точок лінії, а також напрямок лінії і величину кривизни у кожній із подібних точок. Для цього використовують спеціальний математичний апарат, вперше використаний Безьє.
У графічних програмах обидва ці параметри зазвичай відображають з допомогою вектора. Напрям цього вектора вказує на напрям кривої, а довжина визначає ступінь кривизни.
На практиці це означає, що на будь-якій кривій лінії обов’язково присутні кілька таких «керуючих» точок, які ще називають вузлами.
Клікнувши по будь-якій із цих точок з допомогою інструмента часткового вибору (subselection tool) ми побачимо два вектори, що виходять з цієї точки. Кожен із них визначає кривизну лінії зі свого боку від вузла. Перетягуючи мишкою кінець кожного з цих векторів з допомогою інструмента часткового вибору, можна змінювати кривизну основної лінії.
Пояснити роботу кривих Безьє доволі складно, а на словах – майже неможливо. Тому найкращим уроком буде власна практика. Потрібно запам’ятати тільки дві речі: додаткові вузли на лінії додаються інструментом перо (pen), а модифікація самих векторів здійснюється з допомогою інструмента часткового вибору (subselection tool).
Спробуйте створити пряму з допомогою звичайного інструмента лінія (line tool). Потім, з допомогою інструмента перо (pen tool) додайте посередині лінії вузол. Для цього клікніть двічі (перший клік вибере лінію, а другий додасть у вказаному місці вузол). Зверніть увагу, що при додаванні вузла біля пера з’являється вказівник «плюс». Нарешті, клікніть втретє по щойно створеному вузлі інструментом перо. Але не відпускайте ліву клавішу миші, а потягніть за вузол. Ви побачите, що з вузла з’являється два спрямовуючих вектори. Після того, як вектори створено – можна вибрати інструмент часткового вибору (subselection tool) і спробувати побавитися з векторами (переміщувати їх у довільних напрямках). У вас повинно вийти щось схоже на попередній малюнок.
Через деякий час ви відчуєте, за якою логікою працює цей інструмент.

Ялинкові уроки

Тепер спробуємо більш детально розібратися з функціонуванням кривих Безьє з допомогою інструменту перо (pen). А щоб урок не видався нудним, спробуємо провести детальне практичне заняття, в якому намалюємо новорічну ялинку.
За основу, яку будемо «обмальовувати», візьмемо ось таку привабливу ялиночку, яка складається із простих контурів. Можете скопіювати зображення, щоб і собі попрактикуватися з ним.

Сьогодні ми спробуємо не лише досконало повторити її у флеші, але й розфарбуємо. Отож, до діла.
Імпортуємо в бібліотеку (File -< Import -< Import to Library) зображення ялиночки і відразу ж розміщуємо його на сцені (не забудьте підігнати розмір сцени до розміру зображення). Шар, на якому буде розміщуватися це зображення виступатиме фоном. В наступних кроках ми будемо повторювати зображення. Тому, щоб випадково не «пошкодити» цей шар, замкнемо його у шкалі часу (timeline). Натисніть на замок
Додайте новий шар (layer) в шкалі часу (timeline). Він з’явиться вище, ніж наш шар із тлом (на якому розміщене оригінальне зображення ялинки). Саме у цьому шарі ви будете починати малювати з допомогою інструмента перо (pen). Виберіть цей інструмент у панелі інструментів, клікнувши мишкою по відповідній іконці або натиснувши клавішу “P”.
Перш, ніж безпосередньо приступити до малювання, потрібно налаштувати наш інструмент. Як бачите, я вибрав червоний колір ліній (будемо починати малюнок із зірки, а вона буде в нас червоною), вимкнув заливку і обрав ширину ліній у 2 пікселі (щоб було краще видно)

На зображенні зірка намальована пунктирною лінією, але нас це мало хвилює. Ми зробимо її суцільною. Малювати прямі лінії з допомогою інструмента перо насправді дуже просто. Клікніть перший раз на верхньому куті зірки, а потім на наступній точці, яку хочете з’єднати. Між двома точками з’явиться абсолютно пряма лінія. Потім переходимо до наступної вершини і так далі.
Останній клік повинен чітко збігатися з першою точкою (при цьому біля вказівника з’явиться круглий символ, який вказує на те, що контур можна замкнути) – таким чином ми намалюємо завершений контур, який у майбутньому можна буде залити будь-яким кольором і навіть градієнтом.
Якщо є така можливість, всі контури нашого малюнку варто робити замкненими, щоб потім була можливість їх «залити». Принаймні ялинку ми будемо створювати саме за таким принципом – повністю замкнених контурів.

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

Обов’язково зверніть увагу на те, що коли ви створите свою першу криву (на малюнку, зображеному вище, їх вже декілька) із останньої точки, наче два промені, з’являться два вектори, які керують зображеннями. Перший відповідає за вигин щойно створеної кривої, а другий буде відповідати за вигин наступної (роблячи зображення плавним). Оскільки наші кути доволі гострі, то другого вектору нам не потрібно (інакше не вийде правильного зображення). Для того, щоб вимкнути непотрібний вектор, клікніть один раз тим самим інструментом перо по останній точці щойно створеної кривої. Якщо ви все зробили правильно – один вектор зникне. Після цього можна продовжувати малювати, видаляючи зайві елементи кліками на «якірні точки» (anchor points).
Спеціально записав короткий скрінкаст, в якому показано, як створювати контур “верхнього поверху” ялинки з допомогою інструмента “перо”. Подивитися його можна за посиланням: http://nub.com.ua/2009/04/screencast-using-pen-tool-in-practice/. Думаю, відразу все стане зрозуміло!

В результаті у вас повинно вийте ось таке зображення
Якщо вам вдалося намалювати зовсім непросту форму верхнього «поверху» ялинки, то можна сказати, що інструмент перо (pen) ви частково засвоїли. Принаймні, зрозуміли основні принципи. Далі буде простіше. Закрийте шар із «верхнім поверхом» так само, як ви раніше закрили зірку. Створіть новий шар (у ньому ми намалюємо кульку).
З кулькою все набагато простіше, ніж із «верхнім поверхом» оскільки вона має правильну круглу форму. Для її малювання ми будемо використовувати не перо, а інструмент «овал» (oval tool). Виберіть відповідний інструмент в панелі і, затиснувши клавішу shift (ви ж пам’ятаєте, що саме з її допомогою створюються правильні геометричні форми) намалюйте коло, яке за розмірами відповідатиме ескізам.
Не забудьте попередньо обрати бажаний колір (та хоч би й рожевий) і вимкнути заливку (поки що ми малюємо тільки контури).
Можете скопіювати кульку і в тому ж шарі (layer) розкидати її по відповідних місцях на шаблоні (не зважайте, що ми поки-що не домалювали саму ялинку). Колір кульок також можна буде змінити, вибравши їх з допомогою інструмента вибору (selection tool). Результат не змусить себе довго чекати.

За аналогією зі всіма попередніми кроками, закриваємо і цей шар (з кульками) від редагування. А далі починається найцікавіше. Нам належить домалювати ялинку.
Якщо придивитися, можна звернути увагу, що всі «поверхи» ялинки як дві краплі води схожі один на одного. Тому ми не будемо малювати їх чотири рази, а просто скопіюємо наш «перший поверх» і збільшимо його до потрібних розмірів. Для цього вставте три нових порожніх шари (для кожного поверху) і розмістіть їх (просто перетягніть) нижче під шар із першим поверхом.
Закрийте всі зайві шари (із зіркою та кульками) від редагування і перегляду. Для цього окрім замка поставте на них (у шкалі часу) хрестик навпроти ока. Шари стануть невидимими і не будуть нам заважати. Після цього тимчасово відкрийте вміст шару із «першим поверхом» ялинки і скопіюйте його у буфер з допомогою стандартної комбінації клавіш Ctrl+C. Знову закрийте шар і виберіть порожній (щойно створений) шар безпосередньо під ним. Вставте зображення з допомогою комбінації Ctrl+V.

Виберіть у панелі інструментів вільну трансформацію (free transform tool). При цьому навколо щойно вставленого вами зображення з’явиться чотирикутник з точками на кутках. Схопіть мишкою за один із кутів цього чотирикутника, і, затиснувши клавішу shift, розтягніть зображення (клавіша shift дозволяє зберегти пропорції). Мабуть, ви вже здогадалися, що ми намагаємося зробити.
Досягніть максимального співпадіння із «другим поверхом» ялинки і перемістіть контур туди, де він і повинен знаходитися. Потім повторіть кроки 10 і 11 для третього та четвертого (найнижчого) поверхів.
Зображення виглядає не дуже привабливо, оскільки ми наразі не заливали контури кольором, і, як наслідок, всі лінії видно (вони виглядають із-під зображення).
Створіть новий шар безпосередньо під шарами із «поверхами ялинки» і намалюйте там «ніжку» дерева (за аналогією з тим, як ви малювали перший поверх ялинки). Виберіть для неї коричневий колір.
Тепер переходимо до розфарбовування. Якщо ви все зробили правильно і розмістили шари таким чином, як було описано у попередніх пунктах, то проблем з розфарбовуванням не виникне. Виберіть інструмент заливки (paint bucket tool) і, почергово відкриваючи відповідні шари, розфарбуйте ялинку у потрібні кольори (я вибирав трішки світліші кольори, ніж колір самих контурів). Для розфарбовування просто клікніть «відром» всередині відповідного контуру. Як бачите, все просто. Починайте з нижніх шарів і переходьте до верхніх.
(Якщо з якихось причин контури не зафарбовуються, значить ви не «закрили» їх. В такому випадку відредагуйте контур з допомогою інструмента вибору (selection tool). Просто вхопіть цим інструментом за кінчик прямої, яка торкається до початку контура і при збільшеному (200% або 400%) режимі перетягніть її таким чином, щоб вона точно припасувалася до початкової прямої. Тобто зробіть так, щоб контур був повністю закритий. Як варіант, просто виберіть в налаштуваннях вашого paint bucket tool опцію «закривати великі проміжки» (close large gaps)).
Вітаю. Результатом цієї кропіткої роботи стала ось така приваблива ялиночка.
А якщо ви уважно пройшли весь цей урок і зуміли намалювати таку ялиночку, то навчилися не тільки користуватися інструментом перо (pen), але й вдосконалили свої навички в управлінні шарами (layers) та навчилися працювати із простою заливкою (paint bucket tool).

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