Playing 3d effects in Flash Player 10

I had the chance to play with an advance copy of Flash CS4 as a part of Adobe’s Flash Camp. I was unable to attend due to a family emergency, but I did spend some time playing with it at home. I decided to build a simple home screen for a mobile phone with a few ‘widgets’ that were available. I was looking to recreate the card flip effect found in Apple’s Dashboard. I had coded a demo like this before, but the effect was not nearly as good, nor the coding as simple.

With the new 3D capabilities, I figured it should be straight foward. I quickly mocked up some static screens for the the front and back for three widgets (Sports, Stocks, and Weather). You can tell when I coded it by the football score.

The demo can be viewed here. Since I use the free version of WordPress, I can’t directly add the swf in the post.

So how do you make it work?

Each widget is made of two MovieClips; the front and the back. At the start of the movie, you need to hide each clip by setting the alpha value to 0. I also rotate the back of the widget to the proper orientation.

panelFront_mc.alpha = 0;
panelBack_mc.alpha = 0;
panelBack_mc.rotationY = -90;

Then when you press the Enter key to trigger the flip effect, check to see if it is shown (if not, fade in the Front of the widget) or if we need to flip it (and to figure out which way to flip: front to back or back to front)

Once the widget is shown, and the user wants to view the back of the widget, I add an ENTER_FRAME event listener that calls showBackPanel :

stage.addEventListener(Event.ENTER_FRAME, showBackPanel);

function showBackPanel(evt:Event):void {
if (panelFront_mc.rotationY < 90) {
panelFront_mc.rotationY += 10;
}

if (panelFront_mc.rotationY == 90) {
panelBack_mc.alpha = 1;
panelBack_mc.rotationY += 10;
}

if (panelBack_mc.rotationY == 0 ) {
panelFront = false;
stage.removeEventListener(Event.ENTER_FRAME, showBackPanel);
}
}

The basic flow is this; start rotating the front movie clip. Once that movie clip is at 90 degrees, stop its rotation and start rotating the back movie clip into view. Once the back movie clip has reached a rotation of 0 degrees, remove the ENTER_FRAME listener. Flipping the widget from back to the front is as simple as:

function showFrontPanel(evt:Event):void {
if (panelBack_mc.rotationY > -90 ) {
panelBack_mc.rotationY -= 10;
}
if (panelBack_mc.rotationY == -90 ) {
panelFront_mc.rotationY -= 10;
}
if (panelFront_mc.rotationY == 0 ) {
panelFront = true;
stage.removeEventListener(Event.ENTER_FRAME, showFrontPanel);
}
}

There is a little bit more to properly reseting the MovieClips after they are closed.

Here is a link to the source file.

Advertisements

One comment

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s