Adobe Edge プレビュー版 4 ご紹介

Adobe Edge は、HTML5, JavaScript, CSS3 をベースとした、新しい Web 用のインタラクションデザインツールです。Edge を使うと、アニメーションの制作者は、タイムラインや使い慣れたデザインツールを利用して、直感的にアニメーションを作成できます。作成したアニメーションは、そのまま HTML 文書に埋め込めば、デバイス上でもデスクトップ上でも HTML5 に対応した全てのブラウザ上で実行できます。

Adobe Edge は、定期的に更新が行われており、2012 年の 1 月にはプレビュー版 4 が Adobe Labs に公開されました。この記事では、プレビュー版 4 になって追加された新しい機能をご紹介します。

Web フォントのサポート

Web フォントサービスから取得したフォントを使えるようになりました。Google Web Fonts サービスや Typekit などの様々なサービスと連携して、より豊かなタイポグラフィが実現されます。ユーザ環境でフォントが使えない場合のために、フォールバック用のフォントリストも指定できます。

フォントの追加は、ライブラリパネルから、フォント追加のアイコンをクリックして、ダイアログにフォント情報を入力するだけです。直ぐに、フォントリストから、追加したフォントが選択できる状態になります。

シンボルを定義して再利用が可能

シンボルは、独立したタイムライン、要素、インタラクションの定義を持ちます。一旦定義すれば、ライブラリからステージに好きな数だけドラッグして配置できます。アニメーションの中で、同じ動作をする要素を複数並べたい場合などは、とても便利な機能です。

プレビュー版 3 までは、全ての動きを 1 つ 1 つ個別に設定する必要がありました。プレビュー版 4 からは、同じ動作、同じインタラクションであれば、設定作用は 1 回で済みます。また、元のシンボルを変更すると、ステージ上の全てのシンボルの動きをまとめて変えられます。

シンボルを定義するには、シンボルに変換したい要素を選択して、右クリックをして "Conver to Symbol…" を選択します。表示されたダイアログに、シンボル名を入力して "OK" をクリックすると、ライブラリにシンボルが追加されます。ダイアログで "Autoplay timeline" をチェックしておくと、シンボルが表示されると自動的にタイムラインの再生が開始されます。チェックを外せば、スクリプトから指示するまで再生は行われません。

タイムラインの改善

プレビュー版 4 では、様々な使い勝手の改良が行われました。タイムラインもより使い易く且つ見やすく変更されています。

Edge のタイムラインには、要素ごとに、アニメーションの対象となる全ての属性が表示されます。そのため、属性ごとに、アニメーションの期間やタイミング、開始時と終了時の値を簡単に設定することができます。色を変更する場合には、カラーピッカーを使って、色を指定できるようになりました。タイムラインパネル内の、現在の色が示されている四角をクリックすると、カラーピッカーが表示され、色を選択できるようになります。

動的なリソースの読み込み

Edge のアニメーション再生に必要なリソースを動的に読み込むように変更されました。それに伴い、HTML 文書への組み込みも簡単になりました。Edge が生成するプリロード用の JavaScript ファイルを読み込む Script タグ 1 行を head タグ内に追加すれば、あとは body タグ内に div タグを宣言して、class 属性の値に Edge アニメーションに割り当てられた ID を指定するだけです。ID は、プリロード用の JavaScript ファイルの最後に書かれています。下は、そのサンプルです。

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>Edge Preview Sample</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="xxx_edgePreload.js"></script>
<!--Adobe Edge Runtime End-->
</head>
<body>
<div id="stage" class="EDGE-101010101"></div>
</body>
</html>

Adobe Edge プレビュー版 4 をダウンロード