活動限界風のカウントダウンタイマーを作ってみよう

動画編集

活動限界風カウントダウンタイマー

 

「逃げちゃダメだ、逃げちゃダメだ、逃げちゃダメだ、逃げちゃダメだ」

 

新世紀エヴァンゲリオンで登場するシーンです。

エヴァンゲリオンを知っている人なら、もれなく知っているこのシーン。

 

「汎用人型決戦兵器人造人間エヴァンゲリオン」は、「アンビリカルケーブル」から電源を供給して、動きます。

 

しかし、そのケーブルが断線しても、数分は活動ができます。電源供給が、内部電源に切り替わるからです。

 

主人公「碇シンジ」のレベルになると、内部電源に頼らずとも「暴走」と呼ばれる内部電源に頼らずして行動が出来るようにもなるのですが・・・

本日は、そんなエヴァの話をしたいわけじゃありません(笑)

 

本日は、「活動限界」の際に登場する「内部電源の残量を表すタイマー」を、勝手に

「活動限界タイマー」

と呼ぶことにして、私が過去に映像編集の仕事をしていたとき、お遊びで作ったこのタイマーについて、お話します。

 

スポンサーリンク

まずは、ご覧下さい。

実際に2年ほど前に作ったタイマーです。

上は、無修正版。下は、アニメを意識した修正版です。

エヴァンゲリオンの活動限界風タイマーを作る

「活動限界のようなタイマーを作りたい。」

と思ったのがきっかけでした。

 

「そんなきっかけ、ありえなくない?」

 

とツッコまれそうですが

私は結婚式の余興VTRを手がけることが多かったので、演出の一つとして組み込めないものかと、考えている時期があったのです。

関連記事

結婚式の余興ってどうしたらいいの?何をするかネタ探しで悩んでいるあなたに向けたアドバイス

自作の結婚式余興ムービーで、作品の完成度を上げるために役に立つ、ちょっとした小技やネタについて

 

当時ググって、あちらこちら検索してみましたが、アフターエフェクトで作られているものが多かったり、そもそも、熱量がそこまで高くも無かったので、YouTubeにアップされている「先人」のタイマーを見て満足していたりしていました。

 

アフターエフェクトとは、Adobe社が販売している映像を加工したり、白紙の状態から映像を作り出すことができるソフトウェアです。

高価だし、そもそもあんなハイクオリティのソフト、私は使いこなせない。(使いこなせたら、かっこいい映像とかもっと作れるんだろうなぁ)

 

趣味の延長線上にしかない私の動画編集は、アフターエフェクトを必要としていないレベルです。

 

でも、なんとか出来ないものか?と作ってみたのが、上で紹介したタイマーです。

 

作業環境、使用したソフトについて

使用しているパソコン等の詳しい環境は、結婚式のお祝いムービーを自作したいけど、どこから手を付けていいかわからない人へに書いてあるので、知りたい人は覗いて下さい。

特段変わっている、こだわっているというものはありません。

 

使用ソフトは

  • GIMP
  • PowerPoint
  • CorelVideoStudioProX5(動画編集ソフト)

です。

 

Corel VideoStudio Pro X5は、ずいぶんと古くなり、今更ながら、Amazonのほしい物リストの存在を知った私でも触れましたが、現在使えなくなってしまいました。※あしながおじさん、おばさん待っています(笑)

 

ちなみに、最新版(2017年10月現在)はこちらです。

 

動画編集ソフトは使い慣れているものがいいと思いますし、有料じゃなくてもいいのです。

その際、気を付けるべきコトは

  • タイムラインが6以上(できれば、10以上は欲しいところ)
  • オーディオライン1以上

の動画編集ソフトを使用して下さい。

 

また、無料で動画編集ができるソフトを選ぶ際には、注意も必要です。

関連記事

無料の動画編集ソフトはこの1択!【無料ソフトで失敗したくない人へ】

 

では、早速作業に入ります。

 

カウントダウンタイマーを作るための手順

カウントダウンタイマーを作る上で、最も重要なことは

タイマーの表示部分

を作ることです。

 

当たり前ですね(笑)

 

最初に、タイマー表示部分をつくる

私は、タイマーっぽくするためにセグメント数字を使いました

セグメント数字とは(ひょっとすると、私の造語かもしれませんが)、7セグメントディスプレイに代表される様な表示方法の一つで、いわゆる

数字のデジタル表示

っぽいやつです。

セグメントで表された8

