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

Community Beginner ,
May 10, 2022 May 10, 2022

Copy link to clipboard

Copied

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?

 

 

Views

66

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , May 10, 2022 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 ...

Likes

Translate

Translate
Adobe Community Professional ,
May 10, 2022 May 10, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 10, 2022 May 10, 2022

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 10, 2022 May 10, 2022

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 10, 2022 May 10, 2022

Copy link to clipboard

Copied

Thanks a ton.

Exactly what I wanted!

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 10, 2022 May 10, 2022

Copy link to clipboard

Copied

LATEST

Excellent! You're welcome!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines