Highlighted

Error when use the buttons to control MovieClip from the scene

New Here ,
Sep 03, 2020

Copy link to clipboard

Copied

Hello, I'm new to Adobe Animate CC. And I'm learning to use HTML5 Canvas.
I'm trying to add buttons to the scene to control a Movie Clip from outside. The thing is these buttons need a disabled state when it's reach the start/ end of the scene, and button play/pause change when playing Movie Clip.
So here is my idea:
I make 4 frames, each have their own active and disable buttons.

Bui0D4C_0-1599185115260.png

- Start: disabled prev and reload buttons

Bui0D4C_1-1599185132213.png

- Middle: enable every buttons

Bui0D4C_2-1599185144648.png

- Playing: change play button to pause and disable prev, next buttons

Bui0D4C_3-1599185159312.png

- End: disable play and next buttons

Bui0D4C_4-1599185170928.png

And inside the Movie Clip, I labeled every steps. When they reach the keyframe inside the Movie Clip, they will change its parent buttons like this.

 

 

 

 

 

 

 

 

var root = this;

root.stop();
root.parent.gotoAndStop('middle');

 

 

 

 

 

 

 

 

And in the main scene, I add event listener to every active buttons. Only the middle frame need more detail. Here is what I do in the middle frame.

 

 

 

 

 

 

 

 

var root = this;
var currentLabel = '';

root.stop();

root.btnPrev.on('click', function() {
     var destination = '';
     checkCurrentLabel();
     if (currentLabel == 'First state') {
          root.gotoAndStop('start');
          destination = 'Intial state';
     } else if (currentLabel == 'Second state') {
          destination = 'First state';
     } else if (currentLabel == 'Third state') {
          destination = 'Second state';
     } else if (currentLabel == 'End state') {
          destination = 'Third state';
     } else {
          return;
     }
     root.mcAnimate.gotoAndStop(destination);
     currentLabel = destination;
});

root.btnPlay.on('click', function(){
     root.gotoAndStop('playing');
     root.mcAnimate.play();
     currentLabel = '';
});

root.btnNext.on('click', function(event){
     var destination = '';
     checkCurrentLabel();
     if (currentLabel == 'Intial state') {
          destination = 'First state';
     } else if (currentLabel == 'First state') {
          destination = 'Second state';
     } else if (currentLabel == 'Second state') {
          destination = 'Third state';
     } else if (currentLabel == 'Third state') {
          root.gotoAndStop('end');
          destination = 'End state';
     } else return;
     root.mcAnimate.gotoAndStop(destination);
     currentLabel = destination;
});

root.btnReload.on('click', function(){
	root.gotoAndStop('start');
	root.mcAnimate.gotoAndStop('Intial state');
	currentLabel = '';
});

function checkCurrentLabel() {
     if (currentLabel == '') {
          currentLabel = root.mcAnimate.getCurrentLabel();
     }
}

 

 

 

 

 

 

 

 

I used getCurrentLabel() to decided the next/ prev frame to go. It's still worked but have errors. These next and prev buttons go to wrong step (when in step 3 back to step 1, etc...). And getCurrentLabel() sometimes show these notices.

Bui0D4C_5-1599186376914.png

That's not all, when I put a console.log inside prev/ next buttons. They return many logs in one click

Bui0D4C_6-1599186659326.png

Please help me to find out what did I go wrong.

Step to show error:

1. Click play button and play the MovieClip til the end.

2. Click prev button to go back to the start of MovieClip --> you shall see they skip step at sometime

3. Click next button to go to the end of MovieClip --> they skip it again

 

p/s: buttons always show as hover in mobile and tablet, please help

edit: I don't know why I can't attach my .fla file. Please notice me and I will send my file direct to you.
 
TOPICS
Code, Error, Product issue, Tablet, Timeline

Views

37

Likes

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

Error when use the buttons to control MovieClip from the scene

New Here ,
Sep 03, 2020

Copy link to clipboard

Copied

Hello, I'm new to Adobe Animate CC. And I'm learning to use HTML5 Canvas.
I'm trying to add buttons to the scene to control a Movie Clip from outside. The thing is these buttons need a disabled state when it's reach the start/ end of the scene, and button play/pause change when playing Movie Clip.
So here is my idea:
I make 4 frames, each have their own active and disable buttons.

Bui0D4C_0-1599185115260.png

- Start: disabled prev and reload buttons

Bui0D4C_1-1599185132213.png

- Middle: enable every buttons

Bui0D4C_2-1599185144648.png

- Playing: change play button to pause and disable prev, next buttons

Bui0D4C_3-1599185159312.png

- End: disable play and next buttons

Bui0D4C_4-1599185170928.png

And inside the Movie Clip, I labeled every steps. When they reach the keyframe inside the Movie Clip, they will change its parent buttons like this.

 

 

 

 

 

 

 

 

