Flash Player 10.2コンテンツ制作入門：ネイティブマウスカーソル
作成日
6 July 2011
ページ ツール |
必要条件
Flash Professional CS5.5は、Flash Player 10.2のコンテンツを書き出せるFlash Professionalでのはじめてのバージョンです。本記事では、Flash Player 10.2の新機能であるネイティブマウスカーソルの実装テクニックを紹介します。
※Flash Player 10.2の新機能については、「Flash Player 10.2 デスクトップ版の公開と新機能紹介」も合わせてご覧ください。
従来のマウスカーソル表現
Flash Player 10.2ではネイティブマウスカーソル、すなわちOSの提供するマウスカーソル機能を利用できます。従来（Flash Player 10.1まで）は、OSの提供するマウスカーソルを非表示にして、Flash内の表示オブジェクトをマウス座標に追随させることでカスタムカーソルを擬似的に実装することができました。一般的な実装スクリプトは次のようになるでしょう。
Mouse.hide();
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
function mouseMoveHandler(event:MouseEvent):void {
cursor_mc.x = stage.mouseX;
cursor_mc.y = stage.mouseY;
event.updateAfterEvent();
}
※cursor_mcはステージ上に配置したムービークリップインスタンス。
この方法の悩ましい点は、MouseEvent.MOUSE_MOVEイベントで描画更新のためのupdateAfterEvents()メソッドを使っていることです。一般的にMouseEvent.MOUSE_MOVEイベントはEvent.ENTER_FRAMEイベントよりも高頻度でイベントが発生するため、updateAfterEvents()メソッドを実行すると必要以上に画面更新を要求することになり、描画負荷が高まります。
逆にupdateAfterEvents()メソッドを使わない場合には、描画タイミングがEvent.ENTER_FRAMEイベントになるため、ワンテンポ描画が遅れます。マウスカーソルはユーザの入力を最もダイレクトに反映するインターフェイスなので、マウスカーソルの描画が遅れるというのはユーザに不快感を与えてしまう可能性があります。また、カーソルはFlash内部の表示オブジェクトのため、Flashの領域をはみ出してカーソルを表示することはできませんでした。
サンプルを見る：classiccursor.html
ネイティブマウスカーソルのメリット
従来のマウスカーソル演出に対して、新しいネイティブマウスカーソルを利用すると次のメリットがあります。
- マウスカーソルの描画が遅れることがない。
- updateAfterEvent()メソッドを使う必要がないため、描画負荷を下げることができる。
- Flash領域からマウスがはみ出ていても表示できる。
サンプルを見る：nativecursor_1.html
ネイティブマウスカーソルの実装方法
図2のサンプルについて実装方法を解説します（サンプル：nativecursor_1.fla）。
STEP01 ActionScript3.0の新規FLAファイルを作成します。
STEP02 あらかじめムービークリップシンボルを作成します。ネイティブマウスカーソルでは指定できる大きさが32x32pxまでなので、上限のサイズを32×32pxとしてグラフィックを作ります。
STEP03 ［ライブラリ］パネルからシンボルを選択し、右クリックメニューから［プロパティ］を選択します。
STEP04 ［ActionScript用に書き出し］にチェックを入れます。自動的に［1フレーム目に書き出し］の部分にチェックが入り、［クラス］の箇所にはシンボル名と同じ名称が（別名、［ASリンケージ］といいます）、［基本クラス］には「flash.display.MovieClip」が入力されます。次に［OK］ボタンをクリックします。このシンボルはActionScriptでのみ使用し、画面にムービークリップシンボルとして配置しないのでActionScriptクラスとして設定しています。
STEP05 ルートの1フレーム目のフレームアクションに次のActionScriptを記述します。
// ムービークリップを作成
var mc:MovieClip = new MyCursor();
var vec:Vector.<BitmapData> = new Vector.<BitmapData> ();
vec[0] = new BitmapData(32,32,true,0x0);
vec[0].draw(mc);
var cursorData:MouseCursorData = new MouseCursorData();
cursorData.hotSpot = new Point(0,0);
cursorData.data = vec;
Mouse.registerCursor("myCursor", cursorData);
Mouse.cursor = "myCursor";
ネイティブマウスカーソルは、MouseCursorDataクラスによるカーソルの設定と、Mouseクラスへのカーソルの登録という2つの手順で利用可能になります。マウスカーソルの形状を設定するには、MouseCursorDataインスタンスのdataプロパティにVector.<BitmapData>型を代入します。今回のサンプルでは［ライブラリ］パネルでASリンケージとして設定した「MyCursor」クラスを使いたいので、BitmapDataクラスのdraw()メソッドを利用してMyCursorインスタンスのキャプチャを撮影し、MouseCursorDataインスタンスのdataプロパティに設定しています。
STEP06 ムービープレビュー（Windowsは［Ctrl］+［Enter］キー、Macは［Command］+［Return］キー）で動作を確認します。
ムービークリップのアニメーションをネイティブマウスカーソルに使う
マウスカーソルをアニメーションさせたい場合はどのようにすればいいのでしょうか。ネイティブマウスカーソルのMouseCursorDataクラスには「frameRate」というプロパティが存在します。これはdataプロパティで設定したVector.<BitmapData>配列に格納されたBitmapDataを更新するfpsを示しています。そのためムービークリップのアニメーションはあらかじめVector.<BitmapData>配列に格納する準備が必要になります。
アニメーションを設定したネイティブマウスカーソルを作成してみましょう（サンプル：nativecursor_2.fla）。
STEP01 今回は「Indicator」という名前のムービークリップを作成し、タイムラインでアニメーションを作成しておきます。
STEP02 先ほどと同様にムービークリップシンボルのクラス名（ASリンケージ）を「Indicator」として設定します。
STEP03 次にルートの1フレーム目に以下のフレームアクションを記述します（一部抜粋）。createIndicatorBmds()メソッドの箇所が、タイムラインで作成したアニメーションをVector.<BitmapData>配列に変換する処理になります。このメソッドで作成したVector.<BitmapData>配列は、MouseCursorDataインスタンスのdataプロパティに代入しています。
var cursorData:MouseCursorData = new MouseCursorData();
cursorData.hotSpot = new Point(0,0);
cursorData.data = createIndicatorBmds();
cursorData.frameRate = 30;
Mouse.registerCursor("busyCursor", cursorData);
// BitmapData型のVector配列を作成;
function createIndicatorBmds():Vector.<BitmapData>{
// ムービークリップを作成
var mc:MovieClip = new Indicator();
// ムービークリップの大きさ
var w:int = 24;
var h:int = 24;
// ムービークリップのフレーム数を取得
var len:int = mc.totalFrames;
var vec:Vector.<BitmapData> = new Vector.<BitmapData> ();
// 全フレームをBitmapDataでdraw()する
for (var i:int = 0; i < len; i++) {
// フレームを移動
mc.gotoAndStop(i + 1);
// BitmapDataを作成しdraw()を実行
vec[i] = new BitmapData(w,h,true,0x0);
vec[i].draw(mc);
}
return vec;
}
STEP04 ムービープレビュー（Windowsは［Ctrl］+［Enter］キー、Macは［Command］+［Return］キー）で動作を確認します。
サンプルを見る：nativecursor_2.html
おわりに
今回はムービークリップシンボルを使う方法を紹介しましたが、MouseCursorDataのdataプロパティはVector.<BitmapData>型であればどのような方法でソースを用意してもよいので、利用しやすい方法で実装してみるとよいでしょう。
関連記事
More Like This
- ADC MEETUP ROUND03 レポート SESSION1: General Session from Adobe MAX 2011
- ADC MEETUP ROUND03 レポート HTML SESSION2： Adobe new tools : Introduction of Edge, Muse and Proto
- ADC MEETUP ROUND03 レポート HTML SESSION3： HTML5でユーザビリティを高めるためのフォーム構築法
- ADC MEETUP ROUND03 レポート HTML SESSION4： Design Tips & Development with jQuery Mobile and PhoneGap
- ADC MEETUP ROUND03 レポート Flash SESSION2： Stage3Dの利用で広がるFlashの表現と可能性
- Flashでマルチデバイス向けのアプリを効率的に開発しよう 前編
- ［コードスニペット］パネルで作るシンプルなモバイルゲーム
- Stage3Dコンテンツ制作入門
- SWCを利用したFlash制作の分業ワークフロー：FlashとFlash Builder連携開発
- ADC MEETUP ROUND 04「Social Gaming」レポート SESSION1：ソーシャルゲーム市場とアドビFlash戦略
