doors doors

最近ボーリングに行ってないからAEでボーリングをやってみよう

  • HOME
  • TRY
  • AfterEffectsでボーリングやってみよう

AfterEffectsでボーリングやってみよう

最近無性にボーリングがやりたくなる自分です。

昔のようにパワーがないので、行く人に声かけて、
グループ分けして、賞品考えて…

なんてことを考えると急に億劫になってしまうなんて
歳取ったわぁ。。

大人数がとがめられる時代ということもありますが、
いや、しかしやりたい!

ハイタッチできないならガッツポーズをソーシャルディスタンスで
やればいいじゃないか。
声を出せなければ拍手とか足をドタドタさせればいいじゃないか。

などと、いつか現実に行くことを妄想しつつ、
こうなったらボーリング、机上でやろうじゃないか!
ということでAfterEffectsでやってみようと考えました。
(発想が安易!)

イラストレーターでピンとボールを描く

早速イラストレーターでピンを描いてみます。

まずは半分だけカキカキ。
リフレクトツールでコピーして合体させます。
色を付けます。
影つけます。
赤い線入れます。※1
ロゴ入れます。
ロゴにアピアランスで若干歪曲を付けます。※2
コピー×10します。ピンの下に置き場所書きます。
ピン1個ずつレイヤー分けします。(AEでも複製できます。)

イラストレーターの作業は一旦ここまで。(やっとかよ・・・)
※1 ピンの赤い線の理由がとても気になったので調べたところこんな記事を見つけました。
スッキリー! ※2 アピアランスについては、かあさんデザイナーKTがついこないだ書いてくれていました。
次はAfterEffectsの作業にうつります。

AfterEffectsでピンを動かしてみよう

AEにイラストレーターファイルを読み込みます。
レイヤーの素材を位置を変えずに読み込むのは”コンポジション-レイヤーサイズを維持”で読み込み、そのコンポジションを開いて編集するのがおすすめです。

どのピンでも良いので、アンカーポイントをピンの下部にずらし、回転90度のアニメーションを設定します。

回転アニメーションが設定できたら、キーフレームを少しずつずらして各レイヤーにコピー。


試しに、プレビューしてみましょう。


パタリ・・・

みなさまの予想通り、ピンのみなさん、礼儀正しく同じ方向に綺麗に倒れてくれました。
いくらなんでもこの倒し方できる人はプロボーラーの方々でもいないかと。(いたら知りたい)


四方八方に倒れるように回転数値を変更しました。


重力がこの世の中に無いような、不自然すぎる倒れ方をしているので、倒れ方のイージーイーズ※3を調整します。
グラフエディターを使うと便利です。


律儀に前のピンが倒れてから、次のピンが倒れて行くので、レイヤーごとのキーフレームをランダムにずらします。


やっとピンが倒れました!

しかし、ボールがないのに倒れてる!!!

長くなりましたので、ボールは次回に回します!
机上ボーリングまでの道は遠い・・・

※3 イージーイーズとは 加速、減速です。乗りものに乗るとだんだん加速、止まるときは段々減速しますが、その動きをコントロールすることができる機能です。
こちらのブログ、めちゃくちゃわかりやすく書いてありますので、ご参考までに。vookさんは、とても参考になる文献ばかりです。




次回のボールはこんな感じで入れていきます。まだまだ動きが不自然すぎる笑
もっとボカーンと飛ばさねば!ということで
このあとまた色々いじってまいります!




デザインスタジオドアーズでは、動画制作も行なっております。
イラストを動かす、モーショングラフィックスも承りますので、お気軽にご連絡ください。

お問い合わせは以下までどうぞ!

それではまたー.+゜(・∀・)゜+.゜

関連記事

【デザイン脳への道】#01|カラーリングとキーワード

こんにちは。犬の事ばかりじゃないか!とお叱りを受けそうなので、この辺りでデザイナー的なハナシでも。。昭和から平成を股にかけデザインをオシゴトにしてきた中でこんな...

chart.js

chart.jsでアニメーションするグラフを作ってみた

グラフ画像をただ置いておいても、円グラフはただの丸、棒グラフもただの棒の並びのように見えてしまい、なかなか注目されないものです。 そこでグラフを動かすchart...

AfterEffectsでボーリングをやってみよう その2

こんにちは! 年も明けて1週間みっちり働いてからの3連休。 ゆっくりお休みできたでしょうか。 年末年始は、掃除ばかりしておりました! フローリングにワックスをか...

WEB:企業サイト、PRサイト、ランディングページ、バナー制作やCMS構築、モーショングラフィックス、VP、動画制作、パンフレット、ポスター、チラシ、DMなど制作から印刷・納品まで。 お気軽にお問い合わせください。東京・名古屋近郊の打合せもご相談ください。

花粉症との戦い

花粉症の季節がやってきてしまいました。 今年は去年より多いそうで、筆者は戦慄して...

進化したGoogle レンズ

写真や画像に関連する情報を取得したいなら、「Googleレンズ」が便利です。 こ...

もうすぐ節分!ことしは2月2日

早いもので1月があっという間に過ぎ、2月を迎えようとしています。 2月といえば節...

右横文字のアイキャッチ画像

はたらくクルマの“右横書き”に見る、風習や習慣の変化について。

トラックや業務用車両の右側面によく見かける、右から左に向かって書かれている「右横...