PDA

View Full Version : Creating a mask


charithao
07-04-2008, 11:54 AM
Hi,
I want to create a mask programatically with different areas having different alpha values. Is this possible to do. I want to add the mask to the application. Could anyone please guide me with a sample a code.

Thanks.

Sly_cardinal
07-04-2008, 01:37 PM
It's fairly easy - you should be able to work out what's going on in the sample code below.

You don't have to use a gradient to mask things - you could use a bitmap image that has been loaded/embedded into your application.

Just remember to set a valid image source property for this to work:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="creationCompleteHandler(event)"
layout="absolute">

<mx:Script>
<![CDATA[

import flash.geom.Matrix;
import flash.display.Graphics;
import mx.events.FlexEvent;
import flash.display.GradientType;

private function creationCompleteHandler(event:FlexEvent):void
{
drawGradient();
maskImage.mask = maskCanvas;
}

private function drawGradient():void
{
var matrix:Matrix = new Matrix();

// Adjusting these values will change how the gradient is drawn:
matrix.createGradientBox(200, 200, 0, 300, 50);

var colors:Array = [0xFF0000, 0x0000FF];
var alphas:Array = [0, 1];
var ratios:Array = [0, 255];

var g:Graphics = maskCanvas.graphics;
g.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
g.drawRect(0, 0, 500, 500);
g.endFill();
}
]]>
</mx:Script>

<!-- Both of the display objects *must* have cachAsBitmap set to true. -->
<!-- Remember to set a valid image source value... -->
<mx:Image id="maskImage" source="g:\images\Drops_of_Water_2304_x_864_by_rotbearer.j pg" cacheAsBitmap="true" />
<mx:Canvas id="maskCanvas" cacheAsBitmap="true" clipContent="false" />

</mx:Application>

charithao
07-07-2008, 03:56 AM
Thank you very much for the sample. I have another question. Say if I want hide serveral rectagular areas in in an application using a masks how could I do it? And keep up the good work :)

Sly_cardinal
07-07-2008, 04:38 AM
You can apply a mask to each of the items you want to hide.