# Dragging button click menu with arrays - help needed!

**URL:** <https://forum.kirupa.com/t/dragging-button-click-menu-with-arrays-help-needed/287013>\
**Category:** flash\
**Created:** [April 24, 2009, 3:25pm UTC](https://forum.kirupa.com/t/dragging-button-click-menu-with-arrays-help-needed/287013 "2009-04-24T15:25:16Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![nemee](https://avatars.discourse-cdn.com/v4/letter/n/ba8739/32.png) [@nemee](https://forum.kirupa.com/u/nemee)\
**Post date:** [April 24, 2009, 3:25pm UTC](https://forum.kirupa.com/t/dragging-button-click-menu-with-arrays-help-needed/287013/1 "2009-04-24T15:25:16Z")

</div>

Hi there,

I’m relatively inexperienced at actionscripting and I have to build a timeline based on this one: [http://www.learner.org/interactives/dna/history.html](http://www.learner.org/interactives/dna/history.html)

I went through both the sliding and the dragging menu tutorials here, worked beautifully(thanks to those who shared), but need the functionality of the sample above. I found a lovely, elegant solution using arrays which is as near as I could find and hoped to modify it to suit my purposes. I’m using a copy of code which formed the basis of this timeline: [http://classic.motown.com/timeline/](http://classic.motown.com/timeline/)

I’ve been trying to figure this out for two days and am probably being really silly. My problem is I can’t add my content… I can’t add any content that it will scroll through. Basically, I think I need to declare each section as an instance of the array, section, and then the content\_mc will parse through it and display each one whether the appropriate button is clicked or the user slides the pointer to that section.

I’m under pressure to get this done so am happy to consider any solution or alternative approach that will produce results similar to [http://www.learner.org/interactives/dna/history.html](http://www.learner.org/interactives/dna/history.html)

Many, many thanks to anyone who looks through this and tries to assist!

Code below:

fscommand(“fullscreen”, “false”);  
fscommand(“allowscale”, “false”);  
stop();

// set up gutter info  
gutterLeft = scrollbarGutter\_mc.\_x+1;  
gutterRight = scrollbarGutter\_mc.\_x+(scrollbarGutter\_mc.\_width-\_root.scrollbar\_mc.\_width)-1;

// create an array for attaching new sections on our timeline  
section = new Array(9);//4  
max = \_root.section.length;  
itemDepth = 1;

for (i=0; i\<max; i++) {  
// attach new item  
_root.content\_mc.attachMovie(“section”, "section_"+i, itemDepth);  
curItem = content\_mc[“section\_”+i];  
// put the MC in an array  
\_root.section\* = curItem;  
if (i == 0) {  
curItem.\_x = 0;  
} else {  
curItem.\_x = content\_mc.\_width+1;  
}  
itemDepth++;  
}

// set the info about the content  
contentRight = content\_mc.\_x;  
contentLeft = 712-content\_mc.\_width;

// calculate the current percentage of the scrollbar  
function scrollBarFunc() {  
var percent = (scrollbar\_mc.\_x-gutterLeft)/(gutterRight-gutterLeft);  
content\_mc.\_x = percent\*(contentLeft-contentRight)+contentRight;  
updateAfterEvent();  
}

// jump the scrollbar to an area on the gutter that equals the beginning of each section  
function contentFunc() {  
// is the difference between the goal and the position small?  
if (Math.abs(scrollBarGoal-scrollbar\_mc.\_x)\<1 || !topNav) {  
// if so, position everything where it needs to be and stop  
scrollbar\_mc.\_x = scrollBarGoal;  
content\_mc.\_x = contentGoal;  
// transfer power by turning scrollbar actions off  
onEnterFrame = null;  
} else {  
// otherwise move scrollbar and adjust content  
scrollbar\_mc.\_x += (scrollBarGoal-scrollbar\_mc.\_x)/6;  
scrollBarFunc();  
}  
}

function moveContent(s) {  
// transfer power - turn topNav actions on  
topNav = true;  
// where should the content go  
contentGoal = contentRight-section[s].\_x;  
// make sure it’s not off the screen!  
if (contentGoal\<contentLeft) {  
contentGoal = contentLeft;  
}  
// what percent is that goal?  
var percent = -(contentGoal-contentRight)/(contentRight-contentLeft);  
// apply that percent to the gutter size to determine the scrollbar’s goal  
scrollBarGoal = percent\*(gutterRight-gutterLeft)+gutterLeft;  
// set up a loop to move the content and scrollbar  
onEnterFrame = contentFunc;  
}

// don’t use the hand icon  
scrollbar\_mc.useHandCursor = false;

// handle press event  
scrollbar\_mc.onPress = function() {  
this.startDrag(false, \_root.gutterLeft, this.\_y, \_root.gutterRight, this.\_y);  
// transfer power - turn topNav actions off  
topNav = false;  
dragging = true;  
this.onMouseMove = function() {  
\_root.scrollBarFunc();  
updateAfterEvent();  
};  
};

// handle release event  
scrollbar\_mc.onRelease = scrollbar\_mc.onReleaseOutside=function () {  
this.onMouseMove = undefined;  
this.stopDrag();  
dragging = false;  
xSpeed = (newxpos-oldxpos)\*RATIO;  
};

// set initial variables  
FRICTION = .9;  
RATIO = .5;  
dragging = false;

/**/  
// handle onEnterFrame event  
scrollbar\_mc.onEnterFrame = function() {  
if (!dragging && !topNav) {  
oldxpos = this.\_x;  
newxpos = oldxpos+xSpeed;  
xSpeed \*= FRICTION;  
if (newxpos\>gutterRight || newxpos\<gutterLeft) {  
xSpeed \*= -FRICTION;  
newxpos = oldxpos;  
}  
this.\_x = newxpos;  
\_root.scrollBarFunc();  
} else {  
oldxpos = newxpos;  
newxpos = this.\_x;  
}  
};  
/**/

The section mc has one frame, a dynamic text box which outputs the section number, and a line of code mySection=this.\_name;

Thanks, AM