Category Archives: functions

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 Graphics, XML, dynamic, external data, 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 Graphics, dynamic | Tagged , | 2 Comments

nesting(function(calls()))

By Zevan | January 17, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=500, height=500, backgroundColor=0x000000, frameRate=30)]
  2.  
  3. for (var i:int = 0; i<10; i++){
  4.        // draggable ellipse
  5.     var dot:Sprite = drag(createSprite("Ellipse",  -10, -10, 20, 20));
  6.     dot.x = Math.random() * stage.stageWidth ;
  7.     dot.y = Math.random() * stage.stageHeight ;
  8. }
  9.  
  10. for (i = 0; i<10; i++){
  11.  
  12.       var box:Sprite = drag(spin(createSprite("Rect", -20, -20, 40, 40, 0xFF0000), Math.random()*5 + 1));
  13.     box.x = Math.random() * stage.stageWidth ;
  14.     box.y = Math.random() * stage.stageHeight ;
  15. }
  16.  
  17.  
  18.  // createSprite can create ellipses or rectangles
  19. function createSprite(shape:String, xp:Number, yp:Number, w:Number, h:Number, col:uint=0x444444):Sprite {
  20.     var s:Sprite = new Sprite();
  21.     s.graphics.beginFill(col);
  22.     // trick from a previous post
  23.     s.graphics["draw" + shape](xp, yp, w, h);
  24.     addChild(s);
  25.     return s;
  26. }
  27.  
  28. // drag and spin add listeners to an untyped target and return that target for easy function nesting
  29. function drag(target:*):*{
  30.     target.addEventListener(MouseEvent.MOUSE_DOWN, function(evt:MouseEvent){ evt.currentTarget.startDrag(); });
  31.     return target;
  32. }
  33.  
  34. function spin(target:*, speed:Number):*{
  35.     target.addEventListener(Event.ENTER_FRAME, function(evt:Event){ evt.currentTarget.rotation+=speed; });
  36.     return target;
  37. }
  38.  
  39. stage.addEventListener(MouseEvent.MOUSE_UP, function(){ stopDrag() });

The above will create some draggable circles and some rotating draggable rects... but that's not really the point....

When prototyping and just playing around I write functions that take an Object as an argument, alter that Object in some way and pass that some Object out as a return value.... this makes it so I can write things like this:

CLICK HERE TO COPY
Actionscript:
  1. drag(spin(createSprite("Rect", -20, -20, 40, 40, 0xFF0000), Math.random()*5 + 1));

Readability can be a problem so... consider that before using this for anything...

Also posted in dynamic, misc | Tagged , | Leave a comment

Constants as Function Argument Defaults

By Zevan | January 5, 2009
CLICK HERE TO COPY
Actionscript:
  1. const RADIUS = 10;
  2. const COLOR = 0xCCCCCC;
  3.  
  4. function createCircle(xp:Number, yp:Number, radius:Number = RADIUS, col:uint = COLOR):void{
  5.     var c:Sprite = new Sprite();
  6.     c.graphics.beginFill(col);
  7.     c.graphics.drawCircle(xp, yp, radius);
  8.     addChild(c);
  9. }
  10.  
  11. // optional last 2 values are populated with const defaults
  12. createCircle(100,100);
  13. // optional color value is populated with default 0xCCCCCC;
  14. createCircle(200,100, 20);
  15. //
  16. createCircle(300,100, 50,0x0000FF);

Also posted in variables | Tagged , | Leave a comment