Invisible part of BitmapImage - apache-flex

Question

I have a SkinnableContainer, which contains s:BitmapImage. I need a part of the image (Rect) to be fully transparent. Just make a transparent cut-out, that would be easy to position.
The image in the background is width="300" height="200" and transparent area should be width="200" height="20" and right="0" bottom="50". I managed to achieve similar effect with BlendMode.OVERLAY, but I believe there must be a better way.
Any ideas, suggestions, please?

Answer 1

You could apply another object (like a UIMovieClip) to the image as a Mask. You could also manipulate the pixels of a Bitmap and set it as the source of the BitmapImage. This may or may not make sense depending on your specific requirements.

Answer 2

<?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"
creationComplete="onComplete(event)"
backgroundColor="0xEEEEEE">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.graphics.ImageSnapshot;
import mx.skins.RectangularBorder;
protected function onComplete(event:Event):void
{
var bW:int = 300;
var bH:int = 200;
var X:int = 0;
var Y:int = 150;
var W:int = 200;
var H:int = 20;
var topRect:Rectangle = new Rectangle(0,0,bW,Y);
var righRect:Rectangle = new Rectangle(W,0,bW-W,bH);
var bottomRect:Rectangle = new Rectangle(0,Y+H,bW,bH-(Y+H));
var targetBitmapData:BitmapData = ImageSnapshot.captureBitmapData(original);
var newBitmapData:BitmapData = new BitmapData(bW,bH,true,0x00000000);
newBitmapData.copyPixels(targetBitmapData, topRect, new Point(0, 0),null, null, true);
newBitmapData.copyPixels(targetBitmapData, righRect, new Point(W, 0),null, null, true);
newBitmapData.copyPixels(targetBitmapData, bottomRect, new Point(0,Y+H),null, null, true);
modified.source = new Bitmap(newBitmapData);
}
]]>
</fx:Script>
<s:VGroup gap="10" left="10" top="10">
<s:Group id="original">
<s:Rect width="300" height="200">
<s:fill>
<s:SolidColor/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0xFF0000"/>
</s:stroke>
</s:Rect>
</s:Group>
<s:Group>
<mx:Image width="300" height="200" id="modified" />
<s:Rect top="0" left="0" right="0" bottom="0">
<s:stroke>
<s:SolidColorStroke color="0xFF0000"/>
</s:stroke>
</s:Rect>
</s:Group>
</s:VGroup>
</s:Application>
An example for your particular case, maybe you'll extend this.