Animate CC 中的 CreateJS JavaScript 帧脚本

Posted 2023-02-16

【中文标题】Animate CC 中的 CreateJS JavaScript 帧脚本

【英文标题】：CreateJS JavasScript Frame Scripting in Animate CC

【发布时间】：2016-08-23 21:04:59

【问题描述】：

我曾经是一名 Flash 开发人员，我正在尝试了解 ActionScript 和新的 CreateJS 平台之间的区别。我发现很难在谷歌上找到答案，所以我想我会在这里问，希望专家能给我一个可靠的解释。非常感谢任何帮助。

基本上，我很难理解时间线范围的复杂性以及舞台上的电影剪辑如何在 CreateJS 中相互交互。我也无法理解时间轴上帧之间范围的工作原理。

在 AS3 中，您基本上可以在舞台上放置一个符号并在主时间轴上引用它，如下所示：

if(ball_mc.aVariable == true) ball_mc.gotoAndPlay(2);

然而，在新的 html5 Canvas Animate CC 中，这似乎不再有效。我得到了很多“未定义”。我还发现每一帧都被锁定在范围内。如果我在 ball_mc 的第 1 帧上创建一个变量，然后尝试在第 2 帧上引用它，我会得到一个错误，除非我这样做：

var aMovieClip = this.aMovieClip;

在 ActionScript 中，每个嵌套的时间线都有自己的范围。如果您在第一帧创建了一个变量，则该变量会在整个时间轴上持续存在。我发现很难相信没有简单的方法可以跨时间线扩展变量或函数的范围。这就是 Flash 在时间轴上添加交互性时轻而易举的原因。

我试图用一个函数做同样的事情，但我得到了这样的错误：

createjs-2015.11.26.min.js:12 Uncaught TypeError: Cannot read property 'handleEvent' of undefined

我想了解如何在一条时间线上有两个影片剪辑，并让它们以与 AS3 中可能的方式相似的方式相互交互：

MovieClip(parent).ball_mc.colour = 'red';

或者..

this.addEventListener(MOUSE_EVENT.CLICK, callParentTimeline);
function callParentTimeline():void
MovieClip(parent).gotoAndPlay(5);

等等。等等等等。

this.parent 对我不起作用.. 从主时间轴引用影片剪辑不允许我沿时间轴访问它的帧变量。

我对此感到困惑和沮丧，因为当我在 Google 上搜索这些问题时，我发现许多文章都说“只要说 this.variable 就可以了”或“只需使用 parent.ball_mc 调用根”之类的话，我发现这些建议似乎都不起作用。

谁能给我解释一下？

谢谢！

【参考方案1】：

@Cmaxster 您始终可以通过exportRoot 访问舞台上的影片剪辑。 例如：如果您有一个实例名称为myBall 的球，则可以像这样引用它var myBall = exportRoot.myBall;

如果您想发布包含更多具体问题的 FLA，我可以看看 :)

【讨论】：

此代码位于我的 Animate CC 项目的第一帧。我发现以下代码不起作用.. this.animating = true; this.stopAnimation = function()this.animating = false;console.log('>> timed out ',this.animating); // console logs as 'false'this.timeout = setTimeout(this.stopAnimation, 1000);

我想了解如何在第 18 帧等访问 this.animating（位于第 1 帧）。

@Cmaxster 我不确定我明白你在问什么。你期待发生什么？一旦你调用this.stopAnimation，this.animating 将等于 false。如果您从第 18 帧开始 console.log this.animating，它将返回 true，因为您正在延迟调用 (this.stopAnimation) 以更改值。 this.animating 的范围为Window，因此您应该可以从任何地方访问它。我建议你整理一个例子，我可以看看。

感谢您的帮助塞巴斯蒂安。我刚刚在上面的链接中分享了我正在尝试做的事情的一个例子。如果你能够运行它和你的想法，请告诉我。我想我很难理解范围在动画 CC 中是如何工作的时间线在我的文件中很明显。

@Cmaster 我现在看到你的问题了。你的问题是你使用setTimeout时的范围@“this”的范围是Window而不是lib.ScopeExample试一试：[code] var _this = this; // 引用 lib.ScopeExample this.stopAnimation = function() _this.animating = false; // 仍然似乎控制台日志为 'false' timerOutput.text = '动画变量现在应该等于 false！'; this.theBtn.on('click', function(e) output.text = this.animating;, this); //createjs.Tween.get(this).wait(2000).call(this.stopAnimation); //试试 this.timeout = setTimeout(this.stopAnimation, 2000);[/code]