9 Replies Latest reply on Feb 20, 2014 1:45 PM by claycalv

    How do I make my Timeline play forward or reverse depending on its current location?

    Jared_DA

        I'm attempting to make a side scrolling site. I have a wide div set up in the main timeline that animates 1000px at a time on the x-coordinate between the labels I have set for each "page".

       

      I would like to click a button and go to the associated label and stop. I am faced with 2 problems:

       

      1. Sometimes this would require the playhead to move in reverse rather than forward.

      2. I originally had stop triggers on the timeline under the labels but if I am able to get my first problem fixed these triggers would stop the animatin before reaching the label.

       

      I'm just learning java so I'm guessing I need an if statement and a function.

       

      Example of what I'm trying to figure out:

       

      I want to press work button and play to label "work".

       

      If I'm at label "home" I need to play(); and stop at label "work". If I were at label "blog" I would need to playReverse(); to label "work".

       

      Please help! I've been going looney trying to figure it out!

        • 1. Re: How do I make my Timeline play forward or reverse depending on its current location?
          ajguy711 Level 1

          I believe this should do it, though I could be misunderstanding your layout here.

           

          At each of your labels, select insert trigger and put a sym.stop(); command in. This will stop the timeline each time it reaches that label, no matter from which direction.

           

          Have your button either execute sym.play(); or sym.playReverse(); to move forwards or backwards.

           

          This final step may take some work. Ideally, each "page" should be it's own symbol. That way, they can run animations independant of the main timeline. Have the triggers in the main timeline play the symbols in addition to the stop command.

           

          Hopefully that makes sense and helps you out!

          • 2. Re: How do I make my Timeline play forward or reverse depending on its current location?
            Jared_DA Level 1

            Thank you for your reply!

             

             

            My post may have been a little misleading...

             

            I have a navigation bar with 5 items.  Home, work, blog, about, contact.  My main timeline has a symbol that is 6000px wide. Inside that symbol are individual symbols that make each of these "pages" which are 1000px each. My timeline has animations that last 1.5 secs each and animate the main symbol 1000px on the x dimension to stop on the main stage which is 1000px.  Essentially it creates a 5 "page" side scrolling layout. I have the five labels on the timeline starting at 0s with "home", 1.5s labeled "work", 3s labeled "blog"... etc.

             

            I wish to be able to click blog and travel forward or reverse on the timeline and then stop on "blog".  Then If you click home you should reverse along the timeline and stop on "home".  If I have any stop(); triggers on the timeline it would stop in transition to my target label without reaching it.  In addition a generic play(); or playReverse(); doesnt target a specific label which is whats required for my navigation bar.

             

            I need to play forward or reverse from the current location on the timeline and stop when it reaches a specific label. Visually you would be sliding back and forth across the pages as you use the navigation.

             

            Is there a way to do this with variables?

             

             

            I'm going to try triggers on the timeline like this sym.setVariable("pageValue", "home"); when on the "home" label.    sym.setVariable("pageValue", "work"); when on the "work" label.

             

            but then how would I tie that to my buttons?

             

             

            If I click work and I'm on home I need it to check:  var myVariable = sym.getVariable("pageValue"); and then an if or else statement I think?  I'm such a noob. I'm trying really hard to grasp it

             

            something like:   if pageValue = "home" { sym.play();} else if pageValue = "blog","about","contact" {sym.playReverse} if pageValue = "work" {sym.stop();};

             

            I know there is probably all kinds of syntax errors there but can someone understand what I'm getting at?

             

            to make this even more tricky I am interacting with the stage with an html and css navigation bar that lays over the stage so I need this to be in function style (see code)

             

             

            function goHome()
            {
            javascript:var targetComp = AdobeEdge.getComposition('EDGE-57204389');
               targetComp.getStage().playReverse();
            }
            
            

            and then call it like this in html

             

            <li><a href="javascript:goHome();" class="three-d">
                                          Dynamic
                                          <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                                </a></li>
            
            

             

            This works to play the stage in reverse but its not the functionality I need.  Any help would be greatly appreciated and a great learning point for me and hopefully others in my situation!

            • 3. Re: How do I make my Timeline play forward or reverse depending on its current location?
              ajguy711 Level 1

              Ah, I follow. I didn't realize the buttons were persistant.

               

              I'd have to try to figure out the exact effect you want, but this seems close: http://www.heathrowe.com/adobe-edge-a-simple-click-through-with-triggers/.

               

              My guess is that you want to see the "in between pages" scroll by if you were to click on Work while viewing Contact. Like I said, not sure about that yet, but the above URL could provide a starting point.

              • 4. Re: How do I make my Timeline play forward or reverse depending on its current location?
                Jared_DA Level 1

                your description is exactly what I had in mind. I

                ll have a look at your link. Thank you so much!

                I've been stuck for hours... *EDIT* Close but not what I had in mind.

                 

                I actually need to to see the pages scroll by because all of the pages will share background and foreground elements. I really think I'm going to require functions and if else statements that use variables.  I'm just not sure how to link them all together.... very frustrating lol

                • 5. Re: How do I make my Timeline play forward or reverse depending on its current location?
                  resdesign Adobe Community Professional & MVP

                  I Think that you need to get he position on the timeline and then add play() or playReverse depending where you are and add the if statements accordingly.

                   

                  I Will try to get the code sometime today.

                  • 6. Re: How do I make my Timeline play forward or reverse depending on its current location?
                    Jared_DA Level 1

                    thank you for your reply! Yes that is what I'm thinking. I need it to find if you are on "blog" playreverse or play until you reach "home" then stop when you are home.

                     

                    But I don't fully understand the syntax of an if statement in conjunction with a function. so i think I need some thing like this:?

                     

                    if timeline == "home"

                    play();

                     

                    if timeline =="work"

                    play();

                     

                    if timeline =="blog"

                    stop();

                     

                    if timeline =="about"

                    playReverse();

                     

                    if timeline =="contact"

                    playReverse();

                     

                    but once that fires it wouldn't continue to check for what page I'm on and stop when it reaches a specified page! right? so is there a way to make it run this if statement over and over until it stops?

                     

                    I'm having trouble getting the hang of JS's more advanced functions; if I see the code written I can kind of understand it and know enough to edit it and apply or duplicate it to work with other stuff; I just can't grasp it to write out more advanced stuff yet

                     

                    I'm assuming I need timeline triggers on each label setting a variable. a function that runs the if statements that refer to the variable and then loops the if statements until the variable is found that stops the timeline on the right variable, and stops running the if's?

                     

                    Is that accurate or over complicated? Would it help to see my Project files?

                    • 7. Re: How do I make my Timeline play forward or reverse depending on its current location?
                      drsqueegee Level 1

                      You can create a symbol which is a transparent box over each button. Each of these "button_control" symbols will have a series of 6 transparent boxes that will be "shown" or "hidden" by using the display property in your property panel in your default timeline. Each transparent box will only display while you are on a particular page, and you can make a completely different set of actions for each transparent box within each of the button control symbols, so when a user clicks on the blog button on the blog page they will call up different actions than if they click the blog button on the home page. They are actually NOT clicking the button, but they are clicking an invisible box that is being "displayed" over top of the blog button.

                       

                      I'm using something similar on my animation right now and it works great.

                      • 8. Re: How do I make my Timeline play forward or reverse depending on its current location?
                        Jared_DA Level 1

                        That is a great idea!

                        Unfortunately it doesn't work as needed for my project I'm using a html/css navbar placed over my stage in the html page because I can achieve a desired effect on mouseover that I cannot recreate in edge as opposed to buttons/symbols in my stage.

                        • 9. Re: How do I make my Timeline play forward or reverse depending on its current location?
                          claycalv

                          Jared, did you ever figure out a solution to your problem? I have been searching for hours trying to figure out exactly this same problem, to no avail. I know this was posted quite a while ago, but any help you could be to me would be excellent.