Object effects help you quickly draw users' attention to the required objects on a slide. To see the effects that you can apply to objects, right-click an object and select Apply Effect.
Alternatively, to launch the effects panel, select the object, and click the Timing tab near the Properties Inspector tab.
You can also create effects in Adobe Animate CC and use them in Adobe Captivate. For more information, see Creating custom effects in Adobe Animate CC.
Accessing the Effects panel
Options on the Effects panel
Animation Trigger
The trigger for a specific object effect. The triggers can be time-based or event-based. Object effects with the time-based trigger are applied after the previous object is played. Object effects with event-based triggers are applied when specific events occur, such as, a click of a button or an entry to a specific slide.
Applying an event-based effect
An event-based effect is when, for example, on a click of a button, an event is triggered for an object or a slide. Follow the steps below to create such an effect.
Applied Effects List
The list of different effects that are available categorized into different categories:
- Basic
- Emphasis
- Entrance
- Exit
- Motion Path
Previews for all the effects are available. Hover on the effect to preview the behavior of the object.
Show/Hide Motion Path
Select this check box if you want to show or hide the motion path.
Effect Start
Time in seconds when the effect is scheduled to start playing
Effect Duration
Duration of the effect in seconds
Transition
The different entry and exit transition options and timing available for a particular effect.
For a specific object, you can apply effects with both time-based and event-based triggers. Object effects with event-based triggers take precedence over effects with time-based triggers.
An event-based animation trigger for the selected object is created and listed in the Effects panel. You can choose the event-based trigger while applying an effect to this object.
Applying effects to individual objects
Applying effects to a group of objects
You can apply effects on a group of objects as well as to individual objects in a group.
To apply effects to a group, simply group the objects on the slide, and then apply an effect on them just like how you apply effects to individual objects (see Applying effects to individual objects).
You can then see the effect applied on the group in your timeline. Individual effects applied to different group members can also be seen if you expand the object as shown here.
The effects on a group and on individual member objects are summative. For example, if a group of objects is set to rotate right, and an individual object is also set to rotate right, then that object rotates to an angle which is the sum of both the rotations.
Things to consider when applying effects on groups and individual group members
The ability to apply effects on a group of objects and on individual group members is a very powerful feature and can be used to demonstrate a variety of concepts, such as, for example, the movement of planets around the sun, while at the same time rotating around their individual axis.
However, keep some of the following tips in mind while using this feature to get the best impact:
- Effects applied
on a group that is set to play for rest of project will not display at runtime if:
- Any object is interactive and has feedback shapes enabled
- Some objects have Place Object on Top checked while others don’t
- When a group contains an object that does not support effects (such as Zoom Area) then the group also does not support effects. For more information on zoom areas, see Creating zoom area.
- When objects in a group are also used in a drag and drop interaction, then the group effects do not play
- When the group includes a video object
You can check the status of an object before and after applying the effects using the preview feature.
You can preview the effect associated with an object, in one of the following ways:
- By clicking the play icon in the Property inspector or
- By moving the mouse over (hovering) over the effect in the Effects panel.
Drag over the playhead in timeline to compare the position of any two effects. At any point in time, you can identify on each frame how the object is moving when any motion object moves over a particular effect.
To preview all the effects on all the objects on the stage, click Preview > Play Slide or click the Play icon in the timeline.
| Basic | Alpha | Sets a transparency effect on an object. The range is 0-100%. 0% is transparent and 100% is opaque. |
| AlphaFromTo | Sets a transparency effect from an initial transparency state to a final transparency state. If the initial alpha is 20% and the final alpha is 80%, the object animates between the alpha states of 20%-80%. | |
| RotateTo | Rotates an object along its axis to a specified angle. RotateTo smoothly animates until the rotation angle has been achieved. | |
| Rotation | Rotates an object along its axis to a specified angle. Rotation causes an instant rotation to the specified angle. | |
| Scale | Transformation that scales objects by a scale factor specified in X and Y directions. Scales causes instant transformation until the scale factors are reached. | |
| ScaleTo | Transformation that scales objects by a scale factor specified in X and Y directions. ScaleTo smoothly animates until the scale factors are reached. | |
| Skew | Skewing alters an object's orientation and the angles between the lines that form the image's corners. Apply skewness to an object by specifying its skew values in X and Y directions. | |
| SkewTo | SkewTo smoothly animates an object until the skew factors are reached. | |
| Emphasis | Anti-Clockwise | Rotates an object anti-clockwise. |
| Clockwise Rotate | Rotates an object clockwise. | |
| DropIn and Bounce | Drops and object and bounces it back to its original position. | |
| Flicker | Applies a flickering effect on the object. | |
| FreeFall | The object undergoes a free fall and then goes back to its original position. | |
| GrowTurn | The object first turns and then grows before going back to its original state. | |
| HeartBeat | The object mimics the beating of a heart. | |
| RotateTimes | Rotates an object a specified number of times clockwise or counter-clockwise. | |
| Spin | Spins an object along its axis. The spin effect depends on the following parameters:
| |
| Entrance | Asymmetric Zoom In | Zooms-in an object. The zoom is defined by the following properties:
|
| EaseInBottom | Adds a bottom ease-in transition effect to an object. The attributes for this effect are:
| |
| EaseInLeft | Adds a left ease-in transition effect to an object. The attributes for this effect are:
| |
| EaseInRight | Adds a right ease-in transition effect to an object. The attributes for this effect are:
| |
| EaseInTop | Adds a top ease-in transition effect to an object. The attributes for this effect are:
| |
| FadedZoomIn | Adds a fading transition effect when an object zooms in. The attributes for this effect are:
| |
| Fly In From Bottom | The object moves upwards from the bottom of the slide and rests in the original position. | |
| Fly In From Bottom Left | The object moves diagonally upwards from the bottom-left corner of the slide and rests in the original position. | |
| Fly In From Bottom Right | The object moves diagonally upwards from the bottom-right corner of the slide and rests in the original position. | |
| Fly In From Left | The object moves in a straight line towards the right of the slide of the slide and rests in the original position. | |
| Fly In From Right | The object moves in a straight line towards the left of the slide and rests in the original position. | |
| Fly In From Top | The object moves downwards from the top of the slide and rests in the original position. | |
| Fly In From Top Left | The object moves diagonally downwards from the top-left corner of the slide and rests in the original position. | |
| Fly In From Top Right | The object moves diagonally downwards from the top-right corner of the slide and rests in the original position. | |
| Glide | The object moves with a smooth, continuous motion. | |
| Spiral In | The object moves in a spiral curve. | |
| StretchAcross | The object stretches along its axis. Set the Ease attribute on the object for the ease transition. | |
| StretchFromBottom | The object stretches from the bottom to its original position. Set the Ease attribute on the object for the ease transition. | |
| StretchFromLeft | The object stretches from the left to right and back to its original position. Set the Ease attribute on the object for the ease transition. | |
| StretchFromRight | The object stretches from the right to left and back to its original position. Set the Ease attribute on the object for the ease transition. | |
| StretchFromTop | The object stretches from the top to its original position. Set the Ease attribute on the object for the ease transition. | |
| ZoomIn | The object zooms in depending on the initial and final zoom percentages. | |
| Exit | Asymmetric Zoom Out | The object zooms out depending on the initial and final X and Y zoom percentages. |
| CollapseAcross | Collapses the object from left and right. Set the Ease attribute on the object for the ease transition. | |
| CollapseToBottom | Collapses the object from top to bottom. Set the Ease attribute on the object for the ease transition. | |
| CollapseToLeft | Collapses the object from right to left. Set the Ease attribute on the object for the ease transition. | |
| CollapseToRight | Collapses the object from left to right. Set the Ease attribute on the object for the ease transition. | |
| CollapseToTop | Collapses the object from bottom to top. Set the Ease attribute on the object for the ease transition. | |
| EaseOutBottom | Adds a bottom-directed ease-out transition effect to an object. The attributes for this effect are:
| |
| EaseOutLeft | Adds a left-directed ease-out transition effect to an object. The attributes for this effect are:
| |
| EaseOutRight | Adds a right-directed ease-out transition effect to an object. The attributes for this effect are:
| |
| EaseOutTop | Adds a top-directed ease-out transition effect to an object. The attributes for this effect are:
| |
| FadedZoomOut | Zooms out an object. You can add initial and final transparency percentages to the object as well as initial and final scaling of the object in X and Y directions. | |
| Fly Out To Bottom | The object moves downwards from its position to below the slide. | |
| Fly Out To Bottom Left | The object moves diagonally to the bottom-left corner below the slide. | |
| Fly Out To Bottom Right | The object moves diagonally to the bottom-right corner below the slide. | |
| Fly Out To Left | The object moves in a straight line towards the left of the slide. | |
| Fly Out To Right | The object moves in a straight line towards the right of the slide. | |
| Fly Out To Top | The object moves upwards in a straight line. | |
| Fly Out To Top Left | The object moves diagonally to the top-left corner of the slide. | |
| Fly Out To Top Right | The object moves diagonally to the top-right corner of the slide. | |
| GlideOut | The object moves in a smooth, continuous motion. | |
| ZoomOut | The object zooms out depending on the initial and final zoom percentages. | |
| Motion Path | Circle | Apply a circular motion path on the object. |
| CustomCurves | Draw custom curved motion paths. | |
| CustomLines | Draw a motion path consisting of straight lines. | |
| CustomScribble | Draw a motion path following the motion of your hand on stage. | |
| Loop | Draw a motion path, which is a curve that bends around and crosses itself. | |
| LeftToRight | Draw a straight line motion path from left to right. | |
| Pentagon | Draw a pentangular motion path. | |
| Rectangle | Draw a rectangular motion path. | |
| RightToLeft | Draw a straight line motion path from right to left. | |
| Triangle | Draw a triangular motion path. |
Defining motion paths for objects
The following custom motion effects are available in the Motion Path drop-down in the Effects panel:
- CustomCurves To draw custom curved curved motion paths. Click along the path you want the object to move along to create the motion path. Anchor points are created along the path, tweak these anchor points to refine the movement of the object.
- CustomLine To draw a motion path consisting of straight lines.
- CustomScribble To draw motion paths following the motion of your hand on the stage. Hold the mouse down and move across the stage along the path you want the object to take. Anchor points are created along the way, tweak these anchor points to refine the movement of the object.
Use the Effect Properties panel in the Effects panel to modify the properties of an object effect. To show or hide properties, change the default values, or the range of values, edit the <effect_config> section in the XML file of the object effect. The XML files for the default object effects are at:
- <Installation folder>/Gallery/Effects (Windows)
- \Applications\ Adobe Captivate\Gallery\Effects (Mac OS)
Effects behavior in multi-state objects
When an effect is applied to an object that has multiple states, the effect is seen on all the states of that object.
You cannot edit effects on any state in an object without affecting all the states in that object.
You can view all applied effects on the main timeline.
If you want to simplify your timeline, you can remove the effects from the timeline by going to Windows > Effects > Enable/Disable Effects on Timeline.
Creating custom effects in Adobe Animate CC
You can save classic tweens as XML files in Animate CC and then use the effects in Adobe Captivate. To select and apply an effect created in Animate CC, right-click on an object and select Apply Effects.
The Effects Panel opens in the Property Inspector.
Click the Browse icon next to the Applied Effects List and navigate to the folder where you have saved the effect file.
You can create the effects with any default duration you want. For a 30 fps project, an effect with 60 frames has a default duration of 2 seconds.
To make the parameters of the effect available on the user interface for editing, edit the XML file to specify the required parameters. These parameters appear on the left side of the Effects panel.
To enable editing of parameters:
XML elements for effects configuration parameters
The hierarchy of the effect_config element is as follows:
<effect_config> <config_item> <effect_property type="number" property_value="BLUR_X" default_value="50"/> </config_item> <config_item> <effect_property type="list" property_value="QUALITY" default_value="1"> <list_items> <list_item> </list_item> </list_items> </effect_property> </config_item> <config_item> <effect_property type="color" > <effect_sub_property> </effect_sub_property> </effect_property> </config_item> </effect_config>
Table 1.
effect_config | effect_type | motion_path | Type String. Use this attribute to display the handles for editing the x and y coordinates of the motion path. |
config_item | display_name | Type String. Specify the name of the configuration item (property) displayed to users on the Effects panel. | |
effect_property | property_value This attribute is mandatory. | Type String. Specify the value of the configuration item. This value must be the same as the one that corresponds to the appropriate property in the ‘Keyframes’ element. For example, in the Glow.XML file (Gallery > Effects > Filters), the Keyframe element contains BLUR_X as the value for blurX. To make the value of ‘blur’ editable from the user interface, add BLUR_X as the property_value in the effect_config element. | |
default_value | Type number. Specify the default value displayed on the user interface. | ||
valid_range Syntax: valid_range="{{0,255}}" | Type number. Specify the range of values applicable for the configuration item. For example, valid_range="{{0,255}}" indicates that the lowest value is 0 and the highest is 255. You can specify the attribute ‘modifiers’ to modify the value specified on the user interface. | ||
type This attribute is mandatory. | number | Use this type to indicate that the configuration item is a number. You can specify the following attributes with this type:
| |
list | Use this type to indicate that the configuration item is a drop-down list. You can specify the following attributes with this type:
| ||
color | Use this type to indicate that the configuration item is to be associated with a color palette. You can specify the following attributes with this type:
| ||
bool | Use this type to indicate that the configuration item is a Boolean. The configuration item is associated with a check box.The default value can be true or false. | ||
seperator | Use this type to separate the configuration items with a horizontal space on the user interface.This type can be used only for the config_item element. | ||
increment | Type number. Specify the value by which the parameter must be incremented when you click the parameter value, hold-down the mouse button, and move the mouse. | ||
modifiers Syntax: modifiers= "{offset:0,multiplier: 0.01}" |
| Type number. Use this attribute to modify the value specified on the user interface. Use Offset to increase or decrease the value specified on the user interface. To decrease the user-specified value, use a negative number as the Offset. Use multiplier to multiply the value specified on the user interface by a number. This attribute can be used with the type ‘number’ only. | |
decimal_places | Type number. Specify the number of decimal places to be allowed for the configuration item. For example, a value of 3 allows you to specify 0.001 and not 0.00001. | ||
list_item (child of effect_property and list_items) | name | Type string. Specify the name of the list item(s). | |
value | Type number. Specify the value that must be posted back to the Keyframes section when users select a list item. | ||
effect_sub_property (child of effect_property) | rgb | Use this attribute to specify the default hexadecimal RGB number. For example, specify rgb=”ff0000” for red.This attribute is valid for the type ‘color’ only. | |
alpha | Type number. Use this attribute to specify the default transparency of the color. This attribute is valid for the type ‘color’ only. |
Best practices for creating effects in Animate CC
Ensure that the FPS of the Animate application you are creating for effects is 30.
Ensure the value of ‘property_value’ in the effect_config section of the effect file (XML file) is the same as that of the one in the Keyframe section.
Break a single effect into multiple effects if the number of parameters is more than five. You can then create a sequence of these effects to achieve the desired result.
Avoid exporting an effect created using frame by frame animations in Animate. You cannot achieve the desired results when such effects are used in Adobe Captivate.
Instead, create effects using classic tweens and import these tweens into Adobe Captivate.
Group the effect parameters by keyframes. You can use the ‘seperator’ type to group related properties .
Check if the XML file of the effect exported from Animate is valid, before using it in Adobe Captivate. To do so, open the XML file in a browser or an XML editor.
Saving and deleting effects
After saving an effect sequence, you can apply it to another object in the project.
When you use the effect sequence again (at least once) in the project, it becomes available in the Advanced Actions dialog box.
However, when you apply the effect sequence using this dialog box, the result of the effect may differ. For example, the duration of the effect does not get scaled proportionately based on the object's timeline.