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

February 10th, 2008 Ntt.cc

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!

Download: imgView.as

1. // ActionScript file (imgView.as)
2. package myLib
3. {
4. import flash.display.Loader;
5. import flash.events.Event;
6. import flash.net.URLRequest;
7. import mx.core.UIComponent;
8.  
9. public class imgView extends UIComponent
10. {
11. 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>
12. private var loader:Loader;
13. private var request:URLRequest;
14.  
15. public function imgView()
16. {
17. loader=new Loader();
18. request=new URLRequest(image_path);
19. loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);
20. loader.load(request);
21.  
22. }
23. private function onComplete(event:Event):void {
24. addChild(loader);
25. }
26. }
27. }

Download: imgView.mxml

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

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

Share and Enjoy:

• 
• 
• 
• 
• 
• 
• 
• 
• 

Posted in Flex Tags: flex, image, MXML, Source, URL 20,984 views

Enjoy this Post? Subscribe to Ntt.cc   RSS Feed      Email Feed

Related Post

• 25+ Very Cool Adobe AIR/Flex Applications for Images & Photos (9)
• Downloadable Image in Flex–is it possible that images contained in Flex applications are downloadable as they rendered in HTML? (6)
• Tips:three ways to load an image file in Flex (5)
• sample code which guide you on how to communicate between Flex and Php (1)
• The error that "No class registered for interface ‘mx.styles::IStyleManager2′" (4)

« Goowy–a web based application offering free web and flash email service

4 ways to dynamically load external JavaScript(with source) »

You can leave a response, or trackback from your own site.

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

1. Maikel Sibbald says:

   February 11, 2008 at 5:11 pm

   Ok and why aren’t you using Flex Image or SWFLoader?
2. minidxer says:

   February 11, 2008 at 11:55 pm

   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. Tips:three ways to load an image file in Flex - Ntt.cc says:

   March 9, 2008 at 8:20 pm

   [...] 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. neel says:

   August 1, 2008 at 12:24 am

   thanks
5. Liviu says:

   September 25, 2008 at 7:53 pm

   This is a good method to know the moment when image has been completly loaded. Can it be done only with Flex Image?
6. what the f@$@k says:

   January 5, 2009 at 12:26 am

   hej could you remove the f@#$k comment with warm inside
7. what the f@$@k says:

   January 5, 2009 at 12:27 am

   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
8. Ntt.cc says:

   January 5, 2009 at 12:34 am

   @what the f@$@k

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

   February 2, 2009 at 3:56 am

   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
10. How to Get Six Pack Fast says:

    April 15, 2009 at 10:34 pm

    This is very up-to-date info. I think I’ll share it on Delicious.
11. Sameera Sandaruwan says:

    November 27, 2009 at 8:09 pm

    This is a good method to know the moment when image has been completly loaded.
12. Vincenzo Fiore Marrese says:

    December 1, 2009 at 12:40 am

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