Zoom Image with the help of play and reverse mehod in flex
In this tutorial we can illustrate how to zoom Image with the help of play() and reverse() in flex behavior.
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.
