Share on Google+Share on Google+

MX Mask Effect in Flex4

Advertisement
A mask effect is a subclass of the MaskEffect class. The Mask Effect class include the wipe and Iris effect. It is a overlay effect.

MX Mask Effect in Flex4:

A mask effect is a subclass of the MaskEffect class. The Mask Effect class include the wipe and Iris effect. It is a overlay effect. To control the mask by using mask property. You can use the several properties of the MaskEffect which are following:
scaleXFrom, scaleYFrom, scaleXTo, and scaleX which is used for the initial and final position of the mask. In this example we use a canvas as a mask which is provide the mask effect to the Image component.

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">

<s:Panel title="MX Mask Effect Example" width="476" height="448"

chromeColor="#000000" color="#CCCCCC">

<mx:Image source="@Embed(source='file:/C:/work/bikrant/image/b.jpg')"

x="10" y="10" mask="{maskCanvas}">

<mx:filters>

<mx:DropShadowFilter/>

</mx:filters>

</mx:Image>

<mx:Canvas x="13" y="12"

width="447" height="388"

backgroundColor="#fff000"

id="maskCanvas"

cornerRadius="30"

borderStyle="solid"/>

</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

Advertisements

Advertisement

Posted on: July 1, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.