Scaling rounded corners in Flash

Blog/ActionScript · 2010-12-11 · clip grid clip slicing height width void function rectangle resizing

I'm absolutely sure that you've already met this problem. You know, these nice rounded buttons that are provided by the designer. They are really cool, but sometimes the label of the button is so long that you have to resize/scale the image. ActionScript3 provides simple way to solve this issue.

There is a property of MovieClip class called scale9Grid. It accepts a Rectangle object and if you pass one, your clip will be sliced to 9 pieces. [1]If you scale or resize the MovieClip only piece 5 will be transformed. In other words you are keeping the rounded corners unchanged. The original:[2]Resizing without the grid:[3]Resizing with the grid:[4]The code of the example:

function set9Grid(): void {
    var grid: Rectangle = new Rectangle(clip.slicing.x, clip.slicing.y, clip.slicing.width, clip.slicing.height);
    clip.scale9Grid = grid;
  }
  
  function startLoop(): void {
    addEventListener(Event.ENTER_FRAME, loop);
  }
  
  function loop(e: Event): void {
    clip.width = mouseX - clip.x;
    clip.height = mouseY - clip.y;
  }
  set9Grid();
  startLoop();

I used a child of my clip called "slicing". It gave me the exact x,y,width and height of the grid.Download the example source files from here.