君色少年: PIPについての考察とか作り方とかその他いろいろ【その2】

<< PIPについての考察とか作り方とかその他いろいろ【その1】 | TOP | あるソフトウェアのGUIについて感じた事。 >>

2008年09月05日

PIPについての考察とか作り方とかその他いろいろ【その2】

前回のエントリでは、PIPについての独断と偏見に満ちた意見を超クールに書きましたが、今回は簡単なサンプルPIPを作ってみたので、その独断と偏見に満ちた制作方法をご紹介したいと思います。
FWWのライトニングトークス・セミナーで発表する機会がある時に、詳しい制作方法をプレゼンしようと思っていたのですが、インターネットで探しても、PIPの作り方について触れているサイトって案外少ないので、簡単ではありますがここで紹介しておきます。

通常、PIPコンテンツを企画段階から制作すると、制作費が100万円を超えるのは仕方が無いようですが、今回のサンプルでは、どれだけコストをかけずに作る事ができるのかという部分にも挑戦してみました。

まず、以下が今回作ったサンプルPIPです。
簡単なクイズ形式になっているので、動かしてみて下さい。
出演はもちろん私です(笑)
音声は入れてません。

いかがでしょうか。
世に出ているPIPとは、クオリティに大きな差がありすぎますが、とりあえず動きます。
クオリティに大きな差があるのは、予算をかけていないからです。
はじめの方にも書きましたが、高品質な納品レベルのPIPなら、企画段階から納品までの総制作費で、最低でも100万円程は掛かかってしまい、上を見るときりがありません。
（ストリームワークスのサンプルPIP≫）
ところが、今回のサンプルPIPは、私の労働力などを換算しなければ、全くお金はかかっていません。
つまり制作費0円です。
撮影や制作に必要な機材やソフトウェアは、全て手持ちの物でまかないました。

以下に、私なりの制作過程(もちろん納品レベルのものを基準として)を書き記しておきます。

おおまかな制作の流れは、
[企画]→[絵コンテ制作]→[人物撮影]→[動画加工]→[Flash制作]
といった感じになると思います。
それでは、一つひとつを見ていきましょう。

企画

何でもそうですが、企画の工程ですべてが決まります。
その後の工程はすべて作業的なものなので、ここでしっかり頭を悩ませておきましょう。
場面設定や全体の流れ、細かいストーリーの枝分かれや、すべてのセリフを完璧に仕上げます。
後から人物動画の撮り直しは効かないので、台本は何度も読み直します。
さらに、動画部分があまりにも長いと、Flashファイルがありえないほど重くなり、再生時の読み込みに退屈してしまうので、ファイルの軽量化も考慮したセリフや構成を考えないとダメですよ。
場面ごとに外部SWFの読み込みにさせるかどうかも、この段階で決めておく必要があるかもしれません。

絵コンテ制作

企画の段階でできた台本を元に、絵コンテに起こします。
複雑なPIPだと、人物の立ち位置やカメラワークも重要になるため、この段階である程度は完成作品が予測できるような絵コンテを仕上げておかなくてはなりません。
撮影前に、クライアントに十分納得してもらうための重要なツールにもなります。
今後は、この絵コンテを元にすべての作業が進行していきます。

人物撮影

絵コンテに沿って、実際にカットごとの撮影をするわけですが、ここが一番お金のかかる工程になる可能性が高いです。
なぜなら、きれいな動画を撮影するためには、スタジオでの撮影が必須となり、照明さん・カメラマンさん・音声さんなど、その道のプロの力も必要になるからです。
予算などの問題で、なんちゃって撮影をする事も可能ですが、動画加工の際に結局後悔する事になる可能性もありますよ。
切り抜きがうまくいかず、輪郭がぼやけまくっているPIPを見た事ありませんか？
音声が妙に反響しているPIPを見た事ありませんか？

撮影するために必要なものといえば、まずはビデオカメラですが、間違いなくHD画質のものが良いです。
撮影した動画をFlash用にサイズダウンするタイミングはFLVに変換する時ですから、それまではできるだけ高画質で処理しておいた方が、最終的な映像も綺麗に仕上がるし、何かと応用も利きます。
具体的にどんなビデオカメラがいいのかというと、好みの問題なのでなんとも言えませんが、SONYのHDVカムコーダー『HVR-Z7J』なんか理想的ではないでしょうか。
もちろんハイビジョン対応の普通の家庭用デジタルビデオカメラでもいけると思いますが、それならばプロ用機材をレンタルした方がいいかもしれません。

さて、いよいよ人物の動画部分の撮影ですが、背景には、鮮やかな色のブルーバックやグリーンバックやレッドバックを使います。
これは、後で背景のみを透明化させるためです。(ブルーバック撮影は、映画のメイキングシーンなどで見たことありませんか？)
ここでは、出演者の服の色や肌の色に含まれない要素(補色)のバックを選択し、背景と人物の色味(＋彩度)の違いをはっきりさせる事が重要です。
これがうまくいってないと、後から背景を透明化させるのに苦労します。
なので、間違っても役者さんに虹色の服を着せたりしないで下さいね。
ちなみに、バックのクロスの表面は、フェルトのような素材が最適です。ツヤのある素材だと光が反射してしまい、背景を透明化する時に、ちらちら余計なものが映ります。
予算があれば、ブルーバック専用のロールを購入するのが間違いないです。

また、背景をきれいに透明化させるためには、人物とバックの間に、ある程度の距離が必要です。
これは、人物の落とす影が背景に入り込まないようにするためです。

PIPの中に人物の全身を入れたい場合は、撮影がさらに大変になります。
その理由は、人物とカメラとの間に、最低でも5～6mぐらいの距離が必要になってしまうためと、照明技術によって人物の足元の影も消さなければならないからです。
撮影環境は以下の図のような感じになります。

