Keynoteのビルドイン、ビルドアウト機能をQuickTimeで活用しちゃう

Keynoteのビルトイン、ビルドアウト機能を黒ベタ背景で利用し、QuickTimeに書き出せば、使い道が倍増します。

Keynoteでは次のスライドへの移動を様々なエフェクト処理でスマートに行うのが売りですが、スライド上の任意のテキストに対して個別にビルドイン、ビルドアウトを設定できるます。この機能だけを使ってアニメーション化させた任意のテキストをQuickTimeとして書き出せば短時間で気軽にちょっと面白いテキストエフェクトムービーを作成することが出来ます。しかも日本語フォントでもバッチリなので、割り切って活用すると随分と便利です。なお、背景に黒ベタなどの単純な色ベタを指定しておけば、ムビーソフト側でのマスキングなどの処理も簡単になります。



上の【図】はビルドインの軌道設定



上の【図】はビルドインのタイプライター設定



上の【図】はビルドインの軌道設定とタイプライター設定をMotion上で組み合わせたもの。ちなみにMotion側では読み込んだQuickTimeのブレンドモードは【加算】として組み合わせています。冒頭のイメージはこの組み合わせに対して背景に任意の背景を読み込んだだけのものです。

モーションパスの設定は組み合わせと変則が大切

少ない制止画コンテンツを効率よく上手に使うには、モーションパスの設定を片方向、8の字処理、そしてピンポン設定を適度に織り交ぜるといい感じにバラツキが出来ます。



した準備として上の【図】のように、少ないコンテンツ（ここでは花のイラスト）のサイズを変更したものと、アクセント用のパターンなどをPhotoshopで用意しておきます。なお、作例はIllustratorで作成したモノをPhotoshop形式で書き出して言います。なお、作成する上での注意事項は、多出来るだけ細長いイメージを作成しておくことです。ここでは花ではなくて波の形のパターンを長めに作成しています。あとは下の【図】のようにメインの花のレイヤーに対して、モーションパスを片方向設定、8の字処理、そしていくつかのレイヤーに対してピンポン設定を行います。こうすることで動きにメリハリと意外性が発生し、同一のイメージにもかかわらずバリエーションの豊富なイメージに見るモノが錯覚しやすくなります。作例では4つの花のレイヤーのうち、2つにピンポン設定を行っています。



下の【図】は最終的なレイヤーの状態です。解説用の作品なので他の設定はしていませんが、このようにほんの少しひねくれた設定を行うことを心がけると、少ないコンテンツでもユニークな映像を作り込むことが出来ます。

Motionでの背景の繋ぎ目は最初と最後が肝心

ひとつのモーションパス上に複数のアレンジした制止画を時間差で配置するだけでもユニークなイメルージをえることが出来ますが、その場合は背景の繋ぎ目の処理に注意をはらいましょう。



まずPhotoshopでメインイメージ（ここでは緑色のキャラクター）と背景画像をそれぞれ4種類作成し、レイヤー分けしておきます、なお、ここで注意するのは上の【図】の矢印のレイヤーです。赤い矢印は下から2番目のレイヤー（back_01）の複製、マゼンタの矢印は上から2番目のレイヤー（back_04）の複製です。こうすることでスタート位置とエンド位置にも次（エンド〜スタート）の背景をとけ込ませることが出来ます。これを具体的に整理したイメージが下の【図】です。マゼンタのバーがキャラクターに設定した共通のスピン設定によるモーションパスで、上のブルーの4本のバーが4パターンのキャラクターの流れを示しています。そして、それぞれがフェードイン・フェードアウトで自然に切り替わるようにするために重なり部分を設定しています。次にオレンジから赤のバーは4種類の背景イメージを示しキャラクターと同様にそれぞれがフェードイン・フェードアウトで自然に切り替わるようにするために重なり部分を設定しています。ただし、キャラクターのようにモーション設定を行っていませんので最後の背景の終わりには最初の背景がフエードインするものを、最初の背景の冒頭には最後の背景のフェードアウトを組み込むことで全体の流れを自然にすることに努めています。



