ССЫЛКА:

http://flashmaster.club/post/46

Создание 3д карусели

В этом уроке я покажу как сделать вертикальную 3D карусель с помощью ActionScript ! Мы будем менять скорость вращения карусели движением мыши.

Советую также поставить видео наблюдение за рабочим столом, вашим офисом, или помещением. Особенно популярно видеонаблюдение в Брянске.

Подготовка:

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

2. Нарисуйте прямоугольник с закругленными краями. Размерам - 158х35, белая обводкаи заливка цвета #333333.

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

4. Внутри этого Символа создайте динамический текст. Сделайте его достаточно широким и напишите что-нибудь.

5. Instance name этого текста - menuItemText.

6. Вставьте следующие шрифты:

7. Теперь вернитесь на главную линию времени, и удалите символ со сцены.

8. В поле Linkage напишите имя класса “MenuItem”.

Приступаем к написанию кода:

В первом кадре напишите следующее:

//Количество элементов карусели
const NUMBER_OF_ITEMS:uint = 20;

//Этот массив содержит все элементы карусели
var menuItems:Array = new Array();

//Устанавливаем фокальную длину
var focalLength:Number = 350;

//Устанавливаем точку вращения
var vanishingPointX:Number = stage.stageWidth / 2;
var vanishingPointY:Number = stage.stageHeight / 2;

//Высчитываем angleSpeed в слушателе 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;

// Позиционируем элемент на сцене
menuItem.x = vanishingPointX + menuItem.xpos3D * scaleRatio;
menuItem.y = vanishingPointY + menuItem.ypos3D * scaleRatio;

//Добавляем прозрачности
menuItem.alpha = 0.3;

//Добавляем текст
menuItem.menuItemText.text = "flashmaster.club " + i;

//Сделаем так, что бы текст не реагировал на события мыши
menuItem.mouseChildren = false;

//Добавим нужные слушатели событий к элементам карусели
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 {

//Высчитываем скорость поворота в зависимости от координаты мыши Y
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 {

//Делаем объект не прозрачный
e.target.alpha=1;
}

//Эта функция вызывается, когда курсор мыши вне элемента
function mouseOutItem(e:Event):void {

//Добавляем прозрачность
e.target.alpha=0.3;
}

//Эта функция вызывается когда вы кликаете мышью по элементу
function itemClicked(e:Event):void {

trace("Вы только что кликнули на один из элементов");
}
 

10. вот и все

Исходник: Скачать

Просмотров: 6426

Понравился материал? Поделись с друзьями!

Поделиться…

---

Подписаться на рассылку.

При перепечатки материалов ссылка на наш сайт обязательна!

---

Лучшие статьи этой категории:
• Flash 3D глобус с исходником


• Создаем 3D куб с помощью paper vision 3D


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


• 3д вращение обьекта


• Создание 3D карусели во flash (CS4, AS3+XML)


Добавить Ваш коментарий:
Имя: 
Комментарий:

Введити сумму чисел с картинки:
 
Коментарии:
Коментарий добавил(а): Людмила
Дата: 2014-06-08

я новичок, поэтому не умею пользоваться исходниками...подскажите пожалуйста



Коментарий добавил(а): Олег
Дата: 2013-01-28

очень понравился урок подскажите похжалуйста - как создать ГОРИЗОНТАЛЬНУЮ карусель, можно ли попровить этот код и получить горизонтальную???? очень нужно