Edge Animate CC(3.0)

オーディオ
コンポジションにオーディオを追加して、Animate プロジェクトに音を付けることができるようになりました。最新のブラウザーはどれもネイティブで HTML5 Audio API を利用できます。この API を使用して、オーディオのイベントをタイムラインにバインドしたり、オーディオのアクションをエレメントに追加したり、ユニークなサウンドエフェクトを生むオーディオのトランジションを作成したりすることができます。

オーディオの使い方について詳しくは、アニメーションへのオーディオの追加を参照してください。

レスポンシブな拡大/縮小
ボタンをクリックするような簡単さでレスポンシブな Animate プロジェクトを作成できるようになりました。このオプションを有効にすると、ブラウザーウィンドウや親コンテナのサイズに合わせて、縦横比を固定したまま Animate のステージを拡大/縮小できます。

スクリプトの読み込み
新しくなったスクリプトの読み込みパネルで、お気に入りの JavaScript ライブラリを追加して Animate プロジェクトを拡張できます。ライブラリはローカルとオンラインのいずれのソースからも読み込むことができ、コンポジションとともに保存したり、パブリッシュされたファイルとともにパッケージ化したりできます。

モーションパスの伸縮と回転
モーションパスの編集機能が強化され、そのサイズを簡単に変更したり、変形の基点を基に回転したりできるようになりました。モーションパスをマウスでポイントすると新しいコマンドが表示され、H キーを押すとオーバーレイが非表示になります。

新しい分布コマンド
エレメントをステージに配置したり、整列させたりする際に、新しい分布コマンドを修正メニューから利用できるようになりました。複数のオブジェクトを選択した状態で、メニューから修正/分布を選択すると、様々な分布オプションにアクセスできます。

ステージの中央揃え
Animate ステージの中央揃えが、ブラウザーウィンドウ内をはじめ、ステージが配置されている様々な親コンテナ内で可能になりました。ステージのプロパティでチェックボックスをオンにするだけで、ステージを水平方向、垂直方向、またはその両方に中央揃えすることができます。

OAM パブリッシュ時の透明のポスターイメージ
OAM ファイルをパブリッシュする際に、ポスターイメージを透明の PNG として保存できるオプションが追加されました。この機能は、Animate コンテンツを InDesign や Muse 内に埋め込むときに、ドキュメントのデザインコンテンツを透明のステージでオーバーレイする場合に使用します。注意:OAM ファイルをサポートするアプリケーションでこのオプションを使用すると、配置するファイルは透明のため空であるように見えます。

この機能は現在、DPS にパブリッシュする際に、PDF Folio には対応していません。透明のポスターイメージを使用するには、自動、PNG、または JPG の Folio を選択してください。

OAM の CDN パブリッシュ
OAM パブリッシュで、キャッシュホストによって Animate プロジェクトの読み込みを高速化できるようになりました。Animate コンテンツをオンライン用(Muse、Dreamweaver またはサードパーティのアップロードプラグイン)に作成している場合は、このオプションを選択してください。

­

新しいレッスン
今回のリリースで搭載された機能については、新しい 2 つのレッスン(レスポンシブなレイアウト、オーディオ)で使い方を学ぶことができます。ようこそ画面の「はじめに」、またはウィンドウ/レッスンから、レッスンパネルをご覧ください。

jQuery のアップデート
Animate で jQuery バージョン 2.0.3 が使用されるようになりました(jQuery 1.7.1 から更新)。

ソースマップのサポート
「ブラウザーでプレビュー」または CDN で Animate コンポジションをデバッグする際、ソースマップをサポートするブラウザー(Google Chrome など)を使用している場合に縮小版 Animate や jQuery ライブラリコードを解析できるようになりました。

 

Edge Animate CC(2.0.1)

Edge Animate CC の本アップデートでは Internet Explorer 11 との互換性の問題が修正されています。すべてのユーザーにアップデートをお勧めします。以前のバージョンの Animate で作成したコンテンツは IE11 で動作しません。互換性を保つには本アップデートが必要です。

