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

The Effects panel on the Timing Inspector
The Effects panel on the Timing Inspector

Video - Object effects


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

Click the button to see the effect.
 

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.

  1. Create a project and add an object that triggers an effect. For example, insert a button.

  2. Add an object to which you want to apply the effect. For example, insert any shape.

  3. Select the button and in the Properties Inspector, under Action tab, select On Success action to Apply Effect, as shown below:

    Apply effect on button click
    Apply effect on button click

  4. Select the object shape label as the Object Name and click the Animation Palette button, as shown below:

    Animation palette button
    Animation palette button

    Choose any animation from the list of effects.

  5. You can see the new event-based animation trigger for the selected object in the Effects panel. Select the event-based trigger and apply the effect to this object.

    Event based trigger
    Event based trigger

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.

List of effects
List of effects

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

  1. Right-click (Windows) or Control-click (Mac OS) the object and then select Effects.

  2. In the Animation Trigger drop-down list, select a trigger for the effect. By default, the time-based trigger is selected. To apply the object effect when a specific event occurs, create an event-based trigger, and then select it in the Effects panel.

  3. Click adjacent to the Applied Effects List and select the effect to apply to the object. To use an already saved effect, click and locate the XML file that corresponds to the effect. The imported effect is now visible under Custom Effects.

    Note:

    You can create a sequence of effects by applying multiple effects to a single object.

    You can also add effects to groups of objects. Simply group a set of objects and apply an effect. When an effect is applied to a group of objects, the entire group behaves like a single object, and the effect is applied from the center of the group.

    Note: Effects applied to individual objects are not retained if an effect is applied to an entire group of objects.

  4. Preview the effect using one of the previewing methods discussed in Previewing effects.

  5. To apply the effect to multiple objects, click and select either

    • Apply To All Items To apply the effect to all objects that belong to the object type.

    • Apply To All Items Of Same Style To apply to all objects that use the same object style.

  6. To apply effects to groups of objects, simply group a set of objects and apply an effect.

    When an effect is applied to a group of objects, the entire group behaves like a single object, and the effect is applied from the center of the group. 

    Note:

    While applying effects to object groups, keep in mind that effects applied to individual objects are not retained.

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.

Object effects displayed on the timeline
Object effects displayed on the timeline

Note:

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

Previewing effects

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.

Effects reference

Category Name Description
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:

  • Ease In: Specifies the percentage by which the effect starts slow and ends fast. 
  • Ease Out: Specifies the percentage by which the effect starts quickly and slows at the end.
  • Spin Ease: Specifies a transition effect with a slow start, then fast, and then end slowly. The ease attribute is a percentage value between -1 (100% ease in or acceleration) and 1 (100% ease out or deceleration). The default value is 0, which means that the effect animates at a constant speed, without acceleration or deceleration.
Entrance Asymmetric Zoom In

Zooms-in an object. The zoom is defined by the following properties:

  • Initial zoomX and zoomY: The starting zoom-in value in X and Y directions.
  • Final zoomX and zoomY: The terminating zoom-in values in X and Y directions.
  EaseInBottom

Adds a bottom ease-in transition effect to an object. The attributes for this effect are:

  • Ease: Percentage value defining the acceleration or deceleration of an object.
  • Initial Alpha: The amount of transparency of the object at the beginning of the transition.
  EaseInLeft

Adds a left ease-in transition effect to an object. The attributes for this effect are:

  • Ease: Percentage value defining the acceleration or deceleration of an object.
  • Initial Alpha: The amount of transparency of the object at the beginning of the transition.
  EaseInRight

Adds a right ease-in transition effect to an object. The attributes for this effect are:

  • Ease: Percentage value defining the acceleration or deceleration of an object.
  • Initial Alpha: The amount of transparency of the object at the beginning of the transition.
  EaseInTop

Adds a top ease-in transition effect to an object. The attributes for this effect are:

  • Ease: Percentage value defining the acceleration or deceleration of an object.
  • Initial Alpha: The amount of transparency of the object at the beginning of the transition.
  FadedZoomIn

Adds a fading transition effect when an object zooms in. The attributes for this effect are:

  • Initial Alpha: The amount of transparency of the object at the beginning of the transition.
  • Initial ScaleX and ScaleY: The scale factor to use for the object transformation in both X and Y directions.
  • Final Alpha: The amount of transparency of the object when the transition ends.
  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:

  • Ease: Percentage value defining the acceleration or deceleration of an object.
  • Final Alpha: The amount of transparency of the object at the end of the transition.
  EaseOutLeft

Adds a left-directed ease-out transition effect to an object. The attributes for this effect are:

  • Ease: Percentage value defining the acceleration or deceleration of an object.
  • Final Alpha: The amount of transparency of the object at the end of the transition.
  EaseOutRight

Adds a right-directed ease-out transition effect to an object. The attributes for this effect are:

  • Ease: Percentage value defining the acceleration or deceleration of an object.
  • Final Alpha: The amount of transparency of the object at the end of the transition.
  EaseOutTop

Adds a top-directed ease-out transition effect to an object. The attributes for this effect are:

  • Ease: Percentage value defining the acceleration or deceleration of an object.
  • Final Alpha: The amount of transparency of the object at the end of the transition.
  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

  1. Right-click (Windows) or Control-click (Mac OS) the object and select Apply Effect to show the Effects panel in the Property Inspector.

  2. In the Animation Trigger drop-down list, select a trigger for the effect. By default, the time-based trigger is selected. To apply the object effect when a specific event occurs, create an event-based trigger, and then select it in the Effects panel.

  3. Click the Plus icon, select Motion Path from the dropdown menu, and then select the type of motion path you want to apply.

  4. Click the symbol that appears at the right corner of the object. The direction of the motion path indicated by an arrow appears.

  5. To change the direction of motion, click the arrowhead and drag it in the new direction.

New effects added

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. 
New custom motion path effects in Adobe Captivate
New custom motion path effects

Using the custom effects

  1. Add an object to a slide. Select the object and click the Timing Inspector tab to view the Effects panel.

  2. Select Motion Path from the drop-down list, and then select the type of motion path you want to apply.

  3. To choose, for example, the Custom Lines tool, click CustomLines in the list of effects.

    Custom Lines tool
    Custom Lines tool

  4. Place the + marker anywhere in the object and drag the marker to any place in the slide and release the mouse button. You will see a path that starts from within the object and terminates at the location where you ended the motion path.

    Custom line motion path
    Custom line motion path

    This is the path on which the object will traverse from its source to its destination.

Modifying object effects

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. 

Timeline effects

You can view all applied effects on the main timeline.

Events appearing on the timeline
Events appearing on the 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:

  1. Open the XML file and in the Keyframes element, identify the property that you want to make available for editing on the user interface.

    This property typically has a numerical value assigned to it.

  2. Change the numerical value of the property in the Keyframes element to a string.

  3. Add a new element, effect_config to the XML file. In this element, add a config_item element for every property that you want to make available for editing on the user interface. For details on the elements and attributes that you can add in this element, see XML elements for effects configuration parameters.

  4. In the config_item element (child of effect_config), add the attribute property_value.

  5. Specify the string that you assigned to the property in step 2 as the value for this attribute.

  6. Add the other attributes, such as type and default_value. For more information, see XML elements for effects configuration parameters.

  7. Repeat steps 4, 5, and 6 to enable editing for as many properties as you want.

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.

Element

Attribute

Value

Description

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:

  • valid_range
  • increment
  • modifiers
  • decimal_places

 

 

list

Use this type to indicate that the configuration item is a drop-down list. You can specify the following attributes with this type:

  • name
  • value

 

 

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:

  • rgb
  • alpha

 

 

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}"

  • offset

  • multiplier

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

  1. Click in the Effects panel.

  2. Browse to the location where you want to save the effect or the effect sequence, and click Save. The effect sequence is saved as an XML file.

  3. To delete an effect, select the effect, and then click .

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.

Note:

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. See Introducing effects in Captivate for more information.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy