画像効果コンポーネント

このコンポーネントは、AMP HTML 広告動画広告イメージ広告ではサポートされていません。

画像効果コンポーネントを使用すると、画像(または画像のペア)に JavaScript ベースのさまざまな視覚効果を適用できます。視覚効果の種類には、前後の比較呼吸サーチライトがあります。

画像効果コンポーネントを使用するには:

  1. [コンポーネント] パネルを開き、その中の [グラフィックと効果] フォルダを開きます。

  2. [画像効果] コンポーネント Image Effect component icon をダブルクリックするか、ステージにドラッグします。

  3. ステージ上のコンポーネントをダブルクリックするか、[プロパティ] パネルの [設定] ボタン をクリックします。[画像効果] ダイアログが開きます。

  4. 画像をダイアログ ステージにドラッグするか、[画像を選択] をクリックして画像を選択します。

  5. [プロパティ] パネルのプルダウンから、適用する画像効果タイプを選択します。

  6. 一部の効果タイプでは 2 つの画像を使用します。ライブラリから追加の画像を選択することも、ファイル システムを参照して画像ファイルをインポートすることもできます。

  7. プロパティを調整して効果をカスタマイズします(以下で手順を説明します)。

プロパティ

コンポーネント全体のプロパティに加えて、コンポーネントに含まれる各効果のプロパティも設定できます。

画像効果コンポーネントのプロパティ

プロパティ

説明

名前 画像効果コンポーネントの名前を設定します。
スケーリング

さまざまなサイズの画像をコンポーネント内でどのように表示するかを指定します。詳細

  • 画像が収まるようにサイズ変更
  • 画像が収まるように切り抜く
  • なし
  • 画像が収まるように拡大
アニメーションの時間制限を設定 オンにすると、指定した時間(秒単位)後にアニメーションの自動再生が停止します。

各効果タイプのプロパティ

[画像効果] ダイアログで、各効果タイプに固有のプロパティにアクセスできます。ステージ上の画像効果コンポーネントをダブルクリックするか、[プロパティ] パネルの [設定] をクリックしてダイアログを開いた後、効果タイプを選択してプロパティを表示します。

なし

画像にいずれの効果も適用しません。

前後の比較

「前後の比較」効果とは、2 つの画像間の切り替えをワイプ型遷移で行うものです。1 回ごとにワイプの方向を反転させ、切り替えを繰り返します。

  

プロパティ

説明

画像
ベース 分割線の上側または左側に表示される画像。[ベース] 画像と [表示] 画像を入れ替えるには、[画像を入れ替える] ボタンを使用します。
表示 分割線の下側または右側に表示される画像。[表示] 画像と [ベース] 画像を入れ替えるには、[画像を入れ替える] ボタンを使用します。
分割線
角度 2 つの画像間の分割線の角度(0~180 度)。デフォルトは 90(垂直線)です。
フェザー処理 分割線に沿った画像輪郭部分のぼかし。1 を指定すると輪郭が明確になり、値を大きくするほどぼやけます。
操作 [マウスのフォロー] チェックボックスをオンにすると、分割線をマウスカーソルで移動できます。
アニメーション
自動再生 [自動再生] チェックボックスをオンにすると、コンポーネントが読み込まれた際にアニメーションが開始します。
初期状態
位置 アニメーション開始時の分割線の位置。
遅延 アニメーションの自動再生が開始するまでの時間(秒単位)。
呼吸

呼吸効果とは、画像を弾力的に膨張、収縮させるものです。

   

プロパティ

説明

画像
ベース 効果を適用する画像。
呼吸
速度 アニメーションの速度。0 を指定するとアニメーションは動作せず、値を大きくするほどアニメーションの動作が速くなります。
水平方向の効果
膨張 画像が水平方向に膨張する大きさ。
収縮 画像が水平方向に収縮する大きさ。
垂直方向の効果
膨張 画像が垂直方向に膨張する大きさ。
収縮 画像が垂直方向に収縮する大きさ。
保留時間
膨張 画像が完全に膨張した状態を維持する時間(秒単位)。
収縮 画像が完全に収縮した状態を維持する時間(秒単位)。
曲線
水平方向 水平方向の歪みによって作成される曲線の数。
垂直方向 垂直方向の歪みによって作成される曲線の数。
サーチライト

