javascript - CreateJS:不同js文件中两个时间线之间的交互

Question

我在两个不同的 js 文件中有两个时间线，我需要它们通过 html 文件中的 JS 相互通信。具体来说，我需要粉色按钮 top.js 来重播 bottom.js 的时间线。

我在 top.js 文件中有一个工作按钮，可以正确触发 html 文件中的函数 actionClickHandler，但此函数不会影响第二个 js 文件(bottom.js.我在html页面的js中的函数中尝试了stage.gotoAndPlay(1);，我收到错误:stage.gotoAndPlay is not a函数。

我在这里做错了什么？如何通过 html 文件中的脚本与 bottom.js 中的时间线对话？

Here's a plunker

bottom.js 和 top.js 是 adobe animate cc 的 js 输出，我试图将两个 html5 时间线叠加在一起，并基本上在它们之间进行交互。

这是我在html文件中的相关js:

var canvas, stage, exportRoot;

function init() {

  canvas = document.getElementById("canvas");
  exportRoot = new lib.bottomfile();

  stage = new createjs.Stage(canvas);
  stage.addChild(exportRoot);
  stage.update();
  stage.enableMouseOver();

  createjs.Ticker.setFPS(lib.properties.fps);
  createjs.Ticker.addEventListener("tick", stage);
}


var lib2, canvas2, stage2, exportRoot2;

function init2() {

  canvas2 = document.getElementById("canvas2");
  exportRoot2 = new lib2.topfile();

  stage2 = new createjs.Stage(canvas2);
  stage2.addChild(exportRoot2);
  stage2.update();
  stage.enableMouseOver();

  createjs.Ticker.setFPS(lib2.properties.fps);
  createjs.Ticker.addEventListener("tick", stage2);
}


function pageLoadedHandler() {  
    init();  
    init2(); 
}  

function actionClickHandler() {  
  console.log("Triggered from inside html function actionClickHandler"); 
  stage.gotoAndPlay(1);
  stage.update();
}  

这是 top.js:

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

    var p; // shortcut to reference prototypes
    lib2.webFontTxtFilters = {}; 

    // lib2rary properties:
    lib2.properties = {
        width: 550,
        height: 400,
        fps: 24,
        color: "#FFFFFF",
        webfonts: {},
        manifest: []
    };



    lib2.webfontAvailable = function(family) { 
        lib2.properties.webfonts[family] = true;
        var txtFilters = lib2.webFontTxtFilters && lib2.webFontTxtFilters[family] || [];
        for(var f = 0; f < txtFilters.length; ++f) {
            txtFilters[f].updateCache();
        }
    };
    // symbols:



    (lib2.txt = function(mode,startPosition,loop) {
        this.initialize(mode,startPosition,loop,{});

        // Layer 1
        this.shape = new cjs.Shape();
        this.shape.graphics.f("#FFFFFF").s().p("AgEBSQgHgDgDgFQgEgEgBgIIgBgYIAAg0IgPAAIAAgaIAPAAIAAgZIAfgTIAAAsIAXAAIAAAaIgXAAIAAAwIABASQAAABAAAAQAAABABAAQAAABABAAQAAABABAAQACACADAAQAFAAAIgDIADAZQgLAFgPAAQgJAAgFgDg");
        this.shape.setTransform(80.5,15.5);

        this.shape_1 = new cjs.Shape();
        this.shape_1.graphics.f("#FFFFFF").s().p("AgnA/IAAh6IAfAAIAAARQAIgMAEgEQAGgEAIAAQALAAALAGIgKAdQgJgFgHAAQgHAAgFADQgCAEgDAKQgDAKAAAeIAAAmg");
        this.shape_1.setTransform(72.8,17.4);

        this.shape_2 = new cjs.Shape();
        this.shape_2.graphics.f("#FFFFFF").s().p("AguA2QgLgKAAgQQAAgLAFgIQAFgIAJgDQAKgEAQgDQAVgFAKgDIAAgEQAAgJgGgEQgEgEgLAAQgJAAgEADQgFAEgEAIIgdgFQAEgSANgJQAMgJAYAAQAUAAALAGQALAFAEAIQAEAIAAAVIAAAlQAAAQACAIQABAIAFAJIggAAIgEgKIgBgEQgJAIgJAEQgHAFgLAAQgUAAgLgLgAAAAHQgNADgEADQgHAEAAAHQAAAHAFAFQAFAFAIAAQAHAAAJgFQAFgFACgGQABgFABgLIAAgHg");
        this.shape_2.setTransform(60.6,17.5);

        this.shape_3 = new cjs.Shape();
        this.shape_3.graphics.f("#FFFFFF").s().p("AgEBSQgHgDgDgFQgEgEgBgIIgBgYIAAg0IgPAAIAAgaIAPAAIAAgZIAfgTIAAAsIAXAAIAAAaIgXAAIAAAwIABASQAAACADACQACACADAAQAFAAAIgDIADAZQgLAFgPAAQgJAAgFgDg");
        this.shape_3.setTransform(49.9,15.5);

        this.shape_4 = new cjs.Shape();
        this.shape_4.graphics.f("#FFFFFF").s().p("AglA2QgPgKgFgSIAhgFQADAKAGAFQAGAFAKAAQANAAAGgFQAFgDAAgGQAAgDgDgDQgCgCgJgCQgmgJgKgHQgPgIAAgSQAAgQANgLQAMgMAbAAQAYAAAMAJQANAIAEAQIgfAGQgCgHgFgEQgGgEgJAAQgMAAgGAEQgDACAAAEQAAAEADACQAEAEAZAGQAaAGAKAIQALAHAAAQQAAARgPAMQgOANgcAAQgXAAgPgLg");
        this.shape_4.setTransform(39,17.5);

        this.shape_5 = new cjs.Shape();
        this.shape_5.graphics.f("#FFFFFF").s().p("AgsArQgNgRAAgaQAAgcARgSQAQgSAYAAQAaAAAQATQAQASAAAkIhRAAQAAAPAIAIQAIAIAJAAQAIAAAFgEQAFgEADgKIAhAGQgGASgOAJQgOAKgUAAQgfAAgPgWgAAZgJQAAgOgHgIQgHgHgLAAQgIAAgHAIQgHAHAAAOIAvAAIAAAAg");
        this.shape_5.setTransform(25.9,17.5);

        this.shape_6 = new cjs.Shape();
        this.shape_6.graphics.f("#FFFFFF").s().p("AAjBWIgZgmQgLgUgFgFQgFgFgFgCQgGgCgMAAIgHAAIAABIIgjAAIAAiqIBJAAQAaAAAMAEQANAFAHAMQAIAMAAAPQAAATgMANQgLAKgXADQAMAHAHAIQAHAIANAUIAVAigAgpgLIAaAAQAXAAAGgCQAGgDAEgFQADgFAAgIQAAgIgEgGQgFgFgJgCIgXAAIgbAAg");
        this.shape_6.setTransform(11.5,15.2);

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

    }).prototype = p = new cjs.MovieClip();
    p.nominalBounds = new cjs.Rectangle(0,0,86.6,30.9);


    (lib2.pink = function(mode,startPosition,loop) {
        this.initialize(mode,startPosition,loop,{});

        // Layer 1
        this.shape = new cjs.Shape();
        this.shape.graphics.f("#FF00FF").s().p("ApMDHQg9AAAAg7IAAkWQAAg9A9AAISaAAQA7AAAAA9IAAEWQAAA7g7AAg");
        this.shape.setTransform(65,20);

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

    }).prototype = p = new cjs.MovieClip();
    p.nominalBounds = new cjs.Rectangle(0,0,130,40);


    (lib2.myBtn = function(mode,startPosition,loop) {
        this.initialize(mode,startPosition,loop,{});

        // Layer 2
        this.instance = new lib2.txt();
        this.instance.setTransform(64.3,19,1,1,0,0,0,43.3,15.4);
        new cjs.ButtonHelper(this.instance, 0, 1, 1);

        this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({alpha:0.801},0).wait(3));

        // Layer 1
        this.instance_1 = new lib2.pink();
        this.instance_1.setTransform(65,20,1,1,0,0,0,65,20);
        new cjs.ButtonHelper(this.instance_1, 0, 1, 1);

        this.shape = new cjs.Shape();
        this.shape.graphics.f("#FF00FF").s().p("ApMDHQg9AAAAg7IAAkWQAAg9A9AAISaAAQA7AAAAA9IAAEWQAAA7g7AAg");
        this.shape.setTransform(65,20);

        this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_1,p:{alpha:1}}]}).to({state:[{t:this.instance_1,p:{alpha:0.801}}]},1).to({state:[{t:this.shape}]},2).wait(1));

    }).prototype = p = new cjs.MovieClip();
    p.nominalBounds = new cjs.Rectangle(0,0,130,40);


    // stage content:



    (lib2.topfile = function(mode,startPosition,loop) {
        this.initialize(mode,startPosition,loop,{});

        // timeline functions:
        this.frame_1 = function() {
            this.myBtn.addEventListener("click", fl_MouseClickHandler.bind(this));

            function fl_MouseClickHandler()
            {
                actionClickHandler();
            console.log("clicked in Timeline");
                alert("Mouse clicked");
                // End your custom code
            }
        }
        this.frame_4 = function() {
            this.stop();
        }

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

        // Layer 1
        this.myBtn = new lib2.myBtn();
        this.myBtn.setTransform(466,360,1,1,0,0,0,65,20);
        new cjs.ButtonHelper(this.myBtn, 0, 1, 2, false, new lib2.myBtn(), 3);

        this.timeline.addTween(cjs.Tween.get(this.myBtn).wait(5));

    }).prototype = p = new cjs.MovieClip();
    p.nominalBounds = new cjs.Rectangle(676,540,130,40);

    })(lib2 = lib2||{}, images2 = images2||{}, createjs = createjs||{}, ss = ss||{});
    var lib2, images2, createjs, ss;

这是bottom.js:

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

var p; // shortcut to reference prototypes
lib.webFontTxtFilters = {}; 

// library properties:
lib.properties = {
    width: 550,
    height: 400,
    fps: 24,
    color: "#FFFFFF",
    webfonts: {},
    manifest: []
};



lib.webfontAvailable = function(family) { 
    lib.properties.webfonts[family] = true;
    var txtFilters = lib.webFontTxtFilters && lib.webFontTxtFilters[family] || [];
    for(var f = 0; f < txtFilters.length; ++f) {
        txtFilters[f].updateCache();
    }
};
// symbols:



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

    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#0000FF").s().p("AiMCNQg6g7gBhSQABhSA6g6QA6g6BSgBQBSABA7A6QA7A6gBBSQABBSg7A7Qg7A7hSgBQhSABg6g7g");
    this.shape.setTransform(20,20);

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

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


// stage content:
(lib.bottomfile = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

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

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

    // Layer 1
    this.instance = new lib.myBlueCircle();
    this.instance.setTransform(70,60,1,1,0,0,0,20,20);
    new cjs.ButtonHelper(this.instance, 0, 1, 1);

    this.timeline.addTween(cjs.Tween.get(this.instance).to({x:230},9,cjs.Ease.get(1)).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(325,240,40,40);

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

Answer 1

我解决了。

我将函数 actionClickHandler 更改为:

function actionClickHandler() {  
     stage.children[0].gotoAndPlay(1);
}  

从 html 文件访问 bottom.js 中的时间线的方法是执行 stage.children[0]。

Here's a working plunker