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"


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









                  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;


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


                          _rollOverTextColor = rotc;


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


                          _selectedTextColor = stc;


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


                          fill1.color = fc[0];

                          fill2.color = fc[1];


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


                          _borderColor = bc;


                      var color:uint = hostComponent.getStyle("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");



                          _fillLow         = fl;


                          _fillHigh         = fh;


                          _highlight1     = fhs[0];

                          _highlight2     = fhs[1];



                          _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;




          <!-- states -->   


              <s:State name="up" />

              <s:State name="over" />

              <s:State name="down" />

              <s:State name="disabled" />



          <!-- drop shadow -->

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


                  <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" />





          <!-- layer 2: fill -->

          <!--- @private -->

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


                  <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"/>





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

          <!--- @private -->

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


                  <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" />





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

          <!--- @private -->

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


                  <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" />




          <!-- 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: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" />





          <!-- 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: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:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">


                  <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" />





          <!-- 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: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" />





          <!-- layer 8: text -->

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

          <s:Label id="labelDisplay"






                   horizontalCenter="0" verticalCenter="1"

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





      Appreciate any help.