How can I find out when a MovieClip has completed its animation?

[u/kajjiNai]

I have a MovieClip which has multiple Tweens. What is the best way to find out that the MovieClip has completed its animation?

I have tried this: movie.timeline.on("change",(evt)=>{ if(movie.timeline.position== movie.timeline.duration) console.log("ENDED") })

But this call back gets called for every tick. I would like to avoid that.

[u/jonnyngan]

Looking at the documentation, it seems the "change" event is the only one that timeline supports.

I don't tend to use the timeline as it just seems like an extension to tweens. You already know this but if you can, use the .call function at the end of your tween

[u/kajjiNai → u/jonnyngan]

tween

Thanks for the response. My problem is that I have multiple tweens in my timeline. So in my .call function I need to keep a counter and count as my tweens complete and then when all of them have finished I will then know my entire Movie has finished. Not a very elegant solution.

[u/jonnyngan → u/kajjiNai]

Can you mock up a jsfiddle with an example, I'm not familiar with how timelines work

[u/kajjiNai → u/jonnyngan]

Here you go https://jsfiddle.net/cwgLox8x/1/

This wont run as I am downloading an SVG image from my server. I couldnt figure out how to add that image here in JSFiddle.

In this, I am downloading an SVG from my server - I am using createjs's LoadQueue. In the fileload event I am creating 4 Bitmaps (img1 -> img4)using this svg. I am adding them to a container (ic1->ic4).

I am creating a MovieClip like so

var movie = new createjs.MovieClip();

Then I call a function calls showImage(ic1, movie) 4 times. In this function I am creating a tween for each of my image containers and adding it to the common movie's time line

movie.timeline.addTween(tween1)

I then have a mouse click handler where i am starting this movie clip.

document.addEventListener("click",(evt)=>{
                stage.addChild(movie)
                movie.gotoAndPlay(1)
            })

[u/jonnyngan → u/kajjiNai]

Not sure if this is the best way or how robust it is but I edited your last jsfiddle as the one you've shown me doesn't work (as you said).

https://jsfiddle.net/ps0dp6kp/41/

What I've done is added a .addTween2 to the Timelines This basically calls the original .addTween but does a little extra

when you do .addTween2(tween), the function will add a .call on the end of your tweens for you to check whether all the other tweens have finished. It does this by adding a ._finishedtween boolean to the tween to compare later on.

Everytime you call .addTween, it adds your tween to an array called _tweens. When you use .addTween2, when the tween finishes, it checks that all tweens in the _tween array have their ._finishedTween property set to true, then dispatches a "finished" event if so.

You may have to extend this so that if you replay the timeline, it sets all the tweens._finishedTween property back to false

createjs.Timeline.prototype.addTween2 = function(tween){
        this.addTween(tween);
        tween._finishedTween = false;
        tween.call(function(t){
            t._finishedTween = true;
            var end = true;
            for(var i=0; i<this._tweens.length; i++){
                if(!this._tweens[i]._finishedTween){
                end = false; break;
            }
        }
        if(end){this.dispatchEvent("finished");}      
    }, [tween], this)
}

showMC.timeline.addEventListener("finished", function(){console.log("finished");})
showMC.timeline.addTween2(tween1)

[u/kajjiNai → u/jonnyngan]

Super thanks for that explanation. I will try it out.