この「8」をベースに、GIMPで、0〜9の数字を作ります。

 

特に難しいコトも無いので、簡単に説明すると

  1. 8を画像ダウンロード(8として利用)
  2. 8の真ん中の横棒を消す(0として利用)
  3. 8の左下段の縦棒を消す(9として利用)

のように、地道に0~9まで作成しました。

ちなみに、背景を透明化するために、ファイル形式は.pngで保存します。

 

GIMPで画像を切り抜く方法や、背景を透明化する方法など、詳しくは、背景の透明化は3ステップ/フリーソフトで画像の透明化は簡単か?をご覧下さい。

 

タイマーの表示部分はこれだけです。

 

その他、活動限界のカウントダウンタイマーに必要なパーツをつくる

活動限界タイマー背景

背景はもちろん、エヴァンゲリオンの活動限界を参考に、GIMPを利用して、平面で描いています。

 

これも、普段グラフィックを作らない人(特に私)からすると

例えばグラデーションの出し方ひとつをとっても、わからなかったので、試行錯誤を繰り返しました。

gimpでグラデーション背景

 

でも、こんなことが無料で出来ちゃうなんて、改めてGIMPの凄さを実感します。

 

基本的な流れとしては、背景をベースに、必要なパネルや素材(稼働しない部分)を

「重ねて貼り付けて」いくイメージ

です。

※これすなわち、レイヤーのことなんですけど、画像編集等に本格的に携わった事が無い人からすると「レイヤーってなに?髪型?」のレベルなので、なかなか難しいです。はい(実体験)。

 

ちなみに、各パネルの黒の部分は、周りにオレンジでふちどりしてあります。(光っているっぽく演出する為に)

 

厳密には、縁取りというよりも、黒パネルより、少し大きいオレンジ色パネルを、下に描いています。

 

GIMPでは、選択範囲を広げることもできるので、つくった黒色部分をフィジー選択、または色域を選択し、選択範囲の拡大を適切におこなって、少し大きめのオレンジパネルをつくります。

 

その他、稼働する部分で必要なパネル(赤黒パネル他)も作成します。

赤と黒のライン

 

文字は、パワーポイントで作成

活動限界まで

エヴァンゲリオンの特徴の一つともいえるのが

文字

です。

 

なので、文字はフォント選びを含めて、こだわりたい部分です。

 

「個人的に」という前置きをしますが、文字は、編集が比較的簡単だと思われるPowerPointで作成が便利です。

 

もちろん、GIMPでも文字を書くことは出来ますし、その他グラフィック編集ソフトでも文字を組み込むことは出来ます。

 

しかし、私は

  • ディティールにこだわりたい。
  • 光の加減や色味、フォントの大きさの変更など、文字編集は簡単に行いたい。

という考えから、PowerPointのほうが編集しやすかったので、PowerPointで作成しました。結果よかったとも思っています。

 

エヴァの特徴の一つでもある「文字」を、手軽に簡単に表現しようと思うと、グラフィックソフトでは、なかなか難しい部分があります。

※個人的にマイクロソフトでの文章作成に慣れているだけかもしれません。

 

さらに言えば、もともと、結婚式余興の演出の一つとして利用しようと思っていたので、気軽に文字を変更出来るよう、文字部分は背景に組み込まず

動画編集ソフト上で、重ねる

という考えも強かったのかもしれません。

 

フォントは購入可、無料でもそれなりにイケる

ちなみに、エヴァンゲリオンで使用されているフォントは制作サイドで自作されたもので

「エヴァ明朝」

とも言われています。

 

タイマーを作っていた時には(2015年)まだ発売されていませんでしたが、2016年に公式フォントとして発売されています。

 

私みたいに、極力費用をかけずに…。と考えている人は

  • HGP明朝
  • HGP平成明朝体W9

あたりがおススメのフォントですね。

(ちなみに私は、HGP平成明朝体W9で書いています。)

 

タイマーに組み込むのは、動画編集ソフト上で

PowerPointで作成した文字は、ファイル形式をJPEGで保存しています。

※そのまま保存すると、プレゼンテーション用のファイル形式なので、全く使えません。

 

.JPEGなので、背景は透明にできていません。

私は、文字背景の透明化はCorel VideoStudioのクロマキー合成で貼り付けています。

 

もし、十分な動画編集ソフトをお持ちじゃ無い場合は

  • 予め背景を描くときに(不動部分として)背景と一緒に描くか
  • GIMPなどで、背景を透明にした状態で作る

