見出し画像

【Adobe】東京電力風のアニメーション作りかた【after effects使用】



こちらの動画の28秒あたりから流れるアニメーションをafter effectsで作成してみました。


2秒にも満たないアニメーションですが、after effects初心者が作成するには良い内容だと思います。


実際私が、作成したものがコチラです↓


Q.なぜ、これを選んだのか?

1.単純に昔から東京電力のロゴアニメーションが好きだから(笑)

球体が落ちてきて2つの穴が開くというのが子供心に不思議でずっと記憶に残っていた(上記のCMが流れていた頃は小学生だった)


2.比較的簡単に作れるから

わずか2秒足らずのアニメーションで動きも複雑ではない為、after effectsで初心者でも簡単に作ることができる。
以前作成したマコなり社長のOPアニメーションよりは難しいものの、ステップアップとしてはちょうど良いと思ったから。

個人的な意見としては

・マコなり社長のOPアニメーション:Lv1
・東京電力のOPアニメーション:Lv2

といった感じだ。


それでは、アニメーションの作成手順を解説していきます。


Illustratorで作成


予め球体をIllustratorで作成しました。
別に作成しなくともafter effects(以下AEと略)内の楕円形ツールで作成できます。


東京電力小

東京電力大


AEを開く


AEを開いたら新規コンポジションを作成します。
コンポジション名は東京電力とでもしておきます。

幅:1920px、高さ:1280px、フレームレート:29.97、
デュレーション:2秒(0;00;02)でOK
(オリジナルのアニメーションは2秒に満たない。1:24で終了)
背景色:白
(オリジナルの背景は白なので)


0:00


スクリーンショット 2020-10-02 17.43.55

テキストで文字を書く
(オリジナルはTEPCO。私の場合はSHIGERU(名前)とした)

書体:Lucida Grande(Regular)
サイズ:51px
色:adff2f(オリジナルを意識するなら黒)

🟢も用意(以降「でか🟢」と呼ぶ)
大きさは直径=文字列の長さくらいにする。
色はお好みで。オリジナルを意識するなら赤系。

位置:299,98
スケール:55,55
カラー:1e6000

位置とスケールにキーフレームを打っておく


0:06


スクリーンショット 2020-10-02 17.52.18


位置とスケールのキーフレームを打つ
(0〜6フレーム目までは普通に落下する)

位置:299,98
スケール:55,55


0:07


スクリーンショット 2020-10-02 17.52.36


でか🟢が卵形に変化。
スケールは横軸をやや小さめに縦軸を大きめに変更する。

位置:299,340
スケール:51,66


0:08


スクリーンショット 2020-10-02 17.52.52


形(スケール)は変えない

位置:299,363.5


0:09


スクリーンショット 2020-10-02 17.53.06


形がでかくなる。横幅が増大し、縦幅も少し増える。
この時点で、でか🟢は文字列のすぐ上にくるため、下降しなくなる。

位置:299,387
スケール:67,70


0:10


スクリーンショット 2020-10-02 17.53.27


地面についた影響で、でか🟢がバウンドししぼむ。
イメージ的にはレモンやカレーパンみたいな形

位置:299,474
スケール:67,19


0:11


スクリーンショット 2020-10-02 17.54.00


バウンドしたでか🟢が跳ねて少し大きくなる。
形は横向きの卵型。

位置:299,428
スケール:67,46


0:12


スクリーンショット 2020-10-02 17.54.17


形が0:07−0:08と同じ卵形に戻る。0:13のアニメーションは無し。

位置:299,394
スケール:51,66


0:14


スクリーンショット 2020-10-02 17.54.34


でか🟢がついに上昇する。そして上部からちび🟢が少しはみ出る。

でか🟢
位置:299,369
スケール:55,60

ちび🟢
位置:298,257
スケール:55,55


0:15


スクリーンショット 2020-10-02 17.54.45


でか🟢は上昇を続ける。上部からはちび🟢が更に出てくる。

でか🟢
位置:299,359
スケール:55,60

ちび🟢
位置:298,234
スケール:※当面変化無し(記載がない場合はスケールを打たなくて良い)


0:16


スクリーンショット 2020-10-02 17.54.56


でか🟢は上昇を続ける。ちび🟢はでか🟢からほとんど飛び出している状態。

でか🟢
位置:299,349
スケール:55,58

ちび🟢
位置:298,221


0:17


スクリーンショット 2020-10-02 17.55.09


ついにちび🟢がでか🟢から完全に離れる(0:18はアニメーション無し)

でか🟢
位置:299,339
スケール:55,57

ちび🟢
位置:298,182


0:19


スクリーンショット 2020-10-02 17.55.34


でか🟢、ちび🟢共に上昇する。
しかし、ちび🟢の上昇スピードが早く、でか🟢との距離が空き始める。

でか🟢
位置:299,329
スケール:55,55(※これ以降スケールの変化は当面なし)

ちび🟢
位置:298,160


0:20-0:22


スクリーンショット 2020-10-02 17.55.45

スクリーンショット 2020-10-02 17.55.59

