4 Replies Latest reply on Aug 19, 2013 12:34 PM by elainecc

    Replace or hide element when clicking on another?

    Ruffus999

      I admit, I know nothing when it comes to jquery or coding.  Hence why Adobe's Edge Animate is so helpful to me.

       

      So the problem I'm having is:

       

      I'm creating a calendar.  When one date is clicked there is an animation and then a message is displayed.  But if I click on a different date, the previous message is not being removed, hidden, changed.  I'm sure this is something that is most likely basic but as I said, I know nothing about coding.

       

      I have Day 1, Day 2, Day 3, Day 4.

       

      When someone clicks on Day 1, the animation of a door opening plays, then after the door opens, a window pops open at the top to reveal a message.

       

      The goal is,

       

      When someone clicks on Day 2 or Day 3, an animation of a new door opens and the previous message is replaced with the new message.

       

      I have the animations working fine.  It is just the "replacing" of the message that I'm having trouble with.  It just stays there and the new message is hidden underneath.

       

      Any help would be greatly appreciated.

        • 1. Re: Replace or hide element when clicking on another?
          Ruffus999 Level 1

          Here is the process I've done to get where I am.

           

          Date 1 "symbol"  is on screen.  Someone clicks on it.

           

          sym.getComposition().getStage().getSymbol("Date1").play(); // Gets the stage from the composition level, then gets the symbol and plays the timeline

           

          The Date 1 animation plays showing a hinge falling off and at a certain point on "date 1's" timeline there is an action that gets triggered to open another symbol that displays the door opening.

           

          sym.getComposition().getStage().getSymbol("day1").play(); // Gets the stage from the composition level, then gets the symbol and plays the timeline

           

          On day1's timeline, there is another action triggered after the animation of the door opening that brings up the message which I have placed on the main stage.  I've done this because, when I try to place the message within another day1's timeline, it sits behind other elements on the stage and doesn't show up in front to be read.

           

          sym.getComposition().getStage().getSymbol("Stage").play("day1play"); // Gets the stage from the composition level, then gets the symbol and plays the timeline

           

          Now, if Date 2 is clicked, the message from Date 1 is still being shown.

           

          Maybe I've made this animation too complicated, and an easier way might work but I'm still in self teaching mode.


          • 2. Re: Replace or hide element when clicking on another?
            robboerman Level 4

            if your a beginner at coding, the main thing is to keep it as simple as possible than( so you will understand the code)

            best way to do that now is to, when a other date is clicked, the other dates have to stop and hide

            so on the click action make the .play action you got now.

            but also add stop and/or hide for the other dates you dont want to be shown on that action.

            1 person found this helpful
            • 3. Re: Replace or hide element when clicking on another?
              tahneeg Level 1

              Do you have a label set for "day1play" in your timeline?
              I've been using Edge for a ton of interactive animations and always set it up like so:

               

              "intro"

               

              "animation1"

               

              "animation2"

               

              "animation3"

               

              on Intro I'll have a button that plays "animation1", and at the end of animation1 there will be a stop(); in the timeline. Then, at this stopping point, I'll have 2 more buttons, one that goes and plays "animation2" and the other that plays "animation3", all of which are just at different parts of the timeline. So it's not so much about turning off the layers as it is turning pages in a book to get to the chapter you selected.

              Of course, if animation1's layer is on top of animation2, I'll need to turn it off. In the upper-left is a visibility option. Select your layer(s) you want on/off and change them from "Always On" to on or off.

               

              Typically I'll have everything set to OFF on the very first frame... Everything except for my intro illustration/buttons. Then at "animation1" I have that animation's layers/symbols turn on and play.

               

              Hope this helps! Sometimes it's just a matter of not properly labeling things in the timeline. Go to where day1play starts in the timeline, and hit CTRL+L to make a label called day1play if you haven't already

              • 4. Re: Replace or hide element when clicking on another?
                elainecc Adobe Employee

                Hi, Ruffus-

                 

                I also will do something called saving state, which I explain in this blog post:

                 

                https://blogs.adobe.com/edge/2012/07/18/tutorial-leveraging-independent-symbol-timelines/

                 

                You can search for the phrase "state management" for a deeper explanation.

                 

                Hope that helps,

                 

                -Elaine

                1 person found this helpful