What do the ScaleGrid properties in Spark Skins do?

I've been searching for what attributes like scaleGridLeft and scaleGridRight actually mean, but cannot find a coherent explanation anywhere. One description said that if you have an image, what you're trying to do is to define a rectangle that will be UNaffected by scaling, within that image. The below code is for a custom skin for a Vertical Scroll Bar Thumb. I've set 'right' to -1 because the thumb otherwise leaves too big of a gap on its right side when it sits in the track.

If the scrollThumb.png is 10x331 and the track is 16x521, how do I make it so that the thumb sits correctly centered in the track, and scales as necessary?

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


<!--- The default skin class for the Spark Button component.

   @see spark.components.Button

  @langversion 3.0
  @playerversion Flash 10
  @playerversion AIR 1.5
  @productversion Flex 4
-->

<fx:Metadata>
    <![CDATA[ 
    /** 
     * @copy spark.skins.spark.ApplicationSkin#hostComponent
     */
    [HostComponent("spark.components.Button")]
    ]]>
</fx:Metadata>

<!-- states -->
<s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
</s:states>


<s:BitmapImage source="@Embed('assets/scrollThumb.png', scaleGridLeft='2', scaleGridTop='20', scaleGridRight='11', scaleGridBottom='50')" 
               left="0"  top="0" bottom="0" right="-1" />
</s:SparkButtonSkin>

The links provided by @wovencharlie are helpful, but the answer is not correct.

The left, right, top, and bottom values are all calculated in relation to the registration point of whatever you're trying to scale. This means the upper left corner is (0,0). What you're defining with these values is the rectangle within which you don't care if it scales. Put another way, what will not scale is what is outside that rectangle.

If I set scaleGridLeft='2' this means that everything from 0 to 2 will not scale. If I set scaleGridTop='5', this means that everything that is visually above the y value of 5 (relative to that initial 0,0 registration point, so anything with a y values of less than 5) will not scale. If I set scaleGridRight='12', this doesn't mean the number of pixels starting at the right moving in. It's setting the number of pixels (12) from the initial registration point, creating the imaginary vertical line to the right of which the asset will not scale. Since my thumb asset is only 10 pixels wide, 12 is not a good value and leads to odd results (it seems to want to redraw a vertical mirror image of the thumb, extending outside the track). 9 would be a legal value.

This is why if you enter scaleGridLeft number that is greater than a scaleGridRight number, Flash Builder will tell you that these are illegal values. They're impossible -- you can't have a left value with a greater number than a right value, since they're both calculated relative to that initial (0,0).

The same is true for scaleGridBottom. It isn't being calculated up from the bottom; it's being calculated from 0,0. Again, you cannot have a bottom value that is less than a top value, so Flash Builder will complain if you try.

If you set scaleGridTop to (say) 20 and scaleGridBottom to 30, you aren't saying "Don't scale the top 20 and the bottom 30." You're saying "Don't scale the top 20 and don't scale everything below 30" -- even if your asset is 200 or 300 pixels high. In other words, all you're allowing to scale is 10 pixels.

I believe you may get an error since this is less than the allowable size of the component (though not sure about that part).