投稿者： kisocci

8/4,5に行われました、css nite in okinawa での講演内容の抜粋と解説です。
Adobe Flashと様々なハードウェアを組み合わせてタロットイリュージョン？を披露させていただきました。
まず最初は「空中タロット」

【構成】

・PC(A)でウェブサーバー、XMLSocket中継サーバー(Perlスクリプト）を稼働。
・さらに(A)とネットワークでつないだ２台のPC(B,C)でブラウザを起動し、(A)にアクセスしswfコンテンツをフルスクリーンで表示。
・一方のPC(B)だけはプロジェクタとアクリルパネル、タッチホイルセンサー（Interactive Foil）を用いて空中操作を実現。

【ポイント】

基本的にはFlashのヘルプに載っているXMLSocketの項だけで実装できます。
中継サーバーはこちらを参考に作成して起動しておきます。
単に受信したものを接続中のクライアントにブロードキャストするだけです。
XMLSocketのデモというよりは、まずタッチホイルセンサーをご覧いただきたかったというのもあります（笑）。

【サンプル映像】

後日、単体で動作させて撮影してみました。

【ActionScript】

<thenode
	y="-1.11158004233938" ...x方向の遷移
	x="0.370526680779794" ...y方向の遷移
	action="move" ...動作モード「移動」
	target="/t/c21" ...対象カードのターゲットパス
	clientid="1" ...送信者のクライアントID
/>

XMLSocketで送受信されるXMLの内容

[Card.as]
onEnterFrame = function() {
	sendData(this._target,x,y);
       // onEnterFrameで常に動作させます。
}

function sendData(t,x,y) {
	trace("sendData");
	//送信用XMLの作成
	var myXML:XML = new XML();
	var mySend = myXML.createElement("thenode");

	//各パラメータを登録
	mySend.attributes.clientid = this._parent.clientid;
	mySend.attributes.target = t._target;
	mySend.attributes.action = "move";
	mySend.attributes.x = x;
	mySend.attributes.y = y;
	myXML.appendChild(mySend);

	//XMLSocketの送信
	theSocket.send(myXML);
}

XMLSocket送信部

theSocket.onData = function(msg:String):Void {
	trace("receive:"+msg);
	var rXml = new XML();

	// 受信したmsg（XML形式）をパース
	rXml.parseXML(msg);

	// 属性値をとりだす
	var a = rXml.firstChild.attributes.action;
	var t = rXml.firstChild.attributes.target;
	var c = rXml.firstChild.attributes.clientid;

	// 自身の操作ではないか判定(=別のマシン上の操作か)
	// （XMLSocketを全クライアントに送っているため。
	//　　自分からの送信も受信される。）
	if (c != this.p._parent.clientid) {
		if (a == "move") {
		     //「動かす」
		     // 増分値をとりだし、
		     var x = rXml.firstChild.attributes.x;
		     var y = rXml.firstChild.attributes.y;
		     // 「targetをx,y動かす」メソッド呼び出し
		     this.p.moving2(eval(t),x,y);
		}
		if (a == "flip") {
			//「ひっくり返す」
			// ターゲットとなるカードに
			//「ひっくり返る」メソッド呼び出し
			var card = eval(eval(t));
			card.flip();
		}
	}
};

XMLSocket受信ハンドラ（onData）

trackback URL：
http://www.blocco-deli.co.jp/blog/2007/08/29/css-nite-1/trackback/