Перемещение букв

Исходный файл: Textfly.fla

Во многих Flash-роликах по экрану перемешается текст. Существует множество способов создания этого эффекта, некоторые из них проиллюстрированы примерами.

Задача проекта

В данном разделе рассказано, как создать ролик, где текстовая фраза разделяется на отдельные буквы, каждая из которых помешается в случайное место экрана. Затем эти буквы перемешаются по экрану и, соединяясь, вновь образуют исходную фразу.
На рис. 5.7 изображены четыре кадра из ролика. Буквы спускаются сверху и выстраиваются в нужном порядке в нижней части экрана.

Рисунок 5.7 Четыре кадра анимаиии, созданной при помощи ActionScript

Посмотрите ролик Textfly.fla. Обратите внимание, где располагаются сценарии и как организован ролик в целом.

Подход

Ролик создается следующим образом: текст делится на отдельные буквы каждая из которых представляет собой отдельный клип. Затем из случайных мест на экране эти клипы перемешаются в позиции, соответствующие исходному тексту.

Подготовка ролика

Ролик включает графическое изображение, расположенное в центре экрана и совершенно не зависящее от текстового эффекта. Внутри ролика находится один клип, содержащий букву "А". Клип был создан из небольшого текстового окна. В панели Properties ему было назначено свойство Dynamic Text и присвоено имя переменной letterText (рис. 5.8).

Рисунок 5.8 В панели Properties вы можете назначить текстовой области свойство Dynamic Text и присвоить ей имя переменной

Затем текстовое поле преобразуется в клип при помощи команды Insert -> Convert To Symbol. Копия эталона получает имя letter0 и помешается в то место, где находится первая буква фразы, в данном случае в нижний левый угол.

Создание кода

В процессе выполнения программы из одного клипа создается несколько его экземпляров. В каждом новом цикле при помощи функции duplitcateMovieClip создается новый экземпляр клипа для каждой из букв. После создания каждого экземпляра в него вводятся переменные еndx и endy, задающие окончательную позицию букв в анимации. Значение переменной endy соответствует позиции _у клипа Letter0, значение переменной endx увеличивается слева направо.
Сценарий создает новые копии клипа для букв начиная с той, которая идет под номером 1. Первая буква (она имеет номер 0) использует существующий клип Letter0.

text = "Introducing: Flashy the Fox!";
for (i=0;i<text.length;i++) {
if (i > 0) duplicateMovieClip("Letter0","letter"+i,i);
this["letter"+i].letterText = text.charAt(i);
this["letter"+i].endx = this["Letter0"]._x + i*19;
this["letter"+i].endy = this["Letter0"]._y;
}

Функция charAt выбирает из строки букву, расположенную в определенной позиции. Первый символ строки имеет номер 0. Для того чтобы выделить подстроку, используйте функцию substr.
Команда for позволяет создать небольшой цикл. Код внутри цикла выполняется заданное количество раз. Первый параметр после команды for используется для задания переменной. Второй параметр необходим для проверки, которая осуществляется перед каждым циклом и определяет, надо ли его продолжать. Третьим и последним параметром является команда, выполняемая в каждом цикле. Например, строка for (i=0; i< text.length; i++) обозначает, что переменная i начиная со значения 0 увеличивается на единицу в каждом цикле, и цикл будет продолжаться до тех пор, пока значение i меньше числа символов в тексте

Число 19 в конце пятой строки обозначает, что расстояние между буквами составляет 19 пикселов. Это значение устанавливается в зависимости от используемого вами типа и размера шрифта.

При создании данного эффекта лучше использовать моноширинный шрифт, в котором все буквы имеют одинаковую ширину, например Monaco, Courier и Courier New. В противном случае такие буквы, как "w" и "l", могут значительно отличаться по ширине. Использование шрифтов с различной шириной букв в рассматриваемом коде может привести к "склеиванию" символов.

Другой частью ролика является программа ActionScript, назначенная клипу Letter0. При загрузке клип помешается в случайную позицию в верхней части экрана и в каждом кадре постепенно перемешаете к своей окончательной позиции.
Каждый раз при копировании клипа Letter0 сценарий, назначенный ему, также копируется. Поэтому каждая копия клипа включает копию одного и того же кода.
Первая часть сценария задает случайное значение для переменных startх и starty, которые определяют начальное положение клипа в верхней части рабочего поля. Затем эти значения присваиваются соответствующим координатам клипа. Помните, что переменные endx и endy были заданы сценарием главной временной шкалы при создании клипов. Таким образом, у клипов теперь есть случайное начальное расположение, описываемое переменными startx и starty, а также фиксированное конечное положение, заданное переменными endx и endy.
Значение переменной п изменяется от 0 до 100 с шагом 5, показывая, на сколько процентов выполнено перемещение буквы. Значение 0 соответствует 0% по отношению к конечной точке и 100% по отношению к начальной. Для значения 5 это составляет 5% и 95% соответственно. С каждым шагом буква приближается к цели на 5%. Значение местоположения обновляется, если переменная имеет значение меньшее или равное 100%

onClipEvent(load) {
startx = Math.random()*550;
starty = -Math.random()*100;
this._x = startx;
this._y = starty;
n = 0;
}
onClipEvent(enterFrame) {
n += 5;
if (n <= 100) {
this._x = endx*n/100 + startx*(100-n)/100;
this._y = endy*n/100 + starty*(100-n)/100;
}
}

К сведению

Позиция клипа Letter0 определяет позицию первой буквы конечного текста, поэтому советуем вам внимательнее отнестись к его расположению и немного поэкспериментировать.

Другие возможности

Существуют различные варианты изменения данного сценария. Вы можете указать другую исходную позицию букв, значение переменной п может изменяться быстрее или медленнее, а буквы располагаться не горизонтально, а вертикально.