しかないですね。

 

動画編集ソフトを使って、具体的に作り上げていく

必要な素材を一通り作り上げたら、いよいよ動画編集ソフトでの作業になります。

 

とりあえずタイマー部分だけ作る

タイマー編集画面

写真ではわかりにくいかもしれませんが、タイマー部分は力技です。

要は、「ひたすらコピペ」です。

 

今回のタイマーは、1/100秒まで必要なので、上の写真のような感じで

  • 1/100

でそれぞれ、時間をあわせて配置していきます。

 

枚数が増えていくとコピーして貼り付けるのでも処理に時間がかかってきます。

1/100秒という短い画像データを何十枚も扱うわけですから当然かもしれません。

 

このようにして出来上がったタイマー部分を、一旦「映像」として書き出し、組み込むパーツとして利用します。

 

完成に向けて、動画編集ソフト上で足し算をしていく

今、手元にあるパーツとしては

  • タイマー表示部分+背景(不動部分)
  • 文字
  • 可動パネル(赤黒パネル、赤パネル)

です。

あと、必要なのは、効果音ですね

 

効果音は、「無料+効果音」でググればたくさん出てきます。

お好みで選んでください。

 

これらを足し算していきます。

活動限界風カウントダウンタイマーを作る

※写真はタイマー部分も一緒に編集しているときのものなので、ちょっと仕様が違いますが、載せていくっていうのはこういうこと、っていうイメージとして。

 

ちなみに、Corel VideoStudioの場合は、タイムラインが下に行くほど(タイムライン番号が増えるほど)表示では、前面に来ます。

 

このように、パーツを組みこんでいって

  • 1秒単位で効果音を付けたり
  • 残り10秒を切ったらエラー音がなったり

という「音」もミュージックのタイムラインにタイミングよく載せていきます。

 

その他、細かなこだわりとしては

 

カウントダウンが始まるまでは

  • 外部(EXTERNAL)パネルが明るく
  • 赤黒パネルも、外部パネルのところ

にあります。

 

その後、タイマーが作動したと同時に

内部(INTERNAL)パネル

に借り換える作業や

残り10秒を切ったら、DANGERパネルが点灯する

などを行います。

 

ちなみに、本家エヴァンゲリオンの活動限界タイマーは

30秒を切ると全面が赤くなったり、点滅したり…と、ずいぶんと様子が違います。

 

さらに、つくってから気づきましたが

活動限界まで

の下には

あと

という文字が入りますが、それが抜けています。

(活動限界まで、あと○:○○:○○って感じ)

 

まぁ、あくまでも活動限界風ということで、厳密によせていかなくてもいいか…。(いいわけ)

 

まとめ

アフターエフェクトでは、もっと簡単に、作れたりするのでしょうか。

使ったことがないのでわかりませんが、とりあえず

  • GIMP
  • PowerPoint
  • 動画編集ソフト

の3つを使って、素人の私でも作成することができました。

今回の制作にあたって苦労した点は

  • 背景のレインボーを出すところ含めて、グラフィックの作成
  • 動画編集ソフトで、タイマーをつくるところ

です。

グラフィックの作成は、イラストを作成することになれている方はそうでも無いかもしれませんが、試行錯誤を繰り返しながら作成しましたので、手間がかかりました。

タイマー部分は、力業でコピーして貼り付けというのが手間であり、また、パソコンのスペックにもよるのでしょうが、貼り付けを繰り返していく内に動作が重くなっていき、処理に時間がとられました。

 

工夫した点は

  • 文字をパワーポイントで作成
  • 一度にタイマーを完成させるのでは無く、パーツに分けて、作成

ってところでしょうかね。

 

一度で全部を一気に作ろうとすると、動画編集ソフトファイルが重たくなり、作業効率が激減します。

さらに、1/100秒の数字を含め、作業自体がとても煩雑になるため、色々と効果や演出をつけようと思うと、フリーズしたりしました(泣)

 

もし自作される際は、せめて

  • 背景とタイマー部分
  • 文字
  • 文字の背景(オレンジ縁取りの黒)や、その他パネル

の部分をそれぞれで完成させて

最後に合わせて1本にする

 

そのほうが

  • 処理のスピード
  • 作業のしやすさ
  • わかりやすさ
  • あとで再編集のしやすさ

すべてにおいて楽なような気がします。

 

興味がある方は、ぜひどうぞ。

 

スポンサーリンク