パーティクルのエフェクト コンポーネント

パーティクルのエフェクト コンポーネントを使って、パーティクル システムに基づくアニメーション効果を追加できます。パーティクルは、特定のエリア内やサイズ範囲内など、開始パラメータの範囲内で生成され、指定の速度で移動したり変化したりします。これにより、雪、雨、火、蒸気、煙など、一定のランダム性を持つ視覚効果が得られます。

雪のエフェクトの例

パーティクルのエフェクト コンポーネントを使用するには:

  1. [コンポーネント] パネル、[その他] フォルダの順に開きます。

  2. パーティクルのエフェクト コンポーネント をダブルクリックするか、ステージにドラッグします。

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

  4. レイヤとして含める画像を [ライブラリ] パネルから [レイヤ] パネルにドラッグします。他の画像を追加するには、パネルの下部にある「画像を追加」ボタン をクリックします。

  5. 下部の [プリセット] パネルでエフェクトを選択し、ステージにドラッグするか、エフェクトの上に表示される追加ボタン をクリックします。エフェクトのスナップショットがステージ上に表示され、パーティクルの原点領域(パーティクルが生成される場所)の枠が表示されます。複数のエフェクトを異なるレイヤとして追加できます。

  6. プロパティを調整してエフェクトをカスタマイズします(以下で手順を説明します)。

レイヤの並べ替え

レイヤの順序によって、レイヤが重なり合った際のスタックの順序が決まります。レイヤのスタック順序を変更するには:

  1. ステージ上のコンポーネントをダブルクリックするか、[プロパティ] パネルの [設定...] ボタン をクリックして [パーティクルのエフェクト] ダイアログを開きます。
  2. [レイヤ] パネルでレイヤを新しい位置にドラッグします。

レイヤの位置を変更

画像またはエフェクトのパーティクル原点領域は、コンポーネントの境界内に限り移動することができます。レイヤを移動するには:

  1. ステージ上のコンポーネントをダブルクリックするか、[プロパティ] パネルの [設定...] ボタン をクリックして [パーティクルのエフェクト] ダイアログを開きます。
  2. 移動するレイヤを選択します。画像またはエフェクトのパーティクル原点領域の周囲に境界ボックスが表示されます。複数のレイヤを選択して、まとめて移動することもできます。
  3. 次のいずれかの方法を使用します。
    • ステージ上で:
      • レイヤを新しい場所にドラッグします。
      • 矢印キーを使用して、レイヤを 1 ピクセルずつ移動します。Shift キーを押しながら矢印キーを押すと、その矢印の方向にレイヤを 10 ピクセルずつ移動できます。
    • プロパティ パネルから:
      • 画像の場合、上部と左側にある、位置に関するプロパティを編集します。
      • エフェクトの場合、[詳細] プロパティを展開して、[放射(X 軸)] と [放射(Y 軸)] の値を編集します。「ロックステップに保持」オプション を設定すると、パーティクル原点領域をサイズ変更せずに移動できます。

レイヤのサイズ変更

画像、またはエフェクトのパーティクル原点領域のサイズは、コンポーネントの幅または高さを超えない限り調整できます。エフェクトの場合、パーティクル原点領域のサイズを変更できます。レイヤをサイズ変更するには:

  1. ステージ上のコンポーネントをダブルクリックするか、[プロパティ] パネルの [設定...] ボタン をクリックして [パーティクルのエフェクト] ダイアログを開きます。
  2. サイズを変更するレイヤを選択します。画像またはエフェクトのパーティクル原点領域の周囲に境界ボックスが表示されます。複数のレイヤを選択することもできます。
  3. 次のいずれかの方法を使用します。
    • ステージ上で: 境界ボックスの両側と角にあるコントロール ハンドルをドラッグします。
    • プロパティ パネルから:
      • 画像の場合、幅と高さのプロパティを編集します。
      • エフェクトの場合、[詳細] プロパティを展開して、[放射(X 軸)] と [放射(Y 軸)] の値を編集します。「ロックステップに保持」オプション が無効になっていることを確認してください。

レイヤの削除

コンポーネントからレイヤを削除するには:

  1. ステージ上のコンポーネントをダブルクリックするか、[プロパティ] パネルの [設定...] ボタン をクリックして [パーティクルのエフェクト] ダイアログを開きます。
  2. [レイヤ] パネルで、削除するレイヤを選択します。
  3. [削除] キーを押すか、パネルの下部にある「レイヤを削除」ボタン trash can icon をクリックします。

レイヤの非表示と表示

レイヤを非表示にすると、他のレイヤでの作業が容易になります。非表示のレイヤは、プレビューやパブリッシュされたファイルには表示されません。レイヤを非表示または表示するには:

  1. ステージ上のコンポーネントをダブルクリックするか、[プロパティ] パネルの [設定...] ボタン をクリックして [パーティクルのエフェクト] ダイアログを開きます。
  2. 非表示または表示するレイヤをクリックし、[レイヤをすべて非表示] アイコン の下にあるボックスをチェックします。

プロパティ

