Adobe Edge Animate入門その3 アニメーションを作成する

火曜日 , 20, 8月 2013 Leave a comment

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

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

 

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

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

 

 

画面に円を配置する

 

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

 

キャプチャ

 

 

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

 

002

 

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

 

003

 

キーフレームの追加

 

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

 

004

 

 

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

 

006

 

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

 

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

 

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

 

007

 

 

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

 

008

 

 

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

 

009

 

 

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

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

 

010

 

 

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

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

 


Please give us your valuable comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です