Timeline complete event

[Michael_Heydon]

Hi,

Within the HTML file generated by publishing a HTML5 Canvas animation, how can I create a function that's triggered when the main timeline animation is complete? I've found Adobe Edge references like that below:

AdobeEdge.Symbol.bindTimelineAction(compId, "stage", "Default Timeline", "complete", function(sym, e) { console.log('timeline complete'); });

But how do I perform such actions within the HTML file generated by Adobe Animate CC 2017?

[kglad · Accepted solution]

the easiest way is to place a function call on the last frame of the main timeline.

another way would be to use a tick loop to repeatedly compare the currentFrame and totalFrames.

[ClayUUID]

Curiously, the only event the Timeline class supports is "change". You'd think there would be a "complete" and/or "loop" event. Maybe if enough people asked for it they'd add it. Wouldn't take much effort.

[kglad]

i don't think the change event works the way someone coming from a flash/animate background would think.  i believe it's triggered when the timeline is shortened or lengthened, not when the timeline changes from one frame to another.

[ClayUUID]

Timeline durations in Flash/Animate aren't mutable at runtime, so that wouldn't even make sense.

TweenJS v0.6.2 API Documentation : Timeline

Events

change

  

  Defined in  change:186 

Available since 0.5.0

Called whenever the timeline's position changes.

[kglad]

you're correct.

[Michael_Heydon]

There's nothing like the detailed Edge Animate API anymore?

Adobe Edge Animate CC JavaScript API

[ClayUUID]

Of course there still is... in Edge Animate.

Animate CC in Canvas mode uses the CreateJS API.

CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

[Michael_Heydon]

Thanks all, for my purposes the main timelines change event appears suitable.

mainTimeline = stage.children[0].timeline;

mainTimeline.addEventListener("change", onAnimatingMainTimeline);

function onAnimatingMainTimeline () {

     if (mainTimeline.position == mainTimeline.duration) {

          console.log("animation complete");

     }

}