LumaFusionに標準で搭載されているトランジションの数は31個。
種類としては12種で、そのうち実際に使えそうなものは5、6個しかありません。
が、実はLumaFusionにはトランジションが無限にあります。
矛盾してますよね。
どういうことかというと、トランジションを自分で作成できるようになってるからです。
ということで、この記事ではトランジションの作成方法と4つのトランジションの追加方法を紹介していきます。
自作するのは面倒という方も、ドラッグ&ドロップだけで追加できる方法がありますので、ぜひ参考にしてみてください。
トランジションの追加には4つの方法がある
LumaFusionにトランジションを追加する方法は4つあります。
- LumaFusion標準のトランジションを使用する
- StoyBlocksのトランジションを使用する
- LumaFusionのエフェクトを使ってで自作する
- AffinityDesignerなどの別アプリで自作する
上から難易度が低い順に列挙しました。
一番最後はかなりマニアックなので、気になる方だけ見ていってください。
標準搭載のトランジションを使用する
LumaFusionに最初から搭載されているトランジションを使用する方法です。
これが一番楽で早いです。
操作方法は好きなトランジションを選んでドラッグ&ドロップで追加するだけです。

追加できる場所は、クリップの先頭と末尾、そしてクリップとクリップの間です。
トランジションの長さもドラッグで簡単に変更することが出来ます。

トランジションを追加して後から変更したい場合は、トランジションを選択した後に、画面下部のツールバーから☆マークを選択します。
するとトランジション一覧が出てくるので、ここから好きなトランジションを選択すると入れ替わります。

キーボードを使用している場合は「T」のキーを押すことで、瞬時にトランジションを追加することができるので、基本操作として覚えておきましょう。
キーボード操作の場合は、トランジションの種類は「CrossDisolve」固定となります。
以上が標準搭載のトランジションの使い方となります。
ただ、冒頭でも話した通り、種類が少ないのが欠点となります。
Story Blocksを使ってトランジションを追加する
LumaFusionにはStoryBlocksという月額・年額制のサブスクリプションサービスがあります。
StoryBlocksに契約していると、何百というロイヤリティフリーの素材が使用できるのですが、この素材を使ってトランジションを追加することが出来ます。
YouTubeでも解説しています。
トランジション素材をタイムラインに配置
StoryBlocks→背景の順に選択していきます。

この状態で「transition」と検索してみましょう。

すると大量のトランジションの素材(動画)がヒットします。
この中から好きなトランジションをタイムラインにドラッグ&ドロップします。
今回は「Hexagon Alpha Transition」というトランジションにします。
メイントラックに動画が配置されている状態であれば、その上のトラック(レイヤー)に配置します。

位置は後から調整するので適当でOKです。
クリップの速度調整
一度再生をしてみて、動きが遅いなと感じた場合は、クリップの編集画面からスピード調整を行います。
画面下部の「スピード&リバース」を選択して、スライドバーでスピードを上げていきます。

今回は4倍速で設定しました。
再生して、いい感じの速度感であれば、動画と動画の境目にクリップを移動させます。

クロマキーを使って背景の色を取り除く
次にトランジションの中の不要な赤の背景を取り除くために、クロマキーの機能を使用します。
クリップの編集画面へ行き、「FX→鍵マーク」の順に選択します。

すると項目がいくつかあるので、「GREEN SCREEN KEY」を選択します。

※「DARK LUMA KEY」「LIGHT LUMA KEY」以外であれば何でもOKです。
選択したら、色調の項目にあるスポイトアイコンをタップして、プレビュー画面の赤色の部分を選択します。

すると、スポイトで選択した赤の部分だけ透化してトランジションで使用したい白の部分だけ残すことができます。
これでトランジションの前半部分が完成です。
今の状態としては、トランジションの始まりの部分だけしかない状態なので、後半部分も作成していきます。

トランジションの素材を逆再生にする(リバース)
後半部分は簡単で、コピーして逆再生にするだけです。
作成した前半部分のクリップを複製して後ろに移動させます。

複製したクリップの編集画面へ移動して、「スピード&リバース」を選択。
そして「リバース」のスイッチをONにします。
すると、逆再生のトランジションが出来上がります。

以上で、全ての作業が完了となります。
再生をして確認してみましょう。

このようにStoryBlocksを使えば、複雑なトランジションを表現することができます。
今回は赤の背景がベースのトランジションを使用しましたが、黒背景の場合は、クロマキー機能の部分で「DARK LUMA KEY」を選択します。
LumaFusionのエフェクトを使って自作する方法
こちらが本題、自分でトランジションを作成する方法です。
使用するのは、エフェクトの中の「ぼかし」と「ゆがみ」のエフェクトです。

