Уроки Flash: Mouse Trail

Источник: demiart

kirupa (Перевод: Stasan)

Скорее всего вам доводилось видеть подобный эффект в Интернете. В его создании нет ничего сложного. В этом туторе я объясню, как его создать, используя лишь 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<letters.length; это условие показывающее, что работа цикла будет продолжаться пока значение переменной L будет меньше длины массива letters, возможно кто-то спросит почему начальное значение 0, а не 1, ведь это логично первый элемент имеет индекс один, однако во флеше массив автоматически начинается с нуля,и если мы начнем перебор с 1, то посеем первую букву.

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;
};

Эта часть выполняет подобную функцию, но для первого элемента.

Вот и все.