Flex 2 Developer's Guide > Flex Programming Topics > Embedding Assets > Embedding asset types > Using scale-9 formatting with embedded images

Using scale-9 formatting with embedded images

Flex supports scale-9 formatting of embedded images. The scale-9 formatting feature lets you define nine sections of an image that scale independently. The nine regions are defined by two horizontal lines and two vertical lines running through the image, which form the inside edges of a 3 by 3 grid. For images with borders or fancy corners, scale-9 formatting provides more flexibility than full-graphic scaling.

The following example show an image, and the same image with the regions defined by the scale-9 borders:

When you scale an embedded image that uses scale-9 formatting, all text and gradients are scaled normally. However, for other types of objects the following rules apply:

• Content in the center region is scaled normally.
• Content in the corners is not scaled.
• Content in the top and bottom regions is scaled only horizontally. Content in the left and right regions is scaled only vertically.
• All fills (including bitmaps, video, and gradients) are stretched to fit their shapes.

If you rotate the image, all subsequent scaling is normal, as if you did not define any scale-9 formatting.

To use scale-9 formatting, define the following four parameters within your embed statement: scaleGridTop, scaleGridBottom, scaleGridLeft, and scaleGridRight. For more information on these parameters, see Embed parameters.

An embedded SWF file may already contain scale-9 information specified by using Flash Professional. In that case, the SWF file ignores any scale-9 parameters that you specify in the embed statement.

The following example creates a Flex logo with border that uses scale-9 formatting to maintain a set border, regardless of how the image itself is resized:

<?xml version="1.0"?>
<!-- embed\Embed9slice.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="1200" height="600"> 

    <mx:Script>
        <![CDATA[
            [Embed(source="slice_9_grid.gif", 
                scaleGridTop="25", scaleGridBottom="125", 
                scaleGridLeft="25", scaleGridRight="125")]
            [Bindable]
            public var imgCls:Class;            
        ]]>
    </mx:Script>
    
    <mx:HBox>
        <mx:Image source="{imgCls}"/>
        <mx:Image source="{imgCls}" width="300" height="300"/>
        <mx:Image source="{imgCls}" width="450" height="450"/>
    </mx:HBox>
</mx:Application>

The original image is 30 by 30 pixels. The preceding code produces a resizable image that maintains a 5-pixel border:

If you had omitted the scale-9 formatting, the scaled image would have appeared exactly like the unscaled image, as the following image shows:

In this example, you define a class named imgCls that represents the embedded image. If the image is a SWF file that uses scale-9 formatting, Flex defines imgCls as a subclass of the mx.core.SpriteAsset class, which is a subclass of the flash.display.Sprite class. Therefore, you can use all of the methods and properties of the SpriteAsset class to manipulate the object.

Flex 2.01