11 Replies Latest reply on Feb 12, 2013 11:03 AM by elainecc

    Play a label in a symbol then delete that symbol

    pmfr01 Level 2

      Hi thee.

      I'm having trouble in accomplishing the above sequence.

      I have some symbols (in an array) with fade-in and fade-out animations. These symbols don't exist in the stage - they come into place, on stage, by the clicking of some buttons, through sym.createChildSymbol() and the exit through deleteSymbol(). The problem is that it's suppose to play the fade-out animation before the deleteSymbol() - deletes it before it can do that. I tried a setTimeout, but it didn't work. Any suggestions?

      The code:

      // Setting variables/arrays
      var currentSection = null; // Index in array_sections: 0=a, 1=b, 2=c, 3=d 4=a
      var requestSection = null; // Index in array_sections: 0=a, 1=b, 2=c, 3=d 4=a
      var array_sections = ["nosContigo", "nosSomos", "nosAoVivo", "nosTemos", "nosVivemos"];
      var array_sectionsBtns = ["section_Btn_nosContigo", "section_Btn_nosSomos", "section_Btn_nosAoVivo",
                                "section_Btn_nosTemos", "section_Btn_nosVivemos"];
      var dynamicSymbol;
      sym.$('.section_Btn').css({"z-index":1});
      
      // Called by timeline.complete/location event inside each section_Btn
      sym.playRequest_section = function(){
        dynamicSymbol = sym.createChildSymbol(array_sections[requestSection], "Stage"); // array_sections symbols are created
        dynamicSymbol.getSymbolElement().css({"left":0, "top":0}); // z-index of array_sections symbols are set
        dynamicSymbol.play('section_lead_in'); // Requested section leads in
        currentSection = requestSection;
      }
      
      // Called on button click
      sym.btnClick_section = function(request) {
        requestSection = request;
        if(currentSection != null){
          dynamicSymbol.play('section_lead_out'); // Current section leads out
          dynamicSymbol.deleteSymbol(); // Symbols are deleted (array_sections)
      //  setTimeout(function(){ dynamicSymbol.deleteSymbol(); }, 1000); // Symbols are deleted (array_sections) - delayed
          sym.getSymbol(array_sectionsBtns[currentSection]).play('section_deactivate'); // Current button deactivates
        }
        else{
          sym.playRequest_section();
        }
      }
      

      My Edge files.

       

      pmfr

        • 1. Re: Play a label in a symbol then delete that symbol
          joel_pau Level 5

          Hi,

           

          Edge Animate provides you a panel to do that: beforeDeletion.

          This code panel is available for each symbol. You can use it as creationComplete.

          beforeDeletion.jpg

          • 2. Re: Play a label in a symbol then delete that symbol
            pmfr01 Level 2

            Hi Joel.

            The entire code runs as one. How do I change that? What lines of code leave the compositionReady and go where?

             

            pmfr

            • 3. Re: Play a label in a symbol then delete that symbol
              joel_pau Level 5

              Your compositionReady doesn't change.

              I added beforeDeletion panels to your "Nos..." symbols.

              I wrote alerts. You have to replace them by your animation code as: sym.play('oneLabel");

               

              ==> attached file: https://www.box.com/s/ecugerzjsx3vwqptdt4t

               

              Well, you can use Edge symbols like this:

              • creationComplete: entrance animation.
              • beforeDeletion: exit animation.
              • 4. Re: Play a label in a symbol then delete that symbol
                pmfr01 Level 2

                I must be missing something here... I did has you said:

                 

                - creationComplete » sym.play('intro label');

                - beforeDeletion » sym.play('exit label');

                 

                ... still the same result.

                I even tried comenting the dynamicSymbol.play('intro/exit animations'); out...

                • 5. Re: Play a label in a symbol then delete that symbol
                  joel_pau Level 5

                  joel_pau wrote wanted to write:

                   

                  Your compositionReady doesn't change.

                  I added beforeDeletion panels to your "Nos..." symbols.

                  I wrote alerts. You have to replace them by your animation code as: sym.play('oneLabel"); own code.

                   

                  ==> attached file: https://www.box.com/s/ecugerzjsx3vwqptdt4t

                   

                  Well, you can use Edge symbols like this:

                  • creationComplete: entrance animation.
                  • beforeDeletion: exit animation.
                  • 6. Re: Play a label in a symbol then delete that symbol
                    pmfr01 Level 2

                    My own code - what code are you referring to? I don't understand what you mean...  my entire code is in compositionReady.

                    • 7. Re: Play a label in a symbol then delete that symbol
                      TimJaramillo Level 4

                      Hi there, have you tried adding a timeline trigger at the last frame of your outro animation for each symbol? In that trigger, you could call a function on Stage.compositionReady to delete the current symbol. (You can pass in the current symbol as a parameter to that delete function.)

                      • 8. Re: Play a label in a symbol then delete that symbol
                        pmfr01 Level 2

                        Hi Tim.

                        Well, I have triggers inside array_sections calling the function sym.playRequest_section(); , but it still doesn't work - it's not playing the outro before being deleted.

                         

                        pmfr

                        • 9. Re: Play a label in a symbol then delete that symbol
                          TimJaramillo Level 4

                          Hi pmfr, I think you're going to have to rethink your process a little bit. I see a few issues.

                           

                          1) be careful of scope when using setTimeout method. Put a trace in your setTimeout, and you'll see the scope inside a setTimeout is the "window" object. Thus, the compiler can't find the "dynamicSymbol" var.

                           

                          2) It looks like your animations overlap- before the previous one is completely out (at last frame), you are calling for the next one to start. Thus, the "dynamicSymbol" var is being set before the old one is out/deleted. This will cause confusion when deleting the previous symbol. You can probably solve this by creating "previousDynamicSymbol", and "currentDynamicSymbol" vars, and setting them accordingly.

                           

                          3) Sometimes working on the timeline can get more complicated than doing the same thing through code. Rather than doing the animation on the timeline, I'd reccommend looking into the jQuery "animate" method (or look into the greensock JS animation library), in order to show/hide your symbols. That way you can control deleting the symbols with the built in "complete" methods in both animation libraries.

                          • 10. Re: Play a label in a symbol then delete that symbol
                            HalftoneDesign

                            Hello there!

                             

                            I'm a designer with absolutely zero programming knowledge, and now I'm taking the adventure with Edge Animate, what animates me a lot...hehehe

                            With this background, you can imagine how hard can be (to me) make a simple java function work well. I'm trying to use clean logic in my docs, but I'm stuck in something:

                             

                            I'm having the same pmff's problem: "get rid of a symbol after it plays it's timeline on my stage".

                            I've worked a little bit different of pmff, but the problem is the same, i guess.

                             

                            Basically, my stage has 2 symbols: "ask" and "answer". The symbol "aswer" is in front of the symbol "ask", so, I start my stage with "aswer" hidden. The idea is, when click on "ask", it plays and brings the symbol "answer" on, and plays it's timeline. After that, when I click on the symbol "answer", plays reverse it's timeline and hide it again, showing only "ask" on the stage. This is the code on symbol "answer":

                             

                            screen.gif

                            I made it work with this "fadeOut" line, but my idea is change this to a simple "hide" command, but it has to happen AFTER the "playReverse" line. Is it possible?

                             

                            I know it's a newbie question, and sorry for that.

                            If anyone could help me, I appreciate it!

                             

                            Here is the files:

                            http://www.sendspace.com/file/1y3hpd

                             

                            Cheers,

                            Clayton

                            • 11. Re: Play a label in a symbol then delete that symbol
                              elainecc Adobe Employee

                              Hi, Clayton-

                               

                              All you need to do is set another trigger in the timeline where you want it to hide, and add the following code:

                               

                              if (sym.isPlayDirectionReverse()) {

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

                              }

                               

                              Hope that helps,

                               

                              -Elaine