thumbnail gallery like this

  • koivi
  • Novice
  • Novice
  • koivi
  • Posts: 23
  • Loc: Minnesota

Post 3+ Months Ago

I am in need of creating something similar to this:

http://www.gaate.no/foto/konserter/2005 ... /index.htm

where all the images will be loaded dynamically from XML.

I can get the info from XML, and I can make a thumbnail click load the larger version of the file without problems.

What I am trying to do right now is to get the list of thumbnails to line up and then move with the mouse over states. Can anyone point me in the right direction?

Initially I was thinking that I could use a dynamic text field and use html in it to display the images and such, but now I'm not too sure how I can go about it with everything being dynamic and needing to move like that.
  • IceCold
  • Guru
  • Guru
  • User avatar
  • Posts: 1254
  • Loc: Ro

Post 3+ Months Ago

noup, no dynamic textfield with html.
I think that`s just a simple rearrange of the thumbnails, based on the position of the overed thumbnail.
So ... lets say you over a thumbnail from row R, column C ... then all the thumbnails starting from row R to Rows_Count, and columns from C to Column_Count will change position (except of course the overed thumb).
  • koivi
  • Novice
  • Novice
  • koivi
  • Posts: 23
  • Loc: Minnesota

Post 3+ Months Ago

I was able to make the dynamic text area work with HTML to do this:

http://waf.rangenet.com/lsd-listings/

However, the image tags don't take up the correct height. They always seem to take up only as much height as a single line of text would have. Therefore, I have to add multiple <BR> tags to keep the images from overlapping. The images use a standard <IMG> tag to display wrapped inside an <A> tag to trigger the ActionScript function for the large display of the image.

I think what I really need is a way to create a movie object with the image in it that will resize itself on mouse over, but use some kind of float like in CSS to displace the other objects there.

The biggest problem I am having is that it will all be dynamic based on what the XML feeds to the movie. In one instance, there may be 3 images, in another, 10, in another 30. Any suggestions?
  • IceCold
  • Guru
  • Guru
  • User avatar
  • Posts: 1254
  • Loc: Ro

Post 3+ Months Ago

well, try it your way ... and after you complicate your code like hell, ask me why i wrote my first post.
As you can see, the resizing of the over image is made with ease equations, also the movement of the other movieclips.
And unless you want to implement that in javascript, then i suggest you to follow the steps from my upper post. If you have any trouble with that, come post here again, i`ll help you.
  • koivi
  • Novice
  • Novice
  • koivi
  • Posts: 23
  • Loc: Minnesota

Post 3+ Months Ago

I guess I didn't follow your post the first time I read it because I was trying to get things to appear on the stage first instead of looking into the over state functions... I had just posted what I did up to that point...

I re-read it now, and here is how I am interpreting what you have stated.

on mouse over, call a function that does the following:

1. finds all other thumbs that have an _x or _y that is greater than the current one.

2. change the _width and _height of the current one

3. add the difference in width to all elements that have a _x value greater than current thumb, but _y that is the same as current

3. add the height difference to all thumbs with a _y greater than the current that also has an _x greater than current, but less than current._x + resized width


The problem I am faced with is placing the thumbs in the first place. Should I be using movie clips and specifying the _x and _y programmatically? Will I need to store references to the thumb movies in an array to keep track of them?
  • IceCold
  • Guru
  • Guru
  • User avatar
  • Posts: 1254
  • Loc: Ro

Post 3+ Months Ago

yep, there you go. I see you understood that ... so there is no problem in placing the thumbs in the first place.
Yep, do it programatically, with movieclips for each thumbnail, related to:
1) for arranging horizontally:
a start X position, a end X position, a start Y position
2) for arranging vertically:
a start Y position, a end Y position, a start X position

Then, according to the movieclips _widht and _height, you place them on the stage.
Also, name your movieclips so that you can access them using indexes.
Lets say you have 20 thumbnails, name your movieclips thumbnail1, thumbnail2, ....thumbnail20 ( i usually start from 0 ... but now i make an exception).

for horizontal arrangement (assuming all thumbnails have same height ... since this is best for view):
Code: [ Select ]
startX = 30; startY = 300;
moviesCount = 20; // number of movies ... 20 is just to be there :p
crtX = startX; crtY = startY;
crtMovieIndex = 1; // first movie index
h = thumbnail1._height;
total_width = 0;

