Tag Archives: actionsnippet

Circle Mouse Toy

By Zevan | April 24, 2010
CLICK HERE TO COPY
Actionscript:
  1. var circles:Array = [];
  2. for (var i:int = 0; i<30; i++){
  3.     var c:Sprite = makeCircle();
  4.     c.x = stage.stageWidth / 2;
  5.     c.y = stage.stageHeight / 2;
  6.     c.scaleX = 1 + i/2;
  7.     c.scaleY = 0.5 + i/4;
  8.     addChild(c);
  9.     circles.push(c);
  10. }
  11. addEventListener(Event.ENTER_FRAME, onLoop);
  12. function onLoop(evt:Event):void {
  13.     circles[0].y += (mouseY - circles[0].y) / 4;
  14.     for (var i:int = 1; i<circles.length; i++){
  15.         var pre:Sprite = circles[i - 1];
  16.         circles[i].y += (pre.y - circles[i].y) / 4;
  17.     }
  18. }
  19. function makeCircle():Sprite{
  20.     var s:Sprite = new Sprite();
  21.     with(s.graphics){
  22.         lineStyle(0,0x000000);
  23.         drawCircle(0,0,10);
  24.     }
  25.     return s;
  26. }

This morning I woke up with a vision of this simple mouse toy in my head. I decided I might as well code it up... I may do more simple things like this in the next few days, it's relaxing.

Posted in Graphics, misc, motion | Also tagged , | 5 Comments

Polygon Problems

By Zevan | March 5, 2010

Lots of people have mentioned that they have problems with QuickBox2D Polygons. The simple solution is not to use the verts 2d array (which is more like how Box2D does polys). So when in doubt about polygons, simply use the points array which will nearly always work as long as the contour you define does not cross over itself. Here is a simple example on wonderfl:

Also... polygons are covered extensively in part two of the tutorial over at active tuts... more on that later.

Here is the timeline code:

CLICK HERE TO COPY
Actionscript:
  1. import com.actionsnippet.qbox.*;
  2.             /*
  3.                0
  4.               / \
  5.              0_0 0
  6.                | |
  7.                0-0
  8.             */
  9.             var sim:QuickBox2D = new QuickBox2D(this);
  10.             sim.createStageWalls();
  11.             // define the contour of your poly
  12.             // no limits as long as it doesn't cross over
  13.             // itself
  14.             sim.addPoly({x:10, y:5, points:[0.5,0,
  15.                                             1, 1,
  16.                                             1, 2,
  17.                                             0.5, 2,
  18.                                             0.5, 1,
  19.                                             0,1,
  20.                                             0.5,0],
  21.                                             wireframe:false});
  22.             sim.addCircle({x:11, y:10});
  23.             sim.start();
  24.             sim.mouseDrag();

Posted in Uncategorized | Also tagged , , | Leave a comment

Hide Browser Scrollbars

By ascontest | November 9, 2009
CLICK HERE TO COPY
Actionscript:
  1. /*
  2. This snippet is by Mels le Noble
  3. www.melslenoble.nl
  4. It will hide the browser scrollbars.
  5. */
  6.  
  7. // see if we are testing locally
  8. if (stage.loaderInfo.url.split("/")[2])
  9. {
  10.  ExternalInterface.call("function(){document.body.style.overflow='hidden';document.html.style.overflow = 'hidden';}");
  11. }

This snippet by Mels le Noble will hide the browser scrollbars. The bulk of the snippet is the javascript inside the ExternalInterface.call() method. I like the trick that Mels uses to check if the swf is local.... snippet-worthy in itself.

Posted in UI | Also tagged , , , | Leave a comment

Matrix Zoom and Pan

By Zevan | September 8, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=600, height=600, frameRate=30)]
  2. var sw:Number = stage.stageWidth;
  3. var sh:Number = stage.stageHeight;
  4.  
  5. var s:Shape = Shape(addChild(new Shape()));
  6.  
  7. var scale:Number = 1;
  8. var scaleDest:Number = 1;
  9. var down:Boolean = false;
  10. var dx:Number = 0, dy:Number = 0, time:Number = 0;
  11.  
  12. buttonMode = true;
  13.  
  14. addInstructions();
  15. vectorTexture();
  16.  
  17. stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  18. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  19. addEventListener(Event.ENTER_FRAME, onLoop);
  20.  
  21. function addInstructions():void{
  22.     var instruct:Sprite = Sprite(addChild(new Sprite()));
  23.     with (instruct.graphics) beginFill(0x666666), drawRect(0,0,270, 30);
  24.     instruct.x = instruct.y = 20;
  25.     var txt:TextField = TextField(instruct.addChild(new TextField()));
  26.     txt.defaultTextFormat = new TextFormat("Verdana", 11);
  27.     txt.x = txt.y = 5;
  28.     txt.selectable = false;
  29.     with (txt) textColor = 0xFFFFFF, autoSize = "left", text = "Click and hold to zoom, move mouse to pan";
  30. }
  31.  
  32. function vectorTexture():void{
  33.     var cols:Vector.<uint> = Vector.<uint>([0xFFFFFF, 0x000000]);
  34.     var rnd:Vector.<Number> = new Vector.<Number>(6, true);
  35.    
  36.     for(var i:int = 0 ; i<50; i++){
  37.         with(s.graphics){
  38.             lineStyle(Math.random() * 50 + 2, cols[int(Math.random()*cols.length)]);
  39.             drawCircle(Math.random() * sw, Math.random() * sh, 10 + Math.random() * Math.random() * 400);
  40.         }
  41.     }
  42.     s.graphics.lineStyle(20, 0xCCCCCC);
  43.     s.graphics.drawRect(0, 0,sw, sh);
  44. }
  45.  
  46. function onDown(evt:MouseEvent):void{ down = true; }
  47. function onUp(evt:MouseEvent):void{ down = false; }
  48. function onLoop(evt:Event):void {
  49.    if (down){
  50.      scaleDest *= 1.05;  
  51.      time = 0;
  52.    }else{
  53.      time++;
  54.      // zoom out after 30 iterations
  55.      if (time == 30){
  56.          scaleDest = 1;  
  57.      }
  58.    }
  59.    scale += (scaleDest - scale) / 4;
  60.    if (scale> 10) scale = scaleDest = 10;
  61.    
  62.    dx += (mouseX - dx) / 4;
  63.    dy += (mouseY - dy) / 4;
  64.    if (dx <0) dx = 0;
  65.    if (dy <0) dy = 0;
  66.    if (dx> sw) dx = sw;
  67.    if (dy> sh) dy = sh;
  68.    
  69.    // matrix zoom/pan
  70.    var m:Matrix = s.transform.matrix;
  71.    m.identity();
  72.    m.translate(-dx,-dy);
  73.    m.scale(scale, scale);
  74.    m.translate(dx,dy);
  75.    s.transform.matrix = m;
  76. }

I haven't been by the computer much these last two weeks - been traveling. Going back to nyc tomorrow so I'll go back to posting once a day.

This snippet uses a transformation matrix to zoom in and pan a Sprite instance. For demo purposes I filled the sprite with a few circles - but you'd likely be using this with a vector image of a map, a floor plan or some other graphic that warrants zooming and panning.

Back around flash 7 (I think) before the Matrix class was introduced we used to have to use MovieClip nesting to achieve this effect.


Have a look at the swf...


Posted in Graphics, matrix, motion | Also tagged , | Leave a comment