weka::blog

The wheel button of our mouses is a prime. Everyone loves it. But how much Flash is wheel-friendly?

ActionScript 2

Flash allows the use of the mouse wheel button to scroll text fields. But not always. If you’re working in an AS2 project, your text field must be selectable to the wheel work properly over it. Otherwise you have to register a listener with Mouse class to help you do detect the wheel movement and act accordingly. It also will be the way if you want objects other than text fields to react to the “onMouseWheel” event.

Take a look at this example (code, project):

This code seems to do the job but it brings some caveats:

• The SWF needs to be the focused object so it can capture the wheel event;
• You have to click outside the object (at any point of the HTML page) to get back the browser wheel scrolling.

Of course, that’s not the an expected behavior (for a non-flasher!) and, therefore, breaks the user experience.

ActionScript 3

Using AS3 can make your life a lot easier as non selectable texts can be scrolled normally and (probably because AS3 event bubbling mechanism) the browser scrolling get back to life when one of the edges of the scrolling text field is reached.

Download (code, project).

Still, you have to click on the Flash object so it can capture the wheel event. Also, Flash can’t know if you want an InteractiveObject other than the TextField to respond to the wheel, so you have to do it programaticly. (Notice that you shouldn’t have both Flash and the browser responding that event).

So what?

Well… After some research, I’ve found a JavaScript code that help developers to create HTML controls which use the wheel button to deliver some functionality to the user. Mixing with some AS code it can help you to fix the usability issues explained early. In a few words:

• First, you have to setup the Adomas’s solution to detect the wheel event with JS and tell (through ExternalInterface) the Flash object when it happens;

On the Flash side you normally will loop over an array of “wheelable” objects to see if some of them will react to the event (probably using hitTest/hitTestPoint).

• And then you tell the browser if it should prevent the scroll or not.

I did two very simple examples using AS2 (source) and AS3 (source).

Notice that you don’t need to click on flash object (the grayed area) and when there’s no more text to scroll, the browser scrolling works again!

Conclusions

To summarize, these are the scenarios that may lead you to use this solution:

Using AS3

• You want your scrolling object to work even if the flash object isn’t the focused object on the page;
• You want to use mouse wheel to interact with objects other than text fields and prevent browser default behavior.

Using AS2

• Same reasons above;
• You want your non selectable text field to be wheel scrollable;

PS’s

• The code was written trying to simplify things out. A real-world project probably would have more widgets that can be scrolled so is best (for you) define some classes to encapsulate the wheel functionality on each object. Would be nice to pack this idea into a “solution”. I’ll try to to this someday.

• The code references _root (yeah, the evil one) a couple times on it. Since hitTest use “global coordinate space” I think that, in this case, _root can be used without adding any weight on our shoulders.