下の【図】は実際にMotion上でのそれぞれのタイムライン設定です。いきなりこれを見てしまうと混乱されてしまう方も多いかもしれませんが、上のイメージ図で雰囲気を掴んでいれば処理は簡単に設定することが出来るはずです。



なお、動画では気にならないレベルですが、それぞれの画像の重なり部分の中間地点は下の【図】のようになっています。

Motionにてピンポン設定をすると自然な動きが得られる

ポーズの異なる制止画を数枚組み合わせたようなイメージの場合、Motionにてピンポン設定をすると自然な動きを簡単に得ることが出来ます。



作例は上の【図】のように、Illustratorで作成したサンタクロースをレイヤーごとに配置してからPhotoshop形式で書き出し、背景をPhotoshop上で調整したものをMotionに読み込むという手順を踏んでいます。あとは下の【図】のように3つのサンタクロースに対してモーションパスを設定し、グラデーションで透明化する背景は全て【乗算／不透明度＝10％】程度に設定しました。ちなみに真ん中のサンタクロースは小さな8の字の動作、手前のサンタクロースは緩やかなカーブで右端から左端へ、後方のサンタも同様に緩やかなカーブで左端から右端へ移動するように設定しています。



下の【図】はMotion側のレイヤーの状態です。なお、上記の設定が素のままでもまったく問題有りませんが、ここでそれぞれのモーションパスの速度設定をピンポンに指定すると、モーションパスの設定動作後に逆走するので、設定が相当ラフであっても自然な動きを得ることが出来ます。ランダムな動きの設定などには重宝するのではないでしょうか。

LiveTypeの背景処理はMotion などで別に作成すると効率が良い

LiveTypeで作成したモーションは通常背景を入れずに作成し、FinalCutProなどで別途背景画像と組み合わせたりすることが、ワークフローとしては一般的かもしれません。しかし、LiveTypeに含まれている背景用のモーションあるいはムービーにも色々と面白いイメージがあるので、これを使わない手はありません。

そこで、LiveTypeに含まれている背景イメージを使いたい場合は、文字要素を入れない状態で書き出しておき、それを別の映像系ソフトに読み込んで編集した方が処理能力的にも賢明でしょう。本当はMotionなどで一括処理できればいいのですが、実際にチャレンジし、【Macintosh HD／ライブラリー／Application Support／LiveType】には様々なデータが含まれているので、LiveType側のライブラリーに移動させればLiveType側のデータを全てMotion側で一元管理して使うことが出来ると浅はかな考えを持っていましたが、【Home／ライブラリー／Application Support／Motion/Library】には14個のフォルダーが作成されているもののも中身は空っぽで断念。

私の勘違いもあるかもしれませんが、Apple製のソフトは概してライブラリー的なデータがどこにあるのか分からないケースが多くちょっとイラツキます。結局、個別に作成することにしています。もちろん全てをMotion側で作成しても色々と遊べるのは確かですが。

そこでLiveTypeに踏まれている背景の中から複雑に二重処理したモーション処理が飛び出すようなイメージをつくることにしました。そのため、文字のモーションデータだけをLiveType形式で保存し、続けて背景イメージだけをLliveTypeのネイティブ形式で保存し、作業をMotionへ移しました。なお、Final Cut Proも所有していますが、ネタ出しには時間がかかりそうなので暫くお待ちください。さて、作業をMotionへ移したら先ほど保存した2つのファイルを読み込みます。この時、下の【図】のように背景画像を一番上と一番下へ、二重読み込みさせます。



あとは、上と下の2つの背景イメージをそれぞれフェードインだけ、フェードアウトだけの処理に設定し、どちらか一方のカラーイメージを変更して完成です。下の【図】が完成ムービーのスタート時点のイメージ。その下が終了時点のイメージです。この手法は複雑に調整したカット全体に対して何かフクションを起こしたい時など、通常の映像などにも有効でしょう。

エンドレスのモーションは8の字を描く

Motionなどで任意のオブジェクトに動きを与える場合、作成する時間内で完結させる場合は問題ないのですが、エンドレスで動かしたい場合、始めと終わりの部分の位置を合わせなくてはなりません。そんな時はモーションパスで8の字を描いてみると良いでしょう。



