3D тунэль вокруг текста. AS3

Content on this page requires a newer version of Adobe Flash Player.

Сейчас мы научимся создавать классный 3х мерный туннель вокруг текста. Для анимации будет использован только ActionScript 3, так что никаких Timeline'ов не понадобиться для анимации.

Что сначала? Сначала TweenMax

Мы будем использовать TweenMax для движения и анимаци. Кодировать движения самостоятельно было бы долговато, а с помощью TweenMax мы сэкономим уйму времени. Но для начала надо скачать TweenMax для AS3 https://blog.greensock.com/tweenmaxas3. И еще! Что бы все работало, нам надо сохранить .fla файл в одной папке с папкой gs . (Эту папку найдете в архиве ссылка на который чуть выше).

Приготовления.

1) Создаем новый документ (AS3).
2) Пишем нужный нам текст и конвертируем его в символ с именем My Text, и даем ему instance name myText.
3) Теперь нарисуем небольшой кружок на сцене

Размеры не важны. Важно другое: что бы при конвертации в Movie Clip было все как на картинке :

4) Вроде бы и все. Теперь переходим к самому интересному.

Самое интересное

//Импортируем TweenMax.
import gs.*;
 
/*
Устанавливаем точку для  кординаты у.
Когда объект будет далеко его координата у будет равна вот этой точке .
*/
var vanishingPointY:Number = stage.stageHeight / 2;
 
//Устанавливаем переменную, которая "отвечает" за перспективу. То есть "дальше-ближе".
var focalLength:Number = 300;
 
//Создаем массив, который будет содержать текст и кружок.
var itemsArray:Array = new Array();
 
//Добавляем текст в массив.
itemsArray.push(myText);
 
//добавляем кружок в массив
itemsArray.push(myCircle);
 
/*Угол. Даже не знаю как подробней обяснить зачем эта переменная.
Вообщем на сколько будет поворачиваться туннель. Вообще можно пооэксперементировать
с этой переменной. Будет еще красиво смотреться если устантовить значение 3. Мне так больше нравиться, но оставлю так, как
в оригинальном уроке*/
var angleSpeed:Number = 0.2;
 
//Скорость движения по горизонтали
var xSpeed:Number = 4;
 
//Что бы туннэль не "врезался" в текст, надо сделать радиус туннэля  равным высоте текста
var yRadius:Number = myText.height;
 
//Высчитываем глубину с помощью yRadius
var zRadius:Number = yRadius * 3;
 
//Устанавливаем 3D y и z координаты
myCircle.ypos3D = 0;
myCircle.zpos3D = 0;
 
//Устанавливаем 3D z позицию для текста
myText.zpos3D = 0;
 
//Initial angle for the circle
myCircle.currentAngle = 0;
 
//Добавляем ENTER_FRAME listener что бы анимировать кружок
myCircle.addEventListener(Event.ENTER_FRAME, moveCircle);
 
/*
Устанавливаем timer для начала движения.
С помощью этого создаем след.
*/
var timer:Timer = new Timer(20,0);
timer.addEventListener(TimerEvent.TIMER, createTrail);
timer.start();
 
//Следущая функция двигает наш кружок
function moveCircle(e:Event):void {
 
 //Обновляем укогл кружка
 myCircle.currentAngle += angleSpeed;
 
 //Высчитываем новую 3D y позицию
 myCircle.ypos3D=Math.sin(myCircle.currentAngle)*yRadius;
 
 //Высчитываем новую 3D z позицию
 myCircle.zpos3D=Math.cos(myCircle.currentAngle)*zRadius;
 
 //Высчитываем размеры
 var scaleRatio = focalLength/(focalLength + myCircle.zpos3D);
 
 //Высчитываем размеры кружка следующим соотношением
 myCircle.scaleX=myCircle.scaleY=scaleRatio;
 
 //Обновляем  координату х
 myCircle.x+=xSpeed;
 
 //Обновляем координату у
 myCircle.y=vanishingPointY+myCircle.ypos3D*scaleRatio;
 
 //Если кружок закончил движение, заставляем его повторить
 if (myCircle.x>stage.stageWidth+20) {
  myCircle.x=-20;
 }
 
 //Вызываем функцию, которая сортирует круги, что бы они правильно накладывались
 sortZ();
}
 
//Эта функция создает новый след
function createTrail(e:Event):void {
 
 //Create a new circle
 var newCircle:MyCircle = new MyCircle();
 
 //Устанавливаем z позицию, которая была у "myCircle"
 newCircle.zpos3D=myCircle.zpos3D;
 
 //Устанавливаем одинаковые координаты
 newCircle.x=myCircle.x;
 newCircle.y=myCircle.y;
 
 //Высчитываем размеры
 var scaleRatio = focalLength/(focalLength + newCircle.zpos3D);
 
 //Устанавливаем размеры следующим уравнением
 newCircle.scaleX=newCircle.scaleY=scaleRatio;
 
 //Добавляем в массив новый элемент
 itemsArray.push(newCircle);
 
 //Добавляем новый круг на сцену
 addChild(newCircle);
 
 //Сортируем так, что бы кружки правильно накладывались
 sortZ();
 
 /*
 Используем TweenMax
  */
 TweenMax.to(newCircle, 2, {alpha: 0, scaleX:0, scaleY:0, onComplete: removeCircle, onCompleteParams: [newCircle]});
}
 
//Вызываем йункцию removeCircle когда анимация закончена
function removeCircle(circle:MyCircle):void {
 
 //Удаляем круг из массива
 var i:uint=itemsArray.indexOf(circle);
 itemsArray.splice(i, 1);
 
 //Удаляем со сцены
 removeChild(circle);
}
 
//Эта  функция сортирует круги что бы они накладывались правильно
function sortZ():void {
 
 /*
 Сортируем массив так, что бы круг с наибольшей координатой z был первым
 */
 itemsArray.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING);
 
 //Устанавливаем новые индексы child indexes для элементов
 for (var i:uint = 0; i < itemsArray.length; i++) {
  setChildIndex(itemsArray[i], i);
 }}
Исходник: 

Похожие записи

Комментарии

Аватар пользователя TeT

Не забудте сохранить fla файл в одну папку с папкой gs )))

Keyboard not found. Press any key to continue

Аватар пользователя Aloran

классный эффект!!!! Тет молодчик!!!

Аватар пользователя zebralm

у меня урок получился - большое СПАСИБО!
Но, когда я решила добавить на бэкграунд картинку - почемуто она всевремя перекрывает мувик - как решить эту проблему?

Аватар пользователя Temmy

Как сделать чтоб он покругу крутился вокруг надписи . как бы не спералькой а тупо прямо также с  шлейфом. ток  не сверху вниз а с права на лево.?

шлейф за обектом