Sunday, December 19, 2010

Create a 3D carousel gallery using AS3: Part 1

Today we'll start making a 3d carousel gallery. This is going to be a long journey, but we will cover a lot of things.

In this first tutorial we will create a circular movement of one item.

See what we're going to achieve today:


Let's create a placeholder movieclip: draw a rectangle or something, put it in your library as MovieClip and give it a class name of carouselItem. There are going to be a pretty many placeholders right now. Let's set up some variables we will need and put the item on stage:

var moveSpeed:Number = 5;

var firstItemPosition:Number = 0;
/*This is a temporary variable. 
Later (when we have more than one item)
we'll use an array. The position means
the items place in the whole cycle - from
0 to 360.*/

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

var item:MovieClip = new carouselItem();
addChild(item);
item.x = centerX;
item.y = centerY + c_height / 2;

CenterX and centerY variables define the central point of our ellipse/circle. The c_width and c_height define the width and height of this ellipse. Of course the ellipse itself won't be visible (it won't even be there).

To make this kind of movement, we need to use the base of Unit Circle - we will use Math.cos and Math.sin to set the item's coordinates on the oval. We use these functions on firstItemPosition variable (which is temporary, later we will store everything in an array) to find the new X and Y of the item. This will find out in which position in the circle the item currently is. To define the sizes we need, we multiply this whole thing centerX (centerY for Y axis) times and add c_width (c_height for Y axis).

Remember that Math.cos and Math.sin work in radians, so we'll need to convert degrees to radians first!

Here's how I do that:

stage.addEventListener(Event.ENTER_FRAME, carouselMover);

function carouselMover(Event):void
{
firstItemPosition +=  moveSpeed;
item.x = Math.cos(firstItemPosition/180 * Math.PI) * c_width / 2 + centerX;
item.y = Math.sin(firstItemPosition/180 * Math.PI) * c_height / 2 + centerY;

if (firstItemPosition >= 360)
{
firstItemPosition -=  360;
}
}

And the whole code is:

var moveSpeed:Number = 5;

var firstItemPosition:Number = 0;
/*This is a temporary variable. 
Later (when we have more than one item)
we'll use an array. The position means
the items place in the whole cycle - from
0 to 360.*/

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

var item:MovieClip = new carouselItem();
addChild(item);
item.x = centerX;
item.y = centerY + c_height / 2;

stage.addEventListener(Event.ENTER_FRAME, carouselMover);

function carouselMover(Event):void
{
firstItemPosition +=  moveSpeed;
item.x = Math.cos(firstItemPosition/180 * Math.PI) * c_width / 2 + centerX;
item.y = Math.sin(firstItemPosition/180 * Math.PI) * c_height / 2 + centerY;

if (firstItemPosition >= 360)
{
firstItemPosition -=  360;
}
}

Thanks for reading!

Related:

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 5
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