2016年7月16日土曜日

快適動画編集 基本枠線の機能も兼ねた吹き出しエフェクトをMotion5で作成


 動画編集を続けていると、ある程度定型的な編集テクニックを使用することが多くなってきます。ピクチャーインピクチャー(PinP)機能を利用して主画面に補足を加えるような編集方法はその中でも常連です。このPinP画面には外側に枠をつけて主画面との境界をはっきりさせたいのですが、Final Cut Pro X (FCPX)付属の基本枠線エフェクトにはバグがありました。中の画像をクロップすると、枠線が消えてしまうという致命的なものです。そのためMotion5を使用してクロップ対応の基本枠線エフェクトを作成しましたが、まだ完全に意図した通りの動きにならず、静止画像などではうまく働きません。

 PinPをより説明的な目的で使用するために、吹き出しの中に画像を表示させたくなりました。これをFCPXのエフェクトテンプレートとして作成すれば編集作業がはかどるため、Motion5で自作に挑戦してみました。

FCPXから使用出来る「吹き出し画像」エフェクトを作成

設計時の目標は以下の通りです。引き出し線を消してやれば、基本枠線エフェクトと同じ見え方になります。これが完成すれば、縦横比は固定ですが、うまく働かなかった枠線付き静止画像のクロップ処理にも使えます。
  • 最も良く利用しているサイズ(40%)に自動調整
  • 縦横比は良く使うフルHDと同じで固定
  • 引き出し線を上下左右に配置可能
  • 引き出し線の向き(傾き)と長さの調整が可能
  • 引き出し線のみ消すことが可能
  • 枠線の幅の調整が可能
  • 色の変更が可能
  • 画像の拡大と上下左右のパンが可能


Motion5で吹き出し画像エフェクトを作成


 快適動画編集シリーズの前回までの投稿では、Motion5のすべての手順が網羅できるように画面イメージと説明文を掲載していました。今回は作業手順が多く、記事の内容が膨大になってしまいますので、Motion5の基本操作は理解しているという前提で進めていきたいと思います。エフェクトの適用順序や対象、パラメータの活用でどのように汎用性を持たせるかというアイディアの紹介を中心にしています。

1. Final Cut エフェクトの作成を開始


 Motion5を起動し、新規作成から「Final Cut エフェクト」を選びます。普段使う画像フォーマットを指定し、継続時間はとりあえず3秒にしました。下のような画面に変わりますが、レイヤーリストには「プロジェクト」、「グループ」、「エフェクトソース」の三つが最初にできています。一番下の「エフェクトソース」がFCPXでエフェクトを適用された時の画像になります。

作成初期は黄色で囲んだ三つのレイヤーのみ、あとは自分で追加して行く

今回は動きが伴うエフェクトではありませんので、時間軸を制御するタイムラインは非表示にしています。

2. 「エフェクトソース」を調整


 FCPXでこのエフェクトが適用された時の初期値として画像(エフェクトソース)の大きさを40%にします。今までは毎回手動で調整していたのですが、こうしてやればサイズ調整はエフェクトを適用した途端に完了します。

 次に画像を拡大した時に、吹き出しの枠からはみ出す部分をマスクします。「エフェクトソース」レイヤーを右クリックし、出てきたメニューから「イメージマスクを追加」を選びます。必要なマスクソースは後から準備しますので、とりあえずここはそのままにして次に行きます。

「エフェクトソース」にイメージマスクを追加

3. 「吹き出し」部分の作成


 「エフェクトソース」と同じレベルで、上に重なる形で吹き出し部分を作成します。複数のレイヤーやエフェクトが入りますので、先ず「吹き出し」グループを作成しておきます。矩形と直線の作図ツールを使って「エフェクトソース」のサイズに合うように「吹き出し」を完成させます。

グループとして「吹き出し」を作成

矩形は先ずアウトラインのみで、後ろの「エフェクトソース」が見える状態で作成します。完成したら、コピーしてアウトラインなしの塗り潰しのみにします。このレイヤーは非表示にしておきます。
 引き出し線はライン(直線)描画ツールで三角形を描きます。拡大縮小、反転などの処理対象となりますので、アンカーポイントを一番端(上図では一番上)にしておきます。

4. 「エフェクトソース」のマスクにソースを指定


 先ほどの「エフェクトソース」を調整のところで準備したマスクにソースを指定します。「吹き出し」部分作成の際に「矩形のコピー」として作成し、非表示にしてあるレイヤーをマスクソース部分にドラッグしてやればOKです。

「エフェクトソース」のマスクソースを指定

