Button on first frame doesn't work with Math.random()

[issasha]

Hi everyone,

I've run into a weird problem in Adobe Animate with the randomizer, and I can't find the solution for it through google. I'm creating a product slideshow banner with 5 frames total. It will have previous and next buttons, and each frame will have a ClickToGoToWebPage button leading to the product's page.

The slide and buttons work great, with and without the randomizer, but I have noticed that when the page initially loads, the first frame's button to the webpage does nothing, no matter how many times I click on it. If I scroll to the next slide with the previous/next buttons, then all the buttons are fine.

It's always the button on the first slide that doesn't seem to work with the randomizer. I know it's the randomizer, because without it, the button on the first frame works as it should.

Does anyone have any tips on what I should check?

Here's my code from the first frame, and I've attached a crude screenshot, if it helps!

var nextFrame = 0
var totalFrames = 4;

this.gotoAndStop(1+Math.random()*5);
this.stop();


this.next.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));

function fl_ClickToGoToAndStopAtFrame()
{
	nextFrame++;
	
	if(nextFrame > totalFrames) {
		nextFrame = 0;
		this.gotoAndStop(nextFrame);
	}
	else {
		this.gotoAndStop(nextFrame);
	}
}


this.previous.addEventListener("click", fl_ClickToGoToAndStopAtFrame_3.bind(this));

function fl_ClickToGoToAndStopAtFrame_3()
{
	nextFrame--;
	
	if(nextFrame < 0) {
		nextFrame = totalFrames;
		this.gotoAndStop(nextFrame);
	}
	else {
		this.gotoAndStop(nextFrame);
	}
}


/* Click to Go to Web Page, corrected with IF statement */

this.product1_cta.addEventListener("click", fl_ClickToGoToWebPage);

function fl_ClickToGoToWebPage() {
	window.open("https://www.google.com", "_blank");
	
	if(!this.started) {
		this.product1_cta.addEventListener("click", fl_ClickToGoToWebPage);
		this.started = true;
	}
}

[ClayUUID · Accepted solution]

It's possible your web page click listener isn't working because you're trying to add it before the clip actually exists. Try adding a one-frame delay.

Also, this code is needlessly redundant:

nextFrame++;
if(nextFrame > totalFrames) {
	nextFrame = 0;
	this.gotoAndStop(nextFrame);
}
else {
	this.gotoAndStop(nextFrame);
}

Should be:

nextFrame++;
if (nextFrame > totalFrames) {
	nextFrame = 0;
}
this.gotoAndStop(nextFrame);

Or even just:

nextFrame = nextFrame < totalFrames ? nextFrame + 1 : 0;
this.gotoAndStop(nextFrame);

[issasha]

Thank you! I got the nextframe++ if/else code from a youtube tutorial, because I'm still learning. Thank you for cleaning it up.

I extended my timeline by one frame and shifted the math.random() and next/previous button event listeners to frame 0 instead. The event listeners for the web page buttons are on their own frame (1-5) with their individual products.

However, I think the issue is with this.gotoAndStop vs this.gotoAndPlay when being used with the Math.random(). I tried out Stop at Frame 0 and it gave me the initial issue again with the button not working on launch, but it works when I try it with Play! The only issue I have when using Play is that it very briefly (for less than a second) loads a frame from 1 to 5 and then stops at another random one.

Functionally it works on load now, but it's going to an extra frame on launch rather than going straight to the random number.

Here's how I currently have it on Frame 0:

var nextFrame = 1;
var totalFrames = 5;
var randomFrame = Math.random()*5;

this.next.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));

function fl_ClickToGoToAndStopAtFrame()
{
	nextFrame++;
	if (nextFrame > totalFrames) {
	nextFrame = 1;
}
	this.gotoAndStop(nextFrame);
}


this.previous.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));

function fl_ClickToGoToAndStopAtFrame()
{
	nextFrame--;
	
	if(nextFrame < 1) {
	nextFrame = totalFrames;
}
	this.gotoAndStop(nextFrame);
}

this.gotoAndPlay(randomFrame);

Here's how I have it on Frame 1 (with the first product):

/* Product 1 Link */

this.stop();

this.product1_cta.addEventListener("click", fl_ClickToGoToWebPage);

function fl_ClickToGoToWebPage() {
	window.open("https://www.google.com", "_blank");
	
	if(!this.started) {
		this.product1_cta.addEventListener("click", fl_ClickToGoToWebPage);
		this.started = true;
	}
}

Do you think it would be helpful to preload randomFrame in someway before it executes everything? It seems to be calculating it live, which is why it looks like jumps a frame before landing on a random one.

[issasha]

I think I figured it out! This solved the extra frame blip on launch, and also the button not working for the first frame. I have this on Frame 0 before everything else:

var randomFrame = Math.random()*5;
var lastPicked = randomFrame - 1;

this.gotoAndPlay(randomFrame);
{
	if (randomFrame == currentFrame){
		randomFrame = lastPicked;
	}
}

Not sure if that's the best way to write it, but let me know. Thank you!