Create a Zoomable Photos Panel with Flash

In this new AS3 tutorial, let’s see how to create a zoomable photos panel with a nice hover effect.

View DemoDownload Source

1. Create a new flash file (Actionscript 3.0) and save it as zoompanel.fla.

2. Rename “layer 1” to “content”. Place 4 images on the stage and align them. Convert each one to a movie clip with registration point at the center. Next scale down each movie clip to 0.4 of its actual size so that when we zoom in a photo it will completely covers the others on the back. As each of our image is 300px height, we set it to 120px and its width proportionnally.

3. Select the 4 movie clips and convert the selection to a movie clip with registration point at the center. Give it an instance name of “content_mc”.

4. Create an “actions” layer. We’ll use the Tweenlite engine, so first go download its AS3 version.

Open the actions panel.
First make the following imports that we need to use the Twenlite engine and to create the hover glow effect.

import com.greensock.*;
import flash.filters.*;

5. Create an init() function that loop through all the children of “content_mc” to add mouse event listeners and store their initial x and y coordinates.

function init():void{
	for(var i:int=0; i< content_mc.numChildren; i++){
		var mc:MovieClip = content_mc.getChildAt(i) as MovieClip;
		mc.buttonMode = true;
		mc.posX = mc.x;
		mc.posY = mc.y;
		mc.addEventListener(MouseEvent.ROLL_OVER, onOver);
		mc.addEventListener(MouseEvent.ROLL_OUT, onOut);
		mc.addEventListener(MouseEvent.CLICK, onClick);
	}
}

6. For the onOver function we simply add a glow filter and for the onOut function we remove it.

var glow:GlowFilter=new GlowFilter(0xffffff, 1, 2, 2, 3, 255, false, false);

function onOver (evt:MouseEvent) {
	evt.target.filters=[glow];
}

function onOut (evt:MouseEvent) {
	evt.target.filters=[];
}

7. For the onClick function we use the Tweenlite engine to scale up and down the photo clicked.
Outside the function declare a zoom variable that will store the current movie clip that is in front.

var zoom : MovieClip;
function onClick (evt:MouseEvent) {

}

8. When the onClick function is called, we need to know whether it is to zoom in a photo or to zoom out the one which is in front.
To do so, we check whether the zoom variable is equal to the movie clip that has triggered the click event :
– If NO, which means no photo is in front, we set the zoom variable to the movie clip and set the movie clip index to the highest one so that when we zoom it, the photo will be in front of the other three.
Then we use the Tweenlite engine to scale it up and set its x and y coordinates to 0 so that it centers inside the container.
– If YES, which means one photo is in front of the others, we scale it down and set its x and y properties to their original values, and we set the zoom variable to null.

var zoom : MovieClip;
function onClick (evt:MouseEvent) {
	var mc = evt.target as MovieClip;

	if(zoom != mc){
		zoom = mc;
		content_mc.setChildIndex(mc, content_mc.numChildren -1);
		TweenLite.to(mc, 0.5,{scaleX:1,scaleY:1,x:0,y:0});
	}
	else {
		TweenLite.to(mc, 0.5,{scaleX:0.4,scaleY:0.4,x:zoom.posX,y:zoom.posY});
		zoom = null;
	}
}

9. Finally don’t forget to call the init() function.
Here’s the final code, test your movie to see it in action.

import com.greensock.*;
import flash.filters.*;

var glow:GlowFilter=new GlowFilter(0xffffff, 1, 2, 2, 3, 255, false, false);

function init():void{
	for(var i:int=0; i< content_mc.numChildren; i++){
		var mc:MovieClip = content_mc.getChildAt(i) as MovieClip;
		mc.buttonMode = true;
		mc.posX = mc.x;
		mc.posY = mc.y;
		mc.addEventListener(MouseEvent.ROLL_OVER, onOver);
		mc.addEventListener(MouseEvent.ROLL_OUT, onOut);
		mc.addEventListener(MouseEvent.CLICK, onClick);
	}
}

function onOver (evt:MouseEvent) {
	evt.target.filters=[glow];
}

function onOut (evt:MouseEvent) {
	evt.target.filters=[];
}

var zoom : MovieClip;
function onClick (evt:MouseEvent) {
	var mc = evt.target as MovieClip;

	if(zoom != mc){
		zoom = mc;
		content_mc.setChildIndex(mc, content_mc.numChildren -1);
		TweenLite.to(mc, 0.5,{scaleX:1,scaleY:1,x:0,y:0});
	}
	else {
		TweenLite.to(mc, 0.5,{scaleX:0.4,scaleY:0.4,x:zoom.posX,y:zoom.posY});
		zoom = null;
	}
}

init();

16 thoughts on “Create a Zoomable Photos Panel with Flash

  1. Pingback: Tweets that mention Create a Zoomable Photos Panel with Flash | RiaCodes -- Topsy.com

  2. mist

    Hi i’m new for flash
    I tried with adobe flash Cs4 ,but when i debugged the movie, there were errors in code below:
    1172: La définition com.greensock est introuvable.import com.greensock.*;
    1172: La définition com.greensock est introuvable.import com.greensock.*;
    1120: Accès à la propriété non définie TweenLite.TweenLite.to(mc, 0.5,{scaleX:1,scaleY:1,x:0,y:0});
    1120: Accès à la propriété non définie TweenLite.TweenLite.to(mc, 0.5,{scaleX:0.4,scaleY:0.4,x:zoom.posX,y:zoom.posY});

    pls advise

  3. admin Post author

    @ MIST :
    Hi,
    You need to follow step 4 to download the Tweenlite engine in order to be able to use it. Then get the “com” folder and put it in the same directory of your fla file.

    Good luck

  4. sydney

    Hi,

    What adjustment do we need to make to the actionscript if we want more than 4 photos?

    Thanks
    Sydney

  5. Pingback: Моя первая флеш-галлерея

  6. rohit

    hi is there a way you can make it work on two or more different movie clip with a different content name? on a different layer?

  7. Piedrosa Imoes

    Hi all,

    How do I create this effect on two or more frames? I’ve tried several times but failed. In the first frame, all the effects work. But in the second frame and so on, the effect is not working. Please help me, thank you…………

Leave a Reply

Your email address will not be published. Required fields are marked *