var root = this;

root.stop();
root.parent.gotoAndStop('middle');

 

 

 

 

 

 

 

 

And in the main scene, I add event listener to every active buttons. Only the middle frame need more detail. Here is what I do in the middle frame.

 

 

 

 

 

 

 

 

var root = this;
var currentLabel = '';

root.stop();

root.btnPrev.on('click', function() {
     var destination = '';
     checkCurrentLabel();
     if (currentLabel == 'First state') {
          root.gotoAndStop('start');
          destination = 'Intial state';
     } else if (currentLabel == 'Second state') {
          destination = 'First state';
     } else if (currentLabel == 'Third state') {
          destination = 'Second state';
     } else if (currentLabel == 'End state') {
          destination = 'Third state';
     } else {
          return;
     }
     root.mcAnimate.gotoAndStop(destination);
     currentLabel = destination;
});

root.btnPlay.on('click', function(){
     root.gotoAndStop('playing');
     root.mcAnimate.play();
     currentLabel = '';
});

root.btnNext.on('click', function(event){
     var destination = '';
     checkCurrentLabel();
     if (currentLabel == 'Intial state') {
          destination = 'First state';
     } else if (currentLabel == 'First state') {
          destination = 'Second state';
     } else if (currentLabel == 'Second state') {
          destination = 'Third state';
     } else if (currentLabel == 'Third state') {
          root.gotoAndStop('end');
          destination = 'End state';
     } else return;
     root.mcAnimate.gotoAndStop(destination);
     currentLabel = destination;
});

root.btnReload.on('click', function(){
	root.gotoAndStop('start');
	root.mcAnimate.gotoAndStop('Intial state');
	currentLabel = '';
});

function checkCurrentLabel() {
     if (currentLabel == '') {
          currentLabel = root.mcAnimate.getCurrentLabel();
     }
}

 

 

 

 

 

 

 

 

I used getCurrentLabel() to decided the next/ prev frame to go. It's still worked but have errors. These next and prev buttons go to wrong step (when in step 3 back to step 1, etc...). And getCurrentLabel() sometimes show these notices.

Bui0D4C_5-1599186376914.png

That's not all, when I put a console.log inside prev/ next buttons. They return many logs in one click

Bui0D4C_6-1599186659326.png

Please help me to find out what did I go wrong.

Step to show error:

1. Click play button and play the MovieClip til the end.

2. Click prev button to go back to the start of MovieClip --> you shall see they skip step at sometime

3. Click next button to go to the end of MovieClip --> they skip it again

 

p/s: buttons always show as hover in mobile and tablet, please help

edit: I don't know why I can't attach my .fla file. Please notice me and I will send my file direct to you.
 
TOPICS
Code, Error, Product issue, Tablet, Timeline

Views

38

Likes

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
Sep 03, 2020 0
Adobe Community Professional ,
Sep 04, 2020

Copy link to clipboard

Copied

Hi.

 

The first thing I can tell you is that the getCurrentLabel method is deprectated. Use the currentLabel property instead.

 

Another thing is that if you're getting multiple logs in one single click, it's probably because your buttons are receiving more than one listener of the same type everytime the frame where the code is located is revisited. You need to prevent a single instance from receiving a listener from the same type more than once by using the hasEventListener method or by creating a boolean flag like described in this thread.

 

Please let us know if solving these two issues is enough or if you need further assistance.

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Sep 04, 2020 0
New Here ,
Sep 06, 2020

Copy link to clipboard

Copied

I did as you said, and the console.log return one for each click. However, function still return wrong value.

 

 

function handleBtnNext() {
    console.log('next click');
    var destination = '';
    currentLabel = root.mcAnimate.currentLabel;
    if (currentLabel == 'Intial state') {
        destination = 'First state';
    } else if (currentLabel == 'First state') {
        destination = 'Second state';
    } else if (currentLabel == 'Second state') {
        destination = 'Third state';
    } else if (currentLabel == 'Third state') {
        root.gotoAndStop('end');
        destination = 'End state';
    } else return;
    root.mcAnimate.gotoAndStop(destination);
    currentLabel = destination;
    btnNextMiddleClicked = true;
}

if (!btnNextMiddleClicked) {
    root.btnNext.on('click', handleBtnNext);
}

 

 

Property currentLabel always return the same value as it first click (= 'First state'). And the movieClip stucked at 'Second state'.

 

P/s: In addition, I want to ask about when running on touch device (mobile, tablet ...), the buttons always keep in hover state after I press them. 

Button Next in Hover stateButton Next in Hover state

And when I tap it again, the whole stage is selected.

The whole stage is selectedThe whole stage is selected

Likes

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
Reply
Loading...
Sep 06, 2020 0