6 Replies Latest reply on Jun 9, 2016 8:06 AM by Colin Holgate

    getting mouse scroll in pixels

    mads nyl larsen

      (only: Adobe Animate CC, not Edge animate)

       

      im looking for a way to use mouse scroll on my OAM animation.

      im planning to use Animate CC as a prototype tool to test our webdesign ideas, but for this to be as realistic as possible, i need mouse scroll to activate animations etc.

       

      a few ideas:

      1. first of all im looking for a way to get the mouse scroll as pixels, from there it'll be relative easy to make some rules within animate.

       

      2. another idea i have is to create a very long .oam animation, which scroll's on the html page's, but then i need to find a way to check if a specific "movieClip", "sprite" etc. is within view.

       

      any ideas or suggestions on how to achieve this ?.

       

      //Mads

        • 1. Re: getting mouse scroll in pixels
          kglad Adobe Community Professional & MVP

          are you publishing for html5 or something else?

           

          you want mouse movement to scroll something, or you want the mouse scroll wheel to scroll something?

          • 2. Re: getting mouse scroll in pixels
            Colin Holgate MVP & Adobe Community Professional

            He did say OAM, so HTML5 Canvas I'm sure. And I'm guessing mouse wheel, not mouse movement.

             

            I don't know if there is a built in way in CreateJS to read the mouse wheel, but you could use JQuery solutions like this one:

             

            jQuery Mousewheel Plugin: how to use - JSFiddle

             

            Once you have a value which represents where the user has scrolled to, one very easy solution to the rest of your problems would be to have the scrolling animation spread across the timeline, possibly even thousands of frames long to give smooth steps. Then you can have movie clips appear in the timeline when they are going to be in view. You would have a very simple function that would do something like this:

             

            this.gotoAndStop(Math.max(0,Math.min(this.totalFrames-1,amountuserhasmousewheeled)));

            • 3. Re: getting mouse scroll in pixels
              mads nyl larsen Level 1

              sorry, forgot to mention.

              im planning to use HTML5 canvas since Flash is fading out (no comments on that one).

               

              im going to use Animate CC as a prototyping tool, my idea is to create a series of sections on top of each other, each section would have their own animations, to begin with i want to be able to trigger the sections animations when they are inside or at a specific pixel location on the viewport.

               

              im thinking of two methods to do this.

              1. create a static canvas of ex. 1200x900 to represent a browser viewport, and then stack all my sections and control them with code inside animate CC (.oam), for this to work i'll need to figure out how to get the mouse scroll into Animate CC.

               

              2. another idea i have is, to create an Animation (.oam) with a very long canvas height, ex. 3-4000px, this will invoke a scroll in container html, problem now is, how would i test to see if x element position at ex. 2500px is inside viewport or not.

              in an ideal world, i would create a controller movieclip i could place anywhere within animation CC, and if this is within viewport it'll execute some private function to do stuff... (play, call function etc.)

               

              did that make more sense ?.

              • 4. Re: getting mouse scroll in pixels
                Colin Holgate MVP & Adobe Community Professional

                Thinking about it more, the way I said would mean that if the user continued to scroll for a while after getting to the end, they would have to do the same amount of scrolling before it started moving again. Here's a better approach:

                 

                var f = Math.max(0,Math.min(this.totalFrames-1,this.currentFrame+wheelAmountSinceLastUpdate));

                this.gotoAndStop(f);

                 

                wheelAmountSinceLastUpdate would be a positive or negative number, or zero if the user hasn't scrolled since the last update.

                1 person found this helpful
                • 5. Re: getting mouse scroll in pixels
                  mads nyl larsen Level 1

                  @Colin thanks for your answer.

                   

                  how do i connect the two, jQuery and Animate CC.. or what im guessing would happen is jQuery and my .oam animation, since i can't find any information on how to execute jQuery code from within Adobe Animate CC (not edge ).

                   

                  i properly have to mention, that im not that rutined in JS or css (im a designer), i do have a fair bit experience with actionscript, OOP etc. so i understand the concept of the code but implementation will take a bit more effort .

                  • 6. Re: getting mouse scroll in pixels
                    Colin Holgate MVP & Adobe Community Professional

                    I don't know JQuery well enough to fully understand the mouse wheel code, not even the bits that not in Italian! But, that code could be a function in your window HTML, inside <script> tags. Then from Animate you would call the window function like this:

                     

                    var wheelAmountSinceLastUpdate = window.getMouseWheelMoveAmount();

                     

                    getMouseWheelMoveAmount would be the window function, and it would return how much the mouse wheel has been scrolled since the last time it was asked.

                    1 person found this helpful