feb19.jp

Nobuhiro Takahashi
Designer / Engineer

SWFWheelを使う

SWFWheelを使う

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について、自分はそんなに強くないので、もっとうまいやり方があるようでしたらコメントください。

Navigation

prev: auのデータカード「W06K」をMacBook Proで使う
next: USB加湿器

Recently Entries