I lifted this awesome collapsing menu script from
http://www.senocular.com and
am now making tweaks to this. The file can be found
http://www.trpvolunteers.com/learnmore.zip Two questions:
1. I figured out how to make it so that they automatically start with a 20
pixel buffer before clicking, but I am a little lost on where to put the math
in so that when they close, it closes to that 20 pixel buffer mark.
2. If in the event that I only want the second (middle) item to expand and
collapse, how do I work around that?
"bonus" questions
B1. I'd like to make it so that when each topic (title) is clicked on, there's
an "up" state to it. I've tried making them buttons, but because they are all
contained within the same movie clip, they ALL just cycles though each state
rapidly upon rolling over it. Oddly enough the sub navs seem to work just fine
as buttons.
B2. Should that work, I'd want the text to change to white so that it
contrasts against a darker "up" state, same thing for the subnavs (the beige
"over" state used to be a deep purple--same as the text).
I'm more concerned with the spacing than the "bonus" stuff, but any help would
be greatly appreciated!
stop();
//:::::BEGIN sound control: save this for later
var sndClick:Sound = new Sound();
//insert or change the file name
sndClick.attachSound("click.wav");
var sndFold:Sound = new Sound();
//insert or change the file name
sndFold.attachSound("fold.wave");
//:::::END sound control
// Variables
var anim_frames = 10; // number of frames to spend animating (each menu
animates with speed based on size)
var opened = null; // variable to determine which menu is currently opened
var menus = []; // array to store all menu items
// FindMenus: finds movieclips within this movieclip and adds them to
// the menus array. Only place menu clips within this clip otherwise
// this function will assume the non-menu clips to be clips as well
FindMenus = function(){
for (value in this){
if (this[value] instanceof MovieClip){
menus.push(this[value]);
}
}
menus.sort(SortByVertical); // order so the highest is first
}
// SortByVertical: sort function to sort menus in menus array
// so that the highest menu appears first
SortByVertical = function(a, b){
return (a._y > b._y);
}
// ApplyMenuMask: creates and draws a function for the i'th menu
// in the menus array. That menu clips is then assigned a
// property "masker" representing this clip
ApplyMenuMask = function(i){
var menu = menus[i];
var mask = this.createEmptyMovieClip("mask"+i, i);
mask._x = menu._x;
mask._y = menu._y;
mask.beginFill(0,100);
mask.moveTo(0, 0);
mask.lineTo(menu.title._width + 40, 0);
mask.lineTo(menu.title._width, menu.title._height);
mask.lineTo(0, menu.title._height);
mask.endFill();
menu.setMask(mask);
menu.masker = mask;
}
// StartMenuPosition: positions the menu to start. This is its closed
// position beneath the menu above it unless its the first menu where its 0.
StartMenuPosition = function(i){
var menu = menus[i];
if (i == 0){
menu._y = menu.masker._y = 0;
}else{
var menu_above = menus[i-1];
menu._y = menu.masker._y = Math.round(menu_above._y +
menu_above.title._height + 20);
}
}
// MenuOpen: this function opens a menu when its title is clicked
MenuOpen = function(){
var menu = this;
menu.masker._height += (1+menu._height-menu.title._height)/anim_frames;
if (menu.masker._height >= menu._height){
menu.masker._height = menu._height;
delete this.onEnterFrame;
}
PositionMenusBelow(menu.i);
}
// MenuClose: this function closes a menu when its title is clicked
MenuClose = function(){
var menu = this;
menu.masker._height -= (1+menu._height-menu.title._height)/anim_frames;
if (menu.masker._height <= menu.title._height){
menu.masker._height = menu.title._height;
delete this.onEnterFrame;
}
PositionMenusBelow(menu.i);
}
// TitleButtonPress: this is the action assigned to a titlebar onRelease in a
menu
// based on that menu's status; whether its open or closed and if anything is
open
// at all to begin with (if there is, the open menu closes as the clicked
opens)
TitleButtonPress = function(){
var menu = this._parent;
if (opened){
if (opened == menu){
menu.onEnterFrame = MenuClose;
opened = null;
}else{
opened.onEnterFrame = MenuClose;
menu.onEnterFrame = MenuOpen;
opened = menu;
}
}else{ // nothing opened
menu.onEnterFrame = MenuOpen;
opened = menu;
}
}
// PositionMenusBelow: Positions all menus below the i'th menu based on that
// menus mask. This is used when opening or closing a menu so that menu items
// beneath update their position properly
PositionMenusBelow = function(i){
var menu = menus[i];
if (i < menus.length-1){
var menu_below = menus[i+1];
for (i=i+1; i<menus.length; i++){
if (menus[i] == menu_below){
menus[i]._y = menus[i].masker._y = menu._y + menu.masker._height;
}else{
var menu_above = menus[i-1];
menus[i]._y = menus[i].masker._y = menu_above._y +
menu_above.masker._height;
}
}
}
}
// Initialization function. Does setup operations
Init = function(){
FindMenus(); // find movieclips within this movieclip and assign to menus
array
// for each menu (as in menus array)
for (var i=0; i<menus.length; i++){
menus[i].i = i; // assign a number to represent its position in the array
ApplyMenuMask(i); // give it a mask
StartMenuPosition(i); // position it accordingly (vertical only)
menus[i].title.onPress = TitleButtonPress; // apply the actions to the
titlebar
}
}
Init();
