Hi,
I'm trying to run multiple Animation in a page. I tried the sample code provided here Bootstrapping Animate Compositions « Adobe Edge Animate Team Blog
AdobeEdge.Symbol.bindTimelineAction(compId, "stage", "Default Timeline", "complete", function(sym, e) {
console.log('complete ' + compId);
/*if(compId == wrapperCurrentPage) {
if (compId == "banner01") {
console.log(2);
wrapperCurrentPage = "banner02";
$("#StageA").hide();
$("#StageB").show();
}
}*/
});
This timeline function in triggered well before it is complete.
The complete sample html code.
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>Edge always wanted to be a Wrapper</title>
<script type="text/javascript" charset="utf-8" src="/edge_banner01_edgePreload.js"></script>
<script type="text/javascript" charset="utf-8" src="/Edge_banner03_edgePreload.js"></script>
<script type="text/javascript" charset="utf-8" src="/banner04_edgePreload.js"></script>
<style>
.edgeLoad-banner01 { display:none; visibility: hidden;}
.edgeLoad-banner02 { display:none; visibility: hidden;}
.edgeLoad-banner04 { display:none; visibility: hidden;}
#StageA, #StageB, #StageC {
position:absolute;
left:0;
top:0;
}
#StageB, #StageC {
display:none;
}
</style>
<script>
var wrapperCurrentPage = "banner01";
var loadedComps = {};
AdobeEdge.bootstrapCallback(function(compId) {
//console.log('in');
//console.log('l ' +compId);
var slide = AdobeEdge.getComposition(compId);
//var duration = slide.getDuration();
loadedComps[compId] = slide;
//console.log(compId);
// now it is safe to call into the and bind to things like...
AdobeEdge.Symbol.bindTimelineAction(compId, "stage", "Default Timeline", "complete", function(sym, e) {
console.log('complete ' + compId);
});
});
</script>
</head>
<body style="margin:0;padding:0;">
<div id="StageA" class="banner01"></div>
<div id="StageC" class="banner03"></div>
<div id="StageB" class="banner04">
</div>
</body>
</html>
Can you let me know. what went wrong here.
Thanks in advance.