Monthly Archives: May 2009

Previous and Next Buttons

By Zevan | May 3, 2009
CLICK HERE TO COPY
Actionscript:
  1. var prevBtn:Sprite = makeArrow(100, 100);
  2. prevBtn.rotation = 180;
  3. var nextBtn:Sprite = makeArrow(130, 100);
  4.  
  5. var index:int = 0;
  6. var vals:Array = [1,2,3,4,5,6,7,8,9,10,11];
  7. var leng:int = vals.length;
  8.  
  9. trace(vals[index]);
  10.  
  11. prevBtn.addEventListener(MouseEvent.CLICK, onPrev);
  12. function onPrev(evt:MouseEvent):void {
  13.     index--;
  14.     if (index <0){
  15.         index = leng - 1;
  16.     }
  17.     trace(vals[index%leng]);
  18. }
  19. nextBtn.addEventListener(MouseEvent.CLICK, onNext);
  20. function onNext(evt:MouseEvent):void {
  21.     index++;
  22.     trace(vals[index%leng]);
  23. }
  24.  
  25. function makeArrow(xp:Number, yp:Number):Sprite {
  26.     var s:Sprite = Sprite(addChild(new Sprite()));
  27.     s.buttonMode = true;
  28.     with(s.graphics) beginFill(0x666666), moveTo(0,-10), lineTo(20, 0), lineTo(0,10);
  29.     s.x = xp;
  30.     s.y = yp;
  31.     return s;
  32. }

Previous and next buttons....

Posted in UI, misc | Tagged , | Leave a comment

Command Draw Source

By Zevan | May 2, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 600, height = 500, frameRate=30, background = 0xFFFFFF)]
  2.  
  3. var cmd:String = "1000 small orange circles, 9000 black lines,3 large white circles"
  4. // try some of these commands:
  5. //"300 small red triangles and 2 big orange circle 3 big black lines";
  6. //"100 big black triangles, ten small white rectangles 1 big white circle and 1 big gray poly";
  7. // "300 small red triangles and 2 big orange circle 3 big black lines";
  8. //"10 big black circles 1000 big white lines 100 small white rects 1 big red circle and 1 green poly"
  9. stage.align = "TL"
  10. var msk:Shape = new Shape();
  11. with(msk.graphics) beginFill(0x00FF00), drawRect(0,0,600, 400);
  12. this.mask = msk;
  13. var amount:Number;
  14. var color:uint = 0;
  15. var shape:String;
  16.  
  17. var hexLookup:Object = {red:0xFF0000, green:0x00FF00, blue:0x0000FF, yellow:0xFFFF00, orange:0xFFCC00, white:0xFFFFFF, gray:0xCCCCCC, grey:0xCCCCCC, black:0x000001};
  18. var sizeLookup:Object = {large:true, big:true, small:true, tiny:true};
  19. var defaultSize:Number = 50;
  20. var size:Number = defaultSize;
  21. var halfSize:Number = size / 2;
  22. var circles:Function = circle;
  23. var ovals:Function = oval, ellipse:Function = oval;
  24. var rects:Function = rect, rectangle:Function = rect, rectangles:Function = rect;
  25. var lines:Function = line;
  26. var triangles:Function = triangle;
  27. var polygon:Function = poly, polygons:Function = poly;
  28. var large:Function = big;
  29. var tiny:Function = small;
  30.  
  31. parse();
  32. function parse():void {
  33.     amount = 1;
  34.     color = 0x000000;
  35.     shape = "circle";
  36.     var words:Array = cmd.split(/[\W]+/g)
  37.     for (var i:int = 0; i<words.length; i++){
  38.         var w:* = words[i];
  39.         if (isNaN(Number(w))){
  40.             if (hexLookup[w]){
  41.                 color = hexLookup[w];
  42.                 trace(w, "color");
  43.             }else
  44.             if (sizeLookup[w]){
  45.                 this[w]();
  46.             }else
  47.             if (this[w]){
  48.                 for (var j:int = 0; j<amount; j++){
  49.                    this[w]();
  50.                 }
  51.                 color = 0x000000;
  52.                 size = defaultSize;
  53.                 trace(w, "command");
  54.             }
  55.         }else{
  56.             trace(w, "number");
  57.             amount = w;
  58.         }
  59.     }
  60. }
  61. function makeShape(p:Array):void{
  62.         var s:Shape = Shape(addChild(new Shape()));
  63.          for (var i:int = 0; i<p.length; i++) {
  64.             s.graphics[p[i][0]].apply(graphics,p[i].splice(1));
  65.          }
  66.         s.rotation = Math.random() * 360;
  67.         s.x = Math.random() * stage.stageWidth;
  68.         s.y = Math.random() * stage.stageHeight;
  69. }
  70.  
  71. function circle():void{
  72.       makeShape([["beginFill",color], ["drawCircle",0,0,Math.random() * halfSize + halfSize]]);
  73. }
  74. function oval():void{
  75.       makeShape([["beginFill",color],["drawEllipse", 0,0,Math.random() * size + halfSize]]);  
  76. }
  77. function square():void{
  78.         var s:Number = Math.random() * halfSize + halfSize;
  79.         var p:Number = -s/2;
  80.         makeShape([["beginFill",color],["drawRect", p, p, s, s]]);  
  81. }
  82. function rect():void{
  83.         var w:Number = Math.random() * halfSize + halfSize;
  84.         var h:Number = Math.random() * halfSize + halfSize;
  85.         makeShape([["beginFill",color],["drawRect", -w/2, -h/2, w, h]]);
  86. }
  87. function line():void{
  88.     var s:Number = size * 2;
  89.     makeShape([["lineStyle",Math.random()*3, color],["lineTo", Math.random()*s - size, Math.random()*s - size]])
  90. }
  91. function triangle():void {
  92.      var s:Number = size * 2;
  93.      makeShape([["beginFill",color],["lineTo", Math.random()*s - size, Math.random()*s - size], ["lineTo", Math.random()*s - size, Math.random()*s - size]]);
  94. }
  95. function poly():void {
  96.      var s:Number = size * 2;
  97.      var cmds:Array = [["beginFill",color]]
  98.      var num:Number = int(Math.random()*8) + 2;
  99.      for (var i:int = 0; i<num; i++){
  100.           cmds.push(["lineTo", Math.random()*s - size, Math.random()*s - size]);
  101.      }
  102.      makeShape(cmds);
  103. }
  104. function big():void{
  105.     size = 100 + Math.random() * 40;
  106.     halfSize = size / 2;
  107. }
  108. function small():void {
  109.     size = 3 + Math.random() * 20;
  110.     halfSize = size / 2;
  111. }

