9-scale resizing

If You want to create component properly scalable remember about resizing shapes. Problem occurs during resizing for example rectangles. Border of 2 pixels thick becomes really big. Because object is resized as-is proportionally with content and graphic.
Here is the proof:

To avoid this problem You should use 9-scale. This property (officialy named scale9Grid) is avaiable in Movieclips, Sprites and so on. Here is example of code how to use it:

var background3 = new Sprite();
background3.graphics.lineStyle(2, 0xd61e31);
background3.graphics.beginFill(0xFFFFFF, 1);
background3.graphics.drawRect(0, 0, 40, 40);
background3.graphics.endFill();


//here comes 9-scaling
var grid:Rectangle = new Rectangle(5, 5, 30, 30);
background3.scale9Grid = grid;

Rectangle that is created above creates 9 regions in our object (which also is rectangle shaped). Picture below shows regions. Points A(5,5) and B(30,30) shows coordinates of lines which are regions borders.

Those 9 regions can be grouped to 4 types. Each type is scaled in different way:

• corners - four corners are not scaled. They are constant
• long vertical sides - middle-left region and middle-right regions are scaled only in Y axis
• long horizontal sides - center-top and center-bottom regions are scaled only in X axis
• middle-center - this region is scaled in both directions

Here is description from API