2 Replies Latest reply on Mar 29, 2013 12:46 PM by John Hall

    Targeting Symbols

    John Hall Level 4

      I'm trying to show captions when the user clicks on a button (captionButton) symbol. All permutations below work for showing the captions but none of them work for showing the button ever again, though it does hide the captions. Which, if any, is the correct approach that I should spend more time on?

       

          // compositionReady script

       

           var captionBar = sym.getSymbol("captionBar");

           var captionButton = sym.getSymbol("captionButton")

           sym.$("captionButton").css('cursor', 'pointer');

         

          // captions always hide but the button never appears again

          var hideCaptions = function(){

             //                    TweenMax.to(captionBar, .5, {alpha:0});

             //                    TweenMax.to(captionButton, .5, {alpha:1});

                TweenMax.to(sym.$("captionBar"), .5, {alpha:0});

                TweenMax.to(sym.$("captionButton"), .5, {alpha:1});

             //                    TweenMax.to(sym.getSymbol("captionBar"), .5, {alpha:0});

             //                    TweenMax.to(sym.getSymbol("captionButton"), .5, {alpha:1});

             //                    TweenMax.to(sym.getComposition().getStage().getSymbol("captionBar"), .5 , {alpha:0});

             //                    TweenMax.to(sym.getComposition().getStage().getSymbol("captionButton"), .5, {alpha:1});

                }

       

        // these seem to work fine regardless of which I use

                var showCaptions = function(){

             //                    TweenMax.to(captionBar, .5, {alpha:1});

             //                    TweenMax.to(captionButton, .5, {alpha:0});

             //                    TweenMax.to(sym.$("captionBar"), .5, {alpha:1});

             //                    TweenMax.to(sym.$("captionButton"), .5, {alpha:0});

             //                    TweenMax.to(sym.getSymbol("captionBar"), .5, {alpha:1});

             //                    TweenMax.to(sym.getSymbol("captionButton"), .5, {alpha:0});

             TweenMax.to(sym.getComposition().getStage().getSymbol("captionBar"),.5, {alpha:1});

             TweenMax.to(sym.getComposition().getStage().getSymbol("captionButton"), .5, {alpha:0});

                }

       

                 captionBar.getSymbolElement().bind('click',hideCaptions);

         captionButton.getSymbolElement().bind('click', showCaptions);

        • 1. Re: Targeting Symbols
          John Hall Level 4

          Ah, I think I'm discovering something, the long arduous way.

           

          The commented out script below does not successfully toggle the visibility of box.

           

          //if (sym.$("box").css('opacity') == 1){

          //          sym.$("box").fadeOut();

          //}else{

          //          sym.$("box").fadeIn();

          //}

           

           

          This does.

           

          if (sym.$("box").css('opacity') == 1){

                    TweenMax.to(sym.$("box"), .5, {alpha:0});

          }else{

                    TweenMax.to(sym.$("box"), .5, {alpha:1});

          }

           

          I'm beginning to think it's because JQuery sets display:none at the end of a fadeOut whereas TweenMax solely affects the alpha of the object. Can anyone confirm this to be true? If so, what should I do to get the JQuery implementation to work?

          • 2. Re: Targeting Symbols
            John Hall Level 4

            Answered my own question by finding fadeTo instead of fadeOut and fadeIn. Sorry for the traffic.