Back To Flash and ActionScript Forum

XML Gallery

  • routhu
  • Beginner
  • Beginner
  • User avatar
  • Joined: Feb 28, 2007
  • Posts: 47
  • Loc: India
  • Status: Offline

Post June 15th, 2007, 5:27 am

Hi all,

I already have thumbnail xml falsh gallery, It's working fine. But I need to add thumb title bellow of each thumbnail image. How can I achieve this task.

Can any one please help.

here is the code which I am using.

Code: [ Select ]
function loadXML(loaded) {
    if (loaded) {
        xmlNode = this.firstChild;
        thumbnails = [];
        titname = [];
         link = [];
        total = xmlNode.childNodes.length;
        for (i=0; i<total; i++) {
            thumbnails[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
            titname[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
            link[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
            thumbnails_fn(i);
            trace(titname[i]);
            trace(link[i]);
        }
        firstImage();
    } else {
        content = "file not loaded!";
    }
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
    if (Key.getCode() == Key.LEFT) {
        prevImage();
    } else if (Key.getCode() == Key.RIGHT) {
        nextImage();
    }
};
Key.addListener(listen);
previous_btn.onRelease = function() {
    prevImage();
};
next_btn.onRelease = function() {
    nextImage();
};

/////////////////////////////////////
p = 0;
function thumbNailScroller() {
    // thumbnail code!
    this.createEmptyMovieClip("tscroller", 1000);
    scroll_speed = 8;
    tscroller.onEnterFrame = function() {
        if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
            if ((_root._xmouse>=(hit_right._x-350)) && (thumbnail_mc.hitTest(hit_right))) {
                thumbnail_mc._x -= scroll_speed;
            } else if ((_root._xmouse<=(hit_left._x+350)) && (thumbnail_mc.hitTest(hit_left))) {
                thumbnail_mc._x += scroll_speed;
            }
        } else {
            delete tscroller.onEnterFrame;
        }
    };
}
function thumbnails_fn(k) {
    thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
    tlistener = new Object();
    tlistener.onLoadInit = function(target_mc) {
        target_mc._x = hit_left._x+(target_mc._width+10)*k;
        target_mc.pictureValue = k;
        trace(target_mc.pictureValue);
        target_mc.onRelease = function() {
            p = this.pictureValue;
            nextImage();
            tit_name.text = titname[p];
          getURL(link[p], "_self");
            trace(link[p]);
};
        target_mc.onRollOver = function() {
            this._alpha = 80;
            thumbNailScroller();
        };
        target_mc.onRollOut = function() {
            this._alpha = 100;
        };
    };
    image_mcl = new MovieClipLoader();
    image_mcl.addListener(tlistener);
    image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
}
  1. function loadXML(loaded) {
  2.     if (loaded) {
  3.         xmlNode = this.firstChild;
  4.         thumbnails = [];
  5.         titname = [];
  6.          link = [];
  7.         total = xmlNode.childNodes.length;
  8.         for (i=0; i<total; i++) {
  9.             thumbnails[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
  10.             titname[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
  11.             link[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
  12.             thumbnails_fn(i);
  13.             trace(titname[i]);
  14.             trace(link[i]);
  15.         }
  16.         firstImage();
  17.     } else {
  18.         content = "file not loaded!";
  19.     }
  20. }
  21. xmlData = new XML();
  22. xmlData.ignoreWhite = true;
  23. xmlData.onLoad = loadXML;
  24. xmlData.load("images.xml");
  25. /////////////////////////////////////
  26. listen = new Object();
  27. listen.onKeyDown = function() {
  28.     if (Key.getCode() == Key.LEFT) {
  29.         prevImage();
  30.     } else if (Key.getCode() == Key.RIGHT) {
  31.         nextImage();
  32.     }
  33. };
  34. Key.addListener(listen);
  35. previous_btn.onRelease = function() {
  36.     prevImage();
  37. };
  38. next_btn.onRelease = function() {
  39.     nextImage();
  40. };
  42. /////////////////////////////////////
  43. p = 0;
  44. function thumbNailScroller() {
  45.     // thumbnail code!
  46.     this.createEmptyMovieClip("tscroller", 1000);
  47.     scroll_speed = 8;
  48.     tscroller.onEnterFrame = function() {
  49.         if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
  50.             if ((_root._xmouse>=(hit_right._x-350)) && (thumbnail_mc.hitTest(hit_right))) {
  51.                 thumbnail_mc._x -= scroll_speed;
  52.             } else if ((_root._xmouse<=(hit_left._x+350)) && (thumbnail_mc.hitTest(hit_left))) {
  53.                 thumbnail_mc._x += scroll_speed;
  54.             }
  55.         } else {
  56.             delete tscroller.onEnterFrame;
  57.         }
  58.     };
  59. }
  60. function thumbnails_fn(k) {
  61.     thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
  62.     tlistener = new Object();
  63.     tlistener.onLoadInit = function(target_mc) {
  64.         target_mc._x = hit_left._x+(target_mc._width+10)*k;
  65.         target_mc.pictureValue = k;
  66.         trace(target_mc.pictureValue);
  67.         target_mc.onRelease = function() {
  68.             p = this.pictureValue;
  69.             nextImage();
  70.             tit_name.text = titname[p];
  71.           getURL(link[p], "_self");
  72.             trace(link[p]);
  73. };
  74.         target_mc.onRollOver = function() {
  75.             this._alpha = 80;
  76.             thumbNailScroller();
  77.         };
  78.         target_mc.onRollOut = function() {
  79.             this._alpha = 100;
  80.         };
  81.     };
  82.     image_mcl = new MovieClipLoader();
  83.     image_mcl.addListener(tlistener);
  84.     image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
  85. }
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post June 15th, 2007, 5:27 am

  • routhu
  • Beginner
  • Beginner
  • User avatar
  • Joined: Feb 28, 2007
  • Posts: 47
  • Loc: India
  • Status: Offline

Post June 17th, 2007, 9:24 pm

Any One Please?
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13458
  • Loc: Florida
  • Status: Offline

Post June 17th, 2007, 11:37 pm

It's a pain to read through.
Rather than assigning properties to MovieClips, this little exerpt is used.
Code: [ Select ]
     thumbnails[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;

     titname[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;

     link[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
  1.      thumbnails[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
  3.      titname[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
  5.      link[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;


Here's a quick hack to demonstrate one way the title could be displayed.

1) Find the following line.
Code: [ Select ]
thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());


After that line add
Code: [ Select ]
// Just stash it on the MovieClip untill the content is loaded, so we know where it's going
thumbnail_mc["t"+k].title = titname[k];
  1. // Just stash it on the MovieClip untill the content is loaded, so we know where it's going
  2. thumbnail_mc["t"+k].title = titname[k];


2) Find the following line.
Code: [ Select ]
tlistener.onLoadInit = function(target_mc) {


After that line add
Code: [ Select ]
// Attach a text-field for the title
target_mc.createTextField("_title", target_mc.getNextHighestDepth(), 0, target_mc._height-20, target_mc._width, 20);
target_mc["_title"].background = true;
target_mc["_title"].text = target_mc.title;
  1. // Attach a text-field for the title
  2. target_mc.createTextField("_title", target_mc.getNextHighestDepth(), 0, target_mc._height-20, target_mc._width, 20);
  3. target_mc["_title"].background = true;
  4. target_mc["_title"].text = target_mc.title;


That should add a white backgrounded box with the title found in the XML to the bottom of the thumbnails, but I'm just going by what I see in the code & it might not work at all.
Strong with this one, the sudo is.
  • routhu
  • Beginner
  • Beginner
  • User avatar
  • Joined: Feb 28, 2007
  • Posts: 47
  • Loc: India
  • Status: Offline

Post June 18th, 2007, 12:37 am

Hi joebert,

Thanks for ur repley . But i am not able to get the text at the bottom of the Image.

I am not able to solve that one from the last two days.

Can you please have a look in to my code.

I have implemented whatever u told , But not able to get .....

Can you check once. Here is the Code.

My Text Field Name is "desc_txt"

Code: [ Select ]
function loadXML(loaded) {
    if (loaded) {
        xmlNode = this.firstChild;
        thumbnails = [];
        titname = [];
         link = [];
        total = xmlNode.childNodes.length;
        for (i=0; i<total; i++) {
            thumbnails[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
            titname[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
            link[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
            thumbnails_fn(i);
            //trace(link[i]);
        }
        firstImage();
    } else {
        content = "file not loaded!";
    }
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
    if (Key.getCode() == Key.LEFT) {
        prevImage();
    } else if (Key.getCode() == Key.RIGHT) {
        nextImage();
    }
};
Key.addListener(listen);
previous_btn.onRelease = function() {
    prevImage();
};
next_btn.onRelease = function() {
    nextImage();
};

/////////////////////////////////////
p = 0;
function thumbNailScroller() {
    // thumbnail code!
    this.createEmptyMovieClip("tscroller", 1000);
    scroll_speed = 8;
    tscroller.onEnterFrame = function() {
        if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
            if ((_root._xmouse>=(hit_right._x-350)) && (thumbnail_mc.hitTest(hit_right))) {
                thumbnail_mc._x -= scroll_speed;
            } else if ((_root._xmouse<=(hit_left._x+350)) && (thumbnail_mc.hitTest(hit_left))) {
                thumbnail_mc._x += scroll_speed;
            }
        } else {
            delete tscroller.onEnterFrame;
        }
    };
}
function thumbnails_fn(k) {
    thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
    thumbnail_mc["t"+k].title = titname[k];
    tlistener = new Object();
    tlistener.onLoadInit = function(target_mc) {
// Attach a text-field for the title

target_mc.createTextField("desc_txt", target_mc.getNextHighestDepth(), 0, target_mc._height-20, target_mc._width, 20);

target_mc["desc_txt"].background = true;

target_mc["desc_txt"].text = titname[k];

trace(titname[k]);


        target_mc._x = hit_left._x+(target_mc._width+10)*k;
        target_mc.pictureValue = k;
        //trace(target_mc.pictureValue);
        title_mc.desc_txt.text = description[k];
            //trace(description[p]);
        target_mc.onRelease = function() {
            p = this.pictureValue;
            nextImage();
          getURL(link[p], "_self");
            

};
        target_mc.onRollOver = function() {
            this._alpha = 80;
            thumbNailScroller();
        };
        target_mc.onRollOut = function() {
            this._alpha = 100;
        };
    };
    image_mcl = new MovieClipLoader();
    image_mcl.addListener(tlistener);
    image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
}
  1. function loadXML(loaded) {
  2.     if (loaded) {
  3.         xmlNode = this.firstChild;
  4.         thumbnails = [];
  5.         titname = [];
  6.          link = [];
  7.         total = xmlNode.childNodes.length;
  8.         for (i=0; i<total; i++) {
  9.             thumbnails[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
  10.             titname[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
  11.             link[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
  12.             thumbnails_fn(i);
  13.             //trace(link[i]);
  14.         }
  15.         firstImage();
  16.     } else {
  17.         content = "file not loaded!";
  18.     }
  19. }
  20. xmlData = new XML();
  21. xmlData.ignoreWhite = true;
  22. xmlData.onLoad = loadXML;
  23. xmlData.load("images.xml");
  24. /////////////////////////////////////
  25. listen = new Object();
  26. listen.onKeyDown = function() {
  27.     if (Key.getCode() == Key.LEFT) {
  28.         prevImage();
  29.     } else if (Key.getCode() == Key.RIGHT) {
  30.         nextImage();
  31.     }
  32. };
  33. Key.addListener(listen);
  34. previous_btn.onRelease = function() {
  35.     prevImage();
  36. };
  37. next_btn.onRelease = function() {
  38.     nextImage();
  39. };
  41. /////////////////////////////////////
  42. p = 0;
  43. function thumbNailScroller() {
  44.     // thumbnail code!
  45.     this.createEmptyMovieClip("tscroller", 1000);
  46.     scroll_speed = 8;
  47.     tscroller.onEnterFrame = function() {
  48.         if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
  49.             if ((_root._xmouse>=(hit_right._x-350)) && (thumbnail_mc.hitTest(hit_right))) {
  50.                 thumbnail_mc._x -= scroll_speed;
  51.             } else if ((_root._xmouse<=(hit_left._x+350)) && (thumbnail_mc.hitTest(hit_left))) {
  52.                 thumbnail_mc._x += scroll_speed;
  53.             }
  54.         } else {
  55.             delete tscroller.onEnterFrame;
  56.         }
  57.     };
  58. }
  59. function thumbnails_fn(k) {
  60.     thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
  61.     thumbnail_mc["t"+k].title = titname[k];
  62.     tlistener = new Object();
  63.     tlistener.onLoadInit = function(target_mc) {
  64. // Attach a text-field for the title
  66. target_mc.createTextField("desc_txt", target_mc.getNextHighestDepth(), 0, target_mc._height-20, target_mc._width, 20);
  68. target_mc["desc_txt"].background = true;
  70. target_mc["desc_txt"].text = titname[k];
  72. trace(titname[k]);
  75.         target_mc._x = hit_left._x+(target_mc._width+10)*k;
  76.         target_mc.pictureValue = k;
  77.         //trace(target_mc.pictureValue);
  78.         title_mc.desc_txt.text = description[k];
  79.             //trace(description[p]);
  80.         target_mc.onRelease = function() {
  81.             p = this.pictureValue;
  82.             nextImage();
  83.           getURL(link[p], "_self");
  84.             
  86. };
  87.         target_mc.onRollOver = function() {
  88.             this._alpha = 80;
  89.             thumbNailScroller();
  90.         };
  91.         target_mc.onRollOut = function() {
  92.             this._alpha = 100;
  93.         };
  94.     };
  95.     image_mcl = new MovieClipLoader();
  96.     image_mcl.addListener(tlistener);
  97.     image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
  98. }
  • routhu
  • Beginner
  • Beginner
  • User avatar
  • Joined: Feb 28, 2007
  • Posts: 47
  • Loc: India
  • Status: Offline

Post June 18th, 2007, 1:02 am

Hi Joebert,

By the below code I am getting text. But the text not duplicating that is not scrolling.

can you look at once.

Thanks
krish

Code: [ Select ]
function thumbnails_fn(k) {
    thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
    tlistener = new Object();
    tlistener.onLoadInit = function(target_mc) {
        target_mc._x = hit_left._x+(target_mc._width+10)*k;
        target_mc.pictureValue = k;
        desc_txt.text = titname[p];
            //trace(description[p]);
        target_mc.onRelease = function() {
            p = this.pictureValue;
            nextImage();
          getURL(link[p], "_self");
            

};
  1. function thumbnails_fn(k) {
  2.     thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
  3.     tlistener = new Object();
  4.     tlistener.onLoadInit = function(target_mc) {
  5.         target_mc._x = hit_left._x+(target_mc._width+10)*k;
  6.         target_mc.pictureValue = k;
  7.         desc_txt.text = titname[p];
  8.             //trace(description[p]);
  9.         target_mc.onRelease = function() {
  10.             p = this.pictureValue;
  11.             nextImage();
  12.           getURL(link[p], "_self");
  13.             
  15. };
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13458
  • Loc: Florida
  • Status: Offline

Post June 18th, 2007, 2:39 am

Quote:
I have implemented whatever u told , But not able to get .....

I forgot that MovieClips are "emptied" when they load content, the title variable was likely being trashed before it was used.

I'm out of ideas, sorry.
Strong with this one, the sudo is.
  • IceCold
  • Guru
  • Guru
  • User avatar
  • Joined: Nov 05, 2004
  • Posts: 1254
  • Loc: Ro
  • Status: Offline

Post June 18th, 2007, 6:14 am

lier joebert ... better said you're out of patience :D
Always when dealing with thumbnails which contain both text and images,
make a holder for the thumb, add all the properties to it.
Next, just createEmptyMovieClip for an image movieclip in which you will load the picture.
i.e.:
Code: [ Select ]
this.createEmptyMovieClip("mcThumb0", 0);
mcThumb0.var1 = "something from xml";
mcThumb0.var2 = "something from xml";
mcThumb0.var3 = "something from xml";

// when loading a new image in the thumb
mcThumb0.createEmptyMovieClip("img", 0);
mcThumb0.img.loadMovie("some image");
  1. this.createEmptyMovieClip("mcThumb0", 0);
  2. mcThumb0.var1 = "something from xml";
  3. mcThumb0.var2 = "something from xml";
  4. mcThumb0.var3 = "something from xml";
  6. // when loading a new image in the thumb
  7. mcThumb0.createEmptyMovieClip("img", 0);
  8. mcThumb0.img.loadMovie("some image");
“True mastery transcede any particular art. It stems from mastery of oneself - the ability, developed throgh self-discipline, to be calm, fully aware, and complety in tune with oneself and the surroundings. Then, and only then, can a person know himself. ”
  • routhu
  • Beginner
  • Beginner
  • User avatar
  • Joined: Feb 28, 2007
  • Posts: 47
  • Loc: India
  • Status: Offline

Post June 18th, 2007, 6:27 am

Hi IceCold,

Thanks for your Repley.

Can you please explain Very Clearly . I am not getting what u told.

I am trying solve this one from the last two days . But i am not able to sort this one.

Thanks,
Krish.
  • IceCold
  • Guru
  • Guru
  • User avatar
  • Joined: Nov 05, 2004
  • Posts: 1254
  • Loc: Ro
  • Status: Offline

Post June 21st, 2007, 5:15 am

Do you want pictures and diagrams to explain this? Also probably a movie, it's better when it's action ... is not that boring like static images.
Just start a new simple project and use my example then you'll get the idea.
“True mastery transcede any particular art. It stems from mastery of oneself - the ability, developed throgh self-discipline, to be calm, fully aware, and complety in tune with oneself and the surroundings. Then, and only then, can a person know himself. ”

Page 1 of 1

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 22 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.