Меню Actionscript 3 с активным состоянием

Question

У меня есть простое меню, в котором при наведении курсора на каждый элемент воспроизводится фрагмент ролика, а затем при помощи mouse_out он воспроизводит фрагмент ролика в обратном порядке. То, что я пытаюсь сделать, это иметь третье состояние (активное), которое отображается при нажатии. Я думаю, что мне нужно сделать что-то вроде:

При нажатии gotoAndStop (5) // Пять - это местоположение моего активного кадра. Также удалите прослушиватель событий, который запускает функцию для воспроизведения фильма в обратном порядке. Затем, когда щелкнет другой элемент меню, повторно добавьте прослушиватель событий к предыдущему пункту меню, чтобы он не завис «активный»

Хотя я не могу понять, как это сделать. Мой код выглядит следующим образом:

// IMPORTS

import fl.transitions.*;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.external.ExternalInterface;

// EVENT LISTENERS

//arrow
mcArrow.addEventListener(MouseEvent.MOUSE_OVER,mover);
mcArrow.addEventListener(MouseEvent.MOUSE_OUT,mout);

//dots
mcDots.addEventListener(MouseEvent.MOUSE_OVER,mover);
mcDots.addEventListener(MouseEvent.MOUSE_OUT,mout);

//music
mcMusic.addEventListener(MouseEvent.MOUSE_OVER,mover);
mcMusic.addEventListener(MouseEvent.MOUSE_OUT,mout);

//home
mcHome.addEventListener(MouseEvent.MOUSE_OVER,mover);
mcHome.addEventListener(MouseEvent.MOUSE_OUT,mout);

//padlock
mcPadlock.addEventListener(MouseEvent.MOUSE_OVER,mover);
mcPadlock.addEventListener(MouseEvent.MOUSE_OUT,mout);

// FUNCTIONS

function mover(e:MouseEvent):void {
    stopPlayReverse(e.currentTarget as MovieClip);
    e.currentTarget.play();
//var fadeIn:Tween = new Tween(mcToolTip, "alpha", Strong.easeOut, 0, 1, 0.5, true);
}

function mout(e:MouseEvent):void {
    var mc:MovieClip = e.currentTarget as MovieClip; 
    if (mc !== null) {
     mc.addEventListener(Event.ENTER_FRAME, playReverse, false, 0, true);
    }
    //var fadeOut:Tween = new Tween(mcToolTip, "alpha", Strong.easeOut, 1, 0, 0.5, true);
}

function playReverse(e:Event):void {
    var mc:MovieClip = e.currentTarget as MovieClip; 

    if (mc.currentFrame == 1) {
        stopPlayReverse(mc);
    } else {
        mc.prevFrame();
    }
}

function stopPlayReverse(mc:MovieClip):void {
  if ((mc!==null) && mc.hasEventListener(Event.ENTER_FRAME)) {
    mc.removeEventListener(Event.ENTER_FRAME, playReverse);
  }
}

Answer 1

Другой вариант, следуя вашему коду, будет иметь вспомогательную переменную, которая указывает, какой пункт меню в данный момент активен, поэтому мы можем деактивировать его, когда нажмем на другой элемент ... это означает, что каждый из ваших пунктов меню будет выполнять это функция по клику:

private var activeMenuItem:MenuItem; //your auxiliary variable
private function onClick(e:MouseEvent):void {
   if(activeMenuItem) {
     //if there is an active menu item re-enable it
     activeMenuItem.gotoAndStop(1);
     activeMenuItem.mouseEnabled=true;
   }
   //set the active menu item to the clicked one
   activeMenuItem=e.currentTarget;
   //and set its state to active and mouse disabled
   activeMenuItem.gotoAndStop(5);
   activeMenuItem.mouseEnabled=false;
}

Answer 2

Сначала я бы создал класс MenuItem, который устанавливает прослушиватели событий и методы для пунктов меню. В классе MenuItem создайте свойство «isActive» типа Boolean, которое отслеживает текущее состояние пункта меню. Вот быстрый макет этого класса:

package {
    import flash.display.MovieClip;
    import flash.events.*;

    public class MenuItem extends MovieClip {
        public var isOver:Boolean = false;
        public var isActive:Boolean = false;
        public static var CLICK:String = 'menu_item_click';

        public function MenuItem() {
            addEventListener(MouseEvent.MOUSE_OVER, mover);
            addEventListener(MouseEvent.MOUSE_OUT, mout);
            addEventListener(MouseEvent.CLICK, mclick);
            addEventListener(Event.ENTER_FRAME, onFrame);
        }

        private function mover(e:MouseEvent):void {
            isOver = true;
        }

        private function mout(e:MouseEvent):void {
            isOver = false;
        }

        private function mclick(e:MouseEvent):void {
            isActive = true;
            goToAndStop(5); // go to active frame
        }

        private function onFrame(e:Event):void {
            if (isActive) return; // don't do anything if this menu item is active

            if (isOver) { // if the mouse is over the menu item
                if (currentFrame >= 4) { // make sure we don't go to frame 5, the active frame
                    nextFrame();
                }
            } else {
                prevFrame(); // or play in reverse. If at frame 1, prevFrame() won't do anything
            }
        }
    }   
}

Слушатель ENTER_FRAME будет работать непрерывно и выполнять действия, основанные на состояниях isActive и isOver. Это устраняет необходимость удаления слушателей и создания дополнительных методов для playReverse и stopPlayReverse.

Во-вторых, я бы поместил все пункты меню в контейнерный класс с именем MenuContainer. Самый простой способ сделать это - создать пустой фрагмент ролика во Flash, а затем перетащить в него все свои элементы меню. Экспортируйте контейнер для Actionscript со значением Class для MenuContainer. Вот макет класса MenuContainer:

package {
    import flash.display.MovieClip;
    import flash.events.*;

    public class MenuContainer extends MovieClip {

        public function MenuContainer() {
            addEventListener(MenuItem.CLICK, onMenuItemClick);
        }

        private function onMenuItemClick(e:MouseEvent):void {
            var clickedMenuItem:MenuItem = MenuItem(e.target); // the clicked menu item
            for (var i:int = 0; i < this.numChildren; i++) { // loop through the menu items
                var menuItem:MenuItem = MenuItem(this.getChildAt(i)); // get the loop menu item
                if (menuItem != clickedMenuItem) { // if the loop menu item is not the clicked menu item
                    menuItem.isActive = false; // then isActive is false
                }
            }
        }

    }   
}