Flashでお絵かきしたものを画像化する

「HTML5でFlashは不要になる」など言われているが、ここ数年のFlashは"ActionScript3.0"によりできることが非常に増えまだまだHTMLがFlashを超えるとは考えにくい中、仕事で提案して没になったがおもしろいネタが増えたので紹介する。

記事のタイトルにもある通り、Flashでお絵かきソフトのようなツールを作成したそれをサーバに画像保存するというものだ。

ブラウザを使ったテレビ会議システムでは何年も前から実装されている機能の一つだが、FlashとCGIの知識があれば個人レベルでも公開できるのが嬉しいところ。

まず、Flash側では「お絵かき機能」と「画像化機能」を実装する。

「お絵かき機能」はマウスをドラッグすればその軌跡に色を残す手法を取る。

「画像化機能」はビットマップクラスを利用するのだが、取得したビットマップは"PngEncoder"というPNG化する外部クラスを利用することで実現することができる。
"PngEncoder"はFlashに入っているものではないので、別途配布されているサイトからダウンロードする必要がある。

ちなみにJpeg版もあるらしい。


ここまででFlashからPNGの元になるデータが生成できるのだが、それをサーバに保存する術はCGIが受け持つ。

FlashからCGIにデータを渡してやり、CGIは受け取ったデータをバイナリモードで出力するようにすれば指定するディレクトリに画像が作られる。


お絵かきの他にレイヤーの違うシンボルやコンポーネント、その中の文字などはどうなるのかと思い下のような配置で画像化してみた。

 お絵かきFlash


シンボルとコンポーネントはレイヤーが違うがFlashの表示通りに画像化された。

チェックボックスのコンポーネントにはチェックが入り、テキストエリアのコンポーネントにも入力した文字がしっかりと出力された。

ブラウザ上で表示されているFlashの状態をそのまま画像化するようで、テキストエリアに入力するときに表示されるテキストポインタが残ったままだったのだが、これも画像化された。


一般的なサイトでお絵かきしたり画像化できるFlashの需要はほぼ無いだろうが、Flashで見ることができる電子書籍などで手書きメモや付箋を残すといった使い方ができそうで、どこかで役立ちそうな気がする。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

この記事へのトラックバック