Home Tutorial Flex Flex-components Zoom Image with the help of play and reverse mehod in flex

 
 

Share on Google+Share on Google+
Zoom Image with the help of play and reverse mehod in flex
Posted on: March 13, 2010 at 12:00 AM
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.

 

Advertisement

Related Tags for Zoom Image with the help of play and reverse mehod in flex:


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: March 13, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com