Home > ActionScript3.0

ActionScript3.0 Archive

Flash AS3 TUIO Client を使ってみる(1)


先月大阪てら子にお邪魔した際、vispとMIDIキーボードを使って単音を出すことは出来たけど、和音を出すのに苦労している…という話をしたら、「vispよりも、OSC使ったら出来るかも…」とのアドバイスを頂きました。

Flashで使えるOSCライブラリ

Google先生で探してみると、floscが出てきます。

続OOP本にも、floscを使った例が掲載されていますね。

これでやろうかな? とか思ったんですが、探しているとTUIOっていうものもあることが判明。

マルチタッチ用っぽい(?)けど、何だか楽しそうだから試しに使ってみることに…

TUIOのFlash・AS3で使う情報は、以下に掲載されています。

TUIOを使ってみる

まずはビデオの下にある「principal TUIO Flash Resources」のTUIO/FLC gatewayを試してみました。

TUIO/FLC gatewayのリンク先から、udp-flashlc-bridgeをダウンロードしてきます。

Macの場合、ターミナルを立ち上げる→ディレクトリを移動→udp-flashlc-bridgeを実行→testフォルダ内のTuioTest.swfをFlash IDEで開いてあげると、trace文が表示されました。

Windowsでも同じ手順でやってあげればいいだろう…と思ったので、コマンドプロンプトを立ち上げる→ディレクトリを移動→udp-flashlc-bridge-winを実行してみると…

“udp-flashlc-bridge-win”は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません

うむ~どうしたものか? と思っていろいろググってみると、解決策が見つかりました。

Forumnに「Windowsでudp-flashlc-bridge-winを走らせるには、どうしたらいいの?」という質問があって、それに対する回答が、「拡張子を.exeに変更してあげるといいよ!」と書かれていました。

なので、udp-flashlc-bridge-winをudp-flashlc-bridge-win.exeとリネームして、コマンドプロンプトからこのexeファイルを実行してあげれば無事起動しました。

拡張子をexeに変更して、コマンドプロンプトから実行

(Macの時と同様)testフォルダ内のTuioTest.swfをFlash IDEで開くと、connected as: _OscDataStreamとtraceされました。

MIDI機器との連携でもこれが使えるのか分からないけど、メモがてらのエントリ。

FlashDevelop 4.0.0 RC1とFlashPlayer11.0 で遊んでみる


feb19さんのブログに、FlashBuilder4.5とFlashPlayer11を使ったコンテンツ作成方法が掲載されています。

FlashDevelopだと、どうなるの? という方がいらっしゃるかもしれないのでエントリ。

思いっきり便乗です、はい。

ダウンロードしてくる

FlashPlayer11とDebug Player各種をダウンロード&インストールしておきます。

ちなみにですが、FlashDevelopは4.0.0 RC1、FlexSDKは4.5.1での話になります。

FlashDevelopの設定

ツール>環境設定>AS3Context>Installed Flex SDKsに、Flex4.5.1を設定しておきます。

playerglobal.swcの設置ですが、これはFlashDevelopが上手い具合にやってくれるので、そこは飛ばします。

コードを書いてみる

コードもfeb19さんのとこに書いてあるのと同じものでやってみます。

コンパイルターゲットがFlashPlayer10の場合

あれっ、FlashPlayer11をインストールしたのに、cubicCurveToのコードヒントが表示されない…

書き出しのプレーヤーを確認する

そんな場合は、プロジェクトパネル>プロジェクト設定>書き出し>プレーヤーを確認してみましょう。

10.0とかになっていませんか?

ツール>環境設定>AS3Context>Language>Default Flash Versionが10.0に設定されていると、プロジェクト設定のプレーヤーも10.0になっているかと思います。

コンパイルターゲットのバージョンを11に変更

これを11.0に変更します。

再びコードを書いてみると…

FlashPlayerを11に変更

無事、コードヒントが出ました。

コンパイラー設定もしておく

ついでにコンパイラー設定もしておきましょう。

コンパイル設定にSWFのバージョンを設定

プロジェクトパネル>コンパイラー設定>高度な設定>Additional Compiler Optionに、-swf-version=13って書いておきます。

あとはプロジェクトのテスト(F5)を押すだけ。

ね、簡単でしょ?

追記

僕のへなちょこエントリよりも、@nutsuさんの記事の方がより詳しく書かれています。

MIDI Keyboard + visp + SiONを使って、絵を描いてみる


