martian arts

Since few years, coverflows have been successfull. The best way to show lots of things in a small space.

Most of the time, you can expect a simple box with an image, and a overlay, with a transparent black background and white font color. Even if you can predict that it could easily turn to crap, and teach your client about it, most of the time, what you predicted comes to reality.

With a bright image, if the black background is too opaque, you loose some data about the image, and more, you change the perception you had about shape of the image. If the black background is too transparent, you may find the white font unreadable very quickly.

So i went up with this stupid and almost useless idea to adapt the alpha of the background depending on what’s behind. That way, wherever the overlay could be, the alpha would always be the way it should to provide a good compromize between the visibility of the image and the readability of the font.

For a small proof of concept, i just put 4 greys and tried differents overlay. To see what i meant with visibility and readability, i made those overlays draggable:

I turned to be usefull with a real image:

Here, i put the .8 alpha overlay on the eye, to show how a too opaque background could hide image data ; and the .2 alpha overlay on a bright shoulder to show that a too transparent background could affect the readability of a text. The perfect case would be to switch them but… they’re still different (.8 vs .2 alpha). The dynamic overlay fits everywhere correctly !

I used a small object for my overlay. I think the methods written are clear enough.

var rect:Rectangle = new Rectangle(overlay.x, overlay.y, overlay.width, overlay.height);
var ba:ByteArray = image.bitmapData.getPixels(rect);

ba.position = 0;
var total:uint, color:Array;
while (ba.position < ba.length)
{
	color = int2rgb(ba.readUnsignedInt() - 0xff000000);
	total += color[0] < color[1] ? color[1] < color[2] ? color[2] : color[1] : color[0];
}

var average:Number = (total / luminosity.position) / 100;
var ratio:Number = total / (0xff * luminosity.position);

overlay.refresh({ text:'dynamic alpha (' + average.toFixed(2) + ')', alpha:average });