ブルーバック合成撮影の図

つまり、ほとんどテレビCMを撮る感覚で撮影に臨まなければならないというわけなんです。
こりゃ大変だ。お金もかかる訳だ。

ちなみに今回のサンプルPIPでは、撮影工程もすべて0円に抑える事ができました。
まず、スタジオは自宅です。
照明は、天井に付いている通常の蛍光灯のみです。
カメラマンも私です。
デジタルビデオカメラは持っていないので、コンパクトデジカメのムービーモードでの撮影です。
ブルーバックは、去年の夏に、筑後川の花火大会で使ったブルーシートを使用しました。
以上の事でもわかる通り、かなりチープ感満載の即席スタジオでしたよ(笑)
でも、これでもなんとか形にはなるもんだなぁーと思いました。

動画加工

ここから以降の工程も、台本の内容によっては、莫大なお金がかかります。
ただ、この記事を読んでいる人達なら、自分でなんとかしちゃる！という考えの人が多いのではないかと思うので、自分でなんとかする事を前提に書きます。

撮影した動画をパソコン内に取り込んだ状態のデータ(殆んどの場合AVIでしょう)を使って、さっそくFlash制作といきたいところですが、その前にやらなければならない事が、撮影した動画に透過処理をして、アルファチャンネル付きのFLVファイルにする事です。
この作業には、クロマキーが使える動画加工ソフトと『Flash Vide Encorder』が必要になります。

動画加工ソフトは、WindowsならAdobeの『After Effects』、MacならAppleの『Motion』がメジャーでしょうか。
動画編集用ソフト、例えば『Premiere』にも簡易的なクロマキーがありますが、どうも使い物になりません。
『Final Cut Pro』にはそもそもクロマキーが無いように思いますが、はっきりした事はわかりません。
また、バージョンによっても違うのかもしれませんが、『After Effects』と『Motion』でそれぞれアルファチャンネル付き動画を作成し、綺麗度を比較した場合、『After Effects』では輪郭部分が若干ちらつくのに対し、『Motion』では全くちらつきがありませんね。
この結果は、動画の素材によっても変わるかもしれませんので参考程度に。
『Flash Vide Encorder』の方は、『Flash 8』からはソフトに付属されているので、わざわざ購入する必要はありません。
残念ながら、『Flash　MX 2004』までは付属されていないので諦めて下さい…

透過処理の方法は、とにかく適当な動画加工ソフトを使用し、“キーイング”という機能で背景色にアルファチャンネルを付けます。
その後、アルファチャンネルを維持できる形式の動画ファイルに書き出します。
この場合『.avi』か『.mov』がいいと思いますが、いろいろなメリットを考えると『.mov』の方がオススメです。
コーデックは『アニメーション』で決まり。
また、『.mov』の場合は、『Quick Time Pro』を持っていれば、後からサクサク動画を小分けにできるので便利です。
『Flash Vide Encorder』で小分けにしようとすると、狙ったところでなかなかうまくカットできないので困ってしまいます。
動画加工ソフトのバージョンによっては、直接アルファチャンネル付きFLVで書き出せるかもしれませんので、その方が楽かもしれませんね。
ちなみに本題とは全く関係ありませんが、WEB関係者は「書き出し」「読み込み」と表現するのに対して、映像関係者は「吸い上げ」「吐き出し」と表現するのはなぜなのかなぁ…　ま、いいか。

そうして書き出した動画を、『Flash Vide Encorder』を使って、四方を人物ギリギリのとこでトリミングし、Flashで使用する実寸にサイズダウンし、アルファチャンネルを維持して「On2 VP6」コーデックで書き出せば、アルファチャンネル付きFLVの完成です。
この時フレームレート数も調節できますが、数を少なくするのに比例して、ファイルサイズが小さくなるとも限らないようです。
そのくせしっかり動きのスムーズ感は無くなっていきます。
私の実験結果によると、「25」が最も軽くなるような気がします。

背景にアルファチャンネルの付いた動画は、再生時などは背景が「黒」に見えますが、手順を間違えていなければ、きちんと透明になっているはずですからご安心を。

あとは、このFLVファイルをFlash内に読み込ませるだけです。

Flash制作

Flashの部分を説明すると長くなってしまうので省略しますが、Flash使いの皆さんには何も説明する必要はないでしょうね。
なぜなら、FLVムービーを通常の『シンボル』と同じように扱えばいいわけですから、拡大縮小・回転・色味・アルファなど、自由に制御する事ができるからです。
今回のサンプルでいえば、ループ再生するようにした背景の上にレイヤーを作り、そこにグラフィックシンボル化させたムービーを配置して合成させています。
さらにその上のレイヤーに、クイズの部分が重なっています。
クイズの部分では、一旦タイムラインを停止させ、ムービークリップの中でクイズの部分を動作させます。
三択の答えを選択後、『_root』でメインのタイムラインに配置したムービーを再度再生させれば、完成です。
サンプルのタイムラインを見ると、以下のような感じです。

Flashタイムラインの図

今回のサンプルは、単なる会話のようなものですが、アイディア次第では、いろいろおもしろい事ができると思います。
PIPは、人物のムービーがFlashの中に溶け込んでいるというところがミソなんですよね。
Flashの中で“プレゼンテーション”をする事は、今後少なくなっていくかもしれませんが、何をさせるかによっては、これからもまだまだ使えそうな技だと思います。
『Adobe AIR』で、デスクトップ壁紙を背景に利用して、アプリケーションと連動させて何かを表現するのもおもしろそうですね。

PIPに興味が出たゾーという方は、ぜひ作ってみて下さいね。