Edge Animateを試そう：モーションパスで、思い通りにアニメーション

HTMLアニメーションでも、Flashと同じように自由で且つ滑らかにオブジェクトを動かしたいと思いませんか？

Edge Animate の「モーションパス機能」を使えば、制作者が思い描くアニメーションを、そのまま思い通りの形にすることが可能になります。

もともと、Edge Animate の最初のバージョンには、この機能は実装されていませんでしたが、何回かのアップデートを繰り返し、実装＆強化されてきました。今回は、便利になった「モーションパスの編集機能」についてご紹介します。

HTMLアニメーションに豊かな動きを実現

この記事では、［モーションパス機能］を使い、HTMLアニメーションに自由な動きを与える手順を解説します。

記事内で使用するサンプルのベースとなったコンテンツが公開されています。下のリンクをクリックするとご覧になれます。

［モーションパス機能］を使ったコンテンツを見る
（※表示すると効果音が再生されるのでご注意ください。iOSなど、一部モバイル環境では再生されないことがあります）

上のコンテンツの制作には、Edge Animateのレスポンシブな拡大/縮小や、オーディオ関連の機能も使われています。この2種類の機能については、別の記事で詳しく紹介しています。

参考：Edge Animateの基本的な使い方は「Edge Animate入門」をご覧ください。

それでは、ダウンロードしたサンプルファイルの（01_編集前）内にあるindex.anファイルをダブルクリックしてEdge Animate内で開いてください。

このプロジェクトは、レスポンシブな拡大/縮小の設定を一通り終えたものに、更に、ボールを蹴るモーションを追加したものとなります。Ctrl + Enterキーを押すと、ブラウザでプレビューが表示できます。

バージョン3.0からは、ステージ上のボールのモーションパス部分に、マウスカーソルを合わせると、編集ガイドが表示されるようになりました。

カーソルの位置に応じてモーションパスに編集ガイドが表示される

この編集ガイドの表示に従って、キーを押した状態でマウスを操作することで、モーションパスの「ドラッグ」「回転」「伸縮」を行うことができます。

左：メニュー表示時、右：パスを回転後

「パスを回転」では、Altキー（MacではOptキー）を押した状態でパスをドラッグすることで、パスの形状を維持したまま、パスを回転させることが可能です。

この際、パスが設定されているオブジェクトの基点が、回転の中心点となります。（上記の場合、「ボールの中心点」が「回転の中心点」となっています）

オブジェクトがタイムラインの途中、すなわち、パス上の途中に位置している場合には、その位置が回転の中心点となりますので、タイムラインの編集点を動かして、オブジェクトをパスの起点または終点に移動させておくと、調整がしやすくなるかと思います。

左：メニュー表示時、右：パスを伸縮後

「パスを伸縮」では、CtrlとAltキー（MacではCmdとOptキー）を同時に押した状態でパスをドラッグすることで、パスの形状を維持したまま、パスを拡大・縮小させることが可能です。

回転の場合と同様、パスが設定されているオブジェクトの基点が、拡大・縮小時の基点となります。（上記の場合、「ボールの中心点」が「拡大・縮小時の基点」となっています）

左：メニュー表示時、右：パスドラッグ後

「パスをドラッグ」では、Ctrlキー（MacではCmdキー）を押した状態でパスをドラッグすることで、パスの形状を維持したまま、自由に移動させることが可能です。

例：アンカーポイントの編集メニュー

パスのライン上だけでなく、パス上のアンカーポイントやハンドルポイントなどにも、マウスカーソルを合わせることで、それぞれ編集メニューが表示され、「アンカーの削除」や「ハンドルをリセット」といった操作を行うことが可能です。

上記の手順を参考にしながら、サンプルファイルをベースに、モーションパスを編集して、ボールを自由自在に動かしてみてください。