#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Posts
    43
    Rep Power
    34

    Arrow Need help with a dynamic display and scroll bars


    Hey guys,

    I have a file uploader that uses a file reference list (FRL) to upload files. However what I want to do is use the FRL to display all the images/files that were selected and then display them in either a list, or photo gallery. I would lean more towards the photo gallery approach but I don't know how to dynamically lay out the thumbnails properly.

    What's the best way to display the thumbnails in rows 3 pictures wide and then skip down a line etc.

    Now ofcourse I don't know how many files will be selected so my next question would be can I draw the thumbnail gallery in a seperate container (or frame sort of like in VB) and then have that container have it's own scroll bars?

    In most other programming languages I would have no problem doing this but I am a bit new to flash and I am a bit stumped.

    Thanks for any advice or direction!
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2010
    Posts
    27
    Rep Power
    0
    I recently made a memory/concentration game where I randomly picked 8 pairs out of 20 cards and then randomly assigned them to places in the grid using this code:

    Code:
    //place cards in window
    for (p=1; p<=numCards; p++){
    	var card:Card = new Card(); //new sprite
    	card.x=(((p%colCt)+1) * wid) - wid +18;
    	card.y=(trunc((p-1)/colCt)) * wid + 5;
    
    	this.addChild(card); //puts it on stage
    }
    Essentially, it loops through a list of cards (numCards=cardsChosen.length). Each run through creates a Card (custom class that inherits from MovieClip). I assign it a horizontal (x) position. wid is the width of the cards plus spacing (if your images are all the same size, you can assign wid explicitly somewhere, otherwise, you'll probably have to calculate the width you want). I added 18 to the width to offset from the edge of the stage, same for the 5 in the vertical (y) position. trunc is a custom function:

    Code:
    function trunc(val:Number):Number {
    	trace("function trunc");
    	var num = val.toString();
    	var float = num.indexOf(".");
    	if (float<0){
    		return val;
    	}
    	else{
    		return Number(num.substr(0,float));
    	}
    }
    If you don't want to create a custom class (like my Card class), you could put all the images in a movieClip (each in a different frame, with stop() in an added action layer that spans across the keyframes of the movieClip), and then before adding it to the stage, you can put card.gotoAndStop(chosenImg);

IMN logo majestic logo threadwatch logo seochat tools logo