如何在 Adob​​e Animate CC 2019 中将主时间线影片剪辑与 html5 画布混合

Posted 2023-02-16

【中文标题】如何在 Adob​​e Animate CC 2019 中将主时间线影片剪辑与 html5 画布混合

【英文标题】：How to mix main timeline movieclips with html5 canvas in Adobe Animate CC 2019

【发布时间】：2019-06-29 09:35:51

【问题描述】：

我有一个包含我需要使用的影片剪辑的现有文件。我使用 createjs 在脚本编辑器中创建了一个新背景并添加了动画。

问题是在创建 createjs 脚本后，它接管了整个舞台，而主时间轴上的电影剪辑无处可看，或添加到舞台？

我假设主时间线和 html5 画布是完全分开的。

有没有办法从主时间线获取影片剪辑以显示在 createjs 画布上？

【参考方案1】：

您是否只是将动画 html 代码添加到现有内容中？

Animate 导出的模板期望它拥有画布，并设置自己的 Ticker、Stage 和更新循环。

您可以删除很多代码，只需将您的 exportRoot 添加到您现有的 Stage。它只是代表 Animate 中主要时间线的 MovieClip。它可以与任何你想要的组合，只要只有一个阶段（因为阶段清除画布）。

var stage = new createjs.Stage("canvas");
stage.addChild(exportRoot); // Animate
stage.addChild(new createjs.Bitmap("path/to/bitmap")); // Custom
createjs.Ticker.on("tick", stage);

解决方法是在最后更新的阶段（顶部绘制的内容）上关闭 autoClear，以便绘制第二个阶段而不清除第一个阶段。我不建议这样做，因为阶段也处理自己的鼠标事件，所以那里可能会发生一些冲突。

希望这会有所帮助。如果您可以提供更多信息，我可以提供更多帮助。 干杯，

【讨论】：

感谢您的回复。让我思考一些可以帮助我弄清楚我做错了什么的事情，但又发现了另一个问题。它是如何工作的，对吧？我在全局包含 url 中添加了easeljs cdn。一旦我删除了easeljs cdn，主时间线影片剪辑就会出现在createjs 画布后面。下一个问题是，如何堆叠影片剪辑？旧方法是 addChildAt(n)。这仍然适用吗？

再次感谢您。你把我引向了正确的方向。最后，我将 stage.addChildAt(shape, n) 用于 createjs 形状。将它们堆放在底部。对于主时间线，我使用 stage.addChild(this.movi​​eClip) 添加影片剪辑。我没有使用 var stage = new create.js.Stage('canvas')。这引发了错误。

听起来不错。如果您已经有一个阶段，那么在我的示例中，您不需要第一行。