Scaling rounded corners in Flash

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.

If you enjoy this post, share it on Twitter, Facebook or LinkedIn.

With over two decades of deep front-end expertise, I offer comprehensive web consultancy and stack audits, alongside specialized workshops, training, and engaging public speaking to elevate your team's skills and optimize your digital presence. Contact me.