Я майже впевнений, що раніше вам неодноразово доводилося зустрічатися з цим ефектом, оскільки він дуже гарно виглядає і робить банер більш пишним. Дизайнери настільки закохані у цей прийом, що, складається враження, готові використовувати його всюди, де це тільки можливо.

Шар маска (mask layer)

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

1. Перше, що нам потрібно, це створити новий флешовий документ і додати у нього будь-який текст. Шрифт для тексту, який буде анімуватися відблиском, зазвичай вибирається досить великим і помітним (хоча це й не обов’язкова умова). Наприклад, ось такий:



2. Додайте ще один шар (layer) і скопіюйте туди текст. Розташуйте цей текст таким чином, щоб він повністю закривав попередній. Виберіть для нього світлий колір (який буде кольором відблиску). В ідеалі – білий.
3. Відконвертуйте другий шар у символ (тип graphic) і поставте для нього рівень прозорості (opacity) 60-70%. (Детальніше про принципи функціонування символів у флеш читайте у відповідній статті). Для того, щоб в результаті нашої анімації текст виглядав трішки об’ємним, зсуньте верхній шар з текстом на два пікселі вгору і на два праворуч, по відношенню до основного тексту. Таким чином, щоб тести накладалися не ідеально, а між ними виникав невеличкий пробіл. У мене вийшло щось таке:



4. Розтягніть обидва шари на 30 кадрів (рівно стільки триватиме анімація), оскільки жоден з них не змінюватиметься. Для цього вставте ключовий кадр у 30-му кадрі обидвох шарів.
5. А тепер починається найцікавіше. Додайте третій шар вгорі над двома наявними і клікніть правою клавішею по його назві. У випадаючому меню виберіть опцію маска (Mask)



При цьому шар перетвориться на маску Це означає, що будь-які елементи, які будуть розташовані на нижчому шарі (безпосередньо над шаром маскою), стануть невидимими до тих пір, поки на них не буде розташовано об’єктів із маски. Звучить трохи складно. Але зараз все стане зрозуміло на прикладі.

6. Починаємо редагувати третій шар (той, що знаходиться найвище). Додаємо туди два прямокутники (з виключеними контурами для зручності). Колір прямокутників не має значення. Власне, ці прямокутники і будуть створювати наші відблиски, і саме їх ми будемо анімувати. У мене ці прямокутники виглядають приблизно так:



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

7. Для третього шару, де знаходяться наші два прямокутники, створюємо motion (classic) tween, в якому рухаємо прямокутники з лівого боку в правий. Сподіваюся, ви вже вмієте це робити. Детальніше про принципи функціонування автоматичної анімації руху (motion tween) ви також можете прочитати у відповідній статті.
8. Якщо ви все зробили правильно, то у вас вийшов ось-такий кліп:

Зберігаємо і публікуємо його! Насолоджуємося результатом.

Зрозуміла річ, що форма маски відіграє тут найважливішу роль. Ми можемо як завгодно змінювати маску, перевертати її, робити напівпрозорою чи по-різному розмивати (щоб тінь від відблисків виглядала більш природньою). Але основні принципи вже зрозумілі. Експериментуйте і використовуйте, на здоров’я!

Інші записи на цю тему:

• Урок 6. Рухаємо об’єкти по кривій: Функція Motion guide у Flash
• Урок 5. Об’єднуємо можливості автоматичної та покадрової анімації. Рухомий крокуючий чоловічок
• Урок 2. Створення автоматичної анімації (tweening) у Flash. Принципи роботи Motion Tween.
• Урок 7.1. Банери у Flash. Вчимося створювати прості банери. Стаття 2
• Уроки малювання у Flash. Растрова (bitmap) VS векторна (vector) графіка!

Для роботи ви можете використати уже готовий Flash-файл з намальованим м’ячиком, або ж, користуючись покроковою інструкцією з попередньої статті, намалювати м’ячик по-новому.

1. Перше, що ми зробимо – це відконвертуємо наш м’ячик в символ (Movie Clip) і трішки його зменшимо, щоб зручніше було працювати. Розміри сцени збільшимо, щоб у м’ячика було місце для стрибків. Тип Movie Clip вибрано для того, щоб вкласти анімацію у сам м’ячик (він не лише стрибатиме, але й буде обертатися).
2. Заходимо в режим редагування нашого символу і знову конвертуємо м’ячик на символ, цього разу вибираючи тип Graphic.
3. Додаємо два ключові кадри у 15 і 30 кадрах. Повертаємо наш м’ячик трішки менше, ніж на 180 градусів у 15-му і трішки менше, ніж на 360 градусів у 30-му кадрі. Створюємо класичну анімацію руху (детальніше про classic tween можна прочитати у відповідній статті). Якщо все зроблено правильно, то при публікації наш м’ячик повинен рівномірно обертатися навколо своєї осі.
4. Повертаємося в режим редагування нашого першого символу Movie Clip, додаємо ще один шар (layer) і з допомогою інструмента лінія (line tool) малюємо землю так, щоб м’ячик своєю нижньою частиною дотикався до неї.