I've been meaning to post this source for a long time. It's a project I created for shapevent called Command Draw. It allows you to use simple sentence structure to create textures and patterns.

See it in action here (this one has some minimal UI and uses flashvars for the command string).


As a side note, this is the 200th post on ActionSnippet.com

Posted in Graphics, dynamic, strings | Tagged , | 3 Comments

QuickBox2D Chain

By Zevan | May 1, 2009
CLICK HERE TO COPY
Actionscript:
  1. import com.actionsnippet.qbox.*;
  2.  
  3. var sim:QuickBox2D = new QuickBox2D(this, {debug:true});
  4. // use the box2D default renderer (debug : true)
  5.  
  6. sim.createStageWalls();
  7.  
  8. // anchor
  9. var pre:QuickObject = sim.addCircle({x:9, y:3, radius:.5, density:0});
  10.  
  11. // create a chain of boxes
  12. for (var i:int = 0; i<12; i++){
  13.   var curr:QuickObject = sim.addBox({x:10 + i, y:3, width:.9, height:.9, angularDamping:1});
  14.                                                                  
  15.   // currently always adds a b2DistanceJoint
  16.   sim.addJoint({a:pre.body, b:curr.body,
  17.                            x1:9 + i, y1: 3, x2: 10 + i, y2:3, collideConnected:false});
  18.   pre = curr;
  19. }
  20.  
  21. // add a circle, use CCD (isBullet)
  22. sim.addCircle({x:20, y:10, radius:1, isBullet:true});
  23.  
  24. // start simulation
  25. sim.start();
  26. sim.mouseDrag();

This snippet uses my QuickBox2D library to create a chain. QuickBox2D is a wrapper for Box2DFlashAS3 that greatly simplifies world setup, instantiation and graphical skinning of rigid bodies (more info on yesterdays post)...

See the swf here.

Download Box2DFlashAS3 here

Download QuickBox2D Alpha 104 here

See yesterdays post for additional information. I'm still in the process of writing some docs and possibly a tutorial for QuickBox2D... hopefully I'll finish with that soon...

If your somewhat familiar with Box2D and just want to just dig right in, the following scrap of information may help:


// Methods of the QuickBox2D class, used for creating rigid bodies and joints
addCircle();
addBox();
addPoly();
// currently only creates b2DistanceJoints
addJoint();

these function all take one parameter Object as their argument. The common parameter properties for rigid bodies are:

// QuickBox2D simpleRender settings:
lineColor:0x000000
lineAlpha:1
lineThickness:0
fillColor:0xCCCCCC
fillAlpha:1
// wrapped Box2D properties
x:3
y:3
density:1
friction:0.5
restitution:0.2
angle: 0
linearDamping:0
angularDamping:0
isBullet:false,
fixedRotation:false
allowSleep: true
isSleeping:false
// advanced use
maskBits:0xFFFF
categoryBits:1
groupIndex:0

//and the specific param properties are:
addCircle() : radius
addBox() : width, height
addPoly() : verts

//Joints have the following properties... not going to bother explaining these until I write the docs:
addJoint() : a, b, x1, x2, y1, y2

Posted in Box2D, QuickBox2D, motion | Tagged , , , | 4 Comments