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

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

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

Будь-яке зображення може бути представлене у комп’ютері двома способами. Розуміння принципової різниці між ними допоможе вам працювати із флешем більш ефективно.

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

Читати далі про різницю між растровим та векторним представленням графічної інформації…

Протягом серії попередніх уроків ми навчилися використовувати функції покадрової та автоматичної анімацій, а також дізналися про різновиди shape та motion (classic) tween. Сьогодні ж поговоримо про функцію motion guide, яка, на зразок функції shape hints для анімації форми, дозволяє контролювати поведінку об’єктів під час автоматичної анімації руху (motion tween).

Суть тут надзвичайно проста: якщо створити елементарну автоматичну анімацію руху, в якій об’єкт повинен переміститися з однієї точки в іншу, то таке переміщення буде відбуватися по найкоротшій траєкторії (прямій). Якщо ж вам потрібно досягнути зміни траєкторії – потрібно вдаватися до хитрощів. Звісно, можна задати декілька десятків ключових кадрів на шкалі часу (timeline) і тим самим чітко проконтролювати рух об’єкта. Але набагато простіше буде скористатися функцією motion guide. Motion guide – це крива, по якій буде рухатися ваш об’єкт.

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

Читати далі про використання функції motion guide у flash…

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

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

1. Перш за все створіть новий проект Flash (версія Action Script, як завжди, значення не має) і імпортуйте в бібліотеку чотири зображення «крокуючого чоловічка». Для того, щоб полегшити вам життя, я знову викладаю всі чотири зображення, які ви можете легко завантажити.



2. Виберіть опції сцени 300х102 (ширина довільна, висота відповідає висоті зображення), а кількість кадрів встановіть, приміром, у положення 12 кадрів на секунду.

Читати далі про об’єднання frame та motion tween у Flash…

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

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

Нижче наведено перелік ресурсів, разом з вказівками того, куди потрібно перейти і на що “клікнути”, щоб все “таємне” стало явним. Насолоджуйтесь:

• Компанія Neversleep – двічі клікнути на щит

Читати далі про приколи флешерів…

У сьогоднішньому уроці ми розглянемо можливості використання «підказок форми» (shape hints) для контролю над автоматичною анімацією форми (shape tween) у Flash. Якщо ви пригадуєте, у попередній статті про використання функції shape tween було згадано, що алгоритми флеша сприймають всі точки анімованого об’єкта рівноцінно. А це, в свою чергу, призводить то того, що анімація (морфінг) складних об’єктів зазвичай відбувається зовсім не так, як нам цього хотілося б.

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

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

Яким же чином автор може впливати на перебіг такої анімації? Відповідь проста і геніальна водночас: для контролю складних та непередбачуваних змін форми використовуються так звані shape hints (підказки). Ці підказки ідентифікують точки, які повинні збігатися на початковому та кінцевому ключових кадрах.

Читати далі про використання shape hints у Flash…

У минулій статті ми розглянули надзвичайно цікаву тему автоматичної анімації (motion tween) у Flash. Сьогодні мені б хотілося продовжити цю тему і розповісти про ще один різновид автоматичної анімації, який дозволяє не лише рухати, змінювати колір та інші характеристики об’єкта, а фактично повністю модифікувати сам малюнок на сцені – автоматичну анімацію форми, або, як її ще називають «морфінг» (shape tween).

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

Векторна графіка і shape tween

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

Читати далі про використання функції shape tween у Flash…

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

Власне, якщо говорити про функцію tween у Flash – то варто звернути увагу, що програма підтримує два її види: автоматична анімація руху (motion tween) та автоматична анімація форми (shape tween) (у даній статті ми говоритимемо лише про перший). У Adobe Flash CS4 реалізований ще один механізм створення автоматичної анімації – Classic tween, який по суті є спрощеним варіантом функції motion tween і яким ми й будемо користуватися на перших етапах роботи з Flash.

Для яких потреб використовується Motion (Classic) tween?

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

Читати далі про motion tween та особливості його використання…