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 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 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; } } }

Download Code

I have put together a simple experiment that draws semi-transparent lines on an HTML page incrementally for no particular purpose.  This is something I can do with ActionScript the difference is this experiment in ActionScript would be 3 times faster and I would have greater control not only would it be faster but it would also work on every browser and render the exact same way.  I do like JavaScript but it is not substitution for ActionScript or C#.  Someday I am quite sure it will mature and more and more libraries of code will be ported over but the expectation for things to render the same way cross browser is a long ways away form a reality.  HTML5 is simply not a Flash or Silverlight Killer. I also know that browsers will need faster JavaScript engines more like

var bg = '<div class="lineBg">&nbsp;</div>'; var lpos = 0; var lint = 1; var midPoint; var lineCount = 0; var mainWidth = $(window).width(); mainWidth = mainWidth - 15; var mainHeight = $(window).height(); midPoint = mainHeight / 2; function goLines(){ $('#container').append(bg); $('.lineBg').css('top', midPoint - 100); $('.lineBg').css('left', '0'); $('.lineBg').css('display', 'block'); $(this).everyTime(200, function(lineCount) { lineCount++;
randomLines(lineCount); }, 700); } function randomLines(i){ var l1 = '<div id="'; var l2 = '" class="line">&nbsp;</div>'; var l = l1+i+l2; $('#container').append(l); $('#'+i).css('left', getLeftPos(i,mainWidth)); if(isEven(i)){ $('#'+i).css('top',midPoint); $('#'+i).animate({rotate: getRotation(), height: getScale(), opacity: '+=0.5', backgroundColor:'#01a6fb' }, 300); }else{ var neg = true; $('#'+i).css('top',midPoint - 100); $('#'+i).animate({rotate: getRotation(neg), height: getScale(), opacity: '+=0.5' }, 300);
} $('#'+i).css('display','block'); }   function getLeftPos(i,mainWidth){ lPos = i; lPos = 5; if(lint > mainWidth){ lint = 1; } if(lPos > mainWidth){ lPos = 0 + lint++; lPos *= 5; } console.log("Width " + mainWidth+ " lPos " + lPos + " lint " +lint ); return lPos; }   function isEven(num) { return !(num % 2); }     function getRotation(neg){ if(neg == undefined){ var rotation = Math.random()100-50; var rotation = '-=' + rotation.toString(); console.log("Neg " + rotation); }else{ var rotation = Math.random()300-50; var rotation = '+=' + rotation.toString(); console.log("Pos " + rotation); } return rotation; }   function getScale(){ var scale = Math.random()300; var scale = '+=' + scale.toString(); return scale; }         $(document).ready(function() {
if(!$.browser.msie){
goLines();   }else{ $('#container').append("Please don't use this browser it lacks HTML5 capablites and is the bane of Web Development! Go get <a href='http://www.google.com/chrome/index.html' target='_blank'>Chrome</a>, <a href='http://www.mozilla.com/en-US/firefox/upgrade.html' target='_blank'>Firefox</a>, <a href='http://www.apple.com/safari/download/' target='_blank'>Safari</a>, something!"); } });

Download Code

Have you ever had to deal with the hassle of centering modal windows? I made this function to automagically center windows I call this function after I load a modal and it centers the object perfectly for every browser. It takes the hassle of wondering if something is perfectly center in every browser. The only thing I do to use it is send it the main containing div that the object should be centered in and the div that I want to be centered. It grabs the offset does a little basic math and that’s it. No more hassle with centering now it will be perfectly centered.

function CenterIT(mainModal, mainContainer) { var modalW = $(mainModal).width() / 2; var windowW = $(mainContainer).width() / 2; var modalH = $(mainModal).height() / 2; var windowH = $(mainContainer).height() / 2; var centerPointW = windowW - modalW; var centerPointH = windowH - modalH; var myPoint = $(mainContainer).offset(); centerPointW = myPoint.left + centerPointW; centerPointH = myPoint.top + centerPointH; $(mainModal).css('left', centerPointW); $(mainModal).css('top', centerPointH);
}

Some Useful/Interesting Flash Links: Prefab – Highly useful tool when it comes to 3D in flash with Away3D Burst Engine for SVG in JavaScript Parallax in CSS WebGL Example