MX Resize Effect in Flex4

The Resize effect changes the height, width or both dimensions.

 
 

Share on Google+Share on Google+

MX Resize Effect in Flex4

Ads

The Resize effect changes the height, width or both dimensions.

MX Resize Effect in Flex4:

The Resize effect changes the height, width or both dimensions. There are some attribute as: widthFrom, heightFrom, widthTo, heightTo, widthBy, heightBy and hideChildrenTargets. You can expand and shrink the size of component using Resize effect. The tag of Resize effect is <mx:Resize>. In this example you can see how we can use a Resize effect with 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">

<fx:Declarations>

<mx:Resize id="resizeUp"

target="{roseindia}"

widthBy="20" heightBy="20"

duration="100"/>

<mx:Resize id="resizeDown"

target="{roseindia}"

widthBy="-20" heightBy="-20"

duration="100"/>

</fx:Declarations>

<s:Panel title="MX Resize Effect Example" width="487" height="275"

chromeColor="#000000"

color="#CCCCCC">

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

<s:Button label="Expand"

click="resizeUp.end();resizeUp.play();"

fontFamily="verdana"/>

<s:Button label="Shrink"

click="resizeDown.end();resizeDown.play();"

fontFamily="verdana"/>

</mx:ApplicationControlBar>

<s:Label text="Use the button for control the size of image."

x="103" y="40" color="#000000" fontFamily="verdana"/>

<mx:Image id="roseindia"

source="@Embed(source='file:/C:/work/bikrant/image/roseindia.gif')" x="10" y="60"/>

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

Ads

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