グラデーションをオブジェクトに追加する

このリリースで導入されたグラデーションパネルにより、グラデーションを Edge Animate 要素に追加できるようになりました。このパネルのオプションを使用して、線状と放射状の両方のグラデーションを作成できます。

グラデーションはアニメーション化できます。ただし、放射状と線状のグラデーション間をアニメーション化することはできません。

グラデーションパネルでは、次の操作を実行できます。

  • カラーストップを使用して複雑なグラデーションを作成する。
  • 線状または放射状のグラデーションを作成する。
  • 線状グラデーション用にグラデーションの角度を指定する。
  • カスタムグラデーションをスウォッチとして保存する。
  • 3 つの形式(RGBa、16 進数、HSLa)のいずれかでカラー値を指定する。「a」はアルファ値(不透明度値)を表します。カラーの定義に使用する形式にかかわらず、Animate では最終的に値は RGB 形式に変換されます。
  • Ellipse-farthest-corner(楕円、最も遠い角に合わせる)、Circle-farthest-side(正円、最も遠い辺に合わせる)など、CSS プロパティを放射状グラデーションに適用するには、「放射状グラデーション」ボタンをクリックしたままにします。適用するオプションを選択します。

注意:

グラデーションは、Internet Explorer のバージョン 9 ではサポートされていません。適用されたグラデーションはすべて、背景色に置き換えられます。

A. カラーの削除 B. 線状グラデーションの角度 C. 線状グラデーションスウォッチ D. 放射状グラデーションスウォッチ E. カラーストップ F. グラデーションスウォッチの追加 G. パターンの繰り返し H. カラーフォーマットボタン I. 明度スライダー J. カラースライダー K. 透明度スライダー L. 色見本を追加 M. 色見本 N. 選択したカラー O. 元のカラー P. 放射状グラデーションボタン Q. グラデーションボタン R. 線状グラデーションボタン 

Edge Animate での色やグラデーションの使用に関するビデオチュートリアルについては、ここをクリックしてください。

カラーパネルの更新点

カラーパネルでは、次の操作を実行できるようになりました。

  • 明度バースライダーを使用して、選択したカラーの濃度をカスタマイズする。
  • 不透明度バースライダーを使用して、選択したカラーの不透明度(透明度)を指定する。
  • カスタムカラーを再利用できるようにスウォッチとして保存する。
  • 3 つの形式(RGBa、16 進数、HSLa)のいずれかでカラー値を指定する。「a」はアルファ値(不透明度値)を表します。カラーの定義に使用する形式にかかわらず、Animate では最終的に値は RGB 形式に変換されます。
A. カラーコード入力オプション B. カラーボタン C. カラー削除オプション D. 追加済みカラースウォッチ E. カラースウォッチ追加オプション F. 不透明度スライダー G. カラー明度スライダー H. カラースライダー I. カラーコードフォーマットオプション 

CSS フィルターを使用する

フィルターパネルのオプションを使用すると、CSS フィルターをシンボル、テキスト、div エレメント、イメージにすばやく適用できます。これまで、そのような効果を適用するには、画像編集ツールを使用するしかありませんでした。

CSS フィルターは現在、Chrome、Safari、iOS6、Blackberry 10 の最新バージョンでサポートされています。

CSS フィルターを適用するには、ステージ上でオブジェクトを選択し、フィルターパネルのオプションを使用して、目的の効果を適用します。例えば、挿入したイメージにフィルターを適用するには、イメージを選択し、必要に応じてフィルターを適用します。 

エレメントからフィルターを削除するには、対応する「x」ボタンをクリックします。

Edge Animate での CSS フィルターの使用に関するビデオチュートリアルについては、ここをクリックしてください。

Edge Web Fonts を活用してテキスト編集を強化する

Edge Animate では、CSS プロパティ @font-face の機能を最大限に利用できるように、デザイン用に豊富な Web フォントが用意されています。Edge Web Fonts を使用すると、印刷メディアでのテキスト編集を Web で再現できます。

Edge Web Fonts には、Adobe ライブラリの何百もの Web フォントに加え、大量のオープンソースのフォントも用意されています。Edge Web Fonts は無料で利用できます。アカウントやキットの設定は不要なため、よりすばやく簡単に使用を開始できます。 

Edge Animate で Edge Web Fonts を使用する

フォントをテキストに適用するときは、フォントメニューの隣にある「+」ボタンをクリックして、Edge Web Fonts ダイアログボックスを表示します。使用するフォントをリストから選択し、「フォントを追加」をクリックします。

パネルの左側にあるボタンを使用して、パネル内のフォントをタイプに基づいてフィルターできます。例えば、サンセリフタイプのフォントのみを表示するには、「サンセリフ」ボタンをクリックします。詳しくは、Web フォントを使用するを参照してください。

選択して適用されたフォントが Edge Animate のフォントライブラリに追加されます。フォントライブラリでフォントをダブルクリックして、代替フォントを指定します。選択したフォントが何らかの理由で適用できない場合、代替フォントがリストで表示されている順に使用されるようになります。

Iframe 対応のプリローダー

プリロード動作が Iframe 用に最適化されて、リソースの協調読み込みが可能になりました。Iframe 内に含まれる Animate コンポジションは、ドキュメントが読み込まれてから、そのコンポジションファイルが再生されます。 

Iframe プリローダーを使用すると、広告が Iframe にプリロードされてから、Animate ファイルと Web ページがダウンロードされるようにできます。

プリローダーの使用について詳しくは、Adobe Edge Animate JavaScript API をご覧ください。

プレビュー時にシンボルの編集状態を保持する

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

ロックされた要素とロック解除された要素を簡単に識別する

ロックされた要素はタイムラインと要素パネルで淡色表示されるため、ロックされた要素とロック解除された要素は簡単に識別できます。

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

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