I'm building a content switcher with 3 buttons. Each button corresponds to 5 objects which change in size upon click of the button. When I click the buttons in order it works fine, however if I click on "3" and then click on "2" the animation resets and plays button "1" animation then stops at button "2" animation. How can i keep it from resetting? and smoothly go back to button "2" and "1"
<html><head><style></style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script src="edge_includes/jquery-2.0.3.min.js"></script><script src="edge_includes/edge.4.0.1.min.js"></script><script src="switcher_edge.js"></script><script src="switcher_edgeActions.js"></script><script type="text/javascript" charset="utf-8" src="switcher_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-692306837 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin: 0px; padding: 0px;">
<div id="Stage" class="EDGE-692306837" style="position: relative; -webkit-transform: translateZ(0px); width: 600px; height: 400px; overflow: hidden; background-color: rgb(255, 255, 255);">
<div id="Stage_designer1" class="Stage_designer1_id" style="position: absolute; margin: 0px; left: 32px; top: 37px; width: 101px; height: 57px; right: auto; bottom: auto; cursor: pointer; border: 0px none rgb(0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(192, 192, 192);"></div><div id="Stage_designer2" class="Stage_designer2_id" style="position: absolute; margin: 0px; left: 32px; top: 109px; width: 101px; height: 57px; right: auto; bottom: auto; border: 0px none rgb(0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(192, 192, 192);"></div><div id="Stage_designer3" class="Stage_designer3_id" style="position: absolute; margin: 0px; left: 32px; top: 186px; width: 101px; height: 57px; right: auto; bottom: auto; border: 0px none rgb(0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(192, 192, 192);"></div><div id="Stage_RectangleCopy2" class="Stage_RectangleCopy2_id" style="position: absolute; margin: 0px; left: 0px; top: 0px; width: 25px; height: 72px; right: auto; bottom: auto; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% 0px; -webkit-transform: translate(188px, 246px) translateZ(0px) rotate(0deg) scale(1, 1); border: 0px none rgb(0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform: translate(188px, 246px) translateZ(0px) rotate(0deg) scale(1, 1); background-color: rgb(192, 192, 192);"></div><div id="Stage_RectangleCopy3" class="Stage_RectangleCopy3_id" style="position: absolute; margin: 0px; left: 0px; top: 0px; width: 25px; height: 72px; right: auto; bottom: auto; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% 0px; -webkit-transform: translate(227px, 246px) translateZ(0px) rotate(0deg) scale(1, 1); border: 0px none rgb(0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform: translate(227px, 246px) translateZ(0px) rotate(0deg) scale(1, 1); background-color: rgb(192, 192, 192);"></div><div id="Stage_RectangleCopy4" class="Stage_RectangleCopy4_id" style="position: absolute; margin: 0px; left: 0px; top: 0px; width: 25px; height: 72px; right: auto; bottom: auto; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% 0px; -webkit-transform: translate(270px, 247px) translateZ(0px) rotate(0deg) scale(1, 1); border: 0px none rgb(0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform: translate(270px, 247px) translateZ(0px) rotate(0deg) scale(1, 1); background-color: rgb(192, 192, 192);"></div></div>
</body></html>
--------------------------------------------EDGE CODE BELOW---------------------------------------------
/***********************
* Adobe Edge Animate Composition Actions
*
* Edit this file with caution, being careful to preserve
* function signatures and comments starting with 'Edge' to maintain the
* ability to interact with these actions from within Adobe Edge Animate
*
***********************/
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes
//Edge symbol: 'stage'
(function(symbolName) {
Symbol.bindElementAction(compId, symbolName, "${_designer1}", "click", function(sym, e) {
// insert code for mouse click here
sym.play("designer1")
});
//Edge binding end
Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 1250, function(sym, e) {
// insert code here
sym.stop();
});
//Edge binding end
Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 0, function(sym, e) {
// insert code here
sym.stop();
});
//Edge binding end
Symbol.bindElementAction(compId, symbolName, "${_designer2}", "click", function(sym, e) {
// insert code for mouse click here
sym.play("designer2")
});
//Edge binding end
Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 1750, function(sym, e) {
// insert code here
sym.stop();
});
//Edge binding end
Symbol.bindElementAction(compId, symbolName, "${_designer3}", "click", function(sym, e) {
// insert code for mouse click here
sym.play("designer3")
});
//Edge binding end
Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 2250, function(sym, e) {
// insert code here
sym.stop();
});
//Edge binding end
Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 1000, function(sym, e) {
// insert code here
});
//Edge binding end
})("stage");
//Edge symbol end:'stage'
})(jQuery, AdobeEdge, "EDGE-692306837");
THANKS! once again.
Hello and thanks for helping me out.
please view the link and let me know what you think.
Interactive UI Problem - YouTube
Im an html, css coder but not very good at java yet.
i tried building this using css animation and transition property but i haven't figured it out yet.