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

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