Оскільки земля змінюватися не буде – розтягуємо тривалість цього шару на весь кліп (скажімо, 40 кадрів). Для цього вставляємо ключовий кадр на 41 кадрі.

5. Повертаємося до шару з м’ячиком і вставляємо два ключових кадри (20 і 40). У 20-му кадрі зміщуємо м’ячик вгору на відстань його стрибка. Створюємо класичну анімацію руху (classic tween) у обидвох проміжках. Тепер наш м’ячик почав літати вверх-вниз.

Але погодьтеся, поки-що ілюзії стрибка, на жаль, не виникає. М’ячик просто плавно рухається і обертається навколо своєї осі. Та це не біда – в наступному кроці ми це виправимо.

6. При стрибку м’ячик повинен рухатися не плавно, а зі сповільненням. Найбільша швидкість у нього буде в момент відштовхування від землі, а далі, по мірі набирання висоти, вона буде сповільнюватися (оскільки в реальності на м’ячик діють звичайні фізичні сили, як от тертя повітря та гравітація). Завдання аніматора – передати ці фізичні сили у кліпі.

На щастя розробники флеш вклали стандартну функцію пришвидшення та сповільнення автоматичної анімації у саму програму, тому нам не доведеться ламати голову, як це зробити вручну. Функція називається Ease (сповільнення) і вимірюється від -100 (максимальне пришвидшення) до +100 (максимальне сповільнення).

Для того, щоб вставити цю функцію, вам потрібно обрати спершу проміжок між 1-им та 20-им кадром і в панелі опцій вибрати максимальне сповільнення (коли м’ячик підстрибує вгору – він сповільнюється). Для цього вписуємо параметр ease – “100″.



У другому проміжку (між 20-им та 40-им кадром) вписуємо параметр ease – “-100″, оскільки, наближаючись до землі м’ячик повинен пришвидшуватися.

7. Наш кліп фактично готовий. Але для повної реальності йому не вистачає всього однієї невеличкої деталі. Б’ючись об землю м’яч повинен деформуватися. Для цього додаємо 41-ий ключовий кадр (м’яч на землі), в якому з допомогою інструмента вільна трансформація (Free Transform Tool) «розплющуємо» м’ячик по-вертикалі.



8. Зберігаємо та публікуємо наш кліп. Повинно вийти щось таке:

Сподіваюся, сьогоднішній урок був для вас цікавим. Залишайтеся на зв’язку! Думаю, в наступних публікаціях ми зробимо цей м’ячик інтерактивним (він реагуватиме на дії користувача).

Інші записи на цю тему:

• Урок 3. Автоматична анімація форми (shape tween) у Flash
• Вся інформація, яка потрібна flash-розробникові, в одному ресурсі!
• Урок 6. Рухаємо об’єкти по кривій: Функція Motion guide у Flash
• Урок 5. Об’єднуємо можливості автоматичної та покадрової анімації. Рухомий крокуючий чоловічок
• Урок 2. Створення автоматичної анімації (tweening) у Flash. Принципи роботи Motion Tween.

Передусім нам потрібна заготовка, з якою ми закінчили попередній урок. Це основа банеру, залита однотонним фоном і обмежена границями, окрім того, на ній присутнє активне посилання. Все дуже просто:

Тепер спробуємо додати в цей банер трохи життя. Для цього ми скористаємося функціями motion tween, детально описаними у одному з попередніх уроків. Для простоти я обрав текстову анімацію (тобто працювати ми будемо з текстом).

1. Перш за все потрібно вигадати короткий салоган, який з’являтиметься на банері. Можливо – кілька влучних фраз або словосполучень, які можна умовно розділити на логічні одиниці. Я вирішив обмежитись трьома фразами, які почергово з’являтимуться на банері. «Анімація, ігри, банери -> Flash для новачків -> Просто, доступно і абсолютно безкоштовно».
2. Вибираємо самий нижній шар (layer) і додаємо туди першу фразу. Для цього скористаємося інструментом Text Tool. Колір і розмір, а також шрифт обираємо самостійно. А можна й взагалі зробити напис різнокольоровим!
3. Вибираємо в панелі інструментів Selection Tool і конвертуємо текст в символ (детальніше про символи у Flash ви можете прочитати у відповідній статті). Тип символа ОБОВ’ЯЗКОВО вибираємо Movie Clip, оскільки саме в ньому відбуватиметься вся анімація. Назву можете вибирати будь-яку. Клікаємо двічі на щойно створеному символі і заходимо в режим його редагування.
4. Зверніть увагу, що в режимі редагування створеного нами Movie Clip текст перестав бути символом. Ще раз конвертуємо його в символ, цього разу обираючи тип поведінки Graphic.
5. Тепер ми можемо додати анімацію motion tween (classic tween). Давайте зробимо так, щоб текст «виїжджав» на сцену з лівого боку, кілька секунд знаходився на сцені (щоб відвідувач встиг його прочитати) і потім зникав у правому кутку. Для цього у першому ключовому кадрі переносимо символ ліворуч за рамки сцени. У другому ключовому кадрі (на віддалі, скажімо, 15-ти кадрів) текст переносимо на центр банера. Клікаємо правою клавішею на проміжку між двома ключовими кадрами і обираємо Classic Tween (для більш давніх версій Flash – Motion Tween).

