CS4

Adobe Creative Suite 4 Video Tutorials

Adobe has posted an extensive collection of video tutorials for Flash, Device Central, Photoshop, Illustrator, Dreamweaver, Bridge, and all the other products that appear in the Design, Web, and Production Studio versions of the Creative Suite.

There’s everything from Getting Started videos for beginners to new features, product overviews, and workflows. All these videos can be viewed on the How To channel on Adobe TV.

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.