Flash 3D карусель ( ГОРИЗОНТАЛЬНАЯ ) http://demiart.ru/forum/index.php?showtopic=82758
Создание XML файла
В XML файле мы определим три важные вещи,
* сколько картинок мы используем в 3D карусельном меню,
* URL-и, где можно найти картинки и
* URL-и, где должны быть ссылки картинок.
1. Введите следующее в вашем текстовом редакторе.
Code
<?xml version="1.0" encoding="utf-8"?>
<carousel>
<number_of_images>10</number_of_images>
<images>
<image>
<url>http://flashmymind.com/3D_carousel/image1.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
<image>
<url>http://flashmymind.com/3D_carousel/image2.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
<image>
<url>http://flashmymind.com/3D_carousel/image3.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
<image>
<url>http://flashmymind.com/3D_carousel/image4.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
<image>
<url>http://flashmymind.com/3D_carousel/image5.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
<image>
<url>http://flashmymind.com/3D_carousel/image6.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
<image>
<url>http://flashmymind.com/3D_carousel/image7.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
<image>
<url>http://flashmymind.com/3D_carousel/image8.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
<image>
<url>http://flashmymind.com/3D_carousel/image9.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
<image>
<url>http://flashmymind.com/3D_carousel/image10.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
</images>
</carousel>
2. Сохраним файл как “3D-carousel-settings.xml”.
Теперь у нас есть готовый XML!
Вы можете использовать свои собственные картинки, только запомните , нужно сделать их такого же размера и установить URL-и, соответствующие вашим установкам. Я использовал следующие картинки (70×70).
Идем во Flash
3. Создайте новый Flash документ размером 550×250.
4. В первом фрейме вашего мувика введите следующее.
Code
//Мы используем картинки размером 70x70 (измените это, если ваши картинки другого размера)
const IMAGE_WIDTH:uint = 70;
const IMAGE_HEIGHT:uint = 70;
//Установим focal length
var focalLength:Number = 500;
//Установим точку исчезновения
var vanishingPointX:Number = stage.stageWidth / 2;
var vanishingPointY:Number = stage.stageHeight / 2;
//3D пол для картинок
var floor:Number = 40;
//Мы вычисляем угловую скорость в слушателе ENTER_FRAME
var angleSpeed:Number = 0;
//радиус круга
var radius:Number = 200;
//Определим путь к XML файлу.
//Вы можете использовать мой путь или ваш собственный.
var xmlFilePath:String = "http://flashmymind.com/xml/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));
//Мы вызываем функцию xmlLoaded() когда загрузка закончилась.
loader.addEventListener(Event.COMPLETE, xmlLoaded);
//Эта функция вызывается, когда XML файл загружен
function xmlLoaded(e:Event):void {
//Создаем новый XML объект из загруженных XML данных
xml = new XML(loader.data);
xml.ignoreWhitespace = true;
//Вызывем функцию, которая загружает картинки
loadImages();
}
//Эта функция загружает и создает контейнеры для картинок, определенных в 3D-carousel-settings.xml
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 такое, что точка регистрации контейнера - в центре
imageLoader.x = - (IMAGE_WIDTH / 2);
imageLoader.y = - (IMAGE_HEIGHT / 2);
//Запомним ссылку для imageHolder
imageHolder.linkTo = image.link_to;
//Добавим imageHolder в массив imageHolders
imageHolders.push(imageHolder);
//Загружаем картинку
imageLoader.load(new URLRequest(image.url));
//Слушаем когда картинка грузится
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
}
}
//Эта функция вызывается, когда картинка грузится
function imageLoaded(e:Event):void {
//Изменяем число загруженных картинок
numberOfLoadedImages++;
//Установим bitmap smoothing в true для картинки (мы знаем, что загруженное содержимое - это bitmap).
e.target.content.smoothing = true;
//Сделаем проверку, загружена ли последняя картинка
if (numberOfLoadedImages == numberOfImages) {
//установим карусель
initializeCarousel();
}
}
Как вы можете видеть, мы вначале создали все переменные, которые мы собираемся использовать в этом мувике. Затем мы загружаем XML файл. Как только XML файл загрузится, мы загрузим все картинки, которые определены в XML файле. В финале мы вызываем функцию initializeCarousel(), которая отвечает за создание 3D карусели. Эта функция здесь.
Code
//Эта функция вызывается, когда все картинки загружены.
//Теперь мы готовы создать 3D карусель.
function initializeCarousel():void {
//Вычисляем угол между картинками (в радианах)
var angleDifference:Number = Math.PI * (360 / numberOfImages) / 180;
//Цикл по всем картинкам
for (var i:uint = 0; i < imageHolders.length; i++) {
//Присвоим imageHolder локальной переменной
var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
//Получаем угол для картинки (мы равномерно делаем интервалы между картинками)
var startingAngle:Number = angleDifference * i;
//Положение для imageHolder
imageHolder.xpos3D = radius * Math.cos(startingAngle);
imageHolder.zpos3D = radius * Math.sin(startingAngle);
imageHolder.ypos3D = floor;
//Установим атрибут "currentAngle" для imageHolder
imageHolder.currentAngle = startingAngle;
//Вычисляем коэффициент масштабирования для imageHolder (чем дальше картинка -> тем меньше масштаб)
var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);
//Масштабируем imageHolder в соответствии с scale ratio
imageHolder.scaleX = imageHolder.scaleY = scaleRatio;
//Установим альфа для imageHolder
imageHolder.alpha = 0.3;
//Мы хотим знать, когда мышь над imageHolder и когда уходит с imageHolder
imageHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverImage);
imageHolder.addEventListener(MouseEvent.MOUSE_OUT, mouseOutImage);
//Мы также хотим прослушать все клики
imageHolder.addEventListener(MouseEvent.CLICK, imageClicked);
//Положение imageHolder на сцене(из 3D в 2D координаты)
imageHolder.x = vanishingPointX + imageHolder.xpos3D * scaleRatio;
imageHolder.y = vanishingPointY + imageHolder.ypos3D * scaleRatio;
//Добавляем imageHolder на сцену
addChild(imageHolder);
}
//Добавляем ENTER_FRAME для поворота
addEventListener(Event.ENTER_FRAME, rotateCarousel);
Теперь мы имеем карусель на сцене!
В конце добавим функцию поворота! Напишите следующее.
Code
function rotateCarousel(e:Event):void {
//Вычисляем угловую скорость angleSpeed в соответствии с положением мыши
angleSpeed = (mouseX - vanishingPointX) / 4096;
//Цикл по картинкам
for (var i:uint = 0; i < imageHolders.length; i++) {
//Присвоим imageHolder локальной переменной
var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
//Изменим текущий угол для imageHolder
imageHolder.currentAngle += angleSpeed;
//Установим новое 3D положение для imageHolder
imageHolder.xpos3D=radius*Math.cos(imageHolder.currentAngle);
imageHolder.zpos3D=radius*Math.sin(imageHolder.currentAngle);
//Вычисляем коэффициент масштабирования
var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);
//Масштабируем imageHolder в соответствии с коэффициентом масштабирования
imageHolder.scaleX=imageHolder.scaleY=scaleRatio;
//Изменяем координаты imageHolder
imageHolder.x=vanishingPointX+imageHolder.xpos3D*scaleRatio;
imageHolder.y=vanishingPointY+imageHolder.ypos3D*scaleRatio;
}
//Вызываем функцию, которая сортирует картинки так, что они корректно накладываются друг друга
sortZ();
}
//Эта функция упорядочивает картинки таким образом, что они корректно перекрывают друг друга
function sortZ():void {
//Сортировка массива таким образом, что картинка, имеющая самое высокое
//положение z (= самая дальняя) будет первой в массиве
imageHolders.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING);
//Установим новые дочерние индексы для картинок
for (var i:uint = 0; i < imageHolders.length; i++) {
setChildIndex(imageHolders[i], i);
}
}
//Эта функция вызывается, когда мышь находится над imageHolder
function mouseOverImage(e:Event):void {
//Установим альфа в 1
e.target.alpha=1;
}
//Эта функция вызывается, когда мышь уходит с imageHolder
function mouseOutImage(e:Event):void {
//Установим альфа в 0.3
e.target.alpha=0.3;
}
//Эта функция вызывается,когда происходит клик по imageHolder
function imageClicked(e:Event):void {
//Навигация на URL, который в переменной "linkTo"
navigateToURL(new URLRequest(e.target.linkTo));
}
Готово.
Теперь проверим !!!