アニメーション用連番jpg書き出しツール作ってみたよ。

ということで、2ヶ月ほど前にgoogleロゴのアニメーションについてのblogを書いたら
技術者以外の人たちから割と反響があったので、今回はその連番素材をflashで作れるようにしてみたよ。

ちなみにこれは東京てら子 Vol.16 『ドキッ、JavaScriptだらけの240分』でも発表した内容なんですが、
その時にざっと作ったので全くお見せできる代物ではなく、、
以下、てら子の自分まとめとしてメモ。

前回内容+てら子発表内容

・googleやframeプロジェクトのサイトではアニメーションを連番の１枚絵にしてjsで動かしてたよ！
　　↓
・パラメータを変数として持たせておけばそこを変更するだけで
　jsが分からなくてもアニメーション表示できるんじゃない？
　　↓
・割とキレイにできる！けど連番の１枚絵を作るのがめんどくさいよ！泣

今回やってみたこと

・そこでflash使ってtoolにすればいいんじゃね？ということでつくってみた。←ｲﾏｺｺ
　　↓
・AIRアプリで書き出してtoolとして使えるようにしようかな。
　散々言われてた利用頻度は一旦無視するお！(｀･ω･´)ｷﾘｯ
　　↓
・あれ？そういえばFlashPlayer10でBitmapDataの上限って確か。。
　　↓
AIR 1.5 および Flash Player 10 では、BitmapData オブジェクトの最大サイズは幅または高さが 8,192 ピクセルで、ピクセルの総数は 16,777,216 を超えないようにする必要があります（したがって、BitmapData オブジェクトの幅が 8,192 ピクセルの場合、高さは 2,048 ピクセル以下にする必要があります）。
　　↓
・あかん！！8,192px上限とか、アニメーションのfps10で、高さ250pxのアニメでも4秒も持たん！！！
　使えねー。(´・ω・`)ｼｮﾎﾞｰﾝ
　　↓
・ん？そういえば、Flash Player 11からBitmapData制限なくなるって見たな！これだ。
　Molehillとか派手なAPIも興味あるけど、BitmapData制限削除とか、
　子表示オブジェクトに対するremoveChildren追加とか地味にいいよね。:-)
　　↓
・そうか、Flash Player 11はまだインキュベータ版なのでAIRアプリは無理かー。(´・ω・`)ｼｮﾎﾞｰﾝ
　でもその代わりFlash Player 11インストールしてる人にはBitmapData制限のないアニメーション書き出しができるよ！

ちなみにFlash Player 11 Incubator版はこちら

自分はMac OS X 10.6なんですが、Flash Player 11インストールすると
/Library/Internet Plug-Ins/以下のFlash Player.pluginが上書きされちゃうので、
Playerアンインストールしてまた10.3入れてとかが面倒な人は、
こんなふうに一階層下げてバックアップ持っておけば手動でFlashPlayer切り替えれるよ！
（なんてアナログ。。orz

で、話は戻ってtoolの使い方。

使用手順

1. flvとかf4vまでのURL入れる。
2. その横のロードボタン押す。→flvの高さと幅が表示される。
3. 多分どんな状況でもそのままだと大きいのでサイズをリサイズ（縮小）。
4. アニメーションさせたい時間(TIME)と、滑らかさ(FPS)を決める。FPSは前回参照。
5. 再生ボタンをぽちる。
6. アニメーション開始のタイミングを見計らって録画ボタンをぽちる！
7. 録画が完了したら、録画ボタンの右にダウンロードボタンが出るのでぽちる。
8. jpgをダウンロードしたら一番右のインフォメーションエリアにソースが書き出されるので
　cmd+Aとかctr+Aで全選択してコピペ！このコード内容も前回参照。

今回お借りした映像はこちら。

で、できたのがこれ。
FlashPlayer11用は入れてない人は表示されないと思う。。

AnimationEncoder fp11ver

Flash Player 11 用。こちらは高さ上限がないよ！ヾ(*´∀｀*)ﾉ゛
でも30,000pxとか超えるとjpgエンコードで落ちるかも。。orz

Flash Player 11 only...

5秒、fps20バージョン。

わーい滑らか！FlashPlayer11はやくこい(｀･ω･´)ｷﾘｯ

AnimationEncoder fp10ver

Flash Player 11が入ってない人用に。
こちらは高さが8192pxを越えると、Error表示されて書き出しできないよ。(´；ω；｀)ﾌﾞﾜｯ

Flash Player 10

2.5秒、fps14バージョン。

現状のプレーヤではこれくらいが限度かな。。(´･_･`)

クロスドメインの問題でここでは自由に他の映像とかエンコードできないので、
もしエンコードやってみたいって人はこちらにサンプルswf置いておくのでローカル環境でどうぞ。:-)
（URLにflvまでの相対パス書いたらおk）

ということでやってみた感じとしては、大人しくFlash Player11のアップデートを待てば、
書き出しtoolをFlashで（ゆくゆくはAIRで）簡単に作れそうだよ！ということ。

個人的には、機能としてめちゃくちゃ単純な実装なのにtoolにするだけで
時間かかり過ぎだわ。。やっぱり手が遅いという反省。。

でもまーおもしろかった。こいう短期間で作ってみる try&errorは好き。:-)
おし次、GAEやりたい。あ、でもやらなきゃいけないことあるや。

you