HTML5 Canvas Buttons not working

[Grafiksman]

I'm new at Animation CC (never used Flash either, but did use Edge Animate for a few things).

I've searched and found some similar problems but no solutions have worked for me. This one's a bit challenging to explain so please bear with me. I can't get the buttons to work the way I need them to, which is as follows:

On start, three orange buttons appear on the left side, with a static image to the right. When one of the three orange buttons is tapped it should play one of three movie clips, and the button associated with the played clip remains orange while the other two gray out. When the clip concludes, I want to tap the active (orange) button again to replay the current clip, or tap one of the grayed out buttons to play a different clip. The button for the new played clip then turns orange and the other two buttons gray out.

The animation has the following layers from top to bottom:

1. Actions- all actions
2. Buttons - three buttons to start or replay each of three different movie clips
3. Start Content - static image that displays only on initial load and disappears when any of the three movie clips are played
4. Camo Animations - contains three different movie clips starting at frames 2, 127, and 252. Each clip has a 'this.stop();' on the last frame to prevent looping

The timeline looks like this (sorry if this is hard to see...):

Frames and Actions:

• Frame 1 (see screenshot 1 above) - buttons works as they should, advancing to and playing the movie clip
  • three orange buttons
  • static image that disappears when a button is tapped to jump to an animation
  • this code:

/*Stop at buttons*/

this.stop();

/*Jump to and play Woodlands*/

this.woodlandButton.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_4.bind(this));

function fl_ClickToGoToAndPlayFromFrame_4()

{

this.gotoAndPlay(2);

}

/*Jump to and play Desert/Urban*/

this.desertButton.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_5.bind(this));

function fl_ClickToGoToAndPlayFromFrame_5()

{

this.gotoAndPlay(127);

}

/*Jump to and play Snow/Alpine*/

this.snowButton.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_6.bind(this));

function fl_ClickToGoToAndPlayFromFrame_6()

{

this.gotoAndPlay(253);

}

• Frame 2 (see screenshot 2 above) - this is where the problems begin, none of the buttons do anything at all from here on out.
  • new iteration of the orange woodland button and two grayed out buttons (second screen shot above)
  • Animation 1 (Woodland)
  • This button code:

/* Go to and play Woodland*/

this.woodlandButton2.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_8.bind(this));

function fl_ClickToGoToAndPlayFromFrame_8()

{

this.gotoAndPlay(2);

}

/*Jump to and play Desert/Urban*/

this.desertButton_lt2.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_5.bind(this));

function fl_ClickToGoToAndPlayFromFrame_5()

{

this.gotoAndPlay(127);

}

/*Jump to and play Snow/Alpine*/

this.snowButton_lt2.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_6.bind(this));

function fl_ClickToGoToAndPlayFromFrame_6()

{

this.gotoAndPlay(253);

}

• Frame 126 (corresponds to the last frame of Woodlands clip)
  • this.stop(); - to stop the timeline
• Frame 127
  • orange desert button and two grayed out buttons
  • Animation 1 (Desert/Urban)
  • this button code:

/* go to and play Woodland*/

this.woodlandButton_lt3.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_9.bind(this));

function fl_ClickToGoToAndPlayFromFrame_9()

{

this.gotoAndPlay(2);

}

/* go to and play Desert*/

this.desertButton3.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_10.bind(this));

function fl_ClickToGoToAndPlayFromFrame_10()

{

this.gotoAndPlay(127);

}

/*go to and play Snow*/

this.snowButton_lt3.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_11.bind(this));

function fl_ClickToGoToAndPlayFromFrame_11()

{

this.gotoAndPlay(253);

}

The Snow button would be the same setup. Sorry this is so long. I figure more information is better... hope so...

Thanks for any help.

Steve

[kglad · Accepted solution]

that setup is overly complex and prone to problems.

you should create a one frame project with all your (movieclip) buttons and the movies they display in frame one.  each button should have 2 frames. one that displays the 'active' state and the other frame that does not.

