3D карусель с использованием XML и ActionScript 3.0

<?xml version="1.0" encoding="utf-8"?>
<carousel>
 
<number_of_images>5</number_of_images>
 
<images>
 
<image>
<url>Images/image1.png</url>
<link_to>https://www.google.ru</link_to>
</image>
 
<image>
<url>Images/image2.png</url>
<link_to>https://www.yandex.ru</link_to>
</image>
 
<image>
<url>Images/image3.png</url>
<link_to>/</link_to>
</image>
 
<image>
<url>Images/image4.png</url>
<link_to>https://www.adobe.com</link_to>
</image>
 
<image>
<url>Images/image5.png</url>
<link_to>https://help.adobe.com/ru_RU/Flash/10.0_Welcome/index.html</link_to>
</image>
 
</images>
 
</carousel><code>
 
Сохраните данный файл под именем "3D-carousel-settings.xml".
Наш XML файл готов.Теперь приготовьте свои картинки для кнопок и разместите их в той дирректории, которую вы указали в XML файле.
Открываем Adobe Flash:
Создаем новый *.fla документ размером 550х250. В первом кадре документа вставляем следующий код:
 
<actionscript3>//Задаем ширину и высоту наших кнопок(эти значения равны размерам ваших картинок для кнопок)
const IMAGE_WIDTH:uint = 50;
const IMAGE_HEIGHT:uint = 50;
 
//Задаем фокусное расстояние.
var focalLength:Number = 500;
 
//Задаем точку схода перспективы в центре сцены.
var vanishingPointX:Number = stage.stageWidth / 2;
var vanishingPointY:Number = stage.stageHeight / 2;
 
//Задаем 3Д пол для картинок.
var floor:Number = 40;
 
//Мы будем расчитывать angleSpeed в ENTER_FRAME слушателе.
var angleSpeed:Number = 0;
 
//Задаем радиус 3Д карусели.
var radius:Number = 200;
 
//Задаем путь к XML файлу. Вы здесь можете прописать свой путь.
var xmlFilePath:String = "3D-carousel-settings.xml";
 
//Мы сохраняем загруженный XML файл в переменной.
var xml:XML;
 
//Этот массив будет содержать наши картинки.
var imageHolders:Array = new Array();
 
//Мы хотим знать, сколько изображений было загружено.
var numberOfLoadedImages:uint = 0;
 
//Полное количество загруженых картинок. Значение будет задаваться через XML файл.
var numberOfImages:uint = 0;
 
//Загружаем XML файл.
var loader = new URLLoader();
loader.load(new URLRequest(xmlFilePath));
 
//Назначаем слушатель на завершение загрузки XML файла.
loader.addEventListener(Event.COMPLETE, xmlLoaded);
 
//Эта функция вызывается, когда XML полностью загружен.
function xmlLoaded(e:Event):void {
 
 //Создаем новый XML объект.
 xml = new XML(loader.data);
 xml.ignoreWhitespace = true;
 
 //Вызываем функцию загрузки картинок.
 loadImages();
}
 
//Эта функция загружает картинки и создает кнопки карусели.
function loadImages():void {
 
 //Количестко загружаемых картинок. Значение берется из XML.
 numberOfImages = xml.number_of_images;
 
 //Цикл находит картинки в XML файле.
 for each (var image:XML in xml.images.image) {
 
 //Создает кнопку, в которую будет помещена картинка.
 var imageHolder:MovieClip = new MovieClip();
 
 //Создается загружчик картинок.
 var imageLoader = new Loader();
 
 //Добавляем загрузчик в кнопку.
 imageHolder.addChild(imageLoader);
 
 //Отключаем события мыши от загрузчика.
 imageHolder.mouseChildren = false;
 
 //Размещаем картинку в центре кнопки.
 imageLoader.x = - (IMAGE_WIDTH / 2);
 imageLoader.y = - (IMAGE_HEIGHT / 2);
 
 //Назначаем ссылки для кнопок.
 imageHolder.linkTo = image.link_to;
 
 //Помещаем кнопки в массив.
 imageHolders.push(imageHolder);
 
 //загружаем картинки.
 imageLoader.load(new URLRequest(image.url));
 
 //Слушатель на завершение загрузки.
 imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
 }
}
 
//Эта функция вызывается, когда картинка полностью загружена.
function imageLoaded(e:Event):void {
 
 //Обновляем число загруженных картинок.
 numberOfLoadedImages++;
 
 //Сглаживаем загруженные картинки (Мы знаем, что загрузчик содержит картинку).
 e.target.content.smoothing = true;
 
 //Проверяем, все ли картинки загруженны.
 if (numberOfLoadedImages == numberOfImages) {
 
 //Инициализируем 3Д карусель.
 initializeCarousel();
 }
}</actionscript3>
 
