Following on from my ColorWall application I posted last week here is an example that uses thumbnails loaded from Flickr (with a search tag of “sunset”). It works in pretty much the same way as described here, but instead of using the drawing API to create coloured boxes, I am using Ruben’s DistortImage class. You can view the example here.

UPDATE November 23, 2009, 13:46:

If you want to re-create the same effect grab the source code from the ColorWall post, and in the draw method which is called on ENTER_FRAME change the code that looks like this:

graphics.beginFill(imgPoints.color);
graphics.moveTo(imgPoints.tl.x, imgPoints.tl.y);
graphics.lineTo(imgPoints.tr.x, imgPoints.tr.y);
graphics.lineTo(imgPoints.br.x, imgPoints.br.y);
graphics.lineTo(imgPoints.bl.x, imgPoints.bl.y);
graphics.lineTo(imgPoints.tl.x, imgPoints.tl.y);
graphics.endFill();

To something like this:

distort.setTransform(graphics, bmd, imgPoints.tl.point, imgPoints.tr.point, imgPoints.br.point, imgPoints.bl.point);

You will need to grab Ruben’s DistortImage class and create an instance of it in your constructor, and bmd will get replaced with the BitmapData of the image you want to display.

UPDATE December 1, 2009, 13:23:

After a couple of requests I have created an example with source for this. You can download it here. I’ve just taken the ColorWall source and quickly added an image to it, but hopefully should be enough to get people started. Any questions/problems please feel free to get in touch and I’ll be happy to help as much as I can.

Source code.