FORUMS: list search recent posts

Laying out a grid of dynamic photos

COW Forums : Adobe Flash

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Dan Smith
Laying out a grid of dynamic photos
on Nov 27, 2007 at 9:23:59 am

hi,

i'm using this script to pull images as thumbnails then when clicked on a linked image and text appears. All my images and text are from an xml page.

var thumb_spacing = 230

var description_lv = new LoadVars();
description_lv.onData = function(raw_text){
image2_mc.description_txt.text = raw_text;
}


function DisplayInfo(){
grid_container.menu_mc._visible = true;
image2_mc._visible = true;
image2_mc.description_txt.text = this.location_text;
}

image2_mc.close_btn.onRelease = function(){
menu_mc._visible = true;
image2_mc._visible = false;
image2_mc.description_txt.text = "";
}
image2_mc._visible = false;



function GeneratePortfolio(portfolio_xml){
var portfolioPictures = portfolio_xml.firstChild.childNodes;
for (var i = 0; i < portfolioPictures.length; i++){
var currentPicture = portfolioPictures[i];

var currentThumb_mc = menu_mc.createEmptyMovieClip("thumbnail_mc"+i,i);
currentThumb_mc._x = i * thumb_spacing;

currentThumb_mc.createEmptyMovieClip("thumb_container",0);
currentThumb_mc.thumb_container.loadMovie(currentPicture.attributes.thumb);

currentThumb_mc.title = currentPicture.attributes.title;
currentThumb_mc.image = currentPicture.attributes.image;
currentThumb_mc.description = currentPicture.attributes.description;


currentThumb_mc.onRollOver = currentThumb_mc.onDragOver = function(){
info_txt.text = this.title;
}
currentThumb_mc.onRollOut = currentThumb_mc.onDragOut = function(){
info_txt.text = "";
}
currentThumb_mc.onRelease = function(){
image2_mc.image_mc.loadMovie(this.image);
description_lv.load(this.description);
image2_mc._visible = true;

}

}
}


var portfolio_xml = new XML();
portfolio_xml.ignoreWhite = true;
portfolio_xml.onLoad = function(success){
if (success) GeneratePortfolio(this);
else trace("Error loading XML file");
}

portfolio_xml.load("portfolio.xml");


now I want to display my thumbnails in a grid that is no longer than 3 images wide and length is variable to the dynamic content. How can I implement some sort of grid, or set the currentThumb_mc._y to change its value each time theres 3 images across.

hope that makes sense.

DAN


Return to posts index

DaveTrep
Re: Laying out a grid of dynamic photos
on Nov 30, 2007 at 10:14:30 am

Hi Dan

I have done this sort of thing before. I use 3 functions, one to remove the current images, one to draw the new ones and one to place the images within a grid. A sample of the code I use is:


clearPanel();
drawGrid();
drawPanel(imgURLArray);
function clearPanel() {

for (var p = 0; p<9; p++) {

_root.selectedClipPanel_mc["tnID"+p].removeMovieClip();
}
}
function drawPanel(selectedClipArray:Array) {
for (var p = 0; p<9; p++) {
_root.ingestPanel_mc.selectedClipPanel_mc.attachMovie("thumbnail_mc", "tnID"+0, 1000+p);
_root.selectedClipPanel_mc["tnID"+p].tn_mc.tn_image.loadMovie(selectedClipArray[p]._clipTNFileName);

}
}
function drawGrid() {
var xPos = 20;
var yPos = 10;
var gCount = 0;
for (var i = 0; i<9; i++) {
if (i>0) {
var oldgNum = i-1;
xPos = _root.selectedClipPanel_mc["tnID"+oldgNum]._x+200;
yPos = _root.selectedClipPanel_mc["tnID"+oldgNum]._y;
}
if (gCount == 3) {
var oldgNum = i-1;
xPos = 20;
yPos = _root.selectedClipPanel_mc["tnID"+oldgNum]._y+190;
gCount = 0;
}
_root.selectedClipPanel_mc["tnID"+clipID]._x = xPos;
_root.selectedClipPanel_mc["tnID"+clipID]._y = yPos;
gCount++;
}
}


All you need then is a randomise function to make the image URL's in array "imgURLArray" random.

Hope this helps

Dave


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]