Thursday, 11 February 2010

Banner resizer effect in Actionscript 3

In this Flash tutorial you will learn how to create a banner resizer effect in Actionscript 3. This effect will increase the size of the image when your mouse is over the image and restore to the original size when your mouse is not on the image. You will need to use the tweenlite plugin for this tutorial which can be downloaded here. I have used four free stock images for my banner resizer effect, but you can use six images if you wish. Higher quality images will work best for this effect.


Banner resizer effect in Actionscript 3 – part 1

Step 1

Open a new Flash AS3 file.
Import all the images you wish to use by selecting File > Import > Import to library. Make sure your images are all the same size. Then on the timeline rename ‘layer 1’ to ‘Images’.


Step 2

Drag your images individually onto the stage like below. I have left a small gap in between each of the images. All of the images should be touching the stage boundaries. If your images are too large you can use the Free transform (Q) to resize the images.




Step 3

Starting with the top left image, convert it into a movie clip (F8) and give it an appropriate name then select the top left registration point and click ok. Now repeat this for all your images, so for the top right image you would select the top right registration point. And for the bottom left image you would select the bottom left registration point.




Step 4

Give each of your images the following instance name accordingly: image1_mc, image2_mc, image3_mc and image4_mc.




Step 5

On the timeline insert a new layer called Actions. Then open up the actions panel and enter the following code.

//Imports the tweenlite plugin.
import com.greensock.*;

//The orginal width and height of the images.
var imageWidthOriginal:uint = 195;
var imageHeightOriginal:uint = 145;

//Array to hold the image instances.
var imageArr:Array = new Array(image1_mc,image2_mc,image3_mc,image4_mc);

//This loops through all the images in the array with mouse over and mouser out event.
for(var i:uint = 0; i < imageArr.length; i++){
imageArr[i].addEventListener(MouseEvent.MOUSE_OVER, sizeImage);
imageArr[i].addEventListener(MouseEvent.MOUSE_OUT, reduceImage);
}

//This function increases the width and height of the image until it reaches
//the stage boundaries.
function sizeImage(event:MouseEvent):void {
TweenLite.to(event.target, 1, {width:stage.stageWidth, height:stage.stageHeight});
//This sets moused over image to the highest index position.
setChildIndex(MovieClip(event.target), numChildren - 1 );
}

//This function restores the images back to the original size.
function reduceImage(event:MouseEvent):void {
TweenLite.to(event.target, 1, {width:imageWidthOriginal, height:imageHeightOriginal});
}

Step 6

Test your movie Ctrl + Enter. Now try moving your mouse over the images below and you should see the images increase in size. Then mouse your mouse off the images and they should decrease in size.




Related tutorials
Black and white gallery
Banner selector

2 comments:

PARAMASIVAN P N 21 March 2010 at 14:10  

While execution, following error messages appeared

TwwenLite.as, Line 167 1017: The definition of base class TweenCore was not found.
TwwenLite.as, Line 409 1020: Method marked override must override another method.
TwwenLite.as, Line 524 1020: Method marked override must override another method.
TwwenLite.as, Line 535 1020: Method marked override must override another method.


---Paramasivan P N

iliketo 22 March 2010 at 11:35  

You may not have imported tweenlite packages properly.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP