23 Replies Latest reply on May 7, 2013 1:55 AM by AMULI

    I need to make two animations function from one action

    20th Anakin Level 1

      I need to make two animtions function from one action. So it should look something like plsy.("transition1") then go and play .("transtion2"). All under the same action I want when I press one button from my

      wb page for it to play two animations the first to take a rectangle like element off screen and the second to bring a new fro the side on the screen all this with the press of one button. Thanks

        • 1. Re: I need to make two animations function from one action
          AMULI Level 4

          Hi,

           

          Just place the two transitions in sequence in the timeline.

           

          Define a Stop trigger at the end of the second transition.

           

          Define a label, say "rectOutRectIn" at the beginning of the first transition.

           

          Add an action to the triggering button : click event, sym.play("rectOutRectIn"); snippet.

           

          Gil

          • 2. Re: I need to make two animations function from one action
            20th Anakin Level 1

            thanks could you make a functioning version of this for download.

            • 3. Re: I need to make two animations function from one action
              AMULI Level 4

              Trigger : place the playhead, then click in the top pseudo-track Actions.

               

              Label : Timeline > Insert Label

               

              Actions : select the button element, then in the context menu : Add action to…

               

              Gil

              • 4. Re: I need to make two animations function from one action
                ncuriel

                What if the transitions you're using are not back to back and it's impossible to make them so. When I write:

                sym.play(0 (or label)); (which goees from 0 to 2 seconds)

                and then

                sym.play(3000 (or label)); (which goes for 1 second).

                 

                *I also have stops in the timeline at the end of each of these animations.

                 

                it sort of plays both really quickly and the animations don't run as they're supposed to, the time is shortened and it's like the transitions break down.

                 

                Help?

                 

                Thanks so much.

                • 5. Re: I need to make two animations function from one action
                  AMULI Level 4

                  If you actually want to play the two transitions sequentially, why is it impossible to place them in sequence in the timeline ? Sorry, give a clearer description of what you're trying to make.

                   

                  Gil

                  • 6. Re: I need to make two animations function from one action
                    ncuriel Level 1

                    Suppose I have 3 animiations back to back, A, B, C.

                    With a trigger i play A + B back to back, but with another trigger I want to play A + C. how do I do the latter?

                    • 7. Re: I need to make two animations function from one action
                      Departure Level 1

                      Come up with ONE scenario and Post the Code that you have in mind so we can help you...it is hard to understand what you are after....

                      • 8. Re: I need to make two animations function from one action
                        AMULI Level 4

                        In Edge's vocabulary, a trigger is code executed when the playhead reaches the point of the timeline it is attached to. So strictly speaking, you would not use a trigger, but "trigger" from an event —a click for example— with event handlers attached to two button elements.

                         

                        In each of these two handlers, you could give a different value to the same variable next = "B"; / next = "C". And on the ending point of animation A, a trigger will contain statement : sym.play( next);

                         

                        Gil

                        • 9. Re: I need to make two animations function from one action
                          AMULI Level 4

                          In fact, we should forget the idea of back-to-back animations : the three animations are nested in symbols named pink, green and yellow (to avoid confusing the symbol’s name with the instance’s name, the instances have respective IDs pink1, green1 and yellow1.

                           

                          The stage also has two symbols acting as buttons : btnPinkGreen and btnPinkYellow, instanciated as btnPinkGreen1 and btnPinkYellow1.

                           

                          btnPinkGreen1.click event handler :

                           

                          var theStage = sym.getComposition().getStage();

                          theStage.setVariable("next", "green1");

                          theStage.getSymbol("green1").stop(0);

                          theStage.getSymbol("yellow1").stop(0);

                          theStage.getSymbol("pink1").play(0);

                           

                          Similarly, btnPinkYellow1.click event handler :

                           

                          var theStage = sym.getComposition().getStage();

                          theStage.setVariable("next", "yellow1");

                          theStage.getSymbol("green1").stop(0);

                          theStage.getSymbol("yellow1").stop(0);

                          theStage.getSymbol("pink1").play(0);

                           

                          pink’s trigger @ 1000 ms :

                           

                          var theStage = sym.getComposition().getStage();

                          var nextAnim = theStage.getVariable("next");

                          theStage.getSymbol(nextAnim).play(0);

                           

                          Example here : https://www.box.com/s/h38s2oexqdumm46v4q7d

                           

                          Gil

                          • 10. Re: I need to make two animations function from one action
                            sabermaster28 Level 1

                            Im trying to make a web page that trransitions from one section two another. for example when you are in the 'home section' you press the "about us button" and the home section fades out

                            while the about us section begins to fade in. Its doesnt have to be fades the sections could also slide out and slide in.

                             

                            heres an example

                             

                            http://www.templatemonster.com/demo/43703.html

                            • 11. Re: I need to make two animations function from one action
                              AMULI Level 4

                              Hi Sabermaster,

                               

                              You just need to adapt the example given. Each of your sections is a symbol, like pink, green and yellow above.

                               

                              As they have only the slide-in part, you just add a sym.stop(); trigger at the end of the slide-in, and the slide-out part after it. Finally, at the end of the slide-out, a trigger similar to pink’s trigger given above.

                               

                              Then each section button should fire a play() on the current section : stopped on the mid-course trigger, it will play the slide-out, its final trigger starting the slide-in of the chosen section.

                               

                              Gil

                              • 12. Re: I need to make two animations function from one action
                                sabermaster28 Level 1

                                Amuli could you make a working version of this in Edge for download.

                                 

                                Thank you

                                • 13. Re: I need to make two animations function from one action
                                  AMULI Level 4

                                  document.compositionReady :

                                   

                                  sym.setVariable("next", "pink1");

                                  sym.getSymbol("pink1").play();

                                   

                                  btnPink1.click :

                                   

                                  var theStage = sym.getComposition().getStage();

                                  // current section is the one latest stored "next"

                                  var currentSection = theStage.getVariable("next");

                                  // play the second half : slide-out

                                  theStage.getSymbol(currentSection).play();

                                  // prepare the next slide-in

                                  theStage.setVariable("next", "pink1");

                                   

                                  btnGreen1.click, btnYellow1.click : idem replacing the string in bold

                                   

                                  In each of the three timeline of the sections’ symbols :

                                   

                                  trigger @ 500 ms :

                                  sym.stop();

                                   

                                  trigger @ 1000 ms :

                                  var theStage = sym.getComposition().getStage();

                                  var nextAnim = theStage.getVariable("next");

                                  theStage.getSymbol(nextAnim).play(0);

                                   

                                  Download : https://www.box.com/s/078nnwhxim44ttk1prdy

                                   

                                  Hope it is now clear.

                                   

                                  Gil

                                  • 14. Re: I need to make two animations function from one action
                                    sabermaster28 Level 1

                                    it works great. Im only having one problem and thats gettting all the components the rectangles the buttons in to a container and still function.

                                    I wont to get all the componants in a container so I can center them easier. Ill call the container with all the buttons slideing rectangles, ill call it "panel"

                                    and then center it as one web page using this code on the Stage resize.

                                     

                                     

                                    // insert code for resize event here
                                    var trueStage = sym.$("panel");
                                    trueStage.offset({
                                        left: ($(document).width() - trueStage.width()) / 2,
                                        top: ($(document).height() - trueStage.height()) / 2
                                    });
                                    var backgroundOffset = sym.$("space");
                                    backgroundOffset.offset({
                                        left: ($(document).width() - backgroundOffset.width()) / 2,
                                        top: ($(document).height() - backgroundOffset.height()) / 2
                                    });

                                     

                                    sym.$("TopLeft").html("Browser Top-Left: 0,0");
                                    sym.$("TopRight").html("Browser Top-Right: "+$(document).width()+",0");
                                    sym.$("BottomRight").html("Browser Bottom-Right: "+$(document).width()+","+$(document).height());
                                    sym.$("BottomLeft").html("Browser Bottom-Left: 0,"+$(document).height());
                                    sym.getSymbol("panel").$("SymbolTopLeft").html("Symbol Top-Left: 0,0");
                                    sym.getSymbol("panel").$("SymbolTopRight").html("Symbol Top-Right: "+$(trueStage).width()+",0");
                                    sym.getSymbol("panel").$("SymbolBottomRight").html("Symbol Bottom-Right: "+$(trueStage).width()+","+$(trueStage).height());
                                    sym.getSymbol("panel").$("SymbolBottomLeft").html("Symbol Bottom-Left: 0,"+$(trueStage).height());

                                     

                                     

                                    Thank you for the help before.Please if you casn help me solve this it would be amazing I need to know how to do this for a web page im designing for my aunt anf for other clients later. Thanks

                                    • 15. Re: I need to make two animations function from one action
                                      AMULI Level 4

                                      Hi Sabermaster,

                                      it works great.

                                      You can feedback by marking the answer as helpful

                                      all the components the rectangles the buttons in to a container and still function.

                                      so I can center them easier. Ill call it "panel"

                                       

                                      Ok. Just select the rectangle and all of your buttons, then Convert to symbol, and name this new symbol "panel".

                                       

                                      Now you just need to adapt the code bearing in mind that there is one more level in your symbols' hierarchy. Going up to the stage doesn't change : getComposition().getStage(). But going down, the traversal has one more step for your container : instead of sym.getSymbol("pink1").play();, you'll write sym.getSymbol("panel").getSymbol("pink1").play();

                                       

                                      Try it by yourself : the aim is that you learn fishing, not that I fish for you

                                       

                                      Gil

                                      • 16. Re: I need to make two animations function from one action
                                        sabermaster28 Level 1

                                        thats great although how do I change the other code in edge.

                                         

                                        how do I change this code.

                                         


                                        var theStage = sym.getComposition().getStage();

                                        var currentSection = theStage.getVariable("next");

                                        theStage.getSymbol(currentSection).play();

                                        theStage.setVariable("next", "pink1");

                                         

                                        so that there is a place for the ("panel ") in the code so that the entire thing works not just this part sym.getSymbol("pink1").play();;

                                         

                                        I need all the code adjusted to fit the needs of the('"panel") change.

                                         

                                        again thank you very much I need this for doing projects for my clients it would really help thanks

                                        • 17. Re: I need to make two animations function from one action
                                          AMULI Level 4

                                          Hi Sabermaster,

                                           

                                          You already have the answer in the preceding post !

                                           

                                          May be the following figure will help ?

                                          again thank you very much I need this for doing projects for my clients

                                          I've got my own to honor

                                           

                                          Gil

                                           

                                          PS : mark as helpful if it helped !

                                           

                                          symbolsTree.gif

                                          1 person found this helpful
                                          • 18. Re: I need to make two animations function from one action
                                            sabermaster28 Level 1

                                            thst diagram didnt really help. This is asking for a huge favor but could you place pink1 button  green1 button and yellow 1 button with pink1,green1,yellow1 into a symbol named ("panel") then make it so that they are still functional and then place the edge file for download. Thanks again and please this would help save my business this summer. So thank you thank thank you.

                                            • 19. Re: I need to make two animations function from one action
                                              AMULI Level 4

                                              In fact, the code has not to be changed, as the three symbols of sliding sections are still directly under the stage. You still use sym.getSymbol("pink1").play() for example.

                                               

                                              I made the figure to quickly, as in our case the three elements under panel are btnYellow1, btnGreen1 and btnPink1. So you would only need to add a getSymbol('panel'), to correct some access to a button, which is one level of nesting deeper, compared to the first version. But it's not necessery here.

                                               

                                              All you need to do, I repeat it from post 15 : select the rectangle and all of your buttons (multiple selection by Shift-clicking), then Convert to symbol (last item in the context menu), and name this new symbol "panel" (see screen capture below). The code is ok as is.

                                              So thank you thank thank you.

                                              One way to thank in a forum is to click the Yes, helpful link.

                                               

                                              Gil

                                               

                                              panel.png

                                              • 20. Re: I need to make two animations function from one action
                                                sabermaster28 Level 1

                                                Thats great although its not really helping me. Youv already shown what changes for the objects being added in symbol named panel are these were the changes you made.

                                                 

                                                original:

                                                 

                                                getSymbol("pink1").play()

                                                 

                                                modified:

                                                 

                                                getSymbol("panel")

                                                 

                                                thats great thats all figured out but what do I do to modify this code

                                                 

                                                var theStage = sym.getComposition().getStage()

                                                var cuurentSection = theStage.getVariable("next");

                                                theStage.getSymbol(currentsection).play();

                                                theStage.setVariable("next","pink1");

                                                 

                                                it would be even  grewater if you could change all this in edge wth all the contents of the page placed in a symbol named "panel" preferably and still have the pages contents working functional(slider and buttons working) then place the edge file or page for download. This would help because I need to see the changes made to the page not just explained.

                                                 

                                                Once agian thank you very much

                                                 

                                                 

                                                 

                                                 

                                                 


                                                 


                                                • 21. Re: I need to make two animations function from one action
                                                  AMULI Level 4

                                                  Sabermaster,

                                                   

                                                  Please read carefully the preceding posts, which already gave all the answers you need.

                                                   

                                                  I cannot do more for you if you do not try to understand.

                                                   

                                                  Gil

                                                  • 22. Re: I need to make two animations function from one action
                                                    sabermaster28 Level 1

                                                    Thank you once again but the reading is not helping I dont understand the explanation given I need to see this in adobe edge inorder to understand it. Couuld you just please

                                                    make a version with the page contents inside a symbol named panel doesnt matter just that the contents pinkbtn, greenbtn, yellowbtn, and pink1,greeen1,yellow1 are functioning after placed in a symbol.

                                                    Finally it would be awseom if you could post the new finished version for download in the forum. I would be truly greatful sense I need this for work thank you.

                                                    • 23. Re: I need to make two animations function from one action
                                                      AMULI Level 4

                                                      post the new finished version for download in the forum.

                                                      I've already posted a working version ! Refer to post 19 to nest the three buttons in a new symbol "panel" to produce the structure shown in the screen capture. And as I've already written : the code you have downloaded is ok as is.

                                                       

                                                      Gil