Создание 3D карусели - мои пояснения к урокам - Флеш - Каталог статей

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

2. Нарисуйте прямоугольник с закругленными краями.
Размером - 158х35, белая обводка, цвет заливка можно
взять любой, для этого нажмите на палитру цветов.
Так как белая обводка на белом фоне не видна,
меняю цвет рабочего стола, нажимая на белый
прямоугольник, где написано Монтажный стол "
Задать цвет фона".

Выставляем параметры прямоугольника

Из скрина видно, что обводку взяла 5 пикселей, угол
закругления 10, можно их поменять и поставить свои.
Нажимаем на самую верхнюю стрелочку в инструментах
и выделяем прямоугольную фигуру. Пока она
у нас выделена делаем следующий пункт.

3. Конвертируйте прямоугольник в MovieCLip, нажав на F8
(или нажать правой клавишей мышки на прямоугольник,
откроется окно и там нажать на "преобразовать
в символ") и назовите его
“Menu Item”. Точка регистрации в центре.

появится вот такое окно

нажимаем ОК

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

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

Внедрите текст. Поставьте галочки во всех чекбоксах,
чтобы имена могли быть на русском и англ. языках
(если поставить по уроку русский текст не будет виден)

7. Теперь вернитесь на главную сцену ( для того, чтобы
вернуться на главную сцену нажмите на
монтажный стол), и удалите символ со сцены.

8. Нажимаем F9 и вставляем в окно код:

//Общее количество пунктов меню const NUMBER_OF_ITEMS:uint = 16;



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



var menuItems:

Array = new Array();

var menuText:Array=new Array();

var menuUrl:Array=new Array();

menuText="Preriy "," jzayka "," Sabine Astana "," ВАТ ","Навруб ","просто Вера"," Лариса_Гурьянова","novprospekt","Иванновна","MariYnina","Ольга_Клименко"

,"Татьяна","ЕгороваТатьяна","SvetlanaT","Mademoiselle Viv","Мила-Милена"



menuUrl=" http://www.liveinternet.ru/users/preriy/profile/"

https://www.liveinternet.ru/users/jzayka/profile/"

https://www.liveinternet.ru/users/3111237/profile/"

https://www.liveinternet.ru/users/5093970/profile "

https://www.liveinternet.ru/users/4747147/profile/"

https://www.liveinternet.ru/users/5022732/profile/"

https://www.liveinternet.ru/users/3354683/profile/"

https://www.liveinternet.ru/users/novprospekt/profile/"

https://www.liveinternet.ru/users/4955107/profile/"

https://www.liveinternet.ru/users/mariynina/profile/"

https://www.liveinternet.ru/users/mariflash/profile/"

https://www.liveinternet.ru/users/4958866/profile/",

https://www.egorovatatiana.ru/profile?upd"

https://www.liveinternet.ru/users/svetlanat/profile"

https://www.liveinternet.ru/users/lady_de/profile/"

https://www.liveinternet.ru/users/4394467/profile/"

//Установим 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;

// setBG();

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

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

//Создаем новый пункт меню var menuItem:MenuItem = new MenuItem();

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

var startingAngle:Number = angleDifference * i; menuItem.name=String(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 = menuText[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 { var curInd:uint;

curInd=uint(e.target.name);

var request:URLRequest = new URLRequest(menuUrl[curInd]);

navigateToURL(request); }

function setBG() {

var w:Number=stage.stageWidth;

var h:Number=stage.stageHeight;

graphics.lineStyle(0,0); graphics.beginFill(0);

graphics.lineTo(w,0); graphics.lineTo(w,h);

graphics.lineTo(0,h); graphics.lineTo(0,0);

graphics.endFill(); }



Выделенное синим, красным и зелёным меняем на

свои надписи и ссылки,

16 - это количество пластинок в меню,

можете поменять на любое число, соответственно

кол-во надписей и ссылок должно

быть столько сколько пластинок.

Вот и всё. Что непонятно спрашивайте. Успехов!