YouTubeでも解説しています。
動画と動画の境目の前後をカットする
まずは動画と動画の境目の前後を適当な長さにカットします。
30フレームのプロジェクトであれば、10フレームくらいの間隔でカットすると作りやすいです。

上記の10フレームにカットしたクリップに対してエフェクトを適応していくことで、自作のトランジションを作成することができます。
前半部分の10フレームのクリップの編集画面にいきます。

編集画面へ行ったら、ゆがみとぼかしの中からエフェクトを追加していきます。
ゆがみエフェクトのワイドを追加
ゆがみエフェクトの中からワイドを追加します。
- FXを選択
- ゆがみを選択
- ワイドを選択

すると画面が少し横に引き伸ばされたようなエフェクトがかかります。
ここから、動画が左から右に流れるような動きをつけるために、キーフレームを打っていきます。
クリップの先頭に移動して以下の手順を実施します。
- プレビュー画面の青い点を左に移動させる
- スケールを1.0(MAX)に設定
- スタート時点のキーフレームを打つ

ここで何をしてるかというと、動きをつけるための準備です。
動画のスタート時点は何もエフェクトがかかってない状態を表現するためにスケールを「1.0」にしています。
次にプレビュー画面下のスライドバーを1番右に持っていき、スケールを0付近に設定します。

この数値は好みですが、マイナスの領域に行き過ぎると歪み過ぎてしまうので注意してください。
最後に速度に緩急をつけたいので、1フレームずつスケールを調整していきます。

面倒ですが、この作業をやることで違和感が無くなりスムーズな動きを表現できます。
キーフレームってなに?という場合は以下の記事をご覧ください。

ぼかしエフェクトのモーションブラーを追加
次にぼかしエフェクトの中のモーションを追加します。
モーション20〜80までありますが、どれを選んでもOKです。
モーションのかかり具合(強度)によって、20〜30に分かれているだけで、後から調整するので、ここでは何も考えずに選びましょう。

次に「ワイド」を追加したときと同様に、キーフレームを打っていきます。
動画の開始地点ではモーションがかからないように半径をゼロにします。

続いて動画の終了地点では最もモーションが強くかかるようにします。

この辺は好みですが、半径を上げ過ぎるとボケすぎるので注意しましょう。
最後に緩急をつけるために、モーションのかかり具合を1フレームずつ調整していきます。

以上で前半部分が完成しました。
再生して以下のようになっていればOKです。

まだ前半部分しか完成していない状態なので、後半部分も作成していきます。

作業としてはほぼ同じなので、ポイントだけ挙げていきます。
ワイドについては、プレビュー画面の青い点を前半とは逆で右側に持っていきます。
スケールもさっきとは逆で、最初からワイドのエフェクトがかかった状態からスタートとなります。(0付近からスタート)

モーションもさっきとは逆で、スタート時点からモーションをかけ始め、徐々にモーションが解けていくように半径を設定していきます。

以上で自作トランジションが完成です。
再生すると以下のようになります。

始めは自作するのが難しく感じるかと思いますし、意味不明かと思います。
キーフレームの概念さえ理解出来れば、あとは慣れの問題なので、思いついた動きをLumaFusionで表現できないかを色々試してみるといいです。
AffinityDesignerで自作する方法
これはかなりマニアックで、文字にするとかなり大変なので、YouTubeをご覧ください。
1フレームずつ画像を作っていき、LumaFusionで繋げていくという手法です。
超簡単な流れを紹介します。
まずは素材作りです。
AffinityDesinerでトランジション用の画像を作成します。

LumaFusionで作成した画像たちを並べていきます。

たった2つの工程ですが、内容としては結構複雑で時間がかかります。
余力がある人だけチャレンジしてみてください。
おまけ:一番よく使うかもしれないトランジション
トランジションとはちょっと異なる類のものですが、動画と動画の間にテキストのクリップを挿入する方法もあります。

これを再生すると以下のようになります。

YouTubeでよく見かけるやつですね。
自作トランジションよりも、この手法を一番多用するかもしれません。
まとめ:目的によってトランジションを使い分けよう
トランジションの追加方法を全て解説しましたが、どの手法をとるのかは、動画のジャンルや目的によって様々です。
目的別に分けるとすると以下のような感じでしょうか。
- プロモーション動画やシネマティックな動画を作りたい → トランジションを自作する
- 場面の転換ポイントをわかりやすくしたい → StoryBlocksを使用する
- トランジションをデザインしたい → AffinityDesignerなどの別アプリを使用する
YouTubeで発信活動をしたいという場合は、ほとんどの場合は場面切り替えにちょっとアクセントを入れたいなぁ程度だと思います。
その場合はStoryBlocksなどのトランジションの動画を利用する程度でいいかと思います。
ちなみに、当ホームページのTOPに流れている動画は自作トランジションを使っていまてますので、どんな感じになるのか気になる方はチラ見していってください。
コメント