What I have are 3 Edge compositions which I want to be able to move forward and backward through, using buttons within the comps themselves.
I have used the basic bootstrap setup from the API and then added a variation of a control script I got from resdesign.
Using the bootstrapCallback I have the buttons affecting a variable which I am trying to use to control which comp displays.
My code is as follows:
<!DOCTYPE html>
<html style="height:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1"/>
<title>index</title>
<script src="cordova.js"></script>
<script src="phonegap.js"></script>
<!--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>
<!--Adobe Edge Runtime End-->
<style>
.edgeLoad-RUP_Cover { visibility: hidden; }
.edgeLoad-RUP_Pg01 { visibility: hidden; }
.edgeLoad-RUP_Pg02 { visibility: hidden; }
#Stage00, #Stage01, #Stage02 {
overflow: hidden;
}
#Stage01, #Stage02 {
visibility: hidden;
}
</style>
<script>
var myComp =['null','RUP_Cover','RUP_Pg01','RUP_Pg02'];
var i = 1;
alert("i =" + [i]); // returns "i = 1" (correct)
AdobeEdge.bootstrapCallback(function(compId) {
var comp = AdobeEdge.getComposition(compId);
comp.getStage().$("FWD").click(function() {
i++;
alert("FWD Clicked. i=" + [i]); // returns "FWD Clicked. i=5" on first click, then increases by one with each subsequent click!
if (i==1){
$("#Stage00").show();
$("#Stage01").hide();
$("#Stage02").hide();
}
if (i==2){
$("#Stage00").hide();
$("#Stage01").show();
$("#Stage02").hide();
}
if (i==3){
$("#Stage00").hide();
$("#Stage01").hide();
$("#Stage02").show();
}
AdobeEdge.getComposition(myComp[i]).getStage().play(0);
});
comp.getStage().$("PREV").click(function() {
i--;
if (i<1){
i=1
}
if (i==1){
$("#Stage00").show();
$("#Stage01").hide();
$("#Stage02").hide();
}
if (i==2){
$("#Stage00").hide();
$("#Stage01").show();
$("#Stage02").hide();
}
if (i==3){
$("#Stage00").hide();
$("#Stage01").hide();
$("#Stage02").show();
}
AdobeEdge.getComposition(myComp[i]).getStage().play(0);
});
});
</script>
</head>
<body style="margin:0 auto; padding:0;", bgcolor="#000000">
<div id="Stage00" class="RUP_Cover"></div>
<div id="Stage01" class="RUP_Pg01"></div>
<div id="Stage02" class="RUP_Pg02"></div>
</body>
</html>
As you can see, instead of increasing i to 2, as it should, the click jumps i - initially - to 5 and the increases it by 1 as it should.
I have tried specifying i=2 and this works...but it does not trigger the next comp to play.