Javascript和Animate-cc代码交互

Question

我只是刚接触Animate CC，并试图了解它是如何工作的。

我做了这个例子：

(function (lib, img, cjs, ss) {

var p; // shortcut to reference prototypes

// library properties:
lib.properties = {
    width: 1280,
    height: 720,
    fps: 60,
    color: "#FFFFFF",
    manifest: [
        {src:"sounds/_30_reel.mp3?1472134036249", id:"_30_reel"}
    ]
};



// symbols:



(lib.Simbolo2 = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Livello 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f().s("#000000").ss(1,1,1).p("AImAAQAACqihB4QiiB4jjAAQjiAAiih4Qihh4AAiqQAAipChh4QCih4DiAAQDjAACiB4QChB4AACpg");
    this.shape.setTransform(55,41);

    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.f("#0066CC").s().p("AmDEiQiih5AAipQAAipCih4QCgh4DjAAQDjAAChB4QChB4AACpQAACpihB5QihB4jjgBQjjABigh4g");
    this.shape_1.setTransform(55,41);

    this.shape_2 = new cjs.Shape();
    this.shape_2.graphics.f("#FF0000").s().p("AmDEiQiih5AAipQAAipCih4QCgh4DjAAQDjAAChB4QChB4AACpQAACpihB5QihB4jjgBQjjABigh4g");
    this.shape_2.setTransform(55,41);

    this.shape_3 = new cjs.Shape();
    this.shape_3.graphics.f("#000000").s().p("AmDEiQiih5AAipQAAipCih4QCgh4DjAAQDjAAChB4QChB4AACpQAACpihB5QihB4jjgBQjjABigh4g");
    this.shape_3.setTransform(55,41);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).to({state:[{t:this.shape_2},{t:this.shape}]},1).to({state:[{t:this.shape_3},{t:this.shape}]},1).to({state:[{t:this.shape_1},{t:this.shape}]},1).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-1,-1,112,84);


(lib.Fx = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{Stop:29});

    // timeline functions:
    this.frame_0 = function() {
        this.stop();
    }
    this.frame_29 = function() {
        playSound("_30_reel");
    }

    // actions tween:
    this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(29).call(this.frame_29).wait(1));

    // Livello 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#000000").s().p("AAHAnIAAgCIAFgBIACgBIABgCIAAgDIgDgFIgMgVIgRAWIgDAEIAAADIABADIAGABIAAACIgcAAIAAgCIAFgBIAHgEIAIgIIASgYIgPgVQgHgJgEgDQgEgDgGAAIAAgCIAkAAIAAACIgGABQAAABgBAAQAAAAAAABQAAAAgBAAQAAABAAAAQAAADADAEIAKASIAOgSIADgEIABgDIgBgCIgCgBIgFgBIAAgCIAcAAIAAACIgGABIgGAEIgHAIIgQAUIARAYQAHAKAEADQADADAGAAIAAACg");
    this.shape.setTransform(13,8.8);

    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.f("#000000").s().p("AgdAnIAAgCIADAAQAFAAADgDQABgCAAgHIAAgxIgBgIIgDgDQgCgBgDAAIgDAAIAAgCIA5AAIABARIgBAAIgEgIQgCgDgDgBIgJgBIgQAAIAAAfIANAAQAFAAACgCQACgCABgHIACAAIAAAZIgCAAQAAgEgBgCQgBgBAAAAQAAgBgBAAQAAgBgBAAQAAgBgBAAIgFgBIgNAAIAAAZQAAAGABACIACADIAEABIACAAIAAACg");
    this.shape_1.setTransform(5.2,8.8);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).to({state:[{t:this.shape_1},{t:this.shape}]},29).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,19.5,17.5);


(lib.formabase = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{A:0,B:19});

    // timeline functions:
    this.frame_0 = function() {
        this.stop();
    }
    this.frame_19 = function() {
        this.stop();
    }

    // actions tween:
    this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(19).call(this.frame_19).wait(1));

    // Livello 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f().s("#000000").ss(1,1,1).p("Az1spMAnrAAAIAAZTMgnrAAAg");
    this.shape.setTransform(127,81);

    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.f("#0066CC").s().p("Az1MqIAA5TMAnqAAAIAAZTg");
    this.shape_1.setTransform(127,81);

    this.shape_2 = new cjs.Shape();
    this.shape_2.graphics.f("#FF0066").s().p("Az1MqIAA5TMAnqAAAIAAZTg");
    this.shape_2.setTransform(127,81);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).to({state:[{t:this.shape_2},{t:this.shape}]},19).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-1,-1,256,164);


(lib.Simbolo1 = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // timeline functions:
    this.frame_0 = function() {
        this.stop();
    }

    // actions tween:
    this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(40));

    // Livello 1
    this.ani2 = new lib.formabase();
    this.ani2.setTransform(127,81,1,1,0,0,0,127,81);

    this.timeline.addTween(cjs.Tween.get(this.ani2).to({x:663,y:-3},39).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-0.5,-0.5,255,163);


// stage content:



(lib.index = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // timeline functions:
    this.frame_0 = function() {
        this.button.addEventListener("click", fl_ClickToPosition.bind(this));

        function fl_ClickToPosition() {
            this.ani.ani2.gotoAndStop("B");
            this.ani.play();
        }
    }

    // actions tween:
    this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(1));

    // Fx
    this.fx = new lib.Fx();
    this.fx.setTransform(390.8,85,1,1,0,0,0,9.8,8.7);
    new cjs.ButtonHelper(this.fx, 0, 1, 2, false, new lib.Fx(), 3);

    this.timeline.addTween(cjs.Tween.get(this.fx).wait(1));

    // Livello 1
    this.button = new lib.Simbolo2();
    this.button.setTransform(121,160,1,1,0,0,0,55,41);
    new cjs.ButtonHelper(this.button, 0, 1, 2, false, new lib.Simbolo2(), 3);

    this.ani = new lib.Simbolo1();
    this.ani.setTransform(485,292,1,1,0,0,0,127,81);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.ani},{t:this.button}]}).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(705,436.3,547.5,297.3);

})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{});
var lib, images, createjs, ss;

它工作得很好。

现在我想知道如何才能实现这个行为，将ani2从另一个Javascript文件移动到标签"B“。如果我试着把这段代码this.ani.ani2.gotoAndStop("B")；放在html中，它不能工作。我错过了什么？

非常感谢

Answer 1

这可能是由于初始化错误造成的，在初始化后不能立即调用gotoAndStop。

为了测试这一点，我在Adobe Animate生成的html文件中添加了以下几行代码：

    exportRoot.ani.gotoAndStop(0);
    exportRoot.ani.ani2.gotoAndStop(19);

第一行强制ani剪辑上的子项/时间线更新，这会使第二行正常工作。

这是一个已知的问题，并且在即将包含在Adobe Animate中的下一个CreateJS版本的候选列表中。

干杯。