Летящая нить, или чистая математика и никакого мошенничества Всем привет!
Давно захожу на ДемиАрт, частенько просматриваю уроки и вот сам решил нацарапать простенький урок по одному эффекту.
Как-то в сети наткнулся на сайт какой-то забугорной студии, где в простейшем дизайнерском флеш представлении текстовой информации был вставлен эффект шлейфа от мыши в виде исчезающей линии. Недавно было свободное время и решил поиздеваться над ActionScript 2
Описывать в принципе и нечего, просто смотрите код и читайте комменты.
Ах, да! Чуть не забыл: настройки сцены - Ваше дело, только не продешевите с Frame rate (кол-во кадров в секунду, я поставил 50).
Code
// Создаем массив для точек (точнее координат)
var pointArray:Array = new Array();
// Определяем центр "вселенной" как центр сцены
var centerX:Number = Stage.width / 2;
var centerY:Number = Stage.height / 2;
// Определям элементы массива точек как обекты со свойствами pointX и pointY
// и заполняем их значениями нашего центра "вселенной"
for (var i:Number = 0; i < 100; i++) {
pointArray[i] = new Object();
pointArray[i].pointX = centerX;
pointArray[i].pointY = centerY;
}
// Ну что ж, приступим. В каждом кадре....
this.onEnterFrame = function() {
// очищаем сцену
this.clear();
// перемещаемся в точку, которая в массиве стоит первой
this.moveTo(pointArray[0].pointX, pointArray[0].pointY)
// А теперь перебираем все точки
for (var i:Number = 1; i < 100; i++) {
// пусть линия у нас начинается от абсолютно черной и "уходит" в небытие,
// то есть становится белой в конце
// для этого и следующие две строки.
// чтоб не вдаваться в подробности, лиш скажу что в переменной RGB мы должны
// получить цвет оттенка серого в строковом формате "0x000000"
var colort = int((100 - i) * 255 / 100);
var RGB = "0x" + Number(colort + colort * 256 + colort * 256 * 256).toString(16);
// определяем стиль для линии, при этом пусть у начала линия будет тонкой,
// а в конце - 20
this.lineStyle(20 - 19 * i / 100, RGB, 100, true, "none", "round", "round", 1);
// непосредственно рисуем линию до текущей точки
this.lineTo(pointArray[i].pointX, pointArray[i].pointY);
// а теперь немного сместим координаты уже отрисованной точки от центра
// коэффициент 1.03 регулирует скорость "полета"
// (предупреждая упреки неиспользования переменной скажу - мне было впадло <img src="http://s19.ucoz.net/sm/23/smile.gif" border="0" align="absmiddle" alt="smile">
pointArray[i].pointX = 1.03 * (pointArray[i].pointX - centerX) + centerX;
pointArray[i].pointY = 1.03 * (pointArray[i].pointY - centerY) + centerY;
}
// теперь удаляем координаты первой точки
pointArray.shift();
// и добавляем в конец массива координаты курсора
pointArray.push({pointX:_xmouse, pointY:_ymouse});
}
Вот и всё!
Жмем Ctrl+Enter и втыкаааааем
Особенно популярно при разворачивании на весь экран.
А вот на всякий случай онлайн результат (поводите мышкой):
Вот и всё!
Жмем Ctrl+Enter и втыкаааааем
Особенно популярно при разворачивании на весь экран.
А вот на всякий случай онлайн результат (поводите мышкой):
Это конечно не ахти какая краса неописуенная, но всё же.
А на закуску тот же код, но немного переработанный, но и результат немного другой
Code
var pointArray:Array = new Array();
var centerX:Number = Stage.width / 2;
var centerY:Number = Stage.height / 2;
for (var i:Number = 0; i < 100; i++) {
pointArray[i] = new Object();
pointArray[i].pointX = centerX;
pointArray[i].pointY = centerY;
}
this.onEnterFrame = function() {
this.clear();
this.moveTo(pointArray[0].pointX, pointArray[0].pointY)
for (var i:Number = 2; i < 100; i += 2) {
var colort = int((100 - i) * 255 / 100);
var RGB = "0x" + Number(colort + colort * 256 + colort * 256 * 256).toString(16);
this.lineStyle(20 - 19 * i / 100, RGB, 100, true, "none", "round", "round", 1);
this.curveTo(pointArray[i-1].pointX, pointArray[i-1].pointY, pointArray[i].pointX, pointArray[i].pointY);
pointArray[i].pointX = 1.03 * (pointArray[i].pointX - centerX) + centerX;
pointArray[i].pointY = 1.03 * (pointArray[i].pointY - centerY) + centerY;
}
pointArray.shift();
pointArray.push({pointX:_xmouse, pointY:_ymouse});
pointArray.shift();
pointArray.push({pointX:_xmouse, pointY:_ymouse});
}
Вообще-то этим уроком я просто хотел показать, что с минимальным кодом и математическим подходом можно добиться удивительных результатов
Дерзайте!