まず上の【図】のようにMotionで自動生成される直線のモーションパスのポイントに方向線を追加（commnadキー併用にて）して曲面を形成します。カイドラインを設定すると処理が楽です。続けて下の【図】のように適宜にポイントを追加（Optionキー併用にて）しながら、オブジェクトの動きに合わせていきます。



最終的に始点と終点の方向線の長さと方向を調整したらガイトラインのスナップ機能を活用して重ねてしまいます。始めと終わりの部分の位置が合ったことでスムースなエンドレスを作成できます。作例では簡単に8の字を作成しましたが、作り込みは色々と工夫できそうです。なお、このTipsは既に（こっそりと）11月15日にアップした『Motionで静止画モチーフのハンデを克服』で使っています。

Motionで静止画モチーフのハンデを克服

Motionで静止画をモチーフとする場合のハンデを克服する手法として、同一画像をPhotoshopなどでぼかした輪郭線でマスキングしてたものを作成して再利用する方法があります。アイデア次第で1枚の写真しかなくてもユニークなムービーを作成することが出来ます。



まず背景画像の複製に対してPhotoshopで上の【図】のようなアルファチャンネルを作成します。MotionはPhotoshopのアルファチャンネルを理解できるのでレイヤーを調整する必要はありません。アルファチャンネルを作成したPhotoshop画像をそのままPhotoshop形式で保存し、Motion上に2二重に配置します。次にそれぞれのイメージに対してモーションパスを設定し、下の【図】のように始点から終点に戻るように方向線を追加して調整します。下の【図】は2つの同一画像に対して個別に設定したモーションパスの部分です。選択した事により白く表示されているポイナントが画面の中心です。中心から中心に戻るように設定しいますが、微妙に小さな範囲で動いているために2つの動きが自然な揺れに見えるようになります。



最後にアルファチャンネル調整した2つのイメージのレイヤーの不透明度を50%ほどに設定して完成です。下の【図】は背景の表示をオフとした状態です。モーションパスの設定はもう少し小さめでも良かったかもしれません。



下の【図】は調整中の確認画面です。シンプルな設定ではありますが意外と応用範囲は広いのではないでしょうか。もちろん私の一連のMotion系のネタはPhotoshopなどでの制止画調整にも応用が効きますので楽しんでみてください。

フェードイン・アウトだけで制止画を動かしてしまう手抜きムービーの勧め

話が前後してしまいましたが、ここでは出来るだけ制止画をモチーフとして『うごくものをつくる』というコンセプトでネタを絞り出しています。ということで今回はMotionにてまったくモーション処理をせずに単純なフェードイン、フェードアウトだけでムービーを作ってみたいと思います。



まず用意するのは上の【図】のようなレイヤー構造のデータです。個別に用意しても構いませんが、Photoshopのレイヤーで整理し、1つのファイルとしておくと便利です。なおこの段階である程度描画モードを調整し、全体のイメージを煮詰めておきます。もちろんMotion上で行っても構いませんが、一部を除き基本的な描画モード（Motionではブレンドモード）は互換性がとれていますので実質的に問題はありません。作成したデータをMotionにすべてのレイヤーを生かして読み込んだら、あとは一番下のレイヤー以外へ下の【図】のように設定を変えてフェードイン、フェードアウトを指定します。



下の【図】は タイムテーブルの状態です。全く何も小細工はありません。単なるフェードイン、フェードアウトの組み合わせだけです。こうすることで類似したイメージを複数用意するだけで簡単なモーフィングもどきを作成することが出来ます。



下の【図】は冒頭の元画像がもっとも変化した状態です。長い時間に設定すると両者の違いは比較しない限り意外と気が付かないものです。

Motionのマクス処理はハーフトーンで

Motionのマスク処理はパスを作成するだけの簡単な処理ですが、マスクそのものに対する不透明度を調整することで、多重マスクの組み合わせが結果として100%といった演出をすることが出来ます。



上の【図】は2つ作成したマスクをモーション処理にてそれぞれ逆方向からスライドさせているだけの設定ですが、下の【図】のように不透明度を50%にすることで、2つが重なったところのマスキングが完全に100%となり、初めて背景画像を鮮明に見ることが出来ます。マスクが4つであれば不透明度は25%という具合に、合計が100%以上になるように設定すれば、ちょっとした演出となります。



