Edge Animateを使う上での3つのポイント
140310_00.jpg

このブログのトップパーツは、「Edge Animate」というソフトを使って作っています。Flashを使わずに動きのあるコンテンツを作成できるアドビのWebツールで、iPhoneやiPadなどでもアニメーションを再現できるのが魅力です(その代わり、Internet Explorerの古いバージョンだと動かないみたい)。
このEdge Animateをいろいろいじってみて、最初に多くの人が戸惑いそうだな、と感じたポイントを3つ絞って書き留めておきます。

◎最初に迷うタイムラインの操作のツボ
Edge Animatorでは、時間軸に対して「キーフレーム」というものを設定してオブジェクトごとの位置や大きさなどを決め、アニメーションさせていくのですが、このキーフレームの操作に迷う人は多いと思います。

例えばオブジェクトの不透明度を0%(まったく見えない状態)から100%(完全に見える状態)に移行させたいとき…

140310_01.jpg
・まず、オブジェクトを選択してから青いピンのボタンをクリック

140310_02.jpg
・次にタイムラインの上に表示された青いピンを数秒分ドラッグ

140310_03.jpg
・それから[プロパティ]エリアの不透明度スライダ(最初は100%と書いてあるはず)を[0%]にする

これで0%から100%に切り替わるアニメーションが付きます。操作は100%から0%にしているので逆になっちゃうんじゃないの?と心配するかもしれませんが、この操作で0%→100%になるんです。


◎使う画像のファイル名とサイズは、事前にしっかり準備しておく
Webで使うものなので、画像のファイル名は日本語を含めないようにして準備しておきましょう。配置ファイルの名前を変えるのはEdge上ではできませんし、OS上で変更した場合には、Edgeでリンクファイルを指定し直さなければなりません。あと、画像サイズはあまり大きいとアップした後に読み込みが遅くなる原因になります。サイズの最適化などはしてくれないので、あらかじめPhotoshopなどでリサイズしておきましょう。
140310_05.jpg


◎イージングを設定しておくと見栄えが変わる
Edgeでは、「最初はゆっくり、徐々に加速」とか「最初早めで徐々に減速」というように、変化のスピードを変えることができます。これがイージングというもので、設定はごくごく簡単。イージングボタンを押してパネルを出し、選ぶだけです。すべての動きは、このイージングをちゃんと設定しておくのがオススメ。あるとないとでは、動きの自然さがずいぶん変わってきます。
140310_04.jpg



とまあ、書き出すときりがないので、今日はこの3つに絞りました。
Edgeで作ったパーツをFC2ブログに張り込むためには、またいくつか気をつけるポイントがあるのですが、それは次のエントリーで。

関連記事

作成日:2014/03/10/23:05 || カテゴリー:Web制作


<<FC2ブログでEdge Animateを使う方法 | Top | I.Chi.Go.>>


コメント


コメントの投稿












管理者にだけないしょコメントをおくる



Trackback
Trackback URL
→http://junkdo.blog29.fc2.com/tb.php/144-c7184df0
FC2blog user only

| Topページ |