Пятница, 02 Марта 2012 г. 09:53
+ в цитатник
Вертикальная 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
Серия сообщений "Sothink SWF Quicker":![титульник](//img-fotki.yandex.ru/get/6104/50114850.33d/0_a97e2_328cad52_S.jpg)
Часть 1 - Использование масок во flash
Часть 2 - Делаем элементарные часики.Начинаем учиться созданию flash.
...
Часть 21 - Шкала времени - TimeLine
Часть 22 - Создание анимированного фона
Часть 23 - Вертикальная 3D карусель
Часть 24 - Время и дата. Флеш-ролик.
Часть 25 - флеш-баннер
...
Часть 41 - Sothink SWF Quicker 5.0 Build 501 + Rus - Универсальная флеш программа + Урок.
Часть 42 - Урок. Снимаем логотип с плеера в программе Sothink SWF Quicker.
Часть 43 - Урок вращение в Sothink SWF Quicker от MissKcu
Процитировано 3 раз
Понравилось: 3 пользователям
-
3
Запись понравилась
-
3
Процитировали
-
0
Сохранили
-