Powered by SmartDoc

Wii Flashを使ってみよう(ActionScript編)

2009年3月8日最終更新
白井暁彦
shirai at mail.com
http://akihiko.shirai.as/projects/BookWii/

目次

WiiFlashの基本機能

環境設定 (CS3のセットアップ DLとインストール)

WiiFlashのダウンロードとセットアップ

WiiリモコンをFlashとつなげることで、WebサイトのようなコンテンツをWiiリモコンで扱うことができます。この章ではWindows(XP

Professional SP2)とMacintosh(OSX 10.5)【○ページより】に分けてFlashに接続するまでをご紹介します。

-WiiFlashの仕組みWiiFlashを触る前に、WiiFlashの仕組みについて理解しましょう。WiiFlashはWiiリモコンとFlashを通信するための仲介をします。

WF.png

○章で扱ったように、Bluetoothを利用して、Wiiリモコンとパソコンを繋げました。FlashとWiiはWiiFlashというソフトを利用して、繋げることができます。

WiiFlashとはJoa EbertとThibault Imbertという2人のデヴェロッパにより、WiiリモコンとFlash® applicationsを繋げられるように開発された無料で使えるプロジェクトです。WiiFlashは2つのパートに分けられて提供されています。WiiFlash Server C++もしくは、.NET serverを利用して作られたバイナリソケットサーバーで、Wiiリモコンからの情報をFlashが扱える形に変化して通信します。

WiiFlash ActionScript API (SWC component) WiiFlashサーバーからの通信に対して、プログラムしやすいように提供されているのが、このActionScript(Flashのプログラミング言語) APIになります。このAPIにより、あまり通信をしている事を意識せずに、プログラムができます。

また、WindowsとMacintosh(以下Mac)に対応していますので、より多くの環境で楽しむことができます。ただしWindowsとMacではできる事が違うので注意しましょう。

