先日、他学科の友達がお菓子の箱にスマホをかざすとグラフィックが動くというアニメーションを作っていたので気になり私も製作してみました。
どうやって作るの？
スマホをかざすだけでキャラクターや絵が画面上で動くなんて不思議ですよね？その友達に映像の製作手順を聞いてみました
必要なツールは主に、動画制作用のソフトとArtiviveというサイトです。
動かすアニメーションを製作し、その後Artiviveにて設定を行います。
Artiviveとは？
Artiviveとは、動かすパッケージの写真と動画を組み込むことでスマホをかざすと映像が流れる仕組みを作れるサイト、アプリです。今回は、PC版のサイトとスマホ版のアプリケーションを使用しました。
Artivive webサイト https://artivive.com/
Artivive アプリケーション https://apps.apple.com/jp/app/artivive/id1188737494
パッケージの写真を撮る
Artiviveの設定にはパッケージの写真とアニメーションの二つが必要です。スマホ側で箱を読み取ったときに、設定している画像と一致しているかを確認して読み取るためです。
今回私が選んだ箱は、addidasとカニエウエストのコラボスニーカーである『yeezy boost 350』の箱です。お気に入りのスニーカーのひとつです。
まずは設定用の画像を撮ります。
読み取りやすくするために正面から撮影します。
アニメーション素材生成
次にグラフィックを動かすために動画を製作します。
基本的には箱の画像のロゴを切り抜き、アニメーション製作ソフトなどでそれらを動かすという手法になります。
私は、illustratar、photoshop、aftereffectsを使用しました。
まずは、addidasや350の部分のロゴをphotoshopにて切り抜き、透過背景（PNG形式）にて保存します。
次に先ほどのデータをイラストレーターで開き、塗りの部分に箱のロゴ部分のような素材を当てはめます。
文字が小さく、画像が粗くなってしまって部分はイラストレーター内で文字を作り素材を当てはめています。
そして、それぞれのデータごとに保存を行い完了です。
アニメーション製作
そして、それらのデータをアフターエフェクトにて編集してアニメーションとしてまとめていきます。
箱にスマホをかざしたところから動き始めるので、元のロゴ部分からスタートとなります。
これを製作した当時はアフターエフェクトをあまり触ったことがなかったので、苦戦しましたが何とか完成しました。
完成したアニメーションがこちらになります！なかなか良くできたのではないかと思いますm(__)m
そして、完成した動画をMP4形式で保存し、準備完了です。
Artiviveにて画像・動画を設定
完成した動画をArtiviveにて設定します。
まずはこちらのサイトを開き、アカウントの登録を行います。
アカウントを登録し、ログインを終えましたらこちらの画面にて組み合わせを行います。
左側が箱の正面画像、右側がアニメーションの設定部分となります。
スマホをかざしてみよう！
それでは早速、スマホでアニメーションを見てみましょう！
かざすためには、スマホ版のArtiviveアプリケーションが必要となります。
こちらからダウンロードしてください。
アプリケーションを起動し、画面をこのようにかざします。
すると、このように画面上でロゴが動きます！スマホの角度を変えてもしっかりとアニメーションが追従しています！
これは、初めてやってみるとかなり驚きです！
ちなみに、スマホの画面上での録画も可能です
私は、このように製作したアニメーションをツイートしてみましたm(__)m
おわりに
いかかでしたでしょうか？
私は、普段は物を製作しているためアニメーション作りはほぼ初めての体験でしたがかなり楽しみながら製作することができました。
皆さんも、製作してみた際には画面収録を行い共有してみてはいかがでしょうか？
また、私にも見せていただけると嬉しいです（笑）
by 八木克磨
やぎみっくSYSTEM というチャンネルにてピタゴラ装置を製作しております。
youtube https://www.youtube.com/channel/UCtNpe-JwqhRSG_JG0fagAEA
Twitter https://twitter.com/katuma927
コメント