Category Archives: DisplayObject

Rotation Property Weirdness

Actionscript:
  1. var boxA:Shape = Shape(addChild(new Shape()));
  2. with (boxA.graphics) beginFill(0), drawRect(-10,-10,20,20);
  3.  
  4. var boxB:Shape = Shape(addChild(new Shape()));
  5. with (boxB.graphics) beginFill(0), drawRect(-10,-10,20,20);
  6.  
  7. boxA.x = 100;
  8. boxA.y = 100;
  9.  
  10. boxB.x = 200;
  11. boxB.y = 100;
  12.  
  13. var rot:Number = 32750;
  14.  
  15. addEventListener(Event.ENTER_FRAME, onLoop);
  16. function onLoop(evt:Event):void {
  17.   rot += 1
  18.   // will stop rotating
  19.   boxA.rotation = rot
  20.   // will keep rotating
  21.   boxB.rotation = rot % 360;
  22. }

I recently became aware of a strange aspect of the rotation property on DisplayObjects. For some reason, once it's value goes a little beyond ~32750 the DisplayObject will simply stop rotating. If you read the rotation property it is still changing, but there is no visual update - a quick check on the DisplayObject.transform.matrix property will show that the value has stopped.

The easy fix is to use mod before applying the value to the rotation property. Surprised I've never come across this one before. Maybe someone can shed some light on this.


// for people searching google for solutions to this problem I'll add the following key words:
MovieClip stops rotating, DisplayObject stops rotating, rotation property broken, not rotating

Also posted in misc, motion | Tagged , , | 1 Comment

globalToLocal() in 3D

Actionscript:
  1. [SWF(frameRate=60, backgroundColor=0x000000, width=500, height=500)]
  2. stage.quality = "medium";
  3. var frame:Sprite = Sprite(addChild(new Sprite()));
  4. with (frame.graphics) beginFill(0xCCCCCC), drawRect(-200, -200, 400, 400), endFill();
  5. frame.x = stage.stageWidth / 2;
  6. frame.y = stage.stageHeight / 2;
  7. frame.z = 100;
  8.  
  9. var canvas:Shape = Shape(frame.addChild(new Shape()));
  10. var msk:Shape = Shape(frame.addChild(new Shape()));
  11. with (msk.graphics) beginFill(0x00FF00), drawRect(-200, -200, 400, 400), endFill();
  12. canvas.mask = msk
  13.  
  14. var txt:TextField = TextField(addChild(new TextField()));
  15. txt.defaultTextFormat = new TextFormat("_sans", 12);
  16. txt.x = txt.y = 10;
  17. txt.textColor = 0xFFFFFF, txt.autoSize="left", txt.text = "Draw on the 3D plane...";
  18.  
  19. stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  20. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  21. function onDown(evt:MouseEvent):void{
  22.     canvas.graphics.lineStyle(4, 0x000000);
  23.     var pnt:Point = frame.globalToLocal(new Point(mouseX, mouseY));
  24.     canvas.graphics.moveTo(pnt.x, pnt.y);
  25.     addEventListener(Event.ENTER_FRAME, onDraw);
  26. }
  27. function onUp(evt:MouseEvent):void{
  28.     removeEventListener(Event.ENTER_FRAME, onDraw);
  29. }
  30.  
  31. var t:Number = 0;
  32. addEventListener(Event.ENTER_FRAME, onLoop);
  33. function onLoop(evt:Event):void {
  34.     frame.rotationY = 35 * Math.sin(t);
  35.     frame.rotationX = 35 * Math.cos(t);
  36.     t+=0.02;
  37. }
  38.  
  39. function onDraw(evt:Event):void {
  40.         var pnt:Point = frame.globalToLocal(new Point(mouseX, mouseY));
  41.     canvas.graphics.lineTo(pnt.x, pnt.y);
  42. }

This demo shows that globalToLocal() works with 3D - saving us the trouble of doing some extra math if we want to draw on 3D display objects...

Have a look at the swf....


Was made aware of this trick by watching a video that kevinSuttle sent me via twitter. The video is an interview with Chris Nuuja (one of the flash player engineers).

Also posted in 3D, Graphics, misc, motion | Tagged , , | 3 Comments

Isometric Transformation Matrix

Actionscript:
  1. var grid:Sprite = Sprite(addChild(new Sprite()));
  2. var matrix:Matrix = new Matrix();
  3. // make the grid sprite look isometric using the transform.matrix property
  4. matrix.rotate(Math.PI / 4);
  5. matrix.scale(1, 0.5);
  6. matrix.translate(stage.stageWidth / 2, stage.stageHeight / 2);
  7. grid.transform.matrix = matrix;
  8.  
  9. // draw a grid of circles to show that it does in fact look isometric
  10. var rowCol:Number = 8;
  11. var num:Number = rowCol * rowCol;
  12.  
  13. var diameter:Number = 40;
  14. var radius:Number = diameter / 2;
  15. var space:Number = diameter + 10;
  16. var halfGridSize:Number = rowCol * space / 2;
  17.  
  18. grid.graphics.beginFill(0xFF0000);
  19. for (var i:int = 0; i<num; i++){
  20.    grid.graphics.drawCircle(i % 8 * space - halfGridSize, int(i / 8) * space - halfGridSize, radius);
  21. }

