ColorWall with images

14 Comments 3 November 2009

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.


Posted in Experiment

14 Responses to ColorWall with images

  1. 7 November 2009

    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.

  2. 9 November 2009
    FlashMonkey

    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.

  3. Collage Creator | Flash Monkey

    [...] 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 [...]

  4. 23 November 2009
    Maurice

    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?

  5. 23 November 2009
    FlashMonkey

    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.

  6. 30 November 2009
    N

    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!!

  7. 1 December 2009
    FlashMonkey

    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.

  8. 1 December 2009

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

    Ps.: Sorry my english…

  9. 21 December 2009
    kirosaki

    Thankx alot .. for code:)…

  10. 22 December 2009
    howard

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

  11. 23 December 2009
    kirosaki

    hello flash monkey

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

    Thankx

  12. 23 December 2009
    FlashMonkey

    @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/

  13. 14 January 2010
    kirosaki

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

    thankx in advance

  14. Extending the Wonder Walliphonema | iphonema

    [...] 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. [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>