Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


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


В этом уроке делаем 3D карусель.
Настройка окружения

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

2. Нарисуйте прямоугольник с закругленными углами. Я сделал прямоугольник 158×35 пикселей. Я использовал белый цвет обводки , а для заливки #0F7E88.
alt
3.Конвертируйте прямоугольник в муви клип “Menu Item”. Установите точку регистрации в центре.

4. Внутри мувика Menu Item создайте динамическое текстовое поле. Сделайте его достаточно широким и напечатайте в нем некоторый текст.
alt
5. Дайте текстовому полю instance = “menuItemText“.

6. Внедрите следующие фонты.
alt
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!
Название: vertmenu.rar
Размер: 6.98 Kb


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

комментарии (1)

#1 написал: INFERNAL | 3 августа 2009 12:09
     

Похоже на облако тегов, которое когда-то было у нас на Arstyle smile
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.