Skip to main content
iCon academy
Participant
December 19, 2020
Question

Animate Buttons Coding

  • December 19, 2020
  • 1 reply
  • 203 views

Hi, All
I'm a student for studying animation.
In my animation (Animate_Adobe) I'm going through a difficult part.
That is "Playing by Buttons" in "main stage" or "symbol edit window"

 

At first, I made objects and buttons on the main stage, and I also inserted symbols, added JavaScript.
The problem, however, is that they don't work in Test.
To be exact, the buttons doesn't worked in main stage.

 

Of course, I applied same to the symbol editing window.
Surprisingly, The same coding in the symbol edit window became a play.
Buttons worked well, too.

 

Unfortunately, I want not symbol edit, but main stage.
The reason is that all the work I've been doing is in the main stage.
I want to make a buttons that works on the main stage and apply it to my old work.

 

I'll upload the object and buttons information that I set. Also the JavaScript I used.
I don't know if JavaScript is a problem or something else.
Your little attention will be a big help.

 

-----------------------------------------------------------------------------------------------------------------

 

The Object and Buttons Information on the main stage.

 

- The Moving Object -
(1) Instance Name: inst_animation
(2) Tween: Classic Tween
(3) Insert symbol: Movie Clip

 

- The Reverse Button -
(1) Instance Name: btn_rwd
(2) Tween: X
(3) Insert symbol: Button

 

- The halt Button -
(1) Instance Name: btn_halt
(2) Tween: X
(3) Insert symbol: Button

 

- The forward Button -
(1) Instance Name: btn_fwd
(2) Tween: X
(3) Insert symbol: Button

 

- The Tape(=replay) Button -
(1) Instance Name: btn_tape
(2) Tween: X
(3) Insert symbol: Button


- The Coding - (ps. I put in "Actions Layer" on the main stage)

 

var sym = this;

 

this.btn_fwd.on("click", playForwards.bind(sym.inst_animation));

 

this.btn_rwd.on("click", playReverse.bind(sym.inst_animation));

 

this.btn_halt.on("click", stopHalt.bind(sym.inst_animation));

 

this.btn_tape.on("click", playTape.bind(sym.inst_animation));


//------------------
//Play forward
function playForwards() {

if(createjs.Ticker.hasEventListener("tick")){
createjs.Ticker.removeAllEventListeners();
}

createjs.Ticker.addEventListener("tick", playF.bind(this));

}

 

function playF(e) {

this.gotoAndStop(this.currentFrame + 1);

if (this.currentFrame >= this.duration-1) {
createjs.Ticker.removeAllEventListeners();
}

stage.update();

}

 

//------------------
// Play Reverse
function playReverse() {

if(createjs.Ticker.hasEventListener("tick")){
createjs.Ticker.removeAllEventListeners();
}
createjs.Ticker.addEventListener("tick", playR.bind(this));
}

 

function playR(e) {

this.gotoAndStop(this.currentFrame - 1);

if (this.currentFrame <= 0) {
createjs.Ticker.removeAllEventListeners();
}

stage.update();

}


//------------------
//stop
function stopHalt() {

if(createjs.Ticker.hasEventListener("tick")){
createjs.Ticker.removeAllEventListeners();
}

createjs.Ticker.addEventListener("tick", stopH.bind(this));

}

 

function stopH(e) {

this.gotoAndStop(this.currentFrame);

stage.update();

}

 

//------------------
//play
function playTape() {

if(createjs.Ticker.hasEventListener("tick")){
createjs.Ticker.removeAllEventListeners();
}

createjs.Ticker.addEventListener("tick", playT.bind(this));

}

 

function playT(e) {

this.gotoAndStop("StartAnimation");

stage.update();

}


(ps. I worked in H.T.M.L.5)

This topic has been closed for replies.

1 reply

kglad
Community Expert
Community Expert
December 20, 2020

the first possible problem i see is the binding of this.inst_animation which mean the use of "this" in your functions refers to that this.inst_animation.  if that's what you want, that's not a problem.

 

the second problem is definite and it's the use of a movieclip's duration when you should use its totalFrames.

 

fix the one or two problems and then retest.