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

2011.07.04 ActionScript3.0 HTML5/JavaScript 

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

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

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

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

今回やってみたこと

・そこで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

© rettuce.com