1 Reply Latest reply on May 27, 2010 7:43 AM by jp77

    Assign CSS style to Class

    DeveloperAtWork

      Hi,

       

      I need to move all the images to a CSS file so that images could be changed without touching the the actionscript file.

       

      I have come across this embed for a CLOSE_ICON constant Class.

       

      [Embed(source="images/close.png")]
      public static const CLOSE_ICON:Class;

       

      Is there a way to move this embed to CSS and reference it through setStyle or something similar?

       

      Its a pretty big application and I dont know how many times or where the CLOSE_ICON Class is called, so the Class must stay.

       

      Any help would be appreciated,
      Thank you.

        • 1. Re: Assign CSS style to Class
          jp77 Level 1

          Hi, we did something similar (if I understand your question properly). The general idea we followed was to embed external images in our css and then compile the css to swf (right click on the css file and select Compile CSS to SWF). Then we used the StyleManager.loadStyleDeclarations to bring in the swf (and there can be multiple - useful for brands) and set the stylename property on our ui component.

           

          So for example:

           

          css:

          .buttonStyle {upskin: Embed(source="MainPageButtons/BTN_NewGamesNormal.png"); overskin: Embed(source="MainPageButtons/BTN_NewGamesRoll.png"); downskin: Embed(source="MainPageButtons/BTN_NewGamesRoll.png");}

           

          mxml:

          StyleManager.loadStyleDeclarations("../assets/MyStyles.swf");

          <mx:Button stylename="buttonStyle"/>

           

          You could also do something like this:

           

          css:

          .indbg {backgroundImage:Embed(source="Branding/barArrow.png");}

           

          mxml:

          this.addEventListener(StyleLoaderEvent.ALL_STYLES_LOADED, setComponentSyle, false, 0, true);

           

          private function setComponentStyle(event:StyleLoaderEvent):void

          {

               var indImageSrc:Image = new Image();    

               indImageSrc.source = StyleManager.getStyleDeclaration(".indbg").getStyle("backgroundImage");    

          }

           

          here's a link to more examples: http://livedocs.adobe.com/flex/3/html/help.html?content=styles_10.html