Zoom in/out effect in Actionscript 3

In this tutorial you will learn how to create a simple zoom in and out effect using Actionscript 3.0. I have used an image of a fish to show the zoom in and out in this tutorial, but you can use whatever image you wish. You will need the tweenLite plug-in which is available from greensocks.com.


Zoom in/out effect in Actionscript 3

Step 1

Open a new Flash AS3 file.
Import an image you wish to add the zoom effect to by selecting File > Import > Import to Stage. You can alternatively create any object on the stage if you wish.




Step 2

Convert your image into a movie clip (F8) and make sure you select the centre registration point. Then give your movie clip the instance name: fish_mc.




Step 3

On the timeline create a new layer called 'Actions' and then add the following code into the actions panel.

//import the tweenlite packages.
import com.greensock.TweenLite;

//Add the roll over/out event listeners to the fish movie clip.
fish_mc.addEventListener(MouseEvent.ROLL_OVER, zoomIn);
fish_mc.addEventListener(MouseEvent.ROLL_OUT, zoomOut);

//This function increases the scale of the fish by a factor of two in one second.
function zoomIn(event:MouseEvent):void{
TweenLite.to(fish_mc, 1, {scaleX:2, scaleY:2});
}

//This function decreases the scale of the fish by a factor of one in one second.
function zoomOut(event:MouseEvent):void{
TweenLite.to(fish_mc, 1, {scaleX:1, scaleY:1});
}

To make the image edges less pixelated, you can right click on the image
in the libary select properties on the drop down menu and check the smoothing checkbox.

Step 4

Test your movie clip Ctrl + Enter. Now try moving your mouse over the fish below and you should see the fish increase in size.



You should now be able to zoom in and out in Actionscript 3.0.