• Главная
  • Карта сайта
Не найдено

ActionScript 3 ефект тексту для банера. Обговорення на LiveInternet

Часто необхідний ефект тексту для банера, в якому використовуються скрипти AS3. Я зібрала архівну папку з прикладами, файлами fla і папками з скриптами. Скачайте, розпакуйте і виберіть із прикладів (файли swf) необхідний ефект. Файл fla відповідного назви відкрийте в редакторі Adobe Flash Pro. У ньому є два шари. Перший - скрипт і його можна скопіювати до себе в банер, натисніть F9. У редакторі коду "Дії" скопіюйте весь скрипт. Потім в своєму робочому файлі банера створіть новий шар і в потрібному кадрі викличте редактор коду "Дії" (F9), вставте скопійований скрипт. Потім зверніть увагу в файлі прикладу як створений текст - просто текстовий рядок або символ. Якщо символ, то зайдіть в нього. Робіть так само як в файлі прикладу. Подивіться властивості тексту і ім'я.

В ActionScript 3 на відміну від другої версії код скрипта ставиться не до об'єкта, а в кадр. Тому зверніть увагу де текст буде з'являтися.

Розберемо файл basic_setting.fla і як перенести до себе таке чудо в банер. Зручно користуватися символами. Тому створіть символ в своєму банері, назвіть допустимо text. У цьому символі створіть 2 шари. Перший шар назвіть as - в ньому буде скрипт для тексту. Тепер зайдіть в файл з прикладом basic_setting.fla і виберіть шар as на першому кадрі. Натисніть F9 або викличте редактор "Дії". У редакторі буде готовий скрипт (великий, але не страшний, там більше коментарів). Розмістіть цей скрипт. І зайдіть в свій банер, в створеному шарі as в першому кадрі натисніть F9 і в редакторі вставте цей скопійований скрипт.
Зараз відверну по скрипту.

stage.align = "TL";

stage.scaleMode = "noScale";

Це рядки для будь-якого баннера, позначають:

Stage.scaleMode - режим масштабування сцени. Можливі значення цієї властивості і докладний опис їх дії є в статті Хелп . Скажу тільки, що нам знадобиться режим Stage.scaleMode = "noScale", при якому флеш не намагатиметься масштабувати вміст ролика під габарити вікна.

Stage.align - вирівнювання cодержімого ролика в вікні плеєра або броузера. Властивість вказує вирівнювання по вертикалі і горизонталі. У прикладах до цього матеріалу я буду використовувати вирівнювання по верхньому лівому кутку вікна, від є Stage.align = "TL" (T - top, L - left). Мені здається, це найзручніше. Але, в принципі, ви можете використовувати будь-який інший зручний вам вид вирівнювання, це не суттєво.

А ще краще почитати про ці речі тут http://noregret.org/tutor/elastic/

Далі в коментарях скрипта англійською розказано позначення рядків і звідки беруться файли коду. Я в папку з прикладами вже заклала все що потрібно. Але відразу в прикладах не було папки flupie і caurina. У коментарях написано звідки їх можна завантажити і як вони підключатися повинні. Багаторядкові коментарі пишуться так: / * КОМЕНТАР * / Тому якщо часто використовуєте скрипти і вам коментарі заважають - можете їх видалити, або по-своєму переписати. Може ви код будете змінювати. далі

import flupie.textanim. *;
Цей рядок позначає підключення файлів скриптів з папок flupie і textanim всередині папки flupie. Файлів скриптів кілька, тому позначені * зірочкою. А запис уже логічно зрозуміла: зовнішня папка, точка, яка вказує рівень і потім вкладена папка, знову точка і вже зірочкою позначені файли. Таким чином ви можете відстежити які повинні бути папки і файли, як названі і де поставлені, щоб працював скрипт і з'явилася анімація. Адреса підключення файлів скриптів і папок йде на рівні знаходження файлу банера. Так що зайдіть в папку з прикладами і скопіюйте папки flupie, caurina, extra в свою папку, де знаходиться ваш файл з банером.

import caurina.transitions. *;

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

/ *

EXAMPLE: SINGLE LINE TEXT

0 - IMPORTANT! Do not forget to embed the font that you want to use;

1 - Creating a new instance of TextAnim, and it replaces the textField automatically;

2 - Indicates the way of TextAnim will be animated. Can be FIRST_LAST, LAST_FIRST, CENTER_EDGES, EDGES_CENTER, RANDOM;

3 - Turning the blocks visible = false when dispatch block;

4 - Giving to TextAnim a effect function for apply for each blocks (can be an array of effects);

5 - Starts the animation

* /

Коментар про вибір виду анімації. Можете перекласти з англійської та вжити за призначенням. Нумерація - це нумерація рядків настане після коментарем коду і його розшифровка.

var myAnim: TextAnim = new TextAnim (label);

myAnim.mode = TextAnimMode.CENTER_EDGES;

myAnim.blocksVisible = false;

myAnim.effects = myEffect;

myAnim.start ();

У першому рядку коду зверніть увагу на label - це ім'я об'єкта тексту. Тобто коли створите текст, зайдіть на панель властивостей і впишіть ім'я label. Якщо Ви будете використовувати інше ім'я, то змініть його в цьому коді. У другому рядку коду вже по коментарю зрозуміло, що вона вказує вид ефекту, тобто як будуть з'являтися літери. У цьому коді заданий CENTER_EDGES, тобто текст з'являється від центру до країв. Ви можете вибрати з наступних варіантів один FIRST_LAST, LAST_FIRST, CENTER_EDGES, EDGES_CENTER, RANDOM і варіанти протестувати. У наступному рядку візуалізація - false. А в четвертому рядку присвоюється функція myEffect, яка буде введена наступною частиною коду. І в останньому рядку цієї частини коду команда старту дії анімації.

function myEffect (block: TextAnimBlock): void

{

block.scaleX = block.scaleY = 0;

Tweener.addTween (block, {scaleX: 1, scaleY: 1, time: 1, transition: "easeoutelastic"});

}
У цій частині коду скрипта описана функція myEffect для об'єкта текст. Часто повторювані scale дають зрозуміти ефект появи тексту - за допомогою масштабування букв. block.scaleX = block.scaleY = 0; означає що букви будуть з'являтися рівнозначно по ширині і висоті і прирівняне початкове масштабування початково нулю, тобто X = Y = 0. Ви можете наприклад змінити 0 на 5. Тоді букви будуть з'являтися більш великими і зменшуватися в процесі появи до свого реального розміру. Tweener.addTween (block, {scaleX: 1, scaleY: 1, time: 1, transition: "easeoutelastic"}); А в цьому описі функції ефект анімації створюється за допомогою класу Tween і звичайно зі створенням якихось проміжних об'єктів. Детальніше http://help.adobe.com/ru_RU/FlashPlatform/referenc...pt/3/fl/transitions/Tween.html
{ScaleX: 1, scaleY: 1, time: 1, transition: "easeoutelastic"} наводяться умови функції, їх також можна змінювати. Якщо змінити одиницю в scaleX: 1, scaleY: 1, на 2, то букви будуть більшими після анімації, а якщо 0, то і зовсім текст не з'явиться. time: 1 - це швидкість анімації, якщо поставити замість 1 нуль, то букви з'являться так швидко, що ефект анімації не буде видно, а ось якщо замінити на 6, то ефект появи буде більш повільним, плавним. "Easeoutelastic" - це клас ефектів уповільнення почитати докладніше і користуватися тут http://help.adobe.com/ru_RU/FlashPlatform/referenc...ons/easing/package-detail.html

Про скрипт вже стало ясніше. І як видно, не такий він і страшний. Звичайно, в інших прикладах скрипти ускладнені, але і там можна розібратися, якщо необхідно щось змінити. Найголовніше, що з'ясували з коду скрипта - які папки та файли повинні бути для виконання скрипта. А також ім'я об'єкта тексту - label. Ось тепер ще аз нагадаю - папки з файлами з папки з прикладами скопіювали в папку свого банера. Так що зайдіть в папку з прикладами і скопіюйте папки flupie, caurina, extra в свою папку, де знаходиться ваш файл з банером. А тепер зайдіть в свій файл банера і в символі text створіть другий шар під назвою label. У цьому шарі на першому кадрі створіть об'єкт тексту. У прикладі текст TEXTANIM AS3, ну а ви можете написати те що вам потрібно. У AS3 зручніше створювати текстові ефекти, ніж в AS2, в попередній версії у мене є приклади, але там текст розкладений по частинах, на окремі букви і кожної потрібно дати ім'я, а кількість символів прописати в коді скрипта, одна морока. А в даній версії AS3 в цих прикладах - вписав текст, змінив - легко. Отже, об'єкт тексту створили, написали текст, а тепер зайшли на панель Властивості і вписали ім'я label, як в скрипті. Потім проставили властивості як в прикладі: класичний текст, динамічний, згладжування для анімації і упровадите шрифт, будь ласка, поведінка однорядковий, і на свій смак виберіть попередньо впровадження шрифт, розмір, колір. Вийдіть з символу text. А тепер створіть новий шар в банері на основній сцені і в будь-який кадр поставте символ text з Бібліотеки. Можна створювати об'єкт тексту label і шар з кодом as без символу, але з символом набагато зручніше.
Перегляньте публікацію. Якщо у вас в банері є інша анімація, то протягом програвання всього банера ефект появи тексту даного прикладу буде з'являтися з повторами циклічно. Тобто створили текст, він повинен в анімації з'явитися і залишитися на місці не рухатися або через деякий час зникнути як ви плануєте у себе в банері. Але зі скриптом так справа не піде, є скрипти, які розраховані на появу тексту і будуть цей текст мучити і повторювати ефект протягом всієї загальної анімації банера. Тому або ви робите своїми методами, або за моєю схемою. Я створювала символ. У ньому створювала 2 шари - як в прикладі, з текстом і з скриптом. І створювала другий символ з текстом без ефекту появи, тобто без скрипта. Перший символ з ефектом тексту поміщала в перших кадрах банера, підрахувала час появи тексту, розтягла символ по кадрам на скільки потрібно часу і другий символ без ефекту тексту ставила після кадрів з першим символом на новому ще одному шарі, а після першого символу додавала на доріжку порожній кадр. Таким чином, анімація програвала перший символ з появою тексту, а потім кадри статичного тексту. Можна звичайно використовувати коди stop () або gotoandplay і gotoandstop. Але в моєму випадку обійшлося без цих кодів. Все залежить від ідеї банера.

Завантажуйте папку з прикладами. Прикладів 11, а зі змінами коду скрипта буде більше варіантів.

вкладення: 4167958_as3__yeffekt_teksta.rar

Серія повідомлень " Флеш-банери ":
Частина 1 - ActionScript 3 ефект тексту для банера
Частина 2 - Гусак Юрій. Посібник. Розробка флеш-банера
Частина 3 - Як зробити банер легким
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью