MX Wipe Effect in Flex4


 

MX Wipe Effect in Flex4

The Wipe class defines a bar wipe effect. The before and after state of the component must be visible.

The Wipe class defines a bar wipe effect. The before and after state of the component must be visible.

MX Wipe Effect in Flex4:

The Wipe class defines a bar wipe effect. The before and after state of the component must be visible. This effect inherits the MaskEffect. There are four types of Wipe Effect: WipeLeft, WipeRight, WipeUp and WipeDown. The Tag of WipeLeft is <mx:WipeLeft>. The Tag of WipeRight is <mx:WipeRight>. The Tag of WipeUp is <mx:WipeUp>. The Tag of WipeDown is <mx:WipeDown>. In this example you can see how we can use Wipe Effect in your application.

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

<mx:WipeLeft id="wLeft" duration="1500"/>

<mx:WipeRight id="wRight" duration="1500"/>

<mx:WipeUp id="wUp" duration="1500"/>

<mx:WipeDown id="wDown" duration="1500"/>

</fx:Declarations>

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

width="565" height="251"

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

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

<s:Label text="Click on image and show the effect."

fontFamily="verdana" color="#000000"/>

</mx:ApplicationControlBar>

<s:Label text="Wipe Left"

fontFamily="verdana" color="#000000" x="42" y="48"/>

<s:Label text="Wipe Right"

fontFamily="verdana" color="#000000" x="177" y="48"/>

<s:Label text="Wipe Up"

fontFamily="verdana" color="#000000" x="315" y="48"/>

<s:Label text="Wipe Down"

fontFamily="verdana" color="#000000" x="450" y="48"/>

<mx:Image id="roseindia"

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

x="10" y="68"

0

mouseDownEffect="{wLeft}"/>

<mx:Image id="roseindia1"

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

1

x="282" y="68"

mouseDownEffect="{wUp}"/>

<mx:Image id="roseindia2"

2

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

x="418" y="68"

mouseDownEffect="{wDown}"/>

3

<mx:Image id="roseindia0"

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

x="146" y="68"

4

mouseDownEffect="{wRight}"/>

</s:Panel>

</s:Application>

5

Output:/h3>

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Ads