Finally! Touchpad and Mouse wheel scrolling for your Flash application

[tweetmeme source=”@hiraash” only_single=false]Scrolling is a feature that has been around us since the time of window based operating systems. Eventually when the scroll enabled mice and touch-pads were available, the scrolling experience became better. Today with mac’s magic mouse and touch pads, scrolling around and navigating in a window has become a unbelievably seamless experience. Sadly still today’s browsers and Flash Player are not fully capable of providing these capabilities to the application developers.

Until today Flex or Flash Player mouse events do not contain a deltaX property or any other method of identifying a horizontal mouse scroll. Simply put there is no current way of identifying horizontal mouse scroll within Flash Player. Getting out of flash, even Javascript doesn’t have a standard way to capture mouse based scrolling. This solution from FlexAmphetamine is by far the best one I have come across. Works pretty well but in limited environments.

So I took this solution and put it together with flex to enable scrolling for your flash based applications. All I have done is captured the js events and forced a scroll on any scrollable control within the application. Attached is the actionscript class that does this. By simply attaching this class to your project you can get Mac mouse/touchpad based scrolling working on you flash application. The test application is also within the source zip. Tested on Mac Firefox 3.6/Safari 5/Chrome 5.

See it work on Creately now.
Download the source

Image from: gadgetsreport.com

Advertisements

13 thoughts on “Finally! Touchpad and Mouse wheel scrolling for your Flash application

  1. Hey Hiraash, great post! A big headache issue and u’ve come with the solution! Kudos!
    BTW, the “download source code” link seems to be missing!

    1. Today it’s working…cheers! New question. In my datagrid, scrolling down by mouse wheel now works, but when I scroll up, it immediately jumps to the top of the data grid. How do we get even scrolling both down and up? Thanks.

      1. Hey Marc, Really sorry about the delayed response. Everything has been very hectic after my holiday.
        About your question. I didn’t particularly see this behavior anywhere. However one problem that occurs with this solution is that this assumes that all controls have the same scroll step as 1 pixel. A data grid would scroll by rows. So when the ScrollHelper request the data grid to scroll 10 pixels, the datagrid actually scrolls 10 rows. The problem can be solved in multiple ways. If you are just using the scroll helper only for the datagrid, you can customize it to get the scroll size and then scroll accordingly. If it is used application-wide, you will need to implement a interface which will provide the step size to the ScrollHelper. This means extending controls that have the scrolling problem. You can avoid this for controls that extend the mx.core.Container object since they already provide the horizontalLineScrollSize and verticalLineScrollSize properties. I will be improving the ScrollHelper when I get a chance. Do let me know if it may be useful for you anytime sooner.

  2. Hi, just came around your post cause I want to enable touchpads horizontal scrolls from windows laptops and mac machines. I use a spark skinnablecontainer – I cannot make your code work – is it still valid with the browsers around today and with flex spark containers? Thanks hiraash, Marc

    1. … I was not able to debug your code, I was able to start your class with addedToStage=”ScrollHelper.instance.setup(this.stage); and set the breakpoint there, but I was unable to catch the _scrollEvent – my breakpoint there is never hit during scrolling.

      1. … now was able to trigger the events from your javascript, but fail inside actionscript – your code is not working with spark containers. Do you have any hint or update making this work?

    2. Hello Marc, Sorry about the delay in responding. I have not tried this code with spark. It would most probably not work, but im pretty sure you should be able to tweak it to make it work on spark. If you have managed to get the ScrollHelper._scrollEvent trigger every time you do a scroll then you should be able to figure out the rest quite easily.

      What the function does is go through all the objects under the mouse pointer to find out which is top most scrollable object. If the scrollable object is in a scrollable state then the next set of code would make that specific object scroll by the delta, horizontally and/or vertically.

      In flex anything that inherits a Container or a ScrollControlBase class can scroll. What you need to find out is in Spark if this is valid. There may be more/different classes that are capable of doing this in Spark.

      Hope that helps. Let me know if I can help.

Comments are closed.