【Procreate】動画を取り込む!〜コマ送りで観察しよう編〜

コマ割り紹介ページはこちら

LINEアニメーション絵文字として発売中の【♡動く‼︎BROWN & FRIENDS絵文字♡】のコマ割りはこちらのページで紹介してきました。しかし、

  • コマ割りを見たぐらいでアニメは描けない…
  • コマ割りを見ながら描いてもアニメとしてスムーズな動きにならない…
  • 動画をそのままサクッとProcreateに取込めたらいいのに…

と思いますよね。

そんな方に向けて

写真アプリに取り込んだ動画→直接Procreateに読み込む方法

をご紹介します。

今回の例で使用するLINEアニメーション絵文字

今回は(例)として♡動く‼︎BROWN & FRIENDS絵文字♡のアニメをProcreateに取り込んでみます。

このようにコマ毎に取り出せます↑

【使用するもの】

今回紹介する方法では以下の物を使用しました。

  • iPhone
  • iPad
  • LINEアプリ
  • 写真アプリ
  • Procreate(お絵描きアプリ)

【動画を取り込む】

LINEのトーク画面に読み込みたいLINE絵文字を送信します。

(私は自分1人だけのグループLINEに送信しています。気楽…!)

iPhoneの画面録画機能を起動して、LINE絵文字のアニメーションを撮影します。

写真アプリに動画を取り込むことができました。

【動画のサイズ調整etc.を行う】

Procreateにデータを取り込む前に、あらかじめデータを軽くしておきます。

写真アプリの「編集」から、

  • 画像のトリミング
  • 動画の長さ調整

を行います。

画像サイズは必要なアニメーションの部分のみに切り取りましょう。

今回取り込むのはLINEアニメなので、動画の長さは1秒〜2秒に切り取りましょう。

【動画をiPadに送る】

AirDropで 動画をiPadに送信します。

iPadに送信できました。

「完了」をタップします。

【動画をProcreateに読み込む】

iPadに取り込んだ動画を、Procreateに読み込みます。

Procreateを起動します。

動画の読み込み方法はいくつかあるのですが、もっとも簡単な「ドラッグ&ドロップ」で読み込みします。

写真アプリとProcreateの2画面表示にしていきます。

画面上部中央のSplit View機能「…」をタップします。

表示される3つのアイコンの中央にある「Split View(スプリットビュー)」アイコンをタップします。

画面に表示していた1つ目のアプリ(Procreate)が一時的に隠れるので、ホーム画面から同時に表示したい2つ目のアプリ「写真アプリ」をタップします。

Procreate」「写真アプリ」2つのアプリが分割表示されました。

写真アプリから目的の動画をドラッグ&ドロップでProcreateに読み込みます。

Procreateに動画を読み込むことができました。

Procreateの画面上部中央のSplit View機能「…」をタップし、分割表示→全画面表示に切り替えます。

全画面表示になりました。

【読み込んだ動画を確認する】

読み込んだデータを開きます。

コマ毎にレイヤー分けされています。

また、あらかじめアニメーションアシストも起動しています

画面下部の「再生」をタップすると再生して確認することも可能です。

アニメ制作の参考としては、このままでも充分役立ちます。

もうひと手間かけてより使いやすい参考資料に仕上げていく場合は、以下の工程も試してみてください。

【不要なレイヤーを削除する】

コマ毎に読み込まれたのは嬉しいのですが、上記の(例)ではレイヤー数が99もあります。

LINEアニメーション絵文字は、LINEの規定で最大コマ数「20」ですので、同じイラストが重複しています。

アニメはイラストがほんの少しずつ変化しますから、隣接する上下のレイヤーで 同じイラストなのか? 違うイラストなのか? が分かりにくいのですが、

  • 明らかに同じイラスト
  • 2ループ目のイラスト

であれば削除しましょう。

上記の例では、赤枠で囲った部分が「2ループ目」で重複していることが明らかなので削除します。

レイヤー削除方法は

  • レイヤーをタップして選択
  • 左スワイプ
  • 削除

です。

どんどん削除していき、レイヤー数43まで減らすことができました。

LINEアニメーション絵文字は最大20コマですので、まだまだ20枚以上のレイヤーが重複しています。

重複するレイヤーを削除して、レイヤー数「20」にしていきます。

【背景を取り除く】

隣接する上下のレイヤーのイラストが 同じか?異なるイラストか? を判断するためには、背景があると分かりにくいです。

そこで、背景を取り除いていくのですが、アニメーションアシストが起動されたままだと作業しづらいので、アニメーションアシストをOFFにします。

  • アクション
  • キャンバス
  • アニメーションアシスト(OFF)

アニメーションアシストをOFFにできました。

背景を削除していきます。

レイヤーの右横のチェック☑️を長押しして、1つのレイヤーのみ表示させます。

  • 選択ツール
  • 自動
  • 消したい部分をタップ

します。

イラストに網掛けされました。

網掛け以外の部分(背景のみ)が選択されています。

画面右上の消しゴムをタップして選択します。

イラスト全体に消しゴムをかけます。

背景のみが消えて、イラストは保持されています。

同じ方法でその他のレイヤーの背景もどんどん消していきます。

全てのレイヤーの背景を消しました。

これで隣接する上下のレイヤーのイラストが 同じか?異なるか? を判断しやすくなりました。

【重複レイヤーを削除する】

隣接する上下2つのレイヤーを確認していきます。

それぞれのチェック☑️をON←→OFFしても、イラストに変化がありません。

変化がない = 重複している

と判明しました。

どちらか片方のレイヤーを削除します。

同じ方法で、重複しているレイヤーをどんどん削除していきます。

レイヤー数20に整えることができました。

【再生して確認する】

再生して確認してみます。

再生する全てのレイヤーにチェック☑️を入れてONにします。

  • アクション
  • キャンバス
  • アニメーションアシスト(ON)
  • 設定

をタップします。

再生速度を調整します。

20フレーム/1秒に調整 → 再生します。

♡動く‼︎BROWN & FRIENDS絵文字♡で販売されているアニメと同じ動きが再現されました。

【完成】

写真アプリ内の動画 → Procreateにコマ毎に読み込みすることができました。

コマ割りを見ているだけ…よりもアニメの観察が容易になりました。

ここまで準備できれば、このあとは楽しみながらアニメの学習ができそうです。

今回取り出してみたアニメのコマ割り

もし気になるアニメや動画があれば、今回紹介した方法で取り出してみてください。

気に入ったアニメ、素敵な動画がどのような動きになっているか?を観察しやすくなると思います。

今回の例で使用したもの

♡動く‼︎BROWN & FRIENDS絵文字♡

コマ割りのご紹介ページはこちら

iPhone icon shop(BASE)