同一 HTML 页面中的两个 Flash cc 动画

Question

有没有办法在同一个 HTML 页面中保留两个或多个 flash cc create.js 动画？

问题是第一个消失了，第二个动画来到了第一个动画的地方。真奇怪。

它包含 <script> </script> 两次。

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

这是link：谁能解决这个问题？

Link removed as it led to spam content

Answer 1

这是可能的，但您需要进行一些编辑。首先，您应该更改其中一部电影的库名称。您将需要保留 lib 属性对象（包含您的图像清单和其他 FLA 属性）。此外，如果您有任何相似的符号名称，您可能会运行发生冲突，第一个库项目将被覆盖。

您可以在发布设置中更改库名称。默认值为 "lib"，它生成一个 window 级别的对象，所有符号都定义在该对象上。您可以在 Flash CC 创建的 js 文件中看到 lib 是如何生成的。。

您可能还想更改图像对象的名称，但您不必这样做。单独保留 CreateJS 参考。

接下来，您需要确保每个动画的canvas具有唯一的名称。默认情况下，它只是命名为 "canvas"。更改其中一个用法中的 canvas id，然后更改创建 Stage 的关联 ID。

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

和

canvas = document.getElementById("canvas");

我还建议更改舞台名称、exportRoot 和其他变量，以防您打算对它们进行任何操作。如果你不这样做也没关系，前提是一切都按正确的顺序进行。

[UPDATE]: If you have any assets loading, you will need to change the names of these variables. Loading assets makes the handleComplete method in the template fire asynchronously -- meaning it will always reference the second canvas/stage/etc.

最后，确保只定义必要的元素一次。您应该只导入一次 CreateJS 库。有些东西可能不受支持，例如，您只能有一个 Ticker 帧率。另请注意，在您提供的 link 中，您有 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>

接下来您需要包含初始化动画的代码。在我的示例动画中，二在五秒后替换动画一：

<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将替换动画1

同一 HTML 页面中的两个 Flash cc 动画

Two Flash cc Animations in the same HTML Page

html

dom

createjs