Create a responsive project

Create responsive projects in Adobe Captivate that scales seamlessly across devices and screen sizes. Use responsive projects to build an immersive learning experience for your learners and make learning interesting and interactive. In this document, you will learn to create and customize responsive projects in Adobe Captivate.

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:

Create a responsive project

Let's start by creating a responsive project in Adobe Captivate.

  1. 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.

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

  3. 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.

 

For more on this topic, see Responsive Project Design with Adobe Captivate.

Add Fluid Boxes to slides

You can also create responsive projects Adobe Captivate using Fluid Boxes layout. It provides the arrangement of objects on a slide so that the objects behave predictably when the slide accommodates different screen sizes and devices. A Fluid Box is an easy to use layout model for e-learning designers. You can lay out child objects in any direction and have the flexibility to adapt them according to the size of the display device.

A Fluid Box container expands the objects to fill available free space, or shrinks the objects to prevent overflow. Elements in a Fluid Box are direction-agnostic. The objects can adapt to the space available.

Let's add a blank slide to our project and then use Fluid Boxes to aid the responsiveness of the slide. The slide at the end of this procedure appears as follows:

The above slide uses two horizontal Fluid Boxes.

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

    create-responsive-projects.cptx

    הערה:

    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.

  2. 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. 

  3. In the toolbar, click Fluid Box and choose Horizontal.

  4. 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.

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

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

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

  7. In the toolbar, click Fluid Box and choose Vertical.

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

  9. Move the slider up to resize the vertical boxes.

  10. 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.

Add objects to Fluid Boxes

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.

הערה:

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:

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

    create-responsive-projects-with-fluid.cptx

    הערה:

    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 start of the Add F luid boxes to slides section above.

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

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

  4. 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.

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

  6. 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.

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

  8. 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.

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

  10. 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.

  11. 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.

Now that there is a slide with contents, let's preview how these objects appear across devices.

In the toolbar,  click  Preview  and then choose Project.

 

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.

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

    create-responsive-projects.cptx

    הערה:

    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.

  2. In the toolbar, click Slides and choose Software Simulation.

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

  4. 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.

  5. Click Record.

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

  6. 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.
  7. 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.

  8. 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.

For more information on software simulations in Adobe Captivate, see Create software simulations.

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.

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

    create-responsive-projects.cptx

    הערה:

    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.

  2. In the toolbar, click Slides and choose Question Slide.

  3. 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.

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

    You cannot create Responsive projects with Adobe Captivate.

  5. In the choices, select False.

For more on quizzes in Adobe Captivate, see Create quizzes.

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.

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

    non-responsive-project.cptx

    הערה:

    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.

  2. 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:

  3. Click Show Unsupported Items.

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

  4. 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.

  5. Delete the selected rollover caption from the slide.

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

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

  7. In the dialog box, click Save.

  8. 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.

 Adobe

קבל עזרה במהירות ובקלות

משתמש חדש?

‎‎Adobe MAX 2024

Adobe MAX
כנס היצירתיות

14-16 באוקטובר, מיאמי ביץ', ובאינטרנט

Adobe MAX

כנס היצירתיות

14-16 באוקטובר, מיאמי ביץ', ובאינטרנט

‎‎Adobe MAX 2024

Adobe MAX
כנס היצירתיות

14-16 באוקטובר, מיאמי ביץ', ובאינטרנט

Adobe MAX

כנס היצירתיות

14-16 באוקטובר, מיאמי ביץ', ובאינטרנט