I have been using the Flex cookbook for a little while and I really like the format. So I am going to steal it, although I will make sure any content put up here will find its way over there also. But first we will show off the demo app. Note that you need to have flash player 9.0.115.0 or higher installed to have this work properly.
Problem Summary
You need to duplicate/clone a image that is loaded from a swf (a vectored image). This could be for any reason, but one situation would be for caching images.
Solution Summary
The Flex Image class will store the data representing the image in the content property. When a swf image is loaded into the Image the content, this will be a Movieclip which has a loaderInfo property which gives you access to the actual byte array behind the data that is loaded. Now to solve the problem you need to copy/load the bytes from one image into a new loader and set the source of the new image equal to the new loader.
This solution requires that the user have flash player 9.0.115.0 or higher installed.
Explanation
To make the copy you will first need to take the current loaded image and get the byte array from the contents. Then the next thing you need to do is create a new loader which you must keep in class scope to use it once the data has been loaded. Now you can load the byte array from the original into the new loader. At this point you also need to add an event listener to listen from the complete event from the loaderContextInfo property which is fired once the byte array is loaded into the new loader. And finally we take the loader and set it to the source of our duplicated image.
The following source code illustrates the solution and is the source code to the demo above.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="646" height="319">
<mx:Script>
<![CDATA[
private var dupCliploader:Loader;
private function dupImg():void
{
var ba:ByteArray = img.content.loaderInfo.bytes
dupCliploader = new Loader();
dupCliploader.loadBytes(ba);
dupCliploader.contentLoaderInfo.addEventListener(
Event.COMPLETE, bytesLoaded);
}
private function bytesLoaded(event:Event):void
{
imgDup.source = dupCliploader;
}
]]>
</mx:Script>
<mx:Image id="img" x="10" y="41" width="290" height="267" source="rotating_pacman.swf"/>
<mx:Image id="imgDup" x="346" y="41" width="290" height="267"/>
<mx:ApplicationControlBar width="100%">
<mx:Button label="Duplicate" click="{this.dupImg()}" />
<mx:Button label="Delete Duplicate" click="{imgDup.source = null}" />
</mx:ApplicationControlBar>
</mx:Application>
You can download the code from here and if you have any questions feel free to leave a comment.
12/24/2007 - 08:50
Hi. Useful tut, but i`m getting an error like this:
"1119: Access of possibly undefined property bytes through a reference with static type flash.display:LoaderInfo."
What i`m doing wrong?
The Compiler don`t like this string:
var ba:ByteArray = img.content.loaderInfo.bytes;
12/26/2007 - 08:59
What version of Flex are you using? The tutorial was written with Flex 3 Beta 2. I would guess this is your issue.
12/27/2007 - 13:29
Oops, yes. I was using 2.0.1
Thx, i`ll try in M3.
09/30/2008 - 10:51
Do you know how to import a DWG file into a swf or fla file? I will really appreciate if you can help me
03/31/2009 - 02:00
hello,
is it possible to make duplication of other controls like button,etx. with this code?
flexguy1@gmail.com
04/02/2009 - 19:57
I am not sure, I have run across blogs talking about it before can't recall exactly where.