6 Replies Latest reply on Mar 7, 2013 9:26 AM by oliverS

    Original versus Fake - all done in Edge

    oliverS Level 1

      Hi,

       

      I asked in an earlier session but unfortunately there was no response.

      So this is my next try.

       

      But before... I did some work.

       

      I saw a interesting site from "Range Rover" and asked myself, if this is possible in Edge.

      My background is more After Effects, but I felt verry comfortable with the Edge-tool.

      I have worked on a "Fake_Site", I tryed to rebuild it all in Adobe_Edge as a practice-test,

       

      and see what I have done:

       

      Original:

       

      https://victoriabeckham.landrover.com/DE

       

      My fake:

      http://go-motion.net/range/

       

       

      It is one huge timeline - only with stops-labels in between.

      But as you see, there is the scroll-function missing.

       

      Maybe it is much more complicated as I can imagine.

      For me it seems like there is one script that connects the scrolling

      to the timeline.

      But I am not a coder.

       

      Question:

      Who knows the script that connects the scrolling to the timeline?

       

      Hopefully there is some help outside and if it is only the answer:

      »Forget it, no chance.«

       

      Thanks in advance and greetings from Germany

      Oliver

        • 1. Re: Original versus Fake - all done in Edge
          TimJaramillo Level 4

          Hi there,

           

          Your "fake" is actually looking pretty good!

           

          Below is the js file that handles the scroll animation on the original Land Rover site. As you can see, it's pretty complicated:

          https://victoriabeckham.landrover.com/js/ScrollAnimator.js?v=749

           

          To add scroll to your fake version, you can add a Stage.scroll event. In the Stage.scroll event, the below code should get you the amount the user is scrolling from the top of the page. You could then check this value and when it reaches a certain point, trigger your timeline animation.

           

          var myScrollTopValue = e.currentTarget.scrollTop;

          • 2. Re: Original versus Fake - all done in Edge
            oliverS Level 1

            Hello Tim,

             

            so first of all thank you very much for your answer.

             

            Meanwhile I made a newer version of my "fake" which comes a bit closer:

             

            http://go-motion.net/range02/

             

            with special thanks to Yoshioka Ume

            whom I owe the code for a timeline element (http://forums.adobe.com/thread/1008744)

             

            It is close to, but not exact that what I would love to have.

             

             

            So I tryed your idea from a Stage.scroll event and built a timeline with three elements

             

            which move from right to left from frame 01 to whatever, put the code on the stage to a scrolling event

             

            but nothing happend.

             

            It would be great if you might have a look on the file. Here is the link:

             

            http://go-motion.net/range02/test.zip

             

            Very special thanks in advance,

             

            Oliver

            • 3. Re: Original versus Fake - all done in Edge
              TimJaramillo Level 4

              Hi Oliver,

               

              I reworked the example a bit. Instead of listening to the built in Stage.scroll event, I implemented a very cool jQuery plugin: http://brandonaaron.net/code/mousewheel/demos. You can keep Stage.Overflow property as "hidden", as this plugin listens to the raw mousewheel event, not an actual scroll event.

               

              Example:

              http://www.timjaramillo.com/code/edge/mousewheel_timeline/scroll.html

               

              Source:

              www.timjaramillo.com/code/edge/_source/mousewheel_timeline.zip

               

               

               

              Code on Stage.compositionReady:

               

              yepnope(

              {

                        nope:[

                                     'jquery.mousewheel.min.js'// path to .js file to load

                             ],

                        complete: init

                 }

              );

               

               

               

              var timelinePos = 0;// track current timeline position

              var multiplier = 100;// multiply this by mouse speed to get usable scroll value

              var timelineLength = sym.getDuration();// total timeline length

               

               

              // when yepnope has loaded everything execute init();

              function init (){

               

                         $("html, body").mousewheel(function(event, delta) {

               

                // don't scroll to negative timeline position

                                  if( timelinePos >= 0 ){

                                            timelinePos += (delta * multiplier);

                                            sym.stop(timelinePos);

                                            //console.log('timelinePos = ' +timelinePos);

               

                                            // reset values within range

                                            if( timelinePos < 0 ){

                                                      timelinePos = 0;

                                            }else if( timelinePos > timelineLength ){

                                                      timelinePos = timelineLength;

                                            }

                                  }

               

                                  event.preventDefault();

                        });

               

              }

              • 4. Re: Original versus Fake - all done in Edge
                oliverS Level 1

                Absolutly awsome, Yes, yes, yes!

                 

                THX for your help.

                • 5. Re: Original versus Fake - all done in Edge
                  TimJaramillo Level 4

                  glad to be of help Oliver! Can you mark my response as correct so future users can easily find the answer?

                  1 person found this helpful