DrPunchBlog

It takes CS4… damn you, no rotationY having CS3!

/*
// ----------------------------------------
CARD FLIP

http://www.thetechlabs.com/tutorials/flash/create-a-card-flip-effect-for-flash-player-10-using-actionscript-3/

// ----------------------------------------
*/

function flip( e:MouseEvent ) : void
{
var obj 	= e.target;
var side	= e.target.name.substring( 1,2 );

var otherSide:String = "F" ;
if( side == "F" ) {
otherSide = "B";
}

var other	= obj.parent.getChildByName( "b" + otherSide + e.target.name.substring( 2 ) );

// you will want to swap the indexes of the boxes, so you can click through them.
obj.parent.swapChildren( obj, other );

// Front is on
TweenMax.to(obj, 1,
{
rotationY:obj.rotationY + 180,
alpha: 0
//onUpdate:setSideVisibility( obj )
});

// Back is on
TweenMax.to(other, 1,
{
rotationY:other.rotationY + 180,
alpha: 1
//onUpdate:setSideVisibility( other )
});

}

function setSideVisibility( obj:Object ):void
{
if( obj.rotationY >= 90 )
{
obj.visible = true;
} else if( obj.rotationY < 90 ){
obj.visible = false;
}

}

here I am setting up the vars

// tweenmax
// http://blog.greensock.com/tweenmaxas3/
import gs.TweenMax;
import gs.easing.*;

/*
// ----------------------------------------
SET UP BOXES FOR THE PAGE

// ----------------------------------------
*/
// -- BOXES
// you will want two boxes in the library linked to boxFront and boxBack
var boxF:boxFront;
var boxB:boxBack;
// default height and width
var boxWidth:Number;
var boxHeight:Number;
// space around the boxes
var boxPadding:Number;
// set the X and Y values
var boxXpos:Number;
var boxYpos:Number;
// to help center on the page
var boxXadj:Number;
var boxYadj:Number;
// number for the current row/col
var boxRow:Number;
var boxCol:Number;
// max ros/col per page
var boxRowMax:Number;
var boxColMax:Number;
// nuber of boxes per page
var boxPerPage:Number;
// for testing --
var boxesToAdd:Number;

// -- PAGE
// the holder for the actual page
var page:MovieClip;
// current number of pages generated
var pageNum:Number;

this next section initalizes the vars

/*
// ----------------------------------------
INIT THE VARS

// ----------------------------------------
*/
function initBoxes()
{
// -- init box vars
boxWidth = 140;
boxHeight = 105;
boxPadding = 10;
boxXpos = 0;
boxYpos = 0;

boxRowMax = 3;
boxColMax = 3;

boxRow = 0;
boxCol = 0;

boxXadj = Number( ( boxWidth * 4 ) + ( boxPadding * 3 ) ) / 2;
boxYadj = Number( ( boxHeight * 3 ) + ( boxPadding * 2 ) ) / 2;

boxPerPage = 12;
// just keep it easy for the first page.
boxesToAdd = 12;

// -- init page vars
pageNum = 0;
// add the first page
addPages();
// start adding boxes
addBoxes();

}

Yes, I am just breaking this up because it is a lot of code.
Here I’m adding the boxes ( one page is enough )

/*
// ----------------------------------------
ADD BOXES

// ----------------------------------------
*/
function addBoxes( )
{

// add box front
for ( var i:uint = 0; i < boxesToAdd; i++ )
{
boxF = new boxFront();
boxF.name = "bF"+ i;

// add back
boxB = new boxBack();
boxB.name = "bB"+ i;

// preset postions
boxXpos = boxXadj + ( ( boxWidth + boxPadding ) * boxCol );
boxYpos = boxYadj + ( ( boxHeight + boxPadding ) * boxRow );

/*
trace( "box: " + i );
trace( "row: " + boxRow );
trace( "col: " + boxCol + "\n" );
*/

// check for new postions
if( boxCol >= boxColMax )
{
// add a new row
boxRow++;
// reset col
boxCol = 0;
} else {
// add a new col
boxCol++;
}

// check for new postions
if( boxRow >= boxRowMax )
{
// add a new page
addPages();
// reset row
boxRow = 0;
boxCol = 0;
}

boxF.x = boxB.x = boxXpos;
boxF.y = boxB.y = boxYpos;
// set defaults for animation
boxB.alpha = 0;
boxB.rotationY = -180;

boxF.addEventListener(MouseEvent.MOUSE_DOWN,flip);

var holder = this.getChildByName( "p" + Number( pageNum -1 ) );

holder.addChild( boxB );
holder.addChild( boxF );

}
}

I have the boxes in a “page” because I like things to be kept in holder clips.
It keeps them warm and snug.

/*
// ----------------------------------------
ADD PAGES

// ----------------------------------------
*/
function addPages()
{
page = new MovieClip();
page.name = "p" + pageNum;

// temp
page.x = 100 * pageNum;
page.y = -5 * pageNum;
// set alpha
var a:String = String( 1 - ( pageNum / 5 ) ).substring( 0,3 );
page.alpha = Number( a );

//trace( page.name + " ----------- " + page.x + " : " + page.y );

addChild( page );

/*
you will need to build something to
swap the indexes so that the lower
numbered pages are in front
*/

pageNum++;
}

!! FLIP GOES HERE !!

/*
// ----------------------------------------
START IT OFF

// ----------------------------------------
*/
initBoxes();

Basically I have everything on one layer named “AS: TEST”
It is just broken up to make it easier to read, and to make it look like I have a big, smart post. But I’m not giving you a tutorial, just working code.