This snippet shows how to use transform.matrix to make a DisplayObject look isometric. This can also be achieved with nesting.

In the case of this grid of red circles, we rotate it 45 degrees, scale it 50% on the y and move it to the center of the stage (lines 4-6).

Also posted in misc | 3 Comments

Bounds 3 Ways

Actionscript:
  1. // make a complex poly and position it randomly
  2. var poly:Sprite = Sprite(addChild(new Sprite()));
  3. poly.graphics.lineStyle(3, 0xFF0000);
  4. poly.graphics.beginFill(0x00FF00);
  5. for (var i:int = 0; i<10; i++) {
  6.     poly.graphics.lineTo(Math.random()*100 - 50, Math.random()*100 - 50);
  7. }
  8. poly.x=Math.random()*stage.stageWidth;
  9. poly.y=Math.random()*stage.stageHeight;
  10.  
  11. // get bound information:
  12.  
  13. // is in pixels (whole numbers)
  14. trace("pixelBounds: ", poly.transform.pixelBounds);
  15. // doesn't include stroke width
  16. trace("getBounds: ", poly.getBounds(this));
  17. // includes stroke width
  18. trace("getRect: ", poly.getRect(this));

Three different ways to get the boundaries of a DisplayObject.

Posted in DisplayObject | Tagged , | 1 Comment

Circles & cacheAsBitmap

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…

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:

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

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

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:

Actionscript:
  1. mc.swapDepths(1000);

Also posted in display list | Tagged , | 3 Comments

Isometric Box

Actionscript:
  1. stage.frameRate = 30;
  2.  
  3. for (var i:int = 0; i<100; i++){
  4.     makeBoxSegment(200, 200 - i, i * 2);
  5. }
  6.  
  7. function makeBoxSegment(xp:Number, yp:Number, col:uint):Sprite {
  8.     var isoBox:Sprite = Sprite(addChild(new Sprite()));
  9.     with (isoBox) scaleY = .5, y = yp, x = xp;
  10.     var box:Shape = Shape(isoBox.addChild(new Shape()));
  11.     box.rotation = 45;
  12.     with (box.graphics) beginFill(col), drawRect(-50,-50,100,100);
  13.     isoBox.addEventListener(Event.ENTER_FRAME, onRotate);
  14.     return isoBox;
  15. }
  16.  
  17. function onRotate(evt:Event):void {
  18.     evt.currentTarget.getChildAt(0).rotation = mouseX;
  19. }

An isometric box that rotates with the mouseX.

Also posted in Graphics | Tagged , , , | 2 Comments

Reset Registration Point

Actionscript:
  1. // display object target, value - "center" or "upperLeft"
  2. function setRegistration(dsp:DisplayObjectContainer, v:String):void {
  3.     var i:int;
  4.     var child:DisplayObject;
  5.     var b:Rectangle=getBounds(dsp);
  6.     for (i = 0; i <dsp.numChildren; i++) {
  7.         child=dsp.getChildAt(i);
  8.         child.x+=b.x*-1;
  9.         child.y+=b.y*-1;
  10.     }
  11.     if (v=="center") {
  12.         dsp.x+=dsp.width/2;
  13.         dsp.y+=dsp.height/2;
  14.         for (i = 0; i <dsp.numChildren; i++) {
  15.             child=dsp.getChildAt(i);
  16.             child.x-=dsp.width/2;
  17.             child.y-=dsp.height/2;
  18.         }
  19.     } else if (v == "upperLeft") {
  20.         if (dsp.parent) {
  21.             b=getBounds(dsp.parent);
  22.             dsp.x=b.left;
  23.             dsp.y=b.top;
  24.         }
  25.     }
  26. }
  27.  
  28. // example:
  29. // (make a MovieClip and fill it with, text, shapes etc...)
  30.  
  31. setRegistration(clip, "center");
  32. // registration(clip, "upperLeft");
  33.  
  34. addEventListener(Event.ENTER_FRAME, onLoop);
  35. function onLoop(evt:Event):void {
  36.     clip.rotation+=1;
  37. }

Teaching beginner flash... I've noticed people always get confused about the registration point. They think they should be able to move it with the IDE or ActionScript. I always say "You can't change the registration point, you can only change the position of graphical elements in relationship to it." Anyway, as a sort of joke one day after class I wrote the above function... it changes the registration of any DisplayObjectContainer to either "center" or "upperLeft".

To test this code out, fill a MovieClip with a bunch of different things (text, graphics, scribbles)... give it a strange registration point and then run the above code on it. You'll be able to tell that the registration has changed by the way the clip rotates. Although I haven't been able to break this function, I think it's possible that it doesn't work under all circumstances.

Using reparenting is a more elegant solution to this issue. Maybe I'll post that in the next couple days.

Also posted in display list | Tagged , , | 2 Comments