記事の詳細
Adobe Animateを利用したアニメーションを作ってみる。
2020年の段階でFlashがWEBから消えたのは記憶に新しいですが、アニメーションがWEBから消え去ったわけではありません。
Adobe Animateを利用して、簡単なアニメーションを作っていきましょう。
今回のブログの見出しはコチラです!
導入:バウンドするボールを作る
AdobeAnimateをインストールした後、Adobeは「利用は初めてですか?」と聞いてきてくれます。
これに「はい」と答えると、「とりあえずボールがバウンドするアニメーションを作ってみようか」と、ムービーがスタートします。
導入ムービーでは基本的なアニメーションの仕組みを大きく分けて3つ紹介してくれます。興味がある人は閲覧してみてください。
この導入ムービーが終わると、とにもかくにも触ってみて、と言わんばかりに、画面は以下のように切り替わります。
指示通りに描画をすることで、ツアーが始まっていきます。
円を描画する
基本的な操作はIllustratorと同じで、Shiftを押しながら円のシェイプツールをドラッグすると、正円を描くことができます。
描画が終わったらツアー内の「次へ」のボタンを押します。
「タイムライン」とは
一つ一つ丁寧にやっていってくれます。タイムラインとは、キーフレームと呼ばれるフレーム(枠)で成り立つ時間経過を視覚化したグラフのようなもので、キーフレームを挿入することによって、ボールの動きを指定することができます。
指示通りキーフレームを挿入し、ボールの動きを指定します。
前のフレームを参照する
「オニオンスキン」と呼ばれる機能を有効にします。オニオンスキンを有効にすると、前のフレームを参照し、どのように動いたのか変位を求めることができます。玉ねぎの皮がたくさん重なっているようにフレームを重ね、それを参照してくれます。
アニメーションを続行する
ボールをどんどん下まで動かしていきます。
このとき、少しずつボールの位置を大きくしていくと、落下の様子が上手に表現できます。
再生する
ここまでの動きを再生しましょう。
以下のように画面が動きます。
押しつぶしと伸ばし
アニメーションを利用するとき、よりリアルなものの動きを表現するために、「押しつぶし」と「伸ばし」で力の作用をいれていくことができます。
このアニメーションの場合は、床面についたときにボールがつぶれ、その前後で様々な抵抗によりボールが伸びる、というような表現をします。
床面でついたものはつぶれているように、その前は伸びるように表現します。
バウンスバックアニメーション
これまでに作成したフレームをコピーしておきます。
フレームを反転することで、ボールが跳ね返ったあとのモーションになります。
さらに、一番最初のフレームに戻り、あらかじめコピーしていたボールが落ちるまでのフレームを挿入します。
これでプレビューを押すと、以下のようになります。
保存をする
ファイル>名前を付けて保存 で「fla」拡張子で保存することができます。
また、ファイル>書き出し>アニメーションGIFの書き出し でGIFアニメとして書き出すことができます。
HTML5Canvasで書き出す
flaの状態で保存したファイルを、ファイル>変換>HTML5 Canvas に置き換えると、自動的にHTML5 Canvas.flaというファイルが生成されます。
これをパブリッシュすることで、HTML5 Canvasとして利用できるようになります。
出力されるファイルは以下の通り。(名称は変更しています)
こんなふうに動作します。
https://incloop.com/ball/ballanimation.html
使いこなせばいろんなアニメーションが楽しめそうです。
お試しください。