Skip to main content
NefJack
NefJack
Participating Frequently
May 10, 2022 6:00 PM UTC
Answered

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

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 is closed to new replies. Start a new post to keep the conversation going.
    JoãoCésar17023019
    JoãoCésar17023019Correct answer
    Community Expert
    May 10, 2022 6:44 PM UTC

    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

     

    View reply

    30 replies

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    May 10, 2022 6:17 PM UTC

    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

    Translate
    NefJack
    NefJackAuthor
    Participating Frequently
    May 10, 2022 6:32 PM UTC

    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?

    Translate
      JoãoCésar17023019
      Community Expert
      JoãoCésar17023019Community ExpertCorrect answer
      Community Expert
      May 10, 2022 6:44 PM UTC

      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

       

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