Actionscript- a bit of an epic...

[londonweb]

I would love some help or suggestions with the scripting of a site I'm doing in Flash. Basically what I want to do is dynamically load jpeg thumbnails into the flash movie, which appear in a strip and then when clicked, display a larger version of the same image in the same window above the smaller ones.

It's a photographer's agency site which will need to be updated frequently and has 12 artist's portfolios on it. I want it so that the same page loads different content into itself dynamically, depending on who's portfolio it is.

Here is a mock up of the site.

I want each of the thumbnails to be based on one movieclip which is reproduced to display each image in sequence.

I was thinking to do this using the loadMovie method in a for loop, and using a counter to load the next image in the sequence each time it loops.

What I'm unsure about is that if i do this, how will I then get each instance of the movieclip to be assigned a different instancename so it can be referenced and removed, and also how to get it to link to the correct image to do the enlargements.

I don't need the code written out, but any ideas on the best way to approach this would be really appreciated.

Incidentally, does anyone know a good book on advanced flash techniques?

many thanks and a happy new year.

 

[Mr. Anderson]

I've done this before and its not too hard. What you might want to do is set something up so that all the image file information is in a text file that the flash file reads. This way it easy for someone to come along and change things after you've delivered the flash. You'd have something like "image file name", "image icon", "image description", "photographer", etc. per line.

Then just dynamically load the images - you can find plenty of templates for this online - try www.flashkit.com - and layout the text that goes with it. One nice thing is that you can even handle different image sizes, just check that when you load them.

You might be able to find a cheap shell online that does all of this for you that you can tailor for your site. Spend the $40 and it will have all the dynamic loading of the images and data.

D

 

[londonweb]

I've done this before and its not too hard. What you might want to do is set something up so that all the image file information is in a text file that the flash file reads. This way it easy for someone to come along and change things after you've delivered the flash. You'd have something like "image file name", "image icon", "image description", "photographer", etc. per line.

That sounds interesting- can you explain a bit more about how it works? Would the text file contain the path of the image, and how would you reference the text from within flash?

thanks

 

[Mr. Anderson]

That sounds interesting- can you explain a bit more about how it works? Would the text file contain the path of the image, and how would you reference the text from within flash?

thanks

The text file would contain the relative path of the images (that works best, since the path on the dev computer and server will probably be different) - and you can just read the text file and parse it by entry. Set it up that you have identifiers to denote different entries or just have each part of the entry on a separate line.

As long as the coding for reading in the file knows how text is formated, its not hard at all. The key thing is, is that once the file format is set, anyone can come along later and add or remove file entries in the text file, upload that and the images and its done. They won't ever need to play with the flash code or design. Its a much more elegant solution.

Have you tried searching at flashkit for tutorials on this? I know they're there - I used them myself

D

 

[londonweb]

Thanks Mr A. No, I haven't tried that site but I will.

Have a good new year's bash.

 

[mnkeybsness]

For actionscript questions, I definitely recommend ActionScript.org. They've got a lot of great tutorials, downloadable examples and a great forum.

 

[Mr. Anderson]

Ok, this is quite funny - I'm actually having to do something similar myself today - but its images and movie clips. How weird is that?

D

 

[robx2]

I've had to do a lot of these. It will go a lot easier if you're strict about the naming. Name the thumbs something like smith_thumb0.jpg, smith_thumb1.jpg, etc... and the main images smith0.jpg, smith1.jpg, etc....

The only tricky part I find is getting the right image to pop up when you click the thumbnail... Hope this makes sense, but I usually design a holder for the thumbnail, hide it off the stage, and run a loop where I duplicate it and attach the thumbnails. I also pass a variable to the duplicated movie clip that helps me keep what main image I want to associate with that thumbnail. There's code on the duplicated movie clips that on a mouse click, sends that variable to a function that changes the main image...

In other words, the duplicated movie clip that has smith_thumb3.jpg attached, also has a variable with a value of 3 that gets sent to a function that changes the main image to smith3.jpg

Does that make sense? I'm largely self-taught in Actionscript so it may be a little convoluted, but it works.

 

[Mr. Anderson]

After spending the afternoon looking at this, I've found that using .xml file as the data storage, flash reads it in and you can parse the whole thing into a nice 2D array. Its quite nice and you really don't have to know any xml - just find an example and plug it in to your code.

Good luck!

D

 

[Mr. Anderson]

Any luck yet? One thing you should think about is having a preloader for all the images and only load them when they click on the icon. Also, create thumbnails for each of the images, don't load the image in and then use flash for that - it will take a ton of time and even worse if they have a lot of images.

Here's a really good tutorial on the dynamic loading of data:

http://www.flash-db.com/Tutorials/loading/

They load the things right into movie clips - I used a similar loader but loaded it into a 2D array to keep the data around. And the fun part is creating dynamic movie clips later depending on the amount of images/entries you have.

D

 

[londonweb]

I'm just reading up on a few things at the moment before getting stuck in- I find it really helps to write out the code roughly by hand on paper to get my head around it all before I do it proper- nothing worse than banging your head against the screen trying to figure things out- paper's much less painful.

Robx- you describe the exact thing I'm having trouble with- how would you pass a variable to a duplicated movie clip? Would you use the duplicateMovieClip function on the holder you've created off-stage? If so, how do you give each one a unique instance name? Perhaps it's not even necessary...

ps. happy new year

 

[robx2]

I run the loop on the main timeline. When you click a photographer's name, it runs this loop from 0 up through the number of photos associated with each photographer. (note that I generally set a variable called this_mc to refer to the movie's main timeline):

for (var j = 0; j<numPhotos; j++) {
this_mc.slide_mc.duplicateMovieClip("slide_mc"+j, j)
this_mc["slide_mc"+j]._x = (75 + (70 * (j)));
this_mc["slide_mc"+j]._y = 446;
this_mc["slide_mc"+j].slideCall = "images/"+docImage+j+".jpg";
this_mc["slide_mc"+j].slidePic_mc.loadMovie("images/"+docImage+j+"_thumb.jpg");
}

So, this loop duplicates an off-stage movie clip with the instance name "slide_mc" and dynamically names them "slide_mc0", "slide_mc1", etc... It positions them in a horizontal row and gives each a property called "slideCall" that shows what main image should load when you click on it. (I'll show you that code in a minute.) Finally, it loads the corresponding thumbnail image into a empty movie clip called "slidePic_mc" that lives inside each duplicated clip (i.e. the off-stage clip "slide_mc" has a movie clip inside it called "slidePic_mc" where I want the thumbnail to appear.)

You'll notice that I'm using a variable called docImage to track the last name of the photographer and have been strict about the naming... so when the loop hits 2, the thumbnail is "smith2_thumb.jpg" and the main image is "smith2.jpg"

On the off-stage clip, there's this code (where slide_btn is an invisible button called "slide_btn" that I put over top of the where the thumbnail will be loaded):


slide_btn.onRelease=function(){
loadPic()
}
function loadPic() {
_root.picHolder_mc.loadMovie(this.slideCall);
}

picHolder_mc is just an empty movie clip on the main stage where I want the main image to appear. So, it's just using that property slideCall that contains the correct image path to keep everything straight.

You can see this in a test version at a documentary project I'm working on at www.madisoncountyproject.org/beta and go to the section "Documenters". It's still needs preloaders and may have some bugs, but you'll get the idea.

 

[londonweb]

thanks robx, that's really helpful.

I've done this sort of thing in javascript before, but I want to do it in flash this time mainly because I find it more versatile and controllable. Plus I can do nice fade in effects and whatnot, which I think adds a bit of a quality feel to a site.

 

[Mr. Anderson]

when you eventually get it working, post a link - I'm looking forward to seeing the results.

D

 

[londonweb]

when you eventually get it working, post a link - I'm looking forward to seeing the results.

D

Will do!

Had a look at your site- very nice and neat. I like your coding style as well- very clean and concise, well done.

 

[Mr. Anderson]

so how's it going? Did you get it to work?

I just got another job that requires almost the exact same thing

D

 

[londonweb]

so how's it going? Did you get it to work?

I just got another job that requires almost the exact same thing

D

I haven't got much further than drafting out the code on paper yet! I've just set up shop as a freelance designer and have been extremely busy- it's astonishing how much time you have to put into admin/quotations/proposals/etc. and you end up with barely any time left to do any actual work. Luckily the deadline on this project is a little way off so I've got some time.

Thanks for your interest though, I'll be sure to post back here once it's done (should be about 2 weeks).

 

[londonweb]

Getting there...

So I'm still working away at this and making steady progress. I have run into a problem and perhaps I'm not seeing the wood for the trees, as they say, so some suggestions would be most welcome.

Robx2, if you're there, you're probably just the man to help with this since it was your code I based mine on.

I have the following code in the first frame of the main timeline, and it works perfectly:

for (j=1; j<29; j++) {
thumbstrip.thumbHolder.duplicateMovieClip("thumbnail_"+j, j);
thumbstrip["thumbnail_"+j].loadMovie("../../images/thumbs/wd_beau_"+j+".jpg");
thumbstrip["thumbnail_"+j].imageCall="../../images/wd_beau_"+j+".jpg";

}

I've got some other code that appears a few frames later on the main timeline which positions the thumbnails 3 pixels apart, but that should be unrelated.

I have this code on the duplicated (offstage) movieclip:

onClipEvent(mouseUp) {

_root.imageHolder.loadMovie(this.imageCall);
_root.imageHolder._x = 50;
_root.imageHolder._y = 100;

}

So when you click a thumbnail, it should load the relevant larger image onto the stage, except that instead, I get an 'undefined' value for the path of the image. I've probably missed something obvious but I just can't see it.

Incidentally, if I type a physical path into the loadMovie field above, it works fine, so the code is correct in principle...

Anyone??

 

[londonweb]

Ok, I think it's an addressing problem, because if i type in an absolute path to a specific movie clip, like this:

_root.imageHolder.loadMovie(_root.thumbstrip.thumbnail_4.imageCall);

then it works...
Since this code appears on each individual thumbnail, using - this - as an address should work, shouldn't it?