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

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

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

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

 

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

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

 

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

プロフィールイラスト
平たく言えば、コンセントみたいなもんです。

 

しかしエヴァンゲリオンは、ケーブルが断線しても数分は活動ができます。

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

 

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

プロフィールイラスト
おっと。

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

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

 

あわせて読みたい記事

エヴァンゲリオンの描写は正しいのか?物理教師の考察とアニメまとめ

 

広告

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

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

上は無修正版。

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

プロフィールイラスト
自己満足ですが、それなりの出来だったと思っています。

 

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

 

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

プロフィールイラスト
結婚式余興で、活動限界に出てくるようなタイマー表示をつかって、カウントダウンしたい!

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

男性シルエット

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

 

とツッコまれそうですね。

補足すると、私は結婚式の余興ムービーを手がけることが多かったです。

 

参考結婚式の余興ムービーのネタを探すあなたへ、アドバイスまとめ

参考余興ムービーの完成度を高める、小技やテクニックとは?

 

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

プロフィールイラスト
難しそうだけど、自分で活動タイマー作れたらおもしろそうですからね。

 

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

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

 

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

プロフィールイラスト
使いこなせたら、かっこいい映像とかもっと作れるんだろうなぁ

 

でも、ふと

プロフィールイラスト
アフターエフェクト(通称、AE)を使わずして、活動限界タイマー作れないかな?

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

 

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

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

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

です。

 

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

プロフィールイラスト
あしながおじさん、おばさん待っています(笑)

 

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

 

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

ただし、注意点として

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

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

プロフィールイラスト
ムービーメーカーでは、きついと思います。

 

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

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

 

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

 

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

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

プロフィールイラスト
当然ちゃ当然です。

 

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

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

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

セグメントで表された8

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

 

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

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

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

 

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

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

プロフィールイラスト
GIMPで画像を切り抜く方法や、背景を透明化する方法など書いています。

 

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

 

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

活動限界タイマー背景

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

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

 

プロフィールイラスト
最近はiPadを買ったので、イラストは良く描くようになりましたけどね。

参考 タブレット初心者の副業ブロガーが「iPad」を買ったらこうなった

 

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

gimpでグラデーション背景

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

プロフィールイラスト
こんなことが無料で出来ちゃうなんて、改めてGIMPの凄さを実感します。

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

 

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

プロフィールイラスト
すなわち、レイヤーで作業ということですね。
男性シルエット

レイヤー?髪型か何か?

 

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

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

レイヤー説明

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

活動限界タイマー背景

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

プロフィールイラスト
光ってるっぽくするためです。
厳密にいうと「縁取り」ではなく、黒パネルより少し大きいオレンジ色パネルを、黒パネル下に重ねています。

 

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

赤と黒のライン

 

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

活動限界まで

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

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

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

 

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

しかし、私は

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

こんな思いがありました。

 

特に、編集の容易さという観点から

プロフィールイラスト
PowerPointのほうが編集しやすいかも?

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

 

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

プロフィールイラスト
今では、GIMPの作業も慣れたので、当時ほど苦痛ではなくなりましたが、直感的に作業が出来るパワポの方が楽ですね。

 

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

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

 

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

プロフィールイラスト
あとから(気軽に)文字だけを変更したいし、使い回したい。

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

プロフィールイラスト
文字は、テロップのような扱いをしたかった(背景と一体化させたくなかった)ってことです。

 

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

 

フォントは購入可、無料でも十分近づける

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

「エヴァ明朝」

とも言われています。

 

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

 

しかし私みたいに

プロフィールイラスト
極力費用はかけたくない…。

と考えている人は

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

このあたりが、エヴァ作品をパロディする時にはおススメのフォントになります。

 

活動限界まで

プロフィールイラスト
ちなみに私は、HGP平成明朝体W9で書いています。

 

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

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

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

 

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

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

 

もし

男性シルエット

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

という場合は

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

しかないですね。

 

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

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

 

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

タイマー編集画面

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

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

 

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

  • 1/100

でタイムラインを分けて、それぞれ時間(タイミング)をあわせて1つ1つ丁寧に配置していきます。

 

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

プロフィールイラスト
1/100秒という表示時間の短い画像データを、何十枚~何百枚も貼り付けるわけですから、当然かもしれません。

 

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

プロフィールイラスト
広い意味では、これもレイヤーのイメージです。
「分」「秒」「1/100」を最後に合わせるイメージ。

レイヤー説明

 

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

確認です。

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

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

 

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

残る素材は、効果音です

 

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

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

プロフィールイラスト
ちなみに、私は無料で音源を探すときは「魔王魂」を利用することが多いです。

 

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

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

 

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

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

これらの素材を、動画編集ソフトで足し算していきます。

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

 

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

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

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

 

プロフィールイラスト
重たすぎて、フリーズしました。
なので先にレインボー背景とタイマー表示だけを書き出して「レインボー背景タイマー部分」にしています。

 

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

 

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

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

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

 

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

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

このようにしておいて、その後、タイマーが作動したと同時に、内部(INTERNAL)パネルに切り替えました。

 

残り10秒を切ったら、DANGERパネルが点灯するなどの小細工もしてますね。

プロフィールイラスト
ちなみに、本家エヴァンゲリオンの活動限界タイマーは30秒を切ると全面が赤くなったり、点滅したりします。

 

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

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

ようです。

プロフィールイラスト
活動限界まで、「あと○:○○:○○」って感じですね。うっかり。
あくまでも「活動限界風」だからね、いいんだよ。うん。(いいわけ)

 

まとめ

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

 

とりあえず

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

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

 

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

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

です。

 

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

 

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

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

Macか高性能パソコンが欲しくなる。

 

 

今回作成した活動限界風のカウントダウンタイマーで工夫した点は

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

ってところでしょうか。

 

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

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

プロフィールイラスト
色々と効果や演出をつけようと思うと、フリーズしたりしました(泣)

 

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

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

これらをそれぞれ別で完成させて、最後に合わせて1本にする

 

このほうが

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

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

 

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

 

あわせて読みたい記事

活動限界風カウントダウンタイマー
気に入ったらフォロー
広告