2015-06-30
151Здесь вы научитесь "вертеть" текст по заданной орбите, вокруг любого клипа.
Для работы потребуется Flash и плеер версии 8 или младше и знание Action Script 2 в основах.
Вот результат урока
Здесь вы научитесь двигать клипы по окружности и трансформировать их так, чтобы их плоскость была параллельна касательной к окружности в любой точке траектории.
В результате должна получится симпатичная текстовая "лента".
Для более полного восприятия материала, прочтите этот урок.
Я испробовал 2 варианта этого эффекта: с применением BitmapData и с использованием внедренных шрифтов.
1 вариант выдал свф, размером в 2 килобайта и не по детски нагрузил процессор.
2 вариант обошелся в 30 кило и камушек разгрузился процентов на 40. На нем я и остановился.
Итак, создайте новый документ (1 слой, 1 кадр) и нарисуйте или импортируйте в него картинку или анимацию. Превратите ее в клип и удалите. Клип должен остаться в библиотеке.
Присвойте ему линкнейм "logo". Этот клип станет "планетой", вокруг которой будет вертеться текст.
|
|
|
Теперь займемся внедрением шрифта. Инструментом "Текст" создайте, где нибудь, вне пределов документа, динамическое текстовое поле.
В панели "Properties" выберите, нужный вам, шрифт, а затем нажмите кнопку "Embed".
Выберите из списка, необходимые начертания или, если тест короткий, то просто введите в поле "Include these characters" все необходимые символы и нажмите "ОК".
Запомните наименование этого шрифта, его нужно будет ввести в код.
Создайте новый слой, выделите его и нажмите [F9] для вывода панели "Actions-Frame". Вставьте этот код, изменив необходимые параметры CODE
/************© MOHCTEP in this forum *® 19.11.2007**********/
//
//Слоган
var str:String = 'Тут, что нибудь напишем. ';
//Контейнер
var holder:MovieClip = this.createEmptyMovieClip('holder', this.getNextHighestDepth());
//Подготовим формат текста со включенным шрифтом
var tf:TextFormat = new TextFormat();
//Здесь поставьте имя вашего шрифта
tf.font = 'Arial Cyr';
//Размер символов текста
tf.size = 16;
//Цвет текста
tf.color = 0x8FFFFF;
//**** Служебные переменные и константы ****
// Радиус орбиты
var radius:Number = 160;
//Массштабы орбиты по ширине и высоте
var xscale:Number = 1, yscale:Number = -.3;
// Запомним массштаб по высоте - для качалки
var y_scale:Number = Math.abs(yscale);
//Скорость качания орбиты
var orbit_different:Number =.0002;
// Шаг угла между символами
var angle_step:Number;
//Общее кол-во символов в строке
var total:Number;
//Индекс середины строки
var middle:Number;
// Шаг приращения угла
var step:Number = 2;
// Скорость анимации
var speed:Number = 20;
//Массив клипов символов
var mcs:Array = [];
//************************************************
// Стартовая подготовка
function init() {
//Контейнер поставим в середину документа
holder._x = Stage.width/2;
holder._y = Stage.height/2;
//Поставим клип - центр вращения на нулевой уровень
holder.attachMovie('logo', 'logo', 0, {_xscale:200, _yscale:200});
|
|
|
//Кол-во символов в строке-слогане
total = str.length;
// Шаг углового приращения для каждого символа
angle_step = 360/(total+1);
//Середина строки. Это значение станет определяющим параметром в дальнейшем распределении
//уровней для клипов-символов
middle = Math.floor(total/2);
//Цикл, число итераций в коем, равно количеству символов в строке.
// При каждом проходе...
for (var i:Number = 0; i<total; i++) {
//Делаем клип-контейнер для текущего символа
var mc:MovieClip = holder.createEmptyMovieClip('l'+i, holder.getNextHighestDepth());
// В нем создаем текстовое поле
var t:TextField = mc.createTextField('t', 1, 0, 0, 1, 1);
//и форматируем его
t.autoSize = true;
t.embedFonts = true;
t.selectable = false;
t.setNewTextFormat(tf);
//Загружаем текущий символ из строки
t.text = str.charAt(i);
//Запомним в клипе его номер и угол
mc.i = i;
mc.angle = angle_step*i-360;
//Вычислим уровень глубины для нашего клипа
var d:Number = Math.floor(Math.abs(mc.angle)/angle_step)-middle;
//Если он не положительный, то декременируем его, для того, чтобы никогда не занимать 0-уровень
d>0? null: d -= 1;
//Запомним в клипе его текущий уровень.
mc.depth = d;
//Поставим клип на свой уровень
mc.swapDepths(mc.depth);
//Ссылку на клип запишем в массив
mcs.push(mc);
// и запустим анимацию
mc.id = setInterval(animate, speed, mc);
}
}
//Анимация символов
function animate(arg:MovieClip) {
//2 строки качания орбиты (Закомментируйте их, если надо)
yscale+=orbit_different;
Math.abs(yscale)>y_scale?orbit_different*=-1:null;
// Перемещаем символ приращением угла
arg.angle -= step;
arg.angle %= 360;
//***Трансформация клипа***
//Перевод угла из градусов в радианы
var a:Number = arg.angle*Math.PI/180;
//Вынем матрицу символа, для ее модификации
var mat = arg.transform.matrix;
//Универсальный коэффициент трансформации. Необходим для всех следующих преобразований
var s:Number = (2+Math.sin(a))/2+0.1;
//Массштабирование
mat.a = Math.sin(a)*s;
mat.d = s;
//Наклон
mat.b = -(Math.cos(a)/xscale*yscale)*s;
//Переставим символ на новое место на орбите
mat.tx = -Math.cos(a)*radius*xscale;
mat.ty = -Math.sin(a)*radius*yscale;
//Применяем измененную матрицу к символу
arg.transform.matrix = mat;
//****Обмен глубинами****
//Выясним необходимую глубину текущего символа, исходя из его угла
var d:Number = Math.floor(Math.abs(arg.angle)/angle_step)-middle;
//Если глубина нулевая или отрицательная, то декременируем ее.
//Т.о. мы никогда не займем нулевой уровень, на котором расположена "планета" и корректно
// распределим уровни остальных символов
d>0? null: d -= 1;
//Если глубина символа отличается от записанной в нем, то поместим символ на новую глубину и запомним ее
if (d!= arg.depth) {
arg.swapDepths(d);
arg.depth = d;
}
/******Выравнивание углов символов******
В связи с неточным математическим аппаратом обработки плавающей точки, со временем может произойти "наползание" символов из-за неизбежной деградации нецелочисленных значений, при их преобразованиях. Лечим это перерасчетом углов всех символов, один раз за оборот, при анимации самого первого символа*/
if (!arg.i) {
var a:Number = arg.angle;
for (var i = 1; i<total; i++) {
mcs[i].angle = a+angle_step*i-360;
}
}
updateAfterEvent();
}
/*************** ЗАПУСК ****************/
init();
Вот и все!:) Желаю всем успехов!
