Skip to main content
NefJack
NefJack
Participating Frequently
May 10, 2022
Answered

Trying to go to a random frame number with button click in HTML5 canvas

  • May 10, 2022
  • 1 reply
  • 2505 views

Hi,

 

I'm trying to make the timeline within a movie clip go to and stop on a random frame numer initiated with a button click.

I have a button called "testbtn" and a movieclip called "testmc"

I'm storing the frame numbers I want to be able to go to in an array and then picking a number from that array randomly, and then inserting that number into an "on-click" event.

 

The code I have is:

 

 

var _this = this;
this.frameA = [1, 2, 3, 4, 5];
var randomframe = Math.floor(Math.random() * this.frameA.length);


this.testbtn.on('click', function(){
_this.testmc.gotoAndStop(this.randomframe);
});

 

But it doesn't seem to work. Anyone know what I am doing wrong?

 

 

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

    You're welcome!

     

    You just have to move randomFrame into the event handler function and replace this.frameA.length by _this.frameA.length. 

    var _this = this;
this.frameA = [ 0, 1, 2, 3, 4 ];

this.testbtn.on('click', function ()
{
	var randomframe = Math.floor(Math.random() * _this.frameA.length);
	_this.testmc.gotoAndStop(randomframe);
});

     

    Alternatively, you can create this same interactivity without using the array. You just need the totalFrames property of a MovieClip. Like this:

    var _this = this;

this.testbtn.on('click', function ()
{
	var randomframe = Math.floor(Math.random() * _this.testmc.totalFrames);
	_this.testmc.gotoAndStop(randomframe);
});

     

    I hope it helps.

     

    Regards,

    JC

     

    1 reply

    JoãoCésar17023019
    JoãoCésar17023019
    Community Expert
    May 10, 2022

    Hi.

     

    It's because randomFrame is a variable but you're trying to access it like it is a property using the this keyword. Also, please keep in mind that the first frame index in the HTML5 Canvas is 0.

    var _this = this;
this.frameA = [ 0, 1, 2, 3, 4 ];
var randomframe = Math.floor(Math.random() * this.frameA.length);

this.testbtn.on('click', function ()
{
	_this.testmc.gotoAndStop(randomframe);
});

     

    I hope this helps.

     

    Regards,

    JC

    NefJack
    NefJackAuthor
    Participating Frequently
    May 10, 2022

    Thank you JC. That helps!

    That seemed to work.. but I have a follow up question that I hope you can help me with.

    When the button is clicked, it is definitely randomly choosing a number from the array. But it is choosing the same number every time it is clicked again.  How can I make it choose a random number for every click, without having to refresh the page?

      JoãoCésar17023019
      JoãoCésar17023019Correct answer
      Community Expert
      May 10, 2022

      You're welcome!

       

      You just have to move randomFrame into the event handler function and replace this.frameA.length by _this.frameA.length. 

      var _this = this;
this.frameA = [ 0, 1, 2, 3, 4 ];

this.testbtn.on('click', function ()
{
	var randomframe = Math.floor(Math.random() * _this.frameA.length);
	_this.testmc.gotoAndStop(randomframe);
});

       

      Alternatively, you can create this same interactivity without using the array. You just need the totalFrames property of a MovieClip. Like this:

      var _this = this;

this.testbtn.on('click', function ()
{
	var randomframe = Math.floor(Math.random() * _this.testmc.totalFrames);
	_this.testmc.gotoAndStop(randomframe);
});

       

      I hope it helps.

       

      Regards,

      JC

       

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices