0 Replies Latest reply on Dec 26, 2011 12:30 AM by Abhishek Chaudhary

    Skinning for spark components

    Abhishek Chaudhary Level 1

      Hi All,

       

      A nice discussion to start..

       

      For styling mx components we have CSS skins assocoated with them

       

      Take example of mx button for which there is upSkin/downSkin/overskin etc etc

       

      we can specify swf assets as a source of these skins.

       

      Example:

       

      .actionButton

      {

            disabledSkin: Embed(source="x.swf", symbol="Button_disabledSkin");

            downSkin: Embed(source="x.swf", symbol="Button_actionButton_downSkin");

            overSkin: Embed(source="x.swf", symbol="Button_actionButton_overSkin");

            upSkin: Embed(source="x.swf", symbol="Button_actionButton_upSkin")

      }

       

      <mx:Button  styleName="actionButton" x="37" click="loginscreen1_clickHandler(event)" y="182" label="LogIn"/>

       

       

       

       

      Now with flex 4.* onwards, for spark components there are NO SKINS BUT STATES

       

       

      However same is not the case with spark controls. In spark controls for user actions there are states not styles and swf assets cannot be embedded, we need to write code for generating required skins.

       

      Example:

       

      <s:states>

      <s:State name="up"/>

      <s:State name="over"/>

      <s:State name="down"/>

      <s:State name="disabled"/>

      </s:states>

       

      <s:Rect x="0.5" y="0.5" width="101" height="30">

      <s:fill>

      <s:SolidColor color.disabled="#333333" color.down="#009CFF" color.over="#CDCBFF" color.up="#FDFF00"/>

      </s:fill>

      </s:Rect>

       

       

       

      So for a spark button there is upState/downState/overState and we CANNOT specify swf assets as a source of these states, we need write some skinning code for it.

       

      So the question is which tool to use to generate this skinning code?

       

      Can I  use Adobe Illustrator for generating this skinning code? Is it possible in Adobe Illustrator?