スマート プレゼンター®でセミナー撮影

4-4 ピンを使ってアニメーションを作成しよう

この講座は、Adobe Edge Animate CCを使用し、フラッシュを使わないでHTMLのインタラクティブなアニメーションを作成し、また、作成したコンテンツを、レスポンシブなレイアウトにしてタブレットデバイスで表示する、ということを目標に進めていきます。

これまで、移動のアニメーションを作成する方法として、キーフレームを使った方法、モーションパスを使った方法をみてきました。
今回はピンを使ったアニメーションの作成方法をみていきましょう。

移動のアニメーション作成方法

1.円のシェイプを作成します

・前回作成した円は選択してdeleteで消します。
・左上のツールバーから、「円」を選び、任意の場所に円を作成します。
円を選びます
任意の場所に円を作成します

2.自動キーフレームモード、自動ドランジションモードを確認します

・自動キーフレームモードを有効にします。
自動キーフレームモードを有効にします
・自動ドランジションモードを有効にします。
自動ドランジションモードを有効にします

3.モーションパスを選択します

・プロパティパネルの「位置とサイズ」でモーションパスを選択します。
モーションパスを選択します

4.円を終了地点に移動します

・任意の位置に円を移動します。
終了地点に円を移動させます

5.「ピンの切り替え」をオンにし、終了位置を決めます

・ピンの切り替えを選択すると、ピンが青になり、オンになります。
ピンの切り替えを選択する
・タイムラインのピンを選択します。
タイムラインのピンを選択
・ピンを終了位置の1秒にドラッグします。
・ドラッグした範囲が青くなります。
ピンを終了位置の1秒にドラッグ

6.オブジェクトを始点に移動します

・オブジェクトを始点に移動するとタイムラインにも同時に内容が追加されます。
オブジェクトを始点に移動
タイムラインに移動が反映される

7.「ピンの切り替え」をオフにします

・ピンの切り替えを再度クリックすると青だったピンがグレーになりオフになります。
ピンの切り替えをオフにする
これで、(6)の位置から(4)の位置に移動するアニメーションの完成です。
このように、最終的な位置を先に決めるやり方がピンを使ったやり方の特徴です。

この方法だと、最終的な位置から逆算してアニメーションを作成することができるので、
慣れてくると、この方法を多用することになるかと思います。

いかがでしたでしょうか。
これで3種類のアニメーションの作成方法を説明いたしました。
もし理解できていない場合は、何度もやってみて覚えてください。

次の記事では、いよいよ第3回までで作成したコンテンツにアニメーションを作成していきます。

<前のトピックへ || 次のトピックへ>



各種IT教材と販促支援物の制作承ります

講義、講演会の撮影承ります