Суббота, 05.07.2025, 22:37Приветствую Вас Посторонний | RSS
Главная | | Регистрация | Вход
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
3D карусель ( меню )
GRELIKTIKONДата: Вторник, 05.04.2011, 20:33 | Сообщение # 1
Генералиссимус
Группа: Администраторы
Сообщений: 1400
Награды: 0
Репутация: 0
Статус: Offline
http://demiart.ru/forum/index.php?showtopic=83801

Вертикальная 3D карусель ( меню )


"Чем ночь темней, тем ярче звёзды"
 
GRELIKTIKONДата: Четверг, 07.04.2011, 20:20 | Сообщение # 2
Генералиссимус
Группа: Администраторы
Сообщений: 1400
Награды: 0
Репутация: 0
Статус: Offline
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));
}

Готово.

Теперь проверим !!!


"Чем ночь темней, тем ярче звёзды"
 
  • Страница 1 из 1
  • 1
Поиск:

Disign by Mark © 2025