The Image Effect component

To use the Image Effect component:

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

2. Double-click the Image Effect 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 Image Effect dialog opens.

4. Drag an image to the dialog stage, or click Choose images to select an image.

5. Choose the image effect type you want from the dropdown in the Properties panel.

6. 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.

7. 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

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.

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 button to switch the Base image and the Revealed image.
Revealed	The image shown below or to the right of the divider. Use the Swap Images button to switch the Revealed image and the Base image.
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 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 button to switch the Base image and the Revealed image.
Revealed	The image revealed by the focus area. Use the Swap Images button to switch the Revealed image and the Base image.
Focus
Radius	The radius of the focus area along the X-axis and Y-axis. Use the Lock radius ratio button to maintain the aspect ratio when you change a radius.
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. Wander (default) - The focus area moves over the image at random, changing direction to stay over the image. Wrapping wander - The focus area moves over the image at random, appearing on the opposite side of the image when it reaches the edge. Circle - The focus area moves in a circle. None
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.

Events and actions

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.