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

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

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

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

 

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

エヴァンゲリオンを知っている人なら、冒頭のセリフもご存じのはず。

 

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

MFilms顔写真
平たく言えば、コンセントみたいなもんです。

 

しかし、そのケーブルが断線しても、数分は活動ができます。

電源供給が、内部電源に切り替わるからです。

 

主人公「碇シンジ」は、「暴走」と呼ばれる内部電源に頼らない行動も出来るんですが・・・

MFilms顔写真
おっと。

 

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

本日は、「活動限界」の際に登場する「内部電源の残量を表すタイマー」を勝手に「活動限界タイマー」と呼ぶことにして、私が過去にお遊びで作ったこのタイマーについて、お話します。

 

Advertisement

まずは、活動限界タイマーをご覧下さい。

2015年に私が実際に作った活動限界タイマーです。

上は、無修正版。

下は、アニメを意識した(角度を付けた)修正版です。

MFilms顔写真
自己満足ですが、それなりの出来だったと思っています。

 

どうやって作ったのか、これからお話します。

 

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

MFilms顔写真
結婚式余興で、活動限界に出てくるようなタイマー表示をつかって、カウントダウンしたい!

 

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

男性シルエット

なんだ?その特殊な状況は・・・。

 

とツッコまれそうなので、補足すると、私は結婚式の余興ムービーを手がけることが多かったです。

それで、(余興前の演出の一つとして)どうにか活動限界風のタイマーを利用出来ないものかと、考えている時期があったのです。

関連記事はこちら

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

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

 

ググって、あちらこちら検索してみましたが活動限界タイマーは、「アフターエフェクト」で作られているものが多かったですね。

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

 

高価だし、そもそもあんなハイクオリティのソフト、私は使いこなせない。

MFilms顔写真
使いこなせたら、かっこいい映像とかもっと作れるんだろうなぁ

 

そもそも、熱量がそこまで高くなかったのかもしれませんね。

YouTubeにアップされている「先人」が作った活動限界(風)のタイマーを見て、満足していました。

 

でも、ふと

MFilms顔写真
アフターエフェクト(通称、AE)を使わずして、活動限界タイマー作れないかな?

と思って作ってみたのが、動画のような紹介したタイマーです。

 

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

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

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

 

私が活動限界風タイマーを作るのに使用したソフトは

  • GIMP(無料画像編集ソフト)
  • PowerPoint(マイクロソフト、通称パワポ。)
  • CorelVideoStudioProX5(動画編集ソフト)

です。

 

CorelVideoStudioProX5は、ずいぶんと古くなり、今更ながら、Amazonのほしい物リストの存在を知った私でも触れましたが、現在使えなくなってしまいました。

MFilms顔写真
あしながおじさん、おばさん待っています(笑)

 

ちなみに、最新版はこちらです。

created by Rinker
コーレル
¥6,490 (2018/10/16 12:24:36時点 Amazon調べ-詳細)

 

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

ただし、注意点として

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

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

MFilms顔写真
ムービーメーカーでは、きついと思います。

 

ちなみに、無料で動画編集できるソフトを選ぶ際に役立つ記事はこちらです。

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

では、作業内容についてです。

 

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

カウントダウンタイマーを作る上で、最も重要なことはタイマーの表示部分を作ることです。

MFilms顔写真
当然ちゃ当然です。

はじめに、タイマー表示部分をつくる

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

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

セグメントで表された8

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

 

特に難しいコトも無いので、説明不要かもしれませんが、簡単に説明すると

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

このように、地道にデジタル表示の「0~9」までをつくります。

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

 

詳しくは、フリーソフトで画像の透明化は簡単か?をご覧下さい。

MFilms顔写真
GIMPで画像を切り抜く方法や、背景を透明化する方法など書いています。

 

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

 

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

活動限界タイマー背景

背景はエヴァンゲリオンの活動限界を参考に、GIMPで描いています。

