Play/Pause a Animate CC Canvas from external button

New Here ,
May 13, 2016 May 13, 2016

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!

TOPICS
How to

Views

10.2K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , May 13, 2016 May 13, 2016

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.

Likes

Translate

Translate
Adobe Community Professional ,
May 13, 2016 May 13, 2016

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 13, 2016 May 13, 2016

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 13, 2016 May 13, 2016

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 13, 2016 May 13, 2016

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 13, 2016 May 13, 2016

Copy link to clipboard

Copied

you're welcome.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 13, 2016 May 13, 2016

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;

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 16, 2016 May 16, 2016

Copy link to clipboard

Copied

These are true! Great, and thanks a lot!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 25, 2016 Aug 25, 2016

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 25, 2016 Aug 25, 2016

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 12, 2016 Sep 12, 2016

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 12, 2016 Sep 12, 2016

Copy link to clipboard

Copied

EaselJS v0.8.2 API Documentation : EaselJS

(eg, check the ticker class and the movieclip class'es currentFrame property.)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 10, 2017 Aug 10, 2017

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Aug 10, 2017 Aug 10, 2017

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"); )

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 11, 2017 Aug 11, 2017

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 08, 2017 Dec 08, 2017

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 08, 2017 Dec 08, 2017

Copy link to clipboard

Copied

LATEST

Somewhat like my solution earlier Oh well...

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines