A Flash Developer Resource Site

Results 1 to 5 of 5

Thread: [RESOLVED] CS3 AS2 HELP!!! Dynamic thumbnail Gallery

  1. #1

    resolved [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.

  2. #2
    :
    Join Date
    Dec 2002
    Posts
    3,518
    Get an error when trying to extract the fla from the zip file. Can you post just the fla here?

  3. #3
    I repacked the zip, sorry about that.
    Last edited by POUND!; 07-20-2010 at 12:10 AM.

  4. #4
    :
    Join Date
    Dec 2002
    Posts
    3,518
    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;

  5. #5
    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
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center