3 Replies Latest reply on Jan 12, 2014 2:35 PM by AMULI

    Rollover If statement issue

    Vynsten

      I'm trying to use Edge for a rollover button menu.

      So far I've only been able to get bits and pieces of it right. I think an if statement is what I need, but unsure what would be the if condition.

      I basically want an if statement for when I mouseover one and mouseout of another, and vise versa, for different things to play within nested symbols. The colored areas that show when rolled over is just for content placement.I haven't added the graphics I plan to use but that is the dimensions I will be using for them. I haven't added the button links yet.

       

      Heres the mouseover & mouseout code for the first one:

       

      //compositionReady

      sym.$("demoStage").mouseover(function(){

                if (sym.$("graphicsStage").mouseout = "true")

                {

                sym.getSymbol("demoStage").stop("demoStop");

                }

                else

                {

                sym.getSymbol("demoStage").play("demoPlay");

                sym.getSymbol("graphicsStage").play("graphClose");

                sym.getSymbol("d3Stage").play("d3Close");

                sym.getSymbol("wipStage").play("wipClose");

                }

       

       

      });

      sym.$("demoStage").mouseout(function(){

                if (sym.$("graphicsStage").mouseover = "true")

                {

                sym.getSymbol("demoStage").stop("demoStop")

                }

                else

                {

                sym.getSymbol("demoStage").playReverse();

                sym.getSymbol("graphicsStage").playReverse("graphClose");

                sym.getSymbol("d3Stage").playReverse("d3Close");

                sym.getSymbol("wipStage").playReverse("wipClose");

                }

       

      I know for a fact some of the code is wrong but unsure what to put in its place and how to go about fixing some of the other issues.

        • 1. Re: Rollover If statement issue
          AMULI Level 4

          Hi Vynsten,

           

          You do not provide enough information to answer to your problem. Please describe your hierarchy of symbols, and I will provide you a working snippet.

           

          Gil

          • 2. Re: Rollover If statement issue
            Vynsten Level 1

            Sorry I forgot to post a link for the file incase you wanted to see everything.

             

            https://www.dropbox.com/sh/ruuy2y1qr2915wy/3fSjeymYMS

             

            I have 4 symbols on the stage each has a nested symbol which the animations are on:

            Stage-demoStage-demo

                       -graphicsStage-graphics

                       -d3Stage-d3

                       -wipStage-wip

             

             

            Theres multiple animations and I used stops to seperate them and labeled the begining and ending of the animations. I want to rollover the first one and it slides to the left while the others slide to the right revealing hidden content. If we then go to the second it should then slide to the right and its content revealed and etc. Also, if I go from the second to the first I want the second to slide to the right to reveal the content of the first and same for the others. Its kind of like how the accordion in Muse works except its horizonal and it all starts out collapsed.

            • 3. Re: Rollover If statement issue
              AMULI Level 4

              Hi Vynsten,

               

              You don't need sym.stop(); trigger at 0 ms. Just uncheck the autoplay property for the symbol (recall that the Stage itself is a symbol).

               

              I oversimplified

              • the library : everything happens on Stage ; no more xxxStage symbols.

               

              • each of the four symbols has now a width of 500 and reduces to three elements :

               

              symbol.png

               

              • the timeline : this horizontal accordion implies four successive transitions with three sym.stop(); triggers

               

              timeline.png

               

              You define a mouseover handler on d3.header like that

               

              Capture d’écran 2014-01-12 à 23.16.09.png

               

              We use an object (defined in the compositionReady event hendler) to record the state (true = open ; false = closed) of each of the four entries :

               

              ACCORDION =

              {

                d3: false,

                demo: false,

                graphics: false,

                wip: false

              }

               

              d3.header.mouseover handler :

               

              if (!ACCORDION.d3)

              {

                ACCORDION.d3 = true;

                sym.getParentSymbol().play(0);

              }

              else

              {

                ACCORDION.wip = false;

                ACCORDION.graphics = false;

                ACCORDION.demo = false;

                ACCORDION.d3 = false;

                sym.getParentSymbol().playReverse(249);

              }

               

              d3 is a child symbol of the Stage, so we use sym.getParentSymbol() to go one level up to the main timeline.

               

              demo.header.mouseover handler :

               

              if (!ACCORDION.demo)

              {

                ACCORDION.d3 = true;

                ACCORDION.demo = true;

                sym.getParentSymbol().play(250);

              }

              else

              {

                ACCORDION.wip = false;

                ACCORDION.graphics = false;

                ACCORDION.demo = false;

                sym.getParentSymbol().playReverse(499);

              }

               

              graphics.header.mouseover handler :

               

              if (!ACCORDION.graphics)

              {

                ACCORDION.d3 = true;

                ACCORDION.demo = true;

                ACCORDION.graphics = true;

                sym.getParentSymbol().play(500);

              }

              else

              {

                ACCORDION.wip = false;

                ACCORDION.graphics = false;

                sym.getParentSymbol().playReverse(749);

              }

               

              wip.header.mouseover handler :

               

              if (!ACCORDION.wip)

              {

                ACCORDION.d3 = true;

                ACCORDION.demo = true;

                ACCORDION.graphics = true;

                ACCORDION.wip = true;

                sym.getParentSymbol().play(750);

              }

              else

              {

                ACCORDION.wip = false;

                sym.getParentSymbol().playReverse(999);

              }

               

              You can download the files here : https://app.box.com/s/p7oni1edgx6yz9ygf7lh

               

              Gil

              1 person found this helpful