Tips:three ways to load an image file in Flex

March 9th, 2008 Ntt.cc

  

Tweet

Similar 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 file.

Full code after the jump.

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="InitApp()">
3. <mx:Script>
4. <![CDATA[ 
5.  
6. //the first way:it will build "image.jpg" file into swf ( after building into swf,the image.jpg file is NOT needed)
7. [Bindable] 
8. [Embed(source="image.jpg")] 
9. private var imgClass:Class;
10. //the second way
11. private var _loader:Loader;
12.  
13. private function InitApp():void{ 
14.  
15. // source code of the first way
16. _img.source = imgClass;
17.  
18. //source code of the second way
19. _loader = new Loader();
20. //notice: NOT _loader.addEventListener,is  _loader.contentLoaderInfo.addEventListener
21. _loader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e:Event):void{ 
22. _img.source = e.currentTarget.content;
23. });
24. _loader.load(new URLRequest(encodeURI("image.jpg")));
25.  
26. //the third way
27. _img.source = "image.jpg";  //Notice: set img autoLoad's property to true
28.  
29. //image.jpg file is needed by the second and the third way's *.swf
30. } 
31.  
32. ]]>
33. </mx:Script>
34. <mx:Image x="51" y="62" width="298" height="245" autoLoad="true" id="_img"/>
35. </mx:Application>

Share and Enjoy:

---

• 
• 
• 
• 
• 
• 
• 
• 
• 

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Posted in Flex Tags: flex, image, imgClass, Loader, URLRequest 25,372 views

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

You might also want to read...

• 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)
• How to load an image into our Flex application from URL(with source) (12)
• Sauce Labs Enables Automate Cross-Browser Web Apps Testing Of Adobe Flex And Flash Technologies In The Cloud (0)
• 40+ Beautiful Themes/Skins For Adobe Flex Apps (7)

« Fjax–a pretty nifty combination of flash and ajax

Google Web Accelerator–use the power of Google’s global computer network to make Web pages load faster »

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

5 Responses to “Tips:three ways to load an image file in Flex”

1. Ajay says:

   March 14, 2008 at 4:50 pm

   I am using Flex Builder 3 with Rails to develop a web based application. I want to load an Pdf file into browser, i tried out some techniques but it’s not working.
   If you have any solution to this please let me know.

   thanks

   Reply
2. minidxer says:

   March 14, 2008 at 4:58 pm

   hi,Ajay
   one component in flex 1.5 called flash paper which allows you
   to render pdfs in flex ,but I don’t know whether is it available with Flex Builder 3.

   Reply
3. GSOC Media Viewer: Image Manipulation Sliders « Moca: Mobile Care Blog says:

   August 17, 2009 at 12:01 pm

   [...] http://ntt.cc/2008/03/09/tips-three-ways-to-load-an-image-file-in-flex.html [...]

   Reply
4. Carsten says:

   November 5, 2009 at 12:13 am

   THANK YOU! This loader thing drove me crazy for more than an hour. thx for this post. even if its old.

   Carsten

   Reply
5. Tahir Alvi says:

   December 17, 2009 at 8:06 pm

   Hi i want to assign an image to a bit mapdata.
   How i do that?

   Reply