スクリーンショット 2020-10-02 17.56.57


でか🟢、ちび🟢共に上昇しているが、距離がどんどん離れていく
(0:23に変化無し)

0:20
でか🟢
位置:299,319

ちび🟢
位置:298,140


0:21
でか🟢
位置:299,309

ちび🟢
位置:298,115


0:22
でか🟢
位置:299,299

ちび🟢
位置:298,91


0:24


スクリーンショット 2020-10-02 17.57.23


でか🟢のみ下降し始める

でか🟢
位置:299,309


0:25


スクリーンショット 2020-10-02 17.57.40


ちび🟢も下降し始める

でか🟢
位置:299,330

ちび🟢
位置:298,115


0:26〜1:00


スクリーンショット 2020-10-02 17.58.00

スクリーンショット 2020-10-02 17.58.17

スクリーンショット 2020-10-02 17.58.36

スクリーンショット 2020-10-02 17.58.52


でか🟢、ちび🟢共に下降しているが、ちび🟢の落下速度が早く、徐々にでか🟢との距離が縮まっていく
(0:28に変化無し)


0:26
でか🟢
位置:299,340

ちび🟢
位置:298,115


0:27
でか🟢
位置:299,350

ちび🟢
位置:298,135


0:29
でか🟢
位置:299,36060

ちび🟢
位置:298,160


0:22
でか🟢
位置:299,370

ちび🟢
位置:298,190


1:01


スクリーンショット 2020-10-02 17.59.19


でか🟢とちび🟢の距離が縮まるなか、でか🟢の中に2つの白⚪️が縦並びで現れる。大きさは同じ。
※以降、白⚪️を白⚪️上、白⚪️下と呼ぶ。

でか🟢
位置:299,380

ちび🟢
位置:298,220

白⚪️上
位置:298,328
スケール:30,30

白⚪️下
位置:298,415
スケール:30,30


1:02


スクリーンショット 2020-10-02 17.59.31


でか🟢とちび🟢が完全に落下し、この2つは1:02より先の移動アニメーションはない。
しかし、でか🟢の中の白⚪️2つはサイズが大きくなっている
(大体2倍くらいの大きさ)

またちび🟢の左右から同じ大きさのちび🟢が少し出てくる
※ここからは、

元から存在したちび🟢を ちび🟢中
左のちび🟢を      ちび🟢左
右のちび🟢を      ちび🟢右


と呼ぶ

なお1:03にアニメーションは無し。

でか🟢
位置:299,390

ちび🟢左
位置:223,240
スケール:55,55

ちび🟢中
位置:298,240

ちび🟢右
位置:370,240
スケール:55,55

白⚪️上
位置:298,338
スケール:60,60

白⚪️下
位置:298,540
スケール:60,60


1:04


スクリーンショット 2020-10-02 17.59.53


でか🟢の中にある白⚪️は2つとも更に大きくなる。
ちび🟢中の左右から、ちび🟢左とちび🟢右が更に飛び出てくる。

ちび🟢左
位置:210,240

ちび🟢右
位置:386,240

白⚪️上
位置:298,345
スケール:125,125

白⚪️下
位置:298,442
スケール:125,125


1:05


スクリーンショット 2020-10-02 18.00.05


白⚪️が2つとも、でか🟢の円ギリギリまで大きくなる。
これより先、白⚪️に移動は無し、サイズも1:23まで変化無し
ちび🟢左とちび🟢右が、ちび🟢中から9割9分出ている状態になる。

ちび🟢左
位置:205,240

ちび🟢右
位置:393,240

白⚪️上
位置:298,345
スケール:145,145

白⚪️下
位置:298,442
スケール:145,145


1:06


スクリーンショット 2020-10-02 18.00.16


左右のちび🟢が、ちび🟢中から完全に離れる。
これ以降は移動せず、大きさは1:23まで変化なし。
1:07にはアニメーション自体がない。

ちび🟢左
位置:198,240

ちび🟢右
位置:398,240


1:08


スクリーンショット 2020-10-02 18.00.31


でか🟢の右側に"緑川電力"と文字列が表示される。
位置は、でか🟢の直径長さ1つ分離れた位置で、文字列の底が真ん中と同じくらいになる。

緑川電力(オリジナルは赤文字で東京電力)

書体:ヒラギノ角ゴstd
サイズ:478px
文字列の幅(V/A):57
カラー:adff2f
位置:356,337
スケール:93,100

以後、1:23までアニメーションなし


1:24


スクリーンショット 2020-10-02 18.01.01


背景以外に表示されている全てのものがスケール0%となり消える。
残ったのは、この白い背景のみ。


オマケ


これにてアニメーションは全て終了です。
あとは、各レイヤーにモーションブラーをかけたり、キーフレームにイージーイーズを欠けるなどして、動きを滑らかにすればなお良いです。

動作を確認し問題がなければ、
ファイル→書き出し→レンダキューに追加→各種設定をし、レンダリングで書き出しましょう。


お疲れ様でした!

この記事が気に入ったらサポートをしてみませんか?