# Zoom and scroll gallery

**URL:** <https://forum.kirupa.com/t/zoom-and-scroll-gallery/19008>\
**Category:** flash\
**Created:** [April 23, 2003, 2:21pm UTC](https://forum.kirupa.com/t/zoom-and-scroll-gallery/19008 "2003-04-23T14:21:58Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Scurvy](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@Scurvy](https://forum.kirupa.com/u/Scurvy)\
**Post date:** [April 23, 2003, 2:21pm UTC](https://forum.kirupa.com/t/zoom-and-scroll-gallery/19008/1 "2003-04-23T14:21:58Z")

</div>

I apologize if something like this has already been covered before.

At [http://www.aarondeemer.com/](http://www.aarondeemer.com/), in the “new works” section he has a photo gallery that consists of a long strip of images, and when you click on one it scrolls toward it while zoming in. Does anyone know how this is done? I’ve been trying to figure it out for weeks now, and am stumped.

Thanks in advance for any help!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 23, 2003, 2:41pm UTC](https://forum.kirupa.com/t/zoom-and-scroll-gallery/19008/2 "2003-04-23T14:41:51Z")

</div>

With just some motion tweening it’s not so much work. But if you have many pictures, you should let someone write you a little script.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 23, 2003, 2:51pm UTC](https://forum.kirupa.com/t/zoom-and-scroll-gallery/19008/3 "2003-04-23T14:51:33Z")

</div>

wow very interesting!! nice work…  
do u know [easing tecnique??](http://www.kirupa.com/developer/mx/easing_mouseclick.htm)  
ever see [sliding menu](http://www.kirupa.com/developer/flash5/slidingmenu.htm)tutorial by ilyas?  
u have to know them first, to make one…  
knowing using function makes it more easier…

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 23, 2003, 2:55pm UTC](https://forum.kirupa.com/t/zoom-and-scroll-gallery/19008/4 "2003-04-23T14:55:26Z")

</div>

using motion tweening for this effect makes it harder…  
cause there’s an image positioning beside zooming and sliding…

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 23, 2003, 2:56pm UTC](https://forum.kirupa.com/t/zoom-and-scroll-gallery/19008/5 "2003-04-23T14:56:31Z")

</div>

Thanks for the links! I had been looking at the sliding menu tutorial, but I hadn’t seen the mouse easing one. I’ll trying putting them together to see what I get.

Thanks again!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 23, 2003, 3:07pm UTC](https://forum.kirupa.com/t/zoom-and-scroll-gallery/19008/6 "2003-04-23T15:07:44Z")

</div>

don’t forget to search how to make & use functions…

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 23, 2003, 8:11pm UTC](https://forum.kirupa.com/t/zoom-and-scroll-gallery/19008/7 "2003-04-23T20:11:37Z")

</div>

I’ve been modifying the files from the sliding menu tutorial, and I’m stuck. I got it to scroll from side to side when you click on it, but you have to click over and over to get it to zoom in all the way.

I’ve uploaded what I’ve done so far here: [http://filebox.vt.edu/users/kscully/scrollingwindow.fla](http://filebox.vt.edu/users/kscully/scrollingwindow.fla)

This is really driving me crazy.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 23, 2003, 9:29pm UTC](https://forum.kirupa.com/t/zoom-and-scroll-gallery/19008/8 "2003-04-23T21:29:17Z")

</div>

hey scurvy… u have to loop your zoom()

```auto
MovieClip.prototype.zoom = function() {
	this.onEnterFrame = function() {
		destx = 800;
		desty = 200;
		posx = general._width;
		posy = general._height;
		velx = (destx-posx)/7;
		vely = (desty-posy)/7;
		general._width += velx;
		general._height += vely;
	};
};

```

the next thing u have to search is [how button can do thing in different time](http://www.macromedia.com/support/flash/ts/documents/toggle_flags.htm) to zoom out what u have zoom in…🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 23, 2003, 9:40pm UTC](https://forum.kirupa.com/t/zoom-and-scroll-gallery/19008/9 "2003-04-23T21:40:19Z")

</div>

and for your move function… may be u want to use this rather than making several time…

```auto
MovieClip.prototype.slideX = function(endPosx) {
	this.onEnterFrame = function() {
		if (this._x<=endPosx) {
			currentPosx = this._x;
			diffPosx = endPosx-currentPosx;
			movex = diffPosx/5;
			this._x = this._x+movex;
			if (this._x>=endPosx) {
				this._x = endPosx;
				delete (this.onEnterFrame);
			}
		}
		if (this._x>=endPosx) {
			currentPosx = this._x;
			diffPosx = endPosx-currentPosx;
			movex = diffPosx/5;
			this._x = this._x+movex;
			if (this._x<=endPosx) {
				this._x = endPosx;
				delete (this.onEnterFrame);
			}
		}
	};
};

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 23, 2003, 9:44pm UTC](https://forum.kirupa.com/t/zoom-and-scroll-gallery/19008/10 "2003-04-23T21:44:44Z")

</div>

and i forgot, there’s

```auto
delete(this.onEnterFrame);

```

,or can be

```auto
this.onEnterFrame = null;

```

search explanation for this… after that use it in your function…

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 24, 2003, 11:55pm UTC](https://forum.kirupa.com/t/zoom-and-scroll-gallery/19008/11 "2003-04-24T23:55:36Z")

</div>

I’ve worked some more on the movie. It scrolls properly and I got it to zoom in and out. My problem now is that each time I zoom in, the maximum size keeps getting smaller and smaller (by 1/2 each time). It seems like it’s either quitting the loop in the zoom function too early, or it’s passing the wrong information somewhere. Everything else works perfectly fine. What am I doing wrong?

The updated file is \<a href=“[http://filebox.vt.edu/users/kscully/scrollingwindow.fla](http://filebox.vt.edu/users/kscully/scrollingwindow.fla)”\>here\</a\>.

Thank you for all your help so far! I really appreciate it.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 25, 2003, 5:18pm UTC](https://forum.kirupa.com/t/zoom-and-scroll-gallery/19008/12 "2003-04-25T17:18:20Z")

</div>

your problem is in your zoom function(), don’t use

```auto
if ( general._width <= 800 ) {

```

below that width will active with your function…

```auto
incrementx = ( 800 - currentWidth )/10;
incrementy = ( 200 - currentHeight )/10;

```

if you’re click before your desire size, ‘current’ is refer to ‘current size now’ so the increment will base on size when u click it…

here’s a function u could learn & use… or modify it…

```auto
MovieClip.prototype.zoom = function(endWidth, endHeight) {
	this.onEnterFrame = function() {
		currentWidth = this._width;
		diffWidth = endWidth-currentWidth;
		zoomWidth = diffWidth/5;
		this._width += zoomWidth;
		//
		currentHeight = this._height;
		diffHeight = endHeight-currentHeight;
		zoomHeight = diffHeight/5;
		this._height += zoomHeight;
	};
};

```

**I need Kax help for correcting & simplify this function… could u send him PM for me? but so far it works**

call

```auto
on (release) {
	zoom(200, 40);
}

```

it is for the fix desired size…

```auto
on (release) {
	zoom(this._width*2, this._height*2);
}

```

this will produce never ending zoom…

```auto
on (release) {
	iAmActive = !iAmActive;
	if (iAmActive) {
		zoom(this._width/2, this._height/2);
	} else {
		zoom(this._width*2, this._height*2);
	}
}

```

this is similar to what u want to achieve now…  
I hope this could help u…🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [April 27, 2003, 6:42am UTC](https://forum.kirupa.com/t/zoom-and-scroll-gallery/19008/13 "2003-04-27T06:42:18Z")

</div>

if not use the “if ( general.\_width \<= 800 ) {”,  
Anyone knows what else can put into the frame, so as to zoom in and out in right size?