LUNARAVE WEBクリエイターの仕事と休息

アクセスカウンタ

Google Maps APIの利用戦国IXAWeb技術Youtubeチャンネル

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

<<   作成日時 : 2011/03/16 18:06   >>

ブログ気持玉 0 / トラックバック 0 / コメント 1

「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件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(1件)

内 容 ニックネーム/日時
Wow, this piece of writing is fastidious, my younger sister is analyzing
these things, therefore I am going to tell her.
Anke
URL
2017/07/24 15:35

コメントする help

ニックネーム
URL(任意)
本 文
Flashでお絵かきしたものを画像化する LUNARAVE WEBクリエイターの仕事と休息/BIGLOBEウェブリブログ
文字サイズ:       閉じる