Apply effects for richer user experience

Søk

Object effects help you quickly draw users' attention to specific areas or objects on a slide. In this section, we will apply effects to objects in our project.

Assets and samples

The procedures in this document require you to use assets such as images and sample Adobe Captivate project files. You can choose to use your own assets and samples. However, it is recommended that you download and extract the following zip file to your computer:

apply-effects.zip

Apply effects to objects

Effects in Captivate start from the green triangle, shown below, and ends at the red square. The effect terminates at the center of the object.

In the sample project that ships with this tutorial, we will use the following slide to apply effects to the left and right arrows:

  • The right arrow has to come in from the right side of the slide.
  • The left arrow has to come in from the left side of the slide.

  1. In the downloaded zip folder, navigate to the samples subfolder and open:

    apply-effects.cptx

    Merk:

    It is not mandatory that you download the project file that ships with this tutorial. You can still follow along with the steps in this procedure. However, you will need to create a new project in Captivate with a slide similar to the slide shown above.

  2. In the Filmstrip, navigate to the slide titled Summary.

  3. To apply effects to the left arrow, right-click the arrow on the slide, and choose Apply Effect.

  4. In the Effects section, choose the Entrance category from the third drop-down list.

    The available effects for entrance are displayed in the panel below.

    To see the effect on an object on a slide, hover the pointer over the effect.

  5. Choose the EaseInRight effect.

  6. For the right arrow, set the effect to EaseInLeft.

    When you are working on effects, it's a good idea to preview your progress at short intervals. This way, you have a good idea of how the effects on the slide will look as you go along.

  7. Click Preview in the toolbar and then choose Play Slide.

Let's preview the procedure we've completed.

In the toolbar, click Preview and then choose Project to preview the entire project.

Apply event-based effects

You can apply effects on objects which the user actions (event) trigger. You can apply an effect on an object that is triggered only when you perform any action on the object.

In our sample project, we will apply an effect to put emphasis on Samantha's desk in the floor plan. The slide at the end of this procedure will be as follows:

