Category Archives: DisplayObject

Circles & cacheAsBitmap

By Zevan | February 14, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=600,height=400,backgroundColor=0x000000,frameRate=30)]
  2. var mcs:Vector.<MovieClip> = new Vector.<MovieClip>();
  3. var num:int = 2000;
  4. for (var i:int = 0; i<num; i++){
  5.     var s:MovieClip = new MovieClip();
  6.     s.graphics.lineStyle(0,0xFFFFFF);
  7.     s.graphics.drawCircle(0,0, Math.random()*30 + 3);
  8.     s.x = Math.random()*stage.stageWidth;
  9.     s.y = Math.random()*stage.stageHeight;
  10.        // comment out to kill your cpu
  11.     s.cacheAsBitmap = true;
  12.     addChild(s);
  13.     s.vx  = Math.random() * 2 - 1;
  14.     s.vy  = Math.random() * 2 - 1;
  15.     mcs.push(s);
  16. }
  17. addEventListener(Event.ENTER_FRAME, onCenter);
  18. function onCenter(evt:Event):void{
  19.     for (var i:int = 0; i<num; i++){
  20.         mcs[i].x += mcs[i].vx;
  21.         mcs[i].y += mcs[i].vy;
  22.     }
  23. }

This was created in response to a question about the real speed gain of cacheAsBitmap. Just comment out the cacheAsBitmap line to see the difference.

Despite it's extreme simplicity, this is actually a rather fun file to play with, change some of the graphics class method calls around and see what happens.

Also posted in Graphics | Tagged , | 1 Comment

Static Stage and More…

By Zevan | February 1, 2009
CLICK HERE TO COPY
Actionscript:
  1. package {
  2.     import flash.display.*;
  3.  
  4.     public class Main extends MovieClip{
  5.    
  6.         private static var _display:MovieClip;
  7.         private static var _stage:Stage;
  8.        
  9.         // use getters instead of public static vars so they
  10.         // cannot be reset outside of Main
  11.         public static function get display():MovieClip{
  12.             return _display;
  13.         }
  14.        
  15.         public static function get stage():Stage{
  16.             return _stage;
  17.         }
  18.        
  19.         public function Main(){
  20.            Main._display = this;
  21.            Main._stage = stage;
  22.            
  23.            // test out the static references
  24.            var t:Test = new Test();
  25.         }
  26.     }
  27. }
  28.  
  29. class Test{
  30.     public function Test(){
  31.         // test out the static references
  32.         with(Main.display.graphics){
  33.             lineStyle(1, 0xFF0000);
  34.             for (var i:int = 0; i<100; i++){
  35.                 lineTo(Math.random() * Main.stage.stageWidth,
  36.                        Math.random() * Main.stage.stageHeight);
  37.             }
  38.         }
  39.     }
  40. }

This snippet creates two private static variables that reference the stage and the main timeline/document class. It then uses getters to regulate the use of these static vars so that they cannot be reset from outside the Main class.

Sometimes the amount of extra coding you need to do to maintain a valid stage reference can be cumbersome... similarly, passing references of the document class all around your app can be annoying. If you don't mind using two global vars in your app... this trick can come in handy.

What's nice about using getters here is that if someone tries to do this:

CLICK HERE TO COPY
Actionscript:
  1. Main.display = new MovieClip();

they'll get an error... in flex, you even see that little red ex pop up next to this line of code if you write it :) ... that wouldn't happen with a public static var....

Also posted in OOP, variables | Tagged , , | Leave a comment

Matrix() 3 Point Skew

By Zevan | January 18, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=500, height=500, backgroundColor=0xFFFFFF, frameRate=30)]
  2.  
  3. var box:Sprite = createSprite("Rect", 0, 0, 100, 100, 0xFF0000);
  4.  
  5. var d0:Sprite = drag(createSprite("Ellipse",  -5, -5, 10, 10));
  6. d0.x = d0.y = 200;
  7.  
  8. var d1:Sprite = drag(createSprite("Ellipse",  -5, -5, 10, 10));
  9. d1.x = 200
  10. d1.y = 300;
  11.  
  12. var d2:Sprite = drag(createSprite("Ellipse",  -5, -5, 10, 10));
  13. d2.y = d0.y;
  14. d2.x = 300;
  15.  
  16. addEventListener(Event.ENTER_FRAME, onLoop);
  17.  
  18. function onLoop(evt:Event):void {
  19.  
  20.     var m:Matrix = new Matrix();
  21.     m.scale((d2.x - d0.x) / 100,(d1.y - d0.y) / 100);
  22.     m.translate(d0.x, d0.y);
  23.    
  24.     m.c =  (d1.x - d0.x) / 100
  25.     m.b =  (d2.y - d0.y ) / 100
  26.    
  27.     box.transform.matrix = m;
  28. }
  29.  
  30. function createSprite(shape:String, xp:Number, yp:Number, w:Number, h:Number, col:uint=0x444444):Sprite {
  31.     var s:Sprite = new Sprite();
  32.     s.graphics.beginFill(col);
  33.     s.graphics["draw" + shape](xp, yp, w, h);
  34.     addChild(s);
  35.     return s;
  36. }
  37.  
  38. function drag(target:*):*{
  39.     target.addEventListener(MouseEvent.MOUSE_DOWN, function(evt:MouseEvent){ evt.currentTarget.startDrag(); });
  40.     return target;
  41. }
  42.  
  43. stage.addEventListener(MouseEvent.MOUSE_UP, function(){ stopDrag() });

The above creates a red rectangle that can be skewed by dragging 3 points. Why is this so cool you ask?

This is why (move your mouse)

The above was written in flash 7, before the Matrix object existed. So in order to create it I used this technique from Eric Lin.

Also posted in MovieClip, matrix | Tagged , | Leave a comment

Bring Display Object to Top

By Zevan | December 21, 2008
CLICK HERE TO COPY
Actionscript:
  1. mc.addEventListener(MouseEvent.ROLL_OVER, onRollOver);
  2. function onRollOver(evt:MouseEvent):void {
  3.   addChild(MovieClip(evt.currentTarget));
  4. }

This one is very simple, but it's important to note that using addChild() on something that is already on the display list simply brings it to the top. Back in AS2 we used to do:

CLICK HERE TO COPY
Actionscript:
  1. mc.swapDepths(1000);

Also posted in display list | Tagged , | 3 Comments