Skip to main content
L
lucianay53820071
Participant
July 18, 2018
Answered

Animate CC (HTML5) - Start and Stop frame

  • July 18, 2018
  • 1 reply
  • 1854 views

I am new at Animate CC and I was wondering if there is a way to start at a certain frame and stop at another frame, depending on which button.

Example:
I need that one of the buttons plays the timeline from 5 to 10 frames.
The second one plays from 5 to 20.
The third one plays from 5 to 30.

I'm sorry if it's a simple issue.

This topic has been closed for replies.
Correct answer kglad

there are some typos in that:

this.stop();

this.tickerF=tickF.bind(this);

this.btn1.addEventListener('click',f1.bind(this));

this.btn2.addEventListener('click',f2.bind(this));

this.btn3.addEventListener('click',f3.bind(this));

function f1(){

this.endFrame=10;

start_tickF(this);

}

function f2(){

this.endFrame=20;

start_tickF(this);

}

function f3(){

this.endFrame=30;

start_tickF(this);

}

function start_tickF(this_var){

this_var.play();  // might want gotoAndPlay() if more than one button can be clicked.

createjs.Ticker.addEventListener('tick',this_var.tickerF);

}

function tickF(){

if(this.currentFrame==this.endFrame){

this.stop()

createjs.Ticker.removeEventListener('tick',this.tickerF);

}

}

1 reply

kglad
Community Expert
kgladCommunity Expert
Community Expert
July 18, 2018

html5 frames are numbered from 0 to totalframes-1.

with that in mind, this is one (verbose) way to do that:

this.tickerF=tickF.bind(this);

btn1.addEventListener('click',f1.bind(this));

btn2.addEventListener('click',f2.bind(this));

btn3.addEventListener('click',f3.bind(this));

function f1(){

this.endFrame=10;

start_tickF(this);

}

function f1(){

this.endFrame=10;

start_tickF(this);

}

function f2(){

this.endFrame=20;

start_tickF(this);

}

function f3(){

this.endFrame=30;

_start_tickF(this);

}

function start_tickF(this_var){

this_var.play();  // might want gotoAndPlay() if more than one button can be clicked.

createjs.Ticker.addEventListener('tick',this_var.tickerF);

}

function tickF(){

if(this.currentFrame==this.endFrame){

this.stop()

createjs.Ticker.removeEventListener('tick',this_var.tickerF);

}

}

L
lucianay53820071Author
Participant
July 18, 2018

Thank you for the reply, kglad!
The start frame is working. But still not stoping at the endFrame.....

kglad
Community Expert
kgladCommunity ExpertCorrect answer
Community Expert
July 18, 2018

there are some typos in that:

this.stop();

this.tickerF=tickF.bind(this);

this.btn1.addEventListener('click',f1.bind(this));

this.btn2.addEventListener('click',f2.bind(this));

this.btn3.addEventListener('click',f3.bind(this));

function f1(){

this.endFrame=10;

start_tickF(this);

}

function f2(){

this.endFrame=20;

start_tickF(this);

}

function f3(){

this.endFrame=30;

start_tickF(this);

}

function start_tickF(this_var){

this_var.play();  // might want gotoAndPlay() if more than one button can be clicked.

createjs.Ticker.addEventListener('tick',this_var.tickerF);

}

function tickF(){

if(this.currentFrame==this.endFrame){

this.stop()

createjs.Ticker.removeEventListener('tick',this.tickerF);

}

}

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices