3 Replies Latest reply on Sep 12, 2014 1:52 PM by multimediadude

    Intricate Switcher in Edge

    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"

        • 1. Re: Intricate Switcher in Edge
          Devendra Kumar Adobe Employee

          Hi,

           

          Please provide more details about this issue or any test file.

           

          Regards,

           

          Devendra

          • 2. Re: Intricate Switcher in Edge
            multimediadude Level 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.

            ,

            • 3. Re: Intricate Switcher in Edge
              multimediadude Level 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.