ActionScript 3 Marching Ants Selection Marquee
This is a simple ActionScript 3 implementation of the class marching ants selection marquee you find in applications such as Photoshop.
The class is based off this ActionScript 2 example here;?Ǭ† http://www.nocircleno.com/experiments/selection_ants_proof/index.html, but adds in many more methods and is entirely self contained. Drawing the bitmaps for the marquee internally in the class.
Features
- Either Fixed or user drawn marquee
Draggable or static fixed marque
Programatically changeable marquee colours
Programatically changeable marquee line thickness
Does not rely on library assets for marquee
View Example Here
http://www.noponies.com/dev/as3_marchingants/
Source Files
Actionscript 3 Marching Ants Marquee Version 1.0
Dependencies
None
March 24th, 2008 at 8:39 pm
[...] Kingdom Graphics wrote an interesting post today onHere’s a quick excerptselectionSprite.graphics.moveTo(x1,y1 + lineThickness); selectionSprite.graphics.lineTo(x1 + lineThickness,y1 + lineThickness); selectionSprite.graphics.lineTo(x1 + lineThickness,y2 – lineThickness); selectionSprite.graphics.lineTo(x1 … [...]
March 25th, 2008 at 5:51 pm
WOW very nice – any chance of getting an AS2 version of your version. Again very nice!
March 25th, 2008 at 8:24 pm
LL,
Most probably I wont have time or the need to port this to AS2. Its actually probably not that difficult to do however. Just a few differences with the timer and a few syntax changes. Is the class I based this off not quite what you are after?
March 28th, 2008 at 6:35 am
I’m not sure where i can use but i like it
Your work is always clean and professional. Thanks for sharing all this stuff.
March 28th, 2008 at 6:06 pm
No problem Duke!
July 22nd, 2008 at 11:29 am
This small modification allows for a perfect ants loop
//the marquee drawing function
private function drawSelectionRectangle(x1:int,y1:int,x2:int,y2:int,textureOffset:Number):void {
selectionSprite.graphics.clear();
// draw horzontial lines
selectionSprite.graphics.beginBitmapFill(horz_bmp,new Matrix(1,0,0,1,-textureOffset,0));
// draw top line
selectionSprite.graphics.moveTo(x1,y1);
selectionSprite.graphics.lineTo(x2,y1);
selectionSprite.graphics.lineTo(x2,y1 + lineThickness);
selectionSprite.graphics.lineTo(x1,y1 + lineThickness);
selectionSprite.graphics.lineTo(x1,y1);
selectionSprite.graphics.endFill();
selectionSprite.graphics.beginBitmapFill(horz_bmp, new Matrix(1, 0, 0, 1, textureOffset, 0));
// draw bottom line
selectionSprite.graphics.moveTo(x1,y2 – lineThickness);
selectionSprite.graphics.lineTo(x2,y2 – lineThickness);
selectionSprite.graphics.lineTo(x2,y2);
selectionSprite.graphics.lineTo(x1,y2);
selectionSprite.graphics.lineTo(x1,y2 – lineThickness);
selectionSprite.graphics.endFill();
// draw vertical lines
selectionSprite.graphics.beginBitmapFill(vert_bmp,new Matrix(1,0,0,1,0,textureOffset));
// draw left line
selectionSprite.graphics.moveTo(x1,y1 + lineThickness);
selectionSprite.graphics.lineTo(x1 + lineThickness,y1 + lineThickness);
selectionSprite.graphics.lineTo(x1 + lineThickness,y2 – lineThickness);
selectionSprite.graphics.lineTo(x1,y2 – lineThickness);
selectionSprite.graphics.lineTo(x1, y1 + lineThickness);
selectionSprite.graphics.endFill();
selectionSprite.graphics.beginBitmapFill(vert_bmp, new Matrix(1, 0, 0, 1, 0, -textureOffset));
// draw right line
selectionSprite.graphics.moveTo(x2 – lineThickness,y1 + lineThickness);
selectionSprite.graphics.lineTo(x2,y1 + lineThickness);
selectionSprite.graphics.lineTo(x2,y2 – lineThickness);
selectionSprite.graphics.lineTo(x2 – lineThickness,y2 – lineThickness);
selectionSprite.graphics.lineTo(x2 – lineThickness,y1 + lineThickness);
selectionSprite.graphics.endFill();
}
July 22nd, 2008 at 2:22 pm
Danny,
Thanks for the tip. I’ll check it out and add it in…
July 30th, 2008 at 9:52 am
[...] http://www.blog.noponies.com/archives/80 [...]
July 31st, 2008 at 7:51 am
This can be simplified greatly if you’re going for a 1px thickness on the line. Create a gradient box with the desired dash size angled at 45 degrees, then just set the lineGradientStyle with an immediate ratio and draw a rect.
Not complete code, but the general idea:
var ratios:Array = [0x7F, 0x80];
matrix.createGradientBox( dashSize, dashSize, Math.PI / 4, offset, offset );
target.graphics.lineGradientStyle( GradientType.LINEAR, colors, alphas, ratios, matrix, SpreadMethod.REPEAT, InterpolationMethod.RGB, 0 );
target.graphics.drawRect( r.x, r.y, r.width, r.height );
July 31st, 2008 at 7:54 am
And in the sample above, just update the offset in your animation loop by a desired amount. =)
July 31st, 2008 at 8:50 am
In case you are looking for an AS2 version you can check my solution from 2005: http://www.quasimondo.com/archives/000571.php
And here is another one for custom paths:
http://www.quasimondo.com/archives/000573.php
BTW – you can save a lot of performance but not redrawing that rectangle upon every frame but simply animating the bitmap fill.
July 31st, 2008 at 2:39 pm
Mike,
Thanks for that tip.
I’ve been meaning to revist this Class and re work it, just have not had the time.
Mario,
I agree!
Thanks for the AS2 examples.
February 26th, 2009 at 1:21 pm
Very nice but what can it be used for?
Can we get information regarding the selected area defined by the marching ants?
February 27th, 2009 at 1:44 am
Not much really, its a bit of a gimmick.