Flex tutorial: Enabling track pad or mouse wheel scrolling on Mac OS X

February 5, 2009

A couple of months back when Steve Jobs announced the new unibody MacBook Pro, I couldn’t resist and decided to switched to Mac. As I was settling in to the new OS, I was surprised when I learned that Flex applications do not support track pad (or mouse wheel) scrolling on the Mac OS X. This issue has been filed in the Adobe bug system, but they have yet to resolved it.

Good news is, Gabriel Bucknall has came out with an elegant solution. It’s built upon SWFObject, basically a small Javascript file used to embed Flash content (read my post on using SWFObject to embed Flash content here).

Here’s what you need to get it working using Flex Builder:

  • Embed your Flash content using the SWFObject method. (see previous post)
  • Include “swfmacmousewheel2.js” file into the “html-template” folder
  • Replace the codes within “index.template.html” file with the codes below
  • Lastly, in your application add the line “MacMouseWheel.setup( this.stage );” within the application’s addedToStage event listener

Note: If are trying this out on your local machine, you may get a security sandbox violation error #2060. You need to deploy it on a local/remote web server to get it working. I can’t find a way to get around this. Tried including crossdomain policy file, changing the params value when embedding, and tweaking the compiler options but to no luck. Let me know if anyone found a solution to this.

Demo:
Trackpad/Mousewheel Scrolling on Mac (view source enabled)

Source Codes: index.template.html


<!-- saved from url=(0014)about:internet -->
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="history/history.css" />
<title>${title}</title>
<script src="AC_OETags.js" language="javascript"></script>
<script src="history/history.js" language="javascript"></script>

<style>
body { margin: 0px; overflow:hidden }
</style>

</head>

<body scroll="no">
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="swfmacmousewheel2.js"></script>
<script type="text/javascript">

	var flashVars = {};

	var params = { play: "true",
				   loop: "false",
				   quality: "high",
				   wmode: "window",
				   allowscriptaccess: "sameDomain" };

	var attributes = { id: "${application}" };

	swfobject.embedSWF( "${swf}.swf",
						"divContent",
						"100%", "100%",
						"9.0.0",
						"expressInstall.swf",
						flashVars,
						params,
						attributes );

	swfmacmousewheel.registerObject( attributes.id );

</script>

<div id="divContent">
	<h1>Alternative content</h1>
	<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>

Source Codes: main application


<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	backgroundColor="#F8F8F8"
	addedToStage="onAddedToStage()">

<mx:Script>
<![CDATA[
	import com.pixelbreaker.ui.osx.MacMouseWheel;

	private function onAddedToStage() : void
    {
        if ( this.stage != null )
        {
        	MacMouseWheel.setup( this.stage );
        }
    }
]]>
</mx:Script>

	<mx:Canvas x="28" y="26" width="239" height="332" backgroundColor="#C6DFF6">
		<mx:Text
			x="10" y="10"
			width="201"
			text="The quick brown fox jumps over the lazy dog quick brown fox jumps over the lazy dog..... and then, the quick brown fox jumps over the lazy dog....and then, the quick brown fox jumps over the lazy dog....and then, the quick brown fox jumps over the lazy dog....and then, the quick brown fox jumps over the lazy dog....and then, the quick brown fox jumps over the lazy dog....and then, the quick brown fox jumps over the lazy dog....and then, the quick brown fox jumps over the lazy dog....and then, the quick brown fox jumps over the lazy dog....and then, the quick brown fox jumps over the lazy dog"
			fontSize="18"/>
	</mx:Canvas>
	<mx:Label x="28" y="366" text="Place your cursor within the canvas and scroll using the mouse wheel or trackpad." fontSize="12"/>
</mx:Application>

  This blog is powered by WordPress with GimpStyle Theme design by Horacio Bella.