Skip to main content
K7S
Inspiring
April 23, 2018
Answered

Javascript button that requires multiple "clicks" to proceed

  • April 23, 2018
  • 1 reply
  • 1005 views

Hi there,

I'm developing a project that's helping me learn Javascript for fun on the side.

I wanted to create a specific type of button, and I am having trouble finding any existing resources on it.

Does anyone know how to make a button that after multiple clicks jumps to the next label or frame. Preferably a random amount of clicks that can be set, let's say 3 - 12 clicks. This button should be recyclable, in that it can be used again on the timeline with the same snippet of code.

This is what I use for buttons typically is below and works great but I really would like some help expanding what buttons can do.

this.next.addEventListener("click", next_button1.bind(this));

function next_button1() {

    this.gotoAndPlay("start");

}

Any help would be really appreciated. Thank you !

This topic has been closed for replies.
Correct answer JoãoCésar17023019

Hi.

My suggestion:

this.button0.on("click", function(e)

{

    this.randomClicks(e.currentTarget, 3, 7, this, 1);

}.bind(this));

this.randomClicks = function(button, min, max, target, destination)

{

    if (!button.setRandom)

        button.setRandom = Math.round(min + Math.random() * (max - min));

  

    if (!button.clicks)

        button.clicks = 0;

  

    console.log(button.clicks, button.setRandom);

  

    if (button.clicks == button.setRandom)

    {

        console.log("finish", button.setRandom);

        button.setRandom = null;

        button.clicks = null;

        target.gotoAndStop(destination);

    }

  

    button.clicks++;

}

You add a listener to the button you want and then you call the function for multiple clicks.

I hope it helps.

Regards,

JC

1 reply

JoãoCésar17023019
JoãoCésar17023019Correct answer
Inspiring
April 24, 2018

Hi.

My suggestion:

this.button0.on("click", function(e)

{

    this.randomClicks(e.currentTarget, 3, 7, this, 1);

}.bind(this));

this.randomClicks = function(button, min, max, target, destination)

{

    if (!button.setRandom)

        button.setRandom = Math.round(min + Math.random() * (max - min));

  

    if (!button.clicks)

        button.clicks = 0;

  

    console.log(button.clicks, button.setRandom);

  

    if (button.clicks == button.setRandom)

    {

        console.log("finish", button.setRandom);

        button.setRandom = null;

        button.clicks = null;

        target.gotoAndStop(destination);

    }

  

    button.clicks++;

}

You add a listener to the button you want and then you call the function for multiple clicks.

I hope it helps.

Regards,

JC

K7S
K7SAuthor
Inspiring
April 24, 2018

JoãoCésar17023019
Inspiring
April 24, 2018

Haha! I wish.

The other guys here are lightyears better than me. Hehe

I added some comments:

this.stop();

// Here we set the button on stage to listen for clicks.

this.button0.on("click", function(e)

{

    this.randomClicks(e.currentTarget, 3, 7, this, 1);

    // The function for the random clicks needs 5 parameters:

    // the button

    // the minimum value for the random range

    // the max value

    // the Movie Clip we are going to change the frame when the maximum amount of clicks is reached

    // the frame/label to go in this Movie Clip.

}.bind(this)); // here I chain the bind function so the 'this' keyword inside the function refers to the main timeline

this.randomClicks = function(button, min, max, target, destination)

{

    // Here we only want the random value to be set once. So we check if the button have the property 'setRandom'.

    // If it doesn't, it means that we can set the random value

    if (!button.setRandom)

        button.setRandom = Math.round(min + Math.random() * (max - min));

  

    // The same as above. We check if the property exists and set its value only once.

    if (!button.clicks)

        button.clicks = 0;

  

    console.log(button.clicks, button.setRandom);

  

    // If the amount of clicks is equal to the random value, we set the created properties to null

    //so we can start another click session and we finally send the target movie clip to the desired frame

  

    if (button.clicks == button.setRandom)

    {

        console.log("finish", button.setRandom);

        button.setRandom = null;

        button.clicks = null;

        target.gotoAndStop(destination);

    }

  

    button.clicks++;

}

My business email is: joao.cesar@minifliper.com

Thank you!