Animate Buttons Coding

New Here ,
Dec 18, 2020

Copy link to clipboard

Copied

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)

TOPICS
Missing feature, Timeline

Views

52

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
kglad LATEST
Adobe Community Professional ,
Dec 20, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

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