Adobe Animate Code Snippets

Explorer ,
Mar 23, 2017 Mar 23, 2017

Copy link to clipboard

Copied

Hi all,

I am disappointed with the very few javascript code snippets offered in Adobe Animate.

Can someone point me to where I can find more snippets for timeline interactivity?

Particularly after the code for

1. on click go to next frame

2. on click go to previous frame

3. on click play

4. on click stop

I know they are very basic snippets but could someone help me out please.

thanks,

George.

Views

2.1K

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 , Mar 23, 2017 Mar 23, 2017
Three of those are the same action, where one of them is the special case of being the current frame. There are already code snippets for stop at this frame and get the current frame number, as well as snippets to go to another frame and stop or play. What you're asking for is either a slight change to one of the existing snippets, or a matter of combining two of them.For example, to go to the next frame would be a combination of getting the current frame, adding 1 to that, and going to the calc...

Likes

Translate

Translate
Adobe Community Professional ,
Mar 23, 2017 Mar 23, 2017

Copy link to clipboard

Copied

Three of those are the same action, where one of them is the special case of being the current frame. There are already code snippets for stop at this frame and get the current frame number, as well as snippets to go to another frame and stop or play. What you're asking for is either a slight change to one of the existing snippets, or a matter of combining two of them.

For example, to go to the next frame would be a combination of getting the current frame, adding 1 to that, and going to the calculated frame. Here's the snippet for getting the current frame (with comments removed, and in my examples the object clicked on is named 'clip'):

var frameNumber = this.currentFrame;

and the snippet for going to another frame and stopping:

this.clip.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));

function fl_ClickToGoToAndStopAtFrame() {

  this.gotoAndStop(5);

}

So, you want the next frame instead of hard coding '5', like this:

this.clip.addEventListener("click", fl_ClickToGoToAndStopAtNextFrame.bind(this));

function fl_ClickToGoToAndStopAtNextFrame.bind() {

  this.gotoAndStop(this.currentFrame+1);

}

The snippets get you started, but you do at some point have to understand what the snippets are doing, so you can modify them for a slightly different task.

Here's the code for the four things you asked about:

1. on click go to next frame

this.clip.addEventListener("click", fl_ClickToGoToAndStopAtNextFrame.bind(this));

function fl_ClickToGoToAndStopAtNextFrame() {

  this.gotoAndStop(this.currentFrame+1);

}

2. on click go to previous frame

this.clip.addEventListener("click", fl_ClickToGoToAndStopAtPreviousFrame.bind(this));

function fl_ClickToGoToAndStopAtPreviousFrame() {

  this.gotoAndStop(this.currentFrame-1);

}

3. on click play

this.clip.addEventListener("click", fl_ClickToPlay.bind(this));

function fl_ClickToPlay() {

  this.play();

}

4. on click stop

this.clip.addEventListener("click", fl_ClickToStop.bind(this));

function fl_ClickToStop() {

  this.stop();

}

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 ,
Mar 23, 2017 Mar 23, 2017

Copy link to clipboard

Copied

Thanks Colin,

I knew it would be that simple but not being a programmer it would have taken a bit of trial and error and with the clock ticking at work I needed some kind expert as yourself to reply.

thanks very much,

George.

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 ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

I may be 4 years late to the party, but this is EXACTLY what I was looking for!

 

It works perfectly.  I just had to replace 'clip' with 'redbutton' (or whichever button I needed to press) and I had a joyous moment.

Thank you Colin!

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 ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

LATEST

Here is a little tutorial on code snippets. 

 

https://www.youtube.com/watch?v=xUIxQM47CSo


Multimedia Developer, Character Creator, and Animator.

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