Уроки Flash: Mouse Trail, Програми для роботи з графікою, Програмні керівництва, статті

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


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









Code


Text = “Ваш текст”;
letters = Text.split(“”);
letterformat = new TextFormat();
letterformat.font = “Verdana”;
letterformat.align = “center”;
letterformat.size = “10”;
spacing = 8;
speed = 3;
for (var LTR = 0; LTR<letters.length; LTR++) {
       mc = _root.createEmptyMovieClip(LTR+”l”, LTR);
       mc.createTextField(letters[LTR]+”t”, LTR, LTR*spacing, 10, 20, 20);
       with (mc[letters[LTR]+”t”]) {
               text = letters[LTR];
               setTextFormat(letterformat);
               selectable = false;
       }
       if (LTR) {
               mc.prevClip = _root[(LTR-1)+”l”];
               mc.onEnterFrame = function() {
                       this._x += (this.prevClip._x-this._x+5)/speed;
                       this._y += (this.prevClip._y-this._y)/speed;
               };
       } else {
               mc.onEnterFrame = function() {
                       this._x += (_root._xmouse-this._x+10)/speed;
                       this._y += (_root._ymouse-this._y)/speed;
               };
       }
}


Ось так то, ну давайте дивитися, що ж у нас тут такого написано.









Code


Text = “Ваш текст”;
letters = Text.split(“”);


Перші два рядки гранично прості, змінної Text ви привласнюєте той текст який хочете використовувати, і розбиваєте його посимвольно, записуючи символи в масив letters.









Code


 letterformat = new TextFormat();
letterformat.font = “Verdana”;
letterformat.align = “center”;
letterformat.size = “10”;


Ці рядки відповідають за налаштування: тексту перша просто створює новий об’єкт типу TextFormat, 2 відповідає за шрифт, третя виставляє вирівнювання, 4 – розмір шрифту.









Code


 spacing = 8;
speed = 3;


Дані два рядки просто задають значення змінних, які будуть використані нами в подальшому, мінлива spacing відповідає за відстань між буквами, мінлива speed регулює швидкість переміщення (чим менше мінлива тим вище швидкість).









Code

for (L=0; L<letters.length; L++) {}


Створюємо цикл for, L = 0; означає що при першому запуску циклу значення змінної L буде дорівнювати нулю, L








Code

_root.createEmptyMovieClip(letters[L], L);
_root[letters[L]].createTextField(letters[L]+”t”, L, L*spacing, 10, 20, 20);


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


Друга строчка створює текстове поле всередині символу, з ім’ям букви + t, далі задаються параметри: на якому рівні розташовувати створене поле, а також координати по х і в і розміри поля.









Code

with (_root[letters[L]][letters[L]+”t”]) {
text = letters[L];
setTextFormat(letterformat);
selectable = false;
}


Ці рядки записують букву в створений для неї символ.


 







Code

if (L>0) {
_root[letters[L]].id = L;
}


Перевірка якщо L> 0 то в нову змінну, id всередині символу ми записуємо поточне значення L це нам знадобитися, щоб надалі відновлювати шлях до тієї чи іншої букві.


 







Code

 _root[letters[L]].onEnterFrame = function() {
this._x += (_root[letters[this.id-1]]._x-this.lastX)/speed;
this._y += (_root[letters[this.id-1]]._y-this.lastY)/speed;
this.lastX = this._x;
this.lastY = this._y;}


Ці рядки розраховують положення літери в залежності від поточного положення літери йде перед нею. Тут то нам і знадобився наш id.









Code

 } else {
_root[letters[L]].onEnterFrame = function() {
this._x += (_root._xmouse-this.lastX+10)/speed;
this._y += (_root._ymouse-this.lastY)/speed;
this.lastX = this._x;
this.lastY = this._y;
};


Ця частина виконує подібну функцію, але для першого елемента.


От і все.


Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*