while (crtMovieIndex <= moviesCount)
{
    // section 1
    // place this code after section 2 for a moviclip line to go beyond endX
    total_width += this["thumbnail"+crtMovieIndex]._width + 2;
    if (total_width + startX > endX) // if a new line
    {
     crtY += h + 2; // 2 pixel vertical space between movies
     crtX = startX;
     total_width = 0;
    }

    // section 2   
    this["thumbnail"+crtMovieIndex]._x = crtX;
    this["thumbnail"+crtMovieIndex]._Y = crtY;
    crtX += w + 2; // 2 pixel horizontal space between movies
   
    // section 3
    crtMovieIndex ++;
}
  1. startX = 30; startY = 300;
  2. moviesCount = 20; // number of movies ... 20 is just to be there :p
  3. crtX = startX; crtY = startY;
  4. crtMovieIndex = 1; // first movie index
  5. h = thumbnail1._height;
  6. total_width = 0;
  7. while (crtMovieIndex <= moviesCount)
  8. {
  9.     // section 1
  10.     // place this code after section 2 for a moviclip line to go beyond endX
  11.     total_width += this["thumbnail"+crtMovieIndex]._width + 2;
  12.     if (total_width + startX > endX) // if a new line
  13.     {
  14.      crtY += h + 2; // 2 pixel vertical space between movies
  15.      crtX = startX;
  16.      total_width = 0;
  17.     }
  18.     // section 2   
  19.     this["thumbnail"+crtMovieIndex]._x = crtX;
  20.     this["thumbnail"+crtMovieIndex]._Y = crtY;
  21.     crtX += w + 2; // 2 pixel horizontal space between movies
  22.    
  23.     // section 3
  24.     crtMovieIndex ++;
  25. }
  • koivi
  • Novice
  • Novice
  • koivi
  • Posts: 23
  • Loc: Minnesota

Post 3+ Months Ago

ok, so 2 months have past and I've finally come back to this...

Today I go the thumbnails displaying in position (horizontal now). I created the thumbnails using the createEmptyMovieClip, loadMovie the image, scaled the image appropriately, and recorded the width and height of each for later use (thumbnail._width & ._height doesn't work for some reason).

So now I will need to go through and create the function for moving things around (shouldn't be too hard). However, I now need to be able to specify which functions to call (and with what parameters) for the thumbnail MCs for the over and click states. Could someone give me a hint at how to do that? I'm just not sure on the terms to search for, and the things that I have tried don't work how I had expected them to.

TIA
  • IceCold
  • Guru
  • Guru
  • User avatar
  • Posts: 1254
  • Loc: Ro

Post 3+ Months Ago

store every information inside the thumbnail movies
Code: [ Select ]
this["thumbnail"+crtMovieIndex].bigPicture = "something";
this["thumbnail"+crtMovieIndex].otherVar = "something else";
this["thumbnail"+crtMovieIndex].onRollOver = function()
{
  // in this context, this represent the current thumb  
  this.gotoAndPlay("animation");
  somevar = this.somevar;
}
  1. this["thumbnail"+crtMovieIndex].bigPicture = "something";
  2. this["thumbnail"+crtMovieIndex].otherVar = "something else";
  3. this["thumbnail"+crtMovieIndex].onRollOver = function()
  4. {
  5.   // in this context, this represent the current thumb  
  6.   this.gotoAndPlay("animation");
  7.   somevar = this.somevar;
  8. }

i hope u get the idea
  • koivi
  • Novice
  • Novice
  • koivi
  • Posts: 23
  • Loc: Minnesota

Post 3+ Months Ago

Thanks. I was thinking I had gone mad, as that's how I thought it should have been done. However, I tried that once, and now I tried again just to be sure, and it still doesn't seem to do anything. I've got to be missing something really simple, but I just can't put my finger on it...

I can read the XML: http://koivi.com/USENET_STUFF/flash_gallery/images.xml

and I can get the display: http://koivi.com/USENET_STUFF/flash_gallery/

I just can't seem to get the darn onRollOver, onRollOut or onPress methods to work for me.

What am I missing? http://koivi.com/USENET_STUFF/flash_gal ... allery.zip

I really appreciate all the help you have provided with this problem!
  • nosdude
  • Born
  • Born
  • nosdude
  • Posts: 4

Post 3+ Months Ago

If you have photoshop CS2 you can actually make this flash gallery using a wizard. You open Adobe Bridge, select the photos you want to include in the gallery and then go to tools, photoshop, web photo gallery. You'll see the Flash - Gallery 1 style is exactly the same as the gallery you intially quoted... (http://www.gaate.no/foto/konserter/2005/2912blaest2005/index.htm)
  • koivi
  • Novice
  • Novice
  • koivi
  • Posts: 23
  • Loc: Minnesota

Post 3+ Months Ago

well ain't that just a nifty little thing. All I ended up needing to do was change the XML files that photoshop creates to pull from the database. Thanks for the tip. However, I think I will still keep the other files in the event that something a little more custom comes up. ;)
  • stchatterbox
  • Student
  • Student
  • User avatar
  • Posts: 70
  • Loc: London, Tokyo, Macau

Post 3+ Months Ago

This is an old post but as it is something similar so I don't want to start a new thread.

With a few clicks, we can make a Flash gallery using PhotoshopCS2, but I just wonder if there're other flash templates available for download which we can install to our PhotoshopCS2?

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 6 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.