Flash MouseWheel event on ALL browsers

Cut a long story short – took me a long time to find a solution to support Flash MouseWheel on all browsers, Windows AND Mac.

You can see this live here: http://www.pairhaps.com

This solution is a combination of two technics, and as of today (March 2013) supports ALL browsers on Windows and Mac:
First, loading an AS2 SWF from internal byteArray (that version still supports mouseWheel), this works for IE. download the class here: http://etcs.ru/blog/as3/mousewheel_v11_update/
Second, adding JS function that listens to mouseWheel event and passes it to Flash via ExternalInterface (DOM).Each browser needs its own function because of the differences in the event object.

For efficiency my implementation is testing the browser user agent on the server (PHP) and writing the correct JS function to support the mouseWheel event on that browser.

The JS functions are as follows:

Windows:Firefox:

window.addEventListener("DOMMouseScroll", handleWheel, false);
function handleWheel(event)
{
var app = swfobject.getObjectById("FLASH_OBJECT_ID");
var _x = event.clientX;
var _y = event.clientY;
var _delta = event.detail;

if (app) {
var o = {x: _x, y: _y, delta: _delta, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey};
app.handleWheel(o);
}
event.preventDefault();

}

Windows:Chrome:

window.addEventListener ("mousewheel", handleWheel, false);
function handleWheel(event)
{
var app = window.document["${application}"];
var _x = event.screenX;
var _y = event.screenY;
var _delta = event.wheelDelta * 4;
if (app) {
var o = {x: _x, y: _y, delta: _delta, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey};
app.handleWheel(o);
}
}

Mac:Safari:

window.onmousewheel = deltaDispatcher;
function deltaDispatcher(event)
{
var app = swfobject.getObjectById("FLASH_OBJECT_ID");
var _delta = event.wheelDelta/60;
var _x = event.screenX;
var _y = event.screenY;
if (app) {
var o = {x: _x, y: _y, delta: _delta, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey};
app.handleWheel(o);
}
if(event.preventDefault)event.preventDefault();
}

And in Flash AS main class:

import utils.MouseWheel;

After added to stage add these:

ExternalInterface.addCallback("handleWheel", handleWheel);
stage.addEventListener(Event.ACTIVATE, flashActive);
stage.addEventListener(Event.DEACTIVATE, flashDeactive);

And finally, add these fundtions:

private function handleWheel(event:Object) : void
{
var obj : InteractiveObject = null;
var mousePoint : Point = new Point(stage.mouseX, stage.mouseY);
var objects : Array = stage.getObjectsUnderPoint(mousePoint);

for (var i : int = objects.length - 1; i >= 0; i--) {
if (objects[i] is InteractiveObject) {
obj = objects[i] as InteractiveObject;
break;
}
else {
if (objects[i] is Shape && (objects[i] as Shape).parent) {
obj = (objects[i] as Shape).parent;
break;
}
}
}

if (obj) {
var mEvent : MouseEvent = new MouseEvent(MouseEvent.MOUSE_WHEEL, true, false,
mousePoint.x, mousePoint.y, obj,
event.ctrlKey, event.altKey, event.shiftKey,
false, Number(event.delta));
obj.dispatchEvent(mEvent);
}
}
private function flashActive(event:Event):void
{
MouseWheel.capture();
}
private function flashDeactive(event:Event):void
{
MouseWheel.release();
}

Leave a Reply

Your email address will not be published. Required fields are marked *