Category Archives: Graphics

lineTo() w/ drawCircle()

By Zevan | February 17, 2009
CLICK HERE TO COPY
Actionscript:
  1. var dial:Sprite = Sprite(addChild(new Sprite()));
  2. with(dial.graphics) lineStyle(1, 0x000000), beginFill(0xCCCCCC), drawCircle(0,0,100), lineTo(0,0);
  3. dial.x = stage.stageWidth / 2;
  4. dial.y = stage.stageHeight / 2;

This snippet shows how you can combine drawCircle() and lineTo() to quickly draw a clock/dial primitive shape. I'll use this in tomorrows snippet...

Posted in Graphics | Tagged , | Leave a comment

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 DisplayObject | Tagged , | 1 Comment

Graphics Class Methods in XML

By Zevan | February 6, 2009
CLICK HERE TO COPY
Actionscript:
  1. // for simplicity I left this XML inline, this will work exactly the same if it were external
  2. var program:XML=<body>
  3.                 <draw>
  4.                   <![CDATA[
  5.                    beginFill(0xFF0000);
  6.                    drawCircle(100,100,50);
  7.                    endFill();
  8.                    lineStyle(0, 0x666666);
  9.                    moveTo(100, 100);
  10.                    lineTo(200, 200);
  11.                    moveTo(300, 200);
  12.                    curveTo(350, 300, 400, 200);
  13.                    lineStyle(0, 0x0000FF);
  14.                    drawRect(200, 50,100,100) ;
  15.                     ]]>
  16.                 </draw>
  17. </body>;
  18.  
  19. // parse and run the Graphics class commands from the XML
  20. render(parseFunctions(program.draw.toString()));
  21.  
  22. function parseFunctions(dat:String):Array{
  23.     var a:Array = dat.split(";") ;
  24.     for (var i:int = 0; i<a.length-1; i++){
  25.         a[i] = a[i].split(/\(\)|\(|\)/g);
  26.         var f:String = a[i][0] = a[i][0].replace(/\s/g,"");
  27.         a[i] = a[i].splice(0, a[i].length - 1);
  28.         if (a[i].length> 1){
  29.          a[i] = a[i][1].split(",");
  30.          a[i].unshift(f);
  31.         }
  32.     }
  33.     return a.splice(0,a.length - 1);
  34. }
  35. function render(p:Array):void {
  36.     for (var i:int = 0; i<p.length; i++) {
  37.         graphics[p[i][0]].apply(graphics,p[i].splice(1));
  38.     }
  39. }

The above code builds on yesterdays post by showing how one could potentially store graphics class method calls in XML using a few regular expressions and Function.apply().

The parseFunctions() function reads through the CDATA string and formats it in a 2D array that looks like this:

CLICK HERE TO COPY
Actionscript:
  1. [[beginFill, 0xFF0000], [drawCircle, 100, 100, 50], etc...]

The render() function reads through this 2D array, using the first value of each nested array as the function and the remaining values as arguments...

As is this won't really work with most of the new fp10 graphics methods...

Also posted in XML, dynamic, external data, functions, string manipulation, strings | Tagged , | Leave a comment

Dynamic Graphics and Function.apply()

By Zevan | February 5, 2009
CLICK HERE TO COPY
Actionscript:
  1. var cmds:Array = [["lineStyle", 0, 0xFF0000], ["drawCircle",100, 100, 50], ["drawRect", 50, 50, 100, 100]];
  2. cmds.push(["drawCircle", 100, 100, 70]);
  3. cmds.push(["beginFill",  0x555555]);
  4. cmds.push(["drawRoundRect", 80, 80, 40, 40, 10, 10]);
  5. cmds.push(["endFill"]);
  6.  
  7. render(cmds);
  8.  
  9. function render(p:Array):void {
  10.     for (var i:int = 0; i<p.length; i++) {
  11.         graphics[p[i][0]].apply(graphics,p[i].splice(1));
  12.     }
  13. }

The above creates a function called render() that takes a 2D array of Graphics class methods and then runs them. This is a very interesting technique, specifically if you'd like to write Graphics class method calls in an XML or txt file and then have them run on a given DisplayObject in flash.

I've been thinking about the best way to do this for awhile... I started off doing something very convoluted and then realized that I could use Function.apply()....

Tomorrow I'll post a snippet showing how to use this function in conjunction with XML.

Also posted in dynamic, functions | Tagged , | 2 Comments