ColorWall with images

2009 November 3
by FlashMonkey

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.

14 Comments leave one →
2009 November 7

Great Job, you really tackled this one quickly. Did it take much to replace the drawing API with the distortImage class? I’m wondering how one might populate the quadrants with MovieClips, how to associate point to mc position, width and height… seems to challenging for my small cranium.

2009 November 9
FlashMonkey permalink

Thanks Christopher. It was actually really easy and I only needed to change a few lines of code from the source I put on the ColorWall post. The DistortImage class just uses the drawing API and unless you are using the 3d capabilities of Flash Player 10 or just want to do simple parallax, the only way to replicate 3d in Flash is by using BitmapData, that’s what Papervision and Away3D etc do.

For a good way of doing interactions with 3D in Flash check out this link. Hope that helps.

2009 November 22

[...] idea originated from playing around with the Flickr API whilst creating the Colorwall with images example I posted a couple of weeks ago. So what is it? Simply an image, made up of thousands of [...]

Pingback
2009 November 23
Maurice permalink

Hey! Your version looks pretty great. I was trying to make a similar effect myself using papervision. But your approach seems much better :D (and creates a lot less headaches :P)

thanks for that :D

any chance you’ll put up the source with the distortimageclass?

2009 November 23
FlashMonkey permalink

Hey Maurice. Thanks for the comment. I have updated the post with some code to help you re-create the effect as I don’t have the source to hand. Give that a go and let me know how you get on. If you get stuck let me know and I will dig out the source files for you tomorrow. Good luck - let me know how it goes.

2009 November 30

This is great, thanks for posting - I still can’t get it to work DistortImage so if you find the source please do post!

Thanks!!

2009 December 1
FlashMonkey permalink

Hi N, I have now updated the post with source for download. Let me know if you have any further questions about how it works etc.

2009 December 1

Wow!!! Thanks for the source!!!
Now I’m going implements sounds effects and zoom images for this.

Ps.: Sorry my english…

2009 December 21
kirosaki permalink

Thankx alot .. for code:)…

2009 December 22
howard permalink

This is great! Now to make it even more challenging - how would you suggest handling mouse interaction?

2009 December 23
kirosaki permalink

hello flash monkey

how do I add images from xml in this code
sorry i a noob:(

Thankx

2009 December 23
FlashMonkey permalink

@kirosaki: If your very new to AS3 I would recommend starting off small by learning about how to load basic XML into Flash. Lee Brimlow has a couple of nice tutorials at http://www.gotoandlearn.com. Try these two:

ActionScript 3 XML Basics
ActionScript 3 Advanced XML

Let me know how you get on and if you need any help (although after today I’ll be away from a computer for 4 weeks, but I’ll be happy to help you after that).

@howard: See the 2nd from top comment about adding interactions. If you can use FP10 maybe try using the build in 3D capabilities otherwise you may need to take a slightly different approach from my example. As mentioned above the guys at http://www.papervision2.com have a nice approach for handing mouse interactions on a 3D material, check out this link for more info:

http://papervision2.com/advanced-interactivity-2/

2010 January 14
kirosaki permalink

can i make these images interactive or i have to make movieclip container

thankx in advance

2010 June 26

[...] it. And if you work in a company that have one of these designers… I found a nice code shared by Flashmonkey in order to code this Flash effect. But this code runs only for an image from the Flash library. [...]

Pingback

Leave A Comment

Note: You can use basic XHTML in your comments. Your email address will never be published.

Subscribe to this comment feed via RSS