Howd he do this? Resizing slideshow

[niki]

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....

[Cello]

Here's a little something for you niki ;)

[niki]

YES!!!
YES!!!
YES!!!
YES!!!
YES!!!

THANK YOU!!!!!!!!!!!!!

[Cello]

My pleasure :) (I take it you're pleased then ;) )

[DChihorn]

Ok Cello, now repeat for just about every one of those items in the Flash Research area. Some of those were awesome.

My favorite one so far that I have looked at: #14 liquid image

Too bad that I couldn't find a CONTACT email on there or anything.

[ctmxxl]

how can create a fade effect when a pic loaded
TKX

[riderchic88]

i had the same question :)

[Cello]

Okay, okay - I get the message :)

I'll work with it and get back to you when I have some time.

[alwaysdrifting]

Thanks Cello for the border resize. I also would like it to fade in, my attempt stops the image fading in at 20 alpha. I assume it's something to do with a recursive call.

Hopefully, someone can figure it out?

Cheers

[scotty]

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) {
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 += 5;
if (_root.containerMC._alpha>90) {
_root.containerMC._alpha = 100;
delete this.onEnterFrame;
}
}
};
};

?

scotty(-:

[alwaysdrifting]

Nice one Scotty.

Thanks again

[scotty]

no problem, credits for Cello:)

[Cello]

Excellent job scotty - you've made it much better :)

(and saved me some work ;) - thx!)

[niki]

I found that I had to change:
_root.containerMC._alpha += 5;

to

_root.containerMC._alpha += 9;

To avoid Ghosting.

You guys are rockin' my world. Ive been searching so long trying to figure out this code.

thanks a gazillion!

[hamidb4]

I like to know if the thumbnails have to be created in other programs like dream weaver or fire works or can you use flash for that purpose. Another words if I wanted to use the files that are posted here and I have 20 images, how would I use these images in the file. My main point is making the thumbnails.
thank you

[Cello]

Flash can reduce the size (scale) of images quite well but not as well as Photoshop, which is what I used to create the thumbnails in this case.

Hope this helps. :)

[hamidb4]

I have not used ps for this purpose. I used dw once to make a photo album and the default thumbnails it gave me were like 2k for the size 100 by 75. ps or dw, this is the general approach then. Am I correct?

[niki]

Say you have a folder of photographs that you want to make thumnails for.

In Fireworks you can go to File>Batch Process

and you browse to your folder of photos, ADD ALL (or however many you want to make thumbnails of, you can pick and choose if you like)

NEXT> then choose SCALE and on the bottom where there are options you can choose what size to make them - like all 72 pixels high or 100 pixels high.

If some of your photos are vertical and some horizontal, then there is the option of "FIT TO AREA" where you can select that no thumbnail be more than a certian number of pixels high or wide. That way your thumbnails wont be distorted.

Then you hit "EXPORT" and you tell it which compression size to make each thumbnail so they will load even faster.

Then you hit NEXT and you will want to send the finished thumbnail images to a new folder so as not to overwrite your full sized images then you just hit batch and WHALAH! It automatically creates all your thumbnails for you - whether ther are 10 or 100.

If you dont have Fireworks, i would recommend even downloading the trial for 30 days just to make use of this awesome and time saving tool.

Thats what I use!
niki

[hamidb4]

I have fire works, but never used it for this purpose. This is nice to know. thanks.

[niki]

i use it for this all the time - love it! its so easy!

[hamidb4]

I will definitely use it.

[rockyreasoner]

Hello... I'm making a gallery for my band's website using the 'resize.zip' fla posted in this thread. When the thumbnails are pressed, the movie clip resizes to almost nothing and the pictures load in the bottom-right corner of the screen. Please check out this link:


If you double-click on the pictures, they show up correctly. Any ideas?
Thanks,
Rocky

[scotty]

Maybe it's because it's not checking it's width before resizing.
Change your prototype loadPic in this:
MovieClip.prototype.loadPic = function(pic) {
_root.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 this.onEnterFrame;
}
};
};

scotty(-:

[rockyreasoner]

Thank you so much, Scotty! I had been trying to figure that out for a week. Now I can finally move on to the rest of the site! What a life saver. Thanks again, and take care!
Rocky

[scotty]

You're welcome=)

[Millad]

This is great. This is perfect.
How can I add a loading message when its loading a image ?

Thank you very much.

[slickeye]

nice to see someone else looking at podlob.com

his new site, squidfingers.com is amazing. sweet patterns

[JosipRadan]

Hello pipl...

I was wondering about this:
podlob.com / 45. slide pages 2

How do you do this, i partially understand the navigation but how do you put the
contents onto the mask? I have downloaded some examples on this but i cant seem
to get it. If anyone gets it please explain in short (if its not a problem), any links
would be helpful (where do you download the expainations/flas on the projects
on podlob2 (i like slidepages2 and mask transitions -> i cant seem to understand
masks and contents -> i understand the theory but i cant seem to make it happen,
in part by the limitations of my 14" monitor... :(

thx

[maestro]

I'm having trouble getting the height from the loaded image... my script is a little different... a lot more messed up, but I don't have time to go back and change everything, so...

I have the thumbnail/buttons on another "page" (frame) and when the thumbnail is clicked, you are taken to specific frame with the photo_loader (my containerMC)
here is the code:

onClipEvent (load) {
photo_loader.loadMovie("examples/photo/event/amcel_medium.jpg", 0, "GET");
_root.serve_contents.photo_button.photo_background _image.subpages.photo_examples_bg._height = photo_loader._height;
}

it works, kind of, in that it resizes the border (photo_examples_bg), but it is resizing it to 1, so its just a line.

if anyone can help I'd appreciate it, thanks.

[scotty]

It's because you define the height when the picture isn't loaded yet.
Try onEnterFrame
onClipEvent(enterFrame){
if(photo_loader.getBytesLoaded==photo_loader.getBy tesTotal&&photo_loader.getBytesTotal!=0&&photo_loader._height!=0){
_root.serve_contents.photo_button.photo_background _image.subpages.photo_examples_bg._height = photo_loader._height;
}
}
something like that, else post your fla;)

scotty(-:

[sipher]

i added a fade to the AS...u just need to add the pic of u dont have it from the first movie


let me know as this goes
or if u have questions or answers


:)
here the AS code


spacing = 10;
containerMC._alpha = 0;
MovieClip.prototype.loadPic = function(pic){
_root.containerMC._alpha = 0;
this.loadMovie(pic);
_root.onEnterFrame = function(){
var t = containerMC.getBytesTotal(), l = containerMC.getBytesLoaded();
if (t != 0 && Math.round(l/t) == 1){
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){
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 = 100;
delete this.onEnterFrame;
Fade();
}
}
};
function Fade() {
var duration = 25;
var step = 100/duration;
this.containerMC._alpha = 0;
this.onEnterFrame = function() {
this.containerMC._alpha += step;
if (this.containerMC._alpha>=100) {
delete this.onEnterFrame;

}
};
}
// fade AS thanks to chino
//http://www.studio-cafecreme.com/

[sipher]

i will be posting the fla later

[niki]

http://www.technicolortiara.com/lipstickface/photos/easterbonnet/

[ter]

This is great. This is perfect.
How can I add a loading message when its loading a image ?

Thank you very much.

I'm searching for the same thing. Can anyone help :ne:

[therockstar]

Maybe it's because it's not checking it's width before resizing.
Change your prototype loadPic in this:
MovieClip.prototype.loadPic = function(pic) {
_root.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;
}
};
};

scotty(-:
Hi all - new here.... this is exactly what I've been looking for, however I have the same problem - this has not fixed it. Now only the first image resizes, and the box stays the same size for the second image - am I missing something?..

Ta

Nick

[scotty]

Welcome to the forums, Nick:)

Can you post your fla (oh no!, your zip) w/o the pictures?

scotty(-:

[therockstar]

Welcome to the forums, Nick:)

Can you post your fla (oh no!, your zip) w/o the pictures?

scotty(-:
Thanks scotty - feel I may be here asking lots of dumb questions - really dont know what I'm doing but we'll see.

Ok, scrub that last one - worked it out - piccies were too big for the movie - resized the movie and the clips appear.... now worries.

Next question though. I've made a little scroll bar with thumbnail buttons within it - I've tried changing the action script on these buttons to the same as the ones in the orignal file, but they dont seem to work - any ideas? file attached.

Ta

Nick

[Cello]

hi therockstar - I add my welcome to scotty's earlier :)

Change your button to:

on (release) {
_root.containerMC.loadpic("pic1.jpg");
}


Have fun ;)

[therockstar]

wicked ;) you guys rock.... never had such a quick response to a question.... huge thanks...



Nick

[scotty]

Thanks Cello, now you saved me some work;)

scotty(-:

[Cello]

No probs scotty ;)

What a wheeze this thread has been :)

@niki - great pics, by the way :)

[Digitalosophy]

excellent job on this fellas.....

how can i make picture1 laod at run time i.e. i want the first image to appear without having to click a button.

thanks!

edit: btw this belongs in best of kirupa...

[scotty]

Depends where you "are" (the path) but for example put in the actionlayer under the prototypes this:
containerMC.loadPic("pic1.jpg");

scotty(-:

[Digitalosophy]

Depends where you "are" (the path) but for example put in the actionlayer under the prototypes this:
containerMC.loadPic("pic1.jpg");

scotty(-:

haha..

last night i must have been tired. i was using loadMovie so it was screwing everything up. Thanks a lot scotty worked like a charm =)

Oh and for anyone following this, my exact code was

container.loadPicture("1");


Like scotty said, it goes underneath the last prototype.

Ahh ok so one last one scotty, this gave me trouble last night as well, i didnt get to give it another go yet but...

I want to space out the buttons vertically i.e. add more space between them. Any ideas?

I have them aligned right and everything just wanna add some more space


thanks!

[scotty]

Thanks Digitalosophy=)
What's the code for the buttons you're using now?

scotty(-:

[Digitalosophy]

i made a rollover effect so really i'm just pointing to different frames in the movieclip


newItem.onRollOver = function() {
this.gotoAndPlay(2);
};
newItem.onRollOut = function() {
this.gotoAndStop(7);
};
newItem.onRelease = function() {
this.gotoAndStop(8);
fadeOut((this.getDepth()));
};
}

[scotty]

Oops, didn't made myself clear I think:)
Because your talking about space between them, I assume you have them dynamically placed?

scotty(-:

[Digitalosophy]

ahh lol my bad scotty i misunderstood you........

yes whats going on the the mc with the dynamic textarea inside it gets duplicated


function parseIt() {
XMLpart = importXML.firstChild;
var halfPic = Math.round((XMLpart.childNodes.length) / 8);
for (var i = 0; i < XMLpart.childNodes.length; i++) {
var naam = XMLpart.childNodes[i-1].attributes.name;
newItem = menu.attachMovie("button", "button" + i, i);
if (naam.length <= 19) {
newItem.display.text = naam;
}
if (naam.length > 19) {
newItem.display.text = naam.slice(0, 17) + " ...";
}
if (i < halfPic) {
newItem._y = (i * 11), newItem._x = 0;
}
if (i >= halfPic) {
newItem._y = ((i - halfPic + 1) * 11), newItem._x = 117;
}
newItem.onRollOver = function() {
this.gotoAndPlay(2);
};
newItem.onRollOut = function() {
this.gotoAndPlay(3);
};
newItem.onRelease = function() {
fadeOut((this.getDepth()));
};
}


to be honest scotty i'm lost with this part of the code... =(

[scotty]

LOL, don't get lost.
Where the code says:
newItem._y = (i * 11)
and
newItem._y = ((i - halfPic + 1) * 11)
change the 11 in a higher number:)

scotty(-:

[Digitalosophy]

=) thanks scotty!

[scotty]

You're welcome:thumb:

[brintonwhite]

Scotty, I am using the file originally sent in with also the extra code you supplied so that the picture will fade in which is this code:

spacing = 10;
containerMC._alpha = 0;

MovieClip.prototype.loadPic = function(pic){
_root.containerMC._alpha = 0;
this.loadMovie(pic);
_root.onEnterFrame = function(){
var t = containerMC.getBytesTotal(), l = containerMC.getBytesLoaded();
if (t != 0 && Math.round(l/t) == 1){
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) {
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 += 5;
if (_root.containerMC._alpha>90) {
_root.containerMC._alpha = 100;
delete this.onEnterFrame;
}
}
};
};


My problem is, you told digitalosophy to enter some code so that the pic will load in at once but I have tried inserting this code but it does not work for me. Where does the code go in the actionscript above?

Thank you.

[scotty]

At the bottom:)
And in the code above change this line
if (t != 0 && Math.round(l/t) == 1){

in this:
if (t != 0 && Math.round(l/t) == 1&&containerMC._width>0){

scotty(-:

[therockstar]

gets better and better. ;)

Now how do we add a preload bar to the image so the uesr sees that the picture is loading while he/she waits?....

Nick

[brintonwhite]

Yes Scotty, it works perfect.

Thank you.

As the rockstar says, a preloader would be great do you have any thoughts on this?

Cheers mate. :azn:

[scotty]

No problem brintonwhite=)
Preloader is coming if I have a moment;)

scotty(-:

[therockstar]

Another question - I suck at this....

I now have the resizeable photo album working great. Bow I'm trying to call the entire .swf from within another movie (full flash page).

I now get error messages because the 'loadpic' command is trying to load it to the _root of the main movie. I've tried replacing with _parent and this, but doesnt work because the container movie is on the same level as the buttons calling it (that make sense?)

So - simple question. once the movie is loaded from within another swf, what do I need to change within the code to make it work!!!

ta

Nick

[scotty]

Simply skip the _root before containerMC (everywhere)

scotty(-:

[therockstar]

Simply skip the _root before containerMC (everywhere)

scotty(-:
Thanks for the quick reply scotty.!

Unfortunately this doesnt work. the first picture loads ok but nothing happens when I click the buttons. zip attached. I've only modified the top 3 buttons just to test it.....

Any other ideas?

Nick

[scotty]

Grrrrr, lol, come back to you later

scotty(-:

[therockstar]

Cheers scotty, hugely appreciated..

I think its just somethign to do with the levels the movies are at. The buttons sit within a MC themselves so they need to direct the images to the containerMC. This was fine while it was a standalone movie as I could use the _root command. Now its embedded in another movie this doesnt work..

I think...

lol

Anyway, look forward to your solution ';)

Nick

[scotty]

Can't help you with a swf, I need the fla.

scotty(-:

[jimhere]

Scotty (and others), I've been applying some of the details from this thread to the "rebofascroll" thread of last month, where we made a similar "dynamic fade gallery from one or more scroll panes".
In that gallery you modified it (back then) to have multiple thumb panes, with a text array ("array.txt") to set up the galleries. Is there something similar than can be used for text captions or image titles?

[brintonwhite]

jim, do you have the url to that thread?

[therockstar]

Can't help you with a swf, I need the fla.

scotty(-:
erm.... duh.... dufus that I am...

zip file uploaded here:

http://www.therockstar.pwp.blueyonder.co.uk/filetransfer/help.zip

Full page.fla opens has the buttons.swf loaded into it and then clicking 'news' on the buttonsbrings in the 'news.swf'

should work

ta

Nick

[scotty]

Nick on your buttons in the scroll:
_parent._parent._parent.containerMC.loadpic("pic12.jpg");

and you removed one _root too many:
_root.onEnterFrame = function () {

scotty(-:

[therockstar]

Nick on your buttons in the scroll:
_parent._parent._parent.containerMC.loadpic("pic12.jpg");

and you removed one _root too many:
_root.onEnterFrame = function () {

scotty(-:Scotty - you are a star ;).... now can you explain why so many parents? (for future reference...)

Also have another question (while I'm here...)

The resizing box is fantastic and looks great.... but ... is there a way of fixing the top edge so pictures always hit the top of it and resize the other 3 sides?......(I have some majorly different sized pictures and it looks weird with them moving all over the screen...)...

Then I'll shut up for a bit.. ;)

Nick
p.s. thanks again

[scotty]

_parent >>>>= _root, where containerMC is
...._parent >>>>= scroller
........_parent >>>>= Masked Text
............Text, where your buttons are

And on your other question, yep it's possible.
Change the registrationpoint of your border mc (that's now in the middle) to top left,
in the resizeme function skip the containerMC._x/_y and place border mc and containermc where you want:-)

scotty(-:

[jimhere]

brintonwhite, here's the similar thread (http://www.kirupaforum.com/forums/showthread.php?t=52290&highlight=jimhere). But I'm still not sure how I'd tie in text descriptions to the array...

[therockstar]

_parent >>>>= _root, where containerMC is
...._parent >>>>= scroller
........_parent >>>>= Masked Text
............Text, where your buttons are

And on your other question, yep it's possible.
Change the registrationpoint of your border mc (that's now in the middle) to top left,
in the resizeme function skip the containerMC._x/_y and place border mc and containermc where you want:-)

scotty(-:

Aha... now I understand..

Second answer didnt work - worked for the container - that stays locked to the top left hand corner, but the border continues to resize itself around the centre...

?

Nick

[scotty]

LOL, it does work=)
Maybe place the border topleft as well?

scotty(-:
{you have to look for the buttons, I only edit three of them(12,11,10)}

[therockstar]

LOL, it does work=)
Maybe place the border topleft as well?

scotty(-:
{you have to look for the buttons, I only edit three of them(12,11,10)}
Absolutely bizarre.

I've done exactly the same thing on my file, and it doesnt work - see attached... have I missed something completely?

Nick

[scotty]

You forgot about the border registrationpoint.
Double-click border and you'll see that it's in the middle, should be top-left;)

scotty(-:

[therockstar]

You forgot about the border registrationpoint.
Double-click border and you'll see that it's in the middle, should be top-left;)

scotty(-:
This is doing my nut in....

I double click the border. Click the free transform tool, grabe the registration point and stick it in the corner, but the little cross stays in the middle of the box...... really am missing something...

Nick

[lunatic]

Yep. ;)

Select your border (once you are inside of it - so the artwork itself highlights when you double click it) and go to the align toolbox. Align the border to the top left corner or the registration point (make sure the 'stage' button is pressed). Then back out one level and move the border movie clip back to where you want it because it will move when you change the reg point.

[scotty]

Thank you, lunatic=)
Another way to do it, select your border, click the topleftbox of the 9 boxes in the info panel and set x/y>>>0/0

scotty(-:

[therockstar]

Yep. ;)

Select your border (once you are inside of it - so the artwork itself highlights when you double click it) and go to the align toolbox. Align the border to the top left corner or the registration point (make sure the 'stage' button is pressed). Then back out one level and move the border movie clip back to where you want it because it will move when you change the reg point.
Waahay..

So this means the tutorial on the kirupa tutorials secion is wrong then.(http://www.kirupa.com/developer/mx/rpoint.htm)... been having this problem for ages without a cure.... now I understand..

Wonderfull!

Nick

[Cello]

@ scotty - you're doing a man's job on this one :)

I think it's important that you are thanked properly for the excellent contribution you've made to this thread and to your ongoing efforts to help make kirupa.com even greater. I admire your work and appreciate your time.

You could make 'resizing' history with this - nearly 200 downloads of the original file which you've made into something much better! ;)

My grateful thanks.

Cello

PS I've been trying to get a) preloaders to work and b) buttons to move with the resizing but regrettably no success yet. Just call me a dipstick :D

[therockstar]

I need a beer. Thought this was going to be really simple - turning into a pain in the ***...

Now I'm suffering from massive ghosting problems.... argh....

Edit: Just readin Cello's response above, and being a complete Newbie, I should add a massive thank you for all the help you've been throwing around - excellent job....

nick

[scotty]

@Cello, too much honour :blush:

Here's a preloader.
Make a loadbar mc and give it the instancename "bar".
Make a textfield, instancename "loadText".
Now replace the loadPic prototype with this code:

MovieClip.prototype.loadPic = function(pic) {
containerMC._alpha = 0;
this.loadMovie(pic);
this._parent.onEnterFrame = function() {
var t = containerMC.getBytesTotal(), l = containerMC.getBytesLoaded();
bar._visible = 1;
per = Math.round((l/t)*100);
if (t != 0 && Math.round(l/t) == 1 && containerMC._width != 0) {
var w = containerMC._width+spacing, h = containerMC._height+spacing;
border.resizeMe(w, h);
bar._visible = 0;
loadText.text = "";
delete this._parent.onEnterFrame;
} else {
bar._width = per;//gives the bar a max width 100
loadText.text = per+" % loaded";
}
};
};

This gives the loadbar a max width 100, if you need more, multiply per with the factor you want.
example: you want your max. width to be 250, the code should be:
[code] bar._width = per*2.5;

scotty(-:

[Cello]

LMAO ;)

How many downloads now, thx to the loader?!

Thx scotty :)

PS @therockstar - well said, and appropriate too.

[Cello]

@therockstar - well said, and appropriate too.

[therockstar]

Back again....

right this is all fitting into my new site fantastically, two issues:

1. Couldnt get your preloader to work - did everything as you said but ended up with nothing happening in the swf file (even debugging)

2. I have some pretty big pictures loading into the 'news' page I'm using, and as you've seen, this will be a loaded movie within the main site. Is there a way of adding a scroll bar which allows the user to move the picture up and down once its loaded - maybe by scrolling the registration point of the containter and border up and down?...

any ideas?

Cheers

Nick
p.s. I'll have to get a beer shipped over to you for all your help ;)_

[jimhere]

The preloader was invisible for me, too. Where do "bar" and "loadtext" reside? On the stage? In another MC?

[scotty]

"Bar" and "loadtext" reside on (main) stage.
And you possibly have to upload it to your server to see it working;)

scotty(-:

[jimhere]

Thanks. I guess the picts were too small for the loader to kick in. Online the pop up quickly.

[flashnick]

First time in the wonderful world of Kirupa. This thread has answered so many of my "how the hell does that work..." kind of questions. I've just tested it live and it works like a dream.

You guys are a godsend to a 40 year old dislexic, who cant tipe or spell.

My little idea is here, if anyone wants to view it.
http://nickpayen.members.beeb.net/resize/resizeelastic.html

I cant thank Kirupa enough. It spart of daily routine now.
I'll be back

thanx Nick

[scotty]

Welcome to the forums, Nick=)

scotty(-:

[jimhere]

flashnik, is that you in NYC?

[Jeff Wheeler]

Podlob has got his own domain, you can probably send it to anything@podlob.com, by the way, I contacted him a while back about those... he's a nice guy but doesn't have all of the fla's on his downloads page. He also owns squidfingers.com.

[sWo0p]

I made a little gallery using this fla/script but somehow there is a little bug :(..
some pictures open in bottum richt of my flash and border goes very small.. then if i press again it works fine :( how can i resolf this?


+ is'nt there a script that can dynamicly get all pictures in a directory make a number to click on... so with big galleries you dont have to make huge ammound of thumbnails?

+ and i like to see script that i can use with this that show files size and pixel size...

Just a few i was wondering about

[scotty]

@sWoOp, did you use the original .fla?
You have to tell flash to wait until the pic is completely loaded else the pics width will return 0 ;) (see post #78)

scotty(-:

[sWo0p]

no i updated it with surtan script update from you.. but i looks like i fixed the problem on my own.. thx though :)

did you think of my other 2 question..????

[Ubik]

for your others questions, youl'll have to use some server side script like php, take a look in th server side forum here on kirupa, i think this has been discussed

[crapitoutjim]

Wow this is an amazing thread, am following it with baited breath, has anyone figured out how to make the buttons move with the pic border when each image initially loads up??

Any ideas much appreaceted

crapitoutjim

[ter]

Hey this thread is AWESOME!
Does anyone know how to add a "previous" and "next" button to the resizing slideshow in addition to the thumbnails?

here is what I have created so far if anyone is interested:
http://www.marriagestory.com/johnwalz/index.htm

:hr: in search of the answer,
Ter

[jimhere]

Ter, you made the scroller an Easing scroller. Groovy. Are the gold/sepia button highlights on each button, or is it a single MC repeated?

[ter]

Glad you like it jimhere. The gold rollover is a MC that I place on the over state of every button. The person I am doing the site for is requesting that I add a "next" and "previous" button to the gallery so they can scroll through without clicking on a thumbnail, but I'm stumped. any help would be grrrreatly apreciated.
peace
Ter

[Digitalosophy]

Grrrr, I'm having an odd problem here.

There seems to be a glitch in my code somewhere.

http://www.hylansupply.com/v2/template/

if you click showroom sometimes you will find a glitch i.e. image loads in a wacky place and border stays real small.

sry for the long code but im in trouble here ;)


////////////////////////////////////////
//////// Button Sound Object
///////////////////////////////////////

myButtonSound = new Sound();
myButtonSound.attachSound("buttonSound");

// End Button Sound

////////////////////////////////////////
//////// Start Button Rollover Effects
///////////////////////////////////////


/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////// PICTURE LOADER MADE BY FLAX ////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////FLAXCREATURES/////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////// http://flaxcreatures.acehosts.net /////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
name._x = 400;
name._y = 50;
preloader._alpha = 0;
/// Code to load the XML data
importXML = new XML();
importXML.ignoreWhite = true;
var XMLfile = "pictures.xml";
importXML.load(XMLfile);
importXML.onLoad = function(success) {
if (success) {
parseIt();
}
else {
trace("XML Error nr " + XMLpart.status);
}
};
function parseIt() {
XMLpart = importXML.firstChild;
var halfPic = Math.round((XMLpart.childNodes.length) / 10);
for (var i = 0; i < XMLpart.childNodes.length; i++) {
var naam = XMLpart.childNodes[i-1].attributes.name;
newItem = menu.attachMovie("button", "button" + i, i);
if (naam.length <= 19) {
newItem.display.text = naam;
}
if (naam.length > 19) {
newItem.display.text = naam.slice(0, 17) + " ...";
}
if (i < halfPic) {
newItem._y = (i * 11), newItem._x = 0;
}
if (i >= halfPic) {
newItem._y = ((i - halfPic + 1) * 15), newItem._x = 117;
}
newItem.onRollOver = function() {
myButtonSound.start(0,1);
this.gotoAndPlay(2);
};
newItem.onRollOut = function() {
this.gotoAndStop(7);
};
newItem.onRelease = function() {
fadeOut((this.getDepth()));
};
}
menu.attachMovie("description", "description", 0);
menu.description._x = 0;
menu.description._y = ((i - halfPic + 1) * 11);
}
spacing = 25;
container._alpha = 0;
/// Finishing :: preloader && dynamic buttons with XML file
MovieClip.prototype.fadeOut = function(pictNum) {
preloader._alpha = 0;
_root.onEnterFrame = function() {
if (container._alpha > 5) {
container._alpha *= 0.92;
}
if (container._alpha < 10) {
_root.loadPicture(pictNum);
}
};
if (container._alpha == 0) {
_root.loadPicture(pictNum);
}
};
MovieClip.prototype.loadPicture = function(pictNum) {
var bgWidth = bg._width;
var bgHeight = bg._height;
var x = 20;
this = _root.container;
_root.container._alpha = 0;
fotoNummer = pictNum
this.loadMovie("picture" + fotoNummer+ ".jpg");
preloader._width = 1;
preloader._alpha = 100;
preloader._y = (bg._y + (bg._height / 2) - 12.5);
preloader._width = bg._width - 25;
_root.onEnterFrame = function() {
var t = container.getBytesTotal(), l = container.getBytesLoaded();
preloader._height = ((l / t) * (bgHeight - 50) + x);
if (preloader._height === (bgHeight - 50) + x) {
var w = container._width + spacing, h = container._height + spacing;
bg.resizeMe(w, h);
delete _
root.onEnterFrame;
}
};
menu.description.description.text = XMLpart.childNodes[pictNum-1].attributes.description;
menu.description.name.text = XMLpart.childNodes[pictNum-1].attributes.name;
};
MovieClip.prototype.resizeMe = function(w, h) {
var speed = 3;
preloader._alpha = 0;
this.onEnterFrame = function() {
name._x = this._x;
name._y = this._y - (this._height / 2) - 4;
this._width += (w - this._width) / speed;
this._height += (h - this._height) / speed;
if (Math.abs(this._width - w) < 1) {
this._width = w;
this._height = h;
_root.container._x = this._x - this._width / 2 + spacing / 2;
_root.container._y = this._y - this._height / 2 + spacing / 2;
container.fadeIn();
delete this.onEnterFrame;
}
menu._x = Math.round(this._x + this._width / 2 + 25);
menu._y = Math.round(this._y - this._height / 2 + 25);
};
};
MovieClip.prototype.fadeIn = function() {
this = container;
this._alpha = 2;
_root.onEnterFrame = function() {
if (container._alpha > 5) {
preloader._alpha *= 0.75;
}
if (container._alpha < 110) {
container._alpha *= 1.25;
}
};
};
container.loadPicture("1");


thats all the code right there, hopefully one of you guys can help me out.

thanks
digital

[imported_mucho]

yeah....gotta say it too! Wicked thread going on here...scotty, cello .... def. the men.
has the q about forward / next buttons be cleared? couldn't find anything here...
appreciated,

m.

[scotty]

Digital, add the following in the if statement of your loadPic prototype
if(preloader._height===(bgHeight-50)+x&&container._width>0){

or :
if(l==t&&t!=0&&container._width>0){

Hope that helps:)

scotty(-:

[Digitalosophy]

thanks for the reply scotty..

however i'm not following

MovieClip.prototype.loadPicture = function(pictNum) {
if(l==t&&t!=0&&container._width>0){
var bgWidth = bg._width;
var bgHeight = bg._height;
var x = 20;
this = _root.container;
_root.container._alpha = 0;
fotoNummer = pictNum
this.loadMovie("picture" + fotoNummer+ ".jpg");
preloader._width = 1;
preloader._alpha = 100;
preloader._y = (bg._y + (bg._height / 2) - 12.5);
preloader._width = bg._width - 25;
_root.onEnterFrame = function() {
var t = container.getBytesTotal(), l = container.getBytesLoaded();
preloader._height = ((l / t) * (bgHeight - 50) + x);
if (preloader._height === (bgHeight - 50) + x) {
var w = container._width + spacing, h = container._height + spacing;
bg.resizeMe(w, h);
delete _
root.onEnterFrame;
}
};
menu.description.description.text = XMLpart.childNodes[pictNum-1].attributes.description;
menu.description.name.text = XMLpart.childNodes[pictNum-1].attributes.name;
};
}


i tryed both if statments but i don't think I am applying them correctly.

sorry for all the questions but i'm almost done i promise ;)

[ziggyz27]

Hey Scotty,
Just joined the forum and This is the best forum/thread I have found yet... an excellent tutorial too.
I am planning on using your code, I have read each n every post.. way to go!

I am not sure as to how to use the scroller, since I will be using dynamically generated thumbs loaded via php script. A small input on how to load the thumbs in the scroll bar will help allot. I have not created this yet but I promise to add to this forum/thread complete tutorial I am preparing using your slideshow along with database and php script to use. I am almost there just need to figure out loading thumbs dynamicaly and adding them to scroller.

This is dumb but I cant seem to be able to manually add a thumb nail ... is there an image size/dimensions constraint? I imported another image converted it to symbol and added the action


on(release){
containerMC.loadPic("pic3.jpg");
}


but all in vain! I think I am losing my mind what am I missing here?


Thanx for any help you can get me on this.

:rambo: FLASH newbie, PHP GURU

[jimhere]

Obviously this thread should be added to the tutorials as an advanced version of the Kirupa Photo Gallery.
Accomplished by this Thread:
Resizable thumbnail gallery with thumbs loaded into a scroll pane, using the same images as big pict, all images being dynamically loaded; thumbnails are forced to specific dimensions so final big pict size doesn't matter; thumbs are grayed (alphaed) out for "visited"; option to have thumbnail pane loaded separately; first big pict loads automatically; progress bars for each big pict load; ideal for Easter Bonnets.

So I went through the thread and the only unrealized fantasies I found were:
1. Text captions with loaded photo?
2. Buttons move with the pic border? (not sure what this one means)
3. Cross fade instead of Fade In / Fade Out?
4. Previous and Next buttons?

Scotty, Cello, and the rest of you will of course be paid in good wishes for their talented patience.

[crapitoutjim]

Hi There,

Fantastic thread, by the way. What I meant by the buttons moving with the pic border is if you look at the original file on podlob.com, way back at the beginning of this thread then you will see that when a button is clicked the buttons move with the picture border until the image appears. Then when the next button is clicked the buttons move again with the border. Its easier if you look at the original file:

http://www.podlob.com

and click on resizing slide show ( first link on left hand side)

Cheers for all great stuff

[niki]

I am so excited at where this thread is taking us!
DYNAMICALLY LOADED THUMBS! Oh Huney! Bring It On!
Im going to wait till you guys get that all figured out before I start trying it myself.

I added the code to load the first picture automatically and am anxious to dive into the scrolling thumbnail gallery - thanks everyone for making my actionscript dream a reality!!!

heres where ive used the galleries so far:

http://www.technicolortiara.com/mutemath/

http://www.technicolortiara.com/lipstickface/photos/easterbonnet/index.htm

http://www.technicolortiara.com/lipstickface/photos/jacksonville/sherry_haydell.htm

SHOW ME HOW YOURE USING THE CODE!! :b:

[Digitalosophy]

thanks for the reply scotty..

however i'm not following

MovieClip.prototype.loadPicture = function(pictNum) {
if(l==t&&t!=0&&container._width>0){
var bgWidth = bg._width;
var bgHeight = bg._height;
var x = 20;
this = _root.container;
_root.container._alpha = 0;
fotoNummer = pictNum
this.loadMovie("picture" + fotoNummer+ ".jpg");
preloader._width = 1;
preloader._alpha = 100;
preloader._y = (bg._y + (bg._height / 2) - 12.5);
preloader._width = bg._width - 25;
_root.onEnterFrame = function() {
var t = container.getBytesTotal(), l = container.getBytesLoaded();
preloader._height = ((l / t) * (bgHeight - 50) + x);
if (preloader._height === (bgHeight - 50) + x) {
var w = container._width + spacing, h = container._height + spacing;
bg.resizeMe(w, h);
delete _
root.onEnterFrame;
}
};
menu.description.description.text = XMLpart.childNodes[pictNum-1].attributes.description;
menu.description.name.text = XMLpart.childNodes[pictNum-1].attributes.name;
};
}


i tryed both if statments but i don't think I am applying them correctly.

sorry for all the questions but i'm almost done i promise ;)

bump bump ;) this is driving me mad

[sipher]

hey Digital try it like this if doesnt work let me know ok
i tried it and it works fine

MovieClip.prototype.loadPicture = function(pictNum) {
if(l==t&&t!=0&&container._width>0){
var bgWidth = bg._width;
var bgHeight = bg._height;
var x = 20;
this = _root.container;
_root.container._alpha = 0;
fotoNummer = pictNum
this.loadMovie("picture" + fotoNummer+ ".jpg");
preloader._width = 1;
preloader._alpha = 100;
preloader._y = (bg._y + (bg._height / 2) - 12.5);
preloader._width = bg._width - 25;
_root.onEnterFrame = function() {
var t = container.getBytesTotal(), l = container.getBytesLoaded();
preloader._height = ((l / t) * (bgHeight - 50) + x);
if (preloader._height === (bgHeight-50)+x &&container._width>0) {
var w = container._width + spacing, h = container._height + spacing;
bg.resizeMe(w, h);
delete _
root.onEnterFrame;
}
};
menu.description.description.text = XMLpart.childNodes[pictNum-1].attributes.description;
menu.description.name.text = XMLpart.childNodes[pictNum-1].attributes.name;
};

[scotty]

Busy, busy, busy
Digital, I think sipher answered your question;)

scotty(-:

[scotty]

@crapitoutjim, have a look at this thread;)
http://www.kirupaforum.com/forums/showthread.php?t=54090

scotty(-:

[imported_mucho]

Hi All,

how about making the gal a little more enjoyble when having a lot of pics and larger ones (file size). Would it be possible to have the current picture remain until the new one is completely loaded AND 2. is it somehow possible to cache the pictures that have been viewed?!!! (I'm sure it is)

Thanks,

m.

[Digitalosophy]

sipher/scotty:

i cannot get this to work.....

it seems because I am loading an inital 1st image at run time.

and whats wierd is it works fine in flash, but when it's published things start acting wierd.

here is a link the working files
http://www.hylansupply.com/v2/template/showroom/index.php

and are the source files.
EDITED :::::::::::::::::::::::::::

thanks!

[scotty]

It's working fine here.
In the fla you've uploaded there was no statement for the width, see sipher's post;)

scotty(-:

[ter]

Since this forum is SWEET and I 've been gettin' so much help from all these great peeps, I thought I would add to the goodness. Based on some requests, I've attached an easing scroller FLA to go along with the photo gallery.

I do have one more question that i'm sure the gurus here can figure out.
How do I add a "previous" and "next" button to the resizing slideshow gallery?

cheers :beer:
ter

[Digitalosophy]

hey scotty:

please dont think i disregarded your or sipher's post..

however when i use sipher's code nothing works at all (odd i know)

sry for making you baby me through this

could you please post the fla? or just the entire code even.... once i get this glitch out im all done on this project and i can relax and stop bothering you......

thanks man

[sipher]

name._x = 400;
name._y = 50;
preloader._alpha = 0;
/// Code to load the XML data
importXML = new XML();
importXML.ignoreWhite = true;
var XMLfile = "pictures.xml";
importXML.load(XMLfile);
importXML.onLoad = function(success) {
if (success) {
parseIt();
}
else {
trace("XML Error nr " + XMLpart.status);
}
};
function parseIt() {
XMLpart = importXML.firstChild;
var halfPic = Math.round((XMLpart.childNodes.length) / 2);
for (var i = 0; i < XMLpart.childNodes.length; i++) {
var naam = XMLpart.childNodes[i-1].attributes.name;
newItem = menu.attachMovie("button", "button" + i, i);
if (naam.length <= 19) {
newItem.display.text = naam;
}
if (naam.length > 19) {
newItem.display.text = naam.slice(0, 17) + " ...";
}
if (i < halfPic) {
newItem._y = (i * 11), newItem._x = 0;
}
if (i >= halfPic) {
newItem._y = ((i - halfPic + 1) * 11), newItem._x = 117;
}
newItem.onRollOver = function() {
this.gotoAndPlay(2);
};
newItem.onRollOut = function() {
this.gotoAndPlay(3);
};
newItem.onRelease = function() {
fadeOut((this.getDepth()));
};
}
menu.attachMovie("description", "description", 0);
menu.description._x = 0;
menu.description._y = ((i - halfPic + 1) * 11);
}
spacing = 25;
container._alpha = 0;
/// Finishing :: preloader && dynamic buttons with XML file
MovieClip.prototype.fadeOut = function(pictNum) {
preloader._alpha = 0;
_root.onEnterFrame = function() {
if (container._alpha > 5) {
container._alpha *= 0.92;
}
if (container._alpha < 10) {
_root.loadPicture(pictNum);
}
};
if (container._alpha == 0) {
_root.loadPicture(pictNum);
}
};
MovieClip.prototype.loadPicture = function(pictNum) {
var bgWidth = bg._width;
var bgHeight = bg._height;
var x = 20;
this = _root.container;
_root.container._alpha = 0;
fotoNummer = pictNum
this.loadMovie("picture" + fotoNummer+ ".jpg");
preloader._width = 1;
preloader._alpha = 15;
preloader._y = (bg._y + (bg._height / 2) - 12.5);
preloader._width = bg._width - 25;
_root.onEnterFrame = function() {
var t = container.getBytesTotal(), l = container.getBytesLoaded();
preloader._height = ((l / t) * (bgHeight - 50) + x);
if (preloader._height === (bgHeight-50)+x &&container._width>0) { ///this code is the one u need to pay attention to...
var w = container._width + spacing, h = container._height + spacing;
bg.resizeMe(w, h);
delete _root.onEnterFrame;
}
};
menu.description.description.text = XMLpart.childNodes[pictNum-1].attributes.description;
menu.description.name.text = XMLpart.childNodes[pictNum-1].attributes.name;
};
MovieClip.prototype.resizeMe = function(w, h) {
var speed = 3;
preloader._alpha = 0;
this.onEnterFrame = function() {
name._x = this._x;
name._y = this._y - (this._height / 2) - 4;
this._width += (w - this._width) / speed;
this._height += (h - this._height) / speed;
if (Math.abs(this._width - w) < 1) {
this._width = w;
this._height = h;
_root.container._x = this._x - this._width / 2 + spacing / 2;
_root.container._y = this._y - this._height / 2 + spacing / 2;
container.fadeIn();
delete this.onEnterFrame;
}
menu._x = Math.round(this._x + this._width / 2 + 25);
menu._y = Math.round(this._y - this._height / 2 + 25);
};
};
MovieClip.prototype.fadeIn = function() {
this = container;
this._alpha = 2;
_root.onEnterFrame = function() {
if (container._alpha > 5) {
preloader._alpha *= 0.75;
}
if (container._alpha < 110) {
container._alpha *= 1.25;
}
};
};
container.loadPicture("1");


here the AS

[scotty]

And here's your fla:)

scotty(-:

[sipher]

how do place a zip or fla here if dont mine me asking scotty?

[scotty]

Under each post on the left you see the "post reply" button, if you press that, you'll get a new window. Under "additional options" you see "attach files".
I think now you're posting with the quick reply window;)

scotty(-:

[ziggyz27]

Hi Scotty,
Can you help me figure out how to load the images Thumbs AND/OR Text dynamically? I need some assistance in understanding this to get me started!

Thanx :ne:

[ziggyz27]

Digitalosophy!
If you dont mind, can I use your code as part of the tutorial?
I see two parts of it, One is based on what you have thats Dynamic Text loads images and Secondly Another version is Dynamic Image loads Images (this I have yet to figure out )

Thanx :ch:

[scotty]

Here's an version with previous and next buttons plus text:)
http://home.wanadoo.nl/gertvinke/kirupa/V2.zip

scotty(-:

[imported_mucho]

Here's an version with previous and next buttons plus text:)
http://home.wanadoo.nl/gertvinke/kirupa/V2.zip

scotty(-:

SWEEEET! Thanks Scotty - as usual.

M.

[Digitalosophy]

you guys make me all warm inside =)

thanks a lot fellas everthing works now.......

Scotty- please un attach the zip as its a client's file.

i will make a mock and post it for anyone to use.

thanks again!

[scotty]

Oops, didn't think of that.
It has been deleted=)

scotty(-:

[imported_mucho]

Hi (again....ahhhhh ;-) ),

Scotty, I've tried you v2 script which works perfectly fine of course. Now I have tried to insert the next / prev buttons as well and the thing will totally screw up of course. Below is the script I use, the XML part is seperate. any ideas?

thanks,
m.

[ziggyz27]

Hi Guyz,
I am not sure why but these pics refuse to Load in the slideshow,
can you tell me why?
I have even tried resizing them, reducing their size etc.... they just dont load

-- thanx

[scotty]

@mucho, check your paths. In the resizeBorder function navmc.nextb._x = etc....(all the buttoncode)
In the button functions _root.containerMC.loadPic(blabla)...or if you load it in another movie _parent._parent.containerMC (I think)
@ziggy27, resave those pictures as non-progressive jpg's, worked here;)

scotty(-:

[crapitoutjim]

Hey Scotty and Ter

Thanks for the assistance with the moving menu buttons, I have'nt managed to have a good look yet, but it seems to be what I need.

And Ter thanks for the easing scroller, its the bees knees

Thanks so much for the great thread

[as_clark20]

ziggyz27

maybe your pictures refuse to load because they are PROGRESSIVE jpg's. Flash won't display these types of jpg. Have you checked to see if they are?

[ziggyz27]

While I research this just a quick question!
Any idea how to read an Image's Progressive Property? via Javascript? or any other method?

[scotty]

I resaved the pictures for web in Photoshop and unchecked the "progressive" box.

scotty(-:

[ziggyz27]

I understand that but in case there are other users uploading i wanted to check the progressive/interlacing property.

so is there a way to check that?

[scotty]

I don't know, but I've found this:
http://forums.devshed.com/archive/t-76302
try google;)

scotty(-:

[dpemokid]

I have a question, I tried this on my own but it didn't work, is it possible to use the Resizing Border for Loading Movies instead of Pictures? If there is, is there any additional code that needs to be added? Cos its not working...

[scotty]

Movies as in swf's? Then you have to change nothing, except for the code on your buttons:)
To be sure flash "reads" the proper width/height of your swf, put a (transparent) background mc in it with width/height of your fla.

scotty(-:

[dpemokid]

and how do I give it a transparent bg?

[scotty]

dpemokid, i edit my post;)
Hope it's clear now.

scotty(-:

[dpemokid]

ok...cool...thanx! :)

[scotty]

=)

[dpemokid]

I am sorry, But I tried and I can't do it!!! here if the file:

www.angelfire.com/crazy3/gotnofriends13/josiahsmovie2.fla (http://www.angelfire.com/crazy3/gotnofriends13/josiahsmovie2.fla)

Lemme explain to you...when u click on the Marquee layer in the movie...a little box appears on the top...double click on that and it'll take u to the movie...and when the movie intro thingy is over, I want the "Pictures" button to load "resizeBorder.swf" in the container I have on Scene 1...hope u cvan help me!
here is the ResizeBorder File:

www.angelfire.com/crazy3/gotnofriends13/resizeBorder.fla (http://www.angelfire.com/crazy3/gotnofriends13/resizeBorder.fla)

[scotty]

dpemokid, check your PM;)

scotty(-:

[dpemokid]

ahhhh!!! http://www.angelfire.com/crazy3/gotnofriends13/pictures.html look...if you go there, the pictures don't load right...is there anything wrong with the actionscript? Here is the file:

www.angelfire.com/crazy3/gotnofriends13/resizeBorder.fla

[sWo0p]

dpemoid check topic #79 or #78 you need to add the preloading bit.. cos some of your pix dont work as they suppos to... :P

[niki]

Is there a way to have the Previous and Next buttons not move? I want them to stay in the same place no matter what size the photos resize to.
Ive had a bunch of photographers give their opinion of what makes a great gallery and they all say for functionality the previous and next buttons need to remain in the same place so you dont have to look for them with your mouse every time.

Is this possible?

[scotty]

Remove the code of the buttons from the resize me prototype and put them where you want;)

scotty(-:

[niki]

AWESOME! Thank you!

[scotty]

You're welcome:)
LOL, I let the buttons move, because I was thinking, if I give them a solid place, next question will be: can the buttons move?

scotty(-:

[niki]

yeah really!
Hey - ive downloaded the V2 fla - wheres the resizeme prototype .fla?

[niki]

Ignore that last question - Ive got it working !

[scotty]

Great=)

[niki]

I stationed the next and previous buttons and sort of eliminated the thumbnails since they werent dynamically loading and I didnt want to confuse myself with them - and I added my own photos - the strangest thing is they dont do that faded resize thing now. they just click over next next next without the nifty fading resize. I broke it! WHAAAA!!! :h:

http://www.technicolortiara.com/V2_niki.zip

take a look

[scotty]

You've left out the fading in your code:
MovieClip.prototype.resizeMe = function(w, h, pic) {
var speed = 3;
this.onEnterFrame = function() {
this._width += (w-this._width)/speed;
this._height += (h-this._height)/speed;
picinfo._y = nextb._y-5;
picinfo.info.text = tArray[pic];
picinfo._x = border._x-picinfo._width/2;
if (Math.abs(this._width-w)<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 += 5;
if (containerMC._alpha>90) {
containerMC._alpha = 100;
delete this.onEnterFrame;
}
}
};
};

scotty(-:

[ter]

Hey scotty,
I cant get my thumnbail gallery to work with the "next" and "previous" buttons. I am going to have my thumbs on the left side of the screen but they will not call the images with the "next" and "previous" buttons code on the page. thanks in advance for any help
ter

[scotty]

ter, is the path in the code of your thumbs correct?

scotty(-:

[scotty]

@niki, the if statement for the width in my code isn't quite right.
It should be:
if (Math.abs(this._width-w)<1 && Math.abs(this._height-h)<1) {

sorry:(

scotty(-:

[eferna]

Hi I used this tutorial and its excellent. My question is once you add a mask to the button, the image does not show up. It must be something easy that im missing. Here is the fla.

[synkop]

Hmmm.... how do you load the first pic in V2 in runtime (whitout having to click any of the buttons) Cant seem to get it to work.... :h:

[scotty]

@eferna, your containerMC is in the masked layer, put it in another one and it will work;)

@synkop, put this in the action layer (at the bottom):
containerMC.loadPic("pic1.jpg");

scotty(-:

[artezt]

Hey scotty, I've had a great experience learning more and more of the scripting in flash thanks to this thread, but now I'm curious, in the code there must be something limiting the amount of images that I can load via the xml doc. Because I seem to be limited to 14 images for some reason. Once I get to the 14th image the buttons go to the 0 image again and when I rollover the other images (15-23), they are obviously buttons, but nothing shows up in the info text box below the thumbs.

Is there a part of the code that needs to be modified to allow more images to be loaded via the xml file or is 14 the limit?

[artezt]

Never mind, I had an error in my xml Doc. There was a single quote ' instead of double quote ".
That was stopping flash from reading the remainder of the xml doc.

[eferna]

@eferna, your containerMC is in the masked layer, put it in another one and it will work;)

@synkop, put this in the action layer (at the bottom):
containerMC.loadPic("pic1.jpg");

scotty(-:
awesome thanks

[DDD]

is there like a master final file with all the fixings applied? Thx to scotty, cell, digital and all who was in on this one. I read the first 6 pages but got tired....lol.....

[synkop]

@eferna, your containerMC is in the masked layer, put it in another one and it will work;)

@synkop, put this in the action layer (at the bottom):
containerMC.loadPic("pic1.jpg");

scotty(-:

Yes I thought that would do the trick to, but for some reason I can´t figure out it doesn´t! Everything else including prev/next buttons works as expected, but I just can´t get that darn first pic to load. This is the code I use, can you see anything wrong with it? Thanks mate!

spacing = 10;
containerMC._alpha = 0;
var pArray = new Array();
var tArray = new Array();

MovieClip.prototype.loadPic = function(pic) {
containerMC._alpha = 0;
cur = pic;
this.loadMovie(pArray[pic]);
this._parent.onEnterFrame = function() {
var t = containerMC.getBytesTotal(), l = containerMC.getBytesLoaded();
bar._visible = 1;
per = Math.round((l/t)*100);
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);
bar._visible = 0;
loadText.text = "";
delete this._parent.onEnterFrame;
} else {
bar._width = per;//gives the bar a max width 100. För att få 250 px t.ex: bar._width = per*2.5;
loadText.text = per+" % ";
}
};
};

MovieClip.prototype.resizeMe = function(w, h, pic) {
var speed = 3;
this.onEnterFrame = function() {
this._width += (w-this._width)/speed;
this._height += (h-this._height)/speed;
//nav._x = Math.round(this._x-this._width/2);
//nav._y = Math.round(this._y+this._height/2+spacing/2);
//prevb._x = nav._x-5;
//nextb._x = nav._x+this._width+5;
//nextb._y = prevb._y=this._y-this._height/2;
//picinfo._y = nextb._y-5;
picinfo.info.text = tArray[pic];
//picinfo._x = border._x-picinfo._width/2;
if (Math.abs(this._width-w)<1 && Math.abs(this._height-h)<1) {
this._width = w;
this._height = h;
// Kommenteras bort för att slippa centreringen av container
//containerMC._x = this._x-this._width/2+spacing/2;
//containerMC._y = this._y-this._height/2+spacing/2;
containerMC._alpha += 5;
if (containerMC._alpha>90) {
containerMC._alpha = 100;
delete this.onEnterFrame;
}
}
};
};
var gallery_xml = new XML();
gallery_xml.ignoreWhite = true;
gallery_xml.onLoad = function(success) {
if (success) {
var gallery = this.firstChild;
// pathToPics = gallery.attributes.path;
for (var i = 0; i<gallery.childNodes.length; i++) {
tArray.push(gallery.childNodes[i].attributes.title);
pArray.push(gallery.childNodes[i].attributes.source);
}
loadPhoto();
} else {
title_txt.text = "Error!";
}
};
gallery_xml.load("gallery.xml");
prevb.onRelease = function() {
if (cur == 0) {
containerMC.loadPic(pArray.length-1);
} else {
containerMC.loadPic(cur-1);
}
};
nextb.onRelease = function() {
if (cur == pArray.length-1) {
containerMC.loadPic(0);
} else {
containerMC.loadPic(cur+1);
}
};

containerMC.loadPic("pic1.jpg");

[eferna]

hey is there anyway to make the images at an angle. Lets say you change the border to a 30deg angle how would u implement the code to have the pictures appear at that angle?

[eferna]

Yes I thought that would do the trick to, but for some reason I can´t figure out it doesn´t! Everything else including prev/next buttons works as expected, but I just can´t get that darn first pic to load. This is the code I use, can you see anything wrong with it? Thanks mate!

spacing = 10;
containerMC._alpha = 0;
var pArray = new Array();
var tArray = new Array();

MovieClip.prototype.loadPic = function(pic) {
containerMC._alpha = 0;
cur = pic;
this.loadMovie(pArray[pic]);
this._parent.onEnterFrame = function() {
var t = containerMC.getBytesTotal(), l = containerMC.getBytesLoaded();
bar._visible = 1;
per = Math.round((l/t)*100);
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);
bar._visible = 0;
loadText.text = "";
delete this._parent.onEnterFrame;
} else {
bar._width = per;//gives the bar a max width 100. För att få 250 px t.ex: bar._width = per*2.5;
loadText.text = per+" % ";
}
};
};

MovieClip.prototype.resizeMe = function(w, h, pic) {
var speed = 3;
this.onEnterFrame = function() {
this._width += (w-this._width)/speed;
this._height += (h-this._height)/speed;
//nav._x = Math.round(this._x-this._width/2);
//nav._y = Math.round(this._y+this._height/2+spacing/2);
//prevb._x = nav._x-5;
//nextb._x = nav._x+this._width+5;
//nextb._y = prevb._y=this._y-this._height/2;
//picinfo._y = nextb._y-5;
picinfo.info.text = tArray[pic];
//picinfo._x = border._x-picinfo._width/2;
if (Math.abs(this._width-w)<1 && Math.abs(this._height-h)<1) {
this._width = w;
this._height = h;
// Kommenteras bort för att slippa centreringen av container
//containerMC._x = this._x-this._width/2+spacing/2;
//containerMC._y = this._y-this._height/2+spacing/2;
containerMC._alpha += 5;
if (containerMC._alpha>90) {
containerMC._alpha = 100;
delete this.onEnterFrame;
}
}
};
};
var gallery_xml = new XML();
gallery_xml.ignoreWhite = true;
gallery_xml.onLoad = function(success) {
if (success) {
var gallery = this.firstChild;
// pathToPics = gallery.attributes.path;
for (var i = 0; i<gallery.childNodes.length; i++) {
tArray.push(gallery.childNodes[i].attributes.title);
pArray.push(gallery.childNodes[i].attributes.source);
}
loadPhoto();
} else {
title_txt.text = "Error!";
}
};
gallery_xml.load("gallery.xml");
prevb.onRelease = function() {
if (cur == 0) {
containerMC.loadPic(pArray.length-1);
} else {
containerMC.loadPic(cur-1);
}
};
nextb.onRelease = function() {
if (cur == pArray.length-1) {
containerMC.loadPic(0);
} else {
containerMC.loadPic(cur+1);
}
};

containerMC.loadPic("pic1.jpg");
Since you are loading the images from an XML file maybe you got to call the XML to load the image. so maybe something like this.

containerMC.loadPic.gallery_xml("pic1.jpg");

[synkop]

Since you are loading the images from an XML file maybe you got to call the XML to load the image. so maybe something like this.

containerMC.loadPic.gallery_xml("pic1.jpg");

Nope... not any luck with that one either I´m afraid. This drives me crazy... :puzzle:

[pares101]

dude that website rocks... im just going crazy off the effects that the guy creates!!

[scotty]

@synkop, I think it should be:
containerMC.loadPic(0);
Hope that works=)

@DDD, who knows, someday as all the fixings are done;)

scotty(-:

[synkop]

@synkop, I think it should be:
containerMC.loadPic(0);
Hope that works=)

@DDD, who knows, someday as all the fixings are done;)

scotty(-:

Thanks for your replys Scotty, but I still doesnt work. This is realy wierd. I have tried all of these suggestions:
containerMC.loadPic("pic1.jpg");
containerMC.loadPic(0);
containerMC.loadPic.gallery_xml("pic1.jpg");
I put the line at the very end of all the other actionscript stuff. For all I know, they should work (the first two ones anyway) but just doesn´t. Anyone of you nice peolpe who has got autoloading of the first pic to work and can help me?

[scotty]

My bad;(
I was calling the function before the XML was loaded...
This should work ( I give you the whole XML.onload function, you only have to change/add the containerMC.loadPic(0) )
gallery_xml.onLoad = function(success) {
if (success) {
var gallery = this.firstChild;
// pathToPics = gallery.attributes.path;
for (var i = 0; i<gallery.childNodes.length; i++) {
tArray.push(gallery.childNodes[i].attributes.title);
pArray.push(gallery.childNodes[i].attributes.source);
}
containerMC.loadPic(0);
} else {
title_txt.text = "Error!";
}
};

scotty(-:

[DDD]

hey can someone post a master file with a pretty good compilation of all the fixings?......pleez

[scotty]

DDD, I think this one has most of the fixings and "add-on's"
V3.zip (http://home.wanadoo.nl/gertvinke/kirupa/V3.zip)
If you miss something let me know;)

scotty(-:

[synkop]

Absolutely brilliant Scotty! Thanks a million! I´m building a site for a photographer and now I have all the bits and pieces to make it work. I´ll post a link to it here when its done. It´ll be a couple of weeks though... :be:

@DDD
I´m posting my .fla with the adjustments i have used so far. It includes the xml loading of pics, autoloading of the first pic, preloading bar and % counter, and the prev - next buttons. I have commented out the functions that makes the navigation buttons move along with the container box. If you want it back, just uncomment those lines in the actionscript code. Hope it´ll be useful for you.

[DDD]

thanks ya'll I was trying to go back and put together a sample with all the fixings but it got confusing.....thanks a bunch.

[scotty]

synkop & DDD, you're both welcome=)

[niki]

how come the preloaded thumbs never work for me. Ive downloaded everyones .flas and tried them, but all i ever see is the first two photos of leila and the 3-6 is just a numbered box - is it supposed to dynamically preload or am I being an idiot?

[jimhere]

Mua-ha-ha. The perfect photo galleries.
But why do some of the thumbnails have numbers instead of images (in resizeBorder_V2 and V3)?
(edit -- niki and I posted at exactly the same time)

[scotty]

You two are not idiots=)
The preloaded thumbs were never added, I just added 4 more buttons with numbers to have some more pictures for the prev and next buttons.

scotty(-:

[lunatic]

Any particular reason why this isn't this in Best of K? Or at least maybe culled and recompiled? :thumb:

[DDD]

moved this to the best of Kirupa....this is definately some good sh!zzzzn!t

[dpemokid]

instead of having thumbnails in the movie as the buttons...is it possible to have numbers as buttons? And when u click on the minber a little box thingy slides over it? Like the slideshow at podlob.com.

[said7]

Thanks guys! This thing is awesome.
One problem though... Why do i see a slightly ghosted picture that is being loaded in before it actually pops to the border its loading into?

Something with the alpha command?


spacing = 5;
containerMC._alpha = 0;
MovieClip.prototype.loadPic = function(pic) {
containerMC._alpha = 0;
this.loadMovie(pic);
this._parent.onEnterFrame = function() {
var t = containerMC.getBytesTotal(), l = containerMC.getBytesLoaded();
bar._visible = 1;
per = Math.round((l/t)*100);
if (t != 0 && Math.round(l/t) == 1 && containerMC._width != 0) {
var w = containerMC._width+spacing, h = containerMC._height+spacing;
border.resizeMe(w, h);
bar._visible = 0;
delete this._parent.onEnterFrame;
} else {
bar._width = per;
//gives the bar a max width 100
picinfo.info.text = per+" % loaded";
}
};
};
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) {
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 += 7;
if (containerMC._alpha>90) {
containerMC._alpha = 100;
delete this.onEnterFrame;
}
}
};
};

[said7]

After taking a closer look i figured the best method for me would be to have a seperate alpha function that runs at the end of resize me. like so....

MovieClip.prototype.alphaMe = function() {
this.onEnterFrame = function() {
containerMC._alpha += 5;
if (containerMC._alpha>90) {
containerMC._alpha = 100;
delete this.onEnterFrame;
}
};
};



How would i go about calling this at the end of the resizeMe function?

[scotty]

Here I don't see ghosting but I could be the place where you set containerMC._alpha to 0;
Try putting it here (after containerMC is fully loaded)

//other code
//
if (t != 0 && Math.round(l/t) == 1 && containerMC._width != 0) {
containerMC._alpha=0;
//rest of the code


scotty(-:

[said7]

Thanks Scotty

I tried :( when i did the pic doesnt appear at all.

The ghosted image doesnt appear on the first time i click the thumbnail. Only when i click another image i see like a 5% ghosted image of the image thats to be loaded and it is cornered where the previous one was. Then it snaps into place and the fade starts. Ive tried direct preview and streaming preview and it does it for both.

Thanks for your time.

Here I don't see ghosting but I could be the place where you set containerMC._alpha to 0;
Try putting it here (after containerMC is fully loaded)

//other code
//
if (t != 0 && Math.round(l/t) == 1 && containerMC._width != 0) {
containerMC._alpha=0;
//rest of the code


scotty(-:

[said7]

HEY!

I think i figured it out. Just for s**ts and giggles i published in flashplayer 6 and it worked properly.

When I published in flash player 7 i saw the ghosted image and the resize snapping.

Any reason as to why?
Seems like pretty straight forward code. Try that v3 in FP7.
Anyone have any ideas on how to make this flashplayer 7 compatible?


****edit****
Just had an idea... I was thinking the best way to make this work would be to execute the fade and containerMC postition change only after the border has been resized. How would i determine when the border has infact finished moving? I imagine the resize would have to be made another way instead of on enterFrame.

Thanks Scotty

I tried :( when i did the pic doesnt appear at all.

The ghosted image doesnt appear on the first time i click the thumbnail. Only when i click another image i see like a 5% ghosted image of the image thats to be loaded and it is cornered where the previous one was. Then it snaps into place and the fade starts. Ive tried direct preview and streaming preview and it does it for both.

Thanks for your time.

[Daedelus]

Thanks Scotty

I tried :( when i did the pic doesnt appear at all.

The ghosted image doesnt appear on the first time i click the thumbnail. Only when i click another image i see like a 5% ghosted image of the image thats to be loaded and it is cornered where the previous one was. Then it snaps into place and the fade starts. Ive tried direct preview and streaming preview and it does it for both.

Thanks for your time.

First of all, GREAT thread. i stumbled upon it while trying to figure out something somewhat related for the same project. at any rate, i'm having the same problem (i'm using MX). When i take the alpha fade code out, the full pic snaps into place where the old one was. now, this only occurs in the scope of the main SWF file (i'm using the Slideshow as part of a larger site)... when i preview (and even test it live on a server) by itself it works perfectly. now i'm just confused... anyone have any ideas?

[scotty]

said7, the script works like you suggested (fade-in and position of containerMC take place after the border has resized).
I tested it here in flashplayer 7 and saw no ghosts:)
I saw missing in your code in the if statement for the width (resizeMe proto), that line should read:
if (Math.abs(this._width-w)<1 &&Math.abs(this._height-1) {
I hope that helps.

@Daedelus, did you use V3 (post #170)? If not, maybe there's some _root in it?

scotty(-:

[imported_mucho]

Hi All,

now that the gallery really is working out fine... (YEAH).
I've been wondering if there's a way to add thumbnails dynmaically from external files, through the xml file. Of course that works and I've even done it... but I can't seem to add that part to the one SYNKOP and SCOTTY fixed.
Any suggestions how I can approach this...(I know this sound stupid, but the one I've been working on (attached) does not seem to like the previous / next buttons / arrays?).

thanks in advance,

m.

[dpemokid]

instead of having thumbnails in the movie as the buttons...is it possible to have numbers as buttons? And when u click on the number a little box thingy slides over it? Like the slideshow at podlob.com.anyone??

[scotty]

Not sure, but have a look here:)
http://www.kirupaforum.com/forums/showthread.php?t=52290&highlight=photo+gallery

scotty(-:

[said7]

Hello.

Added that line you said Scotty but i got the same problem. I took a look at Mucho's code and i matched mine a little closer to his by seperating the functions. Works like a CHAMP!

My appreciation goes out to all of you. Thanks again, you saved me tons of time.

[Daedelus]

@Daedelus, did you use V3 (post #170)? If not, maybe there's some _root in it?

yes, i used V3 as the basis. there are no _root references in it at all. i'm totally perplexed. take a look at what i mean:

http://www.7crescent.com/pictest/photosPage.swf

that's the photos Page by itself. it works beautifully.

http://www.7crescent.com/pictest/index2.html

that's the whole index page. click on "photos" and you'll see what i mean. hope someone has some ideas! :D thanks again.

[said7]

yes, i used V3 as the basis. there are no _root references in it at all. i'm totally perplexed. take a look at what i mean:

http://www.7crescent.com/pictest/photosPage.swf

that's the photos Page by itself. it works beautifully.

http://www.7crescent.com/pictest/index2.html

that's the whole index page. click on "photos" and you'll see what i mean. hope someone has some ideas! :D thanks again.
Thats the same thing that was happening to me. Try using Mucho's code instead.

[scotty]

mucho, you've got a prototype function loadPic and another ("normal") function loadPic (the same name)??

scotty(-:

[imported_mucho]

mucho, you've got a prototype function loadPic and another ("normal") function loadPic (the same name)??

scotty(-:

scotty, thanks for feedbacking. I fugured that this must be a problem, however, I tried to erase one of them (naturally one of them is redundant) and make it work - can't really make it happen, b/c either one of the 'galleries' is relying on the concerning scripts.

what should I do, (sorry for making this sound enourmesly anti-intelligent),

m.

[scotty]

And if you rename one of them? (plus off course where you call them)
It's a lot off code you have there, so it will take a little for me to understand it, maybe you can post the xml file as well, better for testing;)
@Daedelus, I see what's wrong, but without a fla I can't do anything.

scotty(-:

[imported_mucho]

Thanks scotty,
very cool! the xml file is right here....
http://www.robdimin.com/flash/xmlstuff/portfolio_config.xml
from there you'll see where the pics are located etc.
thx,
m.

[scotty]

Okay, I'll have a look later:)

scotty(-:

[imported_mucho]

Okay, I'll have a look later:)

scotty(-:

wicked, great, fantastic, splendid...
m.

[Daedelus]

And if you rename one of them? (plus off course where you call them)
It's a lot off code you have there, so it will take a little for me to understand it, maybe you can post the xml file as well, better for testing;)
@Daedelus, I see what's wrong, but without a fla I can't do anything.

scotty(-:

you mean you can't magically read my code from across the pond? :D

here's the photosPage fla. let me know if you need to take a look at the index.

[Beebs]

Scotty,

This must be one of great tutorial I have been following since it was started. Thanks heaps for your contribution to the community.

In conjuction with this slideshow, I have a feature questions:
1. Does the transition between each picture limitted to the Fade In/Fade Out effect?
2. I am just wondering wether I can create a masking transition via drawing API or just simply create movieclip transition, but I don't know where to call those transition. Can you advise me?

Beebs

[synkop]

I certainly agree with Beebs on that one. A masked transition would be a great addition to this already superfine gallery! =)

[scotty]

@Deadelus, I think I've found the problem (at least it's working here now)
In the loadPic proto change this line :
delete this._parent.onEnterFrame;
in
delete this.onEnterFrame;
If that works for you, let me know, then I'll change it in V3:)

@mucho, I need some more:) Can you give me a link to your thumbs/description/picture-folder?*edit, I've found them;)

@Beebs & synkop, you guys drive me crazy, LOL.
It is possible, if I have a little time I'll have a look;)

scotty(-:

[scotty]

mucho, in the loadPic proto you had two loadMovie's. One was overwriting (or is it overriding?) the other. I deleted all your comments and commented the things I've changed. Hope this will help you=)

scotty(-:

[Daedelus]

scotty:

it works perfectly now! thanks a million... you're the man! :thumb:

[imported_mucho]

SCOTTY - YOU'RE KILLER!!!! fantastic - hyper-wicked!
thanks a big bunch,

mucho

[scotty]

LOL, you're both welcome=)

[imported_mucho]

LOL, you're both welcome=)
I know this has nothing to do with this thread...but I nailed my final presentation today - meaning I'm going ot the next round AND I'm definitely graduating from college. Everything's cool and I'm just in a happy mode of operation right now - AND b/c of kirupaforum.com I could look rock! check it dont think so....but ill leave the rest of the post

MODERATORS YOU ARE WELCOME TO DELETE THIS ENTRY! (but I'm just a happy man right now).

Have a W-I-C-K-E-D day,night,afternoon,moonday,wa-ever.

Mucho

[niki]

Hey guys- Ive been wrestling with this since this morning. Loving whats been done - just need some help with making the previous and next buttons work with the thumbnail slideshow.

Here is my .FLA - thanks for the help -- Ive done all I can do and now turn to you :beam:

CLICK HERE FOR .FLA (http://www.technicolortiara.com/SuperSizeMe2.zip)

[scotty]

Niki, there were a few things wrong.
In your next and prev buttons you referred to pArray, in your fla that's image_array.
The var cur never got a new value.
In the thumbs loadPic was called with the image loadPic(_root.image_array(this.i)and in the next/prev buttons with the "array item number" loadPic("cur value")
I changed the code in the thumbs and in the loadPic function
this.loadMovie(image_array[pic]);
I'll attach the modified fla (w/o pics)
Hope this helps:)

scotty(-:

[niki]

Fi-ya-ya!!

Thanks!
It was so tortureous - I recieved the email notice that you responded and my internet connection went out for like 5 hours - it was KEEELING me not to be able to access your response!! - im sooo happy now! Thanks for making my little dream a reality!

[scotty]

No problem.
btw looks great=) maybe you need to look at the size of the first 5/6 pics

scotty(-:

[niki]

Thanks Scotty - Im not actually worrying about size of photos right now, still trying to get my navigation worked out.

I really dont know how you are so patient with all of us. Youre amazing.

In case your interested - I do have yet another quandry. Im trying to combine the navigation structure from the other "best of" thread: "XML Menu DONE"

If it can be done, then its either one of two ways:

One is, in the XML file that is stored in a subdirectory of the folder that the main .swf is kept in - you can have the buttons link to URL's or .SWF's - which will pull up in the empty mc in your .fla.

I know that to populate the thumbnail gallery box you have the code:

bt1.onRelease = function(){
dragwindow.scrll.select(1);

How would you translate that, or state that action in an XML document? Is that completely impossible? Is it too apples and oranges? I tried making the link bt1 - but that obviously didnt work.

OPTION TWO

My other theory is building a .swf gallery for each subdirectory in my navigation structure. Then in my XML document I can just link to the .swf.

When I do that I am able to successfully populate my thumbnail gallery, but when i click on a thumbnail the big picture does not pull up. And I know that is either one of two things. 1) I have my file structure set wrong in my .swf and need to figure out another way to call my pictures from within another movie

OR

It just aint possible because I think there is some limit to how many levels of remote files you can call into a movie.

Now - im sure i just used like tons of wrong terms to describe my theories - so Im attaching the files that Im working with so you can see what im talking about.

If it just isnt possible please let me know so I can get some sleep - I am an OBSESSED woman right now!

heres the folder - click on the accordian.swf (http://www.technicolortiara.com/AccodionMenu.zip)

In the accordian.swf file if you click on Photography>catalog you can see where I have a remote .swf file (catalog.swf) pulling into the accordion.swf.

[scotty]

Hey niki, I think everything is possible, so option three we can forget:)
For option one I'll have to study the menu, I'm not that familiar with XML, but I'm sure that's gonna work.
And option two, I guess it has to do with paths, I'll have a look and let you know.
Hope you can sleep now;)

scotty(-:

[niki]

WOOHOOOOOOOOO!!!!!!!!!

Now I cant sleep cuz im too excited!!!

alright -- alright - im going to go to the gym then and get some exercise so maybe i can wear myself out so ill konk out. But I know I will be dreaming of actionscript! HEEE!!

[scotty]

Hey niki, here are the fla's=)
I've cleaned them up a bit. All you have to do for the other items, is copy catalog.fla, change the name in eg webdesign.fla, make the changes for bt1, bt2
example:
bt1.onRelease = function() {
dragwindow.scrll.select(3);//loads array_3 from the textfile
};
and add webdesign.swf to the xml file and then it works.
If you have questions, let me know;)

scotty(-:

[niki]

That is fantastic!!!
Is there anyway for the bt1 to load when the swf loads? or does it have to be clicked to be called?

[scotty]

Glad you like it=)
Off course there's a way.
Putselect(1);at the bottom of the script in mc "scrll".
And as a bonus change the code on your buttons in the first frame like this
bt1.onRelease = function() {
this.enabled = 0;
bt2.enabled = 1;
dragwindow.scrll.select(1);
};
bt2.onRelease = function() {
this.enabled = 0;
bt1.enabled = 1;
dragwindow.scrll.select(2);
};
bt1.enabled = 0;
Prevents loading a gallery that's allready open;)

scotty(-:

[niki]

OMG - wait to you see how completely beautiful this looks!! WOW!! You are amazing!!

I lost my previous and next capabilities though - I added the buttons and the code to the catalog.swf but keep getting the error "Error opening URL "file:///C|/Documents%20and%20Settings/Niki/Desktop/SuperResizeMe/1"

[scotty]

Ehm, post your catalog fla, I'll look tomorrow;)

scotty(-:

[Daedelus]

Hey Scotty... got another question: Using my previous code on p. 14, i wanted to have it so that only 5 of the menu options show up at any one time. if there are more than 5 items in the XML file, there would be a next button that would display the next 5, and so on... i'm having a little trouble getting started... any advice?

[justn]

Hi Scotty and all,

This is my first post here on the forum. I recently came across this post and it was almost exactly what I was looking for. Thank you for it. I say "almost" just because I have one question on how to do a few things:

1. Make a menu (I'm open to suggestions) that allows the user to select images from specific sections, for example, landscape, portraits, events, etc. and then display only those in that section until user goes back to menu. Similar to this - http://www.carldekeyzer.com/

2. Display the number of images that are in each section and what image number the user is on in that section.

3. Have a section that displays the image information similar to the site above.

Can this be done? If yes, would someone be willing to help me with this? I'm attaching what I have. It is very similar to a post that had a zip file earlier in the thread.

Thank you.

[sipher]

hey nikki i was looking at yur fla "supersizeme" and i have notice that when u click one of thumb btns .. pic gostly open first before the border have u notice that?

[justn]

My goal is this - http://www.twinphotographie.com/ (http://www.twinphotographie.com/)
My current condition is the zip file. This is my first attempt really at doing anything like this in Flash and I need some help in XML also. You will see what I mean when you open it. If anyone here could kind of walk me through this so I can achieve my goal that would be much appreciated. I thank you in advance.

justn

[justn]

scotty, i sent you a pm. sorry to duplicate the post. this is my first using this here.

[sipher]

hey justn

try this link it a tutorial made by same person who created twinphotographie
http://www.studio-cafecreme.com/share/index.html

chino
http://www.studio-cafecreme.com

[sipher]

i want to know how did he managed to put the menu and info in the same resizeble window as the border... when u click on the menu it resize without distoring the information or menu how can i do something like this???? all i wanna know is how to place the menu and info in the same border
http://www.christopherconnock.com/

how ???

[justn]

sipher,

thanks for those, however. the flash files on http://www.studio-cafecreme.com/share/index.html could not be opened in mx for some reason. not sure why.

I agree, it would be neat to see an example of how http://www.christopherconnock.com/ is done.

I like the twinphotographie too and the menu they use. I'm still at the beginning of learning this. Thanks for the help though.

Justin

[niki]

wanna know how did he managed to put the menu and info in the same resizeble window as the border... when u click on menu it resize without messing up the font or menu how can i do something like this???? all i wanna know is how to place the menu and info in the same border
http://www.christopherconnock.com/

how ???


Sipher - I believe that earlier in this thread there are .flas with those features in them. Actually i know there are cuz i downloaded a few of them. So how great is that?

[niki]

Hey Scotty - here is the catalog.fla you requested from me for adding previous and next buttons.
thanks a gazillion - I cant wait to show you the finished product!!!

catalog.fla (http://www.technicolortiara.com/catalog.fla)

[sipher]

not really niki i was here from the beginning of tread i have been going back to see it they did but no luck ..unless u saw something i didnt

[niki]

V3 had the text and the buttons moving with the resizing frame - is the V3.fla still available for download?

[justn]

v3 on page 12 does have it where the image description and thumbnails ease with the images, but the next and previous don't work correctly. Has anyone done something like sipher is talking about with http://www.christopherconnock.com/ where the menu does that scroll mask type of thing, sorry not very technical there, and where you can click on the image to the next frame.

Niki, how far away are you from posting what you have?

[scotty]

@niki, I will have a look tomorrow:)

scotty(-:

[niki]

@niki, I will have a look tomorrow:)

scotty(-:

WOOHOO!!!!!!!!!!!!!! :drool:

[snaphappy]

This topic is truly one of those waves you can catch surfing the inet. It sucked me in early last night and spat me out late this morning, slightly enlightened and incredulous at what has been achieved here.

Spent many an hour looking searching tutorials etc. to make the 'dream' photo viewer for a huge collection of travel photos but never really got the leads I wanted, until finding this. Gracias amigos. I'm still a novice with action script but there are (gratefully) some very patient and articulate people here who have set me on the road.

@Sipher - mentioned earlier in this topic is the link where Scott should solve your problem;)
http://www.kirupaforum.com/forums/showthread.php?t=54090
Was looking for exactly this effect (so my logo could move along with the photoframe but without scaling), so remembered it was there.

Think my next move is to try and tackle the scrolling menu with the thumbnails, perhaps even dynamically thank to the insight into xml gleaned from here, still have to fully explore all the files posted. I looked at the link to the http://www.carldekeyzer.com/ site and his thumbnail / picture counter widget is beautiful, as is pretty much the whole site, photos included. Anyone working on something like this menu (show/hide thumnails/counter)? Would be a top addition to an already rich topic.

greetings and thanks to everyone, especially Scotty who seems to have an uncanny knack of solving problems that can drive you nuts for hours with a swift couple of lines of fine code

kudos

[liquidac]

v2 with the menu... I'm a beginner, but i copied the code and made some modification...

[sipher]

u guys are missing the point i have that already i have done and redone averything with scaling and no im not a designer or a hard core coder either....but i did make my scaling as same as http://christopherconnock.com but clicking on pic it take u to next scaling frame..i have that already but what i want is the menu on the botton even the information about the site and gallery scale with it ... looked at it close it and u will know what im talking about....
thanks

[justn]

sipher, would you mind posting a zip of the fla where you have the scaling as http://christopherconnock.com with clicking on picture going to next scaling frame?

[snaphappy]

Took a closer look and I see what you mean now sipher and justn, (definitely easier to see than describe) - certainly a cool effect. Still a way away for me, somewhere around page 8 at the moment and the fine scroller by Ter (page 8 post#111).

Thanks Ter!

keep this good thing going :bounce:

[sipher]

ok justn here the fla i hope it works for u
let me if it does is not i will fix in a way that u can open it on mx

ok justn i add it the gallery.xml on the zip ok

good luck

[scotty]

Hey niki, here's the fla with the next and prev buttons, just some minor changes (I commented in the code)=)

scotty(-:

[scotty]

@sipher, it is all in V3;)

scotty(-:

[sipher]

are u sure i could do some similar to http://www.christopherconnock.com menu and info ?? please take a very closer look will ya..

[scotty]

Okay you're right, the menu is not in V3, could be made however with a little imagination...
Here's a start;)

scotty(-:
(pictures and xml file are in the V3, if you don't have them)

[justn]

Ok. Here is a start, or another edit I should say, to some things that we have already had here on the thread. It does not address the issue of the menu that were still waiting for as seen on http://www.christopherconnock.com, but it is a combination of twinphotographie and the christopherconnock site where you can click on the images and go to the next frame. Again, it is just a start and needs some tweaking, but maybe someone can pick it up from here and make it better and post again.

justin

[sipher]

Okay you're right, the menu is not in V3, could be made however with a little imagination...
Here's a start;)

scotty(-:
(pictures and xml file are in the V3, if you don't have them)

i think u forgot sumthing

mr. scotty:hr:

[scotty]

You're right, troubles uploading the zip;(
You can find it here (http://home.wanadoo.nl/gertvinke/kirupa/scotty.zip)
mr. scotty
?????

scotty(-: