How do you do this?

The pixelation/grid effect on the backgroung image seen here:

How do you do this and why? I’ve seen it a lot on full screen flash sites with large background images (usually more noticable but this is the best I could find right now). It looks really nice but wondered if it was something to do with blowing up a smaller image to save Kbs or if it was just a trend?

I’d be interested to know how it’s done and why. I’m not a webcoder, more a motionographer.

There are probably lots of ways to implement that effect, but I can only think of two at the moment. The simplest is to overlay the image with a translucent *.png that has a checkered pattern. The other more complicated method is to create a custom filter via the BitmapData class.

^ I think png is the best way to go

Something like this, import a small transparent grid pattern png in library and give it a class name of Grid then:

var sp:Sprite = new Sprite();
sp.graphics.beginBitmapFill(new Grid(0, 0));
sp.graphics.drawRect(0, 0, 2000, 2000);
sp.graphics.endFill();
addChild(sp);

I prefer to just draw it once and quite large to cover all screen res. instead of redrawing it on every stage resize but there could be a better way.

I think it’s just to reduce the “impact” of the background image especially with bright images so it’s easier to see the content.

If I had a penny for every time flash file doesnt spit a debug error, I would be no richer.

Thanks for the replies, it seems it’s a lot more basic than I thought!

LGLab said
Something like this, import a small transparent grid pattern png in library and give it a class name of Grid then:

var sp:Sprite = new Sprite();
sp.graphics.beginBitmapFill(new Grid(0, 0));
sp.graphics.drawRect(0, 0, 2000, 2000);
sp.graphics.endFill();
addChild(sp);