11 Replies Latest reply on Jul 23, 2013 10:27 AM by SEIF BH

    How to change the actions from the same symbol along the timeline?

    alansos

      Hi, i have recently moved from adobe flash professional to adobe edge animate. But things seem to be more complicated on edge.

       

      I have 2 buttons, "next" and "previous", and they have their own actions to make the timeline plays to a specific point. But I cant reuse the same symbols changing only the code like I used to do on flash.

       

      Ive already looked the whole web, but there are few edge tutorials. Does anyone know how to change the code from the SAME symbol in different parts from the timeline? I dont want to have to create new "next" and "previous" buttons everytime I need to change the code to go to the next page of my project.,

        • 1. Re: How to change the actions from the same symbol along the timeline?
          Departure Level 1

          If you are using timeline animation+labels, most likely your next and previous buttons are using "play" or "stop at" function to locate page labels. If this is the case then place your two symbols, (ex: next button) and in the action panel for the button use a generic code to jump to the next label everytime it is clicked. You can use simple play() function in code panel accompanied by stop() triggers on landing frames to make sure the timeline plays and stops once landing on the page. For more advanced cases you can use counters/ numbers and use "play from" or "stop at" functions by dynamically feeding the according label numbers. You can do the whole thing without using timeline of course by only using coding. Simply define a counter, everytime your next button is clicked add 1 to it, and everytime the previous button clicked add (-1). ask your timeline to show the appropriate symbol/page for the relevant number, this requires some if statements or an array of symbols/pages.

           

          if this doesnt answer your question, it would be helpful if you bring a visual Example, so i can understand what exactly needs to be achieved.

          1 person found this helpful
          • 2. Re: How to change the actions from the same symbol along the timeline?
            alansos Level 1

            It would not work in my project. I have 3 buttons, each of them calls a different page with 3 pages inside each one. Therefore, in the last page of them, the next button would be gray(desactive, with no code) and the same happens in the first page with the previous button.

             

             

            Do you have any other suggestions? And that solution u gave means that in adobe edge, symbols can have only one unique code? We cant change it on a different part from the timeline as in flash?

            • 3. Re: How to change the actions from the same symbol along the timeline?
              resdesign Adobe Community Professional & MVP

              I did something like that. I will post a sample Monday.

              • 4. Re: How to change the actions from the same symbol along the timeline?
                Departure Level 1

                My understanding is Adobe Edge timeline works just like Flash, the difference is, instead of coding in ActionScript you use this combined CSS,Jquery,Edge syntax. Still dont understand what do you mean by changing a code for a symbol. You can override/redifine the original code when entering a new frame on timeline, just use "insert trigger" to place an Action for a specific frame, like how we did in flash by holding option a? i already forgot!...damn.

                 

                This is the most basic way to approach your problem I guess (I m trying to avoid coding and stay commited to timeline as you do)

                 

                Lets say Page A has  20 photos and page B has 10. You want to have a single NEXT button to serve both pages:

                1 - Place all those photos on timeline, frame 1-20 for Page A and frame 21-30 for Page B photos.

                1 - Place stop() for each frame including a photo.

                2 - For your single NEXT button drop a play( ) function for its CLICK trigger

                3 - everytime you click on a page jump to your page frame on timeline(B jumps to 21)

                4 - At the begining frame of each page Disable the Previous button and at the end frame Disable the Next button. enable them vice versa

                 

                I think this way you can share this  Next, Previous Buttons with only one generic function defined on their CLick trigger...the downside is to have a messy timeline. Next button keeps jumping one frame/photo on each click.

                 

                I still prefer doing it dynamically using counters +1 and -1 and having Pics in arrays, however this is like killing an ant with shotgun, overkiller solution. small projects are better wrapped in timeline I guess.

                 

                The best solution though is to wait till monday

                • 5. Re: How to change the actions from the same symbol along the timeline?
                  alansos Level 1

                  "Still dont understand what do you mean by changing a code for a symbol"

                   

                  I will try to explain better:

                   

                  In flash, we can have a symbol in the stage and click on it to assign an action to it. Then, we can create another keyframe and click on the same symbol and change its action without changing the previous assigned action from the first keyframe.

                   

                  Can u understand know?

                  • 6. Re: How to change the actions from the same symbol along the timeline?
                    Departure Level 1

                    in Edge timeline, just beneath the 0 frame indicator and next to the word actions there is {o} button called "insert trigger", also accessible by command T. Above it you have "insert label". Using insert trigger you can create a code panel for any keyfrom in the timeline. Is this what you are looking for? You can also right click on symbols and open actions.

                    • 7. Re: How to change the actions from the same symbol along the timeline?
                      alansos Level 1

                      No, I want to put the action in a symbol, not in the timeline. Actually it could be in the timeline if from there i could call the same symbol with differente actions on different keyframes.

                      • 8. Re: How to change the actions from the same symbol along the timeline?
                        Departure Level 1

                        Ok so lets say you have a star symbol and you want to place a piece of code inside the symbol to constantly rotate the star. then you want to drop the star symbol in other timelines and regardless of its rotation, access the symbol via code and maybe scale it up. when you define a symbol, use {o} insert trigger to place whatever code you want in first frame, including stop(), this is like having an action code for a symbol on first frame. The other method is the one u explained above. And there is another alternative to use the main code panel in stage to access every symbol directrly from stage, sort of like using only one action panel for the entire project. Now going through this brainstorming i am wondering if we can actually implement external .js files like how we did use external classes in flash. I know you can export/import symbols, i m wondering what is the equivalent technique to match using classes. If we are still not communicating your exact problem, maybe you can come up with a visual example and we solve that one here...

                        • 9. Re: How to change the actions from the same symbol along the timeline?
                          resdesign Adobe Community Professional & MVP

                          I would use labels on the timeline of the symbol doing several things and then play these labels. You can put the label names in an array and then call the array element to play that specific label.

                          • 10. Re: How to change the actions from the same symbol along the timeline?
                            AMULI Level 4

                            Hi alansos,

                             

                            May be the first thing is to differentiate the symbol and its — possibly many — instances. So you could code the part of the behavior that is shared by every instance (for example, the rollover effect) inside the symbol's timeline. Then, you could create three instances of the symbol navButton on stage and code the three different behaviors when clicked at the stage level in the event handlers navButton1.click, navButton2.click and navButton3.click.

                             

                            Although Edge has family likeness with Flash, an important difference is the following :

                             

                            • A layer in Flash may instantiate a symbol symbol1 in a span of say 10 images ; then, after swapping the symbol, instantiate another symbol symbol2 in the next span of  10 images.

                             

                            • To build something equivalent in Edge, you are obliged to use two elements ("layers"), one for symbol1 and the second for symbol2. You handle the "swapping" via the display properties values : for symbol1, true at 0 ms and false at 1 ms ; the opposite for symbol2.

                             

                            I think that trying to "attach different codes to different keyframes of the same symbol", you're victim of that "layer divided into spans" way of thinking that you are used to in Flash, but that no longer holds in Edge. Hence the need to replace a unique instance of your symbol navButton in a layer divided into three spans by three elements instances of navButton.

                             

                            Gil

                            1 person found this helpful
                            • 11. Re: How to change the actions from the same symbol along the timeline?
                              SEIF BH Level 2

                              in CreationCompete put this :
                              c = 1;

                              and in function click in you boutton next or previous put this :

                               

                               

                              if ( c == 1 ){

                              sym.play("the_first_animation");

                               

                               

                              }

                              else

                              {

                              sym.play("the_Second_animation_in_timeLine");

                               

                               

                               

                               

                              }

                              i hope this work

                              1 person found this helpful