The Particle Effects component

This component is not supported for AMPHTML ads, video ads, or image ads.

The Particle Effects component

The Particle Effects component lets you add animation effects based on particle systems. Particles are generated within starting parameter ranges, such as inside a specific area and within a range of sizes, then move and change at specified rates. This enables visual effects with a degree of randomness, such as snow, rain, fire, steam, and smoke.

An example of the snow effect

To use the Particle Effects component:

1. Open the Components panel, then the Graphics & Effects folder.

2. Double-click the Particle Effects component, or drag it to the stage.

3. Double-click the component on the stage, or click the Settings... button in the Properties panel. The Particle Effects dialog opens.

4. Drag the images you want to include as layers from the Library panel into the Layers panel. To add other images, click the Add images button at the bottom of the panel.

5. Select the effect you want from the Preset panel at the bottom, then either drag it to the stage or click the add button that appears over it. A snapshot of the effect appears on the stage with the particle origin area (where the particles are generated) outlined. You can add multiple effects as different layers.

6. Customize the effect by adjusting its properties. You can save the new set of properties as a custom preset.

Reordering layers

The ordering of layers determines how they stack if they overlap. To change the stacking order of layers:

1. Open the Particle Effects dialog by double-clicking the component on the stage or clicking the Settings... button in the Properties panel.
2. In the Layers panel, drag a layer to its new position.

Repositioning layers

You can move an image or the particle origin area for an effect, as long as it stays within the component's boundaries. To move a layer:

1. Open the Particle Effects dialog by double-clicking the component on the stage or clicking the Settings... button in the Properties panel.
2. Select the layer that you want to move. A bounding box appears around the image or the effect's particle origin area. You can also select multiple layers to move them together.
3. Use one of the following methods:
   • On the stage:
     • Drag the layer to a new location.
     • Use the arrow keys to move the layer by one pixel at a time. Hold the Shift key while pressing an arrow key to move the layer by 10 pixels in that direction.
   • In the Properties panel:
     • For images, edit the top and left position properties.
     • For effects, expand the Advanced properties and edit the Emit X and Emit Y values. Set the Keep in lockstep option to move the particle origin area without resizing it.

Resizing layers

You can resize an image or the particle origin area for an effect, as long as it isn't wider or taller than the component. For effects, you can resize the particle origin area. To resize a layer:

1. Open the Particle Effects dialog by double-clicking the component on the stage or clicking the Settings... button in the Properties panel.
2. Select the layer you want to resize. A bounding box appears around the image or the effect's particle origin area. You can also select multiple layers.
3. Use one of the following methods:
   • On the stage: Drag the control handles at the sides and corners of the bounding box.
   • In the Properties panel:
     • For images, edit the width and height properties.
     • For effects, expand the Advanced properties and edit the Emit X and Emit Y values. Make sure the Keep in lockstep option is disabled.

Removing layers

To delete a layer from the component:

1. Open the Particle Effects dialog by double-clicking the component on the stage or clicking the Settings... button in the Properties panel.
2. In the Layers panel, select the layer or layers you want to delete.
3. Press the Delete key, or click the Delete layers button at the bottom of the panel.

Hiding and showing layers

You can hide a layer to make it easier to work with other layers. Hidden layers won't show up in the preview or published files. To hide or show a layer:

1. Open the Particle Effects dialog by double-clicking the component on the stage or clicking the Settings... button in the Properties panel.
2. Click the box under the Hide all layers icon for the layer that you want to hide or show.

Properties

Along with properties for the entire component, you can configure properties for each effect included within the component.

Particle Effects component properties

Property	Description
Name	Sets the Particle Effects component name.
Autoplay	If checked, automatically plays the animation when the component loads. Note: Individual effects also have an autoplay property.
Set animation limit	If checked, stops playing the animation after the specified duration in seconds.

Properties for each effect

You can access properties specific to each effect in the Particle Effects dialog. Open the dialog by double-clicking the Particle Effects component on the stage or by clicking Settings... in the Properties panel, then select the effect to see its properties.

Presets

Each preset has a default set of properties, which you can restore by right-clicking the Preset dropdown and selecting Reset. If you select a different preset, the below properties will reset to the defaults for the new preset.

Google Web Designer comes with several built-in presets. You can also save your own presets, then export and import them for use on other computers (see Custom presets).

