How to load an image into our Flex application from URL(with source)

Sometimes we need to load an image into our Flex application from URL,it’s very simple if the images are in a web-accessible directory.The below code is only a simple sample for it.You can modify it to suit your app.
PS.
While working on an AS 3 script I was getting an error like below(image):
Severity Description Resource In Folder Location Creation Time Id
2 Could not resolve <map:imgView> to a component implementation. imgView.mxml imgView 2008/02/10 1:17:08 26

I checked my action script file but there was no syntax error.Well was only because I forgot to create the “myLib” folder! imgView.as:

// ActionScript file (imgView.as)
package myLib
{
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;
import mx.core.UIComponent;

public class imgView extends UIComponent
{
private const image_path:String = "<a href="http://blog.minidx.com/wp-content/uploads/2007/12/is.jpg">http://blog.minidx.com/wp-content/uploads/2007/12/is.jpg";</a>
private var loader:Loader;
private var request:URLRequest;

public function imgView()
{
loader=new Loader();
request=new URLRequest(image_path);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);
loader.load(request);

}
private function onComplete(event:Event):void {
addChild(loader);
}
}
}

imgView.mxml:

//mxml file(imgView.mxml):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onAppInit()" backgroundColor="#3f3f3f" xmlns:map="myLib.*">
<mx:Script>
<![CDATA[
public function onAppInit():void{
Security.allowDomain("http://blog.minidx.com/");
}
]]>
</mx:Script>
<map:imgView width ="100%" height="100%" />
</mx:Application>

You can see the effect(demo?) by click here and download the source from here.

new-folder

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us
You can leave a response, or trackback from your own site.

13 Responses to “How to load an image into our Flex application from URL(with source)”

  1. Ok and why aren’t you using Flex Image or SWFLoader?

  2. minidxer says:

    hey,Maikel Sibbald
    Thanks for your reply,Yes,using Flex Image or SWFLoader will be more convenience,here I only wanna explain that has another way to do it.

  3. [...] to a previous article How to load an image into our Flex application from URL(with source),the following source code shows three ways that how to load an image [...]

  4. Liviu says:

    This is a good method to know the moment when image has been completly loaded. Can it be done only with Flex Image?

  5. what the f@$@k says:

    hej could you remove the f@#$k comment with warm inside

  6. what the f@$@k says:

    and by the way why are you using url to your image like
    http://blog.minidx.com/wp-content/uploads/2007/12/is.jpg“;

    is it a bug or sth – and this “; ..

    I dont follow you at all

  7. Ntt.cc says:

    @what the f@$@k

    http://blog.minidx.com is my another blog. (Chinese Flexexamples)

  8. Essam says:

    i was trying to ad pic as uploader so will be easyer for the applicatin user to add his pic , i am new user and traying to learn hope will fine the answer with you Sir thanx

  9. This is very up-to-date info. I think I’ll share it on Delicious.

  10. This is a good method to know the moment when image has been completly loaded.

  11. Hi, thanks for your work.
    Very useful.
    If it’s possible, I have a question: how I can assign image_path via XML?

  12. Rizwan says:

    hai man thanx for posting such a good example

Leave a Reply