Adobe Edge Animate Events

A couple essential events for telling when your composition has loaded and when it has finished playing the timeline.

Loaded Event

[pastacode lang=”javascript” message=”” highlight=”” provider=”manual”]

AdobeEdge.bootstrapCallback(function (compId) {
    console.log('composition loaded: ' + compId);    
});

[/pastacode]

According to the documentation, this callback function will tell you when a composition has loaded and is ready to play. The event fires just before the timeline starts playing.

Timeline complete

If you want to know when the timeline is complete and all animations are finished you can bind a timeline action to the composition. You just need to know which composition ID to bind to. So something like this ought to work:

[pastacode lang=”javascript” message=”” highlight=”” provider=”manual”]

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

[/pastacode]

You put them together like this:

[pastacode lang=”javascript” message=”” highlight=”” provider=”manual”]

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

[/pastacode]

And here’s the embedded adobe code on a page:

[pastacode lang=”markup” message=”” highlight=”” provider=”manual”]

<!--Adobe Edge Runtime-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script type="text/javascript" charset="utf-8" src="edge/specialized/edge_includes/edge.5.0.1.min.js"></script>
<style>
    .edgeLoad-EDGE-150750921 { visibility:hidden; }
</style>
<script>
   AdobeEdge.loadComposition('edge/specialized/specialized', 'EDGE-150750921', {
        scaleToFit: "none",
        centerStage: "horizontal",
        minW: "0",
        maxW: "undefined",
        width: "550px",
        height: "309px"
    }, {dom: [ ]}, {dom: [ ]});

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


</script>
<!--Adobe Edge Runtime End-->

[/pastacode]

Easy.