Adobe Flash Professional を Adobe Animate CC に名称変更 してはや数か月、苦手とはいえ触らないのは…なので、Animate CC の操作練習をかねて、手軽にWEBサイトに盛り込めそうなスプライトアニメーションを作成してみることにしました。
【前編】では主に Animate CC 上でのアニメーション作成方法、
【後編】では実際に CSS3 animation で動かす方法を書いております。
CONTENTS
素材の準備編
今回は事前に Illustrator で素材を作っておきました。
これを、[ライブラリ]パネル にドラッグして、Adobe CC のライブラリ上に保存しておきます。
他のものと混同しないようにライブラリに「animate test」という名前を付けています。
※背景はつかいません。。
Animate CCでアニメーションをつくる編
ステージの作成と素材の読み込み
①Animate CC を起動し、[ファイル]⇒[新規作成] から任意のサイズでドキュメントを新規作成します。種類は「HTML5 Canvas」で、他の設定はすべてデフォルトです。
②ドキュメントが開いたら、[CC Libraries]パネル から「ぼうや」を選択し、ステージにドラッグします。
ダイアログが表示されますので、今回は レイヤーの変換を「編集可能なパスと効果を保持」 にしておきます。
なぜか口のぶぶんが黒塗りになってしまった「ぼうや」がステージに配置されました。
ムービークリップシンボルの作成
キャラクターにアニメーションをつけるためにテストぼうやをシンボル化します。
①「テストぼうや」全体を選択して、右クリック ⇒ [シンボルに変換] をクリック すると下記ダイアログが表示されます。
[名前] に「シンボルの名前」を入力
[種類] に「ムービークリップ」が選択されていることを確認して [OK] します。
「テストぼうや」が青い枠で囲われ、テストぼうやがテストぼうやのシンボルになったことを示しています。
ついでに、レイヤー名も「テストぼうや」に変更します。
②「テストぼうや」レイヤーをダブルクリックすると、各パーツがそれぞれ青い線で囲われ、画面左上に「テストぼうやのシンボル」と表示されます。
③①の手順と同様に、手足などのそれぞれのパーツもシンボル化します。パーツが多いのでキャプチャは「左腕（さわん）」の場合だけです。
各パーツのシンボル化が完了すると、それぞれのパーツの順序が下図のようにごっちゃになってしまうのですが、次の手順で直しますのでそのままで大丈夫です。
回避方法を知りたい。。
③各パーツのシンボル化が出来たら、「テストぼうや」全体を選択し、右クリックで [レイヤーに配分] を選択すると、下図のように1枚だったレイヤーがシンボル化したパーツ分レイヤーに配分されます。
先ほどの、②の手順でパーツの順序がごっちゃになってしまったので、レイヤーの順序を並び替えて下図の状態にしておきます。
モーショントゥイーンでアニメーションをつける
手足の位置を調整して歩いているようなアニメーションをモーショントゥイーンのみで作成します。
①「テストぼうや」を動かすために、フレームを延長します。
16フレーム目を洗濯してオレンジ色にしたら、[右クリック]⇒[フレームを挿入] すると、フレームが延長され灰色になります。
②その状態で、[右クリック]⇒[モーショントゥイーンを作成] をクリックすると、下図のようにフレームの色が青色に変わり、レイヤー名の左にモーショントゥイーンのアイコンが表示されます。
③まずは開始時点のポーズを決めます。
例えば「左腕（さわん）」の位置を決める場合、まずタイムライン上で [1フレーム目] を選択し、[自由選択ツール] でステージ上の [左腕] をクリック 、
下図のようにバウンディングボックスが表示されたら、回転や移動、拡大縮小などで位置を調整します。
変形点（白い丸）が関節にくるようにしておくのがコツです。
「左腕（さわん）」以外のパーツも同様に調整し、開始時のポーズが下図のようになるようにします。
④歩いている様子を表現するには最初と最後のフレーム内容が一致したほうが自然な動作になるので、次は中間の動きではなく、終了時点のパーツの位置を決めます。
全レイヤー16フレーム目を選択した状態で [右クリック]⇒[キーフレームの挿入]⇒[すべて] を選択すると、最後のフレームに最初のフレームと同じポーズのキーフレームが挿入されます。
⑤最後に、中間のキーフレームを下図のようにします。
プレビューしてチェック
ここまでできたらタイムライン下部にある 「再生ボタン」 をクリックして動きを確認してみてください。
こんな感じで動くようになります。
ちなみに、上記はmp4形式に書きだしたものなので、スプライトアニメーションではありません。
次回、【後編】にて実際に テストぼうや がスプライトアニメーションに仕上がる過程をかきタイと思います。