Ви створили першу анімацію – тепер текст виїжджає на сцену з лівого боку банера. Можете протестувати кліп, натиснувши комбінацію клавіш Ctrl+Enter. (Детальніше про створення автоматичної анімації classic (motion) tween ви можете прочитати у відповідній статті).

6. Визначте час, який потрібен вашому відвідувачеві для того, щоб прочитати повідомлення. Наприклад – 2 секунди! Множимо кількість секунд на вибрану вами частоту кадрів (за замовчуванням – 12, у моєму випадку - 24) і вставляємо черговий ключовий кадр через ту кількість кадрів, яка у нас вийшла (у моєму випадку 15+48 = 63(65) кадр).
7. Додаємо останній ключовий кадр через 15 кадрів (у 80-му кадрі). В ньому виносимо наш текст праворуч за рамки банера. Створюємо Classic Tween. Маємо повний цикл «поїздки» тексту. Можна протестувати кліп. У моєму випадку він виглядає так:
8. Настав час додати інші дві фрази. Оскільки обидві ці фрази також будуть графічними символами, щоб не виникало проблеми з їхнім відображенням та рухом, краще створити кожен з них у своєму власному шарі (layer). Просто створіть ще два шари і додайте у кожен з них по графічному символу з текстом (за аналогією до того, як ви додали перший графічний символ).
9. Повторюємо анімацію, яку зробили з першим символом, для другої та третьої фрази. Єдине застереження (хоча воно повинно бути очевидним): оскільки рух наших фраз буде послідовним (перша пішла – друга прийшла), то початок анімації другого символу повинен припадати на закінчення анімації першого (80-ий кадр), а третього – на закінчення другого (160-ий кадр). У вас повинно вийти щось приблизно таке:
10. Тестуємо і публікуємо банер.

По суті наш банер готовий. Щоправда – це найпростіший його варіант (який, тим не менше, вже можна використовувати на сайтах). Експериментуючи з різними варіантами автоматичної анімації (motion tween), ви можете додати практично будь-які ефекти (прозорості, кольору, трансформації, тощо) і буквально за кілька митей змінити ваш банер до невпізнаваності. Наприклад, ось так:

Сподіваюся цей урок був для вас корисним. Найближчим часом очікуйте більш складних і водночас – цікавих тем.

Інші записи на цю тему:

• Урок 7. Як зробити банер у Flash: Вчимося створювати прості банери
• Анімаційні ефекти у банерах. Відблиски на тексті
• Урок 8. Навчаємо м’ячик стрибати, використовуючи ефект motion (classic) tween у Flash
• Вся інформація, яка потрібна flash-розробникові, в одному ресурсі!
• Урок 6. Рухаємо об’єкти по кривій: Функція Motion guide у Flash

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

1. Створення основи (сцени, на якій розгортатиметься вся дія банері)
2. Лінкування (прив’язування банера до того чи іншого сайту, на який він посилатиметься)
3. Створення анімаційного ряду (того, що побачить відвідувач і що спонукатиме його перейти за лінком)

Створення основи: тло та поля

Створення основи – це, мабуть, найпростіший, і при цьому – дуже важливий крок при створенні банера. Перш за все потрібно визначитись з його розмірами. Я обрав один з найбільш стандартних форматів: 468 x 60.

Другий крок – це вибір тла. Тут також все просто. Для банера-прикладу я вибрав світло-блакитний колір. Насправді, мені дуже імпонують банери у світлих кольорах. Ви можете обрати будь-який інший колір, який вам подобається.

Нарешті – створення полів (рамок) вашого банера. Цей крок необов’язковий, якщо ви працюєте з темним тлом (бо в такому разі банер доволі помітно виділятиметься на сцені).

Якщо ж йдеться про світлі банери – краще обмежити їх полями, щоб вони краще виділялися і впадали у око. Я зазвичай використовую колір тла, але набагато темніший. У деяких випадках рамки не використовуються навіть при світлому кольорі тла – але тут усе вже залежить від ідеї та уяви дизайнера.

Якщо з розміром та тлом все зрозуміло, то про створення рамок я розповім трішки детальніше:

1. Створюємо окремий шар (layer), в якому будемо малювати тільки наші рамки (щоб у майбутньому вони не заважали нашій анімації). Цей шар повинен знаходитися вище, ніж основний.
2. Оберіть інструмент чотирикутник Rectangle Tool у панелі інструментів.
3. Вимкніть заливку, обравши перекреслену червоною лінією іконку у таблиці виборів кольорів заливки