コンポーネント全体のプロパティに加えて、コンポーネントに含まれる各エフェクトのプロパティを構成できます。

パーティクルのエフェクト コンポーネントのプロパティ

プロパティ

説明

名前 パーティクルのエフェクト コンポーネントの名前を設定します。
自動再生

オンにすると、コンポーネントが読み込まれた際に自動的にアニメーションが再生されます。

注: 個々のエフェクトにも、自動再生プロパティがあります。

アニメーションの時間制限を設定 オンにすると、アニメーションの再生が指定した秒数で停止します。

各エフェクトのプロパティ

[パーティクルのエフェクト] ダイアログでは、各エフェクト固有のプロパティを利用できます。ステージ上のパーティクルのエフェクト コンポーネントをダブルクリックするか、[プロパティ] パネルの [設定...] をクリックしてダイアログを開いた後、エフェクトを選択してプロパティを表示します。

プリセット

各プリセットにはデフォルトのプロパティ セットがあり、[プリセット] プルダウンを右クリックして [リセット] を選択すると復元できます。別のプリセットを選択した場合、そのプリセットで以下のプロパティがデフォルトの値にリセットされます。

プロパティ

説明

ID エフェクトの ID(イベントでエフェクトを参照できます)。
このエフェクトのアニメーションが停止またはループしない場合に生成されるパーティクルの合計数。
サイズ 初期パーティクル サイズの範囲。最小値と最大値をピクセル単位で指定します。
スプライト パーティクルの図形。
  • スクエア
  • サークル
  • ライン
  • ティアドロップ
  • 画像(ライブラリから選択します)。
開始と終了の色。
不透明度 不透明度の開始値の最小値と最大値。0 は透明、1 は不透明です(半透明の場合は小数値を使用します)。
速度 開始速度の最小値と最大値。
方向

パーティクルの移動方向の最小角度と最大角度。

また、円のコントロールを使用して角度の範囲を設定することもできます。

詳細
放射(X 軸)

パーティクルが生成される X 座標の最小値と最大値。ピクセル単位またはパーセント値で指定します。

ロックステップに保存」オプション を設定して、両方のフィールドに自動的に変更を適用することでパーティクル原点領域の幅を維持します。

放射(Y 軸)

パーティクルが生成される Y 座標の最小値と最大値。ピクセル単位またはパーセント値で指定します。

ロックステップに保存」オプション を設定して、両方のフィールドに自動的に変更を適用することでパーティクル原点領域の高さを維持します。

サイズレート サイズの変化率。ピクセル単位で指定します(10 進数値が有効)。負の値を指定すると、パーティクルが縮小します。
ランダムカラー オンにすると、初期のパーティクルの色が開始色と終了色の間でランダムに変化します。
カラーレート 開始色から終了色までの色の変化率。[ランダムカラー] をオンにすると、このプロパティは無効になります。
透明度 透明度の変化率。負の値を指定すると、パーティクルは透明になります。
自動再生 オンにすると、コンポーネントの再生開始時に、このエフェクトのアニメーションの再生が開始します。それ以外の場合、イベントを使用してアニメーションをトリガーできます。
ループ オンにすると、このエフェクトのアニメーションが継続して再生されます。それ以外の場合、アニメーションは、指定されたパーティクルの総数が生成された後に終了します。
放射の間隔 新しいパーティクルが生成される時間間隔。
早送り 指定された割合のパーティクルが生成された時点でアニメーションを開始します。
アクセラレーション パーティクルの移動に関する水平アクセラレーションと垂直アクセラレーション。
タービュランス
頻度 パーティクルの動きに影響を与えるタービュランスの頻度です。値が大きいほど、各パーティクルの経路に不規則性が頻繁に生じます。
強さ タービュランスの強度。タービュランスを無効にする場合は 0 に設定します。
強さの変化 タービュランスの強さの変化率です。
軌跡 移動経路に沿ってパーティクルが残す軌跡の長さ。軌跡を無効にする場合は 1 に設定します。

タービュランスによって、広告やウェブページの掲載結果が低下することがあります(特に軌跡を長く設定した場合)。

イベントと操作

パーティクルのエフェクト コンポーネントによって送信されるイベント

次のパーティクルのエフェクト コンポーネントにおけるイベントに基づいて、その他のアクションをトリガーできます。

イベント 説明
時間制限に到達しました アニメーションの再生が指定の制限時間に達したときに送信されます。
パーティクルのエフェクト コンポーネントと各エフェクトで実行されるアクション

次のパーティクルのエフェクト コンポーネントに関するアクションは、その他のイベントによってトリガーされます。

  • 再生
  • 一時停止
  • 停止

[イベント] ダイアログで上記のアクションのいずれかを選択する場合は、パーティクルのエフェクト コンポーネントをレシーバーとして設定します。

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

プレビュー

[パーティクルのエフェクト] ダイアログには、[デザイン] タブにコンポーネントの表示方法を示す静的なスナップショットが表示されます。

[プレビュー] タブに切り替えると、現在の設定でアニメーションを表示します。プレビューの再生中にプロパティを変更すると、変更の効果をすぐに確認できます。

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

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。