This code will show you how to develop a simple native actionscript3d Class it shows you two different methods you could use to develop your own flip 3d effect in ActionScript3 this uses Flash Player 10. This code also only uses the built in functionality of Flash with the exception of the use of Tweener Class used in one of the way you could potentially animate it. You could also use a 3d library like Papaervision3D or Away3D and these libraries would give your more options and greater control but this is just a simple 3D flip using rotationX property of flash. This shows you how you might go about creating a Rolodex like effect in flash. I have also made the code more reusable because it is a class of its own that can be linked to a flash movie clip dragged on the stage and then called and reused easily. One of the many great features of flash is the ability to change visual objects into classes (Visual OOP) of there own rapidly! I have written code that basically once applied to a movie clip will randomly display a frame you will see this in the class you can expand it add new frames to the array etc.. What it does is randomly picks a frame displays the image and then once clicked will rotate the X property of the movie to about 84 degrees and disappear. It also shows you two different ways you could accomplish this task. One way the way I like the best is to use Tweener an animation library that has been around in the Flash community for years. Tweener frees you from the time line in other words your animation is time based instead of frame based. Time based is completely the way to go this ensures your users that they will have the same effect and performance regardless. Time based animation effects have been around in the Flash community for years actually Robert Penner wrote an excellent book Programming Macromedia Flash MX years ago I would recommend this book to anyone who is interested in learning the inner workings of easing equations for animation. His book inspired many animation libraries to be built and his equations can actually be found in many JavaScript animation libraries as well. Frame based animations tend to not always run at the speed of the Timeline FPS as a result they can lag and display a jumpy performance. If you would like a frame based approach I have included one that show you you can call a click function and then tie it to an EnterFrame event and that triggers the animation if you so please.
Call the Class from the Frame
var flipID:uint = new uint(1); var sc9MainPortImg1:sc9MainPortImg = new sc9MainPortImg(); addChild(sc9MainPortImg1); sc9MainPortImg1.x=0; sc9MainPortImg1.y=55; sc9MainPortImg1.name = "sc9Img"+flipID; sc9MainPortImg1.buttonMode = true; sc9MainPortImg1.addEventListener(MouseEvent.MOUSE_DOWN, sc9PortClick); function sc9PortClick(e:MouseEvent){ var sc9MainPortImg1:sc9MainPortImg = new sc9MainPortImg(); addChildAt(sc9MainPortImg1,1); sc9MainPortImg1.x=0; sc9MainPortImg1.y=55; sc9MainPortImg1.name = "sc9Img"+flipID++; trace(sc9MainPortImg1.name); sc9MainPortImg1.buttonMode = true; sc9MainPortImg1.addEventListener(MouseEvent.CLICK, sc9PortClick); }
The actual Simple Flip 3D Class
package { import flash.display.MovieClip; import flash.events.Event; import flash.net.URLLoader; import flash.net.URLRequest; import flash.events.*; import flash.display.*; import flash.filters.BitmapFilterQuality; import flash.filters.BlurFilter; import flash.net.LocalConnection; import fl.transitions.*; import caurina.transitions.Tweener; import flash.external.ExternalInterface; public class sc9MainPortImg extends MovieClip { public var n:Number; public function sc9MainPortImg():void { randomFrame(); this.addEventListener(MouseEvent.CLICK, spinClick); } public function randomFrame():void{ var frameArray:Array = new Array(); frameArray[0]=1; frameArray[1]=2; frameArray[2]=3; frameArray[3]=4; // Get random number created n=randRange(1,4); trace(n); trace(frameArray); // gotoAndStop Frame lable name this.gotoAndStop(frameArray[n]); } public function spinClick(e:MouseEvent):void{ //this.addEventListener(Event.ENTER_FRAME, spin); --> Enable for Frame Based Animation Example var open_tween={rotationX:-84,alpha:0.0,time:20,transition:"easeoutelastic",delay:0}; Tweener.addTween( this, open_tween); } public function spin(e:Event){ this.rotationX -= 2; if(this.rotationX == -84){ this.visible = false; this.removeEventListener(Event.ENTER_FRAME, spin); } } public function randRange(min:Number, max:Number):Number { // Generate a number between and including min - max var randomNum:Number = Math.floor(Math.random()*(max-min+1))+min; return randomNum; } } }
Launch Experiment / Download Code
