Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


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


В этом уроке вы научитесь, как создать стильный 3D туннель вокруг текста. Мы будем использовать ActionScript 3 для анимации, таким образом никакой анимации на временной шкале не будет.
Настройка окружения

1. Создайте новый документ размером 500×100.

2. Создайте статическое текстовое поле в центре сцены. Сделайте его достаточно большим, чтобы оно занимало как можно больше места на сцене и напечатайте в нем какой-нибудь текст.

3. Конвертируйте текстовое поле в муви клип. Назовите его “My Text” и установите точку регистрации в центре. Вы должны видеть на сцене подобно этому.
alt
4. Дайте муви клипу инстанс имя “myText“.

5. Далее, нарисуйте круг размером 30×30 на сцене. Конвертируйте его в муви клип по имени “My Circle” и установите точку регистрации в центре.
Свяжите мувик с классом MyCircle
alt
6. Дайте кругу инстанс имя - “myCircle“. Не думайте о положении круга , поскольку мы установим его координаты средствами ActionScript 3. Здесь то, как выглядит сейчас моя сцена.
alt
Идем в ActionScript 3

7. Откройте вашу панель actions и напишите следующее.
<!--c1-->
CODE
<!--ec1-->
//Импортируем TweenMax
import gs.*;

/*
Точка исчезновения для y координаты.
Итак, когда объект действительно далеко, y-координата почти равна точке исчезновения.
*/
var vanishingPointY:Number = stage.stageHeight / 2;

//Focal-длина определяет видимость в перспективе.
var focalLength:Number = 300;

//Этот массив будет хранить все наши круги и текст
var itemsArray:Array = new Array();

//Добавляем наш текст в массив
itemsArray.push(myText);

//Добавляем наш круг в массив
itemsArray.push(myCircle);

//Угловая скорость для круга
var angleSpeed:Number = 0.2;

//Горизонтальная скорость для круга
var xSpeed:Number = 4;

//y-радиус (высота) нашего "туннеля" определяется высотой текста
var yRadius:Number = myText.height;

//z - радиус (глубина) вычисляется из yRadius
var zRadius:Number = yRadius * 3;

//Присвоим начальные 3D y и z координаты
myCircle.ypos3D = 0;
myCircle.zpos3D = 0;

//Присвоим 3D z позицию для текста, чтобы мы могли анимировать круг вокруг него
myText.zpos3D = 0;

//Начальный угол для круга
myCircle.currentAngle = 0;

//Добавим слушатель ENTER_FRAME, чтобы мы могли анимировать круг
myCircle.addEventListener(Event.ENTER_FRAME, moveCircle);

/*
Мы стартуем таймер в начале мувика.
В каждом событии таймера мы будем создавать новый след-круг.
*/
var timer:Timer = new Timer(20,0);
timer.addEventListener(TimerEvent.TIMER, createTrail);
timer.start();

//Эта функция двигает круг  (экземпляр "myCircle")
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;

//Изменяем x координату
myCircle.x+=xSpeed;

//Изменяем y координату
myCircle.y=vanishingPointY+myCircle.ypos3D*scaleRatio;

//Если круг за пределами правого края, двигаем его налево
if (myCircle.x>stage.stageWidth+20) {
 myCircle.x=-20;
}

//Вызываем функцию, которая сортирует круги, чтобы они перекрывались корректно
sortZ();
}

//Эта функция создает новый след-круг
function createTrail(e:Event):void {

//Создаем новый круг
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 для уменьшения масштаба круга.
Мы вызываем функцию removeCircle когда твин заканчивается.
*/
TweenMax.to(newCircle, 2, {alpha: 0, scaleX:0, scaleY:0, onComplete: removeCircle, onCompleteParams: [newCircle]});
}

//Эта функция вызывается, когда твин круга завершается
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);

//Устанавливаем новые дочерние индексы для членов
for (var i:uint = 0; i < itemsArray.length; i++) {
 setChildIndex(itemsArray[i], i);
}
}
<!--c2-->
<!--ec2-->
8. Мы закончили. Протестируйте ваш мувик, все должно быть отлично!
Исходник можно скачать здесь:
Нажмите для скачивания flash_3d_tunnel_around_text.rar!
Название: flash_3d_tunnel_around_text.rar
Размер: 7.74 Kb


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.