This component is not supported for AMPHTML ads, video ads, or image ads.
To use the Image Effect component:
-
Open the Components panel, then the Graphics & Effects folder.
-
Double-click the Image Effect
component, or drag it to the stage.
-
Double-click the component on the stage, or click the Settings...
button in the Properties panel. The Image Effect dialog opens.
-
Drag an image to the dialog stage, or click Choose images to select an image.
-
Choose the image effect type you want from the dropdown in the Properties panel.
-
Some effect types use two images. You can select the additional image from the Library, or browse your file system to import an image file.
-
Customize the effect by adjusting its properties (described below).
Properties
Along with properties for the entire component, you can configure properties for each effect included within the component.
Image Effect component properties
Property |
Description |
|---|---|
| Name | Sets the Image Effect component name. |
| Scaling |
Determines how various sized images are displayed within the component. Learn more.
|
| Set animation limit | When checked, stops autoplaying the animation after the specified duration in seconds. |
Properties for each effect type
You can access properties specific to each effect type in the Image Effect dialog. Open the dialog by double-clicking the Image Effect component on the stage or by clicking Settings... in the Properties panel, then select the effect type to see its properties.
No effect is applied to the image.
The Before and After effect applies a wipe transition between two images that reverses direction once complete, then repeats.
Property |
Description |
|---|---|
Images |
|
| Base | The image shown above or to the left of the divider. Use the Swap Images |
| Revealed | The image shown below or to the right of the divider. Use the Swap Images |
Divider |
|
| Angle | The angle of the dividing line between the two images, between 0 and 180 degrees. Defaults to 90 (a vertical line). |
| Feathering | The softness of the images' edges along the divider. 1 causes a sharp transition, while larger values blur the edges. |
| Interaction | When the Follow mouse box is checked, the divider follows the mouse cursor. |
Animation |
|
| Autoplay | When the Autoplay box is checked, the animation starts when the component loads. |
| Speed | The speed of the animation. |
| Hold time | The amount of time that the animation pauses to fully display each image. |
Initial State |
|
| Position | The starting position of the divider when the animation begins. |
| Delay | The amount of time before the animation starts autoplaying, in seconds. |
The Breathe effect expands and contracts the image elastically.
Property |
Description |
|---|---|
Images |
|
| Base | The image to apply the effect to. |
Breathe |
|
| Speed | The speed of the animation. 0 causes no animation, while higher values cause the animation to play faster. |
Horizontal effect |
|
| Expansion | The magnitude of the image's horizontal expansion. |
| Contraction | The magnitude of the image's horizontal contraction. |
Vertical effect |
|
| Expansion | The magnitude of the image's vertical expansion. |
| Contraction | The magnitude of the image's vertical contraction. |
Hold time |
|
| Expansion | The amount of time that the image remains fully expanded, in seconds. |
| Contraction | The amount of time that the image remains fully contracted, in seconds. |
Curves |
|
| Horizontal | The number of curves created by the horizontal distortion. |
| Vertical | The number of curves created by the vertical distortion. |
The Reveal effect displays the corresponding part of a second image within an elliptical focus area.
Property |
Description |
|---|---|
Images |
|
| Base | The image displayed outside of the focus area. Use the Swap Images |
| Revealed | The image revealed by the focus area. Use the Swap Images |
Focus |
|
| Radius | The radius of the focus area along the X-axis and Y-axis. Use the Lock radius ratio |
| Feathering | The softness of the focus area's edge. 0 gives the focus area a sharp edge, while larger values blur the edge of the focus area. |
| Effect | When the Stay revealed box is checked, the revealed image stays visible after the focus area moves. |
Animation |
|
| Autoplay |
The pattern of movement for the focus area.
|
| Speed | The speed of the focus area. 0 causes no animation, while larger values cause the animation to play faster. |
| Interaction | When the Follow mouse box is checked, the focus area follows the mouse pointer. |
Animates slices of the image in a wave pattern.
Property |
Description |
|---|---|
Images |
|
| Base | The image to apply the effect to. |
Wave |
|
| Type |
The waveform used in the effect.
|
| Orientation | The direction of the wave animation.
|
| Speed | The speed of the wave animation. 0 causes no animation, while larger values cause the animation to play faster. |
| Magnitude | The strength of the waves. 0 causes no effect, while larger values cause more dramatic waves. |
| Length | The distance between wave peaks. The shorter the length, the more waves in the effect. |
| Reverse | When the Reverse box is checked, waves move from left to right (for the horizontal orientation) or from bottom to top (for the vertical orientation). |
| Trimming | When the Trimming box is checked, the image is redrawn for each frame of the animation, preventing a trail effect. |
Advanced |
|
| Wave area | The portion of the image affected by the wave effect. |
| Full strength | The portion of the image where the wave effect is at full magnitude. The magnitude of the effect tapers in other parts of the wave area. |
Events and actions
Events sent by the Image Effect componentYou can trigger other actions based on the following Image Effect component event:
| Event | Description |
|---|---|
| Autoplay ended | Sent when the autoplaying animation reaches the animation time limit. |
The following Image Effect component actions can be triggered in response to other events:
- Play
- Pause
When you select one of these actions in the Event dialog, set the Image Effect component or the specific effect as the receiver.
Learn how to configure events.
Preview
While you're working in the Image Effect dialog, the stage shows you how the component appears while it's animated. If you change any properties, the animation resets to the beginning.
You can also preview your document in your preferred browser by clicking Save at the bottom of the dialog, then clicking the Preview button.