在同一個HTML頁面中的兩個Flash cc動畫頁面

Question

是否有任何方法在同一個HTML頁面中保留兩個或多個flash cc create.js動畫？

問題是第一個消失，第二個動畫來到第一個動畫地方。真奇怪。它包含<script> </script>兩次。

<script> 
    var canvas, stage, exportRoot; 
    function init() { 
    } 
</script> 

這裏是鏈接：任何人都可以解決這個問題嗎？

鏈接刪除，因爲它導致了垃圾郵件內容

Answer 1

這是可能的，但需要你做一些編輯。首先，你應該改變你的一部電影的圖書館名稱。您將需要lib屬性對象保留（包含您的圖像清單和其他FLA屬性）。此外，如果您有任何相似的符號名稱，則可能會遇到碰撞，並且第一個庫項目將被覆蓋。

您可以在發佈設置中更改庫名稱。默認值是「lib」，它產生一個窗口級別的對象，所有的符號都被定義。您可以看到如何在由Flash CC創建的js文件中生成庫。 。

您可能還想更改圖像對象的名稱，但您不必這樣做。單獨留下CreateJS參考。

接下來，您需要確保每個動畫的畫布都有唯一的名稱。默認情況下，它只是名爲「畫布」。在其中一個用法中更改畫布ID，然後更改創建舞臺的關聯ID。

<canvas id="canvas" width="550" height="400" style="background-color:#FFFFFF"></canvas> 

和

canvas = document.getElementById("canvas"); 

我還建議改變之類的東西，你打算做與他們什麼階段，exportRoot，並且如果其他變量的名稱。如果你不這樣做，一切都會按照正確的順序進行。

[更新]：如果您有任何資產加載，你會需要改變 這些變量的名稱。加載資產會使模板中的 handleComplete方法異步觸發 - 意思是 它將始終引用第二個畫布/階段/ etc。

最後，確保您只定義了一次必要的元素。你應該只導入一次CreateJS庫。有些東西可能不被支持，例如，您只能有一個Ticker幀速率。另請注意，在您提供的鏈接中，您有2個HEAD和BODY標籤。你應該把它們合併成一個。

我希望能提供一些有用的指導。

Answer 2

這也可以用查找和替換。首先在頁面中包含的基本庫腳本：

<script src="js/easeljs-0.8.1.min.js"></script> 
<script src="js/tweenjs-0.6.1.min.js"></script> 
<script src="js/movieclip-0.8.1.min.js"></script> 

然後包括下面的兩個動畫：

<script src="js/anim-1.js"></script> 
<script src="js/anim-2.js"></script> 

接下來你需要包含代碼來初始化動畫。在我的示例中，動畫2將五秒鐘替換爲動畫：

<script> 
    function init() { 
     var canvas, stage, exportRoot; 

     createjs.MotionGuidePlugin.install(); 
     canvas = document.getElementById("canvas"); 
     exportRoot = new libFirst.first(); // libFirst 
     stage = new createjs.Stage(canvas); 
     stage.addChild(exportRoot); 
     stage.update(); 
     createjs.Ticker.setFPS(libFirst.properties.fps); // libFirst 
     createjs.Ticker.addEventListener("tick", stage); 

     // after five seconds replace with animation two 
     window.setTimeout(function() { 
      canvas = document.getElementById("canvas"); 
      exportRoot = new libSecond.second(); // libSecond 
      stage = new createjs.Stage(canvas); 
      stage.addChild(exportRoot); 
      stage.update(); 
      createjs.Ticker.setFPS(libSecond.properties.fps); // libSecond 
      createjs.Ticker.addEventListener("tick", stage); 
     }, 5000); 
    } 
</script> 

請注意'lib'已被更改爲'libFirst'和'libSecond'。最後，你需要做一個查找替換您的動畫文件：

anim-1.js replace all 'lib' with 'libFirst' 
anim-2.js replace all 'lib' with 'libSecond' 

然後動畫2將取代動畫一個