0 Replies Latest reply on Mar 5, 2010 1:00 AM by Giuseppe Muccioli

    Changing CSS properties at runtime

    Giuseppe Muccioli

      Hi everybody,

      I'm trying to create an interface system that every user can customize simply selecting a color with a ColorPicker, without preparing different CSS files or different images.

      I think that the right direction is to set all possible style in a separated CSS file and, at runtime, do something like:

      protected function changeColor(color:uint):void {

           var aStyle:CSSStyleDeclaration=StyleManager.getStyleDeclaration(".styleName");

           aStyle.setStyle("backgroundColor", color);

      }

      Where ".styleName" is initially defined in the CSS file.

      All work, for all properties (non only backgroundColor).

      The problem now is, how can also change (tint) the embedded images defined in some CSS styles?

      Let me show:

      if I've in a style:

      Button {

           up-skin: Embed(source="Skin/Button_upSkin.png");

           over-skin: Embed(source="Skin/Button_overSkin.png");

           down-skin: Embed(source="Skin/Button_overSkin.png");

           disabled-skin: Embed(source="Skin/Button_upSkin.png");

      }

      how can I get the, for example, current upSkin image to apply on it a tint effect (with ColorTransform) and then reassign it to the current style?

       

      I hope someone can help me... maybe it's a simple question, but not for me ;-)

      Thanks a lot and, sorry for my english...

      Beppino

       

      I'm using flash builder 4, with SDK 3.5a. Flash player 10.