Создание 3D в ActionScript 3.0




Главная > Уроки > Action script 3.0 > Создание 3D в ActionScript 3.0

Создание 3D в ActionScript 3.0

Автор/переводчик статьи: Команда сайта flashmaster.org.ua

Дата: 2013-12-20

Прежде всего, в данном уроке описывается процесс размещение объекта в трехмерных координатах. То есть, как создать иллюзию такого популярного ныне 3D пространства в Flash.

Для начала нужно создать новый документ в формате «.fla». Его размеры должны быть 500 х 300 пикселей.

Теперь на сцене нужно нарисовать квадрат, размером в 100 х 100 пикселей, а вокруг него нужно создать контур шириной в 6 пикселей. При этом, цвет квадрата и его контура должны отличаться. К примеру, можно сделать квадрат красного цвета, а контур синим. По сути, это никак не влияет на процесс создания 3D эффекта, как в программе для windows, после того как мы не забыли скачать видеоредактор.

Далее нужно преобразить созданный квадрат в муви-клип, задав ему следующие характеристики: имя может быть любое, это не играет роли; размещение нужно выставить по центру сцены; класс выбираем MyBox. А теперь, как это странно не звучит, удаляет созданный муви-клип. Но не навсегда, мы будем добавлять его потом с помощью ActionScript 3.0. Собственно говоря, этим и будет занят следующий этап.

Для начала создаем класс MyBox. Это делается в два этапа: создаем новый файл в формате «.as» и потом вставляем в него код:


package { import flash.display.MovieClip;

public class MyBox extends MovieClip {

//Это координаты для этого 3Д квадрата. public var xpos3D:Number = 0; public var ypos3D:Number = 0; public var zpos3D:Number = 0;

//Конструктор. public function MyBox() {

} } } 

Полученный файл называем MyBox и помещаем его рядом с ранее созданным файлом формата «.fla». Теперь нужно вернуться в файл «.fla» и вставить сюда в первом кадре TimeLine такой код:


код:

//Создаем массив, в котором будут лежать все квадраты.

var boxes:Array = new Array();

//Фокусное расстояние означает, как сильно будет заметно перспективное искажение.

//Можете этот параметр настроить так, как вам больше нравится.

var focalLength:Number = 300;

//Точка схождения перспективы.

//Это то место, где сходятся все наши квадраты.

var vanishingPointX:Number = stage.stageWidth / 2;

var vanishingPointY:Number = 20;

//3Д пол для квадратов.

var floor:Number = 80;

//Начальная глубина для первого квадрата.

var startingDepth:Number = MAXIMUM_Z;

//Z-расстояние между квадратами.

var zDistance:Number = 50;

//Цикл создает квадраты, начиная с самой дальней.

for (var i=0; i < NUMBER_OF_BOXES; i++)

{

//Создается новый квадрат.

var box:MyBox = new MyBox();

//3D x позиция одинакова для всех квадратов.

box.xpos3D = 0;

//3D y позиция одинакова для всех квадратов.

box.ypos3D = floor;

//Назначается z позиция. (Чем больше z, тем дальше квадрат от зрителя.)

box.zpos3D = startingDepth;

//Обновление глубины квадрата.

startingDepth -= zDistance;

//Расчет размеров квадрата в зависимости от дальности.

var scaleRatio = focalLength/(focalLength + box.zpos3D);

//Расчетные размеры задаются квадрату.

box.scaleX = box.scaleY = scaleRatio;

//Позиция квадрата на сцене (из 3D в 2D координаты)

box.x = vanishingPointX + box.xpos3D * scaleRatio;

box.y = vanishingPointY + box.ypos3D * scaleRatio;

//Помещаем квадрат в массив.

boxes.push(box);

//Добавляем квадрат в список отображения.

addChild(box);

} 

После этого дописываем сюда же еще часть кода:


//Мы используем событие ENTER_FRAME для анимации квадратов addEventListener(Event.ENTER_FRAME, enterFrameHandler);

//Эта функция вызывается каждый кадр. function enterFrameHandler(e:Event):void {

//Цикл перебирает массив квадратов for (var i=0; i < NUMBER_OF_BOXES; i++) {

//Сохраняем квадрат в локальной переменной.

var box:MyBox = (MyBox)(boxes[i]);

//Обновляем позицию по оси Z.

box.zpos3D+=zSpeed;

//Обновляем угол квадрата.

box.currentAngle+=angleSpeed;

//Если zpos3D <= -focalLength, то помещаем квадрат в самое начало, позади всех других.

if (box.zpos3D<=- focalLength) {

//Сохраняем последний квадрат в локальной переменной.

//Последный квадрат всегда первый в массиве - это результат действия функции сортировки sortZ().

var lastBox:MyBox = (MyBox)(boxes[0]);

//Размещаем квадрат позади последнего.

box.zpos3D=lastBox.zpos3D+zDistance;

//Получаем новый угол для квадрата (Угол такой же, как у последнего квадрата, минут угловое отличие angleDifference).

box.currentAngle=lastBox.currentAngle-angleDifference;

}

//Расчитываем новую позицию по оси Х.

box.xpos3D=Math.sin(box.currentAngle)*radius;

//Расчитываем размер квадрата.

var scaleRatio = focalLength/(focalLength + box.zpos3D);

//Задаем размер квадрата.

box.scaleX=box.scaleY=scaleRatio;

//Задаем прозрачность квадрата по альфа каналу в зависимости от размера квадрата.

box.alpha=scaleRatio-0.5;

//Размещаем квадрат на сцене. Переводим 3Д координаты в 2Д.

box.x=vanishingPointX+box.xpos3D*scaleRatio;

box.y=vanishingPointY+box.ypos3D*scaleRatio;

}

//Сортируем квадраты по глубине.

sortZ();

}

//Функция сортировки квадратов, чтобы они отображались корректно.

function sortZ():void {

//Сортировка квадратов таким образом, что квадрат в наибольшим значением Z всегда был вначале массива.

boxes.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING);

//Задается новый индекс квадрата в списке отображения квадратов.

for (var i:uint = 0; i < NUMBER_OF_BOXES; i++) {

setChildIndex(boxes[i], i);

}

}

Все, наша трехмерная анимация готова.

Просмотров: 1275


Понравился материал? Поделись с друзьями!





Подписаться на рассылку.

При перепечатки материалов ссылка на наш сайт обязательна!


 1