Adobe jpegEncoderを(今更ながら)使ってみる

2009.10.25追記

An asynchronous, vector optimized JPEG encoderという、Flash Player10に最適化したJPEGエンコーダを使えば、処理が約5倍も早いです。300×400とか、小さい画像を作るなら問題ありませんが、大きい画像を扱う場合は大変便利です!! さらに、時間がかかるというか、基本のJPEGEncoderはブラウザが固まってるので、その間に時計マークを出したりすることすらできないという気持ち悪さがあります。ぜひ、vector optimizedを使いましょう(Flash Player9必須ならしょうがないけど)。

Google code にAS3coreLibというプロジェクトがあって、その中にadobeのjpegエンコーダーとPNGエンコーダーがあります。Flash内の一部またはすべてをbyteArrayとして画像にできるものです。これを使い、byteArrayを画像として書き出すPHPなどで画像ファイルを作成し、ダウンロードまたはサーバに保存すれば、お絵かきサイトみたいなのがカンタンに作れるという寸法です。

まずは素材あつめ

僕の場合、やりたいことを決めると、まずそのための技術をブレイクダウンしてみます。今回の場合は、「画面をキャプチャして画像として保存できるようにする」なので、「画面をキャプチャする」と「画像にする」と「保存する」の3機能があればよさそうです。ということでそれぞれをググッて調べます。いきなり他力本願か!

あとで「jpegEncoder 使い方」とか「flash 画像 保存」とか「jpegEncoder キャプチャ」とかでググッたときに参考になるような記事にしたかったけどテンション低いので超適当です。

できた

作り方なんてのは参考サイトや記事を試行錯誤すればいい話なので、ダウンロードファイルを見てもらえばいいんですが、結果、こうなりました。
テキスト入力とコンボボックスは入力エリアです。キャプチャボタンを押すと画面をキャプチャしますが、画像になっていることを示すために動きのある動物みたいなのを置いてみました。キャプチャされた方の動物は動きませんね。

今回の素材

今回使ったもの一式のサンプルです(cs3 .fla形式)。

参考にさせていただきました

google code
JPEGencoderを使って簡易カメラ作成 – PHP,MySQL,Flexな日々+イラストとか
ActionScript3 PngEncoderクラス,JPEGEncoderクラス を用いてステージデータ画像化 – X-LABO

この記事には、カテゴリ AS3 タグは , , がつけられています。

Adobe jpegEncoderを(今更ながら)使ってみる への3件のフィードバック

  1. sho-T より:

    毎度ありがとうございます。
    一から学び始めていますが、とにかく苦難続きですよ。ボーンを使った動作の制御とか楽しいものもやっています・・・基礎的なことですが・・・。
    作っていただいたサンプルを参考にして自分で色々やっていますが、ダウンロードされたものには画像が入らないのです。「画像出力完了」の文字は出ますがピクチャーのアイコンに×が入っているのみでキャプした画像が出ないのです。サーバー側の問題でしょうか?
    それとも自分で何か設定するのを忘れているのでしょうか?
    質問続きで申し訳ありませんが、今後は自力で頑張っていきますのでよいアドバイスをお願いします。

  2. ryow より:

    うーんと…
    たとえば、CGIpathで指定してるURLが間違っているとか?「画像出力完了」はCGIでただ書き出している文字なので、完了していなくても出てしまいます。ByteArrayをちゃんとCGIに送れれば、あとはうまいことやってくれると思います。
    あとは、お使いのサーバに画像を使う仕組みが入ってないとか(PHPのGDライブラリなど)。
    >ボーンを使った動作
    CS4いいっすね~!! 僕はまだCS3なのでアニメーションは毎回フレームに手書きです。。

  3. sho-T より:

    早いレスありがく思います。
    CGIPathのURLは間違いないので、ryowさんが言われる通りサーバー側のようです。
    PHPのGDライブラリなり、画像を使う何かを探してみます。
    CS4をいじっていて何か面白いことを発見したらお知らせします。どうもありがとうございました!