先月の27日に開催された東京てら子Vol.18 『夏休みの自由研究発表会』で発表した内容をざっくりと。

動画を撮影してみましたので、ご覧ください。

タイトルにもあるように、MIDI KeyboardとvispとSiONを使って、キーボードの鍵盤を叩くと音が鳴って、ランダムに円が描写されるというデモです。

MIDIキーボードを衝動買いしまして…

前回の東京てら子Vol.17(テーマは音)を終えた後、僕の中でキーボード熱が再燃しちゃいまして、MIDIキーボードを衝動買い。

演奏するだけでは勿体無いということで、キーボードを使って、何か出来ないかと…

曲を演奏したら、叩いた鍵盤と連動して、何かが描画される。曲が終わると、絵が完成(違う曲を演奏したら、違う絵になる)すると面白いんじゃないかと。

MIDIキーボードとの連携

はて、MIDIキーボードとFlashの連携はどうすればいいのか?

ほえろぐさんの以下の記事を参考にさせていただきました。

な~るほど。vispというMIDI Proxyを使ってあげると良さそうです。(そういえば、東京てら子Vol.17で、MIDIキーボードを使ってデモされたfeb19さんも、vispを使われていたような…)

vispをダウンロード&インストール

ということで、vispをダウンロードしてきます。

僕はGoogleCodeの方が分かりやすかったので、GoogleCodeから必要なものをダウンロード。

visp(GoogleCode)からダウンロード

zipファイルを解凍し、midi proxyの方は、インストールしておきます。

あとはMIDIキーボードをPCに接続して、proxyのexeを立ち上げて、コードをコンパイルすればOKです。

SiONを使ってみる

僕は勉強がてらSiONを使ってみました。

package
{
	import com.visp.midi.MidiManager;
	import com.visp.midi.NoteEvent;
	import flash.display.Sprite;
	import flash.events.Event;
	import org.si.sion.SiONDriver;
	import org.si.sion.SiONVoice;
	import org.si.sion.utils.SiONPresetVoice;

	/**
	 * MIDIキーボードとSiONの連携テスト
	 * @author flabaka
	 */
	public class SionTest extends Sprite
	{
		private var _manager:MidiManager;
		private var _sionDriver:SiONDriver;
		private var _voice:SiONVoice;
		private var _driver:SiONDriver;
		private var presetVoice:SiONPresetVoice;

		public function SionTest():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);

			//MIDI Managerの設定
			_manager = MidiManager.getInstance();
			_manager.initialize();

			//SiONの設定
			presetVoice = new SiONPresetVoice();
			_voice = presetVoice["midi.piano1"];
			_driver = new SiONDriver(2048);
			_driver.setBeatCallbackInterval(4);
			_driver.play();
			_manager.addEventListener(NoteEvent.NOTE_ON, noteOnHandler);
		}

		private function noteOnHandler(e:NoteEvent):void
		{
			//キー番号を取得
			trace(e.pitch);
			_driver.noteOn(e.pitch, _voice, 4, 0, 0);

			//他の処理をあれこれ

		}

	}

}

ざっくりと、コードはこんな感じ。

e.pitchとすることで、どのキーが押されているのかが分かります。

presetVoiceを変更すれば、ギターとかいろんな音を出せます。

とりあえずこれで音は鳴るんですが、もっといい書き方があるのでは? と、現在あれこれ検証中。

今後はFrocessingとかHYPE Frameworkとかを絡めて遊んでみようかな? と思っています。

東京てら子14 『Google API』~GoogleMap API for FlashとExifデータ~


東京てら子14 『Google API』に参加された皆様、お疲れ様でした。

ネタを何にしようか考えたんですが、その前の週に福岡に遊びに行く予定もあったので、かなりベタですが、福岡で撮影した写真をGoogleMap上にマッピングしようかな? と。

後日、一つ一つ撮影した場所の緯度・経度の値を調べて、それをGoogleMapに反映させるのは面倒だなぁと思ったので、Exifデータを使ったマッピングを今回試してみることにしました。

Exifとは?

Exchangeable image file format(エクスチェンジャブル・イメージ・ファイル・フォーマット)は、富士フイルムが開発し、当時の日本電子工業振興協会 (JEIDA)で規格化された画像メタデータのフォーマット。デジタルカメラの画像用に使われる。略称はExif(イグジフもしくはエグジフ)。

