5 Replies Latest reply on Mar 8, 2013 2:39 PM by shadowfax007

    looping simple animation

    shadowfax007 Level 1

      Hi all-


      This seems like a VERY lame question, especially since I just spent 1/2 hour searching the discussion list and finding this subject many times!


      I have a symbol.  Right now, it is a "static" symbol, with a few text boxes and images but it will become an entire "tutorial" of about 50 seconds).

      One of the  images is a placeholder for the "tutorial" - I want to play part of the timeline, pause and let the user either go forward or backward to play the next section.

      On top of this "larger" image I have placed another symbol:


      1. A rectangle with some text and a "play" image (circle with a triangle).

      2. The "play" circle by itself, this time in red, on top of the first.


      All I want to do is have the "red" play image(#2) fade in and out over the part of the image (#1) (chrome circle with triangle) so it has a "pulse" look and feel.


      The entire "main" symbol may be up to 50 seconds long.  The "pulsing" image symbol starts at the very beginning and continues until it is clicked, at which time it will play the first section of the animation (by "going to" a label in the animation and playing).


      For whatever reason, I cannot get the "pulsing" red image to loop until clicked!

      I know this must be "Edge/javascript 101" but I can't seem to get it to loop!


      The timeline for this symbol contains 2 "sections" for the "red arrow" image:

      The first sets the opacity from 0 to 100 over a span of.250 seconds.

      The second set the opacity from 100 to 0 over .250 seconds, with a gap of .250 seconds between them.


      This symbol is set to play in the main timeline at 0 seconds.  At the end on the symbol (.750 seconds) I added the trigger :  sym.play(0);


      It plays once and that is it.


      Any help or ideas of what "Glaring" step I'm missing?


      Thanks again for sll hte help!



        • 1. Re: looping simple animation
          shadowfax007 Level 1

          ok, I'm getting there :-)


          If I add the elements to the main timeline with everything else, I can create a contunious loop of the button.


          I think where I'm having a hard time is creating this loop inside a symbol and calling the symbol.  I thought that if I had the loop running inside a symbol then just calling the symbol would do the trick.  However, I can't get it to work within a symbol.  I CAN create a new HTML document and get it to work there, as well as putting it into the main timeline and it works.


          Can anyone point me in the right direction as to how to get a symbol  to "loop" after being run on hte main timeline?  I can get symbols to play all day long from the main timeline but I can't seem to get them to perform something like a loop :-)



          • 2. Re: looping simple animation
            josh.dura Adobe Employee

            The best way to create a looping animation, whether it be on the main timeline or on a symbols timeline, is to add a Timeline.complete event. When inside the symbol you want to loop, you will see two sets of brackets {} on the left of the timeline. The top one (on the Actions bar) is the one for the timeline of that symbol. When you click it, add the complete event, and in there you will want to add the sym.play() code to get it to loop. This will loop infinitely. If you want it to stop when clicked, you would have to add a variable when the button is clicked, and check for true/false of that variable inside the Timeline.complete event that I mentioned before.

            • 3. Re: looping simple animation
              shadowfax007 Level 1

              Thanks Josh-


              Since I have this one working from the main timeline, I'm going to leave it for now.  I have many others I need to do so I'll give this a try on the next one :-)


              I've been doing so much using the timeline that now I'm at the point I need to dive into the JavaScript commands and triggers :-)


              I do have a general question about triggers and such:


              My thought is in my projects I'm trying to make almost everything a symbol and calling these symbols from the main timeline.  It seems to keep things less cluttered and easier to work with.

              Is this a preferred way of working with animations inside Edge or is there a "more preferred" way of doing things?


              Also, am I better adding triggers and such within the symbols (like I'm trying now) or from the main timeline?  Again, I thought it would make more sense to handle everything related to a symbol within the symbol...


              Thanks again!



              • 4. Re: looping simple animation
                josh.dura Adobe Employee

                It really all depends on what you plan on using the symbol for. In general, I think the same way. Using symbols keeps things less cluttered, and if I ever decide to reuse that symbol, it can just reuse that instance of the symbol.


                For your code, it makes the most sense to try whenever possible to keep all of your code in the same place. However, there are times when you will need to place code/triggers/events within the timeline of the actual symbol. Overall, try wherever you can to keep all your code as minimal and manageable as possible, and when using code inside the symbols, make it clean and as simple as possible so that maintaining it is easy.

                • 5. Re: looping simple animation
                  shadowfax007 Level 1



                  Just thought I'd let you know that I came across another need to loop a symbol "within another symbol" (I knew I would) and your directions worked great - It's working wonderfully!


                  Thanks again for the help!