Download source files: flashresizeimg.zip
Step 1
- Create New Flash File ActionScript 3.0
- Select the Selection Tool V
- Go to Properties tab and press Edit button and set the width of your document to 820 pixels and the height to 620 pixels, set frame rate to 28 fps and select any color you want as background.
- Change the layer name to images ( double click on it ).
- Add another layer and double click on it to change his name to AS3
Step 2
- Select the images layer and import all 4 images (same size) ( File -> Import -> Import to Library ) (
- Drag your images individually onto the stage see the picture below.
Step 3
- Click on the top left image and convert it into a movie clip (F8) name it image1 and select the top left registration point.
- Click on the top right image and convert it into a movie clip (F8) name it image2 and select the top right registration point.
- Click on the bottom left image and convert it into a movie clip (F8) name it image3 and select the bottom left registration point.
- Click on the bottom right image and convert it into a movie clip (F8) name it image4 and select the bottom right registration point
- Change the instance name for all images and give them the instance name : image1_mc , image2_mc, image3_mc, image4_mc .
Step 4
- Final step , we will move to AS3 layer.
- Select first frame and hit F9 to open AS3 panel and copy/paste the following code:
//Imports the tweenlite plugin.
import com.greensock.*;
//The orginal width and height of the images.
var imageWidthOriginal:uint = 400;
var imageHeightOriginal:uint = 300;
//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});
}
June 5, 2011 at 9:23 pm
Hi,
I’ve got a problem when publish. It send me an error saying that it miss a right brace before 1 in the setChildIndex line. It also says There’s no greensock and TweenLite definition? Any ideas to solve the problem? I would be very thankfull!
June 5, 2011 at 11:23 pm
You did smtg wrong, download the source from :
http://www.flashconf.com/wp-content/uploads/2010/05/flashresizeimg.zip
and install to import the greensock, to do that you will need to install the http://www.greensock.com/tweenlite/ , after you install it, change with your install location in the as3.
//Imports the tweenlite plugin.
import com.greensock.*;