Flex: Problems using scale9Grid with Image

Question

I'm trying to create an image component that can be scaled using 9-slice scaling.

I'm 100% positive the grid rectangle is inside the image's bounds. However, the scale9Grid property seems not to affect anything.

I have tried many different things. Here is my last attempt where I try to put the image in a canvas. Any idea what I'm doing wrong?

mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" >

<mx:Script>
 <![CDATA[
  import mx.core.BitmapAsset;
  import mx.controls.Image;

  [Embed(source="assets/image.png")]
  private var barImageClass:Class;
  private var barImage:Image;

  private function init():void
  {
   barImage = new Image();
   barImage.addChild( new Bitmap( (new barImageClass() as BitmapAsset).bitmapData ) );

   barImage.scale9Grid = new Rectangle( 120, 4, 2, 2 );

   barImage.scaleX = 2;

   addChild( barImage );
  }
 ]]>
</mx:Script>

Answer 1

I believe you need to apply the scale9Grid to the bitmap, instead of to the sprite/movieclip it's inside of.

Answer 2

See this adobe doc. I think it will solve your problem. Cheers