2007-06-12
AS3: Loading External Images
I really must say that Actionscript 3 is far far better and faster then all the previous versions and I like it very much. From my experience the Flash market, and especially the Flash 9 market, is growing extremly fast. I´ll get job offers nearly every week, sometimes even 2 at a day. So I have the freedom to pick out what I like most. Currently I am involved in a project where I am creating a Java-Backend driven Flash User Frontend. Part of the project is to load and display external Images from untrusted websites. So basically what Flash should do is loading the image and creating a thumbnail and a better and bigger version of the image which should display when the user moves the mouse over the thumbnail.
-
this.loader = new Loader();
-
this.loader.load("http://somewebsite.com/image.png");
-
this.loader.addEventListener(Event.COMPLETE, onLoadComplete);
-
-
public function onLoadComplete(event:Event):void {
-
var thumbnail:Sprite = new Sprite();
-
thumbnail.addChild(this.loader);
-
}
No problem so far! The image is available when onLoadComplete is thrown and the thumbnail gets displayed. Next I wanted to add the mouseEvent which displays the bigger version of the image. My idea was to copy the bitmapData of the loader object. So I did and had a Security Exception as a sideefffect because copying bitmap data of loaded image from an untrusted website (no crossdomain.xml) violates with the local sandbox.
-
/* throws Security Violation if the
-
loaded image came from an untrustes website */
-
var bigImage:Bitmap =
-
new Bitmap(loader.content).bitmapData.clone();
You might ofcourse download the image and display it but you are not allowed to even touch or manipulate the bitmap data, because you might inject the image with bad code which could lead to an unsafe system. This makes sense ofcourse. Now I know better.
So for the moment I created a new loader for the the image which displays on mouseOver Event because I could not find a better way (like cloning the loader object) without having Security problems again. I can live with this solution, but do you have any better idea?
28 Comments
-
would maybe php proxy thing help
http://www.abdulqabiz.com/blog/archives/general/php_proxy_script_for.php -
yeah a proxy would help of course … thanks for the hint
-
Yeah, you either need to load it via a proxy that’s local on your server or make sure you have the crossdomain.xml file on the root of the server you are getting the images from ( essentially them saying it’s ok for you to load those ).
-
Yep, proxy is fine since we might load data from nearly everywhere, so we cannot ask everyone to add a crossdomain.xml to their serverx. This solution is ok, at least I now have one that will work. But still I would be interested how the pure Actionscript solution might look like. I believe it is possible to copy the loader object somehow. I just dont know how yet.
-
[...] assa [...]
-
I have incurred in the same issue myself (while developing an app for Facebook).
The proxy seems to be the only solution. There is no apparent workaround within AS3. Unless there is some hidden class or code that some Adobe engineer might want to share…
-
it’s not correct to assign an event listener directly to the Loader object.
You have to assign it to the contentLoaderInfo property of your Loader to make it run properly.something like
this.loader. contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);I hope to be helpful :D
bye -
It seems like you should have kept this new theme closed-source until a couple of weeks before the 5.0 launch… (don’t know if that was possible at all?) However, I definitely feel it’s not drupal that made a mistake here, but the wordpress team.
-
I had some trouble with the following part of your code:
new Bitmap(loader.content).bitmapData.clone();Solved it via:
new Bitmap(loader.contentLoaderInfo.content).botmapData.clone();regards!
-
thanks for this helpfull posting manfred.
-
Very helpfull, Thx a lot for sharing.
-
The PHP proxy helped me immensely, I was running a script fine on my local box and when I pushed it up to my server, nothing was showing! I just wish it would have been cleared in the documentation. Here is an adobe doc with more info about the proxy:
http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_16520&sliceId=1
-
Hi Jake, thank your for the link. Just perfect. :)
-
Thanks for sharing.
-
hi..
maybe… loader event attach isloader.contentLoaderInfo.addEventListener ??
thankyou share. :)
-
Hi,
sounds just what I need for a project I´m working on, somebody needs an XML driven gallery with thumbnails. All the images are stord on their own server, so no security issue, I guess. But what I wonder is this: When You create a thumbnail of something, it might be the display size that is thumbnail, but (at least that´s what I remember from AS2) the load size is whatever the image is, so the thumbnail in this case is not to have something that loads really fast and to only make the user wait longer in case he wants to see the bigger version, but rather to fit more pictures on the page, is that right? (Hence the bitmapdata copy).
I just wonder, because tht issue will come up, and the only workaround I can think of is to have every picture as a big and a small version on your server…
Anyways, maybe you have a thought on this and share it with me..
best
Mathias
-
Don’t use PHP or Ruby or C# to proxy it’s added unnecessary load on your server. Use your web server to do that. Nginx or Apache both have proxy rules that I’ve used to deal with these sorts of security issues.
-
Hi,
Try adding an event listener for INIT instead of complete, not sure if that will turn out any better, but it’s good coding practice. :)
Cheers,
Stephen -
Stephen,
adding event listeners to INIT does not solve any problem neither is it good coding practice here. The problem is already solved by using a proxy.
Regards
Manfred -
No worries.
Yeah, you’re right about that…I do tend to use INIT most of the time for flexibility in loading .swf files, so I suppose I am just prejudiced. :)
Cheers,
Stephen -
Hi guys
I’ve been looking into loading an image into a BitmapData object and you can achive the above using the following…
sourceBMD = e.target.loader.contentLoaderInfo.content.bitmapData as BitmapData;
“e” is the Event object passed through when Event.COMPLETE fires.
Hope this helps!
Thanks,
Mike -
I get a compile error as Loader.load() is expecting a flash.net.URLRequest instead of a String. Are you sure this is the AS3 way to do it or is this the AS2 way? I’m not really up to date on flash and I want to try and learn best practices for AS3 and leave behind old AS1/2 ways of doing things.
-
Hello FLCoder, yeah this is outdated a little bit - but still AS3 [an early version]. However I think URLRequest is the right way to go.
-
Here the same code, just a little more portable & flexible:
import flash.display.MovieClip;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.*;var loader:Loader;
var paramImage:String;
var thumbnail:MovieClip;// Fake Constructor
function init():void {
loader = new Loader();
thumbnail = new MovieClip();
this.addChild(thumbnail);
}function load(url:String):void {
loader.load(new URLRequest(url));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR , onLoadError);
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoadProgress);
}// Event Handlers
function onLoadComplete(event:Event):void {
thumbnail.addChild(this.loader);
}function onLoadError(e:Event):void {
trace(this+”.ERROR loading “+paramImage);
}function onLoadProgress(e:Event):void {
// Needed for progressbar
}init();
load(”http://somewebsite.com/image.png”); -
thanks for new codes Johhny, i will try…
-
thanks for codes johnny
my web : http://www.rocksijen.com -
Thanks Good Admin