If the user clicks the button with the caption Where is Sam's desk, an effect is triggered on the blue highlight over Sam's desk on the floor plan.

  1. In the downloaded zip folder, navigate to the samples subfolder and open:

    apply-effects.cptx

    Merk:

    It is not mandatory that you download the project file that ships with this tutorial. You can still follow along with the steps in this procedure. However, you will need to create a new project in Captivate with a slide similar to the slide shown above.

  2. In the Filmstrip, navigate to the slide titled Samantha.

    On this slide, let's first place a blue highlight around Sam's desk in the floor plan.

  3. In the toolbar, click Shapes, and choose the rectangular shape.

  4. Draw the rectangular shape over Sam's desk in the floor plan.

  5. In the Properties Inspector, enter the following properties for the rectangle:

    Name: sams_desk (We will use the name later when we apply an effect on this object)

    Opacity: 0% (Makes the image of Sam's desk visible below this object)

    If the Properties Inspector is not visible to the right of your work area, click Properties in the right corner of the toolbar.

  6. In the toolbar, click Interactions and choose Button.

    The button object is placed on the slide.

  7. In the Properties Inspector, enter the following properties for the button:

    Where is Sam's desk

  8. Navigate to the Actions tab.

  9. In the On Success drop-down list, choose Apply Effect.

  10. In the Object Name drop-down list, choose sams_desk, and then click .

  11. In the Effects section, choose Emphasis from the third drop-down list.

  12. In the list of effects, select Grow Turn.

Let's preview the procedure we've completed.

In the toolbar, click Preview and then choose Project to preview the entire project.

Using rollover objects

Rollover objects in Captivate allow you to conditionally display content when a user hovers the pointer over a pre-defined rollover area on a slide. Rollover objects are similar to tooltips in most desktop applications. However, besides text, you can display images and even slides (called slidelets) using Rollover objects in Captivate.

Add rollover captions

Merk:

The HTML5 output for the procedure described in this section, is available here [INTERNAL NOTE: Pending hosting]. You can use it as reference as you go through the steps in the following procedure:

Let's add a rollover caption that appears if a user hovers the pointer over the floor plan image in the following slide:

  1. In the downloaded zip folder, navigate to the samples subfolder and open:

    apply-effects.cptx

    Merk:

    It is not mandatory that you download the project file that ships with this tutorial. You can still follow along with the steps in this procedure. However, you will need to create a new project in Captivate with a slide similar to the slide shown above.

  2. Open the project and in the Filmstrip, navigate to the slide titled Samantha.

  3. In the toolbar, click Objects and choose Rollover Caption.

    When you add a rollover caption to a slide, the object has two parts:

    Rollover Caption: Text caption that displays conditionally (like a tooltip)

    Rollover Area: Resizable area over which user needs to hover the pointer to display the text caption.

  4. In the text caption, enter the following text:

    LUNARSPHERE STUDIOS, Level 4, Floor Plan

  5. Use the handles to reposition and resize the rollover area so that it covers the image of the floor plan on the right side of the slide.

  6. Reposition the text caption to the lower left side of the image as shown at the start of this procedure.

  7. Let's preview how the rollover caption displays.

    Click Preview in the toolbar and then choose Project to preview the entire project.

Let's preview the procedure we've completed.

In the toolbar, click Preview and then choose Project to preview the entire project.

Add rollover images

Merk:

The HTML5 output for the procedure described in this section, is available here [INTERNAL NOTE: Pending hosting]. You can use it as reference as you go through the steps in the following procedure:

The rollover image object displays an image when the user hovers the pointer over the rollover area on a slide.

Let's add a rectangular shape to the following slide. Then we'll add a Rollover Image so that when a user hovers the pointer over the shape, an image of Samatha's team is displayed:

  1. In the downloaded zip folder, navigate to the samples subfolder and open:

    apply-effects.cptx

    Merk:

    It is not mandatory that you download the project file that ships with this tutorial. You can still follow along with the steps in this procedure. However, you will need to create a new project in Captivate with a slide similar to the slide shown above.

  2. In the Filmstrip, navigate to the slide titled Samantha.

  3. In the toolbar, click Shapes and choose the rectangular shape.

  4. Draw the rectangular shape as shown above.

  5. Double-click on the shape and enter the following text:

    Hover the pointer here to see Samantha’s team

    Next, we will add a rollover image over this shape.

  6. Click Objects and choose Rollover Image.

    A dialog box is displayed that allows you to select an image file from your computer.

  7. In the downloaded zip folder, navigate to the assets subfolder.

  8. Choose the file sams_team and click Open.

    When you add a rollover image to a slide, the object has two parts:

    Rollover image: Image that is displayed conditionally.

    Rollover Area: Resizable area over which user needs to hover the pointer to display the image.

  9. Use the handles to reposition and resize the rollover area to cover the shape that we added in step 3 above.

  10. Reposition the rollover image as shown at the start of this procedure.

Let's preview the procedure we've completed.

In the toolbar, click Preview and then choose Project to preview the entire project.

Add rollover slidelets

Merk:

The HTML5 output for the procedure described in this section, is available here [INTERNAL NOTE: Pending hosting]. You can use it as reference as you go through the steps in the following procedure:

Rollover slidelets allow you to add Captivate objects to a rollover object. This way, when a user hovers the pointer over the rollover area, the entire slidelet content is displayed. This feature is useful if you want to conditionally display more than just text or images.

Let's add a rollover slidelet to display more details about Samantha when users hover over her image on the following slide:

  1. In the downloaded zip folder, navigate to the samples subfolder and open:

    apply-effects.cptx

    Merk:

    It is not mandatory that you download the project file that ships with this tutorial. You can still follow along with the steps in this procedure. However, you will need to create a new project in Captivate with a slide similar to the slide shown above.

  2. Open the project and in the Filmstrip, navigate to the slide titled Samantha.

  3. In the toolbar, click Objects and choose Rollover Slidelet.

    When you add a rollover slidelet to a slide, the object has two parts:

    Slidelet: Captivate object container that is displayed conditionally.

    Rollover Area: Resizable area over which user needs to hover the pointer to display the slidelet contents.

    Let's add a rectangular shape to the slidelet.

    Merk:

    While you can add other objects to a slidelet, for simplicity, we are only adding a rectangular shape.

  4. Select the slidelet and click Shapes and choose the rectangular shape.

  5. Draw the rectangular shape inside the slidelet.

  6. Copy and paste the following text in the rectangular shape:

    About Me: I’ve been with Lunarsphere Studios from the beginning. I don’t like to be told “no” and want to be presented with solutions, not just the problems. 

    My favorite movie: Casablanca

    My best vacation: Cairo to tour the Giza Pyramids

    An item on my bucket list: Get a cooking lesson from Gordon Ramsay

  7. Use the Properties Inspector to change the text color to white and the shape color to red.

  8. Use the handles to reposition and resize the rollover area to cover the picture of Samatha on the left of the slide.

Let's preview the procedure we've completed.

In the toolbar, click Preview and then choose Project to preview the entire project.

Preview and Publish

This section covered a lot about effects in Captivate.

We applied effects to objects. We created event-based effects and added rollover objects to conditionally display content on a slide.

Let's preview our progress.

Click Preview in the toolbar and then choose Project to preview the entire project.

If you see something missing, you can go over the appropriate section in this article and make the required updates to your project.

If everything looks fine, let's publish the project.

  1. In the toolbar, click Publish and then choose Publish to Computer.

    The Publish To My Computer dialog box is displayed.

  2. In the Publish as drop-down list, ensure that HTML5 / SWF is selected.

  3. In the Output Format option, ensure that HTML5 is selected.

  4. Click Publish.

For more on using effects, see Object effects.

Adobe-logoen

Logg på kontoen din

Hurtigkoblinger

Vis alle planene dine Administrer planene dine

Legal Notices    |    Online Privacy Policy