SWFWheel(旧HigeWheel)というMacでもマウスホイールイベントを受け取れるようにするオープンソースのASライブラリのサンプルと解説です。
(2.4 8:52内容を大幅に更新しました。SWFObject非依存でした。すばらしい。)
Adobe MAX 2009はSparkProjectの講演で知ったライブラリ。今まではMacMouseWheelというライブラリを使っていましたが、Window版Safari 3に非対応だったり微妙に不安定だったので乗り換えてみました。
そもそもなぜこのようなライブラリが必要か？
マウスのホイールを利用してなんらかの動作をFlashでおこなせたい場合、AS3ならばMouseEvent.MOUSE_WHEELというイベントが起きるかを監視（addEventListener）すればいいのですが、Macでは今までマウスホイールというデバイスがAppleの公式？で存在しなかったためか、このイベントが取得できないという事態になっていました。（ちなみにFlash Player 10.0.2.54ではスタンドアロン版に限りMac OS Xでもホイールイベントが取得できる模様）
つまり、基本的にMac上のFlashPlayerでマウスホイールイベントを受け取る手段が無かったのです。
そこでJavaScriptでマウスホイールの動作を監視し、FlashとJavaScriptで通信を行う事で、MacでもFlashからマウスホイールの動作を監視することができるようになりました。それが、MacMouseWheelという素敵ライブラリで、pixelbreakerさんが制作して2008年に公開されました。
しかしこのライブラリ、pixelbreakerさんがMacユーザーだからか？Windowsで起きる挙動に関してはあまりご熱心に対応されていない？ようで、Windows版のSafariなどにはなかなか対応してくれませんでした。（あとJavaScriptにもエラーがあったり不安定だったりもろもろいまいち）
そんな折に、Humming Via Kitchenのsoundkitchenことnobuさん（自分ことfeb19もnobuだったりして）がMacMouseWheelを改良し、HTMLにJSファイルをロードさせる必要を無くし、SWFObjectに依存しないようにし、クロスプラットフォームの検証・対応も行ったHIGEWheelを開発。名称を変更してSWFWheelという今に至る、という感じのようです。オープンソースって素敵ですね。
というわけで、先日とあるプロジェクトで使わせていただきました。ありがとうございました。今後も使わせていただきます。今の所当方問題ないようです（Windows XP用 IE6, IE7, FireFox 3, Safari3, Mac OS X Leopard Safari 3, FireFox 3）。
使い方とサンプル
使い方はオフィシャルなページに書かれている事が実は全てで、特筆すべき点は無いのですが、一応下記にHTMLの例を示します。ここではSWFObjectを使っています。
全画面のフルFlashページにするとして、以下のようなHTMLを書きます。一応あえてXHTML 1.0 Strict/UTF8で。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta name="keywords" content="" lang="ja" />
<meta name="description" content="" lang="ja" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="JavaScript" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfaddress.js"></script>
<script type="text/javascript">
var vars = {};
var params = { scale:"noscale", menu:"false", allowScriptAccess:"samedomain", allowFullScreen:"true" };
var attributes = { id:"flashContent", name:"flashContent" };
swfobject.embedSWF("index.swf", "flashContent", "100%", "100%", "9.0.45", "js/expressInstall.swf", vars, params, attributes );
</script>
<style type="text/css">
/* hide from ie on mac \*/
html {
height: 100%;
overflow: hidden;
}
#flashContent {
height: 100%;
}
/* end hide */
body {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="flashContent"></div>
</body>
</html>このとき、JavaScriptとFlashを通信させるため、allowScriptAccessを"always"か"samedomain"にして、許可してやるのがミソ。
あと変数attributeで示しているように、idとnameを両方指定することが必要。
ASはこんな感じ。
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import org.libspark.ui.SWFWheel;
public class MouseWheelTest extends Sprite
{
private var sp:Sprite;
public function MouseWheelTest()
{
sp = new Sprite();
sp.graphics.beginFill(0xff0000);
sp.graphics.drawRect(0, 0, 100, 100);
sp.graphics.endFill();
addChild(sp);
SWFWheel.initialize(this.stage);
this.stage.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);
}
private function mouseWheelHandler(e:MouseEvent):void
{
trace(e.delta);
sp.y += e.delta;
}
}
}注目すべきは、HTMLでswfwheel.js的なファイルを読み込む必要がなく、ASでSWFWheelクラスをimportして、initializeメソッドでstageを指定してやれば、マウスホイールイベントを発信してくれるようになるということ！
//この部分
SWFWheel.initialize(this.stage);つまりステージをSWFWheel.asに関連付けるだけ！
というわけで、これらのフルセットはこちら。SWFObjectと、SWFWheel、ついでにSWFAddressも含めています。
せっかくFlashは殆どの部分でWindows、Mac、そしてLinuxなどOS間で差異がない挙動をしてくれるすばらしいテクノロジーだと思うので、後少しの差異の部分をAdobe含め自分たちFlashクリエイターが埋めていってあげてやりたいと思う次第であります。
ちなみにHTMLやCSS、JavaScriptについて、自分はそんなに強くないので、もっとうまいやり方があるようでしたらコメントください。
