Skip to main content
georgeh14253769
Inspiring
March 24, 2017
Answered

Adobe Animate Code Snippets

  • March 24, 2017
  • 3 replies
  • 3450 views

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.

This topic has been closed for replies.
Correct answer Colin Holgate

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

}

3 replies

Community Expert
June 8, 2021

Here is a little tutorial on code snippets. 

 

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

georgeh14253769
Inspiring
March 24, 2017

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.

Participating Frequently
June 8, 2021

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!

Colin Holgate
Colin HolgateCorrect answer
Inspiring
March 24, 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 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();

}