A Flash Developer Resource Site

Results 1 to 2 of 2

Thread: animating movieclips through loop

  1. #1
    Junior Member
    Join Date
    Jul 2010

    animating movieclips through loop

    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;
    //set the property depending on which rectangle is moused over
    function analyzer1 () {
        rec1.mOver = true;
        rec2.mOver = false;
        rec3.mOver = false;
        //the moveTo function is referrenced here only to test if it will work

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

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

    //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 {
                if (currentFrameCount < totalFrameCount){
                    var progress:Number = currentFrameCount/totalFrameCount;
                    rectA[i].x = initialX + distanceX*progress;
                    rectA[i].x = destinationA[i];
                    rectA[i].removeEventListener(Event.ENTER_FRAME, animateMoveTo1);
    Attached Files Attached Files

  2. #2
    Senior Member
    Join Date
    Aug 2000
    Move to AS 3.0 forum


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Click Here to Expand Forum to Full Width

HTML5 Development Center