もちろん作成後であってもマスクはIllustratorと同様の操作が可能なベジェ曲線ですので、全体の動きの中で少しずつパスを調整できるので、重なり具合をギリギリまで試行錯誤することが出来ます。

IllustratorデータをMotionで操り人形に設定する

MotionではIllustratorのPDF形式をサポートしていますが、Illustratorは既にPDf形式そのものなので【.ai】形式であってもMotionへ配置することが出来ます。ただし、レイヤーをサポートしていないので、パーツごとにファイルを分ける必要があります。



Motionへ、レイヤーを生かしたままIllustratorのデータを読み込むことは出来ませんが、上の【図】のようにMotionのライブラリー上からネイティブのIllustratorデータ（CS2でも問題無し）をMotion画面へドラッグコピーすることが出来ます。もちろん通常の読み込みでも問題は有りませんが、多少面倒でもパーツ毎にファイル分けした物をフォルダーで管理すれば、後はドラッグコピーするだけで、Motion上で拡大縮小に耐えられるデータで作業を行うことが出来ます。なお、注意しなくてはならない点は、Illustrator上でデータを作成する場合、アートボードよりはみ出してしまった部分は読み込みでもドラックコピーでも反映されないことです。ということで、下の【図】は多少強引ですが、操り人形的にキャラクターのパーツ毎にMotionへIllustratorデータを配置し、パーツごとに動きを与えてみた実験作品です。

Motionに画面キャプチャーをナンチャッテ利用

ムービー編集画面の部分キャプチャーをスポット的に再利用すると、フラッシュ的なイメージを作成することが出来ます。上の【図】の上はモーション処理にて左端から右端のイメージにエフェクトしたイメージで、中間部分はその中間イメージです。上の【図】の下は上のエフェクト処理の中間部分に画面キャプチャーをフラッシュ設定させた状態です。





もちろんソフトウェア上でのエフェクト処理にてフラッシュが閃光したようなイメージを設定するソフトであっても、動いているイメージの瞬間部分がスパークする設定となってしまいます。しかし、画面キャプチャーを部分利用すると元画像のイメージを部分的に利用できるので起伏に乏しいエフェクト処理の中にちょっとしたアクセントを付けることが出来ます。また、追加したキャプチャー画像に対しての処理溜めに後々の微調整も簡単に行うことが出来るメリットがあります。なお具体的には下の【図】のように設定するだけです。

もちろんソフトウェア上でのエフェクト処理にてフラッシュが閃光したようなイメージを設定するソフトであっても、動いているイメージの瞬間部分がスパークする設定となってしまいます。しかし、画面キャプチャーを部分利用すると元画像のイメージを部分的に利用できるので起伏に乏しいエフェクト処理の中にちょっとしたアクセントを付けることが出来ます。また、追加したキャプチャー画像に対しての処理溜めに後々の微調整も簡単に行うことが出来るメリットがあります。なお具体的には下の【図】のように設定するだけです。

MotionやLiveTypeで書き出したムービーを再活用

LiveTypeやMotionで複雑なモーション処理を行ったイメージを簡単にレトロ風のぼけたイメージに変更させたい場合、映像関係のプロの方から見ると邪道なテクニックかもしれませんが、QuickTimeなどのムービーに書き出したたものを読み込んで最上部のレイヤーに配置したものを二重利用すれば簡単に表現することができます。



モーション設定が完了したら、元データを保存してから、QuickTimeに書き出し、書き出したQuickTimeムービーを背景用として読み込みます。読み込んだら上の【図】のように背景から一番上のレイヤーに移動させます。※上の【図】の下が処理前、上が処理後の状態です。背景用として読み込んだムービーはブルーのバーで表示されています。



読み込んだムービーに対して上の【図】のように不透明度とブラー、そして色を調整します。イメージはライブで確認できるので混乱するようなことはないでしょう。なお、作例は識別をしやすいように強めに設定していますが、下の【図】のようにイメージは激変します。



上の処理後のイメージと下の【図】のノーマル状態の違いを確認してみてください。なお、読み込んだムービーに対しても当然様々なエフェクトを設定することが可能です。