記事の詳細

2020年の段階でFlashがWEBから消えたのは記憶に新しいですが、アニメーションがWEBから消え去ったわけではありません。
Adobe Animateを利用して、簡単なアニメーションを作っていきましょう。

導入:バウンドするボールを作る

AdobeAnimateをインストールした後、Adobeは「利用は初めてですか?」と聞いてきてくれます。
これに「はい」と答えると、「とりあえずボールがバウンドするアニメーションを作ってみようか」と、ムービーがスタートします。

導入ムービーでは基本的なアニメーションの仕組みを大きく分けて3つ紹介してくれます。興味がある人は閲覧してみてください。
この導入ムービーが終わると、とにもかくにも触ってみて、と言わんばかりに、画面は以下のように切り替わります。

Adobe Animate

指示通りに描画をすることで、ツアーが始まっていきます。

円を描画する

基本的な操作はIllustratorと同じで、Shiftを押しながら円のシェイプツールをドラッグすると、正円を描くことができます。

Adobe Animate

描画が終わったらツアー内の「次へ」のボタンを押します。

「タイムライン」とは

一つ一つ丁寧にやっていってくれます。タイムラインとは、キーフレームと呼ばれるフレーム(枠)で成り立つ時間経過を視覚化したグラフのようなもので、キーフレームを挿入することによって、ボールの動きを指定することができます。

Adobe Animate

指示通りキーフレームを挿入し、ボールの動きを指定します。

Adobe Animate

前のフレームを参照する

「オニオンスキン」と呼ばれる機能を有効にします。オニオンスキンを有効にすると、前のフレームを参照し、どのように動いたのか変位を求めることができます。玉ねぎの皮がたくさん重なっているようにフレームを重ね、それを参照してくれます。

Adobe Animate

アニメーションを続行する

ボールをどんどん下まで動かしていきます。

Adobe Animate

このとき、少しずつボールの位置を大きくしていくと、落下の様子が上手に表現できます。

再生する

ここまでの動きを再生しましょう。
Adobe Animate

以下のように画面が動きます。

Adobe Animate

押しつぶしと伸ばし

アニメーションを利用するとき、よりリアルなものの動きを表現するために、「押しつぶし」と「伸ばし」で力の作用をいれていくことができます。

Adobe Animate

このアニメーションの場合は、床面についたときにボールがつぶれ、その前後で様々な抵抗によりボールが伸びる、というような表現をします。
床面でついたものはつぶれているように、その前は伸びるように表現します。

バウンスバックアニメーション

これまでに作成したフレームをコピーしておきます。
フレームを反転することで、ボールが跳ね返ったあとのモーションになります。

Adobe Animate

Adobe Animate Adobe Animate Adobe Animate

 

さらに、一番最初のフレームに戻り、あらかじめコピーしていたボールが落ちるまでのフレームを挿入します。

Adobe Animate

これでプレビューを押すと、以下のようになります。

Adobe Animate

保存をする

ファイル>名前を付けて保存 で「fla」拡張子で保存することができます。
また、ファイル>書き出し>アニメーションGIFの書き出し でGIFアニメとして書き出すことができます。

Adobe Animate

HTML5Canvasで書き出す

flaの状態で保存したファイルを、ファイル>変換>HTML5 Canvas に置き換えると、自動的にHTML5 Canvas.flaというファイルが生成されます。

これをパブリッシュすることで、HTML5 Canvasとして利用できるようになります。

Adobe Animate

Adobe Animate

出力されるファイルは以下の通り。(名称は変更しています)

Adobe Animate

こんなふうに動作します。

https://incloop.com/ball/ballanimation.html

使いこなせばいろんなアニメーションが楽しめそうです。
お試しください。

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
インクループ株式会社

インクループ株式会社

「お客様が嬉しくて思わず自慢したくなるような仕事の成果を提供する!」を全員の目標として頑張っています。そしてもう一つの目標が社員が世界一働きやすい会社になることです。従業員の幸せ、お客様の幸せ、そして社会に貢献することができる会社を目指して、社員全員の力を合わせて頑張っています。

ほかの投稿も読んでみませんか?

コメントは利用できません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る