Copy link to clipboard
Copied
Hi,
I have a canvas made with Animate CC. I should be stop it from an external button (in another frame). is there a why, some API or some methods, to say to canvas stop the animation from javascript?
Thanks!
if you mean you've added a button to your html file, give it an id reference in the html file, and use getElementById() to reference the button in your easeljs code.
Copy link to clipboard
Copied
if you mean you've added a button to your html file, give it an id reference in the html file, and use getElementById() to reference the button in your easeljs code.
Copy link to clipboard
Copied
That would allow the createjs canvas to use a DOM button to control its actions, but what about the case where you want a DOM button to control the playback of a canvas that doesn't have any code in it?
In the html you'll see:
var canvas, stage, exportRoot;
I think that stage is a container, that may well understand stop(); I haven't tried it, but:
stage.stop();
might work.
Copy link to clipboard
Copied
i'm not sure why you'd do that, but just look at the code generated by animate pro (that does what you want) and add that code using a text editor.
Copy link to clipboard
Copied
this works!
it's a bit unconfortable becouse i have to modify the output code of all canvas, but doesn't matter!
thanks for your helping!
Copy link to clipboard
Copied
you're welcome.
Copy link to clipboard
Copied
alessiop62030307 wrote:
this works!
it's a bit unconfortable becouse i have to modify the output code of all canvas, but doesn't matter!
Modifying the generated code should always be the solution of last resort. What you should do is add this code In the first frame of your canvas timeline:
canvasTimeline = this;
This creates a global variable named canvasTimeline (it could be named anything) that points to the main timeline of your canvas project. Now you can control the canvas timeline from any external JavaScript by targeting that variable. canvasTimeline.stop(), play(), gotoAndPlay(), whatever.
Since you mentioned the content will be in a frame, you can make life a little easier by declaring the global variable into the frame's parent namespace instead:
window.parent.canvasTimeline = this;
Copy link to clipboard
Copied
These are true! Great, and thanks a lot!
Copy link to clipboard
Copied
I had no luck with the suggestions here - maybe Animate CC 2015.2 release does things differently... anyway eventually worked out that 'exportRoot' references the movie, so exportRoot.play() in your HTML works fine
Copy link to clipboard
Copied
Shamus! wrote:
I had no luck with the suggestions here - maybe Animate CC 2015.2 release does things differently...
It does not.
Copy link to clipboard
Copied
Is there some kind of API documentation for properties & methods? e.g. how can I check if the animation is still playing?
Copy link to clipboard
Copied
EaselJS v0.8.2 API Documentation : EaselJS
(eg, check the ticker class and the movieclip class'es currentFrame property.)
Copy link to clipboard
Copied
HI
Can you please elaborate on how to communicate with the Animate CC canvas from my HTML editor using javascript. Can I see a working example of how to replay the stage timeline from first frame (for example) from an external button on my html page.
Copy link to clipboard
Copied
External HTML buttons/elements can access the canvas' main timeline via exportRoot.
(Such as: exportRoot.play(); exportRoot.gotoAndPlay("frameNumber or label"); exportRoot.childName.stop(); etc..)
Also, from within the timeline or frame script, external HTML buttons or other elements can be accessed using their Id or class
(eg: document.getElementById("element ID"); )
Copy link to clipboard
Copied
Perfect.
exportRoot.play() what the unique answer I needed.
It's so easy, but it took me three days to find this simple solution. Probably because I'm not sure what I'm doing. Maybe it's self evident to a more experienced programmer.
thanks so much!
Copy link to clipboard
Copied
I have a tutorial in adobe animate cc 2017. Each key frame contains a chapter Each keyframe has a movie clip too. In the movie clip layer (not the main parent layer) i have a button. When I press the button, I should be able to move from chapter to chapter - means I must be able to move between main keyframes. so that I can watch each chapter. Please help me by providing the correct javascript.
Copy link to clipboard
Copied
Somewhat like my solution earlier Oh well...