Home Tutorial Flex Flex4 Components MX Iris Effect in Flex4

 
 

MX Iris Effect in Flex4
Posted on: June 28, 2010 at 12:00 AM
Advertisement
The Iris effect provides the effect to the target by expanding or contracting a rectangular mask centered on the target.

MX Iris Effect in Flex4:

The Iris effect provides the effect to the target by expanding or contracting a rectangular mask centered on the target. The tag of Iris effect is <mx:Iris>.

<mx:Iris
id="irisOn"
duration="500"
showTarget="true"
/>

In this example you can see how we can use a Iris effect With components.

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:Style>

@namespace s "library://ns.adobe.com/flex/spark";

@namespace mx "library://ns.adobe.com/flex/mx";

s|RadioButton{

font-family: verdana;

font-weight:bold;

color:#000000;

}

</fx:Style>

<fx:Declarations>

<mx:Iris id="irisOn" duration="500" showTarget="true"/>

<mx:Iris id="irisOff" duration="500" showTarget="false"/>

<s:RadioButtonGroup id="visibility" change="init()"/>

</fx:Declarations>

<fx:Script>

<![CDATA[

public function init():void{

if(show.selected== true){

roseindiaImage.visible= true;

}

else{

roseindiaImage.visible= false;

}

}

]]>

</fx:Script>

<s:Panel title="MX Iris Effect Example"

width="367" height="235"

chromeColor="#555555" color="#CCCCCC">

<mx:ApplicationControlBar width="364" horizontalAlign="center">

<s:RadioButton groupName="visibility" label="Show" id="show"

selected="true"/>

<s:RadioButton groupName="visibility" label="Hide" id="hide"/>

</mx:ApplicationControlBar>

<mx:Image id="roseindiaImage"

source="@Embed(source='file:/C:/work/bikrant/image/roseindia.gif')"

x="59" y="62"

showEffect="{irisOn}" hideEffect="{irisOff}"/>

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

Advertisement

Related Tags for MX Iris Effect in Flex4:


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.

Posted on: June 28, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com