1 Reply Latest reply on Mar 27, 2011 6:32 PM by Shongrunden

    Button Skin behaves differently when app is in another state

    flexillu10 Level 1

      I'm using a button skin i found at code dependent.

       

      It works fine in the start state of my air app. However when my air app is changed to another state the button skin moves to the left left when it is is in the down state.

       

      here's the button skin, i can't understand why it would behave differently just because the application state is changed. Any ideas?

       

      Button skin

       

      <?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="21" minHeight="21"
            alpha.disabled="0.5">
      
          <!-- host component -->
          <fx:Metadata>
              <![CDATA[ 
              /** 
               * @copy spark.skins.default.ApplicationSkin#hostComponent
               */
              [HostComponent("spark.components.Button")]
              ]]>
          </fx:Metadata>
          
          <fx:Script>
          <![CDATA[         
                  /* 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 = ["labelElement"];
                      
                  override public function get colorizeExclusions():Array {return exclusions;}
              ]]>        
          </fx:Script>
          
          <!-- states -->
          <s:states>
              <s:State name="up" />
              <s:State name="over" />
              <s:State name="down" />
              <s:State name="disabled" />
          </s:states>
          
          
          <fx:Declarations>
              <s:Scale id="scaler" target="{this}" disableLayout="true"/>
              <s:Move3D id="overMover" targets="{[rect, labelDisplay]}" duration="150"/>
              <s:Move3D id="downMover" targets="{[rect, labelDisplay]}" duration="100"  easer="{fastIn}"/>
              <s:Power easeInFraction="0" id="fastIn" exponent="3"/>
          </fx:Declarations>
          <s:transitions>
              <s:Transition fromState="up" toState="over" effect="{overMover}" autoReverse="true"/>
              <s:Transition fromState="over" toState="up" effect="{overMover}" autoReverse="true"/>
              <s:Transition toState="down" effect="{downMover}"/>
              <s:Transition fromState="down" effect="{downMover}"/>
          </s:transitions>
      
          <s:Rect id="rect" left="0" right="0" top="0" bottom="0" width="200" height="76" radiusX="15" radiusY="15"
              z.over="-30" z.down="-50">
              <s:fill>            
                  <s:LinearGradient rotation="90">
                      <s:GradientEntry id="fillEntry0" color="0xFFFFFF" 
                                     color.over="0xeBeDeD" 
                                     color.down="0xCCCCCC" 
                                     alpha="0.85" />
                      <s:GradientEntry id="fillEntry1" color="0xe8e8e8" 
                                     color.over="0xdFd0d1" 
                                     color.down="0x929496" 
                                     alpha="0.85" />
                  </s:LinearGradient>
              </s:fill>
              <s:stroke>
                  <s:LinearGradientStroke rotation="90" weight="6">
                      <s:GradientEntry id="borderEntry0" 
                                     color="0x000000" 
                                     alpha="0.5625"
                                     alpha.down="0.6375" />
                      <s:GradientEntry id="borderEntry1"
                                     color="0x000000" 
                                     alpha="0.75" 
                                     alpha.down="0.85" />
                  </s:LinearGradientStroke>
              </s:stroke>
          </s:Rect>
          <!-- layer 8: text -->
          <s:Label id="labelDisplay"
                   textAlign="center"
                   verticalAlign="middle"
                   fontWeight="bold"
                   fontSize="32"
                   z.over="-30" z.down="-50"
                   horizontalCenter="0" verticalCenter="1"
                   left="10" right="10" top="2" bottom="2">
          </s:Label>
          
      </s:SparkSkin>
      
        • 1. Re: Button Skin behaves differently when app is in another state
          Shongrunden Adobe Employee

          I can't seem to reproduce what you are seeing with this sample application:

           

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

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

           

              <s:states>

                  <s:State name="state1" />

                  <s:State name="state2" />

              </s:states>

           

              <s:controlBarContent>

                  <s:Button label="change state" click="currentState=currentState=='state1'?'state2':'state1'" />

              </s:controlBarContent>

           

              <s:Button x="50" y="50" label.state1="state1" label.state2="state2" skinClass="CustomButtonSkin" />

           

          </s:Application>

           

          Can you provide a similar sample application that demonstrates the issue?