# Xml sliding menu timeline

**URL:** <https://forum.kirupa.com/t/xml-sliding-menu-timeline/264762>\
**Category:** Uncategorized\
**Created:** [June 30, 2008, 9:11am UTC](https://forum.kirupa.com/t/xml-sliding-menu-timeline/264762 "2008-06-30T09:11:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![stefan83](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@stefan83](https://forum.kirupa.com/u/stefan83)\
**Post date:** [June 30, 2008, 9:11am UTC](https://forum.kirupa.com/t/xml-sliding-menu-timeline/264762/1 "2008-06-30T09:11:46Z")

</div>

HI there,

I am about to develop a timeline showing the past significant developments of a company and I believe the tutorial for the sliding menu found [[COLOR=#003366]http://www.kirupa.com/developer/flash5/slidingmenu.htm[/COLOR]](http://www.kirupa.com/developer/flash5/slidingmenu.htm) would be a great place to start. However there could potentially be a large volume of data to include so I would like it to be xml driven or to load seperate movie clips externally for each option to reduce file size and therefore download time. Any suggestions would be very much appreciated. Thanks!

---

<div class="post-metadata">

**Author:** ![randomagain](https://avatars.discourse-cdn.com/v4/letter/r/35a633/32.png) [@randomagain](https://forum.kirupa.com/u/randomagain)\
**Post date:** [June 30, 2008, 9:28am UTC](https://forum.kirupa.com/t/xml-sliding-menu-timeline/264762/2 "2008-06-30T09:28:31Z")

</div>

yerh read the kipura tutorials on xml 😛

thumbnail galleries

all the info is there

just make sure to stick all the individual MCs in a container MC, before starting the slider function code.

---

<div class="post-metadata">

**Author:** ![stefan83](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@stefan83](https://forum.kirupa.com/u/stefan83)\
**Post date:** [June 30, 2008, 11:55am UTC](https://forum.kirupa.com/t/xml-sliding-menu-timeline/264762/3 "2008-06-30T11:55:51Z")

</div>

Hi Randomagain, thanks for your reply and appologies for the ‘spamming’ in the other forum - just realised that I posted my query in the wrong section.

I have followed the add thumbnails xml gallery and I have started to place the seperate MCs (for each image) within a container MC as you suggested but the images do not load now anything wrong with the AS? I asume that the seperate MCs will each need to be defined with a unique instance name. Also, will the images still all load from the same xml file or do they all need to be defined seperately? Thanks!!

function loadXML(loaded) {  
if (loaded) {  
xmlNode = this.firstChild;  
image = [];  
description = [];  
thumbnails = [];  
total = xmlNode.childNodes.length;  
for (i=0; i\<total; i++) {  
image\* = xmlNode.childNodes\*.childNodes[0].firstChild.nodeValue;  
description\* = xmlNode.childNodes\*.childNodes[1].firstChild.nodeValue;  
thumbnails\* = xmlNode.childNodes\*.childNodes[2].firstChild.nodeValue;  
thumbnails\_fn(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;  
this.onEnterFrame = function() {  
filesize = picture.getBytesTotal();  
loaded = picture.getBytesLoaded();  
preloader.\_visible = true;  
if (loaded != filesize) {  
preloader.preload\_bar.\_xscale = 100\*loaded/filesize;  
} else {  
preloader.\_visible = false;  
if (picture.\_alpha\<100) {  
picture.\_alpha += 10;  
}  
}  
};  
function nextImage() {  
if (p\<(total-1)) {  
p++;  
if (loaded == filesize) {  
picture.\_alpha = 0;  
picture.loadMovie(image[p], 1);  
desc\_txt.text = description[p];  
picture\_num();  
}  
}  
}  
function prevImage() {  
if (p\>0) {  
p–;  
picture.\_alpha = 0;  
picture.loadMovie(image[p], 1);  
desc\_txt.text = description[p];  
picture\_num();  
}  
}  
function firstImage() {  
if (loaded == filesize) {  
picture.\_alpha = 0;  
picture.loadMovie(image[0], 1);  
desc\_txt.text = description[0];  
picture\_num();  
}  
}  
function picture\_num() {  
current\_pos = p+1;  
pos\_txt.text = current\_pos+" / "+total;  
}  
function thumbNailScroller() {  
// thumbnail code!  
this.createEmptyMovieClip(“tscroller”, 1000);  
scroll\_speed = 10;  
tscroller.onEnterFrame = function() {  
if ((\_root.\_ymouse\>=thumbnail\_mc.\_y) && (\_root.\_ymouse\<=thumbnail\_mc.\_y+thumbnail\_mc.\_height)) {  
if ((\_root.\_xmouse\>=(hit\_right.\_x-40)) && (thumbnail\_mc.hitTest(hit\_right))) {  
thumbnail\_mc.\_x -= scroll\_speed;  
} else if ((\_root.\_xmouse\<=(hit\_left.\_x+40)) && (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+5)\*k;  
target\_mc.pictureValue = k;  
target\_mc.onRelease = function() {  
p = this.pictureValue-1;  
nextImage();  
};  
target\_mc.onRollOver = function() {  
this.\_alpha = 50;  
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);  
}

---

<div class="post-metadata">

**Author:** ![randomagain](https://avatars.discourse-cdn.com/v4/letter/r/35a633/32.png) [@randomagain](https://forum.kirupa.com/u/randomagain)\
**Post date:** [June 30, 2008, 12:03pm UTC](https://forum.kirupa.com/t/xml-sliding-menu-timeline/264762/4 "2008-06-30T12:03:25Z")

</div>

i think this a bad example to work from… i think its maybe a little overly basic

if all you are loading is jpgs instead of swfs, just change the jpg for a swf…

each thumbnail has a UID, incremented “k” value

if you have added another container MC you’ve changed the path, so you will have to say

[“thumbnail”+k].containerMC.loadMovie()

if you catch my drift

---

<div class="post-metadata">

**Author:** ![stefan83](https://avatars.discourse-cdn.com/v4/letter/s/3d9bf3/32.png) [@stefan83](https://forum.kirupa.com/u/stefan83)\
**Post date:** [June 30, 2008, 12:38pm UTC](https://forum.kirupa.com/t/xml-sliding-menu-timeline/264762/5 "2008-06-30T12:38:22Z")

</div>

Sorry, I’m not sure I do. I just want it to work in the same way as the sliding menu but loading jpgs form an xml file when each option is selected

---

<div class="post-metadata">

**Author:** ![randomagain](https://avatars.discourse-cdn.com/v4/letter/r/35a633/32.png) [@randomagain](https://forum.kirupa.com/u/randomagain)\
**Post date:** [June 30, 2008, 12:51pm UTC](https://forum.kirupa.com/t/xml-sliding-menu-timeline/264762/6 "2008-06-30T12:51:34Z")

</div>

well take the example, and change the path in the xml…

swf1.swf  
sw2.swf

and replace it with

img1.jpg  
img2.jpg

it will load a JPG the same as a Swf