Skip to main content
robertop77446456
robertop77446456
Participant
June 22, 2017
Answered

HTML5 Canvas - Play Random movieclips

  • June 22, 2017
  • 1 reply
  • 1973 views

Hello I need Help ASAP!

So I have to make a banner with multiple movieclips inside and they should play randomly.

So far i have on satge 3 layers. •Actions •btns •mainMC
Inside the mainMC (Movieclip) I have 12 Movieclips (150 frames duration each) with a this.stop(); in the first and last keyframes.
Now I need to make those 12 movieclips to start playing randomly. so that when one finishes playing an other one starts and keep that behavior looping forever.

I use to have this same banner in Edge Animate and it worked like a charm. but now I can not make it work with animate cc. anyone with a clue on what code should I use to accomplish this?

This topic has been closed for replies.
Correct answer ClayUUID

Oh, they're all visible simultaneously. Rather busy looking. Oh well.

So this should work, assuming all your clips are named mc1, mc2, mc3, etc. First frame of each clip should have this.stop(); and last frame should have this.parent.playNextClip();. Put this code at least a frame after your clips have first appeared on the stage:

this.stop();

this.numClips = 12;

this.clips = [];

this.curClip = -1;

// play next clip

this.playNextClip = function() {

    this.curClip++;

    if (this.curClip === this.numClips - 1) {

        this.curClip = 0;

        this.shuffle(this.clips);

    }

    // prevent same clip playing twice in a row

    var nextClip = this.clips[this.curClip];

    if (nextClip === this.lastClip) {

        this.playNextClip();

    }

    else {

        this.lastClip = nextClip;

        nextClip.play();

    }

}

// Fisher-Yates Shuffle

this.shuffle = function(array) {

    var m = array.length;

    var i, t;

    while (m) {

        i = Math.floor(Math.random() * m--);

        t = array;

        array = array;

        array = t;

    }

    return array;

}

// initialize

var i;

for (i = 1; i <= this.numClips; i++) {

    this.clips.push(this["mc" + i]);

}

this.shuffle(this.clips);

this.playNextClip();

1 reply

C
ClayUUID
Legend
June 22, 2017

With 12 movieclips, I'm curious why randomness is a requirement vs just playing them all in a loop. Is this seriously something people are going to be sitting and staring at?

robertop77446456
robertop77446456Author
Participant
June 22, 2017

So here is an example, this is what I've previously made in Edge Animate.

EXAMPLE

So yes randomness is a requirement!

C
ClayUUIDCorrect answer
Legend
June 22, 2017

Oh, they're all visible simultaneously. Rather busy looking. Oh well.

So this should work, assuming all your clips are named mc1, mc2, mc3, etc. First frame of each clip should have this.stop(); and last frame should have this.parent.playNextClip();. Put this code at least a frame after your clips have first appeared on the stage:

this.stop();

this.numClips = 12;

this.clips = [];

this.curClip = -1;

// play next clip

this.playNextClip = function() {

    this.curClip++;

    if (this.curClip === this.numClips - 1) {

        this.curClip = 0;

        this.shuffle(this.clips);

    }

    // prevent same clip playing twice in a row

    var nextClip = this.clips[this.curClip];

    if (nextClip === this.lastClip) {

        this.playNextClip();

    }

    else {

        this.lastClip = nextClip;

        nextClip.play();

    }

}

// Fisher-Yates Shuffle

this.shuffle = function(array) {

    var m = array.length;

    var i, t;

    while (m) {

        i = Math.floor(Math.random() * m--);

        t = array;

        array = array;

        array = t;

    }

    return array;

}

// initialize

var i;

for (i = 1; i <= this.numClips; i++) {

    this.clips.push(this["mc" + i]);

}

this.shuffle(this.clips);

this.playNextClip();

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices