Create a responsive project

In the New tab on Adobe Captivate's Welcome screen, choose Responsive Project and click Create.

Adobe Captivate creates a responsive project with a single slide.

In a responsive project in Adobe Captivate, the Preview bar above the slide gives you options to quickly view the project in different screen sizes or devices.

To preview the project on different devices, select the desired Preview option in the drop-down list.

The Preview Slider on the right side of the Preview bar allows you to resize the current slide and dynamically preview the contents.

As you move the slider left or right, the content in the slide gets adjusted to fit the screen.

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

create-responsive-projects.cptx

With the first slide in the Filmstrip selected, in the toolbar, click Slides, and choose Blank Slide.

Let's first add two horizontal Fluid Boxes to the current slide. 

In the toolbar, click Fluid Box and choose Horizontal.

In the submenu, choose the second box to add two horizontal Fluid Boxes.

When you put Fluid Boxes on a slide, the boxes are evenly spaced across the slide. The slider between them allows you to resize the box.

Move the slider to the left to resize the horizontal boxes.

Next, place two vertical Fluid Boxes in the right horizontal box.

To place the object inside the right horizontal box, select the box.

In the toolbar, click Fluid Box and choose Vertical.

In the submenu, choose the second box to add two vertical Fluid Boxes.

Move the slider up to resize the vertical boxes.

Test the responsiveness of this slide by moving the Preview Slider left and right.

Alternatively, pick the different devices from the Preview in drop-down list.

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

create-responsive-projects-with-fluid.cptx

Navigate to the slide that contains the horizontal and vertical Fluid Boxes.

To add a text caption in the left horizontal box, select the box on the slide.

In the toolbar, click Text and then choose Text Caption.

Enter the following text into the text caption box:

LUNARSPHERE STUDIOS

You can make formatting changes to the text using the Properties Inspector. To view the Properties Inspector, click Properties in the right corner of the toolbar.

To add a text caption in the lower right vertical horizontal box, select the box on the slide.

In the toolbar, click Text and then choose Text Caption.

Copy and paste the following text into the text caption:

Madison and Robert are part of the Learning Team at Lunarsphere Studios. Just like you, each day they’re presented with new challenges and opportunities testing their skills and the limits of what’s possible. Today, you go on a journey as Madison and Robert, and use Adobe Captivate for the first time.

To add an image in the upper right vertical box, select the box on the slide.

Click Media in the toolbar and then choose Image.

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

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

Choose the file lunasphere-studios-team.png and open it.

The image is placed in the upper right vertical Fluid Box.

Notice how the image scales to fit the Fluid Box into which it is placed.

Test the responsiveness of this slide by moving the Preview Slider left and right.

Alternatively, pick the different devices from the Preview in drop-down list.

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

create-responsive-projects.cptx

In the toolbar, click Slides and choose Software Simulation.

In the Record Additional Slides dialog box, choose the slide after which you want to insert the software simulation and click OK.

The dialog box provides you with the options to record the demo. Choose the following options:

• In the drop-down list, choose PowerPoint.
• In the Mode drop-down list, ensure that Demo mode is selected.

Click Record.

After the counter counts down to 1, the PowerPoint application comes to the foreground.

Perform the following steps in PowerPoint:

1. Select the File menu.
2. Choose New.
3. Choose a theme.
4. In the dialog box, click Create.

To end your simulation:

• On Windows, press the End key on your keyboard.
• On MAC, click the Adobe Captivate icon in the top bar.

When you end your simulation, Adobe Captivate comes to the foreground again.

The Demo slides are inserted within your project.

The recorded slides are added to the Captivate project. Notice that there’s a blue rectangle on each of the simulation slides. The blue rectangle is the focus area of the simulation. It’s only visible in the edit area, and disappears when you preview or publish the project. Note that the size of this blue rectangle is the minimum supported device size for Captivate responsive projects.

Each slide of the simulation also contains a blue bounding box. This area of the slide is displayed for the minimum size device. You can move this box around the slide if you want to display a different area from what Adobe Captivate selected, by default.

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

create-responsive-projects.cptx

In the toolbar, click Slides and choose Question Slide.

In the Insert Questions dialog box, select the True/False check box and click OK.

A question slide is inserted after the slide title Summary.

Also, after the question slide, Adobe Captivate inserts a Quiz Results slide.

When you add a question slide to a responsive project, Adobe Captivate puts all the objects of the question into Fluid Boxes to ensure responsiveness:

Also notice the Preview Slider options that allow you to quickly check the responsiveness of the slide.

In the question slide, enter the following question in the text area (overwriting the placeholder text):

You cannot create Responsive projects with Adobe Captivate.

In the choices, select False.

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

non-responsive-project.cptx

Notice that the Preview Slider that is displayed above the slides in a responsive project is not displayed above slides in a non-responsive project. That's a useful visual cue to check if a project is responsive or not.

In the File menu, choose Save As Responsive.

Since all Adobe Captivate objects are not supported in responsive projects, the following dialog box is displayed:

Click Show Unsupported Items.

The HTML5 Tracker panel displays the list of unsupported objects and slides.

Click open the unsupported object in the panel.

You are taken to the slide containing the object. Also, the object is selected on the slide.

If, for example, a user views the output on mobile devices, your project must not include rollover objects.

Delete the selected rollover caption from the slide.

Notice that the object is now not displayed in the HTML5 Tracker panel.

After you have removed the unsupported objects, from the File menu, choose Save As Responsive.

In the dialog box, click Save.

In the Save As dialog box, choose a file location on your computer and filename for the newly converted responsive project.

Notice that the Preview Slider is now displayed above the slides in the converted project.