Create a Zoomable Photos Panel with Flash
April 6th, 2010 in Flash | 15 CommentsIn this new AS3 tutorial, let’s see how to create a zoomable photos panel with a nice hover effect.
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();
Apr 7th, 2010
Really cool thanks
Apr 7th, 2010
this is something
Apr 9th, 2010
Cool effect, and great use of Two and a Half men pics!
Apr 10th, 2010
thanks
Apr 12th, 2010
[...] This post was mentioned on Twitter by Alain Joannès, ArnaudMercier and Multimedia Training, Pushan Barman. Pushan Barman said: Create a Zoomable Photos Panel with Flash – http://bit.ly/aMGyjM [...]
Apr 21st, 2010
mc.smoothing = true;
is that easy!
May 2nd, 2010
Nice one
thanks
May 31st, 2010
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
May 31st, 2010
@ 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
May 31st, 2010
Thanks,it works
Jun 14th, 2010
Hi,
What adjustment do we need to make to the actionscript if we want more than 4 photos?
Thanks
Sydney
Jun 14th, 2010
Hi
How do we add more than 4 photos?
Thanks
Sydney
Oct 13th, 2010
[...] начал с того, что взял за основу этот урок, а именно сам принцип увеличения-открытия фото. [...]
Mar 14th, 2011
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?
Mar 20th, 2011
Really great…
I love them..
Thank you