node.js を使ってflashにも描き込むお絵描きチャット

iPhoneからも描き込めるよ

2012/02/04 F-site

自己紹介

プログラマーFlash, JavaScript, iOS, Androidのアプリなどをプログラムしています。

ブログ www.kuma-de.com

Twitter @kinkuma_design

Jsflを便利にするパネル

jsflEdit

Flashの IDEの中で、手軽にJsflの作成・編集・実行が可能になる拡張パネル

SparkProjectにて公開中http://www.libspark.org/wiki/jsflEdit

ここから本題

みんなで Flashにお絵描きしたい！

• ブラウザから描き込んだ絵が、同時に接続している人にもリアルタイムで描き込まれる。

• さらに Flashのステージ上にも描き込まれる。

• WebSocketを使っているので、 iPhoneからも描き込めるよ。

• フレームをまたがって描き込んだものをswiffyでパブリッシュすれば、 iPhoneからもアニメーションが見られるよ。

準備 1• サーバーを起動WebSocketサーバー、 Socketサーバー、httpサーバーが立ち上がる

Flashの拡張パネルから Socketサーバーに接続

準備 2

node.jsの htppサーバーからページをもらってきて、同時に websocketにもアクセスする。iPhoneはネイティブアプリでなく、Webアプリ用のブックマークで立ち上げるとこうなります。

各ブラウザからサーバーに接続。

描いてみる

• 描いたものがリアルタイムに、同時に接続している人のブラウザに反映される。

描いてみる 2

• さらに Flashのステージ上にも同じものが描き込まれる。このときは、ストロークごとに反映

描いてみる 3

• 各フレームに描きこむ

• 画面左下のボタンからパブリッシュするサーバー経由で Flashに命令が届きswiffyのコマンドを起動

Swiffyでパブリッシュ

• パブリッシュ後に各ブラウザが swfiffyで書き出されたページに変更される。

• フレームアニメーションが見られる

仕組み

node.jsでつくるサーバーたち

httpサーバー

WebSocketサーバー

Socketサーバー

Webブラウザたち

リクエスト

接続

レスポンス

Flash内拡張パネルデータのやりとり

接続

Flashステージ

Jsflで命令（今回のテーマ！

）