制作事例:僕にはできる。



アクエリアスのスペシャルコンテンツ「僕にはできる。」のFlashを担当させていただきました。

ユニコーンの曲に合わせた決意表明ムービーを作成できるというコンテンツです。
作成した決意表明ムービーを友達に送ったり、スクリーンセーバーにすることもできます。

2010年いっぱいまで公開されている予定なので、みなさんも今年の目標など決意表明しちゃいましょう!

Web Site: http://www.aquarius-sports.jp/possibility/

[追記]
終了しました。

[Credit]
Client:
Coca-Cola (Japan) Co.,Ltd.
Produce: Netyear Group Co.
Planning & Direction & ArtDirection & Design & SoundDesign: SkyBabies Inc.
Photo: CROSS OVER
ServerSideProgram: SkyBabies Inc. & Twelvetoes
Flash:Kenzo Usami

AS3デバッグツール Debush の使い方

■前書き
Flashのデバッグは、ほとんどtrace()でやってるんですが、
たまにEnterFrameで値の変化を確認したい時とか、Flash Tracer(FireFoxでtraceの出力が確認できるFireFoxのアドオン)が入ってない環境で値を確認したいときもあると思います。
そういう時は確認用のTextFieldを作って値を表示させれば済むのですが、毎回それをやるのはめんどくさいです。
特にTextFieldのインスタンスをグローバルインスタンスにしたりしていると負担になり心臓に悪いです。
(みなさんは実は僕の知らない便利ツールを使ってサクッと済ませてるんでしょうか?)
そこで、毎回めんどくさいなら、すぐに値をチェックできるツールを作ってしまえということで、デバッグツール Debush(デバッシュ)を作りました。

■ダウンロード
Debush ダウンロードページ

■使い方1:基本
下の黒いエリアはSWFです。その内、黄色いパネルがDebushのエリアです。
黄色いパネルの左上部を掴んで移動させることもできます。


このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得


下のコードは、上のSWFのドキュメントクラスです。
赤字の部分がDebushを表示させる為の部分です。
Debushをnewで呼び出した時の引数はdebushHandler関数をどこに置くかという指定です。
debushHandler関数内に表示したい値を記述していきます。
props配列内の(0番から始まるとして)偶数のString型の値が説明で、その偶数の値の次の値が表示したいプロパティです。
2つで1ペアになります。props配列内の値の数は好きなだけ増やせます。

package {
	import flash.display.Sprite;
	import debush.Debush;

	public class Main extends Sprite {

		public function Main() {
			addChild( new Debush(this) );
		}

		public function debushHandler(recordMode:String):void {
			var props:Array = [
				"mouseX", mouseX,
				"mouseY", mouseY,
				"ball.alpha", ball.alpha,
			];
			Debush.update(props, recordMode);
		}

	}
}

 

■使い方2:記録する
下のSWFでは1秒に1回、record関数を呼び出して緑のエリアにその瞬間の値を記録しています。
赤のrecordボタンを押しても緑のエリアにその瞬間の値を記録します。
緑のreceiveボタンはトグルボタンになっていて、ボタンが緑色の時はrecord関数の呼び出しに応じますが、ボタンがグレーの時はrecord関数の呼び出しに応じません。


このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得


下のコードは、上のSWFのドキュメントクラスです。
赤字の部分がrecord関数の呼び出しです。static関数なのでクラス名で呼び出します。

package {
	import flash.display.Sprite;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	import debush.Debush;

	public class Main extends Sprite {

		private var timer:Timer = new Timer(1000, 0);

		public function Main() {
			addChild( new Debush(this) );

			timer.addEventListener(TimerEvent.TIMER, timerHandler);
			timer.start();
		}

		public function debushHandler(recordMode:String):void {
			var props:Array = [
				"mouseX", mouseX,
				"mouseY", mouseY,
				"ball.alpha", ball.alpha,
			];
			Debush.update(props, recordMode);
		}

		// タイマーハンドラ:1秒に1回呼ばれる
		private function timerHandler(e:TimerEvent):void {
			Debush.record();
		}
	}
}

 

以上がDebush 1.0.0 の機能の全てです。

加速度センサーで演奏

上の映像で、PCモニタに映っているのはswfファイルです。
手に持っているやつは3軸加速度センサー×FIO×XBee無線モジュールです。
これでswfファイルのスティックの動きをコントロールします。

本当は手に持っているやつの動きとまったく同じ動きが出せれば良かったのですが、3軸加速度センサーからの情報だけでは厳しいようです。
3軸加速度センサーの値からは、XYZの3軸の角度情報が割り出せるので、2軸分の角度情報だけを使ってswfのスティックを動かしています。

加速度センサーとFIO

2軸分の動きしかしないんだったら特にflashを3Dにする必要もなかったんですがね。
と、後で気付きました。

福岡てら子 3 「音に反応する何か」に行ってきただ!

今回はお酒を飲みながらのパーティースタイルの発表会でした。

自分が発表したのは↓これです。再生ボタンを押すとWebカメラとマイクが作動します。


このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得


マイクから拾った音のボリュームが大きくなるにつれて最大で10秒前にカメラが拾った映像が再生されます。
音のボリュームが0の時は現在(0秒前)の映像が再生されます。

【下部のコントローラー説明】
・volume:白いバーはマイクが拾った音量。
     下の赤いバーはスケーリング後の音量。
・min, max:音量のスケーリングコントロール。

・volume増加量:急に音が大きくなったときに反応します。
・change:この設定値まで「volume増加量」がくるとカメラ映像が「1→4→9」と分割されます。

【遊び方】
ノリノリな曲をかけてカメラの前で酔拳するのがオススメな遊び方です。

FIOのセッティング

FIOをPCと無線で通信できるようにする為の設定を行いました。

以下のページを主に参考にしました。

FIO: funnel.cc
Funnel Set up!: labo

FIOにFirmataのコードをアップロードするところで思いっきりハマッてしまいました。
最初は、はんだ付けに失敗したのかなーと思い、「XBeeエクスプローラUSB」を買いなおして再度はんだ付けしましたが、またもうまくいかなかったので途方にくれていました。
これまでMacBook ProからBoot CampでXPを立ち上げて作業していたのですが、試しにMac OSXのArduino IDE からアップロードしてみたところ一発でアップロード成功しました。ははは
多分、Boot Campに罠があったようです。

FIOとブレッドボードの接続方法をどうするか迷ったんですが、結局下の写真のような感じで落ち着きました。

FIOにピンヘッダをはんだ付けします。

小型ブレッドボードを2個つなげて、そこにFIOを差します。
※番号やアルファベットが振ってある標準的なブレッドボードだとXBee無線モデムが引っかかってうまく差さらないので注意!

1 ... 6 7 8 9 10 11 12 13