普段、グラフィックの作業をしない私は、今回コレがもっとも苦戦しました。

 

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

gimpでグラデーション背景

どうにか、時間をかければ素人でも作れます。

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

>>GIMPのダウンロードはコチラ(無料)

 

基本的な流れとしては、背景をベースに、必要なパネルや素材(稼働しない部分)を「重ねて貼り付けて」いくイメージです。

MFilms顔写真
すなわち、レイヤーで作業ということですね。
男性シルエット

レイヤー?髪型か何か?

 

画像編集をやったことがない人からすると、私と同じで「レイヤーってなに?」のレベルだと思います。

レイヤーとは「段」とか「重ねる」というイメージでいいと思います。

レイヤー説明

 

こんな感じで、必要なコンテンツを作って、一枚に貼り付けていき完成させます。

活動限界タイマー背景

ちなみに、各パネルの黒の部分は、周りにオレンジでふちどりしてあります。

MFilms顔写真
光ってるっぽくするためです。厳密にいうと「縁取り」ではなく、黒パネルより少し大きいオレンジ色パネルを、黒パネル下に重ねています。

 

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

赤と黒のライン

 

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

活動限界まで

エヴァンゲリオンの特徴の一つともいえるのが文字です。

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

 

そんなこだわりの文字(パネル)は、比較的編集が簡単なPowerPointで作成するのが、便利です。

 

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

しかし、私は

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

など、主に編集の容易さという観点から

MFilms顔写真
PowerPointのほうが編集しやすいかも?

と思ったので、PowerPointで作成しました。

結果、それでよかったとも思っています。

MFilms顔写真
今では、GIMPの作業も慣れたので、当時ほど苦痛ではなくなりましたが、直感的に作業出来るパワポの方が楽ですね。

 

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

MFilms顔写真
マイクロソフトの文章作成(ワードやパワポなど)が慣れている人は、特にそうだと思います。

 

さらに言えば、もともと、結婚式余興の演出の一つとして利用しようと思っていたので

MFilms顔写真
あとから(気軽に)文字だけを変更したいし、使い回したい。

って考えたので、いちいち書き出す必要がある「背景」には組み込まず、動画編集ソフト上で重ねるという考えがありました。

MFilms顔写真
文字は、テロップのような扱いをしたかった(背景と一体化させたくなかった)ってことです。

 

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

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

「エヴァ明朝」

とも言われています。

 

タイマーを作っていた時には(2015年)まだ発売されていませんでしたが

2016年に、公式フォントとして発売されています。

 

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

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

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

MFilms顔写真
ちなみに私は、HGP平成明朝体W9で書いています。

 

タイマー部分と背景を重ねるのは、動画編集ソフト上で

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

MFilms顔写真
そのまま保存すると「プレゼンテーション用ファイル形式」として、パワポのみで開ける形式で保存されてしまいます。
ご注意を。

 

ちなみに「JPEG」なので、文字の余白部分は透明にできていません。

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

 

もし

男性シルエット

合成できるような動画編集ソフト、もってねーし。

 

という場合は

  • レインボー背景や黒パネル背景を描くときに、一緒に文字まで描くか
  • GIMPなどで、文字背景を透明にした状態で作る・保存する(.png形式)

しかないですね。

 

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

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

 

とりあえずタイマー部分を頑張ってひたすら作る

タイマー編集画面

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

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

 

今回のタイマーは、1/100秒まで表示されるため

  • 1/100

でそれぞれ、時間をあわせて(画像の表示時間を調節して)1つ1つ丁寧に配置していきます。

 

枚数が増えていくと、コピーして貼り付けるってだけでも、相当な処理になるようで、パソコンが悲鳴をあげだします。

MFilms顔写真
1/100秒という表示時間の短い画像データを、何十枚~何百枚も貼り付けるわけですから、当然かもしれません。

 

このようにして出来上がったタイマー部分を、一旦「映像」(mpegなどの形式)として書き出し、「タイマーのメディアファイル」にして、後で仕上げるためのパーツの一つにします。

 

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

