as3 9-slice scaling

as3 9-slice scaling

9-slice scaling

The 9-slice scaling feature, introduced in Fireworks CS3, allows you to scale vector and bitmap symbols up or down without distorting their geometry. The symbol can be scaled using 3 or 9 regions, depending on the shape of the symbol.

The following figure shows how images are scaled using the 9-slice scaling feature.

The 9-slice scaling guides are enabled in the Symbol Editor and Button Editor for all symbols by default.

To scale a symbol using 9-slice scaling:

1. Double click the symbol or button to open the Symbol Editor or Button Editor.

2. Edit the 9-slice scaling guides as follows:

a. Enable or disable the guides by selecting or deselecting the Enable 9-slice scaling guides check box.

b. Move the guides and place them appropriately on the button or symbol. Make sure that the parts of the symbol that you don’t want to be distorted when scaling (for example the corners) are outside the guides, as represented by the yellow areas in the graphic above.

The 9-slice scaling guides are positioned on this button so that the corners will not be distorted when the button size is changed.
c. (Optional) Lock the guides by checking the Lock 9-slice scaling guides check box to keep them from being moved accidentally.

3. When you have finished placing the 9-slice scaling guides, click Done in the symbol or button editor.

4. Resize the symbol as needed by using the scale tool.

The button is scaled without distorting the shape of the corners.

这里由一个比较好的学习demo：  http://www.bytearray.org/?p=118

</div >
<div >import org .bytearray .display .ScaleBitmap ;

// Add Bitmap ，没有使用9-scale
var myBitmap : Bitmap= new  Bitmap ( new bitmapAsset (0 ,0 ) ) ;
myBitmap . x= 260 ;
myBitmap . y= 140 ;
myBitmap . width= 200 ;
myBitmap . height= 64 ;
addChild (myBitmap ) ;

// Add ScaleBitmap，使用了9-scale
var myScaleBitmap :ScaleBitmap= new ScaleBitmap ( new bitmapAsset (0 ,0 ) ) ;
myScaleBitmap . x= 260 ;
myScaleBitmap . y= 280 ;
myScaleBitmap . scale9Grid= new  Rectangle (20 ,20 ,80 ,80 ) ;
myScaleBitmap .setSize (200 ,64 ) ;
addChild (myScaleBitmap ) ;</div >
<div >