簡化從陣列中添加/刪除子視頻片段

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

接下來，你可以安排一個3×3（或任何其他）在使用循環的有效途徑頁面輸出。

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功能破壞，不僅當前頁面，但所有以前的網頁等