Sunday, 4 October 2009

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.

4 comments:

LandsU 1 June 2011 at 14:34  

Thank you for the your explanation. I tested it and works fine. The only problem I have is that I do not know the code for a second picture that should have zoom in the same flash movie. Can you post it please?

Thank you

iliketo 2 June 2011 at 13:13  

@LandsU

You use the same code. Change the instance name.

Profitemole 3 April 2012 at 15:15  

Hi, when I try and use this, in the Compiler Errors I get messages saying:
1172: Definition com.greensock:TweenLite could not be found. And 1120: Access of undefined property TweenLite etc.

I have a map and I want it to zoom like the fish does. If I try and replace the fish instance name with my own and remove the TweenLite stuff, nothing happens.

Is there anyway I can make this work? Thanks!

iliketo 4 April 2012 at 15:58  

@Profitmole,

You need to download the tweenlite plugin, or the effect won't work.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP