hi, I'm trying to create an accordion menu that contains three submenus. The idea is that when you mouseover one submenu (or rectangle, to keep it simple) that the rectangles which were previously covering it will move to reveal it. Menus of this type can be found at the bottom of nvidia's site (www.nvidia.com) for reference.
At first I tried creating each function, which will make the rectangles move, separately but this resulted in three very repetitive functions and there seemed like there should be a better way, especially since I'd like a good way to add and remove submenus. The animation did work then.
I tried to clean it up by creating a for loop that would move each rectangle but now, for some reason, it doesn't work.
It is still missing some key points such as utilizing the mOver variable to figure out when each rectangle is moused over and act appropriatly
Thanks in advance to the awesome people of this site
Here is the code so far and the very sparse file is attached.
Actionscript Code:
rec1.addEventListener(MouseEvent.MOUSE_OVER, analyzer1); rec2.addEventListener(MouseEvent.MOUSE_OVER, analyzer2); rec3.addEventListener(MouseEvent.MOUSE_OVER, analyzer3); //create the mOver property for each rectangle to keep track of which //rectangle is moused over currently rec1.mOver = true; rec2.mOver; rec3.mOver; //set the property depending on which rectangle is moused over function analyzer1 (){ rec1.mOver = true; rec2.mOver = false; rec3.mOver = false; arguments; //the moveTo function is referrenced here only to test if it will work moveTo(); }
//create variables to allow the rectangles to move //currentFrameCount keeps track of the current frame var currentFrameCount:int; //total frames in animation var totalFrameCount:int = 12; //intial x-position of rectangle before animation var initialX; //distance the rectangle will travel var distanceX; //x-position where the rectangles will move to //only the x-position is needed since the rectangles only move in x-direction var destinationX1:Number = -300; var destinationX2:Number = -200; var destinationX3:Number = -100;
//array that contains all the rectangle movieclips var rectA = newArray; rectA = [rec1,rec2,rec3]; //array that contains destination information for each rectangle var destinationA = newArray; destinationA = [destinationX1,destinationX2,destinationX3];
//function that will move each rectangle to destination position functionmoveTo(){ //loops through rectA and destinationA arrays to move each rectangle //to destination //if statement should be here to analyze the mOver property of each rectangle //and figure out which rectangle is moused over for(var i=0; i<=2; i++){ function moveTo1 (){ currentFrameCount = 0; initialX = rectA[i].x; distanceX = destinationA[i] - initialX; rectA[i].addEventListener(Event.ENTER_FRAME, animateMoveTo1); }