4. Тепер ваш інструмент буде малювати чотирикутник, який складається виключно з контуру (без заливки). Акуратно малюємо чотирикутник, який точно повторює форму нашого банера (таким чином, щоб контур обмежував границі банера).
5. Зберігаємо файл і публікуємо його (Shift+F12 або ж пункт File -> Publish). У папці зі збереженим файлом повинен з’явитися однойменний html-файл. Запускаємо його – банер повинен відобразитися у браузері. Якщо всі чотири рамки видно – все гаразд. Якщо якась із них не відображається, значить ви не зовсім точно намалювали контури чотирикутника – повертаємося до кроку #3.

Результат повинен вийти приблизно таким:

Створення посилання на сайт

На жаль, флеш не передбачає створення посилання безпосередньо під час вставки банера у сайт (тобто методами html). Тому впроваджувати лінк у банер потрібно під час розробки. В даному прикладі ми будемо користуватися методами Action Script 3.0 (оскільки ця версія скрипкової мови, безперечно, має неабиякі перспективи і буде розвиватися). Втім, якщо вас цікавить створення посилань у Action Script 2.0 – прочитайте статтю Віталія про те, як робити банери клікабельними.

1. Створюємо ще один шар (layer) над тими двома, що уже наявні у шкалі часу (timeline).
2. Вибираємо інструмент чотирикутник (rectangle tool) і вимикаємо цього разу контури (клікаємо на іконку, перекреслену червоним кольором в панелі вибору кольорів для контурів (stroke color).
3. Знову обводимо повністю нашу сцену (колір заливки не має значення, оскільки ми все-рівно робитимемо цей елемент прозорим).
4. Конвертуємо дану заливку на символ (детальніше про символи та їх створення можна прочитати у однойменній статті ), але при цьому ОБОВ’ЯЗКОВО вибираємо тип символу Button.

Після створення у ефектах кольору вибираємо абсолютну прозорість



5. У полі instance-name пишемо назву нашого символу (в моєму випадку url_to_site), яка потім буде використовуватися для створення коду посилання



6. Активуємо кадр, в якому розміщена наша кнопка, і вставляємо туди наступний код:

url_to_site.addEventListener(MouseEvent.CLICK,clickHandler);
function clickHandler(event:MouseEvent):void{
navigateToURL(new URLRequest("http://адреса_вашого_сайту/"),"_blank");
}

В моєму випадку посилання веде на сторінку «Уроки флеш» на цьому сайті.

7. Зберігаємо та публікуємо банер. Якщо ви все зробили правильно – то при запуску згенерованаго html-файла банер буде активним і при кліку переводитиме вас на потрібний сайт.

Ось результат перших двох кроків.

Поки-що це просто залитий кольором контур, який реагує на клік. Але вже в наступному уроці ми перетворимо його на інтерактивний банер, додавши анімацію. Про створення анімаційного ряду читайте у наступній статті.

Інші записи на цю тему:

• Урок 7.1. Банери у Flash. Вчимося створювати прості банери. Стаття 2
• Навіщо використовувати символи у Flash? Ще кілька слів про переваги!
• Урок 8. Навчаємо м’ячик стрибати, використовуючи ефект motion (classic) tween у Flash
• Вся інформація, яка потрібна flash-розробникові, в одному ресурсі!
• Уроки векторного малювання у Flash. Урок 1. Загальні принципи та елементарні інструменти (малюємо м’ячик)

Як я вже згадував: “перо” - це надзвичайно потужний інструмент для роботи з векторною графікою, і у випадку, якщо ви захочете самостійно створювати “мультяшну” анімацію - то майже напевне будете змушені засвоїти принципи його роботи. Вся справа в тому, що керуючи направляючими векторами можна досягнути практично будь-якого викривлення контурів.

Але, менше слів - дивіться відео:

Оскільки це в принципі новий для мене формат, буду надзвичайно вдячний за критику та побажання того, що можна було б зробити краще. Думаю, в майбутньому час від часу робитиму такі короткі відеоуроки, в яких “показуватиму” те, що складно пояснити на словах. Все інше по можливості залишатиметься у текстовому форматі, оскільки хто б мені що не говорив - а текст - є текст. І працювати з ним - зручніше!

UPD: ще цікавить ваша думка про якість відео! Може бути? Чи потрібно робити більш якісні відеофайли, жертвуючи при цьому трафіком (оскільки розмір відео у мегабайтах закономірно буде більшим).

Інші записи на цю тему:

• Урок 3. Малюємо новорічну ялинку з допомогою інструмента перо (pen)
• Вся інформація, яка потрібна flash-розробникові, в одному ресурсі!
• Урок 8. Навчаємо м’ячик стрибати, використовуючи ефект motion (classic) tween у Flash
• Уроки векторного малювання у Flash. Урок 2. Малювання з допомогою кривих Безьє (перо (pen) та інструмент часткового вибору (subselection tool).
• Уроки малювання у Flash. Растрова (bitmap) VS векторна (vector) графіка!

За основу, яку будемо «обмальовувати», візьмемо ось таку привабливу ялиночку, яка складається із простих контурів. Можете скопіювати зображення, щоб і собі попрактикуватися з ним.

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

1. Імпортуємо в бібліотеку (File -> Import -> Import to Library) зображення ялиночки і відразу ж розміщуємо його на сцені (не забудьте підігнати розмір сцени до розміру зображення). Шар, на якому буде розміщуватися це зображення виступатиме фоном. В наступних кроках ми будемо повторювати зображення. Тому, щоб випадково не «пошкодити» цей шар, замкнемо його у шкалі часу (timeline). Натисніть на замок



2. Додайте новий шар (layer) в шкалі часу (timeline). Він з’явиться вище, ніж наш шар із тлом (на якому розміщене оригінальне зображення ялинки). Саме у цьому шарі ви будете починати малювати з допомогою інструмента перо (pen). Виберіть цей інструмент у панелі інструментів, клікнувши мишкою по відповідній іконці або натиснувши клавішу “P”.
3. Перш, ніж безпосередньо приступити до малювання, потрібно налаштувати наш інструмент. Як бачите, я вибрав червоний колір ліній (будемо починати малюнок із зірки, а вона буде в нас червоною), вимкнув заливку і обрав ширину ліній у 2 пікселі (щоб було краще видно)



4. На зображенні зірка намальована пунктирною лінією, але нас це мало хвилює. Ми зробимо її суцільною. Малювати прямі лінії з допомогою інструмента перо насправді дуже просто. Клікніть перший раз на верхньому куті зірки, а потім на наступній точці, яку хочете з’єднати. Між двома точками з’явиться абсолютно пряма лінія. Потім переходимо до наступної вершини і так далі.



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



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

5. По аналогії з тим, як ми замкнули самий нижній шар, замкнемо наш шар із зіркою. Наступний контур будемо створювати на новому шарі (створіть його), щоб уникнути перетину із зіркою. Для цього виберемо темно-зелений колір у панелі налаштування інструмента перо (pen) (а як же інакше – ми ж все-таки ялинку малюємо).

Як бачимо, наша зірка умовно складається із чотирьох елементів-поверхів. Ми намалюємо тільки один з них – самий верхній. Інші по суті є повторенням верхнього, тому з ними проблем виникнути не повинно.

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

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



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

Спеціально записав короткий скрінкаст, в якому показано, як створювати контур “верхнього поверху” ялинки з допомогою інструмента “перо”. Подивитися його можна за посиланням. Думаю, відразу все стане ясно!

В результаті у вас повинно вийте ось таке зображення



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

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



8. Можете скопіювати кульку і в тому ж шарі (layer) розкидати її по відповідних місцях на шаблоні (не зважайте, що ми поки-що не домалювали саму ялинку). Колір кульок також можна буде змінити, вибравши їх з допомогою інструмента вибору (selection tool). Результат не примусить себе довго чекати.



9. За аналогією зі всіма попередніми кроками закриваємо і цей шар (з кульками) від редагування. А далі починається найцікавіше. Нам належить домалювати ялинку.

Якщо придивитися, можна звернути увагу, що всі «поверхи» ялинки як дві краплі води схожі один на одного. Тому ми не будемо малювати їх чотири рази, а просто скопіюємо наш «перший поверх» і збільшимо його до потрібних розмірів. Для цього вставте три нових порожніх шари (для кожного поверху) і розмістіть їх (просто перетягніть) нижче під шар із першим поверхом.

10. Закрийте всі зайві шари (із зіркою та кульками) від редагування і перегляду. Для цього окрім замка поставте на них (у шкалі часу) хрестик навпроти ока. Шари стануть невидимими і не будуть нам заважати. Після цього тимчасово відкрийте вміст шару із «першим поверхом» ялинки і скопіюйте його у буфер з допомогою стандартної комбінації клавіш Ctrl+C. Знову закрийте шар і виберіть порожній (щойно створений) шар безпосередньо під ним. Вставте зображення з допомогою комбінації Ctrl+V.
11. Виберіть у панелі інструментів вільну трансформацію (free transform tool). При цьому навколо щойно вставленого вами зображення з’явиться чотирикутник з точками на кутках. Схопіть мишкою за один із кутів цього чотирикутника, і затиснувши клавішу shift розтягніть зображення (клавіша shift дозволяє зберегти пропорції). Мабуть, ви вже здогадалися, що ми намагаємося зробити.

Досягніть максимального співпадіння із «другим поверхом» ялинки і перемістіть контур туди, де він і повинен знаходитися. Потім повторіть кроки 10 і 11 для третього та четвертого (найнижчого) поверхів.



Зображення виглядає не дуже привабливо, оскільки ми поки-що не заливали контури кольором і як наслідок всі лінії видно (вони виглядають із-під зображення).

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



13. Тепер переходимо до розфарбовування. Якщо ви все зробили правильно і розмістили шари таким чином, як було описано у попередніх пунктах, то проблем з розфарбовуванням не виникне. Виберіть інструмент заливки (paint bucket tool) і почергово відкриваючи відповідні шари розфарбуйте ялинку у потрібні кольори (я вибирав трішки світліші кольори, ніж колір самих контурів). Для розфарбовування просто клікніть «відром» всередині відповідного контуру. Як бачите, все просто. Починайте з нижніх шарів і переходьте до верхніх.

(Якщо з якихось причин контури не зафарбовуються, значить ви не «закрили» їх. В такому разі відредагуйте контур з допомогою інструмента вибору (selection tool). Просто вхопіть цим інструментом за кінчик прямої, яка дотикається до початку контура і при збільшеному (200% або 400%) режимі перетягніть її таким чином, щоб вона точно припасувалася до початкової прямої. Тобто зробіть так, щоб контур був повністю закритий. Як варіант, просто виберіть в налаштуваннях вашого paint bucket tool опцію «закривати великі проміжки» (close large gaps))



14. Вітаю. Результатом цієї кропіткої роботи стала ось така приваблива ялиночка

А якщо ви уважно пройшли весь цей урок і зуміли намалювати таку ялиночку, то навчилися не тільки користуватися інструментом перо (pen), але й вдосконалили свої навички в управлінні шарами (layers) та навчилися працювати із простою заливкою (paint bucket tool).

Якщо у вас виникли будь-які запитання, що стосуються уроку, не соромтесь задавати їх у коментарях.

А я думаю, проведу ще один міні-урок по роботі з інструментом pen, який дозволяє створювати контури практично будь-якої складності. Якщо буде потрібно – то запишу спеціальний відеокаст. Бо продемонструвати роботу цього інструменту у відео набагато простіше, ніж описати все це словами. Дякую за увагу. І залишайтеся на зв’язку.

Інші записи на цю тему:

• Уроки векторного малювання у Flash. Урок 2. Малювання з допомогою кривих Безьє (перо (pen) та інструмент часткового вибору (subselection tool).
• Скрінкаст: Практичний урок малювання з допомогою інструмента “перо” (pen tool).
• Уроки малювання у Flash. Растрова (bitmap) VS векторна (vector) графіка!
• Анімаційні ефекти у банерах. Відблиски на тексті
• Урок 8. Навчаємо м’ячик стрибати, використовуючи ефект motion (classic) tween у Flash

Отже, можливість безпосереднього керування кривими Безьє з’явилася ще у п’ятій версії Flash. Для роботи з ними у програмі виділено відразу два інструменти. Це вже згадуваний нами інструмент перо (pen), а також інструмент часткового вибору (subselection tool).

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

Як же працюють криві Безьє?

Щоб не записувати абсолютні координати кожної точки кривої лінії, у векторній графіці прийнято позначати координати «керуючих» точок лінії, а також напрямок лінії і величину кривизни у кожній із подібних точок. Для цього використовують спеціальний математичний апарат, вперше використаний Безьє.

У графічних програмах обидва ці параметри зазвичай відображають з допомогою вектора. Напрям цього вектора вказує на напрям кривої, а довжина визначає ступінь кривизни.

На практиці це означає, що на будь-якій кривій лінії обов’язково присутні кілька таких «керуючих» точок, які ще називають вузлами.

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

Пояснити роботу кривих Безьє доволі складно, а на словах – майже неможливо. Тому найкращим уроком буде власна практика. Потрібно запам’ятати тільки дві речі: додаткові вузли на лінії додаються інструментом перо (pen), а модифікація самих векторів здійснюється з допомогою інструмента часткового вибору (subselection tool).

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

Через деякий час ви відчуєте, за якою логікою працює цей інструмент. А як це використати на практиці - ми розглянемо в одному з наступних уроків.

Інші записи на цю тему:

• Урок 3. Малюємо новорічну ялинку з допомогою інструмента перо (pen)
• Уроки малювання у Flash. Растрова (bitmap) VS векторна (vector) графіка!
• Скрінкаст: Практичний урок малювання з допомогою інструмента “перо” (pen tool).
• Уроки векторного малювання у Flash. Урок 1. Загальні принципи та елементарні інструменти (малюємо м’ячик)
• Анімаційні ефекти у банерах. Відблиски на тексті

Але перш, ніж перейти до ідеї розвитку блога про Flash, PHP та веб-програмування, я хотів би поділитися кількома спостереженнями, які стосуватимуться інших ресурсів в Інтернеті та зокрема паперових видань.

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

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

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

Друга «сторона медалі» – інтернет. Він, начебто, знімає всі обмеження, які (принаймні, поки що) є абсолютно нездоланними для книжкового формату. Тобто теоретично в Інтернеті можна було б створити «ідеальний» посібник. Але це тільки в теорії.

На практиці ж ми бачимо засилля практично жодним чином не впорядкованих (категорезованих хіба що тематично, рідше – за рівнем складності) уроків, які мавпують сам процес навчання. Тобто банально вам розповідається куди потрібно клікнути і яку кнопку натиснути, але не пояснюється, навіщо це робити. Ось і виходить, що при вдалому збігу обставин в результаті всіх маніпуляцій ви отримаєте анімацію, яку намагалися створити. Але при цьому не матимете жодного уявлення, як у вас це вийшло.

Особливого абсурду ця ситуація досягає у випадках, коли вам пропонується програмувати на флеш (методами вбудованої мови Action Script). Але замість того, щоб пояснити принципи функціонування цієї мови, банально дається код, який потрібно вставити у той чи інший об’єкт або кадр. І… вуаля… все працює! А чому працює? На це питання ніхто не дасть відповіді!

Звісно ж, я не хочу сказати, що всі уроки є настільки поганими. Іноді в мережі трапляються доволі таки достойні збірники задачок, які дійсно дозволяють розібратися у принципах функціонування. Але такі доводиться по дещицях збирати на різних ресурсах. Одного консолідованого джерела немає! Я вже мовчу про те, що все це у 90% випадків на англійській мові.

Яким повинен бути «ідеальний» ресурс про Flash?

Зі всього, сказаного вище, вимальовується доволі таки чітка картина, яким повинен бути по-справжньому якісний навчальний ресурс по флеш.

По-перше, він повинен бути достатньо інтерактивним (щоб дати змогу відвідувачам задавати запитання щодо уроків, які вони проходять).

По-друге – мати багато прикладних матеріалів та покрокових інструкцій щодо створення конкретних різновидів анімації з допомогою тих чи інших інструментів та алгоритмів.

По-третє – потрібно, щоб всі ці уроки підкріплювалися дуже потужною методологічною базою. Щоб учні не просто вчилися «мавпувати» те, що каже їм автор, але й реально починали розуміти «що?» і «навіщо?» вони роблять. В ідеалі кожна практична інструкція повинна підкріплятися достатньою кількістю методологічних матеріалів, які пояснюють саму механіку роботи Flash.

Ну і на решті (по-четверте), вся ця велетенська база матеріалів повинна бути відповідним чином структурована. Щоб людина, яка вперше потрапила на сайт, могла у залежності від свого рівня знань знайти матеріал, з якого їй варто почати знайомство із флешем. І звісно ж, щоб процес цього знайомства був логічним, послідовним і бажано – безперервним.

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

Залишилося тільки питання, як втілити все це в рамках одного блога?

Поки що відповідь на нього я вбачаю так: перш за все необхідно наповнити блог першими опорними методологічними матеріалами, відштовхуючись від яких можна буде переходити до більш складних тем. Властивість Інтернету, яка дає можливість проставляти посилання на будь-які статті стає тут в нагоді. Адже пишучи про створення якогось складного ефекту можна завжди поставити лінк на всі матеріали, необхідні для розуміння цього уроку.

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

Таким чином постійні читачі матимуть змогу як стежити за поточними оновленнями на блозі через RSS (можна навіть поділити стрічки за тематикою: Flash, PHP, html, CSS і т. п.), так і вибирати необхідні їм матеріали безпосередньо у структурованих каталогах. Для нових же відвідувачів, які прийшли на блог з єдиною метою – освоїти якийсь новий для себе предмет – потрібно створити зручний тематичний покажчик і знову ж таки – зручну структуру каталогів, яка б давала доступ до всіх статей на блозі.

Ось так воно все виглядає в теорії. На практиці ж це велетенська робота, яка лише починається. Подивимося, наскільки вистачить запалу і натхнення, щоб втілювати її у життя.

Якщо ви осилили цю аж ніяк не коротку статтю, поділіться своїми враженнями. Що ви могли б ще додати? Що змінити? Буду надзвичайно вдячний за коментарі!

Інші записи на цю тему:

• Урок 8. Навчаємо м’ячик стрибати, використовуючи ефект motion (classic) tween у Flash
• Урок 3. Автоматична анімація форми (shape tween) у Flash
• Навіщо використовувати символи у Flash? Ще кілька слів про переваги!
• Урок 7.1. Банери у Flash. Вчимося створювати прості банери. Стаття 2
• Скрінкаст: Практичний урок малювання з допомогою інструмента “перо” (pen tool).

Настав час переходити безпосередньо до практики.

У сьогоднішньому уроці ми навчимося користуватися найпростішими інструментами для малювання у Flash. Але нехай вас не вводить у оману слово «найпростіші». Адже саме з їхньою допомогою у флеші створюється графіка фактично будь-якої складності. Головне – майстерність. А вона, як відомо, приходить із часом.

Завдання даного уроку – показати основні принципи функціонування векторної графіки у флеші та навчитися користуватися ними на практиці (чи, простіше кажучи, створювати малюнки).

Звісно, можна було б розповідати про роботу таких інструментів як лінія (line), прямокутник (rectangle), овал (oval) і т. п.. Але, щоб урок не видавався занадто нудним, ми просто спробуємо з нуля намалювати пляжний м’ячик, подібний до того, який вже використовувався у одному з попередніх уроків про автоматичну анімацію (motion tween) у Flash.

Я описуватиму всі кроки максимально детально, щоб їх змогли повторити навіть люди, яким раніше ніколи не доводилося працювати із флешем (чи будь-якими іншими векторними редакторами).

1. Перше, що нам знадобиться, це інструмент овал (oval tool), який потрібно вибрати у панелі інструментів (детальніше про інтерфейс Flash можна прочитати за посиланням)



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



3. Тепер, затиснувши клавішу SHIFT, намалюйте на сцені коло, приблизно таке, як на малюнку нижче.



Зверніть увагу, що якщо ви не затиснете клавішу SHIFT, то у вас вийде овал. А затискання цієї клавіші автоматично призводить до того, що малюються «правильні» об’єкти, такі як коло.

4. Виберіть на панелі інструментів лінію (line tool) і намалюйте пряму, яка перетинатиме ваше коло близько до центру. Результат повинен вийти приблизно наступним:



Зверніть увагу на те, що коли ви наближаєте курсор близько до контуру кола, він неначебто автоматично «приклеюється» до нього. Ця опція нам на руку, оскільки дозволяє малювати більш точно.

5. Скориставшись інструментом вибору (selection tool), ухопіть приблизно за середину щойно намальованої лінії і перетягніть її трішки праворуч, щоб утворилася дуга.



6. Тепер починається найцікавіше. Створіть новий шар (new layer) клікнувши по відповідному значку на шкалі часу (timeline) так, як показано на малюнку.



7. Тепер у цьому новому шарі намалюйте ще одну лінію у колі, так, щоб вона дотикалася до контура кола і при цьому проходила приблизно через центр. Але зробіть це під нахилом, так щоб лінія трішки перетинала намальовану нами раніше дугу. Ось як це повинно виглядати



8. Як описано у 5-му кроці, перетягніть другу лінію таким чином, щоб утворилася ще одна дуга



9. Тепер нам потрібно скопіювати другу лінію на перший шар (щоб вона почала взаємодіяти з попередньо намальованими об’єктами). Для цього виберіть її клікнувши по ній інструментом вибору (selection tool) і скопіюйте у «буфер» стандартною комбінацією клавіш Ctrl+C. Після цього другий (допоміжний) шар можна видалити. Вставляємо дугу в перший шар комбінацією клавіш Ctrl+V і стрілочками на клавіатурі переміщаємо її у потрібне місце.
10. Тепер весь шар із лініями функціонує як єдиний об’єкт. Ми можемо залити відповідні його елементи іншим кольором. Виберемо цей колір у опції fill color (там, де раніше у нас був блакитний). Я обрав жовтий.



11. Насамкінець, вибравши в панелі інструментів відро заливки (paint bucket tool) клікніть всередині тих елементів, колір яких хочете змінити. Оце й усе. В результаті у нас вийшов ось такий пляжний м’яч в кольорах національного прапора:

Звісно, до творів видатних художників Відродження цьому малюнку ще дуже далеко. Але для використання у мультфільмах та іграх, зроблених на флеш він цілком підходить. Сподіваюся, цей урок допоміг вам зрозуміти основні принципи векторного малювання у Flash.

Залишайтеся на зв’язку. Попереду ще багато цікавого. Обіцяю, що у якомусь із наступних уроків ми навчимо цей м’яч стрибати. А щоб точно цього не пропустити - обов’язково підпишіться на оновлення блога про Flash, PHP та веб-програмування.

Інші записи на цю тему:

• Уроки малювання у Flash. Растрова (bitmap) VS векторна (vector) графіка!
• Урок 3. Автоматична анімація форми (shape tween) у Flash
• Навіщо використовувати символи у Flash? Ще кілька слів про переваги!
• Урок 8. Навчаємо м’ячик стрибати, використовуючи ефект motion (classic) tween у Flash
• Урок 7.1. Банери у Flash. Вчимося створювати прості банери. Стаття 2

Єдине, що втішає - тепер сайт повинен почати працювати швидше…

Схожих записів не знайдено

• Урок 1. Створюємо перший Flash-кліп з елементами покадрової анімації (крокуючий чоловічок).
• Урок 4. Використання «підказок форми» (shape hints) для автоматичної анімації форми (shape tween) у Flash
• Macromedia Flash 8 Pro VS Adobe Flash CS4
• Урок 2. Створення автоматичної анімації (tweening) у Flash. Принципи роботи Motion Tween.
• Анімаційні ефекти у банерах. Відблиски на тексті