本チュートリアル内で使用する主な機能

レイヤータイムライン、モーション設定、フレームアクション、パスアクション、公開と書き出し

手順

⽝のイラストにフレームモーションを設定する

サンプルファイル「dog_animation_start.psd」をデスクトップ版のPhotoshopで開き、「ファイル」→「別名で保存」を選択します。ダイアログボックスが開くので「クラウドドキュメントに保存」をクリックします。次に、デバイスでFrescoを起動し、ホーム画⾯から保存したファイル「dog_animation_start.psdc」をタップして開きます。

ドキュメントには⽝とフリスビーのイラストが描かれています。右側のタスクバーから「レイヤー」アイコンをタップしてレイヤーパネルを開きます。次に、⽝のレイヤーを選択し、タスクバー下部の「モーション」アイコンをタップして「レイヤータイムライン」を開きます。タイムラインには⽝のイラストが4フレーム⽤意されています。

このように複数のフレームを追加することで、⾃動でアニメーションが作成されます。フレームを追加するには、「＋」をタップします。タイムラインの下にあるモーションバーから「すべてを再⽣」をタップしてみましょう。⽝が⾛る様⼦のアニメーションが再⽣されます。

モーションバーの「設定」をタップすると、モーションの速度、再⽣オプション、オニオンスキンの不透明度などを調整できます。ここでは、フレーム/秒を「8」に設定します。

フリスビーにフレームモーションを設定する

それでは、タイムラインにフレームを追加して実際にアニメーションを作成してみましょう。

レイヤーパネルでフリスビーのレイヤーを選択し、「モーション」アイコンをタップします。タイムラインのフレーム「1」を選択し、「フレームアクション」から「フレームを複製」をタップします。

複製したフレーム「2」を選択し、画⾯左側のツールバーから「変形ツール」を選びます。ダイアログボックスが表⽰されるので、「選択したフレーム」をタップします。⻘いバウンディングボックスの上に伸びたハンドルをつかんで、左に20度ほど傾けます。画⾯右上の「完了」をタップします。

次に、フレーム「1」を選択し、「フレームアクション」から「フレームを複製」をタップします。複製されたフレーム「2」をドラッグして、フレーム「3」の右側に移動します。さらに、順番を⼊れ替えたフレーム「3」をタップし、同様にフレームを複製します。複製されたフレーム「4」を選択し、「変形ツール」で今度は右に20度ほど傾けます。画⾯右上の「完了」をタップします。

これで4つのフレームができました。「すべて再⽣」をタップすると、フリスビーが左右に揺れるアニメーションが再⽣されます。

フリスビーにモーションパスを設定する

次に、フリスビーが円を描いて⾶ぶ動きを設定します。フリスビーのレイヤーを選択し、モーションバーの「パス」をタップします。キャンバス上で、フリスビーが移動するパスを描画します。パスの軌道に沿ってフリスビーが移動します。

右側のタスクバーからレイヤープロパティパネルを開き、フレーム数を「16」に設定します。

アニメーションを書き出す

完成したアニメーションを書き出します。Frescoでは、GIF、MP|、PNGシーケンスの形式を選択できます。

画⾯右上の「共有」アイコンのドロップダウンメニューから「公開と書き出し」をタップし、画⾯左に表⽰されるメニューから「モーション」を選択します。ここでは形式を「GIF」に設定し、「フレームを⽣成」をタップします。

「モーションの書き出し」画⾯で再⽣ボタンをタップしてプレビューしてみましょう。アニメーションを確認したら「書き出し」をタップします。保存場所または共有⽅法を選択して書き出します。