In a previous post (Finding a pixel’s color value using the Bitmap classes and getPixel()) we looked at copying an image so we could build a simple color-picker like app. In this post, we explore duplicating a loaded image and copying it into a TileList control. Each time you press the “Copy image” button, a new instance of the source image is created and added to the TileList control’s data provider.
As an added bonus, we also create a custom item renderer consisting of an HBox container, Image control, and a Label control.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/08/03/duplicating-images-using-the-bitmap-and-bitmapdata-classes/ --> <mx:Application name="Image_content_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var arrColl:ArrayCollection = new ArrayCollection(); private function dupeImage(source:Image):void { var data:BitmapData = Bitmap(source.content).bitmapData; var bitmap:Bitmap = new Bitmap(data); arrColl.addItem({image:bitmap, label:"item #" + (arrColl.length + 1)}); } ]]> </mx:Script> <mx:HBox> <mx:Panel title="Source image"> <mx:HBox verticalAlign="middle" horizontalAlign="center" width="100%" height="100%"> <mx:Image id="img1" source="assets/logo.png" /> </mx:HBox> <mx:ControlBar> <mx:Button label="Copy image" click="dupeImage(img1)" /> </mx:ControlBar> </mx:Panel> <mx:TileList id="tileList" dataProvider="{arrColl}" width="300" height="200" columnCount="4" verticalScrollPolicy="on"> <mx:itemRenderer> <mx:Component> <mx:VBox> <mx:Image source="{data.image}" /> <mx:Label text="{data.label}" /> </mx:VBox> </mx:Component> </mx:itemRenderer> </mx:TileList> </mx:HBox> </mx:Application>
View source is enabled in the following example.
{ 22 comments… read them below or add one }
Good sample of bitmap operation, thank your for sharing experience!
Very nice! I wait for the next example.
Good one! Thanks.
~Tushar
This is a great example. How about taking it a step further. Is there a way to grab “stills” from a playing flv, let’s say it’s a basic photo slideshow and compare them so you can “detect” a scene change? So you can create some kind of interval/timer that runs every so often, take a bitmap “snapshot” of what is in the video display and keep comparing it to the previous shot. I’m wondering if there are any methods in the bitmap class that can help determine the pixel percentage difference (or something like that) between two images captured in this way.
techpop,
I think I have an example of grabbing video stills from an VideoDisplay control whenever it encounters a
cuePointevent. Regardless, it should be fairly easy if you use the Timer class or maybe listen for the VideoDisplay control’splayheadUpdateevent.As for bitmap compares, I haven’t used it personally, but the BitmapData class has a
compare()function which compares two BitmapData objects (see the Flex 2.0.1 LiveDocs forBitmapData.compare()).Peter
A couple questions. Why do you use the Bitmap class instead of an Image class? Also, is there any reason not to use the clone method?
judah,
No reasons, I think this was just the first approach that came to mind.
Peter
I encountered problem with adding Images to TileList control, and it can be reproduced in your example as well – if you add about 30 copies of the bitmap, catch a scrollbar and start scrolling up and down intensively, after short while, bitmaps start disappearing from random tiles. Also, if i continue, i get this:
(I have 9,0,115,0 player)
Do you know any workaround for this? The problem is with TileList and Image controls together, rather than in BitmapData, because when i set direct image address in source field, same problem appears.
Thanks in advance
There is a big bug that I’m not able to fix…
If I fill the TileList with enough objects to make the scrolling button to appear and if I scroll, the images will disappear…
Am I the only one to have this problem ?
Is there a way to fix it ?
Thanks in advance.
@betehes:
i’m having the exact same problem, very annoying, seems to be a bug in flex for me but i dunno how to fix
@betehes:
i think i found a solution, changing the itemrenderer to:
worked in my case
^^change the image tag in the itemrenderer to this, and link display namespace to “flash.display.*”
<mx:Image> <mx:source> <display:Bitmap bitmapData="{data.source}" /> </mx:source> </mx:Image>sry for double post…seems wordpress has big issues with “greater than” and “smaller than” characters
I can’t begin to tell you how long I have been looking for a simple solution to rendering a d*mn bitmap like your example…I think I love you. :)
Thanks Martin. And Peter, than you a well.
Best,
KevinC
data.sourceshould bedata.image.displayObjectin that caseHello,
Is there any way to copy data from SWFLoader instance?
Thanks
thanks martin.
your solution is great!
still cant get this to work with the suggestions at the bottom of the blog
^^change the image tag in the itemrenderer to this, and link display namespace to “flash.display.*”
could you explain this in greater detail
what does this mean ?
link display namespace to “flash.display.*”
thanks
@geoff
It means you have to write this:
at the root tag of your application.
Martin, you are awesome!! Your solution worked for me. Thanks!!
When I run the posted demo it works fine, but when I run the code in Flex Builder 3.0.2 SDK 3.2, I run into the scroll problem that everyone describes here, even with the solutions the images disappear during the scroll. Please assist, thank you.
its very nice but if you implement with loader then its very usefully
Thanks
Atul Singh Parihar
Hello Peter
can i use prettyPhoto for the zooming effect in my Flex Project…
Thanks ciaooo from Italy