Tutorials

April 2, 2009

Using 9-Slice Scaling to Retain Shape while Resizing

More articles by »
Written by: Par
Tags: , , , , , ,
s9-tn

Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg ThisSubmit to reddit

So what is 9-Slice Scaling? Well, it’s a way of dividing a MovieClip up into 9 seperate pieces in order to maintain the shape of the corners and repeat the sides. This will be a quick tutorial that will explain to you exactly how it works. I may refer to it from time to time as a scale9 grid. I’ve heard it called each so just remember that a 9-slice scaling MovieClip is the same a scale9 grid MovieClip.

The Setup

To enable 9-Slice Scaling you simply need to select the checkbox when creating a new MovieClip symbol. Seriously, it’s that simple. Just open Flash and press CTRL+F8 to create a New Symbol. Then just make sure you select the options as the picture below.

Simply create a MovieClip and make sure you enable 9-slice scaling.

Simply create a MovieClip and make sure you enable 9-slice scaling.

Now press OK and you’re ready to go. Now the difference between a regular MovieClip and this is obvious. We now have a grid that creates 9 boxes. You can move these grid lines around by using the Selection Tool (V).  But before you start playing with it let me explain to you how it works.

Our Scale9 Grid.

Our Scale9 Grid.

Let me explain.

  • Blue - this is the main purpose of the 9-Slice Grid. Whatever is in the blue will not scale any when the the whole MovieClip scales. This will insure that our corners don’t resize while the rest of the object resizes. If the MovieClip gets larger or smaller, the blue corner areas will not.
  • Green – these boxes resize but only in one direction. Green boxes on the left and right will resize vertically but not horizontally. Green boxes on the top and bottom will resize horizontally but not vertically. This maintains a nice frame around the outside edge of the MovieClip.
  • Red – resizes like a normal MovieClip both vertically and horizontally.

Alright, now you know how to use a 9-Slice Grid. Let’s draw a box with rounded corners in it.Grab the Rectangle Tool (R) set the Rectangle Corner Radius to 30. and draw a small box. Set it up so the corners are in the blue box area as the example below.

Notice the rounded corners are completely within the corner sections of the scale 9 grid.

Notice the rounded corners are completely within the corner sections of the scale 9 grid.

The Example

Alright so it’s ready to use.  Simply drop your MovieClip on the stage and scale it and you’ll see that the corners do not change.
Here’s an example of the corners of a scale 9 grid and a regular movieclip during scaling.

Regular MovieClip

9-Slice Scaling MovieClip

Take a good look at the corners to see the difference.

Similar Posts:


Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg ThisSubmit to reddit


About the Author

Par
Hey! Don't be surprised, I'm a flash developer. While Flash is definitely one of my favorite languages to develop in, most of all I just like making games. If you want to see the games I've developed so far head over to my website, DigitallyBold, in the link below. If you want to know more about what I'm working on now and in the future be sure to follow me on twitter.




10 Comments


  1. cool dude it’s very usable!!


  2. Crash OVerride

    it works great.. though I wanted the rectangle to be a mask and whenever I turn it into a mask, it goes back to the same old distorted resize.
    is there any way to make it work while using it as a mask?


  3. Par

    Crash… I’m not sure I’ve never tried it. If I find something on it I’ll let you know.


  4. Bob

    This is quite a up-to-date info. I think I’ll share it on Twitter.


  5. Dinesh Vishwakarma

    Thanks a lot. I was searching for that and have to use in my project, So this is really very helpful for me and i just solve the problem .


  6. Alex

    Thanx a lot, man!


  7. Raj

    Good explanation keep it up……


  8. Tristan

    so.. how do you scale it


  9. Tristan

    oh sorry, stupid question.. lol. Just free transforming it XD


  10. Pooja

    Good one… very helpful



Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">


Advertisement