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で命令(今回のテーマ!
)