Вивчаємо Flash та ActionScript разом

…уроки Flash, створення банерів, розробка ігор, ActionScript 3

Підпишіться на оновлення цього блога
  • Головна
  • Про блог
  • Уроки Flash

Уроки малювання у Flash. Растрова (bitmap) VS векторна (vector) графіка!

Березень 16, 2009  
Розміщено в категорії: Flash, Малювання, Теорія, Уроки    
Tweet

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

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

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

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

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

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

Коментарів: 12 22,377 views

Урок 6. Рухаємо об’єкти по кривій: Функція Motion guide у Flash

Березень 12, 2009  
Розміщено в категорії: Flash, Практика, Уроки    
Tweet

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

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

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

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

Коментарів: 4 9,576 views

Урок 5. Об’єднуємо можливості автоматичної та покадрової анімації. Рухомий крокуючий чоловічок

Березень 6, 2009  
Розміщено в категорії: Flash, Теорія, Уроки    
Tweet

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

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

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

  3. Виберіть опції сцени 300х102 (ширина довільна, висота відповідає висоті зображення), а кількість кадрів встановіть, приміром, у положення 12 кадрів на секунду.
  4. Читати далі про об’єднання frame та motion tween у Flash…

Коментарів: 5 10,145 views

Як розважаються флешери

Березень 5, 2009  
Розміщено в категорії: Flash, Загальна    
Tweet

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

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

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

  • Компанія Neversleep – двічі клікнути на щит
  • Читати далі про приколи флешерів…

Коментарів: 8 8,739 views

Урок 4. Використання «підказок форми» (shape hints) для автоматичної анімації форми (shape tween) у Flash

Березень 4, 2009  
Розміщено в категорії: Flash, Практика, Уроки    
Tweet

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

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

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

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

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

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

Коментарів: 6 10,822 views

Урок 3. Автоматична анімація форми (shape tween) у Flash

Березень 2, 2009  
Розміщено в категорії: Flash, Практика, Уроки    
Tweet

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

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

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

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

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

Коментарів: 6 13,377 views

Урок 2. Створення автоматичної анімації (tweening) у Flash. Принципи роботи Motion Tween.

Лютий 27, 2009  
Розміщено в категорії: Flash, Практика, Уроки    
Tweet

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

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

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

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

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

Коментарів: 10 15,815 views
 Сторінка 10 з 11  « First  ... « 2  3  4  5  6  7  8  9  10  11 »
  • Категорії

    • ActionScript
    • Flash
    • Загальна
    • Малювання
    • Практика
    • Результати і статистика
    • Софт
    • Теорія
    • Уроки
  • Блогролл

    • Best flash games
    • Flash Animation
    • Maque.org.ua
    • The Gamest
    • Xitri.com
    • Ант Карлов блог
  • Архіви

    • Жовтень 2016
    • Жовтень 2015
    • Грудень 2014
    • Листопад 2014
    • Березень 2014
    • Листопад 2013
    • Жовтень 2013
    • Травень 2013
    • Березень 2013
    • Січень 2013
    • Грудень 2012
    • Листопад 2012
    • Жовтень 2012
    • Квітень 2012
    • Березень 2012
    • Лютий 2012
    • Грудень 2011
    • Листопад 2011
    • Жовтень 2011
    • Вересень 2011
    • Серпень 2011
    • Липень 2011
    • Червень 2011
    • Травень 2011
    • Квітень 2011
    • Березень 2011
    • Січень 2011
    • Грудень 2010
    • Листопад 2010
    • Жовтень 2010
    • Вересень 2010
    • Липень 2009
    • Квітень 2009
    • Березень 2009
    • Лютий 2009
    • Січень 2009
  • Останні публікації

    • Get A Little Gold: Реліз!
    • Get A Little Gold на завершальній стадії
    • Растеризація як спосіб підвищення швидкодії ігор: Кешуємо анімації
    • Растеризація як спосіб підвищення швидкодії ігор: Cache as Bitmap вручну!
    • Збереження (save) та завантаження (load) ігрового прогресу з допомогою SharedObject
  • Останні коментарі

    • Mojavepev до Get A Little Gold: Реліз!
    • erotik до Великі числа у ActionScript 3. Коли виникають і чим пояснюються неточності типу даних Number?
    • Boschiok до Get A Little Gold: Реліз!
    • Samuelaloke до Привіт, світе! або Мрії повинні збуватися…
    • Interfacelgx до Get A Little Gold: Реліз!
  • Теги

    flash game Уроки веб-програмування реліз урок ActionScript ігри Event Listeners гра Adobe статистика автоматична анімація черепаха pen tool розробка навчання Практика turtle dreams to fly Flash скрінкаст уроки ActionScript векторна графіка флеш символ symbiosis bitmap банер уроки flash motion tween tween малювання анімація AS3 відео програмування посібник ActionScript 3 вибух Adobe Flash CS4 флеш-гра
  • Спонсори

©2008-2021 Вивчаємо Flash та ActionScript разом
Дизайн Dezzain Studio
UA TOP Bloggers