iPadでアニメーションを作りたいけれど、操作が簡単で使いやすいアプリはないかな？ iPadやiPhoneでアニメーション制作をお考えの方には、アプリ「Folioscope」がオススメです。
今回は、アニメーション制作アプリ「Folioscope」の機能や使い方をご紹介します。
この記事の目次
iPad・iPhoneでアニメーションを作成！Folioscopeを紹介
Folioscopeの概要
FolioscopeはiPadやiPhoneで使える無料のアニメーション制作アプリです。 アニメーションの編集画面はシンプルで使いやすく、Apple Pencilを使った描画や3D Touchにも対応しています。
アプリを使用中に一定のタイミングで広告が表示されますが、アプリ内課金をすると広告を削除できます。
Folioscopeのコミュニティサイトも運営されており、他のユーザーの方が作成したアニメーションを閲覧したり、いいね・コメントをつけたりすることができます。
①Folioscopeで一枚絵を描く
※解説例では、iPadを横向きにしてFolioscopeを使用しています。
Folioscopeの編集画面では3つのツールバーが設置されています。
描画用のツールバー、アニメーション編集用のツールバー、アンドゥ・リドゥや設定変更をするときに使うツールバーと、それぞれのツールバーで役割が決まっています。
ペンやバケツで絵を描いていく
描画用のツールバーには、ブラシ形状の変更・ブラシサイズ変更・ツール切り替え・カラー切り替え・レイヤー操作のボタンが配置されています。
ペンツールやバケツツールなどを使ってキャンバスに絵を描いていきましょう。
Folioscopeでは、下記のツールを使用できます。
- ペン
- ピクセルペン
- 消しゴム
- バケツ
- カラースワップ（キャンバスに塗った色を別の色で置き換える機能）
- 選択
- パターンバケット（タイリングの機能）
- 図形
コピーや移動・変形も活用すると制作がスムーズ
選択ツールの使用中には画面上部にコピー&ペーストボタンが表示されます。
同じ物を複数個描く場合などは、コピー&ペーストを活用すると便利です。
他にも、選択した領域の移動・回転・拡大・反転も行えます。
図形を簡単に描く
図形ツールを使用中には、画面左上に形状の変更ボタンが表示されます。
円・楕円・正方形・長方形・直線から図形の形状を選択して、キャンバスに描いていきましょう。解説例では、建物の輪郭線を直線や長方形の図形で描いています。
図形の中を塗りつぶすか、塗りつぶさないかは、画面右上のボタンで切り替えられます。
レイヤー構成を考えて作ろう
Folioscopeでは、全面レイヤーと背面レイヤーの二つのレイヤーが用意されています。
今回の解説例では、アニメーションさせたい物を全面レイヤーに描いて、静止したままの物を背面レイヤーに描いています。
作成したいアニメーションに合わせて、制作をスムーズに進められるレイヤー構成を考えてみてください。
②Folioscopeで描いた絵をアニメーションさせる
2フレーム目を作成する
絵を描き終えたら、キャンバス内の雲や猫をアニメーションさせる作業に移ります。
最初に描いた1枚の絵を元にして、2フレーム目、3フレーム目……とフレームを作成していきましょう。
画面下部にある「現在のフレームを複製」ボタンを押すと、現在表示しているフレームを複製して2フレーム目を作ることができます。
2フレーム目を白紙のキャンバスから描くようなアニメーションの場合は、「空のフレームを追加」ボタンでフレームを追加していってください。
フレームとは何か？
アニメーション制作では、複数枚の静止画を連続的に表示させることで、キャラクターなどが動いているように見せています。
アニメーションを構成する1枚の静止画のことを、「コマ」や「フレーム」と呼んでいます。
雲を移動させる
選択ツールを使用して、2フレーム目の魚型の雲を1フレーム目の位置よりも少しだけ左方向へ移動させます。同様に3フレーム目の魚型の雲も、2フレーム目の位置よりも少しだけ左方向へ移動させます。
この作業を4フレーム目、5フレーム目……と繰り返すことで、魚型の雲が少しずつ動いているように見えます。
前後のフレームの描画内容は、オニオンスキンの機能によって半透明で表示されます。アニメーションを作る際は、前後のフレームの内容を確認しながら作ってみてください。
猫の尻尾を動かす
猫の尻尾をアニメーションさせる際は形を変える必要があるので、ペンツール・消しゴムツールを使用して尻尾の部分だけを描き直します。2フレーム分の尻尾を描き直して、以降の尻尾を動かしたいフレームにも、コピー&ペーストで描き直した尻尾を複製していきます。
複数枚のフレームが存在する場合は、画面下部のボタンとスライダーからフレームを選択できます。
また、アニメーションの再生ボタンを押すことで、作成したフレームが連続して再生されます。再生ボタンで確認をしながら、アニメーションを作ってみてください。
作成したアニメーションをファイルに出力する
アニメーションが完成したら、プロジェクトの選択画面に戻ってファイル出力のボタンをします。
今回は、GIF形式でアニメーションを出力しました。
作成したアニメーションは、Folioscopeのコミュニティサイトで公開することもできます。
他のユーザーの方が作成したアニメーションやチュートリアル動画を見たり、コンテストに参加したりすることもできるので、コミュニティサイトも活用してみてください。
まとめ
iPad・iPhoneでアニメーションが作成できる「Folioscope」の紹介でした。Folioscopeは操作が簡単で、アニメーションを素早く作ることができます。 アニメーション制作に挑戦してみたい方は、ぜひFolioscopeをダウンロードしてみてください。
