6 Replies Latest reply on Oct 25, 2011 1:59 PM by Zolotoj

    Spark skin - convert back to Flex 3 styling

    Zolotoj Level 3

      I am not asking to do any work for me but what would it take to convert the following Spark skin back to Flex 3 styles. Assuming it's even remotely possible:

       

      <?xml version="1.0" encoding="utf-8"?>

      <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"

                   xmlns:s="library://ns.adobe.com/flex/spark"

                   minWidth="85" minHeight="27" alpha.disabled="0.5"

                   >

         

          <fx:Metadata>

              [HostComponent("spark.components.Button")]

          </fx:Metadata>

         

          <fx:Script>

              <![CDATA[

                  import mx.events.StateChangeEvent;

                 

                  /* Define the skin elements that should not be colorized.

                  For button, the graphics are colorized but the label is not. */

                  static private const exclusions:Array = ["labelDisplay"];

                 

                  [Bindable] private var _fillHighAlphaOver:Number;

                  [Bindable] private var _fillHighAlphaDown:Number;

                  [Bindable] private var _fillLow:uint             = 0x000000;

                  [Bindable] private var _fillHigh:uint             = 0xFFFFFF;

                  [Bindable] private var _highlight1:uint         = 0xFFFFFF;

                  [Bindable] private var _highlight2:uint            = 0xD8D8D8;

                  [Bindable] private var _highlightDown1:uint        = 0x000000;

                  [Bindable] private var _highlightDown2:uint        = 0x000000;

                  [Bindable] private var _rollOverTextColor:uint     = 0x333333;

                  [Bindable] private var _selectedTextColor:uint     = 0x333333;

                 

                  private var _borderColor:uint    = 0x373830;

                 

                  private var hlight:Boolean;

                  override public function get colorizeExclusions():Array {return exclusions;}

                 

                  override protected function initializationComplete():void

                  {

                      useChromeColor = true;

                      super.initializationComplete();

                      var rotc:uint = hostComponent.getStyle("rolloverTextColor");

                      if(rotc){

                          _rollOverTextColor = rotc;

                      }

                      var stc:uint = hostComponent.getStyle("selectedTextColor");

                      if(stc){

                          _selectedTextColor = stc;

                      }

                      var fc:Array = hostComponent.getStyle("fillColors");

                      if(fc){

                          fill1.color = fc[0];

                          fill2.color = fc[1];

                      }

                      var bc:uint     = hostComponent.getStyle("borderColor");

                      if(bc){

                          _borderColor = bc;

                      }

                      var color:uint = hostComponent.getStyle("color");

                      if(color){

                          labelDisplay.setStyle("color", color);

                      }

                     

                      var fl:uint     = hostComponent.getStyle("fillLow");

                      var fh:uint     = hostComponent.getStyle("fillHigh");

                      var fhs:Array     = hostComponent.getStyle("fillHighStrokes");

                      var fhds:uint     = hostComponent.getStyle("fillHighDownStrokes");

                     

                      if(fl)

                          _fillLow         = fl;

                      if(fh)

                          _fillHigh         = fh;

                      if(fhs){

                          _highlight1     = fhs[0];

                          _highlight2     = fhs[1];

                      }

                      if(fhds){

                          _highlightDown1    = fhds;

                          _highlightDown2    = fhds;

                      }

                     

                      border.visible = hostComponent.getStyle("borderVisible");

                      hlight = hostComponent.getStyle("skinHighlight");

                  } 

                 

                  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void

                  {

                      var cr:Number = getStyle("cornerRadius");

                     

                      if (cornerRadius != cr)

                      {

                          cornerRadius         = cr;

                          shadow.radiusX         = cornerRadius;

                          fill.radiusX         = cornerRadius;

                          lowlight.radiusX     = cornerRadius;

                          highlight.radiusX     = cornerRadius;

                          border.radiusX         = cornerRadius;

                      }

                     

                      if (highlightStroke) highlightStroke.radiusX     = cornerRadius;

                      if (hldownstroke1) hldownstroke1.radiusX         = cornerRadius;

                      if (hldownstroke2) hldownstroke2.radiusX         = cornerRadius; 

                      borderStroke.color         = _borderColor;

                      lowlight.visible         = hlight;

                      highlight.visible         = hlight;

                      if(highlightStroke) highlightStroke.visible = hlight;

                      if(hldownstroke1) hldownstroke1.visible     = hlight;

                      if(hldownstroke2) hldownstroke2.visible     = hlight;

                      super.updateDisplayList(unscaledWidth, unscaledHeight);

                  }

                 

                  private var cornerRadius:Number = 2;

              ]]>

          </fx:Script>

         

          <!-- states -->   

          <s:states>

              <s:State name="up" />

              <s:State name="over" />

              <s:State name="down" />

              <s:State name="disabled" />

          </s:states>

         

          <!-- drop shadow -->

          <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">

              <s:fill>

                  <s:LinearGradient rotation="90">

                      <s:GradientEntry color="0x000000" color.down="0xFFFFFF" alpha="0.01" alpha.down="0" />

                      <s:GradientEntry color="0x000000" color.down="0xFFFFFF" alpha="0.07" alpha.down="0.5" />

                  </s:LinearGradient>

              </s:fill>

          </s:Rect>

         

          <!-- layer 2: fill -->

          <!--- @private -->

          <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">

              <s:fill>

                  <s:LinearGradient rotation="90">

                      <s:GradientEntry id="fill1" color="0x7B82C3" alpha="0.85" alpha.down="0.6375"/>

                      <s:GradientEntry id="fill2" color="0x4378AA" alpha="0.85" alpha.down="0.6375"/>

                  </s:LinearGradient>

              </s:fill>

          </s:Rect>

         

          <!-- layer 3: fill lowlight -->

          <!--- @private -->

          <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">

              <s:fill>

                  <s:LinearGradient rotation="270">

                      <s:GradientEntry id="fillLow1" color="{_fillLow}" ratio="0.0" alpha="0.0627" />

                      <s:GradientEntry id="fillLow2" color="{_fillLow}" ratio="0.48" alpha="0.0099" />

                      <s:GradientEntry id="fillLow3" color="{_fillLow}" ratio="0.48001" alpha="0" />

                  </s:LinearGradient>

              </s:fill>

          </s:Rect>

         

          <!-- layer 4: fill highlight -->

          <!--- @private -->

          <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">

              <s:fill>

                  <s:LinearGradient rotation="90">

                      <s:GradientEntry id="fillHigh1" color="{_fillHigh}" ratio="0.0"     alpha="0.33" alpha.over="0.22" alpha.down="0.12"/>

                      <s:GradientEntry id="fillHigh2" color="{_fillHigh}" ratio="0.48"     alpha="0.33" alpha.over="0.22" alpha.down="0.12" />

                      <s:GradientEntry id="fillHigh3" color="{_fillHigh}" ratio="0.48001" alpha="0" />

                  </s:LinearGradient>

              </s:fill>

          </s:Rect>

          <!-- layer 5: highlight stroke (all states except down) -->

          <!--- @private -->

          <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="down">

              <s:stroke>

                  <s:LinearGradientStroke rotation="90" weight="1">

                      <s:GradientEntry id="highlight1" color="{_highlight1}" alpha.over="0.22" />

                      <s:GradientEntry id="highlight2" color="{_highlight2}" alpha.over="0.22" />

                  </s:LinearGradientStroke>

              </s:stroke>

          </s:Rect>

         

          <!-- layer 6: highlight stroke (down state only) -->

          <!--- @private -->

          <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">

              <s:stroke>

                  <s:LinearGradientStroke rotation="90" weight="1">

                      <s:GradientEntry color="{_highlightDown1}" alpha="0.25" ratio="0.0" />

                      <s:GradientEntry color="{_highlightDown1}" alpha="0.25" ratio="0.001" />

                      <s:GradientEntry color="{_highlightDown1}" alpha="0.07" ratio="0.0011" />

                      <s:GradientEntry color="{_highlightDown1}" alpha="0.07" ratio="0.965" />

                      <s:GradientEntry color="{_highlightDown1}" alpha="0.00" ratio="0.9651" />

                  </s:LinearGradientStroke>

              </s:stroke>

          </s:Rect>

          <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">

              <s:stroke>

                  <s:LinearGradientStroke rotation="90" weight="1">

                      <s:GradientEntry color="{_highlightDown2}" alpha="0.09" ratio="0.0" />

                      <s:GradientEntry color="{_highlightDown2}" alpha="0.00" ratio="0.0001" />

                  </s:LinearGradientStroke>

              </s:stroke>

          </s:Rect>

         

          <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->

          <!--- @private -->

          <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="100%" height="100%" radiusX="2">

              <s:stroke>

                  <s:SolidColorStroke id="borderStroke" color.over="0x00FF00" weight="1" alpha="1" alpha.down="0.6375" />

                  <!--<s:LinearGradientStroke rotation="90" weight="1">

                  <s:GradientEntry id="border1" alpha="0.5625" alpha.down="0.6375" />

                  <s:GradientEntry id="border2" alpha="0.75" alpha.down="0.85" />

                  </s:LinearGradientStroke>-->

              </s:stroke>

          </s:Rect>

         

          <!-- layer 8: text -->

          <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->

          <s:Label id="labelDisplay"

                   textAlign="center"

                   verticalAlign="middle"

                   maxDisplayedLines="1"

                   color.over="{_rollOverTextColor}"

                   color.down="{_selectedTextColor}"

                   horizontalCenter="0" verticalCenter="1"

                   left="10" right="10" top="2" bottom="2">

          </s:Label>

         

      </s:SparkSkin>

       

      Appreciate any help.