In the previous section, you learned how to add horizontal and vertical Fluid Boxes to a slide.
Let’s add objects to the Fluid Boxes on the slide.
Note:You cannot add rollover objects to Fluid Boxes because these objects don’t work on mobile devices.

The slide at the end of this procedure appears as follows:

• In the downloaded files folder, navigate to the samples subfolder and open:
  create-responsive-projects-with-fluid.cptx
  Note: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, it is recommended that you create a slide similar to the slide displayed at the beginning of the above section.
• 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.

To get to know more on Fluid Boxes, refer to Fluid Boxes in Adobe Captivate.

Add responsive simulations to projects

You can capture simulation steps in a responsive project in the following modes:

• Demo.
• Assessment.
• Training.

To record the steps to create PowerPoint presentation, insert a short software simulation in Demo mode.

• 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:
  • Select the File menu.
  • Choose New.
  • Choose a theme.
  • 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 editing 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.

Let’s preview the responsive simulation.
In the toolbar, click Preview and then choose Project.

Add responsive quizzes to projects

When you add a quiz slide to a responsive project, Adobe Captivate adds Fluid Boxes to ensure the responsiveness of the contents on the slide.

To try out this behavior, let’s create a simple quiz with a single True / False question.

•  In the downloaded files folder, navigate to the samples subfolder and open:
  create-responsive-projects.cptx
  Note: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, make sure that you create a responsive project in Adobe Captivate.
• 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.
  Let’s preview and try out the quiz question.
  In the toolbar, click Preview and then choose Project.

Convert non-responsive projects to responsive

If you have an Adobe Captivate project that is not responsive, Adobe Captivate provides you with a simple method to convert your project to a responsive project.
Let’s take a non-responsive project and convert it to a responsive project.
Before converting the project, let’s preview how this project looks.
In the toolbar, open Preview and then choose Project.

• In the downloaded files folder, navigate to the samples subfolder and open:
  non-responsive-project.cptx
  Note: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, make sure that you create a responsive project in Adobe Captivate.
  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.
  After converting the project, let’s preview how the newly converted responsive project looks.
  In the toolbar, click Preview and then choose Project.