Menu:

Sponsor

Discover Master of Alchemy, our first iPad/iPhone and iPod touch game!

Follow Me

 

Forum's topics

Latest Files

Archives

Top Rated

Categories

Photo Gallery


Working with 9-slice scaling

Description

MovieClip.scale9Grid
You can use 9-slice scaling to specify component-style scaling for movie clips. 9-slice scaling lets you create movie clip symbols that scale appropriately for use as user interface components, as opposed to the type of scaling typically applied to graphics and design elements.

With the previous flash versions you had an unwanted behavior when you scaled a symbol with rounded corners:

Original symbol ( without scale9 enabled )

Resized symbol

 

With the new Flash 8 you can define a scale9Grid in order to mantain the aspect of the corners and scale only the center part of the symbol.

Below here you can see a practical example of the scale9 working in flash 8:

As you can see the rounded corners are not scaled as the rest of the symbol, this because i edited the scale9 grid directly in the library.
The text at the bottom of the movie tells the limits of the scale9 grid applied to the movieclip (left position, upper position, widht and height of the center rectangle)

When a scale9Grid property is defined for a movieclip, the movie clip is divided into a grid with nine regions, based on the scale9Grid rectangle, which defines the center region of the grid

  • The area in the upper-left corner outside the rectangle
  • The area above the rectangle
  • The area in the upper-right corner outside the rectangle
  • The area to the left of the rectangle
  • The area to the right of the rectangle
  • The area in the lower-left corner outside the rectangle
  • The area below the rectangle
  • The area in the lower-right corner outside the rectangle

Also remember that even if a scale9Grid property is set, all text and child movie clips scale normally, regardless of which regions of the scale9 grid they are located in.


There are 2 ways scale9 can be activated in Flash8. From the .fla library and from within ActionScript in runtime.

 

1. Define the scale9 grid in library

  1. Create a new shape (a rectangle) and convert it into a MovieClip.
  2. From the library select on symbol properties.
  3. Once the property panel has been opened activate the checkbox at the bottom like in this image:

  4. Now, the next time you will edit that symbol you will see 4 new guides into the stage (see the figure below).
    Move those guides in order to apply the scale9Grid to different portions of your symbol.
    How the scale9 grid is shown in the edit mode
scale9 grid can only be applied to movieclip instance, since scale9Grid is a property of movieclip class


2. Define the scale9 grid in ActionScript

The second way you can define a scale9 grid is using actionscript with the scale9Grid movieclip property:

  1. Create a new document.
  2. Select the rectangle design tool (with 10 of rounded rectangle radius value)
  3. Draw a rectangle on the stage of 115x80 pixels
  4. convert the shape into movieclip and name the movieclip on the stage "my_mc"
  5. Apply this code in the first keyframe:
// import the Rectangle Class
import flash.geom.Rectangle;

// create and define the rectangle limits
var grid:Rectangle = new Rectangle(10, 10, 85, 60);
// apply the scale9Grid to the movieclip "my_mc"
my_mc.scale9Grid = grid;

// trace the scale9Grid property
trace(my_mc.scale9Grid) // (x=20, y=7, w=80, h=42)

// now scale the movieclip
function onMouseMove() {
	my_mc._width = _xmouse;
	my_mc._height = _ymouse;
}

 

First I've imported the Rectangle class from flash.geom package,
then i've created a new rectangle specifying the limits of the 9 grids lines.
Using scale9Grid i've assigned the rectangle instance to the movieclip scale9Grid property.

To disable the scale9Grid you must set the scale9Grid property to undefined:
my_mc.scale9Grid = undefined;