Building dynamic zoom gallery

programming flash
1

Hi all,

I’m want to develop a dynamic gallery with xml file like the example mentioned on this site.

However, I want the pictures to appear in a small format (thumbnails) and spread out the stage. Each click on the image will result a manification of the picture with a zoom effect.

A great example can be found here:
http://www.airtightinteractive.com/projects/postcardviewer/example/

I just can’t seemed to find a way to make the zoom effect… Is there an actionscript which can help me to enlarge the hole “layer”?
What other soutions can I find??

Thanks in advance,

Eyal.

2

Wouldn’t this get you started?
http://kirupa.com/developer/flash8/zoom_motion_blur.htm

You just change the blur. I haven’t looked at it but I’m guessing it would point you in the right direction.

3

Is there an actionscript which can help me to enlarge the hole “layer”?

Yes. You can setup all your images to be inside one movielcip and arranged however you like. To make this work all you need to do is keep track of the x,y positions for each of the thumbnails inside your MC. Basically all you do then is tell your container clip to scale to the appropriate size using whatever method you want (I suggest using Tween classes), and then tell the container clip the new (x,y) position it needs to rest. Remeber those coords for the container to move to are referenced from its parent, and not where the clips are inside of it. Did I make any sense?

4

First of all, Thanks a lot !!

I have set up my images dynamicly from xml file and I added a horizonal strip for masking so you can see only 3 pictures each.
Now, I even managed to get through the actionscript for the picture properties and change the _xscale & _yscale However It changes rapidly, and I want to find a code that can “ease” it nicely and smoothly… :slight_smile:
maybe on the second click it will go back to the original size.

Thanks,

Eyal

5

I did one for a client not too long ago. Check out my thread, canadian gave me a lot of help.

http://www.kirupa.com/forum/showthread.php?t=212103

You could add in some filter effects as it zooms.

6

The zoom_motion_blur is combained by 5 or 6 different pictures in order to animate the blur effect. My intention is to dynamicly get one picture at a time and by clicking on it - It will zoom in with ease effect smootly… (I hope)

Eyal.

7

I want to find a code that can “ease” it nicely and smoothly…

Here’s some code I have laying around for smooth easing the scale of a clip. Try this–

import mx.transitions.Tween;
import mx.transitions.easing.*;

MovieClip.prototype.scaleClip = function(endXScale, endYScale, secs) {
	var easeType = Regular.easeOut;
	var startXScale = this._xscale;
	var startYScale = this._yscale;
	var seconds = secs;
	
	var xScaleTween = new Tween(this, "_xscale", easeType, startXScale, endXScale, seconds, true);
	var yScaleTween = new Tween(this, "_yscale", easeType, startYScale, endYScale, seconds, true);
};

You can change the type of ease used rather easily by modifying the easeType variable. For more info look up the built in ease classes.

Serk

8

Thanks, I’m trying to make to images grow larger onRollOver and get back to original size onRollOut, However I can’t seemed to impliment this code… :frowning: sometimes the growth effects several images at a time…

9

your code with this prototype should look something like this:

clip_mc.onRollOver = function () {
   this.scaleClip(120, 120, 1);
}
clip_mc.onRollOut = function () {
   this.scaleClip(100, 100, 1)
}

Since its a prototype you need to address the instance of the moveclip that is going to be scaled and call the scaleClip() method. Hope that helps

10

Thanks serikos for your posts! helpful!

I have tried to apply your code in an xml gallery. And it works fine!
One problem thou… When you click the image i zooms in to its position. But when the image is zoomed I would like to be able to click a second time on the iimage and it would zoom out. Right now im using a “back” button. Any suggestions?
Thanks:thumb:

Here´s the fla: www.photat.com/zoomGallery.zip
And the swf: www.photat.com/zoomGallery.swf

You can find the orginal gallery here ( thanks alot ikim!):
http://www.kirupa.com/forum/showthread.php?t=196734&highlight=flash+grid+gallery