このコンポーネントは、AMP HTML 広告、動画広告、イメージ広告ではサポートされていません。
雪のエフェクトの例
パーティクル エフェクト コンポーネントを使用するには:
-
[コンポーネント] パネルを開き、その中の [グラフィックと効果] フォルダを開きます。
-
[パーティクル エフェクト]
コンポーネントをダブルクリックするか、ステージにドラッグします。
-
ステージ上のコンポーネントをダブルクリックするか、[プロパティ] パネルの [設定] ボタン
をクリックします。[パーティクル エフェクト] ダイアログが開きます。
-
レイヤとして含める画像を [ライブラリ] パネルから [レイヤ] パネルにドラッグします。他の画像を追加するには、パネルの下部にある「画像を追加」ボタン
をクリックします。
-
下部の [プリセット] パネルでエフェクトを選択して、ステージにドラッグするか、エフェクトの上に表示される追加ボタン
-
プロパティを調整してエフェクトをカスタマイズします。新しいプロパティ セットはカスタム プリセットとして保存できます。
をクリックします。レイヤの並べ替え
レイヤの順序によって、レイヤが重なり合った際のスタックの順序が決まります。レイヤのスタック順序を変更するには:
- [パーティクル エフェクト] ダイアログを開くために、ステージ上のコンポーネントをダブルクリックするか、[プロパティ] パネルの [設定] ボタン
- [レイヤ] パネルでレイヤを新しい位置にドラッグします。
レイヤの位置を変更
画像またはエフェクトのパーティクル原点領域は、コンポーネントの境界内に限り移動することができます。レイヤを移動するには:
- [パーティクル エフェクト] ダイアログを開くために、ステージ上のコンポーネントをダブルクリックするか、[プロパティ] パネルの [設定] ボタン
- 移動するレイヤを選択します。画像またはエフェクトのパーティクル原点領域の周囲に境界ボックスが表示されます。複数のレイヤを選択して、まとめて移動することもできます。
- 次のいずれかの方法を使用します。
- ステージ上で:
- レイヤを新しい場所にドラッグします。
- 矢印キーを使用して、レイヤを 1 ピクセルずつ移動します。Shift キーを押しながら矢印キーを押すと、その矢印の方向にレイヤを 10 ピクセルずつ移動できます。
- プロパティ パネルで:
- 画像の場合、上と左の位置に関するプロパティを編集します。
- エフェクトの場合、[詳細] プロパティを展開して、[放射（X 軸）] と [放射（Y 軸）] の値を編集します。「ロックステップに保持」オプション
を設定すると、パーティクル原点領域をサイズ変更せずに移動できます。
- ステージ上で:
レイヤのサイズ変更
画像、またはエフェクトのパーティクル原点領域のサイズは、コンポーネントの幅または高さを超えない限り調整できます。エフェクトの場合、パーティクル原点領域のサイズを変更できます。レイヤをサイズ変更するには:
- [パーティクル エフェクト] ダイアログを開くために、ステージ上のコンポーネントをダブルクリックするか、[プロパティ] パネルの [設定] ボタン
- サイズ変更するレイヤを選択します。画像またはエフェクトのパーティクル原点領域の周囲に境界ボックスが表示されます。複数のレイヤを選択することもできます。
- 次のいずれかの方法を使用します。
- ステージ上で: 境界ボックスの両側と角にあるコントロール ハンドルをドラッグします。
- プロパティ パネルで:
- 画像の場合、幅と高さのプロパティを編集します。
- エフェクトの場合、[詳細] プロパティを展開して、[放射（X 軸）] と [放射（Y 軸）] の値を編集します。「ロックステップに保持」オプション
が無効になっていることを確認してください。
レイヤの削除
コンポーネントからレイヤを削除するには:
- [パーティクル エフェクト] ダイアログを開くために、ステージ上のコンポーネントをダブルクリックするか、[プロパティ] パネルの [設定] ボタン
- [レイヤ] パネルで、削除するレイヤを選択します。
- [削除] キーを押すか、パネルの下部にある「レイヤを削除」ボタン
をクリックします。
レイヤの非表示と表示
レイヤを非表示にすると、他のレイヤでの作業が容易になります。非表示のレイヤは、プレビューやパブリッシュされたファイルには表示されません。レイヤを非表示または表示するには:
- [パーティクル エフェクト] ダイアログを開くために、ステージ上のコンポーネントをダブルクリックするか、[プロパティ] パネルの [設定] ボタン
- [レイヤをすべて非表示] アイコン
の下で、非表示または表示するレイヤのボックスをクリックします。
プロパティ
コンポーネント全体のプロパティに加えて、コンポーネントに含まれる各エフェクトのプロパティを設定できます。
パーティクル エフェクト コンポーネントのプロパティ
プロパティ |
説明 |
|---|---|
| 名前 | パーティクル エフェクト コンポーネントの名前を設定します。 |
| 自動再生 |
オンにすると、コンポーネントが読み込まれた際に自動的にアニメーションが再生されます。 注: 個々のエフェクトにも、自動再生プロパティがあります。 |
| アニメーションの時間制限を設定 | オンにすると、アニメーションの再生が指定した秒数で停止します。 |
各エフェクトのプロパティ
[パーティクル エフェクト] ダイアログでは、各エフェクト固有のプロパティにアクセスできます。ステージ上のパーティクル エフェクト コンポーネントをダブルクリックするか、[プロパティ] パネルの [設定] をクリックしてダイアログを開いた後、エフェクトを選択してプロパティを表示します。
プリセット
各プリセットにはデフォルトのプロパティ セットがあり、[プリセット] プルダウンを右クリックして [リセット] を選択すると復元できます。別のプリセットを選択した場合、そのプリセットで以下のプロパティがデフォルトの値にリセットされます。
Google Web Designer にはプリセットがいくつか用意されています。独自のプリセットを保存し、他のパソコンで使用するためにエクスポートしてインポートすることもできます（カスタム プリセットをご覧ください）。
プロパティ |
説明 |
|---|---|
| ID | エフェクトの ID（イベントでエフェクトを参照できます）。 |
| 数 | このエフェクトのアニメーションが停止またはループしない場合に生成されるパーティクルの合計数。 |
| サイズ | 初期パーティクル サイズの範囲。最小値と最大値をピクセル単位で指定します。 |
| スプライト | パーティクルの図形。
|
| 色 | 開始と終了の色。 |
| 不透明度 | 開始時の不透明度の最小値と最大値。0 は透明、1 は不透明です（半透明の場合は小数値を使用します）。 |
| 速度 | 開始速度の最小値と最大値。 |
| 方向 |
パーティクルの移動方向の最小角度と最大角度。 また、円のコントロールを使用して角度の範囲を設定することもできます。 |
| 詳細 | |
| 放射（X 軸） |
パーティクルが生成される X 座標の最小値と最大値。ピクセル単位またはパーセント値で指定します。 「ロックステップに保存」オプション |
| 放射（Y 軸） |
パーティクルが生成される Y 座標の最小値と最大値。ピクセル単位またはパーセント値で指定します。 「ロックステップに保存」オプション |
| サイズレート | サイズの変化率。ピクセル単位で指定します（10 進数値が有効）。負の値を指定すると、パーティクルが縮小します。 |
| ランダムカラー | オンにすると、初期のパーティクルの色が開始色と終了色の間でランダムに変化します。 |
| カラーレート | 開始色から終了色までの色の変化率。[ランダムカラー] をオンにすると、このプロパティは無効になります。 |
| 透明度 | 透明度の変化率。負の値を指定すると、パーティクルは透明になります。 |
| 自動再生 | オンにすると、コンポーネントの再生開始時に、このエフェクトのアニメーションの再生が開始します。それ以外の場合、イベントを使用してアニメーションをトリガーできます。 |
| ループ | オンにすると、このエフェクトのアニメーションが継続して再生されます。それ以外の場合、アニメーションは、指定されたパーティクルの総数が生成された後に終了します。 |
| 放射の間隔 | 新しいパーティクルが生成される時間間隔。 |
| 早送り | 指定された割合のパーティクルが生成された時点でアニメーションを開始します。 |
| アクセラレーション | パーティクルの移動に関する水平アクセラレーションと垂直アクセラレーション。 |
| タービュランス | |
| 頻度 | パーティクルの動きに影響を与えるタービュランスの頻度です。値が大きいほど、各パーティクルの経路に不規則性が頻繁に生じます。 |
| 強さ | タービュランスの強さ。タービュランスを無効にする場合は 0 に設定します。 |
| 強さの変化 | タービュランスの強さの変化率です。 |
| 軌跡 | 移動経路に沿ってパーティクルが残す軌跡の長さ。軌跡を無効にする場合は 1 に設定します。 |
タービュランスによって、広告やウェブページのパフォーマンスが低下することがあります（特に軌跡を長く設定した場合）。
カスタム プリセット
プロパティ セットを再利用するには、カスタム プリセットとして保存します。
新しいカスタム プリセットを保存する
- 既存のプリセットのプロパティを調整します。
- 下部の [プリセット] パネルで、「プリセットとして保存」ボタン
をクリックします。ステージ上でエフェクトを右クリックするか、[プロパティ] パネルの [プリセット] プルダウンを右クリックします。
- 新しいプリセット用に一意の名前を入力して、Enter キーを押すか、[OK] をクリックします。
このプリセットが [プロパティ] パネルのプルダウン リストと [プリセット] パネルで利用できるようになりました。カスタム プリセット アイコン で確認できます。
カスタム プリセットの名前を変更する
- [プリセット] パネルで対象のプリセットを右クリックし、[名前を変更] を選択します。
- 新しい名前を入力して、Enter キーを押すか、[OK] をクリックします。
カスタム プリセットを削除する
- [プリセット] パネルで対象のプリセットを右クリックして [削除] を選択します。
- [OK] をクリックして削除を確定します。
カスタム プリセットをエクスポートする
カスタム プリセットをエクスポートして、他の Google Web Designer ユーザーと共有できます。
- [プリセット] パネルで対象のプリセットを右クリックし、[エクスポート] を選択します。
- エクスポート ファイルの保存先フォルダを選択します。
エクスポートされた .zip ファイルは、プリセットと同じ名前になっています。
カスタム プリセットをインポートする
カスタム プリセットのエクスポート ファイルがある場合は、そのファイルを Google Web Designer のインスタンスにインポートできます。
- エクスポートした .zip ファイルを、プリセットをインポートするパソコンにコピーします。
- そのパソコンで、Google Web Designer の [パーティクル エフェクト] ダイアログを開きます。
- 下部の [プリセット] パネルで、「プリセットをインポート」ボタン
をクリックします。
- エクスポートしたカスタム プリセットの .zip ファイルを選択します。
インポートしたプリセットが [プロパティ] パネルと [プリセット] パネルのプルダウン リストに表示されます。
イベントと操作
パーティクル エフェクト コンポーネントによって送信されるイベント次のパーティクル エフェクト コンポーネントにおけるイベントに基づいて、その他のアクションをトリガーできます。
| イベント | 説明 |
|---|---|
| 時間制限に到達しました | アニメーションの再生が指定の制限時間に達したときに送信されます。 |
次のパーティクル エフェクト コンポーネントに関するアクションは、その他のイベントによってトリガーされます。
- 再生
- 一時停止
- 停止
[イベント] ダイアログで上記のアクションのいずれかを選択する場合は、[パーティクル エフェクト] コンポーネントまたは特定のエフェクトをレシーバーとして設定します。
イベントを設定する方法をご確認ください。
プレビュー
[パーティクル エフェクト] ダイアログでは、コンポーネントがどのように表示されるかを示す静的なスナップショットが [デザイン] タブに表示されます。
[プレビュー] タブに切り替えると、現在の設定でアニメーションを表示します。プレビューを再生しながらプロパティを変更すると、変更の効果をすぐに確認できます。
またダイアログの下部にある [保存] をクリックし、[プレビュー] ボタンをクリックすると、お好きなブラウザでドキュメントのプレビューを行うこともできます。