In my current job I have been programming user interfaces for applications that display networks of data (as in nodes, links etc.) with the Adobe Flex framework, and the UI paradigm I have been utilizing is a kind of a Zoomable User Interface (ZUI). The idea there is to enable the user to view and manipulate objects on a two-dimensional plane, and navigate around that plane by zooming and panning.
Now, the easiest way (at least for me) to control the zooming is to use the mouse wheel. Mouse wheel support for Flex is implemented by registering an event listener of type MouseEvent.MOUSE_WHEEL with the DisplayObject that would dispatch the event. Sadly, mouse wheel support is not available in the Mac OS X version of Flash Player. This prompted me to create a custom solution, as my main computer is a MacBook and I would like to be able to test the mouse wheel navigation with my development machine.
Update #3: Added statement about licensing the code under the MIT License as per request of Philip Flip Kromer
Update #4 (feb 8, 08): If you’re looking for AS3 (not Flex) OS X mouse wheel support, check out PixelBreaker.com.
Update #5 (feb 12, 08): Fljot sent me a version of this that works also in non-Flex AS3 projects. He also fixed some issues in the code related to the automatic registration of listening objects. You can find him here.
The solution has been tested with
Firefox 2 and Safari 2 Firefox 2, Safari 2, Opera 9, Camino 1.5 and Omniweb 5.5, and it is based on two main elements:
- An ActionScript 3 singleton class ExternalMouseWheelSupport that registers an ExternalInterface callback for the function call and makes objects that are under the mouse cursor dispatch MouseEvents of type MouseEvent.MOUSE_WHEEL
Just include the osxmousewheel.js file in your HTML and specify the ids/names of your flash object element and the div element that contains the flash object:
var mw_flashMovieId = "flashMovie"; // the id/name of your flash app's HTML DOM element
var mw_flashContainerId = "flashContainerDiv"; // the id/name of the flash element's surrounding div element
The singleton has to be created first, and that can be done by getting a reference to the instance property in at least one place:
private var _mwSupport:ExternalMouseWheelSupport = ExternalMouseWheelSupport.instance;
Then, all objects that you want to have the OS X mouse wheel support enabled for have to be registered with the ExternalMouseWheelSupport class. This can be done in two ways:
This is the more foolproof way. First make sure that the registerAutomatically property is set to false (it is true by default):
Then just register the objects one by one:
or several at a time:
This is the easier, but more bug-prone way. Simply make sure that the registerAutomatically property is set to true (it is true by default, so you actually don’t even need to do this):
After that, all InteractiveObjects on the stage should dispatch mouse events, so you can normally attach event listeners to them and do whatever you want in them:
t.text = ("Mouse wheel delta: "+event.delta);
The code could probably use some debugging and optimization, but it seems to work well if you’re not doing anything too fancy. If you take it and make any fixes, please let me know! ;)
This code is distributed under the MIT License.