Skip to main content
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
    Community Expert
    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

    Inspiring
    July 2, 2022

    Hi, I wonder if this script can be used for generating a random of several numbers, such as (2, 1, 4, 9, 3).  I know it's a little different from the topic, But I guess it seems logically close. I've tried this script, but it didn't work. could you please help me with this? Thank you very much!

    var _this = this;
    this.numberA= [ 2, 1, 4, 9, 3 ];
    var randomnumber = Math.floor(Math.random() * this.numberA.length);
    
    this.testbtn.on('click', function ()
    {
    	_this.numberRandom.text= randomnumber;
    });

     

    Known Participant
    January 10, 2023

    https://www.kglad.com/Files/forums/shuffle.html

     

    https://www.kglad.com/Files/forums/shuffle.fla


    Hi, kglad.... your fla file works perfect !! Thats what all I need ...

    Thanks a lot... you're the best.