Создаём кубик с простенькой интерактивностью с помощью action script 3.0

15 Дек
2011

Этот проект можно разместить на каком-нибудь сайте, в виде рекламы, так как заменив однообразные картинки на гранях, можно получить 6 вращающихся рекламных картинок.

Сейчас создадим небольшой проект во Flash, который будет содержать собой вращающийся кубик, при этом скорость будет зависеть от положения курсора, ещё внизу мы поставим бегунок, с помощью которого пользователь сможет регулировать удаление граней относительно центра кубика.

Для начала создадим объект MovieClip, туда поместим какую-нибудь картинку, к примеру, под названием Flash, и проставим её необходимые свойства, например x = -100, y = -100, z = -100, width = 200, height = 200.

Возвращаемся на сцену, вытаскиваем туда шесть только что сделанных нами объектов, и называем их Gran_0, Gran_1, Gran_2, Gran_3, Gran_4, Gran_5.

Теперь начинаем прописывать необходимы код:

//Создаём массив, состоящий из наших граний
var cube_1:Array = new Array(Gran_0, Gran_1, Gran_2, Gran_3, Gran_4, Gran_5);

//Создаём ещё один массив, состоящий только из боковых граней
var cube:Array = new Array(Gran_1, Gran_2, Gran_3, Gran_4);

//Создаём переменную, которая понадобится для 3d сортировки
var home:MovieClip = this;

//Пишем цикл, который поставит все грани в определённую точку (400; 300), сейчас сцена 800 на 600 пикселей
for (var i:int = 0; i<6; i++)
{
cube_1[i].x = 400;
cube_1[i].y = 300;
}

//Теперь прописываем необходимые углы наклона наших граней
cube[0].rotationY = 90;
cube[1].rotationY = 180;
cube[2].rotationY = 270;
cube[3].rotationY = 0;
Gran_5.rotationX = 90;
Gran_5.rotationY = 180;
Gran_0.rotationX = 270;
Gran_0.rotationY = 0;

//Теперь создаём слушатель ENTER_FRAME, который будет отвечать за вращения нашего кубика, операторы if нам понадобятся для создания 3d сортировки
addEventListener(Event.ENTER_FRAME, onClip);
function onClip(e:Event):void
{
Gran_5.Flash.rotationZ += (mouseX - 400)/200;
Gran_0.Flash.rotationZ -= (mouseX - 400)/200;
for (var n:int = 0; n<4; n++)
{
cube[n].rotationY -= (mouseX - 400)/200;
if (cube[n].rotationY > 360)
{
cube[n].rotationY -= 360;
}
if (cube[n].rotationY < - 360)
{
cube[n].rotationY += 360;
}
}
}

//Создаём ещё один слушатель ENTER_FRAME, который будет непосредственно отвечать за 3d сортировку
addEventListener(Event.ENTER_FRAME, sorting);
function sorting(e:Event):void
{
for (var m:int = 0; m<7; m++)
{
if (Math.abs(Math.abs(home.getChildAt(m).rotationY) - 180) > Math.abs(Math.abs(home.getChildAt(m + 1).rotationY)-180))
{
home.swapChildrenAt(m, m+1);
}
}
}

/*Если сейчас запустить ролик, то он будет выдавать предупреждение «Предоставленный индекс выходит за допустимые пределы.» Это мы скоро исправим, так как ещё два объекта нам необходимо добавить на сцену
Итак создаём текстовое поле под названием TextField_1 и вписываем туда, что душе угодно, добавляем ему горизонтальный UIScrollbar, и называем его Scroller
*/
//Теперь нам необходимо скрыть текстовое поле, так как его содержимое нам не интеремсно
TextField_1.visible = false;

// И вот наступил момент, когда мы сделаем так, чтобы грани нашего кубика раздвигались, для этого создадим ещё один слушатель ENTER_FRAME
addEventListener(Event.ENTER_FRAME, ScaleZ);
function ScaleZ(e:Event):void
{
for (var R:int = 0; R<6; R++)
{
cube_1[R].scaleZ = Scroller.scrollPosition/715 + 1;
}
}

Должен отметить, что на мой взгляд этот скрипт не очень сложный (хотя action script изучаю не особо усердно и всего лишь полгода), но не исключаю возможности, что мои комментарии будут далеко не всем понятны. Если кому интересно, то это моя первая статья на Блоге и вообще моя первая статья где-либо.
В заключение могу отметить, что мои комментарии написаны так, что при компиляции они учитываться не будут, так что Вы можете скопировать текст (кроме абзацев, совсем не относящихся к самому коду программы), вставить куда нужно (выбираете кадр и жмёте F9), добавляете необходимые MovieClip’ы, текстовое поле и бегунок на сцену, их названия должны соответствовать названиям, написанных в комментариях, или Вы должны их поменять в коде программы, и всё должно получиться).
Спасибо, что дочитали эту статью до конца, надеюсь Вам понравилось, и, если Вам не приходилось сталкиваться с подобным, Вы открыли для себя что-то новое.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх