Apply effects for richer user experience

In the downloaded files folder, navigate to the samples subfolder and open:

apply-effects.cptx

In the Filmstrip, navigate to the slide titled Summary.

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

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.

Choose the EaseInRight effect.

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.

Click Preview in the toolbar and then choose Play Slide.

In the downloaded files folder, navigate to the samples subfolder and open:

apply-effects.cptx

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.

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

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

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.

In the toolbar, click Interactions and choose Button.

The button object is placed on the slide.

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

Where is Sam's desk

Navigate to the Actions tab.

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

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

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

In the list of effects, select Grow Turn.

In the downloaded files folder, navigate to the samples subfolder and open:

apply-effects.cptx

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

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.

In the text caption, enter the following text:

LUNARSPHERE STUDIOS, Level 4, Floor Plan

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.

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

Let's preview how the rollover caption displays.

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

In the downloaded files folder, navigate to the samples subfolder and open:

apply-effects.cptx

In the Filmstrip, navigate to the slide titled Samantha.

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

Draw the rectangular shape as shown above.

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.

Click Objects and choose Rollover Image.

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

In the downloaded files folder, navigate to the assets subfolder.

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.

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

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

In the downloaded files folder, navigate to the samples subfolder and open:

apply-effects.cptx

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

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.

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

Draw the rectangular shape inside the slidelet.

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

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

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

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

The Publish To My Computer dialog box is displayed.

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

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

Click Publish.