The Image Effect component

The Image Effect component lets you apply a variety of JavaScript-based visual effects to an image (and in some cases, to a pair of images): Before and After, Breathe, Reveal, and Wave.

To use the Image Effect component:

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

  2. Double-click the Image Effect Image Effect component icon 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

Property

Description

Name Sets the Image Effect component name.
Scaling

Determines how various sized images are displayed within the component. Learn more.

  • Resize image to fit
  • Crop image to fill
  • None
  • Stretch image to fill
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.

None

No effect is applied to the image.

Before and After

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

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

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

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.

  • Standard - The animation causes the image to ripple.
  • Lensing - The animation contracts and expands the image in a symmetrical wave pattern.
Orientation The direction of the wave animation.
  • Horizontal
  • Vertical
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 component

You 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.
Actions performed by the Image Effect component and by each effect

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.

Was this helpful?
How can we improve it?

Need more help?

Sign in for additional support options to quickly solve your issue