プロジェクトをアップデートするには、Animate CC のアップデートをこちらからインストールし、プロジェクトを保存し直してください。本アップデートが扱っている問題について詳しくは、Animate Team Blogを参照してください。

Edge Animate CC(2.0)

モーションパス

モーションパスの導入により、手動で描いた曲線のパスに沿って動作するエレメントに、表現豊かなモーションを追加できます。これにより、線状のモーションでは実現できなかった、物理学に基づく流動的な動作で、リアルな動きを再現できるようになりました。  

x/y 変換は、この場合でも位置を制御するデフォルトの手段です。モーションパスの動作をエレメント別に制御するには、プロパティパネルの「モーションパス」ラジオボタンを選択します。コンポジション内の新しいエレメントのデフォルトの移動手段をモーションパスに設定するには、デフォルトのレイアウトで「モーションパス」を選択します。

オブジェクトにモーションパスが適用されたら、キーフレームやピンで通常行うように、トランジションを作成します。これで、2 つのアンカーポイント間のステージにパスが描かれ、曲線を使用して編集する準備が整いました。アンカーポイントの各終端は三角形で示し、オブジェクトの移動方向を示します。

モーションパスの時間を制御するには、位置のキーフレームをタイムライン内の位置のトランジションに追加します。これにより、それぞれ異なる速度の 2 つのパスが作成されます。また、パスにイージングを追加して、自然な加速動作や減速動作を制御できます。

「自動回転」チェックボックスをオンにすると、エレメントがパスに沿って動くときに自動的に回転します。

スワイプジェスチャ

モバイル用の操作として、エレメントの左右のスワイプ操作をバインドできるようになりました。スワイプ操作は、コンポジション内のすべてのエレメントにバインドできます。クリックやダブルクリックなどに割り当てるように、エレメントの「アクションの追加」ボタンを使用して、スワイプイベントにアクションを割り当てます。

CDN ホスティングによって最適化されたパブリッシュ

アドビの Akamai サーバーで提供されたランタイムホスティングによって、より高速なダウンロードと簡単な出力管理を実現しました。コンテンツをオフラインで実行する必要がある場合や、独自のホスティングを使用する場合は、このオプションのチェックを解除してください。

テンプレート

テンプレートギャラリーからテンプレートの読み込み、保存、再利用ができるようになりました。これにより、共通ファイルパターン用の Animate コンポジションを読み込むことができます。

テンプレートのメニューには、ようこそ画面(「テンプレートから作成」)または「ファイル」メニューからアクセスできます。テンプレートギャラリーで、テンプレートのインポートや削除ができるほか、テンプレートから新しいコンポジションを作成できます。

テンプレートを保存すると、.andtmpl ファイルが作成され、自由に配布できるほか、ファイルシステム内のどこにでも配置できます。テンプレートでは、イメージ、テキスト、シンボル、フォントのほか、現在のコンポジションでカスタマイズした変更点をキャプチャできます。ビジュアルテンプレートローダーからテンプレートを読み込むこともできます。

エレメント/タイムラインでのジャンプ

エレメントパネルやタイムラインパネルでは、パネルがスクロールする場合、スクロールして選択したエレメントを表示できるようになりました。

スポイトツール

新しいスポイトツールは、カラーピッカーポップアップにあります。カラーポップアップからスポイトツールアイコンを選択して、ステージから色を採取します。

タイムラインとエレメントのカラーコーディング

エレメントパネルまたはタイムラインでエレメントの色割り当てをクリックすると、オブジェクトの色区分に色を簡単に割り当てることができます。これにより、エレメントとタイムラインのトランジションの両方で色割り当てが変更されます。

ステージの拡張ズームレベル

ステージのズームレベルを 10 %から 400 %の間で制御して、プロジェクトの全体像をより詳しく見ることができるようになりました。

