8 Replies Latest reply on Aug 22, 2009 11:46 PM by e2dev

    Embedding image symbols dynamically

    JohnLikesFlex

      Hi,

      I have list control with an item renderer that displays an image and a label. The image is embedded in a swf file and this is how i can access it

       

      <mx:Image id="image2" source="@Embed(source='assets/Reservations_Icons.swf', symbol='Microphone')"  x="20" y="80"/>

       

      Note this is from one of the Adobe samples...

       

      Now what i want to do is get the symbol name and label name dynamically, so that i can just pass it to the renderer.

       

      I have a sample xml file that populates the list

              [Bindable]
                  private var myXML:XML=
                  <amenities>
                          <amenity>
                         <name1>Dancing</name1>
                         <symbol1>"@Embed(source='assets/Reservations_Icons.swf',symbol='Dancing')"</symbol1>                   
                      </amenity>
                      <amenity>
                         <name1>Microphone</name1>
                         <symbol1>"@Embed(source='assets/Reservations_Icons.swf',symbol='Microphone')"</symbol1>                   
                      </amenity>

       

                  </amenities>;
                  [Bindable]
                  public var amenitiesList:XMLListCollection;

       

       

      Within the list i have something like

          <mx:List id="myList" dataProvider="{amenitiesList}" width="100%" height="100%"
              
               allowMultipleSelection="true"
               itemRenderer="components.AmenitiesRenderer"
               dragEnabled="true"
               />

       

      Now within the renderer class i have

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
          xmlns:comp="components.*" horizontalScrollPolicy="off" verticalScrollPolicy="off">

       

          <mx:Image id="image1" source="@Embed(source='assets/Reservations_Icons.swf', symbol='Microphone')"   x="20" y="20"/>
          <mx:Label x="80" y="30" text="{data.name1}"/>

       

      </mx:Canvas>

       

      As you can see i can get the label name with data.name1, question is how to get the images dynamically?

       

      I tired data.symbol1 for symbol='Microphone' but that does not seem to work.

        • 1. Re: Embedding image symbols dynamically
          e2dev Level 2

          Can you print symbol1 in the Label control

           

          <mx:Label x="80" y="30" text="{data.symbol1}"/>

           

          And see if the value you expect is in the display?

           

          Can you share more of your code including how you're trying to use data.symbol1 in the Image tag? -emily

          • 2. Re: Embedding image symbols dynamically
            falak.ibow

            this article is really very interesting one.

            i appreciate the concern which has been rose

            IT Solution

            • 3. Re: Embedding image symbols dynamically
              JohnLikesFlex Level 1

              Hi Emily,

              When i print the symbol in the label text i get "@Embed(source='assets/Reservations_Icons.swf', symbol='Microphone')" as the label text.

               

              Here is the snippet of my code:

               

              I Have a component Amenities.mxml that basically has an xml tag that has two nodes name1 and symbol1 which have the name of an amenity and image. I also have a list control that has an item renderer to which this xml data gets passed on.

               

              Here is the code:

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml
                  width="100%" height="100%"
                  creationComplete="init()">
                  <mx:Script>
                      <![CDATA[
                          import mx.collections.XMLListCollection;
                          [Bindable]
                          private var myXML:XML=
                          <amenities>
                              <amenity>
                                 <name1>Dancing</name1>
                                 <symbol1>"@Embed(source='assets/Reservations_Icons.swf',symbol='Dancing')"</symbol1>                   
                              </amenity>
                              <amenity>
                                 <name1>Microphone</name1>
                                 <symbol1>"@Embed(source='assets/Reservations_Icons.swf',symbol='Microphone')"</symbol1>                   
                              </amenity>

               

                          </amenities>;
                 
                          [Bindable]
                          public var amenitiesList:XMLListCollection;
                         
                          private function init():void {
                            var xmlList1:XMLList=new XMLList(myXML);
                            amenitiesList=new XMLListCollection(xmlList1.children());
                          }
                         
                      ]]>
                  </mx:Script>
                  <mx:List id="myList" dataProvider="{amenitiesList}" width="100%" height="100%"
                      
                       allowMultipleSelection="true"
                       itemRenderer="components.AmenitiesRenderer"
                       dragEnabled="true"
                       />

               

               

               

              This is how the AmenitiesRenderer look like:

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
                  xmlns:comp="components.*" horizontalScrollPolicy="off" verticalScrollPolicy="off">

               

                  <mx:Image id="image1" source="@Embed(source='assets/Reservations_Icons.swf', symbol='Microphone')"  x="20" y="20"/>
                  <mx:Label x="80" y="30" text="{data.name1}"/>

               

              </mx:Canvas>

               

              Since i dont know how to populate the image source i am just hard coding it here rather than reading from the data.symbol obj.

               

              I tried this :

              <mx:Image id="image1" source="{data.symbol1}"  x="20" y="20"/>

               

              but on running the application i do not see the image being rendered.

              • 4. Re: Embedding image symbols dynamically
                e2dev Level 2

                Hi John - I played around with this a bit but don't see a way to dynamically provide information to the Embed directive @ runtime. This makes sense since assets are supposed to be available at compile time when you embedding them.

                 

                With that said, I did come across this article:

                 

                http://gskinner.com/blog/archives/2007/03/using_flash_sym.html

                 

                He's actually trying to use his SWF files with AS code intact, but the concept he's implementing may help you since this seems to also allow him to grab his symbols and classes from the embedded SWF.

                • 5. Re: Embedding image symbols dynamically
                  JohnLikesFlex Level 1

                  Thanks Emkim.

                   

                  I will look at this link.

                   

                  However, what is the best way to resolve a scenario like this: You have a .swf file that have embedded images. And in your flex code you want the image and text to be displayed in such a way that allows drag and drop and also allow you to show the data in some list format.

                   

                  In my case since list has a renderer there is no way i can hard code the images alone. So what options do i have to address this use-case.

                  • 6. Re: Embedding image symbols dynamically
                    e2dev Level 2

                    John - I also saw this link:

                     

                    http://www.bigspaceship.com/blog/labs/flash-ide-for-designers-flexbuilder-for-developers/

                     

                    It's somewhat old, but If you look in the comments, there are some interesting alternatives.

                     

                    Is there a reason that you need to use the assets from one embedded SWF? Can you create multiple SWFs or images and then simply reference the appropriate ones in the XML file?

                     

                    <amenities>
                         <amenity>
                              <name1>Dancing</name1>
                              <symbol1>Dancing.SWF</symbol1>                  
                         </amenity>
                         <amenity>
                              <name1>Microphone</name1>
                              <symbol1>Microphone.SWF</symbol1>                  
                         </amenity>

                    </amenities>

                     

                    Then your image becomes:

                     

                    <mx:Image id="image1" source="assets/{data.symbol1}"  x="20" y="20"/>

                     

                    -emily

                    • 7. Re: Embedding image symbols dynamically
                      JohnLikesFlex Level 1

                      Aah, ya that could work too. Here is the scenario, what if i have say 100 images.. With one swf file i just need to reference the symbol names. Having individual swf files could impact load times, performances etc. Anyways, i will let the powers to be decide on how this should be tackled.

                       

                      THanks again

                      • 8. Re: Embedding image symbols dynamically
                        e2dev Level 2

                        John - I suggest for your scenario that loading the images at runtime may be better. In either case you do not save any load time since embedding the image still increases file size, and therefore load time up front. However,  if you load the images only when they are needed, at runtime, then you will decrease the initial loading time, which can improve the perception of load time. My understanding of the purpose of embedded images is that they are great for stuff like a little delete, save, new icons that you might have in an application: little things that you know don't need to change and are inherently part of the application, so embedding them makes sense. Good luck! -emily