これでPinP内の画像を拡大しても「吹き出し」からはみ出した部分はマスクされて見えません。これでクロップ対応の基本枠線と類似の機能を実現できました。

5. 「吹き出し」に「カラー化」フィルタを適用


 白色で作成した「吹き出し」に自由に色をつけることができる「カラー化」フィルタを適用します。白のリマップを変更することにより他の色に変わります。フィルタを「吹き出し」グループに適用することにより、「矩形」と「引き出し線」の両方を一度に変更しています。

「吹き出し」に「カラー化」フィルタを適用

6. 「上下/左右反転」フィルタを使って引き出し線の向きと場所を可変に


 引き出し線が伸びて行く方向や、画面の上下左右のどこから出てくるかを変えられるようにします。先ず「引き出し線」レイヤーに「上下/左右反転」フィルタを適用し、方向を「左右」にします。
「引き出し線」の向きを左右反転できるようにする

続いて、同じ「上下/左右反転」フィルタを「吹き出し」全体のグループに適用します。反転方向を「上下」にセットすれば完了です。これで引き出し線は上と下に出せるようになりました。

「吹き出し」グループを上下に反転できるようにする

7. FCPXへ公開するパラメータを指定


 初めの設計目標を実現するためには多くのパラメータを公開する必要があります。
  • 引き出し線が出る場所の切り替え「吹き出し」グループの上下/左右反転
  • 引き出し線の出る向きの切り替え「引き出し線」の上下/左右反転
  • 引き出し線の出る位置の調整「引き出し線」の変形.位置X
  • 引き出し線の長さの調整「引き出し線」の変形.調整
  • 引き出し線の表示・非表示指定「引き出し線」の塗り潰し
  • 画像の枠線幅の調整「矩形」のアウトライン.幅
  • 吹き出し全体の色指定「カラー化」の白のリマップ
  • 画像の拡大「エフェクトソース」の変形.調整
  • 画像のパン(X/Y)「エフェクトソース」の位置.X/Y
これらのパラメータを直接公開しても必要な機能は実現できますが、数値指定のものがあったり、最大値・最小値を決めてはみ出さないようにしたいものなどが含まれています。このような場合、一度リグに登録してコントロール方法と最大・最小を決めてから公開すればより使いやすくなります。

 枠の中の画像は大きくすることはあっても小さくすることはありませんので、3倍を最大とする拡大のみをスライダーで調整できるようにリグを設定してあります。引き出し線の位置調整はパラメータを直接いじると枠線から外れてしまいますので、枠線の範囲内で左右に動くようにリグで最大値・最小値を制限しています。他に画像のパン(X/Y)もスライダーが使えるようリグ経由としました。

リグを使うとコントロール方法をきめ細かに設定可能

 「プロジェクト」のインスペクタを開くと、公開されている全パラメータが表示されます。内容のわかりやすいラベルに変更するとともに、使用する際の初期値をここで指定しておきます。

最終的に公開されたパラメータ

8. 最後に適切な名前をつけてFCPXへ公開


 ここまでで出来上がったエフェクトは、引き出し線が上下に出てくる吹き出しです。目標では左右にも出ることとなっていましたが、この段階では実現できていません。一つのエフェクトに上下左右をまとめようとすると、どうしても余計な公開パラメータが増えてしまったため諦めました。ここで作ったものを「吹き出し画像(上下)」という名前で公開し、左右用は「吹き出し画像(左右)」という別エフェクトとして作成しました。ちょっとズルをしましたが、使う際の手順はその方が少なくできそうです。一つのエフェクトにまとめるうまい方法がありましたら、ぜひご教授ください。Motion5初心者にはとりあえずこれが限界でした。

 「引き出し線」のみを非表示にできるようにしてあります。こうすることにより結果として「基本枠線」エフェクトと同等の表示をさせられます。「基本枠線」エフェクトで苦労しているデジカメ画像のクロップ相当機能が簡単に実現できています。GoPro動画にデジカメ画像をPinPで表示するという、一番良く使う編集作業が一挙に効率化されそうです。自分の編集手順を効率化するためのテンプレートを自由に作れるMotion5。単なるボケ防止のための練習ソフトを超えて、手放せないアプリケーションになってきました。


作成したテンプレートのファイルはこちら


 よくわからない部分の確認や、Motion5を使わずにそのままFCPXで利用したいという人向けに作成したMotion5テンプレートをZIPファイルで公開することにしました。以下のリンクからダウンロードしてお使いください。
Googleドライブ画面が表示されますので、そこからダウンロードできます。


0 件のコメント:

コメントを投稿