When working with Adobe Flex you may have encountered trouble when trying to get mousewheel functionality to work on Mac OSX. Even though Flex natively supports the MouseWheel event it does not trigger in the browsers that I have tried on Mac (Safari and FF3) – this is probably due to the OS or the browser “stealing” the MouseWheel event for its own purposes.

The solution for this is to get JavaScript to communicate with your Flex application and “forward” the MouseWheel event.

Gabriel @ Pixelbreaker has solved this with a really nice little implementation that he calls SWFMacMouseWheel. Read all about it here.

Step 1
Download the “source and demo” code found below the post. Move the file com.pixelbreaker.ui.osx.MacMouseWheel.as to your Flex 3 project.

Step 2
Create a folder called “js” in your html-template folder. Move the files swfmousewheel2.js and swfobject.js to that folder.

Step 3
In the html-template folder edit the index.template.html file to correspond with the file included in the zip you downloaded. It should contain roughly the following:

var vars = {};
var params = { scale:'noScale', salign:'lt', menu:'false' };
var attributes = { id:'testObject', name:'testObject' }; // give an id to the flash object
swfobject.embedSWF("test_as3.swf", "flashContent", "100%", "100%", "10.0.0", "playerProductInstall.swf", vars, params, attributes );
swfmacmousewheel.registerObject(attributes.id);

Don’t forget to include the two javascript files you copied to the js-folder.

Final step
In your application startup code invoke the following code:

import com.pixelbreaker.ui.osx.MacMouseWheel;
MacMouseWheel.setup( stage );

And you should be set to go.