I have two timelines in two different js files, I need them to talk to each other via JS in an html file. Specifically I need the pink button top.js to replay the timeline of bottom.js.
I have a working button in top.js file correctly triggering the function actionClickHandler in the html file, but this function is not affecting the 2nd js file (bottom.js. I tried stage.gotoAndPlay(1); in my function in the js in the html page, I get the error: stage.gotoAndPlay is not a function.
What am I doing wrong here? How do I talk to the timeline in bottom.js from a script in the html file?
bottom.js and top.js are js output from adobe animate cc, I'm trying to layer two html5 timelines on top of one another and have interaction between them basically.
Here's my relevant js in the html file:
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();
}
Here's 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;
Here's 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;
I solved it.
I changed the function actionClickHandler to:
function actionClickHandler() {
stage.children[0].gotoAndPlay(1);
}
The way to access that timeline in bottom.js from the html file is by doing stage.children[0].