Need a little Script help for using buttons to navigate specific frame ranges in HTML5 canvas.

[Bradley31049425xc4c]

Hi,

I'm doing something a little unusual for a study project, and building a basic drum machine in Animate that has three different kits pages (each with different sounds) and a help page.

I have buttons for Kit 1, Kit 2, Kit 3 and Help which I'm using to navigate. The square 'pads' 1-8 are used to trigger 8 different sounds on each drum kit.

Currently when my animation plays it automatically plays through Kit 1 for 3 seconds, Kit 2 for 3 seconds etc... and loops this following my timeline.

If a user clicks on any of the Kit buttons the animation stops with the script I have and the user can play that kit until they click on another kit. So switching and staying on a kit is working fine once a user clicks on any of the kits.

I saved another version with an extra frame at the start and used 'this.stop(1);' which did stop the animation from playing through the timeline, thus it stayed on Kit 1 page until it got a user input, but for some reason after the user moved to Kit 2 or Kit 3 for example, the Kit buttons no longer worked to navigate freely like they did in the previous version where it looped until the user stopped it with an input.

I'll try to include some screenshots and existing code so it might be easier to understand. This is just my prototype, so I haven't set it up with pretty images yet.

Here's an example of the code I'm using which lets me navigate exactly how I want to (except the animation loops at launch until it gets a user input).

this.kit1_page1_btn.addEventListener("click", fl_ClickToGoToAndPlayFromFrame.bind(this));

function fl_ClickToGoToAndPlayFromFrame()
{
this.gotoAndPlay(2);
this.stop(90);
}

this.kit2_page1_btn.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_2.bind(this));

function fl_ClickToGoToAndPlayFromFrame_2()
{
this.gotoAndPlay(92);
this.stop(180);
}

this.kit3_page1_btn.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_3.bind(this));

function fl_ClickToGoToAndPlayFromFrame_3()
{
this.gotoAndPlay(182);
this.stop(269);
}

this.help_btn.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_17.bind(this));

function fl_ClickToGoToAndPlayFromFrame_17()
{
this.gotoAndPlay(271);
this.stop(275);
}

...and here's the code I was using on frame 1 which worked to stop the animation from auto-looping, but somehow my navigation was broken after this (even with frame numbers adjusted in the code for the extra frame I added at the start). Also I hadn't setup the Help page yet in this example.

this.stop(1);

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

function fl_ClickToGoToAndPlayFromFrame_11()
{
this.gotoAndPlay(2);
this.stop(90);
}

this.kit2_page0_btn.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_12.bind(this));

function fl_ClickToGoToAndPlayFromFrame_12()
{
this.gotoAndPlay(92);
this.stop(180);
}

this.kit3_page0_btn.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_13.bind(this));

function fl_ClickToGoToAndPlayFromFrame_13()
{
this.gotoAndPlay(182);
this.stop(269);
}

It's only my second time using animate, so I've likely missed something simple. Would REALLY appreciate any help the community has to offer.

Thanks,

Brad.

[kglad]

what are those stop()'s supposed to do?

[Bradley31049425xc4c]

I'm using them to stop the animation in the frame range of each 'kit' so that it doesn't automatically play along the timeline to the next 'kit'. So a user clicks the Kit 2 button for example and the animation moves to the frames for Kit 2 and stops before it gets to the frames for Kit 3. While the Kit 2 frames are displayed they can click on the 1-8 pads to trigger the sounds for Kit 2.

[kglad]

that won't work.

how/where will your application be deployed?

[Bradley31049425xc4c]

I believe we only have to submit our file which the teacher will view locally via Animate and Browser, so it wont be deployed online.

[kglad]

you need to place

this.stop();

at the end of each sequence of frames that you do not want to continue to the next sequence.  or you must start a timer loop that repeatedly checks each frame being played until the last frame in a sequence is reached.  (the first suggestion is much easier.)