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>

5 Comments »

TrackBack URI

  1. brent says:
    March 10, 2009 at 12:03 am

    I figured out how to get rid of the 2060 error if you’re interested.. Go to the adobe flash player settings, and allow the enclosing folder access.

    http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04a.html

  2. Alekkus says:
    March 11, 2009 at 06:03 pm

    @brent

    Thanks for the link. Will take a look and post an update.

    Cheers

  3. Jan Klosinski says:
    October 17, 2009 at 08:10 pm

    that’s brilliant, thanks mate!

  4. EmpispRip says:
    December 12, 2009 at 09:12 am

    I’m always looking for brand-new blogposts in the net about this issue. Thankz.

  5. Ian Mak says:
    January 19, 2010 at 07:01 am

    I’m having trouble getting this to work with the flex rich text editor… the editor doesn’t seem to pick up the scrolling events. has anyone ever ran into this problem?

Leave a comment

*allowed XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

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