テクササイズ第6回:FMSでお絵かきチャット

技術のエクササイズ、テクササイズの第6回でFlash Media ServerのSharedObjectを使って、2年前に作ったFlashお絵かきコンポーネントをネットワーク対応してみた。

動いている所。



LAN内の他のマシンでも動かそうとしたけど何か動かなかったので一台で複数起動。

ソースコードなど(他にFMSでのビデオ撮影や、ShardObjectの簡単なサンプルも混ざってます)

shard-paint.flaが今回のお絵かきコンポーネント改。

なんか線が繋がってしまうバグがあるが、一年ぐらい前にやったバイトでスヌーピー展に出展してたヤツでは、繋がってなかったんだよな。あの時はLocalConnectionでやってたkど。どうやってたんだっけ…



一応ソースコードも。

shared-paint.fla

var isPressing:Boolean = false; // 押しているか

var lineWeight:Number = 5; // 線の太さ

var lineColor:Number = 0xFF0000; // 線の色

var lineAlpha:Number = 100; // 線の濃さ

lineStyle(lineWeight, lineColor, lineAlpha);

//SharedObjectを使う

//ネットコネクションを作成してtexe_testアプリケーションに接続する

var nc:NetConnection = new NetConnection();

nc.connect(”rtmp://localhost/texecize06_shared-paint”);

//サーバーからの返答を確認する

nc.onStatus = function(infoObj){

    //返答内容のトレース

    showMessage(infoObj.code);

    //接続が成功した場合

    if(infoObj.code==”NetConnection.Connect.Success”){

        statusLabel.text = ”Connected!!”;

        sharedObject_init();//SharedObjectを作る

    }

    //接続が失敗した場合

    else{

        statusLabel.text = ”Connection Error!!”;

    }

}

function sharedObject_init(){

    //SharedObjectを作る

    //getRemoteメソッドの第一引数はSharedObjectの名前、第二引数はURL。URLはNetConnection.uriプロパティで取得できる。

    so = SharedObject.getRemote(”shared_text”,nc.uri);

    //SharedObjectが変更されたときの処理

    //SharedObjectが変更されるとonSyncイベントが呼び出されるのでイベントハンドラメソッドを作る

    so.onSync=function(){

        trace(”SharedObjectが変更されました”);

        switch(so.data.mode){

            case ”moveTo”:

            moveTo(so.data.x, so.data.y);

            break;

            case ”lineTo”:

            lineTo(so.data.x, so.data.y);

            break;

        }

    }

    

    //SharedObjectをサーバーに接続

    so.connect(nc);

}

/* マウスを押した時 */

this.onMouseDown = function(){

    isPressing = true; // 押してますよ

    moveTo(_xmouse, _ymouse); // 線の始点設定

    so.data.mode = ”moveTo”;

    so.data.x = _xmouse;

    so.data.y = _ymouse;

}

/* マウスを動かした時 */

this.onMouseMove = function(){

    if(isPressing){ // 押してる時

        lineTo(_xmouse, _ymouse); // 始点から指定座標まで線を引く

        so.data.mode = ”lineTo”;

        so.data.x = _xmouse;

        so.data.y = _ymouse;

    }    

}

/* 押してたマウスを上げた(離した)時 */

this.onMouseUp = function(){

    isPressing = false; // 押してませんよ

}

/* マウスを押したまま外に出た時 */

this.onDragOver = function(){

    isPressing = false; // 押してませんよ

}

タグ: , ,

コメントをどうぞ