3 Replies Latest reply on Jun 15, 2013 3:24 PM by AMULI

    One symbol "playing the other off"

    Rick_Wolff Level 1

      This was probably answered in this forum, but I don't know what to search for. I suspect this is a common use of symbols.

      I start with several items on the stage, each an iteration of the same symbol. When I click on one, it performs an opening animation, then pauses. When I click on another, the first symbol un-pauses on its timeline, animating back to original position, while the second one I clicked plays its opening animation till its pause. Each of the symbols can tell the already deployed symbol to "play itself off."

      I'm sure this was done in Flash all the time, and there's a Javascript solution. What is this called, and how do I do it? Any link to an explanation or tutorial would be appreciated.

        • 1. Re: One symbol "playing the other off"
          AMULI Level 4

          Hi Rick,

           

          Say we have one symbol “upDown“, which has three instances named “upDown-1“, “upDown-2“ and “upDown-3“ on stage. The symbol’s timeline is a simple transition between a down state (0 ms) and a up state (500 ms) of a rounded rectangle.

           

          When you click instance “upDown-2“, via the event object e you can get a fully qualified ID of the rounded rectangle which is the target of the click :

           

          e.target.getAttribute("ID") // “Stage_upDown-2_RoundRect“

           

          A path of inclusion : “RoundRect“ inside “upDown-2“ on “Stage“.

           

          Using the method String.split(), you can put each level of this path in an array. The second element (index 1) gives you the name of the clicked instance.

           

          Now, you just need a current variable to store the name of the single instance which is currently up. In the code panel, select Stage to declare it outside of any event handlers :

           

          var current = "upDown-1";

           

          When the animation begins (document.compositionReady event handler), play the first instance with :

           

          sym.getSymbol( current).play(0);

           

          In each of the three click event handlers : you play reverse the current up instance, then you update the current variable, and finally play this instance :

           

          sym.getSymbol(current).playReverse(500);

          current = e.target.getAttribute("ID").split("_")[1];

          sym.getSymbol(current).play(0);

           

          The complete code :

          oneOfThree.gif

           

          You could factorize the three redundant blocs of statements by defining a function in the document.compositionReady event handler. This function receives as a parameter the event object of the click.

          oneOfThree2.gif

           

          Download the two versions here : https://www.box.com/s/q9w2nxf5p5xytt2o82o7

           

          Gil

          1 person found this helpful
          • 2. Re: One symbol "playing the other off"
            Rick_Wolff Level 1

            Thank you for so thorough a response!

            If I get your meaning, the second solution is more like I was aiming at.
            Also, the animation to 'play out' the symbol will likely be different from just the reverse of the 'play in' animation, but I think I can figure out how to customize that.

            I'm going to leave this up for a while before attempting it, in the hopes that someone might come along with an even simpler solution, or maybe a simpler way of explaining this, as often happens in forums.

            • 3. Re: One symbol "playing the other off"
              AMULI Level 4

              Also, the animation to 'play out' the symbol will likely be different from just the reverse of the 'play in' animation, but I think I can figure out how to customize that.

               

              Instead of playReverse(500), you play(500), your "play out" animation lying between 500 ms and 1000 ms for example.

              maybe a simpler way of explaining this, as often happens in forums.

               

               

              Just give feedback about what is not "simple" enough for your mind. May be I can clarify .

               

              And don't be afraid of the screen captures in full code view. If you open the examples and select the  event handlers in the left column of the code panel, you'll see that the code is fairly simple. And I do think that you can't do without using a variable storing the current instance.

               

              Gil

              1 person found this helpful