0 Replies Latest reply on Sep 14, 2014 1:36 PM by multimediadude

    Monthly report switcher. Help needed.

    multimediadude

      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"

       

      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.

       

      mario salazar

       

       

      mario salazar (to Devendar_kumar) 2 days ago

       

       

      <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.

       

      Reply