2 Replies Latest reply on Aug 31, 2009 12:46 AM by Barna Biro

    How to embed images dynamically?

    CalorieDUDU

      HI all , I'm new to flex.

      Here is what I've already done, I use

      [Bindable]   

      [Embed(source="images/xxx.jpg")]

      private var img:Class;

      to embed several images in an application.

      But the source of these images can not be determined until the run time, I got image's url dynamically, and used some variables to store them. For example, an url may refers to an url

      var url:String = "images/xxx.jpg";

      Then I think it's possible to give its value to an image source by using

      [Bindable]   

      [Embed(source=url)]

      private var img:Class;

      However,it doesn't work. there is a compile error, the description is:

      "url" does not have a recognized extension, and a mime type was not provided

      Unable to transcode url

      So what's the problem here, and could any one give me some advice to embed images dynamically?

      Thanks!

        • 1. Re: How to embed images dynamically?
          Andrew Rosewarn Level 3

          HI

           

          I don't think you can embed an image dynamically as you need to know the path of the image when you use the embed tag.  The embedding takes place at compile time, and you app would need to be compiled into a swf before your code loads.

           

          If you need dynamc images in an application then its usually done by loading them when the app is running.  You do this by using for example a HTTP service to load in the image paths.  You can then view them by assigning them to an image tag through Actionscript.

           

          I hope that helps and I got the idea of what you were trying to do.

           

          Heres a quick example I used for someone else on swapping images from an arrayCollection.  You could do something like this and populate the arrayCollection using a HTTP service.  Or just access the xml from the HTTP directly for the image paths

           

          <?xml version="1.0" encoding="utf-8"?>

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()" xmlns:local="*">

           

               <mx:Script>

                    <![CDATA[

                    import mx.controls.Button;

                    import mx.collections.ArrayCollection;

           

          [Bindable]

          private var ac:ArrayCollection = new ArrayCollection([

          {imageTitle : 'Car 1', imageUrl : 'http://www.geekologie.com/2007/12/07/future-car-1.jpg'},

          {imageTitle : 'Car 2', imageUrl :'http://www.speedace.info/solar_cars/solar_car_images/Solar_Wing_front_Japanese_e lectric_powered_car.jpg'},

          {imageTitle : 'Car 3', imageUrl : 'http://www.dezeen.com/wp-content/uploads/2008/09/gem-peapod-car-by-chrysler-llc- et008_027evsqu.jpg'}

           

           

          ]);

           

          private function showCar(num:int):void {

          img.source = ac.getItemAt(num).imageUrl;

          imgTitle.text = ac.getItemAt(num).imageTitle;

          }

          ]]>

               </mx:Script>

               <mx:Image id="img" source="{ac.getItemAt(0).imageUrl}" width="426" height="243"/>

               <mx:Label id="imgTitle" text="{ac.getItemAt(0).imageTitle}"/>

               <mx:Button label="Button" click="showCar(0)"/>

               <mx:Button label="Button" click="showCar(1)"/>

               <mx:Button label="Button" click="showCar(2)"/>

          </mx:Application>

           

          Good luck

           

           

          Andrew

          • 2. Re: How to embed images dynamically?
            Barna Biro Level 3

            Not possible. In short embedding means: adding stuff into the .swf file at compilation. Since the objects you embed into a movie are added into the final .swf file at compilation time, obviously, you can't talk about "dynamic embedding".

             

            If you are loading external images, then simply store the paths or whatever you desire in an Array and use those paths to load the images when needed ( at runtime ).