Animate HTML5 random animation does not stop

[oblong1]

Hi People of the Javascript Mindset,

I am trying to make an html5 banner animation that plays random movie symbols. These symbols are on frames 2 to 5 of the timeline (javascript 1 to 4) with a this.stop(); on each frame. The first frame is my “start” scene where no animations plays.

On frames 2 to 5 these movie symbols are travelling along the x-axis. If you click a movie symbol the animation will change visibility to show a variation of that animation. For example,  the first animation of a bird gliding along – when the bird is clicked becomes the 2nd animation and the bird will flap its wings once. When the 2nd animation finishes (and goes away) the scene returns to its start so another animation can be randomly generated.

My problem is the animations often do not stop after they have finished  – the bird will flap its wings again when it should not. Sometimes the animation will not return to the start of the scene. Sometimes the animation does not complete playing. It is very confusing. I test by clicking the animations at various times and I get different results.

Also my animate in x-axis often plays the animation before the user even sees that frame!

The javascript on Frame1 in an actions layer is;

this.stop();

//setting the hidden movie symbols visibility

this.BlueSquareDown_mc.visible = true;

this.HandMove_mc.DarkCircle_mc.visible = true;

//generating random number. Not random enough. Repeats itself.

var LLAnimSort = Math.floor((Math.random() * 4) + 1);

// send array result to frames in timeline to activate various animations

if (LLAnimSort == 1) {

                this.gotoAndPlay(1);

} else if (LLAnimSort == 2) {

              this.gotoAndPlay(2);               

} else if (LLAnimSort == 3) {            

                this.gotoAndPlay(3);

} else {

                this.gotoAndPlay(4);

}

//////////11111/////////////////               

this.RedSquareUp_mc.visible = false;

this.BlueSquareDown_mc.addEventListener("click", ShowRed.bind(this));

function ShowRed()

{

                this.RedSquareUp_mc.visible = true;

                this.BlueSquareDown_mc.visible = false;

                this.RedSquareUp_mc.gotoAndPlay(1);

}

Also, at the final frame of the animations there is

this.stop();

exportRoot.gotoAndPlay(0);

I feel like I am missing some obvious point in how it is structured. I have been going in circles for days and would appreciate any help.

I have attached the file.

[oblong1]

I thought I put this in the adobe animate support. Also there was a missing section of the code in my post. 

//////////11111/////////////////

this.RedSquareUp_mc.visible = false;

this.addEventListener("tick", MoveRight.bind(this));

function MoveRight()
{
this.RedSquareUp_mc.x+=5;
this.BlueSquareDown_mc.x+=5;

}

this.BlueSquareDown_mc.addEventListener("click", ShowRed.bind(this));

function ShowRed()
{
this.RedSquareUp_mc.visible = true;
this.BlueSquareDown_mc.visible = false;
this.RedSquareUp_mc.gotoAndPlay(2);

}

///////////222222////////////////

[LinSims]

Let's move you, then. 😄

[oblong1]

Thank you. I tried to attach a file and it would not accept a .fla file. Seems strange. I will try again.