5 Replies Latest reply on Aug 15, 2013 6:35 AM by resdesign

    Using Jquery to show and hide symbols in Edge Animate

    davieduck89

      Hoping somebody can help me with this.

       

      I have a project in Edge with a couple of screens as symbols on layers in the main timeline. I've been trying to write a function in the global scope that I can call from all the buttons, to show and hide screens.

       

      So far I have a function that looks like this:

       

      function mainScreenOut (){

          

           sym.$("screen1").hide();

       

      }

       

      But this and many variations don't seem to work.

       

      If anybody could help me understand how to use these jquery commands properly, it would be much appreciated.

        • 1. Re: Using Jquery to show and hide symbols in Edge Animate
          resdesign Adobe Community Professional & MVP

          Where are your buttons in relation to the screens?

          Are your screens on the main timeline? If so, you can also use display on/off. The default is always on.

          sym.$('screen').hide(); is correct syntax but it depends where and how you use it.

          • 2. Re: Using Jquery to show and hide symbols in Edge Animate
            davieduck89 Level 1

            The buttons are symbols, within a symbol. And the screens are on the main timeline. But I think I've solved this now. This is what I did:

             

            Because I couldn't figure out a way to show/hide the screen symbols themselves, I put them into their own div tags and targeted those instead, from the buttons.

             

            So, I ended up with each of my screens inside their own  encompassing div tags, and my code on the button symbol (nested in a symbol that is on the main timeline) ended up looking like this:

             

             


            if (mainPageActive == false){




            sym.getComposition().getStage().$("mainscreen1").fadeTo(1000,0.2);


            sym.getComposition().getStage().$("mainscreen1").css("pointer-events","none");


            sym.getComposition().getStage().$("mainscreen2").css("z-index", +1);


             

            sym.getComposition().getStage().getSymbol('screen2').play("on");


            toolTipActive = false;

            }

             

            Where "mainscreen1" is the div tag sitting on the main timeline, that I had to wrap around the screen symbol.

             

            I suppose the only question that remains for me is:

             

            If what I've had to do here is true for everything, does this mean there's no way to use jquery commands to target SYMBOLS to do the same thing? Can I only target elements within a symbol, and not the symbol itself?

            • 3. Re: Using Jquery to show and hide symbols in Edge Animate
              resdesign Adobe Community Professional & MVP

              Of course you can. It is just that you did not do it right because you did not address the target properly.

               

              If your buttons are inside a symbol and you are targetting another symbol then you need to do it this way:

               

              sym.getSymbol('symbolContainingtheButtons').$('yourbutton').click(function(){

                 // go back to the main timeline with sym.getComposition().getStage()

                   sym.getComposition().getStage().$('yourscreen').hide();

              });

               

              Beware, this editor adds spaces in publishing.

              • 4. Re: Using Jquery to show and hide symbols in Edge Animate
                davieduck89 Level 1

                Ah! Thank you very much. You've been very helpful