5 Replies Latest reply on Feb 24, 2011 8:38 AM by fedster72

    Spark skinning: strange behavior?

    fedster72 Level 1

      I'm trying to add a simple symbol (a plus!) to a spark button that has a circular skin. My approach: MXML code inside the button skin (the button skin itself is full of s:Rect already so seems like a pretty simple choice). Now to the weirdness: If I change the size of the button (using the HSlider in the example below) the plus jiggles inside the button. What I mean by jiggle: it seems like the relative position of the vertical and the horizontal part of the + vary - ever so slightly - with the overall size.

      Question: does anyone know why this is happening? Am I doing something wrong (see code below), is this just the wrong approach (e.g. never do MXML graphics inside a skin for some reason that I don't comprehend), or is this a known issue (maybe a refresh issues?)?

      Would love to hear your thoughts!

      thank you all

       

      f

       

      ------------------------

       

      the app

       

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

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

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

         xmlns:mx="library://ns.adobe.com/flex/mx"

         width="600" height="400">

      <s:VGroup>

      <s:HSlider minimum="0" maximum="100" value="50" id="hsSize"/>

      </s:VGroup>

       

      <s:Button verticalCenter="0" horizontalCenter="0" width="{hsSize.value}" height="{hsSize.value}" skinClass="skinRotation.skin"/>

      </s:Application>

      the 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"
                   xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabled="0.5">
         
          <!-- host component -->
          <fx:Metadata>
              <![CDATA[
              [HostComponent("spark.components.Button")]
              ]]>
          </fx:Metadata>
         
          <fx:Script fb:purpose="styling">
              <![CDATA[        
                  static private const exclusions:Array = ["labelDisplay"];
                  override public function get colorizeExclusions():Array {return exclusions;}
                  override protected function initializationComplete():void
                  {
                      useChromeColor = true;
                      super.initializationComplete();
                  } 
                 
              ]]>       
          </fx:Script>
         
          <!-- states -->
          <s:states>
              <s:State name="up" />
              <s:State name="over" />
              <s:State name="down" />
              <s:State name="disabled" />
          </s:states>
         
          <!-- layer 2: fill -->
          <!--- @private -->
      <s:Ellipse id="fill" left="1" right="1" top="1" bottom="1">
              <s:fill>
                 <s:SolidColor color="0x000000"/>
              </s:fill>
          </s:Ellipse>
      <s:Rect  horizontalCenter="0" verticalCenter="0" height="{fill.width * 0.6}" width="{0.14 * fill.width}">
      <s:stroke>
      <s:SolidColorStroke color="0x000000"/>
      </s:stroke>
      <s:fill>
      <s:SolidColor color="0xff0000"/>
      </s:fill>
      </s:Rect>
      <s:Rect  horizontalCenter="0" verticalCenter="0" height="{fill.width * 0.14}" width="{0.6 * fill.width}">
      <s:stroke>
      <s:SolidColorStroke color="0x000000"/>
      </s:stroke>
      <s:fill>
      <s:SolidColor color="0xff0000"/>
      </s:fill>
      </s:Rect>
      </s:SparkSkin>

        • 1. Re: Spark skinning: strange behavior?
          Wrataxas Level 2

          There is truncating or rounding happening in both the horizontal/vertical position and the height and width, so I would guess you are seeing an interaction between the two types of truncation/rounding.  You might try rounding the height and width yourself by adding .5 to each of them and possibly converting to an integer as well afterwards.  Just a guess.

          • 2. Re: Spark skinning: strange behavior?
            fedster72 Level 1

            Interesting - that sounds plausible and yet I'm not sure I fully get where the rounding error actually happens and why. Since verticalCenter and HorizontalCenter are both set to 0 the position should not be an issue, right? If that's the case, height and width would appear to be the culprits. So, I tried to set the height and width of the second line to the width and height of the first - this way they should be the same (albeit reversed) but that doesn't seem to make any difference. Yet, if I set them to a fixed number all seems well (minus the fact that nothing scales ). Where / how would you manage the truncation / rounding directly?

             

            anyway, thanks for the help!

             

            f

            • 3. Re: Spark skinning: strange behavior?
              Wrataxas Level 2

              How about trying having the width and the height of the cross pieces always be even?  Something like:

               

              {int((fill.width * 0.6 + 1)/2) * 2}

               

              The +1 is for rounding, you truncate after dividing by 2 to get an integer, then when you multiply by 2 you will always have an even number.

              1 person found this helpful
              • 4. Re: Spark skinning: strange behavior?
                dave cragg Level 2

                Try setting the stepSize on the slider to 4. That should reduce the jiggle effect.

                 

                Not sure if it helps, but the following way of placing the graphic in the skin means you don't need to use those binding tags. The group within the graphic will automatically scale. (I use 48 as an arbitrary size for the group. But it will always display relative to the size of the button. You may need to adjust the 30 and 8 values to match your original.)

                 

                <s:Graphic left="1" right="1" top="1" bottom="1>

                <s:Group width="48" height="48" >

                <s:Rect  horizontalCenter="0" verticalCenter="0" height="30" width="8">

                <s:stroke>

                <s:SolidColorStroke color="0x000000"/>

                </s:stroke>

                <s:fill>

                <s:SolidColor color="0xff0000"/>

                </s:fill>

                </s:Rect>

                <s:Rect  horizontalCenter="0" verticalCenter="0" height="8" width="30">

                <s:stroke>

                <s:SolidColorStroke color="0x000000"/>

                </s:stroke>

                <s:fill>

                <s:SolidColor color="0xff0000"/>

                </s:fill>

                </s:Rect>

                </s:Group>

                 

                </s:Graphic>

                • 5. Re: Spark skinning: strange behavior?
                  fedster72 Level 1

                  Thank you both for your great advice!

                   

                  f