5 Replies Latest reply on Jul 8, 2010 3:57 AM by maziak

    How to embed image source in css for resusability ?

    tuliptaurus

      Hi ,

       

      I have got a lot of icons for an application and right now its embedded in the script tag

       

      eg:in my script tag i have

       

              [Embed(source="/assets/icons/save_it_icon.png")]
              [Bindable]
              private var saveIcon:Class;

       

      in my flex component

       

      <mx:Image id="savePaneImg"
                  source="{saveIcon}"
                  buttonMode="true"
                  toolTip="Save comments"
                  click="doSave();" />

       

      How do i move this image source to css file for resusability across different components?

       

      Thanks ,

       

      Regards,

      Ajantha

        • 1. Re: How to embed image source in css for resusability ?
          BhaskerChari Level 4

          Hi Ajantha,

           

          You can do the same as well in css..as  below..see sampl styles applied for Tab control...

          Tab.modifyTab

          {

           

           

          selectedDownSkin: Embed(source="../images/tab_first.png");

           

          selectedOverSkin: Embed(source="../images/tab_first.png");

           

          selectedUpSkin: Embed(source="../images/tab_first.png");

           

          overSkin: Embed(source="../images/tab_first.png");

           

          upSkin: Embed(source="../images/tab_first.png");

          }

           

          I suggest you to use Button control instead of Image control .... so that you have more control as you need a click functionality ...

           

          So you can use the same to serve your purpose..

           

          <mx:Button id="btnSave" styleName="saveIcon" buttonMode="true" toolTip="Save comments"
                      click="doSave();" />

           

          and your css is as shown below:

           

          .saveIcon

          {

           

          upSkin:Embed(source="/assets/icons/save_it_icon.png");

           

          upSkin:Embed(source="/assets/icons/save_it_icon.png");

           

          overSkin:Embed(source="/assets/icons/save_it_icon.png");

           

          downSkin:Embed(source="/assets/icons/save_it_icon.png");

           

          disabledSkin:Embed(source="/assets/icons/save_it_icon.png");

          }

           

          You can use different images for different states of the Button..

           

          If this post answers your question or helps, please mark it as such.


          Thanks,

          Bhasker Chari

           

           

           

          • 2. Re: How to embed image source in css for resusability ?
            tuliptaurus Level 1

            Hi Bhasker ,

             

            That solved the issue I was facing with the image source.

             

            Thank you :-) I changed the image controls to button controls.

             

            Regards,

            Ajantha

            • 3. Re: How to embed image source in css for resusability ?
              maziak Level 1

              You can create a resource class that contains a bunch of static embed variables, because they are static they are reused.

               

              For example:

               

              public class Icons {

                   [Embed(source="/assets/icons/save_it_icon.png")] public static const saveIt: Class;

                   [Embed(source="/assets/icons/save_it_icon1.png")] public static const anotherIcon: Class;

                   [Embed(source="/assets/icons/save_it_icon2.png")] public static const andAnother: Class;

                   [Embed(source="/assets/icons/save_it_icon3.png")] public static const canHaveLotsOfIconsInThisClass: Class;

               

              }

               

              When you want to use it in your mxml:

               

              <mx:Image source="{Icons.saveIt}" />

               

              Cheers

              Tracy

              • 4. Re: How to embed image source in css for resusability ?
                BhaskerChari Level 4

                Hi Tracy,

                 

                This approach is also a good approach in terms of reusability for assigning the embed source to the image tag ...but for applying different skins say on mouseOver and mouseDown we cant do it in this way using the Image tag..However we can do this but we need to write some actionscript..using setStyle() method ...which is a bit expensive...

                 

                If we have only one icon for all states..then we can go for this ...but if we have various states we want for mouseEvents then it would be better to Embed in css..for reusability..

                 

                Cheers,

                Bhasker Chari

                • 5. Re: How to embed image source in css for resusability ?
                  maziak Level 1

                  I agree Bhasker

                   

                  It's better to use your method for button skins. For reusable image sources I would use a class containing static references.

                   

                  Cheers

                  Tracy