在同一个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将取代动画一个