[Adobe Edge Animate] CSSフィルタをアニメーションに使用する

2013.03.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Edge AnimateでCSSフィルタが扱えるようになった

HTML/CSS/JavaScriptを使ってアニメーションやインタラクティブコンテンツを作成することができる『Adobe Edge Animate』がバージョン1.5にアップデートされ、CSSフィルタが使えるようになっています。

基本的なタイムラインアニメーションをベースに、CSSフィルタを使った簡単なアニメーションを作成してみます。

Adobe Edge Animateについて

Adobe Edge Animate

ドキュメント

  • Adobe Edge Animateは現在無料で提供されています。
  • タイムラインステージアクションエディタを用いたオーサリングを行うことができ、シンボルの扱い、FlashライクなGUIなどFlashの経験者であれば学習コストは抑えられると思われます。
  • jQueryとAdobe製のライブラリが使用されています。
  • アクションエディタを使用しないでもedgeActions.jsを外部編集して通信部分などを別途実装できることを確認しています。
  • アニメーションはJSON形式で書かれます。

詳しくはこちらをどうぞ

CSS フィルタ

CSSフィルタによって以下のデザイン効果を与えることができます。

  • Invert 反転
  • Hue-Rotate 色相変更
  • Contrast コントラスト変更
  • Saturate 彩度変更
  • Sepia セピア処理
  • Greyscale グレースケール処理
  • Blur ぼかし処理
  • Shadow ドロップシャドウ処理

サンプルソース

[HTML]-webkit-filter: blur(10px);[/HTML]

簡単に言うとフォトショップで行うようなグラフィック効果をCSSで行えるということです。

現在、CSSフィルタをサポートしているブラウザは下記になります。

Chrome, Safari, iOS6 Safari ,Blackberry 10 browsers

CSSフィルタを試してみたい方はこちらをどうぞ

アニメーションを作成する

1.画像を読み込む

画像をステージに読み込みます。

edgeFilter01

2.フィルタパネルを表示する

ステージに配置された画像を選択してフィルタパネルを展開します。

フィルタのプロパティが一覧表示されます。

edgeFilter02

3.キーフレームを設定する

タイムラインパネル上でアニメーションの開始点と終了点に再生ヘッドを移動してキーフレームを作成します。

edgeFilter03

4.フィルタのパラメーターを変更する

終了点に再生ヘッドが位置している状態で画像を選択してフィルタパネルの「反転」を100%に設定します。

edgeFilter04

 5.プレビューする

プレビューボタンを押して再生してみましょう。画像がアニメーションして徐々に色相が反転していくことが確認できます。

edgeFilter05

 

 

 備考:イージングも設定できる

必要に応じてキーフレームアニメーションに対してイージング(加減速)を設定できます。

プリセットが多数用意されているので適宜設定してみましょう。

edgeFilter06

 

アップデートを重ねてバグも減ってきて使い勝手も向上、軽快に動きますので、htmlでのアニメーションに興味をお持ちでまだ触れたことのない方はAdobe Edge Animateに触れてみるとよいかと思います。