Howd he do this? Resizing slideshow

programming classic bestof
1

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…

2

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;
}
}
};
};

3

http://www.rogermontserrat.com :crazy:

4

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?

5

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

6

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

7

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

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

and change it in this:

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(-:

8

Thanks for the tip Scotty. Works fine now. And thanks again for making this such a great thread. It’s been a big help!

9

no problem:)

10

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 + spacing2 , b = border._y + containerMC._height/2 + spacing2 ;

//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?

11

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

12

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.

 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");
13

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

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

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…!

15

forgot to zip it

16

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

17

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…!

18

Well heres my version with dynamic buts.

Thanks goes to all

19

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=]

20

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.

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

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…