October 04, 2005
Flash 8: Marching Ants Selection Rectangle

Marching ants rectangles are probably not priority #1 in an application, but they are a nice visual clue to the user that she is currently opening a selection rect. So if you are still looking for a nice "pimp up your app" part, look no further:

This an example for a very simple visual widget that you could also build with the Flash Drawing API, where it would proably become a horrible performance hog having to draw hundreds of tiny vectors. Using the new beginBitmapFill method this tool behaves much nicer and has a very small footprint.

The class allows for custom line patterns and colors and you can change the speed and direction of the ants' march.

Download the Marching Ants Rectangle source here.

Posted at October 04, 2005 12:13 AM | Further reading


Have always though about this but as projects go never really had the time to sit down and do it.
Thanks for the good example

Posted by: Campbell Anderson on October 4, 2005 01:14 AM

This makes me think that dotted lines are possible using the lineTo methods.

Posted by: John Giotta on October 4, 2005 04:28 PM

a check routine for the size of the selection would be a nice feature...to avoid 1x1 Pixel selections ;)

Posted by: Frankster on October 4, 2005 04:39 PM

Native dotted lines with lineTo/lineStyle? Then you know more than I do, John. To my knowledge this is not supported yet. The only new properties of lineStyle are: pixelHinting, noScale, capsStyle, jointStyle and miterLimit.

Posted by: Mario Klingemann on October 4, 2005 04:57 PM

Good stuff Mario!

Posted by: Ben Jackson on October 4, 2005 06:11 PM

Nice, though a little bit too and or only cosmetic...
Any chance to copy and paste the selection?

Posted by: shirley on October 5, 2005 02:05 PM

Shirley - of course it's only the frame that I'm rendering. How should I know in which environment it will be used? What belongs into the selection in the respective app? It could be a bitmap, some movieclips, text, just anything. So for me it doesn't make sense to include that in this class. The frame is just a nice eyecandy, the other part has to be done by the programmer.

Posted by: Mario Klingemann on October 5, 2005 02:59 PM

your explanation it s fine

Posted by: shirley on October 5, 2005 06:20 PM

Just wondering... why do the "ants" march faster on a small box, and slower on a large one... shouldn't the marching be a fixed speed?

Posted by: Xenon on October 6, 2005 02:10 AM

I cannot say that for sure, but I think that this an optical illusion. One way to test that is to draw a very thin tall rectangle and compare the short edge to the long edge. They definitely move in the same speed, but the shorter one looks faster.

Posted by: Mario Klingemann on October 6, 2005 02:35 AM

Hi! I found this example from Senocular and it looks simpler than yours, I guess.
What do you people think?

Posted by: Ste on October 6, 2005 04:09 PM

If you find it is better suited for your purposes and think it is simpler that's perfectly fine.

Personally I prefer to have something like this neatly packaged in a class, so to me my version looks actually simpler. Plus it allows you to define your line pattern in Actionscript and not by loading a bitmap. And it doesn't run on onEnterFrame. And even if most people probably don't care - my ants run around in a perfect cycle and not crisscross.

Posted by: Mario Klingemann on October 6, 2005 04:24 PM

I prefer the neat packaging as well, though for those examples I tried to keep the required level of knowledge to a minimum so that more people would be able to learn from them without the requirements of knowing AS2 etc. That marquee also mimics the photoshop marquee instead of following the direction of the line.

Posted by: senocular on October 6, 2005 04:44 PM

The line speed change is an illusion. you can test it by dragging the rectange from being a square to being a tall thing rectangle. if the "ants" were fast the shorter it got, you would see them speed up. but you don't. the illusion happens are the ants make a short trek from corner to corner in a couple blinks, which out eyes misinterpret as a faster speed, incorrectly.

Posted by: aljavar on October 27, 2005 06:58 PM
Post a comment

Email Address:



Remember info?

Thank you!

Most Visited Entries
Sketches, Works & Source Code
In Love with
Powered by
Movable Type 2.661

© Copyright Mario Klingemann

Syndicate this site:
RSS 1.0 - RSS 2.0

Quasimondo @ flickr
Quasimondo @ LinkedIn
Quasimondo @ Twitter
Quasimondo @ Facebook
Quasimondo @ MySpace
Quasimondo is a Bright
Citizen of the TRansnational Republic
My other blog in german

My family name is written Klingemann,
not Klingelmann, Klingeman, Klingaman, Kingemann,
Kindermann, Killingaman, Klingman, Klingmann, Klingonman
Klingemman, Cleangerman, Klingerman or Kleangerman

profile for Quasimondo at Stack Overflow, Q&A for professional and enthusiast programmers