# Howd he do this? Resizing slideshow

**URL:** https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448
**Category:** classic bestof
**Created:** [March 24, 2004, 6:18pm UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448 "2004-03-24T18:18:59Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![niki](https://avatars.discourse-cdn.com/v4/letter/n/c57346/32.png) [@niki](https://forum.kirupa.com/u/niki)
#### Post date: [March 24, 2004, 6:18pm UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/1 "2004-03-24T18:18:59Z")

</div>

[http://www.podlob.com/](http://www.podlob.com/)  
click on #1. under “flash Research”

Ive tried searching these forums for resizing and slideshow but dont get what im looking for.

Im trying to learn how to build a thumbnail gallery that when you click on the thumbnail the photo will load in an empty movie clip and the emptymovieclip will resize itself to the size of the photo.

i guess i dont know what its called. but that link is pretty much what im looking for if I could turn those little numbers hes got there into thumbnails…

---

<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: [July 6, 2004, 8:57pm UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/2 "2004-07-06T20:57:29Z")

</div>

Hi

I have followed along…tried to follow along to this thread and have gotten very much help from it. Especially from dr.ew - thanks.  
I now have another question.  
I have the gallery and would like it to load different images or swf files every times a user enters my site.  
The following code is the best i can do but it doesn’t work. Can you help.  
Thanks Mikkel  
.  
.  
spacing = 5;  
\_root.containerMC.\_alpha = 0;  
var pArray = new Array();  
pArray = [“pic1.jpg”, “pic2.jpg”, “pic3.jpg”, “pic4.jpg”, “pic5.jpg”];  
path = “/images/”;  
i = pArray.length;  
k = Math.floor(Math.random()\*i);

MovieClip.prototype.loadPic = function(pic){  
\_root.containerMC.\_alpha = 0;  
cur = pic;  
this.loadMovie(path+pArray[k]);  
this.\_parent.onEnterFrame = function(){  
var t = containerMC.getBytesTotal(), l = containerMC.getBytesLoaded();  
if (t != 0 && Math.round(l/t) == 1 && containerMC.\_width\>0){  
var w = containerMC.\_width + spacing, h = containerMC.\_height + spacing;  
border.resizeMe(w, h, pic);  
delete this.\_parent.onEnterFrame;  
}  
}  
};  
MovieClip.prototype.resizeMe = function(w, h, pic){  
var speed = 5;  
this.onEnterFrame = function(){  
this.\_width += (w - this.\_width)/speed;  
this.\_height += (h - this.\_height)/speed;  
if( Math.abs(this.\_width-w)\<1 &&Math.abs(this.\_height-h)\<1){  
this.\_width = w;  
this.\_height = h;  
containerMC.\_x = this.\_x - this.\_width/2 + spacing/2;  
containerMC.\_y = this.\_y - this.\_height/2 + spacing/2;  
containerMC.\_alpha += 9;  
if (\_root.containerMC.\_alpha\>90){  
\_root.containerMC.\_alpha = 99;  
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: [July 8, 2004, 12:26pm UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/3 "2004-07-08T12:26:17Z")

</div>

[http://www.rogermontserrat.com](http://www.rogermontserrat.com) :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: [July 8, 2004, 12:42pm UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/4 "2004-07-08T12:42:04Z")

</div>

nice site melf… a litle off site sometimes …when click on the btn … the image load first before the bg…or did u meant to do that?

---

<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: [July 8, 2004, 4:57pm UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/5 "2004-07-08T16:57:55Z")

</div>

Nice site melf,

but you should really add the option to NOT have it fullscreen…I’ve got a two-screen set-up…so everything is split between the screens…Yes my graphic card sucks…Otherwise the whole nthing has a nice and smooth feeling to it.

Rufus

---

<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: [July 12, 2004, 3:17am UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/6 "2004-07-12T03:17:26Z")

</div>

First I’d like to say thanks to Scotty and all of the other guys that made this such a great thread. I’ve been checking it out from time to time and now the time has come where I need to do something like this. I’ve been playing around with it all day and for some reason, the easing functionality of the size doesn’t work for me. It works on the first one only. I can’t figure out what the problem is and I haven’t read about anyone else having this issue. Can anyone give me a clue? The files are attached. Thanks in advance

---

<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: [July 12, 2004, 11:29am UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/7 "2004-07-12T11:29:54Z")

</div>

It’s a little error in the original code:)  
Look in the code for this line:

```auto
if (Math.abs(this._width-w)<1) {

```

and change it in this:

```auto
if (Math.abs(this._width-w)<1&&Math.abs(this._height-h)<1) {

```

Since you pics have equal width’s, the statement as you had it, was allways true…

scotty(-:

---

<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: [July 12, 2004, 8:00pm UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/8 "2004-07-12T20:00:54Z")

</div>

Thanks for the tip Scotty. Works fine now. And thanks again for making this such a great thread. It’s been a big 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: [July 12, 2004, 8:02pm UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/9 "2004-07-12T20:02:12Z")

</div>

no problem:)

---

<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: [July 13, 2004, 2:30am UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/10 "2004-07-13T02:30:31Z")

</div>

quick question… ran across this thread really liked it tryed it out and decided to expand on it. wanted to move the images or menu with the border. I grouped it all in a mc called menu and then wrote an extra function to move it called MoveMe. I added the function call into the loadPicture Function and added varibles to decide what the x and y position would have to be. This is the code I’ve added.  
//new varibles  
var w = containerMC.\_width + spacing, h = containerMC.\_height + spacing,  
a = containerMC.\_x + spacing_2 , b = border.\_y + containerMC.\_height/2 + spacing_2 ;

//New Function goes at the end  
MovieClip.prototype.MoveMe = function(a, b){  
var speed = 3;  
this.onEnterFrame = function(){  
this.\_x += (a - this.\_x)/speed;  
this.\_y += (b - this.\_y)/speed;  
if (Math.abs(this.\_x - a)\<1 && Math.abs(this.\_y - b)\<1) {  
this.\_x = a;  
this.\_y = y;  
delete this.onEnterFrame;  
}  
}

only prob though is you have to click twice on the menu items to get the x position where it should be. The Y position works perfectly… any thoughts?

---

<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: [July 13, 2004, 2:44am UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/11 "2004-07-13T02:44:37Z")

</div>

never mind figured it out the varibles should be  
var w = containerMC.\_width + spacing, h = containerMC.\_height + spacing, a = border.\_x - containerMC.\_width/2 + spacing_2, b = border.\_y + containerMC.\_height/2 + spacing_2 ;

---

<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: [July 13, 2004, 6:25pm UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/12 "2004-07-13T18:25:29Z")

</div>

I’m trying to use this script in conjuction with some of my own that creates some rows of dynamically loaded jpg’s. I can’t find anything in Flash help regarding MovieClip.prototype. The pictures load into the container ok when the jpg’s are clicked, but the border doesn’t resize and there’s no alpha fade exept for the first one. Can someone tell me where my problem lies? Thanks.

```php
 numberOfFiles = 14;
numColumns = 6;
cnt = 1;
startX = startY=0;
for (i=1; i<=numberOfFiles; i++) {
this.attachMovie("box", "box"+i, i, {_x:startX, _y:startY});
this["box"+i].container.loadMovie("Arra/thumbs/"+*+".jpg");
this["box"+i].targNum = i;
this["box"+i].onRelease = function() {
_root.containerMC.loadMovie("Arra/pic"+this.targNum+".jpg");
};
startX = (cnt%numColumns == 0) ? 0 : startX+_level0["box"+i]._width;
startY = (cnt%numColumns == 0) ? startY+_level0["box"+i]._height : startY;
cnt++;
}
spacing = 10;
containerMC._alpha = 0;
MovieClip.prototype.loadPic = function(pic) {
containerMC._alpha = 0;
this.loadMovie(pic);
_root.onEnterFrame = function() {
var t = containerMC.getBytesTotal(), l = containerMC.getBytesLoaded();
if (t != 0 && Math.round(l/t) == 1 && containerMC._width != 0) {
var w = containerMC._width+spacing, h = containerMC._height+spacing;
border.resizeMe(w, h);
delete _root.onEnterFrame;
}
};
};
MovieClip.prototype.resizeMe = function(w, h) {
var speed = 3;
this.onEnterFrame = function() {
this._width += (w-this._width)/speed;
this._height += (h-this._height)/speed;
if (Math.abs(this._width-w)<1 && Math.abs(this._height-h)<1) {
this._width = w;
this._height = h;
_root.containerMC._x = this._x-this._width/2+spacing/2;
_root.containerMC._y = this._y-this._height/2+spacing/2;
_root.containerMC._alpha += 9;
if (_root.containerMC._alpha>90) {
	_root.containerMC._alpha = 100;
	delete this.onEnterFrame;
}
}
};
};
_root.containerMC.loadPic("Arra/pic1.jpg");

```

---

<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: [July 13, 2004, 7:18pm UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/13 "2004-07-13T19:18:30Z")

</div>

Oops, I’m an idiot. It’s always the little things!

```auto
_root.containerMC.loadPic("Arra/pic"+this.targNum+".jpg");

```

---

<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: [July 19, 2004, 12:45pm UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/14 "2004-07-19T12:45:58Z")

</div>

Hi credit to all i have learnt so much from this thread.

Just one question if you take a look at my fla Im trying to dynamically produce buttons for nodes in the xml. I have managed to get the attatch a button for each node but i am stuck how to get these to function can you 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: [July 19, 2004, 12:50pm UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/15 "2004-07-19T12:50:20Z")

</div>

forgot to zip 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: [July 19, 2004, 8:48pm UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/16 "2004-07-19T20:48:55Z")

</div>

is it an mx04 file? i cant open with mx.

---

<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: [July 20, 2004, 1:01pm UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/17 "2004-07-20T13:01:58Z")

</div>

> [@dr.ew](#):
>
> is it an mx04 file? i cant open with mx.

Hi i had some luck producing a dynamic buttons.

Heres my final fla(mx) i want to replace the old menu but not sure how attatch movie works in relation to alignment.

Could someone have a look and maybe amend so the buttons appear where the old menu is with the text description underneath.

Thanks for you 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: [July 20, 2004, 2:41pm UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/18 "2004-07-20T14:41:07Z")

</div>

Well heres my version with dynamic buts.

Thanks goes to all

---

<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: [July 20, 2004, 4:18pm UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/19 "2004-07-20T16:18:50Z")

</div>

looks good! one thing i noticed is that if you have lots of images ( and therefore lots of buttons) the button list goes off the stage, or juts out beyond container\_mc.  
if you put this in your resizeMe function, the button row will adhere to the width of the displayed image.

nav.\_width = containerMC.\_width;

the drawback is that the buttons individual width will also skew; for long images, the buttons are wide, for narrow images the buttons become narrow. but at least they will be visible=]

---

<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: [July 20, 2004, 9:52pm UTC](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448/20 "2004-07-20T21:52:16Z")

</div>

Just thought I’d post a link to a project I’m working on for my friend’s band’s Web site. The idea all started with this awesome thread (thanks again Scotty and everyone else that contributed). A lot of thanks goes to CyanBlue for helping me out with some coding issues as well.

Anyways, what it does is dynamically create a series of thumbnails in grid form based on how many images are in a particular folder (via php). It also dynamically creates a series of buttons to change galleries based on how many folders are in a particular directory (also via php). The text on the buttons is also dynamically created based on which gallery directory the images are loading from (also via php). Being a novice, this was a pretty big accomplishment for me and I learned a lot thanks to this thread and others at [AS.org](http://AS.org).

There are only 2 images in the first gallery that resize all the way at the bottom. Please let me know if you find bugs. Thanks.

[http://www.thezplane.com/test/test2.swf](http://www.thezplane.com/test/test2.swf)

If anyone would care to see the code, let me know.

BTW, the pictures don’t have anything to do with the band. They’re just some personal ones I used temporarily. Only 3 of the buttons work. I just added some empty folders to test the php code amd the dynamic text on the buttons…

[Next page](https://forum.kirupa.com/t/howd-he-do-this-resizing-slideshow/46448.md?page=2)