確認です。

ここまでに用意した、手元にある素材(パーツ)として

  • タイマー表示部分+背景(不動部分、動画編集ソフトで動画として書き出したタイマー部分のメディアファイル)
  • 文字(パワポで作った、文字パネル)
  • 可動パネル(赤黒パネル、赤パネルなど、時間に応じて動かすパネル)

 

これだけ、そろっていますか?

残る素材は、効果音です

 

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

カウントダウンに合ったあなたお気に入りの音源を探してみて下さい。

MFilms顔写真
ちなみに、私は無料で音源を探すときは「魔王魂」を利用することが多いです。

 

詳しくはコチラで語っています。

結婚式のお祝いムービーを自作したいけど、どこから手を付けていいかわからない人へ。

これで全部そろいましたので

  • タイマー表示部分+背景(不動部分、動画編集ソフトで動画として書き出したメディアファイル)
  • 文字(パワポで作った、文字パネル)
  • 可動パネル(赤黒パネル、赤パネルなど、時間に応じて動かすパネル)
  • 「ピッ、ピッ」などの効果音

を、動画編集ソフトで足し算していきます。

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

厳密にいうと、上画像はタイマーと背景は一体化していません。

  • レインボー背景
  • 文字
  • タイマー表示パネル
  • 効果音
  • 可動部

これらを同時に編集しようとしています。

 

MFilms顔写真
重たすぎて、フリーズしました。なので、先にレインボー背景と、タイマー表示だけを書き出して「レインボー背景タイマー部分」として、メディアファイルをつくってからのほうが、良かったなと思っています。

 

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

 

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

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

という「効果音」も、ミュージックのタイムラインにタイミングを調節しながら、セットしていきます。

 

その他細かなこだわりとしては、カウントダウンが始まるまでは

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

このようにしておいて

 

その後、タイマーが作動したと同時に、内部(INTERNAL)パネルに切り替えたり、残り10秒を切ったら、DANGERパネルが点灯するなどの小細工を行いました。

MFilms顔写真
ちなみに、本家エヴァンゲリオンの活動限界タイマーは30秒を切ると全面が赤くなったり、点滅したりします。

 

あとで気づきましたが、自作した活動限界タイマーとアニメの活動限界タイマー(オリジナル)を見比べてみたら

「活動限界まで」の下には「あと」という文字が入る

ようです。

MFilms顔写真
活動限界まで、「あと○:○○:○○」って感じですね。うっかり。
あくまでも「活動限界風」だからね、いいんだよ。うん。(いいわけ)

 

まとめ

アフターエフェクトを使ったことないので、この作業量が多いのか少ないのか、違いが良く分からないってのが本音です。

 

とりあえず

  • GIMP(レインボー背景、その他色パネル)
  • PowerPoint(文字パネル)
  • 動画編集ソフト(タイマー部分、仕上げ用)

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

 

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

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

です。

 

グラフィックの作成は、慣れている人はそうでも無いかもしれませんケド、私みたいにイラスト作成から縁遠い人からすると、かなり手こずります。

さらに、タイマー部分は「コピペを延々、繰り返す・・・。」というのが、面倒でしたね。

MFilms顔写真
パソコンまたは動画編集ソフトのスペックによりますが、貼り付けを繰り返していくうちに動作が重くなっていき、処理に時間がとられました。フリーズもしました。

 

工夫した点は

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

ってところでしょうか。

 

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

1/100秒の数字の貼り付けを含め、作業自体がとても煩雑で、重たい作業です。

MFilms顔写真
色々と効果や演出をつけようと思うと、フリーズしたりしました(泣)

 

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

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

の部分をそれぞれで完成させて、最後に合わせて1本にする

 

このほうが

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

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

 

興味がある方は、ぜひご自分でも作って見て下さい。

 

動画編集カテゴリの最新記事