Scale9Grid User Guide

Scale9Grid in Flash and Scaleform

Scale9Grid is used in Flash® to specify component-style scaling for movie clips. Scale9Grid allows developers to create movie clip symbols and user interface components that resize intelligently to make use of the provided screen real estate, instead of scaling linearly which is commonly done with graphics and design elements. In Flash terminology, Scale9Grid is also known as 9-slice scaling. When 9-slice scaling is enabled, the movie clip is conceptually divided into nine sections with a grid-like overlay, such that each one of the nine areas is scaled independently. To maintain the visual integrity of the movie clip, corners are not scaled, while the remaining areas of the image are scaled (as opposed to being stretched). In the Flash Studio, 9-slice scaling is available as a checkbox in the movie clip “Symbol properties” dialog box. In addition, MovieClip.scale9Grid and Button.scale9Grid properties are also exposed in ActionScript to give programmatic control over piecewise scaling. For more information on the use of Scale9Grid in Flash, please refer to Flash Support Overview.

The Adobe Flash player has certain restrictions on Scale9Grid that make it relatively difficult to use in many practical situations. For example, the standard Flash player does not support images slicing and fails to process Scale9Grid with free rotation or other arbitrary transformations. Scaleform supports Scale9Grid in a more consistent manner, while keeping good compatibility with Flash. The Scale9Grid features of both Adobe Flash and Scaleform are briefly described in the following table.

Scale9Grid Features Adobe Flash Player Scaleform
Transformations X/Y Scale only Arbitrary transformations
Bitmaps Average scaling based on the bounding box Automatic tiling according to the Scale9Grid
Gradients and image fill Average scaling based on the bounding box Average scaling based on the bounding box
Sub-symbols (nested movie clips, buttons, graphics) Not supported Supported
Nested Scale9Grids Not supported Not supported
Transformations of the enclosing symbol Supported Supported
Text Scaled as usual Scaled as usual

Scaleform preserves the backward compatibility with Flash, which means that the Scale9Grid functionality that works in Flash will behave the same way in Scaleform. However, the features that are not supported in Flash may behave differently, but in a more practical manner. For example, support for sub-symbols (nested movie clips) is vitally important for creating interactively resizable windows. The differences between the two player implementations are covered in detail throughout this document.

Note: Download the Scale9Grid samples from the Scaleform Documentation Archive page.