• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Animate Buttons Coding

New Here ,
Dec 18, 2020 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

148

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
Community Expert ,
Dec 20, 2020 Dec 20, 2020

Copy link to clipboard

Copied

LATEST

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.

Votes

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