Thursday, December 23, 2010

Create a 3D carousel gallery using AS3: Part 5

In this tutorial we will add mouse interactivity.

The wheel's direction, movement speed and height is related to the mouse position:


To make the move speed change according to the mouse position on the X, axis, create a new MOUSE_MOVE event and simply apply the difference between centerX and mouseX divided by a number of your preference to make sure the number won't be too big:

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseHandler);

function mouseHandler(MouseEvent):void
{
moveSpeed = (centerX - mouseX)/80;
}

To make the height change according to the mouse, add this:

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseHandler);

function mouseHandler(MouseEvent):void
{
moveSpeed = (centerX - mouseX)/80;
c_height = (mouseY - centerY)*2;

if (c_height == 0)
{
c_height = 1;
}

if (c_height > heightMax)
{
c_height = heightMax;
}
if (c_height < heightMin)
{
c_height = heightMin;
}
}

As you can see, I have 2 new variables - heightMax and heightMin. I set them up in the beginning of the code:

var heightMax = 150;
var heightMin = -150;

I set the initial height (c_height) variable to heightMax as well.

var c_height:Number = heightMax;

Because the wheel can go both left and right, we need to add another check for depth management - if the position of an item goes below zero, add 360 to it:

if (galleryItems[u].pos <= 0)
{
galleryItems[u].pos += 360;
}

Here is the full code:

var totalItems:Number = 15;
var moveSpeed:Number = 3;
var galleryItems:Array = [];
var farthestFade:Number = 0.1;
var farthestSize:Number = 0.5;
var heightMax = 150;
var heightMin = -150;

var centerX:Number = 200;
var centerY:Number = 200;
var c_width:Number = 300;
var c_height:Number = heightMax;

var positionDistance:Number = 360 / totalItems;

for (var i:int = 0; i<totalItems; i++)
{
var item:MovieClip = new carouselItem();
addChild(item);
galleryItems.push({mc:item, pos:(positionDistance*i)});
}

stage.addEventListener(Event.ENTER_FRAME, carouselMover);

function carouselMover(Event):void
{
for (var u:int = 0; u<totalItems; u++)
{
galleryItems[u].pos +=  moveSpeed;
galleryItems[u].mc.x = Math.cos(galleryItems[u].pos / 180 * Math.PI) * c_width / 2 + centerX;
galleryItems[u].mc.y = Math.sin(galleryItems[u].pos / 180 * Math.PI) * c_height / 2 + centerY;

galleryItems[u].mc.alpha = (galleryItems[u].mc.y-centerY+c_height/2)/(c_height)+farthestFade;
galleryItems[u].mc.scaleX = (galleryItems[u].mc.y-centerY+c_height/2)/(c_height)+farthestSize;
galleryItems[u].mc.scaleY = galleryItems[u].mc.scaleX;

if (galleryItems[u].mc.scaleX > 1)
{
galleryItems[u].mc.scaleX = 1;
galleryItems[u].mc.scaleY = 1;
}

if (galleryItems[u].pos >= 360)
{
galleryItems[u].pos -=  360;
}
if (galleryItems[u].pos <= 0)
{
galleryItems[u].pos += 360;
}
if (galleryItems[u].pos >= 90 && galleryItems[u].pos < 90 + moveSpeed)
{
galleryItems[u].mc.parent.setChildIndex(galleryItems[u].mc, numChildren-1);
}
if (galleryItems[u].pos >= 270 && galleryItems[u].pos < 270 + moveSpeed)
{
galleryItems[u].mc.parent.setChildIndex(galleryItems[u].mc, 0);
}
}
}

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseHandler);

function mouseHandler(MouseEvent):void
{
moveSpeed = (centerX - mouseX)/80;
c_height = (mouseY - centerY)*2;

if (c_height == 0)
{
c_height = 1;
}

if (c_height > heightMax)
{
c_height = heightMax;
}
if (c_height < heightMin)
{
c_height = heightMin;
}
}

Thanks for reading!

Related:

Create a 3D carousel gallery using AS3: Part 1
Create a 3D carousel gallery using AS3: Part 2
Create a 3D carousel gallery using AS3: Part 3
Create a 3D carousel gallery using AS3: Part 4
Create a 3D carousel gallery using AS3: Part 6
Create a 3D carousel gallery using AS3: Part 7
Create a 3D carousel gallery using AS3: Part 8
Create a 3D carousel gallery using AS3: Part 9
Create a 3D carousel gallery using AS3: Part 10
Create a 3D carousel gallery using AS3: Part 11

No comments:

Post a Comment