Property	Description
ID	The ID for the effect (so you can reference the effect in events).
Number	The total number of particles generated if the animation for this effect isn't stopped or looped.
Size	The range for the initial particle size. Specify the minimum and maximum in pixels.
Sprite	The particle shape. Square Circle Line Teardrop Image (Choose an image from the Library. Can be bound to dynamic data.)
Color	The starting and ending colors.
Opacity	The minimum and maximum starting opacity levels. 0 is transparent, and 1 is opaque (use decimal values for translucency).
Speed	The minimum and maximum starting speed.
Direction	The minimum and maximum angles of direction for particle movement. You can also use the controls on the circle to set the range of angles.
Advanced
Emit X	The minimum and maximum X coordinates where particles are generated, specified either in pixels or as percentages. Set the Keep in lockstep option to maintain the width of the particle origin area by automatically applying any changes to both fields.
Emit Y	The minimum and maximum Y coordinates where particles are generated, specified either in pixels or as percentages. Set the Keep in lockstep option to maintain the height of the particle origin area by automatically applying any changes to both fields.
Size rate	The rate at which the size changes, specified in pixels (decimal values are valid). A negative value causes particles to shrink.
Random colors	If checked, the initial particle color ranges randomly between the starting and ending colors.
Color rate	The rate at which the color changes from the starting color to the ending color. This property is disabled if Random colors is checked.
Opacity rate	The rate at which the opacity changes. A negative value causes particles to become transparent.
Autoplay	If checked, the animation for this effect starts playing when the component starts playing. Otherwise, you can trigger animation with an event.
Loop	If checked, the animation for this effect plays continually. Otherwise, the animation ends after the specified total number of particles have been generated.
Emit interval	The amount of time between new particles being generated.
Skip forward	Starts the animation at the point when the specified percentage of particles have been generated.
Acceleration	The horizontal and vertical acceleration for particle movement.
Turbulence
Frequency	The frequency of turbulence affecting particle movement. Higher values cause more frequent irregularities in each particle's path.
Strength	The intensity of the turbulence. Set to 0 for no turbulence.
Strength rate	The rate of change in turbulence strength.
Trail	The length of the trail left by particles along their movement path. Set to 1 for no trail.

Turbulence may slow your ad or webpage's performance, especially if you set a longer trail.

Custom presets

You can re-use a set of properties by saving it as a custom preset.

Save a new custom preset

1. Adjust the properties of an existing preset.
2. In the Preset panel at the bottom, click the Save as preset  button. You can also right-click the effect on the stage or right-click the Preset dropdown in the Properties panel.
3. Enter a unique name for the new preset, then press Enter or click OK.

The preset is now available in the dropdown list on the Properties panel and in the Preset panel, indicated with a custom preset  icon.

Rename a custom preset

1. Right-click the preset in the Preset panel and select Rename....
2. Enter the new name, then press Enter or click OK.

Delete a custom preset

1. Right-click the preset in the Preset panel and select Delete.
2. Confirm the deletion by clicking OK.

Export a custom preset

Export custom presets in order to share them with other Google Web Designer users.

1. Right-click the preset in the Preset panel and select Export....
2. Select the destination folder for the export file.

The exported .zip file has the same name as the preset.

Import a custom preset

If you have the export file for a custom preset, you can import it into your instance of Google Web Designer.

1. Copy the exported .zip file to the computer where you want to import the preset.
2. On that computer, open the Particle Effects dialog in Google Web Designer.
3. In the Preset panel at the bottom, click the Import preset  button.
4. Select the .zip file for the exported custom preset.

The imported preset appears in the dropdown list in the Properties panel and in the Preset panel.

Events and actions

Events sent by the Particle Effects component

You can trigger other actions based on the following Particle Effects component events:

Event	Description
Time limit reached	Sent when the animation playback has reached the specified time limit.

Actions performed by the Particle Effects component and by each effect

The following Particle Effects component actions can be triggered in response to other events:

• Play
• Pause
• Stop

When you select one of these actions in the Event dialog, set the Particle Effects component or the specific effect as the receiver.

Learn how to configure events.

Preview

While you're working in the Particle Effects dialog, the Design tab shows a static snapshot of how the component may appear.

Switch to the Preview tab to watch the animation with your current settings. You can modify properties while the preview is playing to see the changes take effect immediately.

You can also preview your document in your preferred browser by clicking Save at the bottom of the dialog, then clicking the Preview button.