Как Вы уже заметили, мы сначала задаем все необходимые переменные, затем загружаем XML файл. Как только XML загружен, мы загружаем картинки, которые мы прописали в XML файле. Наконец, мы вызываем функцию initializeCarousel (), которая создает 3Д карусель. Вот код этой функции:
 
<actionscript3>//Эта функция вызывается после того, как все картинки загружены.
//Функция создаем 3Д карусель.
function initializeCarousel():void {
 
 //Расчитываем угол отступа между кнопками карусели
 var angleDifference:Number = Math.PI * (360 / numberOfImages) / 180;
 
 //Цикл по массиву кнопок.
 for (var i:uint = 0; i < imageHolders.length; i++) {
 
 //Передаем кнопку в локальную переменную.
 var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
 
 //Получаем угол размещения для картинки.
 var startingAngle:Number = angleDifference * i;
 
 //Размещаем картинку.
 imageHolder.xpos3D = radius * Math.cos(startingAngle);
 imageHolder.zpos3D = radius * Math.sin(startingAngle);
 imageHolder.ypos3D = floor;
 
 //сохраняем угол размещения во внутренней переменной кнопки.
 imageHolder.currentAngle = startingAngle;
 
 //Расчитываем размер кнопки относительно ее удаленности от зрителя.
 var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);
 
 //Изменяем размер кнопки.
 imageHolder.scaleX = imageHolder.scaleY = scaleRatio;
 
 //Задаем прозрачность кнопки.
 imageHolder.alpha = 0.3;
 
 //Назначаем слушатели на события наведения мыши.
 imageHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverImage);
 imageHolder.addEventListener(MouseEvent.MOUSE_OUT, mouseOutImage);
 
 //Назначаем слушатели на клик мыши.
 imageHolder.addEventListener(MouseEvent.CLICK, imageClicked);
 
 //Размещаем кнопки в сцене (Переводим 3Д координаты в 2Д)
 imageHolder.x = vanishingPointX + imageHolder.xpos3D * scaleRatio;
 imageHolder.y = vanishingPointY + imageHolder.ypos3D * scaleRatio;
 
 //Добавляем кнопки в список отображения сцены.
 addChild(imageHolder);
 }
 
 //Назначаем слушатель ENTER_FRAME для поворота карусели.
 addEventListener(Event.ENTER_FRAME, rotateCarousel);
}</actionscript3>
 
Теперь напишем код для функции вращения карусели:
 
<actionscript3>//Функция вращения карусели.
function rotateCarousel(e:Event):void {
 
 //Расчитываем скорость вращения карусели относительно положения мыши.
 angleSpeed = (mouseX - vanishingPointX) / 4096;
 
 //Цикл по массиву кнопок.
 for (var i:uint = 0; i < imageHolders.length; i++) {
 
 //Передаем кнопку в локальную переменную.
 var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
 
 //Обновляем угол размещения кнопки.
 imageHolder.currentAngle += angleSpeed;
 
 //Задаем новые 3Д координы кнопки.
 imageHolder.xpos3D=radius*Math.cos(imageHolder.currentAngle);
 imageHolder.zpos3D=radius*Math.sin(imageHolder.currentAngle);
 
 //Расчитываем размеры кнопок.
 var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);
 
 //Задаем размер кнопок.
 imageHolder.scaleX=imageHolder.scaleY=scaleRatio;
 
 //Обновляем 2Д координаты кнопок.
 imageHolder.x=vanishingPointX+imageHolder.xpos3D*scaleRatio;
 imageHolder.y=vanishingPointY+imageHolder.ypos3D*scaleRatio;
 }
 
 //Сортируем кнопки по оси Z.
 sortZ();
}
 
//Эта функия сортирует кнопки по Z для правильного наложения друг на друга.
function sortZ():void {
 
 //Кнопка с бОльшим значением Z всегда первая в массиве.
 imageHolders.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING);
 
 //Задаем новые индексы кнопок в массиве.
 for (var i:uint = 0; i < imageHolders.length; i++) {
 setChildIndex(imageHolders[i], i);
 }
}
 
//Функция наведения мышью.
function mouseOverImage(e:Event):void {
 
 //Задаем альфа.
 e.target.alpha=1;
}
 
//Функция отведения мыши.
function mouseOutImage(e:Event):void {
 
 //Задаем альфа.
 e.target.alpha=0.3;
}
 
//Функция клика по кнопке.
function imageClicked(e:Event):void {
 
 //Переход по нужной ссылке.
 navigateToURL(new URLRequest(e.target.linkTo));
}</actionscript3>
 
Готово! :)