Air製のゲームからPV(動画)を作るまでの手順

=前置き=

 動画用のツールは以前にもいくつか書いたものの、まだ全体の手順としてまとめてなくて調べ直すのが微妙に手間だったので、ここにまとめておく。

=流れ=

以下の流れで動画を作成する。

  • 連番画像を用意
  • 連番画像→動画
  • 動画×N→動画(+調整)

=連番画像の用意=

 まずはAirから連番画像を吐き出させる。

 基本的にはActionScript のみで作った SWF をコマ落ちせずに動画にする手法 - てっく煮ブログで使われているPngOutputで毎フレーム画像を吐き出すのだが、これだとStage3Dの描画が反映されないので、さらにContext3D::drawToBitmapData()を追加したものを使用する。

 具体的には以下のコードをPngOutput.asとして保存し、initで初期化、毎フレームoutputを呼ぶことで連番画像を用意する。

package {
    import flash.display.*;
	import flash.display3D.*;
    import flash.filesystem.File;
    import flash.filesystem.FileStream;
    import mx.graphics.codec.PNGEncoder;
    
    public class PngOutput{
        private static var stage:Stage;
        private static var context3d:Context3D;
        private static var count:int;
        private static var bmd:BitmapData;
    	private static var path:String;

        public static function init(_stage:Stage, _context3d:Context3D, _path:String):void{
            stage = _stage;
        	context3d = _context3d;
            count = 0;
            bmd = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0);
        	path = _path;
        }

        public static function output():void{
            // get file
            var file:File = new File(path + getFilename(count));

            // draw
        	//- clear
            bmd.fillRect(bmd.rect, 0xffffff);
        	//- stage3D
        	context3d.drawToBitmapData(bmd);
        	//- stage(2D)
            bmd.draw(stage);

            // output
            var fs:FileStream = new FileStream();
            fs.open(file, "write");
            fs.writeBytes(new PNGEncoder().encode(bmd));
            fs.close();

            count++;
        }

        private static function getFilename(count:int):String {
            var ret:String = count.toString();
            while (ret.length < 5) { ret = "0" + ret; }
            return ret + ".png";
        }

        public static function getTimer():int {
            return count * 1000 / stage.frameRate;
        }
    }
}

 Fileを使うので、「adl 〜.xml」という感じで実行すること。

 場面ごとに別フォルダにして連番画像を保存しておく。

 ちなみに、タイトルなどは連番画像ではなく1枚だけ用意しておけばOK。(連番にして動画化しておく必要はない)

=連番画像の動画(Avi)化=

 連番画像をAvi化するにはAviUtlを使う。

 これを起動して連番画像の先頭をドラッグ&ドロップするだけ。省きたい画像がある場合は自前に削除しておいた方がラクかもしれない。

 あとは適当に名前を付けて保存しておく。

 ちなみに、そのまま新しい画像をドラッグ&ドロップすると以前のは削除されて新しい動画として設定されるので、特に手動でクリアとかしなくてもOK。

=Aviの連結(タイトル画像などの連結含む)=

 あとはタイトル画像やさきほどのAviをVideoPadで連結するだけ。「メディアの追加」から必要な素材を一通り呼び出し、それを右下のタイムラインにドラッグ&ドロップして並べていく。画像はデフォルトで3秒表示になる。

 自分の場合、連番画像の動画が少し高速だったので、各動画に対してエフェクト:スロー70%を適用した。さらにクロスフェードなどを設定すればわりとそれっぽくなる。

 あとは保存すれば完成。

=以上=

 大雑把には以上で対応は完了。細かいところで言えば色々な尺の調整とか見た目の調整とかあるんだろうけど、個人ではこれでひとまず十分な気がする。