• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Explorer ,
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

987

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

Community Expert , 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 
...

Votes

Translate

Translate
Community Expert ,
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

Votes

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
Explorer ,
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?

Votes

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 Expert ,
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

 

Votes

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
Explorer ,
May 10, 2022 May 10, 2022

Copy link to clipboard

Copied

Thanks a ton.

Exactly what I wanted!

 

 

Votes

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 Expert ,
May 10, 2022 May 10, 2022

Copy link to clipboard

Copied

Excellent! You're welcome!

Votes

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
Explorer ,
Jul 02, 2022 Jul 02, 2022

Copy link to clipboard

Copied

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;
});

 

Votes

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 Expert ,
Jul 03, 2022 Jul 03, 2022

Copy link to clipboard

Copied

Hi.

 

I suppose it's not working because you're always getting the same number?

Votes

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
Explorer ,
Jul 03, 2022 Jul 03, 2022

Copy link to clipboard

Copied

Thank for replaying, yes, it is. 

Votes

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
LEGEND ,
Jul 03, 2022 Jul 03, 2022

Copy link to clipboard

Copied

You are only setting a random number once. You could set the number in the button click function:

var _this = this;

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

Votes

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
Explorer ,
Jul 03, 2022 Jul 03, 2022

Copy link to clipboard

Copied

thank you for your response, I've tried this and got a random number. But there is still a problem, I got a random number that is not from my numbers list. It seems like the script counts the length of the number which are 5 numbers so every time I click I got 0-4. what I need is a random number that exists in my list  [2, 1, 4, 9, 3] so I can change this to any number that I what such as [20, 45, 50, 75, 90] etc. Do you have any Idea how to get it? thanks in advance.

Votes

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
LEGEND ,
Jul 03, 2022 Jul 03, 2022

Copy link to clipboard

Copied

Try this:

var _this = this;

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

Votes

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
Explorer ,
Jul 04, 2022 Jul 04, 2022

Copy link to clipboard

Copied

woow, it works perfectly, thanks a lot!

Votes

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
Explorer ,
Jul 21, 2022 Jul 21, 2022

Copy link to clipboard

Copied

Hi, it's me again, I need help, I use the tick function for this random, is there a way to control the speed of the random? I need this random number to change every second, I try to use setInterval but didn't work Thank you.

this is the random code that I use.

 

this.addEventListener("tick", randomkesetimbangan.bind(this));
function randomkesetimbangan() {

var numberC = [0.0, 0.1, -0.1, ];
that.randomTD.text = (numberC[Math.floor(Math.random() * numberC.length)])

}

Votes

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
Explorer ,
Jul 21, 2022 Jul 21, 2022

Copy link to clipboard

Copied

Votes

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
Explorer ,
Jul 21, 2022 Jul 21, 2022

Copy link to clipboard

Copied

oo iya, sudah terselesaikan, Ternyata setIntervalnya harus ditaruh di luar funsi tick.  Terima kasih banyak..

 

Votes

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
Explorer ,
Jul 21, 2022 Jul 21, 2022

Copy link to clipboard

Copied

Bisa juga ditambahkan fungsi setTimeout supaya pertama kali di preview, langsung muncul angkanya. Waktu bisa di set 50.

Votes

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
Explorer ,
Jul 23, 2022 Jul 23, 2022

Copy link to clipboard

Copied

oiyaaa.. baik, terima kasih..

Votes

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
Explorer ,
Jan 04, 2023 Jan 04, 2023

Copy link to clipboard

Copied

Hi Colin, could you please help me again in this case? I need this random number without repetition and don't know how to set it. Thank you.

Votes

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 Expert ,
Jan 04, 2023 Jan 04, 2023

Copy link to clipboard

Copied

google the shuffle function in this forum.

Votes

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
Explorer ,
Jan 04, 2023 Jan 04, 2023

Copy link to clipboard

Copied

thanks, But I don't really understand that shuffle function and what I found is for actionscript, is there a simple way to edit the script below to get the unrepeated random number? thank you.

this.addEventListener("tick", randomkesetimbangan.bind(this));
function randomkesetimbangan() {

var numberC = [0.0, 0.1, -0.1, 0.2, -0.2, 0.3, -0.3 ];
that.randomTD.text = (numberC[Math.floor(Math.random() * numberC.length)])

}

 

Votes

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 Expert ,
Jan 04, 2023 Jan 04, 2023

Copy link to clipboard

Copied

no, you need to use the shuffle function.  i've posted it numerous times here in as3 and js.

 

i'm on my phone now. when back to my computer, i'll repost it here.

Votes

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
Explorer ,
Jan 04, 2023 Jan 04, 2023

Copy link to clipboard

Copied

alright, that’s very kind of you for helping me. Thank you.

Votes

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 Expert ,
Jan 04, 2023 Jan 04, 2023

Copy link to clipboard

Copied

will do

Votes

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 Expert ,
Jan 04, 2023 Jan 04, 2023

Copy link to clipboard

Copied

heres' the shuffle function:

 

function shuffle(a) {
for (var i = a.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = a[i];
a[i] = a[j];
a[j] = temp;
}
}

 

////////////////////////////////////

//the way you should use it is to create an array of numbers that you want to shuffle.  in your situation:

 

var framesA=[]

for(var i=0;i<this.totalFrames;i++){

framesA.push(i);

}

 

//then shuffle that array:

 

shuffle(framesA);

// start your code

var index = 0;

 

// call random frame without repeats:

function frameF(){

var f = framesA[index];

index++;

if(index==framesA.length){

index = 0;

shuffle(framesA);

}

return f;

}

 

 

 

Votes

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