animating movieclips through loop

[noahsantacruz]

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.

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();
}

function analyzer2 () {
    rec2.mOver = true;
    rec1.mOver = false;
    rec3.mOver = false;
    arguments;
}

function analyzer3 () {
    rec3.mOver = true;
    rec1.mOver = false;
    rec2.mOver = false;
    arguments;
}
    



//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 = new Array;
rectA = [rec1,rec2,rec3];
//array that contains destination information for each rectangle
var destinationA = new Array;
destinationA = [destinationX1,destinationX2,destinationX3];


//function that will move each rectangle to destination position
function moveTo () {
    //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);
        }
        
        function animateMoveTo1 (evt:Event):void {
            currentFrameCount++;
            if (currentFrameCount < totalFrameCount){
                var progress:Number = currentFrameCount/totalFrameCount;
                rectA[i].x = initialX + distanceX*progress;
            }else{
                rectA[i].x = destinationA[i];
                rectA[i].removeEventListener(Event.ENTER_FRAME, animateMoveTo1);
            }
        }
    }
}

[gparis]

Move to AS 3.0 forum

gparis