Question

我目前正在尝试根据我过去几个月一直在做的几个教程制作一个互动故事书，但在我继续扩展项目之前，我有一些事情。我想改变和精简。下面是原始教程的简化版本，之后我正在进行修改。

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

        public class Main_Test extends MovieClip
        {
            var startPage:StartPage;
            var hillPage:HillPage;
            var pondPage:PondPage;

            public function Main_Test()
            {
                startPage = new StartPage;
                hillPage = new HillPage;
                pondPage = new PondPage;
                addChild(startPage); 

                // add event listeners
                startPage.hillButton.addEventListener(MouseEvent.CLICK, onHillButtonClick);
                startPage.pondButton.addEventListener(MouseEvent.CLICK, onPondButtonClick);
                hillPage.backToStartButton.addEventListener(MouseEvent.CLICK, onBackButtonClick_Hill);
                pondPage.backToStartButton.addEventListener(MouseEvent.CLICK, onBackButtonClick_Pond);
            }

            // event handlers
            function onHillButtonClick(event:MouseEvent):void
            {
                addChild(hillPage);
                removeChild(startPage);
            }
            function onPondButtonClick(event:MouseEvent):void
            {
                addChild(pondPage);
                removeChild(startPage);
            }
            function onBackButtonClick_Hill(event:MouseEvent):void
            {
                addChild(startPage);
                removeChild(hillPage);
            }
            function onBackButtonClick_Pond(event:MouseEvent):void
            {
                addChild(startPage);
                removeChild(pondPage);
            }
        }
}

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

    public class Main_Test_2 extends MovieClip
    {
        var pages:Array = ["startPage", "hillPage", "pondPage"];

        public function Main_Test_2()
        {
            pages[0] = new StartPage;
            pages[1] = new HillPage;
            pages[2] = new PondPage;
            addChild(pages[0]); 
            /*trace (pages[0]);*/

            // add event listeners
            pages[0].hillButton.addEventListener(MouseEvent.CLICK, hillButtonClick);
            pages[0].pondButton.addEventListener(MouseEvent.CLICK, pondButtonClick);
            pages[1].homeButton.addEventListener(MouseEvent.CLICK, homeButtonClick);
            pages[2].homeButton.addEventListener(MouseEvent.CLICK, homeButtonClick);
        }


        function hillButtonClick(event:MouseEvent):void
        {
            trace ("You did a thing.");
            addChild(pages[1]); 
            removeChild(pages[0]); 
        }
        function pondButtonClick(event:MouseEvent):void
        {
            trace ("Slimy frogs are slimy.");
            addChild(pages[2]); 
            removeChild(pages[0]); 
        }
        function homeButtonClick(event:MouseEvent):void
        {
            /*addChild(pages[0]); */
            if (pages[1])
            {
                trace ("All your base are belong to me.");
                /*removeChild(pages[1]);*/
            }
            if (pages[2])
            {
                trace ("You are who you choose to be.");
                /*removeChild(pages[2]);*/
            }
        }
    }
}

我做的第一件事就是从每个页面的单个变量切换到数组。当我制作一个9页的3x3版本的互动故事书时，代码失控并且非常重复，所以我认为数组会缩短事情，但这让我想到了第二件我想做的事情。甚至在切换到阵列之前也无法弄清楚。在本教程中，MovieClip中的每个按钮都会添加带有addChild的下一页，并使用removeChild删除当前页面，但是这些按钮是设置的，因此它们可以根据单击它们时所在的页面执行不同的操作，从而导致多个onBackButtonClick结果，例如。随着页数的增加，这成为一个问题。我宁愿每个按钮添加与该按钮对应的页面，同时删除所有其他页面，因此我不需要像onBackButtonClick_hill和onBackButtonClick_pond那样有多个冗余按钮。我尝试使用第二批代码自行设置，但我无法使其正常工作。

我还在考虑制作一些变量，包括var currentPage，var allPages和var allOtherPages（currentPage - allPages），所以我可以告诉按钮做一些事情，比如添加当前页面和删除所有其他页面，但是我我不知道如何在舞台上将当前的电影剪辑称为当前页面等。我在编程时仍然太新。

对这些问题和建议的任何帮助都将不胜感激。

Answer 1

你走对了路。如果你花费更多时间，你可以弄清楚如何优化它。

首先，使用页面对象数组（而不是名称）：

var pages:Array = [new startPage(), new hillPage(), new pondPage()];

接下来，您可以使用循环以有效的方式排列3x3（或任何其他）页面输出。

const GRID_SIZE:int = 3;
for (var i:int = 0; i < pages.lengthl i++) {
    var page:MovieClip = pages[i] as MovieClip;
    page.x = (i % GRID_SIZE) * (page.width + 10);
    page.y = Math.floor(i / GRID_SIZE) * (page.height + 10);
    addChild(page);
    page.homeButton.addEventListener(MouseEvent.CLICK, homeButtonClick, false, 0, true);
}

因此，您可以根据需要放置任意数量的页面，并且还可以有效地为每个页面添加侦听器。在监听器内部，使用：

function homeButtonClick(event:MouseEvent):void {
    var t:MovieClip = event.target.parent as MovieClip;
    if (t is hillPage) {
        // ... do something for the hillPage
    } else if (t is pondPage) {
        // ... do something for the pondPage
    } else {
        // ... and so on
    }
    navigateBack();
}

现在您还可以看到有一个新功能navigateBack，当然可以用来导航回来。

您所要做的就是记住您必须返回的最后一页。请注意，如果您愿意，它可能不是起始页。此外，你可以记住不是一个页面，而是一个页面的历史记录 - 如果你愿意的话。让我们创建一个访问页面数组：

var pageStack:Array = [];

每次去某个页面时，都可以将它放到pageStack：

pageStack.push(page);

每次需要返回时，都使用navigateBack功能：

function navigateBack():void {
    var page:MovieClip = pageStack.pop();
    // it is your current page, so destroy it
    removeChild(page);
    // also remove listeners, if you want...
    // now retrieve the previous page
    var pl:int = pageStack.length;
    if (pl) {
        page = pageStack[pl - 1];
    } else {
        page = pages[0];
    }
    addChild(page);
}

您还可以修改navigateBack功能，不仅要销毁当前页面，还要销毁所有以前的页面等。

简化从数组中添加/删除子MovieClip

1 个答案: