眠るシーラカンスと水底のプログラマー

　Adobe Edge Animate入門の3回目です。

　今回は簡単にアニメーションを作成してみます。

 

　サンプルは本ブログのヘッダーに使っている泡が上に上がっている動きです。

　(注意：サンプルは最新のFireFoxまたはGoogleChrome、もしくはIE9以上ないしGoogle Chrome Frameを導入したIEでご覧ください)

 

 

画面に円を配置する

 

　メニューバーから楕円形ツールを選択します。

 

 

 

　中央のステージ上でマウスをクリックしたまま移動させることで楕円が描画されます。

 

 

　この状態でタイムラインを確認するとElipseが追加されています。

 

 

キーフレームの追加

 

　タイムラインのElipseの上で右クリック→「キーフレームの追加」を選びます。

 

 

 

　「キーフレームの追加」から「X/Yモーション」を選択します。

 

 

　タイムラインのElipseの欄に左端、上端という値が追加され、0フレーム目のタイムラインにひし形が表示されました。これがキーフレームです。

 

2つめのキーフレームとアニメーションの追加

 

　続いて上部の黄色いマーカーを移動させます。

 

 

 

　自動キーフレームモードと自動トランジションモードが有効になっていることを確認します。

 

 

 

　その状態で、ステージ上の楕円を移動させます。

 

 

 

　タイムライン上に緑色の線が表示されました。

　Ctr+Returnでプレビューするかタイムラインの再生ボタンを押すことでアニメーションが確認できます。

 

 

 

　これで基本的なアニメーションが完成しました。

　サンプルの泡の動きは画面上部に移動させながら、楕円形を左右に揺らすことで実現しています。