• Авторизация


Вертикальная 3D карусель 19-09-2012 09:51 к комментариям - к полной версии - понравилось!

Это цитата сообщения morela4 Оригинальное сообщение

Вертикальная 3D карусель

Вертикальная 3D карусель







 

В этом уроке делаем 3D карусель.

 

Настройка окружения

1. Создайте новый Flash документ размером 550×400.

2. Нарисуйте прямоугольник с закругленными углами. Я сделал прямоугольник 158×35 пикселей. Я использовал белый цвет обводки , а для заливки #0F7E88.



 




 

3.Конвертируйте прямоугольник в муви клип “Menu Item”. Установите точку регистрации в центре.

4. Внутри мувика Menu Item создайте динамическое текстовое поле. Сделайте его достаточно широким и напечатайте в нем некоторый текст.



 




 

5. Дайте текстовому полю instance = “menuItemText“.

6. Внедрите следующие фонты.



 




 

7. Вернитесь на основную временную шкалу и удалите мувик Menu Item со сцены.

8. Свяжите мувик Menu Item с классом “MenuItem”.

Идем в ActionScript 3

9. В первом фрейме вашего мувика введите следующее.



 



CODE



//Общее количество пунктов меню

const NUMBER_OF_ITEMS:uint = 20;



//Этот массив будет содержать все пункты меню

var menuItems:Array = new Array();



//Установим focal length

var focalLength:Number = 350;



//Установим точку исчезновения

var vanishingPointX:Number = stage.stageWidth / 2;

var vanishingPointY:Number = stage.stageHeight / 2;



//Мы вычисляем угловую скорость аngleSpeed в слушателе ENTER_FRAME

var angleSpeed:Number = 0;



//Радиус круга

var radius:Number = 128;



//Вычисляем угол - разницу между пунктами меню (в радианах)

var angleDifference:Number = Math.PI * (360 / NUMBER_OF_ITEMS) / 180;



//Этот цикл создает и располагает элементы карусели

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



//Создаем новый пункт меню

var menuItem:MenuItem = new MenuItem();



//Вычисляем начальный угол для пункта меню

var startingAngle:Number = angleDifference * i;



//Устанавливаем атрибут "currentAngle" - текущий угол для пункта меню

menuItem.currentAngle = startingAngle;



//Положение пункта меню

menuItem.xpos3D =  -  radius * Math.cos(menuItem.currentAngle) * 0.5;

menuItem.ypos3D = radius * Math.sin(startingAngle);

menuItem.zpos3D = radius * Math.cos(startingAngle);



//Вычисляем коэффициент масштабирования для пункта меню (чем дальше элемент -> тем меньше коэффициент масштабирования)

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



//Масштаб пункта меню в соответствии с коэффициентом

menuItem.scaleX = menuItem.scaleY = scaleRatio;



//Положение пункта меню на сцене (из 3D в 2D координаты)

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

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



//Присваиваем начальную альфу

menuItem.alpha = 0.3;



//Добавляем текст в пункт меню

menuItem.menuItemText.text = "Menu item " + i;



//Мы не хотим, чтобы текстовое поле отлавливало мышиные события

menuItem.mouseChildren = false;



//Присваиваем MOUSE_OVER, MOUSE_OUT и CLICK слушатели для пункта меню

menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverItem);

menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutItem);

menuItem.addEventListener(MouseEvent.CLICK, itemClicked);



//Добавляем пункт меню в массив пунктов меню

menuItems.push(menuItem);



//Добавляем пункт меню на сцену

addChild(menuItem);

}



//Добавим ENTER_FRAME слушатель для анимации

addEventListener(Event.ENTER_FRAME, moveCarousel);



//Эта функция вызывается в каждом фрейме

function moveCarousel(e:Event):void {



//Вычисляем угловую скорость в соответствии с положением mouseY

angleSpeed = (mouseY - stage.stageHeight / 2) * 0.0002;



//Цикл по пунктам меню

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



 //Запомним пункт меню в локальную переменную

 var menuItem:MenuItem = (MenuItem)(menuItems[i]);



 //Изменяем текущий угол элемента

 menuItem.currentAngle += angleSpeed;



 //Вычисляем коэффициент масштабирования

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



 //Масштаб элемента в соответствии с коэффициентом

 menuItem.scaleX=menuItem.scaleY=scaleRatio;



 //Установим новые 3D координаты

 menuItem.xpos3D=- radius*Math.cos(menuItem.currentAngle)*0.5;

 menuItem.ypos3D=radius*Math.sin(menuItem.currentAngle);

 menuItem.zpos3D=radius*Math.cos(menuItem.currentAngle);



 //Изменяем координаты элемента.

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

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

}



//Вызываем функцию, которая упорядочивает элементы так, что они перекрывают друг друга корректно

sortZ();

}



//Эта функция сортирует элементы так , что они перекрывают друг друга корректно

function sortZ():void {



//Упорядочиваем массив так, что элемент, который имеет самое высокое

//z положение (= самый дальний) является первым в массиве

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



//Установим новые дочерние индексы для изображений

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

 setChildIndex(menuItems[i], i);

}

}



//Эта функция вызывается, когда мышь наводится на пункт меню

function mouseOverItem(e:Event):void {



//изменяем альфа в 1

e.target.alpha=1;

}



//Эта функция вызывается, когда мышь уходит с пункта меню

function mouseOutItem(e:Event):void {



//изменяем альфа в 0.3

e.target.alpha=0.3;

}



// Эта функция вызывается, когда пункт меню кликается

function itemClicked(e:Event):void {



trace("Кликнули по меню! Добавьте сюда свою логику.");

}

 





10.Это все! Протестируйте ваш мувик!



 

Исходник берём здесь:



 


[показать]

Название: vertmenu.rar

Размер: 6,98 Kb




 

Источник: demiart.ru

 

вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Вертикальная 3D карусель | Irina_K- - Дневник Irina K | Лента друзей Irina_K- / Полная версия Добавить в друзья Страницы: раньше»