# Slider menu....this is not easy

**URL:** <https://forum.kirupa.com/t/slider-menu-this-is-not-easy/303592>\
**Category:** Uncategorized\
**Created:** [January 22, 2010, 9:04pm UTC](https://forum.kirupa.com/t/slider-menu-this-is-not-easy/303592 "2010-01-22T21:04:36Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![max999](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@max999](https://forum.kirupa.com/u/max999)\
**Post date:** [January 22, 2010, 9:04pm UTC](https://forum.kirupa.com/t/slider-menu-this-is-not-easy/303592/1 "2010-01-22T21:04:36Z")

</div>

I have a website template and there’s an xml drop down menu that slides vertically from down to up and i would like to have it to do the opposite and also this xml menu loads am xml file with external galleries, each gallery loads pic from a folder into the mc but i would like to have some of these gallery to go to a specific frame on the fla to add a contact page…is it possible?  
it is a template from active.  
I am going nuts, here’s the code thank you:  
// Advanced XML Image Gallery v1.2  
//  
// INITIAL SETTINGS  
//  
import mx.transitions.Tween;  
import mx.transitions.easing._;  
// Set first gallery displayed by default  
galleryID = 0;  
// Set first image displayed by default  
ID = 0;  
// Set your document stage width and height here  
stageW = 1000;  
stageH = 600;  
// Set spacing amount between thumbnail images  
thumbSpace = 10;  
// Set the maximum amount of thumbs to be displayed here. Scrolling will be enabled if total of thumbs is greater than default\_maxThumbs  
default\_maxThumbs = 18;  
// Set border amount here  
border = 1;  
menu\_mc.bgX = menu\_mc.bg.\_x;  
// Set initial size of white bg here  
destWidth = bg\_mc.bg.\_width=100;  
destHeight = bg\_mc.bg.\_height=100;  
//  
// CLIP DEFAULTS  
//  
// Original positions  
fullscreen\_mcY = fullscreen\_mc.\_y;  
bgX = bg.\_x;  
bgY = bg.\_y;  
menu\_mcX = menu\_mc.\_x;  
menu\_mcY = menu\_mc.\_y;  
select\_mcY = select\_mc.\_y;  
autoPlay\_mcY = autoPlay\_mc.\_y;  
// Initial visibility  
hover\_mc.\_visible = false;  
info\_mc.\_alpha = 0;  
info\_mc.destAlpha = 0;  
bttnNext.\_visible = false;  
bttnPrev.\_visible = false;  
menu\_all.\_visible = false;  
holder.\_alpha = 0;  
//  
// VARIABLE DEFAULTS  
//  
destWidth = holder.\_width+border;  
destHeight = holder.\_height+border;  
//  
// CSS STYLESHEET  
//  
var styles = new TextField.StyleSheet();  
// Set hyperlink colour and decoration here  
styles.setStyle(“a:link”, {color:’#000000’, textDecoration:‘none’});  
styles.setStyle(“a:hover”, {color:’#000000’, textDecoration:‘underline’});  
info\_mc.txt.html = true;  
info\_mc.txt.styleSheet = styles;  
//  
// ON STAGE RESIZE  
//  
stageListener = new Object();  
Stage.addListener(stageListener);  
alignObjects = function () {  
// Align BG  
bg.\_x = bgX-(Stage.width-stageW)/2;  
bg.\_y = bgY-(Stage.height-stageH)/2;  
bg.\_width = Stage.width;  
bg.\_height = Stage.height;  
// Align Menu  
menu\_mc.\_x = menu\_mcX-(Stage.width-stageW)/2+(Stage.width-stageW)/2;  
menu\_mc.\_y = menu\_mcY+(Stage.height-stageH)/2;  
menu\_mc.bg.\_x = menu\_mc.bgX-(Stage.width-stageW)/2;  
menu\_mc.bg.\_width = Stage.width;  
// Align Autoplay  
autoPlay\_mc.\_x = -(Stage.width-stageW)/2+Stage.width-autoPlay\_mc.\_width-290;  
autoPlay\_mc.\_y = autoPlay\_mcY+(Stage.height-stageH)/2;  
// Align Select Menu  
select\_mc.\_x = -(Stage.width-stageW)/2+10;  
select\_mc.\_y = select\_mcY+(Stage.height-stageH)/2;  
// Align Fullscreen  
fullscreen\_mc.\_x = -(Stage.width-stageW)/2+Stage.width-fullscreen\_mc.\_width-250;  
fullscreen\_mc.\_y = fullscreen\_mcY+(Stage.height-stageH)/2;  
};  
stageListener.onResize = function() {  
alignObjects();  
};  
alignObjects();  
//  
// AUTOPLAY FUNCTION  
//  
slideTimer = function () {  
if (!bg\_mc.hitTest(\_root.\_xmouse, \_root.\_ymouse, true)) {  
clearInterval(\_global.timeInterval);  
if (slideShow == “true”) {  
ID += 1;  
if (ID == total) {  
ID = 0;  
galleryID += 1;  
if (galleryID == galleryTotal) {  
galleryID = 0;  
}  
buildGallery();  
}  
select\_mc.selectShow.txt\_mc.txt.text = xmlNode.childNodes[galleryID].attributes.Name;  
menu\_mc.scroll\_mc.thumb\_mc[“thumb”+ID].selectThumb();  
loadID();  
}  
}  
};  
//  
// AUTOPLAY BUTTON  
//  
autoPlay\_mc.bttn.onPress = function() {  
if (this.\_parent.\_currentframe == 1) {  
slideShow = “true”;  
this.\_parent.gotoAndStop(2);  
slideTimer();  
} else {  
slideShow = “false”;  
this.\_parent.gotoAndStop(1);  
clearInterval(\_global.timeInterval);  
}  
};  
//  
// BUTTON FUNCTIONS  
//  
bg\_mc.bg.bttnNext.onRelease = function() {  
nextID();  
menu\_mc.scroll\_mc.thumb\_mc[“thumb”+ID].selectThumb();  
};  
bg\_mc.bg.bttnNext.onRollOver = function() {  
bttnNext.\_visible = true;  
};  
bg\_mc.bg.bttnNext.onRollOut = bg\_mc.bg.bttnNext.onDragOut=function () {  
bttnNext.\_visible = false;  
};  
bg\_mc.bg.bttnPrev.onRelease = function() {  
prevID();  
menu\_mc.scroll\_mc.thumb\_mc[“thumb”+ID].selectThumb();  
};  
bg\_mc.bg.bttnPrev.onRollOver = function() {  
bttnPrev.\_visible = true;  
};  
bg\_mc.bg.bttnPrev.onRollOut = bg\_mc.bg.bttnPrev.onDragOut=function () {  
bttnPrev.\_visible = false;  
};  
info\_bttn.bttn.onRelease = function() {  
getURL(url[ID], “\_blank”);  
};  
info\_bttn.bttn.onRollOver = function() {  
info\_mc.destAlpha = 100;  
};  
info\_bttn.bttn.onRollOut = info\_bttn.bttn.onDragOut=function () {  
info\_mc.destAlpha = 0;  
};  
//  
// LOAD ID FUNCTIONS  
//  
nextID = function () {  
// Switch off slideshow mode if next pressed  
slideShow = “false”;  
// Get next ID  
if (ID\<(total-1)) {  
ID++;  
loadID();  
}  
};  
prevID = function () {  
// Switch off slideshow mode if previous pressed  
slideShow = “false”;  
// Get previous ID  
if (ID\>0) {  
ID–;  
loadID();  
}  
};  
loadID = function () {  
tweenAlphaPreloader.stop();  
tweenAlphaPreloader.rewind();  
preloader.\_alpha = 100;  
tweenAlpha.rewind();  
tweenAlpha.stop();  
destAlpha = 0;  
holder.\_alpha = 0;  
info\_mc.\_alpha = 0;  
info\_mc.destAlpha = 0;  
bg.newHEX = Colour[ID];  
menu\_mc.hover.txt.text = Caption[ID];  
loadMovie(Large[ID], holder);  
if (slideShow == “true”) {  
autoPlay\_mc.gotoAndStop(2);  
} else {  
autoPlay\_mc.gotoAndStop(1);  
}  
};  
thumbPress = function () {  
// Switch off slideshow mode if thumb pressed  
slideShow = “false”;  
loadID();  
};  
//  
// DISPLAY INFO TEXT  
//  
setText = function () {  
info\_mc.bg.\_width = holder.\_width;  
info\_mc.txt.htmlText = Copy[ID];  
info\_mc.txt.\_width = info\_mc.bg.\_width-20;  
info\_mc.txt.\_x = info\_mc.bg.\_x+10;  
info\_mc.txt.\_height = info\_mc.txt.textHeight+15;  
info\_mc.bg.\_height = info\_mc.txt.\_height+10;  
info\_mc.\_x = holder.\_x;  
info\_mc.\_y = holder.\_y+holder.\_height-info\_mc.\_height;  
};  
//  
// ON IMAGE LOAD  
//  
alignPic = function () {  
holder.\_x = (stageW-holder.\_width)/2;  
holder.\_y = (stageH-holder.\_height-menu\_mc.\_height)/2;  
bg\_mc.bg.\_x = holder.\_x;  
bg\_mc.bg.\_y = holder.\_y;  
bg\_mc.\_x = holder.\_width/2;  
bg\_mc.\_y = holder.\_height/2;  
bttnNext.\_y = holder.\_y+(holder.\_height-bttnNext.\_height)/2;  
bttnNext.\_x = bg\_mc.\_width+(stageW-bg\_mc.\_width)/2-bttnNext.\_width-border/2;  
bttnPrev.\_y = holder.\_y+(holder.\_height-bttnPrev.\_height)/2;  
bttnPrev.\_x = (stageW-bg\_mc.\_width)/2+bttnPrev.\_width+border/2;  
preloader.\_x = holder.\_x+holder.\_width/2;  
preloader.\_y = holder.\_y+holder.\_height/2;  
};  
alignPic();  
//  
// LARGE IMAGE TRANSITION  
//  
// You can use custom easing types such as: Back, Bounce, Elastic, Regular, Strong, None  
var tweenAlpha:Tween = new Tween(holder, “\_alpha”, Strong.easeOut, 0, 100, 25, false);  
tweenAlpha.stop();  
var tweenAlphaPreloader:Tween = new Tween(preloader, “\_alpha”, Strong.easeOut, 100, 0, 25, false);  
tweenAlphaPreloader.stop();  
imageLoaded = function () {  
holder.\_alpha = 0;  
tweenAlpha.rewind();  
tweenAlpha.stop();  
currWidth = bg\_mc.bg.\_width;  
currHeight = bg\_mc.bg.\_height;  
destWidth = holder.\_width+border;  
destHeight = holder.\_height+border;  
// You can use custom easing types such as: Back, Bounce, Elastic, Regular, Strong, None  
var tweenWidth:Tween = new Tween(bg\_mc.bg, “\_width”, Strong.easeOut, currWidth, destWidth, 25, false);  
var tweenHeight:Tween = new Tween(bg\_mc.bg, “\_height”, Strong.easeOut, currHeight, destHeight, 25, false);  
tweenAlphaPreloader.start();  
tweenWidth[“onMotionFinished”] = function () {  
if (tweenWidth.position == destWidth && tweenAlpha.position == 0) {  
tweenAlpha.start();  
}  
};  
// Check if autoplay is enabled  
if (slideShow == “true”) {  
clearInterval(\_global.timeInterval);  
\_global.timeInterval = setInterval(slideTimer, Delay);  
} else {  
clearInterval(\_global.timeInterval);  
}  
};  
//  
// BUILD GALLERY FUNCTION  
//  
buildGallery = function () {  
menu\_all.destX = menu\_all.header\_mc.\_width+1+(menu\_all.menu\_mc.\_width+1)galleryID;  
menu\_all.doTween();  
ID = 0;  
destWidth = 0;  
destHeight = 0;  
//Remove previously created photos and thumbs  
for (j=0; j\<currentTotal; j++) {  
menu\_mc.scroll\_mc.thumb\_mc[“thumb”+j].removeMovieClip();  
}  
total = xmlNode.childNodes[galleryID].childNodes.length;  
maxThumbs = default\_maxThumbs;  
//Disable scrolling if too few thumbs  
if (maxThumbs\>total) {  
maxThumbs = total;  
}  
// Sets destination width and height for each image  
for (i=0; i\<total; i++) {  
Thumb = xmlNode.childNodes[galleryID].childNodes_.attributes.Thumb;  
Large\* = xmlNode.childNodes[galleryID].childNodes\*.attributes.Large;  
Caption\* = xmlNode.childNodes[galleryID].childNodes\*.attributes.Caption;  
Colour\* = xmlNode.childNodes[galleryID].childNodes\*.attributes.Colour;  
Copy\* = xmlNode.childNodes[galleryID].childNodes\*.childNodes[0].firstChild.nodeValue;  
//Build thumb menu  
menu\_mc.scroll\_mc.thumb\_mc.thumb.duplicateMovieClip(“thumb”+i, i);  
menu\_mc.scroll\_mc.thumb\_mc[“thumb”+i].\_x = (menu\_mc.scroll\_mc.thumb\_mc[“thumb”+i].\_width+thumbSpace)_i;  
loadMovie(Thumb_, menu\_mc.scroll\_mc.thumb\_mc[“thumb”+i].holder);  
menu\_mc.scroll\_mc.thumb\_mc[“thumb”+i].ID = i;  
menu\_mc.scroll\_mc.mask\_mc.\_width = ((menu\_mc.scroll\_mc.thumb\_mc.thumb.\_width+thumbSpace)\*maxThumbs)-thumbSpace;  
menu\_mc.scroll\_mc.\_x = Math.round(-(Stage.width-stageW)/2+Stage.width/2-menu\_mc.scroll\_mc.mask\_mc.\_width/2);  
//Reset scroll menu to first image on gallery load  
menu\_mc.scroll\_mc.thumb\_mc.\_x = 0;  
menu\_mc.scroll\_mc.destX = 0;  
}  
loadID();  
currentTotal = total;  
};  
//  
// THUMBNAIL MENU AND PRELOADER SCRIPT  
//  
this.menu\_mc.thumb\_menu.destX = this.menu\_mc.thumb\_menu.\_x;  
onEnterFrame = function () {  
// Align large image  
alignPic();  
this.menu\_mc.thumb\_menu.\_x += (this.menu\_mc.thumb\_menu.destX-this.menu\_mc.thumb\_menu.\_x)/3;  
//Info show and hide  
info\_mc.\_alpha += (info\_mc.destAlpha-info\_mc.\_alpha)/3;  
header\_mc.\_alpha = info\_mc.\_alpha;  
loaded = holder.getBytesLoaded();  
filesize = holder.getBytesTotal();  
percentage = Math.round((loaded/filesize)\*100);  
// Preloader script  
if (filesize == loaded && filesize\>100) {  
preloader.left.half.\_rotation = 180;  
preloader.right.half.\_rotation = 180;  
if (bg\_mc.hitTest(\_root.\_xmouse, \_root.\_ymouse, true) && holder.\_alpha\>=100) {  
if (!bttnNext.hitTest(\_root.\_xmouse, \_root.\_ymouse, true) && !bttnPrev.hitTest(\_root.\_xmouse, \_root.\_ymouse, true)) {  
setText();  
info\_mc.destAlpha = 100;  
} else {  
info\_mc.destAlpha = 0;  
}  
} else {  
info\_mc.destAlpha = 0;  
}  
} else {  
info\_mc.\_alpha = 0;  
info\_mc.destAlpha = 0;  
if (isNaN(percentage) or percentage == 0) {  
percentage = 0;  
preloader.left.half.\_rotation = 0;  
preloader.right.half.\_rotation = 0;  
} else if (percentage\<=50 && percentage\>0) {  
preloader.left.half.\_rotation = 0;  
preloader.right.half.\_rotation = (360/100)_percentage;  
} else if (percentage\>50 && percentage\<100) {  
preloader.left.half.\_rotation = (360/100)_(percentage-50);  
preloader.right.half.\_rotation = 180;  
}  
}  
preloader.percentageTxt = percentage;  
};  
//  
// LOAD XML DATA  
//  
loadXML = function (loaded) {  
if (loaded) {  
xmlNode = this.firstChild;  
Name = [];  
Thumb = [];  
Large = [];  
Caption = [];  
Colour = [];  
Copy = [];  
galleryTotal = xmlNode.childNodes.length;  
select\_mc.selectShow.txt\_mc.txt.text = xmlNode.childNodes[galleryID].attributes.Name;  
// Get slideshow value from XML  
slideShow = xmlNode.attributes.AutoPlay;  
// Get slideshow delay value from XML  
Delay = xmlNode.attributes.Delay;  
// Build gallery select menu  
for (n=0; n\<galleryTotal; n++) {  
Name[n] = xmlNode.childNodes[n].attributes.Name;  
select\_mc.selectBttn\_mc.selectBttn.duplicateMovieClip(“selectBttn”+n, n);  
select\_mc.selectBttn\_mc[“selectBttn”+n].\_y = -select\_mc.selectBttn\_mc.selectBttn.\_height-(select\_mc.selectBttn\_mc.selectBttn.\_height)\*n;  
select\_mc.selectBttn\_mc[“selectBttn”+n].txt\_mc.txt.text = Name[n];  
select\_mc.selectBttn\_mc[“selectBttn”+n].ID = n;  
}  
buildGallery();  
} else {  
trace(“Error loading XML”);  
}  
};  
xmlData = new XML();  
xmlData.ignoreWhite = true;  
xmlData.onLoad = loadXML;  
xmlData.load(“content.xml”);  
stop();