Hi,
I have a multi-composition project which I am trying to use the Bootstrapping method with.
I have the wrapper page (index.html) set up using a variation of the version laid out in the API which I got from resdesign, which I have then tweaked a little more.
What I need to happen is that when the navigation button within a given composition is clicked, the next composition is loaded - I can't use buttons coded into the html as I do not want them available all the time, only when certain conditions have been met/achieved.
So, I need the html to be able to listen for and act upon a variable set within the composition by the clicking of the button or on a timeline trigger,
or by having the click of the internal button set the variable within the html
My bootstrap setup;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>index</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="RUP_Cover_edgePreload.js"></script>
<script type="text/javascript" charset="utf-8" src="RUP_Pg01_edgePreload.js"></script>
<script type="text/javascript" charset="utf-8" src="RUP_Pg02_edgePreload.js"></script>
<style>
.edgeLoad-RUP_Cover { visibility:hidden; }
.edgeLoad-RUP_Pg01 { visibility:hidden; }
.edgeLoad-RUP_Pg02 { visibility:hidden; }
#Stage01, #Stage02 {
visibility:hidden
}
</style>
<script src="phonegap.js"></script>
<script>
var myPage =['RUP_Cover','RUP_Pg01','RUP_Pg02'];
var i = 0;
AdobeEdge.bootstrapCallback(function(compId) {
comp = AdobeEdge.getComposition(compId).getStage();
// now it is safe to call into the and bind to things like...
AdobeEdge.Symbol.bindTimelineAction(compId, "stage", "Default Timeline", "complete", function(sym, e) {
comp.$("FWD").click(function(){
if (i==0){
$("#Stage00").show();
$("#Stage01").hide();
$("#Stage02").hide();
}
if (i==1){
$("#Stage00").hide();
$("#Stage01").show();
$("#Stage02").hide();
}
if (i==2){
$("#Stage00").hide();
$("#Stage01").hide();
$("#Stage02").show();
}
AdobeEdge.getComposition(myPage[i]).getStage().play(0);
i++;
}
comp.$("PREV").click(function(){
if (i==0){
$("#Stage00").show();
$("#Stage01").hide();
$("#Stage02").hide();
}
if (i==1){
$("#Stage00").hide();
$("#Stage01").show();
$("#Stage02").hide();
}
if (i==2){
$("#Stage00").hide();
$("#Stage01").hide();
$("#Stage02").show();
}
if (i<0){
i=0;
}
AdobeEdge.getComposition(myPage[i]).getStage().play(0);
i--;
}
</script>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
<div id="Stage00" class="RUP_Cover"></div>
<div id="Stage01" class="RUP_Pg01"></div>
<div id="Stage02" class="RUP_Pg02"></div>
</body>
</html>
Thanks