you should use the visible property of the displayed movies to control which are visible and which are not.  eg, if you have mc1,mc2,mc3 movieclip buttons (with an 'inactive' frame label in the first frame and a this.stop(), and an 'active' frame label) that display movieclips display1,display2,display3, resp., you would use:

for(var i=1;i<=3;i++){

this['mc'+i].addEventListener('click', displayF.bind(this));

this['mc'+i].display = this['display'+i];

this['display'+i].visible = false;

}

function displayF(e) {

    for(var i=1;i<=3;i++){

        this['display'+i].visible = false;

        this['mc'+i].gotoAndStop('inactive');

    }

    e.currentTarget.display.visible = true;

    e.currentTarget.gotoAndStop('active');

}

[Grafiksman]

kglad,

Thanks a ton for responding. As I said I'm really new at this, so your solution is pretty far over my head. I get what you're doing here, but don't understand how to set it up in the timelines (stage and movies). Can you clarify some things?

You say to create one frame project (which I understand), but then go on to say that each button should have 2 frames (one frame with active state, one frame with inactive state). I don't understand the contradiction--where is this second frame if it's a one frame project?

Should all the buttons (duplicate instances) be inside each movie clip timeline, occupying the first two frames (active/inactive), then the rest of the animation starting at frame 3 of the clip timeline?

I'm using code snippets so far, so your code is pretty impenetrable to me. What does what here and where is it placed? I understand that I should replace mc1, mc2, mc3 with my movie clip names, but I'm really not understanding how to stage this solution. What goes where? Are all actions on the stage, or are there any in the movie timelines (I currently have a this.stop(); in the last frame of each to prevent looping)? Should the visible property of the movies be set to off in the properties dialog, or does the code you have here do that job?

I guess I'm asking for "put this here, put this there" mapped-out guidance for a solution like this that maybe you don't have time for...

[kglad]

one frame project means the main timeline (that will contain your code) has one frame.  the movieclip buttons will have two frames.

drag the movieclip buttons from the library and position them on the main timeline stage.

here's how to set it up, http://www.kglad.com/Files/forums/Untitled-5.fla

here's the result:  http://www.kglad.com/Files/forums/Untitled-5.html

[Grafiksman]

Thank you! I'm in over my head on the javascript at this point, but by duplicating what you did here (really appreciate this), I got it going. However, it doesn't play the animations properly. When you first tap on a button after loading the page, the first playing of the clip requested sort of works, but when it's done, additional button taps reveal the clip, but it's already advanced to the last frame. The woodland and desert clips are each composed of 7 pieces that are supposed to run for 18 frames (@24 fps) each. The snow one has two pieces at the same timing.

see camo_colors 4

Thanks again for your support.

[kglad]

apply gotoAndPlay to the display movieclips.

[Grafiksman]

I was thinking that must be the case, but how is it stated and where does it go?

I tried this but it did nothing:

if (e) {

e.currentTarget.display.visible = true;

e.currentTarget.gotoAndPlay('display'+i);

e.currentTarget.gotoAndStop('active');

}

It was a total stab in the dark based on my limited understanding. Clearly I need to do a lot more learning...

[kglad]

you probably want,

for(var i=1;i<=3;i++){

this['mc'+i].addEventListener('click', displayF.bind(this));

this['mc'+i].display = this['display'+i];

this['display'+i].visible = false;

}

function displayF(e) {

    for(var i=1;i<=3;i++){

        this['display'+i].visible = false;

        this['mc'+i].gotoAndStop('inactive');

    }

    e.currentTarget.display.visible = true;

e.currentTarget.display.gotoAndPlay(0);

    e.currentTarget.gotoAndStop('active');

}

[Grafiksman]

that did it! Thanks again.

Why does the (0) work in this context? Because the playhead is already at the starting point, and the correct clip is identified by (e)?

[kglad]

0 is the first frame in a canvas timeline.  e.currentTarget.display is defined in the initial for-loop.