0

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?

Scroll Thumb enter image description here

<?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>
ketan
  • 19,129
  • 42
  • 60
  • 98
David
  • 703
  • 1
  • 15
  • 31

2 Answers2

1

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).

David
  • 703
  • 1
  • 15
  • 31
0

These values refer to scale9 slicing. Left is the number of pixels in from the left, top is the number of pixels from the top, right is the number of pixels starting at the right moving in, and bottom the number of pixels up from the bottom moving up.

This is used if you're trying to scale something like a rounded box and want to maintain the corner radius. Here is are some links with detailed description of scale9:

http://asgamer.com/2009/using-9-slice-scaling-to-retain-shape-while-resizing

For your scrollbar thumb, you might take a look at this site for some ideas on how to work with it.

http://dgrigg.com/blog/2010/07/06/flex-spark-list-with-custom-scroll-bar-and-itemrenderer/

wovencharlie
  • 112
  • 1
  • 5
  • Thanks. I'm familiar with the grid in Flash CS (tho am using Flash Builder now). I understand about the corners -- thanks for the link. But if you look at my thumb, it isn't about the corners -- it's about the top and bottom 'arrow' parts. In the second link, why does he set these: scaleGridLeft='2', scaleGridTop='5', scaleGridRight='12', scaleGridBottom='275'? Why on earth, for a symmetrical thumb, would the top be 5 and the bottom 275? And his thumb isn't about the corners either, is it? – David Jun 16 '12 at 11:00
  • What size is your "assets/scrollThumb.png"? It looks like it is less than 11 pixels wide, this would be causing at least part of the issue. Try with these settings: scaleGridLeft='0', scaleGridTop='10', scaleGridRight='8', scaleGridBottom='265' – wovencharlie Jun 16 '12 at 14:50