Share on Google+Share on Google+

Zoom Image with the help of play and reverse mehod in flex

Advertisement
In this tutorial we can illustrate how to zoom Image with the help of play() and reverse() in flex behavior.

Flex Zoom with the help of Action Script:-

In this tutorial you can see how to apply zoom through mouse events if  mouseup on the  image component  are zoomin and mouseout image zoom out. you can see how to use doZoom() for zoom the component in flex and how to use play() function in this tutorial.

Example:-

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

import flash.events.MouseEvent;

public function doZoom(event:MouseEvent):void {

if (zoom.isPlaying) {

zoom.reverse();

}

else {

zoom.play([event.target], event.type == MouseEvent.ROLL_OUT ? true : false);

}

}

]]>

</mx:Script>

<mx:Zoom id="zoom" zoomWidthTo="2" zoomHeightTo="2" zoomWidthFrom=".3" zoomHeightFrom=".3" />

<mx:Panel title="Image Zoom" width="50%" height="50%" horizontalAlign="center"

paddingTop="25" paddingLeft="10" paddingRight="10" paddingBottom="25">

<mx:Image id="img"

source="@Embed(source='assets/button.jpeg')"

scaleX=".3" scaleY=".3"

rollOver="doZoom(event)"

rollOut="doZoom(event)"/>

</mx:Panel>

</mx:Application>

Output:-

In this tutorial you can see how to apply Play() for zoom  component and how to use reverse() for zoom component.

 

Advertisements

Advertisement

Posted on: March 13, 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.