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

[NefJack]

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?

[JoãoCésar]

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]

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ésar · Accepted solution]

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

[NefJack]

Thanks a ton.

Exactly what I wanted!

[JoãoCésar]

Excellent! You're welcome!