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.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:
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.
can i make these images interactive or i have to make movieclip container
thankx in advance
14 Jan 2010@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/
23 Dec 2009hello flash monkey
how do I add images from xml in this code
sorry i a noob:(
Thankx
23 Dec 2009This is great! Now to make it even more challenging – how would you suggest handling mouse interaction?
22 Dec 2009Thankx alot .. for code:)…
21 Dec 2009Wow!!! Thanks for the source!!!
Now I’m going implements sounds effects and zoom images for this.
Ps.: Sorry my english…
1 Dec 2009Hi 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.
1 Dec 2009This is great, thanks for posting – I still can’t get it to work DistortImage so if you find the source please do post!
Thanks!!
30 Nov 2009Hey 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.
23 Nov 2009Hey! Your version looks pretty great. I was trying to make a similar effect myself using papervision. But your approach seems much better 😀 (and creates a lot less headaches :P)
thanks for that 😀
any chance you’ll put up the source with the distortimageclass?
23 Nov 2009Thanks 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.
9 Nov 2009Great 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.
7 Nov 2009