9-slice scaling with embedded image in Flex4


 

9-slice scaling with embedded image in Flex4

You can use the 9-slice scaling with embedded images.

You can use the 9-slice scaling with embedded images.

9-slice scaling with embedded image in Flex4:

You can use the 9-slice scaling with embedded images. You can display the image in horizontal and vertical lines. The nine regions are defined by two horizontal and two vertical lines running through the image. You will use the following properties for making a 9-slice scaling.

1. scaleGridTop: It is the distance in pixels of the upper dividing line from the top of the image.
2. scaleGridBottom: It is the distance in pixels of the lower dividing line from the top of the image.
3. scaleGridLeft: It is the distance in pixels of the left dividing line from the left side of the image.
4. scaleGridRight: It is the distance in pixels of the right dividing line from the left side of the image.

Example:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600">

<fx:Script>

<![CDATA[

[Embed(source="C:/work/bikrant/image/green.png",

scaleGridTop="25", scaleGridBottom="125",

scaleGridLeft="25", scaleGridRight="125")]

[Bindable]

public var scaling:Class;

]]>

</fx:Script>

<s:Panel title="9-slices scaling with embedded image Example"

chromeColor="#000000"

color="#CCCCCC"

width="311" height="254">

<mx:Image source="{scaling}" x="76" y="45"/>

</s:Panel>

</s:Application>

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Ads