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

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

New Here ,
Jul 12, 2023 Jul 12, 2023

Copy link to clipboard

Copied

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.

Bradley31049425xc4c_0-1689221862028.pngBradley31049425xc4c_1-1689221903921.png

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.

 

Views

73

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 ,
Jul 12, 2023 Jul 12, 2023

Copy link to clipboard

Copied

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

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
New Here ,
Jul 12, 2023 Jul 12, 2023

Copy link to clipboard

Copied

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.

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
Community Expert ,
Jul 12, 2023 Jul 12, 2023

Copy link to clipboard

Copied

that won't work.

 

how/where will your application be deployed?

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
New Here ,
Jul 12, 2023 Jul 12, 2023

Copy link to clipboard

Copied

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.

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
Community Expert ,
Jul 13, 2023 Jul 13, 2023

Copy link to clipboard

Copied

LATEST

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.)

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