Анімація форми (морфинг)
Довідковий матеріал з основних мов програмування і верстки сайтів.
Готова методика створення простих і складних динамічних сайтів, з використанням PHP і MySQL.
Розробка веб-сайтів під "ключ".
Розробка окремих фрагментів сайтів, консультації з питань верстки веб-сторінок і веб-програмування.
Веб-інструмент
Веб-майстерня
Веб-послуги
Веб-графіка
Веб-ресурси
Хочете бути в курсі подій, що відбуваються на сайті? Підпишіться на отримання останніх новин та статей.
Подивіться в Google
Анімація форми (Морфинг). інструмент Text
Ми вже знаємо, що таке анімація Руху. Цей вид анімації безумовно є лідером Flash-анімації. Але в Flash ми можемо не тільки рухати об'єкти, але і змінити їх форму. Таким чином, наприклад, вовк може стати Зацем, а заєць ведмедем. Таку трансформацію ми можемо здійснювати за допомогою анімації Форми, або як ще її називають, морфинг або перекочування.
Морфинг, або анімація форми
Анімація форми дозволяє, задавши два ключових кадру з різними малюнками, отримати плавний перехід (перетікання) від одного зображення до іншого, з однієї форми в другу. Крім того, можна здійснити плавний перехід від одного кольору, розміру, місця розташування до іншого. Ми вже використовували це вид анімації при створенні спалаху. А тепер нам належить зробити з вовка зайця, з зайця слона, з слона ведмедя, а ведмедя зробити котом.
створення морфинга
Для створення анімації ми создадаім ключові кадри - початок і кінець анімації, наповнимо їх вмістом, задамо параметри. А інша справа техніки.
Для малювання звірів скористаємося інструментами малювання і створимо подобу того, що зображено на малюнку.
А тут ми намалюємо глядача.
При створенні нового об'єкта зі старого використовуйте інструменти Спецвиделеніе і Перо.
Ми завершили підготовчу роботу. Тепер займемося перетворенням форми.
- Для цього створимо два шари звірина моє і глядач. На них, натискаючи клавішу
, створимо через кожні 10 фреймів ключові кадри. - Пропонується наступний сценарій: в той час як звір змінює вигляд, глядач нерухомий, потім настає його черга міняти вираз обличчя, а звіра бути нерухомим. І так кілька разів. Зміна сюжетів відбувається чотири рази.
У вікні веб-браузера це буде виглядати ТАК.
проблеми морфинга
Якщо в ході тестування ролика, щось пішло не так, як планувалося, форма не підкорилася вашу задумом, а розповзається по екрану, то ось кілька правил, які в подальшому дозволять уникнути подібних помилок.
- Не зловживайте хитросплетіннями форми, особливо при наявності різноманітних квітів, дрібних деталей, які будуть трансформуватися по відомим тільки їм алгоритмам, ігноруючи ваші побажання.
- При організації руху використовуйте контрольні точки форми (це буде розглянуто пізніше). Але навіть з встановленими контрольними точками при складній формі об'єктів морфинг може піти не так.
- Якщо без складних форм не обійтися, то створіть ключові кадри з проміжними фігурами.
- Анімація форми можлива тільки в тому випадку, якщо об'єкти розгрупувати. Для розгрупування об'єктів за допомогою клавіш
+.
параметри морфинга
Якщо ми виділимо будь-який проміжний кадр морфинга, в панелі Властивості з'явиться група елементів управління (див. Рис. Вгорі). З їх допомогою ми можемо поставити деякі параметри створеного нами морфинга.
Більшість цих елементів нам вже знайоме. Тому мова піде тільки про елементи управління, які задають специфічні для морфинга параметри.
Такий елемент один - це розкривається список Змішати. У цьому списку два пункти:
- Дистрибутив - за умовчанням установлюється та дозволяє згладжувати проміжні фігури між початковим і кінцевим ключовими кадрами. Об'єкти у фреймах, які Flash генерує самостійно, виходять гладкими.
- Кутовий - алгоритм протилежний Дистрибутив. призначений для того, щоб проміжні фігури виходили більш спрощеними: незграбними, які прагнуть до використання прямих ліній. Найкраще застосовувати, коли ми маємо справу з фігурами, що складаються з прямих ліній.
Маркери морфинга і їх використання
Коли ми створюємо морфинг, ця свавільна програми часто творить, що хоче, ігноруючи наші творчі задуми. Одним із засобів змусити Flash робити те, що ми хочемо є маркери. Маркер морфинга дозволяє нам вибрати точку на аніміруемом фрагменті і жорстко поставити її місце розташування на початку і кінці анімації. Таких маркерів можна створити до 26 штук. Кожен маркер при цьому позначається маленькою латинською літерою від a до z. На початковому ключовому кадрі маркери морфинга пофарбовані в жовтий колір, а на кінцевому в зелений. Червоний колір означає, що контрольна крапка не знаходиться в даний момент на кривій.
Помітимо очі наших тварин, що дозволить не змішувати їх із загальною анімацією.
- Перейдемо на перший ключовий кадр шару звірина моє. Відкриємо меню Змінити -> Форма -> Додати контрольну точку або натиснемо комбінацію клавіш
+ + . - На вовка, який відповідає першому кадру, з'явиться початкова контрольна точка у вигляді червоного кружечка з буквою а. Передвінте цей гурток на око вовку, і ви побачите, що маркер змінив колір на жовтий.
- Виділіть другий ключовий кадр із зображенням зайця. Зверніть увагу, що з'явився кінцевий маркер на оці зайця у вигляді зеленого кружечка з тойже буквою а.
Якщо щось вийшло не так, зверніть увагу на наступне:
- Наприклад, якщо при роботі з очима, правому оці одного звіра встановлена контрольна точка з буквою а. то і правого ока другого звіра повинна відповідати та ж буква, а не буква в.
- Найкраще розміщувати контрольний точки проти годинникової стрілки, починаючи з лівого верхнього кута.
Мітка на шарі
Ви помітили, що на Шарах з'явився текст, розташований прямо на фреймах. Це імена кадрів. У верхньому лівому кутку панелі Властивості знаходиться поле введення Кадр. З його допомогою можна створити унікальне ім'я або примітка, для будь-якого кадру. Ім'я кадру буде, в основному, корисно для програмування сценарію і деяких інших можливостей. Кадр містить ім'я позначений червоним прапорцем. Кадр містить примітка має два зелених символу - /. Примітка не експортується в результуючий файл Shockwave / Flash, тому його можна зробити досить розгорнутим і не впливають на розмір файлу.
Під полем введення Кадр знаходиться розкривається список Тип написи. У ньому задається тип значення в поле введення Кадр. Ім'я кадру. Примітка. Прив'язка (Якір).
Що таке Якір. Так називається кадр, що є свого роду зачіпкою для програвача Flash. Якщо фільм відтворюється у вікні веб-браузера, користувач може скористатися кнопками Вперед і Назад цієї програми, користувач може стрибати від одного якоря до іншого. Якір позначений жовтим значком.
інструмент Текст
Текст - така ж незаменісая частина ролика, як і рух. Часто буває так, що краще написати пару слів, ніж малювати мегабайти хитромудрої графіки. Текст часто є складовою частиною зображення, заголовка сайту або назви фільму. Без тексту не створити веб-сайту, повністю зробленого на Flash.
Для створення тексту в програмі передбачений інструмент Текст. Багато в чому принципи роботи з текстом збігаються з роботою в будь-який інший програми, наприклад, з Adobe Fireworks.
Перш ніж редагувати ролик далі, розглянемо основні можливості роботи зі статичним текстом в Flash. Нижче наведені основні параметри панелі Властивості тексту. Для появи панелі, виділимо текстової блок.
Параметри тестового блоку:
- Шрифт (А) - вікно для вибору гарнітури шрифту.
- Розмір шрифту - встановлює розмір шрифту.
- Колір тексту -вікно для вибору кольору тексту. Доступний суцільний колір заливки. Підбір кольору здійснюється відкритого селектора кольору.
- Напівжирний стиль (В) - надає тексту напівжирний шрифт.
- Курсив (I) - надає похиле накреслення тексту.
- Вирівнювання - виробляє вирівнювання тексту по одному з вибраних алгоритмів.
- Змінити орієнтацію тексту - дозволяє змінювати орієнтацію тексту, вибравши зі списку один з пунктів: По горизонталі. По вертикалі зліва направо. По вертикалі справа наліво.
- Міжбуквений інтервал - вікно для установки параметрів трекінгу (збільшення або зменшення межбуквенних відстаней).
- Позиція символу - допомагає встановити положення символу на рядку: Звичайний. Підіндекс. Підрядковий індекс.
- Метод згладжування шрифту - зі списку вибирається один з агорітмов згладжування тексту.
- Автоматичний кернінг - галочка включає режим автокернінга, який дозволяє зрівнювати інтервали між буквами відстані.
Нашим завданням є створення статичних написів. Інші можливості роботи з текстом будуть більш детально розглянуті пізніше. І на останок створимо напис на створеному ролику.
Flash-аніматори, як початківці, так і досвідчені люблять такий ефект: будь-якої фрагмент зображення поступово зникає або наоботрот з'являється на екрані. Для створення цього ефекту будемо використовувати анімацію Рух. Анімація буде включати в себе не тільки рух, а й трансформацію, а також колірні ефекти. За допомогою завдання колірного ефекту прозорості наш текст буде зникати з екрану.
І так приступаємо. Створюємо новий шар і присвоюємо йому ім'я - Назва. Пишемо текст текстового блоку - "Звірина моє - дивовижні перетворення" і виводимо його за межі робочого листа (на сіре поле).
Тут виникає невелика проблема. Справа в тому, що задавати колірні ефекти можна тільки для примірників. А у нас звичайний текстовий блок.
Виділимо перший ключовий кадр шару Назва і перетворимо текстової блок в зразок. Для цього натиснемо клавішу
Після цього Flash створить зразок і перетворює текстової блок в його примірник (символ)
Тепер на 40 фреймі створимо другий ключовий кадр, а на 80 фреймі третій ключовий кадр. Виділимо другий ключовий кадр і видалимо текстової блок. Розтягнутий ключовий кадр набуде вигляду як на малюнку, стрілка, що позначає анімацію, перетворитися в пунктирну лінію. Це означає, що наша анімація тепер не має другого ключового кадру (обірвана анімація), і Flash не знає, як її закінчити.
Щоб покласти цьому край, потрібно помістити на лист другого ключового кадру екземпляр створеного зразка Назва. Вирівняні його по центру робочого листа.
Тепер змусимо назву зникнути з екрану. Виділимо третій ключовий кадр і помістимо на робочому аркуші екземпляр створеного зразка Назва. Панель Timeline прийме наступний вигляд.
Тепер виділимо 3 кадр (80 фрейм). На панелі Параметри в в списку Колір виберемо пункт Альфа. В поле введення з регулятором, розташованому правіше списку, введемо значення 0% - повна прозорість. Назва Ролика стало невидимим.
Протестуємо кліп, натиснувши поєднання клавіш
У вікні веб-браузера це буде виглядати ТАК.
публікація кліпу
Тепер заглянемо в каталог, де розташовуються Flash-документи, і звернемо увагу на те, що додався ще один документ тією ж назвою, що і вихідний Flash-файл, але з розширенням html. Запустивши його ми потрапимо на HTML-страніцус кліпом.
// installed player is some revision of 6.0
// GetVariable ( "$ version") crashes for versions 6.0.22 through 6.0.29.
// so we have to be careful.
// default to the first public version
version = "WIN 6. 0. 21. 0";
// throws if AllowScripAccess does not exist (introduced in 6.0r47)
axo.AllowScriptAccess = "always";
// safe to call for 6.0r47 or greater
version = axo. GetVariable ( "$ version");
> Catch (e) <
>
>
if (! version)
<
try <
// version will be set for 4.X or 5.X player
axo = new ActiveXObject ( "ShockwaveFlash.ShockwaveFlash.3");
version = axo. GetVariable ( "$ version");
> Catch (e) <
>
>
if (! version)
<
try <
// version will be set for 3.X player
axo = new ActiveXObject ( "ShockwaveFlash.ShockwaveFlash.3");
version = "WIN 3. 0. 18. 0";
> Catch (e) <
>
>
if (! version)
<
try <
// version will be set for 2.X player
axo = new ActiveXObject ( "ShockwaveFlash.ShockwaveFlash");
version = "WIN 2. 0. 0. 11";
> Catch (e) <
version = - 1;
>
>
У вікні веб-браузера це буде виглядати ТАК.