我在两个不同的js文件中有两个时间轴，我需要它们通过JS在一个html文件中相互通信。具体来说，我需要粉红色按钮top.js来重播bottom.js的时间轴。
我在top.js文件中有一个工作按钮正确触发html文件中的函数actionClickHandler，但此函数不影响第二个js文件（bottom.js。我试过{{ 1}}在html页面的js函数中，我收到错误：stage.gotoAndPlay(1);。
我在这里做错了什么？如何从html文件中的脚本与stage.gotoAndPlay is not a function中的时间线对话？
bottom.js和top.js是来自adobe animate cc的js输出，我试图将两个html5时间轴叠加在一起并基本上在它们之间进行交互。
这是我在html文件中的相关js：
bottom.js这是top.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();
}
这是bottom.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;
答案 0 :(得分：0)
我解决了。
我将函数actionClickHandler更改为：
function actionClickHandler() {
stage.children[0].gotoAndPlay(1);
}
从html文件访问bottom.js中的时间轴的方法是stage.children[0].