カメラの機種や撮影時の条件情報を画像に埋め込んでいて、ビューワやフォトレタッチソフト等で応用する事ができる。Exif2.2ではExif Printという規格を組み込んでおり、撮影時の条件情報を元に自動的に最適化を行って、的確な状態でプリント出力を可能にしている。(Wikipediaより引用)

このようにExifデータには、写真撮影時の各種情報(GPS情報など)が記録されています。

今回僕は、デジカメではなくiPhone3GSのGPS機能をONにして、iPhoneのデフォルトのカメラでいろいろ撮影してきました。

Exifデータを確認するには、Firefoxのアドオンなどいろいろありますが、画像ファイルを選択→右クリック→プロパティ→詳細からも見ることが出来ます。

Exifデータの確認

この中にGPSデータとして、緯度・経度・高度の情報も保存されています。

GPSデータを取り出す

次にExifデータからGPS情報を取り出すことになるのですが、AS3用にいくつかライブラリが公開されています。

今回はExifInfoを使用することにしました。

ExifInfoのサイトにはサンプルコードが掲載されているので、詳細なコードはそちらを見て頂くとして、必要な箇所のみ掲載します。

private function onComplete(e:Event):void 
{
	//今回はGPSデータのみ使用するので、他は未使用
	if (loader.exif.ifds.gps)
	displayIFD(loader.exif.ifds.gps);	
}

private function displayIFD(ifd:IFD):void {
	trace(" --- " + ifd.level + " --- ");
	trace("緯度 : " + ifd["GPSLatitude"]);
	trace("経度 : " + ifd["GPSLongitude"]);
}

こんな感じにしてあげると、緯度と経度が取得出来ます。

60進法から10進法へ変換

この際、気をつけることが出てきます。

先の手順で取得した緯度と経度の値は、60進法になっています。

緯度
33,35.38,0
経度
130,25.19,0

この表記は、33度35分30.8秒と130度25分19.0秒ということになります。

しかし、この値をGoogleMapに渡しても、GoogleMapではきちんと表示してくれません。

60進法を10進法に変換する必要が出てきます。

「60進法 10進法 変換」とかのキーワードでググれば、変換方法はいろいろ出てきますが、今回は大体の位置が合っていればいいかな? という感じなので、一番簡単な変換方法を用いました。

度 + (分 / 60) + (秒 / 60 / 60)

この公式を使って、先のExifInfoを使って取得した緯度と経度の値を10進法に変換し、GoogleMapで使用しています。

Map3D

今回、GoogleMapのMapクラスではなく、Map3Dクラスを使用してみました。

Map3Dクラスを使うだけで、いつもと違ったGoogleMap(3D表現)を簡単に楽しむことが出来ます。

福岡で撮影した写真を3Dマッピング

↑画像はクリックすると、拡大表示します

このようにExifデータを使ってあげると、「Yahooドームの緯度・経度は…」といった具合に調べなくても、簡単にマッピング出来るようになるのがいいですね。

Exifデータ、今回ちょっと調べて使ってみたんですが、他にもいろいろ面白そうなことが出来そうです!

CubeにMovieMaterialを適用してみる


CubeにMovieMaterialを適用してみたかったので、ちょっとテストしてみました。

簡単なタイムラインアニメーションを用意して、Loaderクラスで読み込んでおきます。

読み込みの完了を待って、MovieMaterialを使ってあげます。

private var sp:Sprite;
private var McMat:MovieMaterial;

loader.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);

private function completeHandler(e:Event):void{
    sp = loader.content as Sprite;
    McMat = new MovieMaterial(sp);
    cube.material = McMat;
}

MovieMaterialは第一引数にSprite型を取るので、loader.contentをSprite型に変換して使用しています。

第二引数は指定しなくても上手くいきましたが、指定する場合は以下の様にしてあげます。

McMat = new MovieMaterial(sp,new Rectangle(0,0,384,256));

今回Cubeの一つの面は128pxなので、new Rectangle(0,0,128,128)としても良さそうなんですが、こうしてしまうと一つの面が引き伸ばされた状態で、6面全てに適用されてしまいます。

それを回避する為に、横3列×縦2列の384×256という数値を設定しています。

swfも画像の時と同じく、横3列×縦2列にアニメーションを並べて書き出しています。

6面全てにMovieClipを適用したサンプル(要FlashPlayer10.1)

Loaderではなく、Away3DLiteに用意されているloadersフォルダの中のモノを使った方が、もっとスムーズに出来るのかなぁ…

ホーム > ActionScript3.0

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top