-
[RESOLVED] CS3 AS2 HELP!!! Dynamic thumbnail Gallery
Hi everyone,
I have a dynamic thumbnail gallery that laods thumbnails from db/xml and also each thumbnails associated main image.
When the user rolls over the thumbnail the larger image displays to the right.
THis is all working fine however I need to update the script to change the thumbnail gallery layout from a 3 column 2 row gallery to a 4column 4 row gallery.
I've adjusted the as and resized the thumbnails to allow for this and setup a 8px spacer between thumbs
BUT...
THe way I've adjusted the script will set the first row perfectly and then the second row perfectly but it then shifts the next row right by 4 thumbs and then on for each subsequent row.
Here is the relevant (I think) section of the AS
Actionscript Code:
private function loadImages() { trace("LOAD IMAGES") var _mc:MovieClip; numOfImages = 0; loadNumber = 0; preloadArray = new Array(); for (var i = 0; i<_data.item.length; i++) { _mc = createItemMC(target, i); _mc._data = _data.item[i]; itemArray.push(_mc); var loader1 = new ImageLoader(_mc.thumb, 1); var loader2 = new ImageLoader(_mc.image, 2); loader1.loadImage(settings.thumbPath+_data.item[i].image_thumb); loader2.loadImage(settings.imagePath + _data.item[i].image_name); numOfImages++; loader1.onUpdate = function(f:Number) { this._parent._parent._callback.updatePreloader(this.id,(f*100)); }; loader1.onComplete = function() { }; loader2.onUpdate = function(f:Number) { this._parent._parent._callback.updatePreloader(this.id,(f*100)); }; loader2.onComplete = function() { }; } createGallery(); } private function createItemMC(__target:MovieClip, __id:String):MovieClip { trace("CREATEITEMMC") var _mc = __target.createEmptyMovieClip("holder"+__id, __target.getNextHighestDepth()); _mc.createEmptyMovieClip("image",_mc.getNextHighestDepth()); _mc.image.id = loadNumber++; _mc.createEmptyMovieClip("thumb",_mc.getNextHighestDepth()); _mc.thumb.id = loadNumber++; var r = __id; if (r>=3) { r -= 3; } _mc.thumb._x = (r*120);//x pos of first thumb _mc.thumb._y = (Math.floor(__id/3)*185);//y value of second row of thumbs _mc.image._x = 395;//x value of main image _mc.image._y = 0; _mc.image._visible = false;
var _txt = _mc.image.createTextField("Details", _mc.image.getNextHighestDepth(), 295, 0, 175, 360);//x, y, width, height _txt.multiline = true; _txt.wordWrap = true; _txt.border = false; _txt.html = true; _txt.selectable = false; _txt.antiAliasType = "advanced"; _txt.embedFonts = true; _txt.htmlText = "<font color='0x887C74'>Style</font><br>"+_data.item[__id].product_style+"<br><br>"+"<font color='#887C74'>Colourway / Print</font><br>"+_data.item[__id].product_colour+"<br><br>"+"<font color='#887C74'>Sizes</font><br>"+_data.item[__id].product_size; _txt.setTextFormat(detailsTextFormat); return _mc; } private function createGallery() { trace("CREATE GALLERY") trace("numOfImages = " + numOfImages) for (var i = 0; i < numOfImages; i++) { trace(i + " / " + itemArray[i]) itemArray[i].fade = function(mc, a, b, c) { var t:Tween = new Tween(mc, "_alpha", Strong.easeOut, a, b, c, true); }; { trace("all images loaded, display the default first one"); var defaultImage:MovieClip = itemArray[0]; defaultImage.image._visible = true; var t:Tween = new Tween(defaultImage, "_alpha", Strong.easeOut, 0, 100, 3, true); } itemArray[i].onRollOver = function() { defaultImage.image._visible = false; this.image._visible = true; this.fade(this.image,0,100,3); }; itemArray[i].onRollOut = function() { //this.prevImage = this.image; //this.prevImage._visible = true; this.fade(this.image,100,0,3); }; } }
But if you've got time and so that you can get the idea I've attached the working files and as.
Any advice would be hugely appreciated as this is due end mid next week!
AURGHHHH!!!
Thanks heaps
Last edited by POUND!; 07-20-2010 at 12:09 AM.
-
Get an error when trying to extract the fla from the zip file. Can you post just the fla here?
-
I repacked the zip, sorry about that.
Last edited by POUND!; 07-20-2010 at 12:10 AM.
-
Code:
private function createItemMC(__target:MovieClip, __id:String):MovieClip {
trace("CREATEITEMMC")
var _mc = __target.createEmptyMovieClip("holder"+__id, __target.getNextHighestDepth());
_mc.createEmptyMovieClip("image",_mc.getNextHighestDepth());
_mc.image.id = loadNumber++;
_mc.createEmptyMovieClip("thumb",_mc.getNextHighestDepth());
_mc.thumb.id = loadNumber++;
var r = __id;
// if (r>=3) { r -= 3; }
r = r % 4;
-
Awesome, thanks man!
Another reason i should have listened in maths class!
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|