■環境設定○FlashCS3のインストールまずは一般的なFlashの開発環境であるAdobe Flash CS3(http://www.adobe.com/jp/products/flash/)をパソコンインストールしましょう。ソフトウェアは購入しなくとも、体験版が利用できます。体験版は1ヶ月有効ですので、もし気に入ったら購入しましょう。

-Adobe Flash CS3 Professionalのダウンロード1.Adobeサイトを開きます。(http://www.adobe.com/jp/downloads/) [FlashR CS3 Professional]-[体験版]を選択

※ダウンロードにはAdobe IDが必要になります。

2.インストールダウンロードしたパッケージ(ZIPファイル)を解凍し、付属のインストールガイド(Readme.txt)を参照の上インストールしてください。

3.アプリケーションを起動インストールが完了したらアプリケーションを起動して確かめてください。体験版利用の場合にはソフトウェアのライセンスキー確認画面が出ますが、30日以内でしたら[体験版として使用する]をクリックすれば、通常版と同じ機能が使えます。▲体験版キャプチャ

WiiFlashを利用する

-.NET Framework 3.0が必要です。※Windowsのみ

WiiFlash Serverは「Microsoft .NET Framework 3.0 Redistributable Package」が必要になります。(http://www.microsoft.com/japan/msdn/windowsvista/general/netfx30.aspx)

-ダウンロード1.WiiFlashサイトを開きます。(http://wiiflash.bytearray.org/)左側のメニューにある[PAGES]-[Download]を選択します。▲サイトキャプチャ

画面から[Download WiiFlash]をクリックし、ファイルをダウンロードします。執筆時のバージョン(○○○○○)▲サイトキャプチャ

○WiiFlashの展開-ファイル内容について・WiiFlash Server (latest version)・WiiFlash API (SWC, sources)・Documentation・CS3 Examples (.fla)

■環境設定【Macintosh】○FlashCS3のインストールWindowsと同じです。

○WiiFlashを利用する-ダウンロード1.WiiFlashサイトを開きます。(http://wiiflash.bytearray.org/)左側のメニューにある[PAGES]-[Download]を選択します。▲サイトキャプチャ

画面から[Download WiiFlash]をクリックし、ファイルをダウンロードします。執筆時のバージョン(○○○○○)▲サイトキャプチャ

○WiiFlashの展開-ファイル内容について・WiiFlash Server (最新バージョン)・WiiFlash API (SWC, sources)・使い方ドキュメント・CS3 Examples (.fla)

○WiiFlashの基本機能

リモコン名系統機能Windows Macintosh

Wiiリモコン【イベント系】接続ができているのか

O O

接続ができたO O

接続が切れたO O

ヌンチャクが接続されているかO O

ヌンチャクが接続されたO O

ヌンチャクが外れたO O

赤外線1点目感知O

赤外線1点目消失O

赤外線2点目感知O

赤外線2点目消失O

【ボタン系】十字キー(上下左右)O O

AボタンO O

BボタンO O

+ボタンO O

−ボタンO O

HOMEボタンO O

?ボタンO O

?ボタンO O

電源ボタンX X

【3軸加速度センサー】X軸の加速度O O

Y軸の加速度O O

Z軸の加速度O O

Yaw値O O

Pitch値O O

Roll値O O

【赤外線-IR】1点目O

2点目O

1点目のX値O

1点目のY値O

2点目のX値O

2点目のY値O

【その他】バッテリーレベルO O

バイブレーションO Oヌンチャク【ボタン系】StickX O O

StickY O O

CボタンO O

ZボタンO O

【3軸加速度センサー】X軸の加速度O O

Y軸の加速度O O

Z軸の加速度O O

Yaw値O O

Pitch値O O

Roll値O O

バランスボード左上の圧力

右上の圧力

左下の圧力

右上の圧力

○WiiFlashのデモファイルでテストする-WiiリモコンでテストするまずはWiiリモコンでテストしましょう。Wiimote Demo.fla Wiiリモコンをパソコンに繋げて、WiiFlashサーバーを立ち上げましょう。すると下記画面のように「1 Wiimote(s) found」と表示されれば繋がっているので、▲WiiFlash Serverキャプチャ(Windows)

WiiFlash Serverキャプチャ(Mac)

ダウンロードしたパッケージの中にある[cs3-examples]-[Wiimote Demo.fla]を開きましょう。このファイルでは、電源ボタンを除く、Wiiリモコンのボタン全てと「Sensor X」「Sensor Y」「Pitch」「Roll」「Yaw」と「Battery level」が確認できます。ボタンを押して動作を確認しましょう。

確認ができたら、今度はファイルの構成を見てみましょう。

新規でWiiFlashを使用したアプリケーションを作る際には、必ずAPIが入っている[org]フォルダをflaファイルと同じディレクトリに入れて作成を開始しましょう。また、ライブラリの[synchronize]というムービークリップも必要となりますので忘れずにコピーしましょう。

○プログラムの解説このサンプルファイルのスクリプトについて重要な部分のみを解説しましょう。

WiiFlashのライブラリをインポートする。import org.wiiflash.Wiimote; import org.wiiflash.events.ButtonEvent; import org.wiiflash.events.WiimoteEvent; import flash.events.*;

Wiiリモコンをインスタンス化して、使えるようにします。var myWiimote:Wiimote = new Wiimote();

WiiFlash Serverに接続します。myWiimote.connect ();

エラーや接続状況などを管理する[synchronize]というムービークリップをインスタンス化し、画面に配置します。var mySynchronize:Synchronize = new Synchronize(); addChild( mySynchronize ); mySynchronize.x = (stage.stageWidth - mySynchronize.width) / 2; mySynchronize.y = (stage.stageHeight - mySynchronize.height) / 2

エラーなどのイベントハンドラを登録します。myWiimote.addEventListener( Event.CONNECT, onWiimoteConnect ); myWiimote.addEventListener( IOErrorEvent.IO_ERROR, onWiimoteConnectError ); myWiimote.addEventListener( Event.CLOSE, onCloseConnection );

○動作のテスト▲サンプルキャプチャ【ボタン】ボタンを使うにはまず、イベントの登録をします。試しに、Aボタンの押すと画面の色が変わるサンプルを作ってみましょう。ボタンのイベント登録は基本的に[on]と[off]を設定します。[ButtonEvent.A_PRESS]はAボタンが押された際にイベントを発動します。[ButtonEvent.A_RELEASE]はボタンが離された際にイベントを発動します。myWiimote.addEventListener( ButtonEvent.A_PRESS, onAPressed ); myWiimote.addEventListener( ButtonEvent.A_RELEASE, onAReleased);

Aボタンが押された際にイベントが発動して、呼ばれるメソッドがこちらです。画面に配置された[color_mc]のフレームを2フレーム目に変更します。それにより、背景が赤くなります。function onAPressed ( pEvt:ButtonEvent ):void { color_mc.gotoAndStop(2); }

Aボタンが離された際にイベントが発動して、呼ばれるメソッドがこちらです。画面に配置された[color_mc]のフレームを元の1フレーム目に変更します。それにより、背景が白くなります。function onAReleased ( pEvt:ButtonEvent ):void { color_mc.gotoAndStop(1); }

このようなスクリプトは予め用意してあるので、このメソッドのなかみを変更するだけで簡単にWiiリモコンを使ったFlashのアプリケーションが作れます。

【3軸方向加速度センサー】▲サンプルキャプチャ次に値が常に変化する3軸方向加速度センサーを例に、UPDATEイベントを解説しましょう。[WiimoteEvent.UPDATE]は、3軸方向加速度センサーや、赤外線の位置など常に値が変化するものを取得するために作られています。このUPDATE関数は一定間隔で更新されるので、常に値の変化を監視する際に使います。

-イベント登録まずは、このUPDATE関数が使えるように、イベントの登録をします。myWiimote.addEventListener( WiimoteEvent.UPDATE, onUpdated );

-メソッド定義画面上の[sensor_txt]にsensorXとsensorYの値を表示します。このメソッドの中に書かれたものは一定間隔で更新されます。

function onUpdated ( pEvt:WiimoteEvent ):void{
sensor_txt.htmlText += "Sensor X : " + String ( pEvt.target.sensorX ) + \
    "<br>Sensor Y : " + String ( pEvt.target.sensorY );
}
WF-AdobeID.png
WF-CS3.png
WF-Demo.png
WF-DL.png
WF-DLCS3.png
WF-FW3.png
WF-Mac.png
WF-Tree1.png
WF-Tree2.png

サンプルのテストでみる基本的な使い方

WiiFlashプロジェクトサンプル

なりきりライトセーバー(原さん)

おえかき(尾崎さん)

DropShadow(尾崎さん)

ChunChun(原さん)