如何创建层次结构菜单/图标

Question

我不知道这个问题是否代表了我想问的问题，但我无法确定如何命名我想做的事情。

所以我试图创建一个3x3网格，并在每个单元格中都有一个图像。 只有在那之前点击同一列的第一个单元格时，我才能点击列的任何第二个单元格。我的意思是

只有在此之前点击了4

，我才能点击单元格No：5

只有在

之前点击了8和7时，我才能点击单元格No：9

我可以随时点击单元格No：1,4,7。

并且当它们被点击时，它们的alpha变为0.1（所以我知道单元格已被点击。）

目前我的逻辑是创建网格并更改我点击的任何对象的alpha，但我没有层次结构的逻辑。

public function Main()
    {

        var index:int = 0
        var col:int = 3
        var row:int = 3
        for (var i:int = 0; i < row; i++)
        {
            for (var j:int = 0; j < col; j++)
            {
                var cls:Class = Class(getDefinitionByName("Bitmap" + (index + 1) ));

                myImage = new Bitmap( new cls() );
                var myImage_mc:MovieClip = new MovieClip();
                myImage_mc.addChild(myImage)
                myImage_mc.x = 100 + i * (myImage_mc.width + 10)
                myImage_mc.y = 100 + j * (myImage_mc.height + 10)
                this.addChild(myImage_mc);
                myImage_mc.mouseEnabled = true
                myImage_mc.addEventListener(MouseEvent.CLICK, onClick);

                index++
            }
        }
    }

    private function onClick(ev:MouseEvent):void
    {
        trace(ev.target.name)
        ev.currentTarget.alpha = 0.1;
    }

Answer 1

像这样的东西

package
{
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.utils.Dictionary;

    public class Grid extends Sprite
    {
        private var _box : Dictionary = new Dictionary;
        private var _conditions : Dictionary = new Dictionary;
        private var _clicked : Dictionary = new Dictionary;

        public function Grid()
        {
            var index:int = 0
            var col:int = 3
            var row:int = 3
            for (var i:int = 0; i < row; i++)
            {
                for (var j:int = 0; j < col; j++)
                {
                    //var cls:Class = Class(getDefinitionByName("Bitmap" + (index + 1) ));

                    //myImage = new Bitmap( new cls() );
                    var myImage_mc:MovieClip = new MovieClip();
                    //myImage_mc.addChild(myImage)

                    _box[ index ] = myImage_mc;

                    // Conditions for the 2nd and 3nd line etc.
                    if( i != 0 )
                        _conditions[ myImage_mc ] = _box[ index - col ];

                    // ------ DEBUG
                    myImage_mc.graphics.beginFill( 0xFFFFFF * Math.random() );
                    myImage_mc.graphics.drawRect(0,0,100,100);
                    myImage_mc.graphics.endFill();
                    // ------ END DEBUG

                    // Note i / j are invert from your example
                    myImage_mc.x = 100 + j * (myImage_mc.width + 10);
                    myImage_mc.y = 100 + i * (myImage_mc.height + 10);
                    this.addChild(myImage_mc);
                    myImage_mc.mouseEnabled = true
                    myImage_mc.addEventListener(MouseEvent.CLICK, onClick);

                    index++
                }
            }
        }

        protected function onClick(ev:MouseEvent):void
        {
            var neededClickElement : MovieClip = _conditions[ ev.currentTarget ];

            // Check if we need an active movieclip before
            if( neededClickElement != null && ! _clicked[ neededClickElement ] )
                return;

            _clicked[ ev.currentTarget ] = true;
            ev.currentTarget.alpha = 0.1;
        }
    }
}

Answer 2

另一种方法是使用链接变量链接元素。

public class BitmapButton extends Sprite {
    public var next:BitmapButton = null;
}

public class Main extends Sprite {
    public function Main():void 
    {
        if (stage) init();
        else addEventListener(Event.ADDED_TO_STAGE, init);
    }


    private function init(e:Event = null):void 
    {
        removeEventListener(Event.ADDED_TO_STAGE, init);

        var index:int = 0
        var col:int = 3
        var row:int = 3

        for (var j:int = 0; j < col; j++)
        {
            var lastRowElement:BitmapButton = null;

            for (var i:int = 0; i < row; i++)
            {
                var bmpd:BitmapData = new BitmapData( 100, 100, false, Math.floor( 0xff + Math.random() * 0xffffff ) );

                var myImage:Bitmap = new Bitmap( bmpd );
                var myImage_mc:BitmapButton = new BitmapButton();

                myImage_mc.addChild(myImage)
                myImage_mc.x = 100 + j * (myImage_mc.width + 10);
                myImage_mc.y = 100 + i * (myImage_mc.height + 10);

                myImage_mc.name = i + "_" + j;

                this.addChild(myImage_mc);

                myImage_mc.mouseChildren = false;
                myImage_mc.mouseEnabled = false;

                myImage_mc.addEventListener(MouseEvent.CLICK, onClick);

                if ( lastRowElement == null ) {

                    myImage_mc.mouseEnabled = true;

                } else {
                    lastRowElement.next = myImage_mc;
                }

                lastRowElement = myImage_mc;

                index++
            }
        }

    }


    private function onClick(ev:MouseEvent):void
    {
        trace(ev.target.name)


        if ( ev.target is BitmapButton ) {
            var btn:BitmapButton = ev.target as BitmapButton;

            ev.currentTarget.alpha = 0.1;

            if( btn.next != null ) {
                btn.next.mouseEnabled = true;
            }
        }
    }

}