AS3から実装された、マウスホイールを検知するMouseEvent.MOUSE_WHEELイベントはMacでは動作しない、というのは知っていて、その問題を解消するためのライブラリがあるという話も聞いていたのですが、実際に使ってみる機会に遭遇したので、備忘録もかねて導入までのフローをメモしてみました。ちなみに参考にしたのはfeb19さんの以下の記事：
導入したライブラリはSWFWheelです。実際の導入フローは以下の通り：
SWFWheel.asのダウンロード
まずはasファイルのダウンロード。Spark projectのSWFWheelのページの「ソースコードはこちら」または「リポジトリブラウザで閲覧」からディレクトリを掘っていってSWFWheel.asを見つけてダウンロード。めんどくさい人は以下のリンクを右クリック→「名前を付けて保存」で。
http://www.libspark.org/svn/as3/SWFWheel/trunk/src/org/libspark/ui/SWFWheel.as
SWFWheel.asの配置
ダウンロードしてきたSWFWheel.asはそのまま配置するのではなく、適切なフォルダを作ってその中に配置する。例えば以下のようなフォルダ構成になっていた場合：
- /project/fla/
- flaファイルの格納フォルダ
- /project/as/
- クラスファイル（asファイル）の格納フォルダ
- /project/deploy/
- swfファイルやhtmlファイルの格納フォルダ
/project/as/フォルダの中に「org」フォルダを作成。その中に「libspark
」フォルダを作成。その中にさらに「ui」フォルダを作成し、その中に配置する。実際に作業するflaファイルやそのドキュメントクラス、公開用のhtmlファイルやjsファイルも含めると、全体の構成は以下のようになる。
- /project/fla/
- flaファイルの格納フォルダ
- /project/fla/main.fla
- メインのflaファイル
- /project/as/
- クラスファイル（asファイル）の格納フォルダ
- /project/as/Main.as
- main.flaのドキュメントクラス
- /project/as/org/libspark/ui/SWFWheel.as
- SWFWheel.asの配置場所
- /project/deploy/
- swfファイルやhtmlファイルの格納フォルダ
- /project/deploy/main.swf
- main.flaの出力ファイル
- /project/deploy/main.html
- main.swfを表示するhtmlファイル
- /project/deploy/js/swfobject.js
- swfファイルをhtmlファイルに埋め込むためのJavaScriptライブラリ
HTML側の調整
今回はSWFObject2を使った想定なので、SWFObject 2 HTML and JavaScript ジェネレーター v1.2を使って埋め込みコードを生成。その際、以下の点をチェックする。
- 「Flashコンテンツのid」と「属性：name」を設定する。
- 「Flashコンテンツのid」と「属性：name」の値は同一のものにする。
- allowscriptaccessの値をalwaysにする。
できたサンプルソースは以下の通り。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta http-equiv="Content-Script-Type" content="text/javascript;" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.allowscriptaccess = "always";
var attributes = {};
attributes.id = "flashAreaContent";
attributes.name = "flashAreaContent";
swfobject.embedSWF("main.swf", "myAlternativeContent", "800", "600", "9.0.0", false, flashvars, params, attributes);
</script>
</head>
<body>
<div id="myAlternativeContent">
<a href="http://www.adobe.com/go/getflashplayer_jp">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>
</body>
</html>
SWFWheelクラスのインポートと初期化
ではドキュメントクラスMain.asの記述開始。まずはSWFWheelのインポートと初期化。初期化に使うのはSWFWheel.initializeメソッドで、引数としてステージへの参照を渡す。
package {
import flash.display.MovieClip;
import org.libspark.ui.SWFWheel;
public class Main extends MovieClip{
public function Main() {
SWFWheel.initialize(this.stage); //SWFWheelの初期化。引数としてステージへの参照を渡す。
}
}
}
マウスホイールイベントの検出
次に実際にマウスホイールイベントを検出してみる。マウスホイールイベントのハンドラメソッドで受け取るMouseEventのdeltaプロパティというのがマウスホイールを 1 目盛り回すごとにスクロールする行数を示すそうなので、試しにtraceさせてみる。
package {
import flash.display.MovieClip;
import flash.events.MouseEvent;
import org.libspark.ui.SWFWheel;
public class Main extends MovieClip{
public function Main() {
SWFWheel.initialize(this.stage);
this.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel, false, 0, true);
}
private function onMouseWheel(e:MouseEvent):void {
trace("onMouseWheel:", e.delta);
}
}
}
出た出た。あとはこの値を使って具体的な処理を追加するだけですね。Macで動くかどうかは一通りのファイルをサーバーにアップして確認。で、きちんと動きました。これで問題ありません！
コメントはまだありません »
コメントはまだありません。
この投稿へのコメントの RSS フィード。 TrackBack URL
コメントする