Edge Animate 1.5

CSS フィルターのサポート

最先端の CSS 機能が Edge Animate に導入されました。

以下の項目について CSS フィルターがサポートされます。

  • 反転
  • 色相循環
  • コントラスト
  • 彩度
  • セピア
  • グレースケール
  • ぼかし
  • シャドウ

上記の CSS フィルターは、プロパティパネルでアニメーション化可能な効果として利用できます。注意:CSS フィルターは CSS に新しく追加された仕様であり、サポートされるのは Chrome 18 以降、Safari 6、iOS Safari 6、Blackberry 10 のみです。

グラデーション
新しいグラデーションツールを使用して、放射状と線状の両方のグラデーションスタイルをエレメントに適用できます。新しいグラデーション機能では以下のことが可能になります。

  • エレメントに複数のグラデーションストップを追加できます。
  • グラデーションカラーおよび配置のアニメーショントゥイーンを作成できます。
  • 定義したカラーストップに基づいてグラデーションを無限に繰り返すことができます。
  • グラデーションのトランジションを線状と放射状のいずれかで使用できます(線状と放射状の両方のグラデーションのトランジションを組み合わせることはできません)。
  • 放射状グラデーションの CSS プロパティ(ellipse-farthest-corner、circle-farthest-corner など)を指定できます。
  • 線状の場合は回転角度で、放射状の場合は x/y パーセンテージでグラデーションの位置を制御できます。

Edge Web Fonts によるテキスト編集の強化

Edge Animate 内から Edge Web Fonts を参照して、コンポジションに一連のフォントを適用できるようになりました。フォントはスタイル別に参照して、ドキュメントレベルのフォントライブラリに追加できます。

新しいカラーピッカー
カラーピッカーが一新され、より簡単にカラーを編集できるようになりました。

新しいカラーモード
グラデーションとカラーの両方に対して、RGBa、HSLa および 16 進数で色を定義できるようになりました。

カラースライダー
カラーパネルとグラデーションパネルの両方に導入された新しいカラースライダーを使用して、色の制御と適用を簡単に行うことができます。

再利用可能なスウォッチ
スウォッチを保存して、ドキュメントレベルでグラデーションとカラーの両方に再利用できます。

ロックされたエレメントの淡色表示
ロックされたエレメントがタイムラインとエレメントパネルの両方で淡色表示されるため、編集できるオブジェクトを簡単に識別できます。

iframe 対応のプリローダー
プリロード動作が iframe 用に最適化されて、リソースの協調読み込みが可能になりました。iframe に含まれる Animate コンポジションは、ドキュメントが読み込まれてから、コンポジションの実行を指示します。これにより、適切な広告のプリロードが実現します。

プレビュー時のシンボルの編集状態の保持
ブラウザーでのプレビュー時に、Animate コンポジションがステージに戻ることはありません。Animate では、現在の編集状態が毎プレビュー時に保持されます。

Edge Animate 1.0.1

本アップデートでは、Edge Animate の特定機能の用法に関する匿名データを報告する機能が含まれました。これは、Edge Animate ユーザーにとって最も重要な機能について理解するためのものです。収集された情報は、優先順位付けや重点的に取り組むべき機能について、より多くの情報に基づいて決定するために、Edge Animate チームによって役立てられます。Edge Animate チームは、バージョン 1.0 の開発中にユーザーと密接な関係を築いてきました。ユーザーからのフィードバックは、実際の製品に多大に影響しています。本アップデートでは、アプリケーション内のユーザーの動作を通して、アドビに情報が伝えられるようになりました。

また、アドビでは以下のいくつかの重要な問題に対処しました。

  • Edge Web Fonts のサポートの追加
  • パブリッシュされたコンテンツにおけるパフォーマンスの向上
  • iOS 6 での iframe および Adobe DPS を介して埋め込まれた複数のコンポジションに関する修正
  • アプリケーションの安定性向上のための様々な修正

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー