Главная
Форум
Баннеры
ТОП Сайтов
Мониторинг серверов
Банлист Сервера
Статистика Сервера
Наши отзывы
Новые сообщения · Участники · Правила форума · Поиск · RSS
  • Страница 1 из 1
  • 1
Вертикальная 3D карусель
DooDLeZДата: Воскресенье, 28.03.2010, 20:26 | Сообщение # 1

WebMaster
Сообщений: 485
[ ]
:-(
Vertical 3D Carousel with ActionScript 3

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

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

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

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

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

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

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

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

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

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

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.Это все! Протестируйте ваш мувик!


  • Страница 1 из 1
  • 1
Поиск:


Все права принадлежат PainKiller.Net.Ru 2009-2010. Дизайн сайта разработан - PainKiller.Net.Ru
Внимание! Рип шаблона запрещен "Нарушение авторского права"! Design bY PainKiller.Net.Ru
Тиц и pr сайта