サーチライト効果とは、2 つ目の画像の一致する部分を楕円形のフォーカス領域内に表示するものです。

  

プロパティ

説明

画像
ベース フォーカス領域の外側に表示される画像。[ベース] 画像と [表示] 画像を入れ替えるには、[画像を入れ替える] ボタンを使用します。
表示 フォーカス領域に表示される画像。[表示] 画像と [ベース] 画像を入れ替えるには、[画像を入れ替える] ボタンを使用します。
フォーカス
半径 フォーカス領域の X 軸方向と Y 軸方向の半径。半径を変更するときにアスペクト比を維持するには、[半径比をロックする] ボタン を使用します。
フェザー処理 フォーカス領域の輪郭のぼかし。0 を指定するとフォーカス領域の輪郭が明確になり、値を大きくするほどぼやけます。
効果 [表示画像を保持] チェックボックスをオンにすると、フォーカス領域が移動した後も画像が表示されたままになります。
アニメーション
自動再生

フォーカス領域の移動パターン。

  • ワンダー(デフォルト)- 画像上をランダムに移動し、画像上に留まるように方向を変えます。
  • ラッピング ワンダー - 画像上をランダムに移動し、画像の端に達すると画像の反対側に現れます。
  • サークル - 円を描くように移動します。
  • なし
速度 フォーカス領域の速度。0 を指定するとアニメーションは動作せず、値を大きくするほどアニメーションの動作が速くなります。
操作 [マウスのフォロー] チェックボックスをオンにすると、フォーカス領域をマウスポインタで移動できます。

スライスされた画像を波パターンでアニメーション化します。

   

プロパティ

説明

画像
ベース 効果を適用する画像。
タイプ

効果で使用する波形。

  • 標準 - さざ波が立つようなアニメーションです。
  • レンズ - 対称的な波パターンで画像が膨張、収縮するアニメーションです。
向き 波アニメーションの方向。
  • 水平方向
  • 垂直方向
速度 波アニメーションの速度。0 を指定するとアニメーションは動作せず、値を大きくするほどアニメーションの動作が速くなります。
強度 波の強さ。0 を指定すると無効になり、値を大きくするほど波が大きくなります。
長さ 波のピーク間の長さ。長さを短くするほど、波の数が多くなります。
リバース [リバース] チェックボックスをオンにすると、波は左から右(水平方向の場合)または下から上(垂直方向の場合)に進みます。
トリミング [トリミング] チェックボックスをオンにすると、アニメーションのフレームごとに画像が再描画され、軌跡効果がなくなります。
詳細
波領域 画像上で波効果を適用する領域。
最大強度 画像上で波効果を最大にする範囲。この範囲外の波領域では、波効果が徐々に弱まります。

イベントとアクション

画像効果コンポーネントから送信されるイベント

次の画像効果コンポーネント イベントに基づいて、他のアクションをトリガーできます。

イベント 説明
自動再生終了 自動再生中のアニメーションがアニメーションの時間制限に達したときに送信されます。
画像効果コンポーネントと各効果によって実行されるアクション

次の画像効果コンポーネント アクションは、他のイベントをトリガーにして実行できます。

  • 再生
  • 一時停止

[イベント] ダイアログで上記のいずれかのアクションを選択したら、画像効果コンポーネントまたは特定の効果をレシーバーに設定します。

イベントを設定する方法をご確認ください。

プレビュー

[画像効果] ダイアログで設定を行いながら、コンポーネントがどのようにアニメーション表示されるかをステージで確認できます。プロパティを変更すると、アニメーションは最初から再生されます。

またダイアログの下部にある [保存] をクリックし、[プレビュー] ボタンをクリックすると、お好きなブラウザでドキュメントのプレビューを行うこともできます。

この情報は役に立ちましたか?

改善できる点がありましたらお聞かせください。
検索
検索をクリア
検索を終了
メインメニュー
12944709064235084567
true
ヘルプセンターを検索
true
true
true
true
true
5050422
false
false