Designing a responsive project using Adobe Captivate gives you the
Create an immersive learning experience for your learners and make learning interesting and interactive.
A Fluid Box is a layout mode that 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
A Fluid Box container expands the objects to fill available free
In Captivate, you can either insert a Fluid Box layout vertically or horizontally in a responsive project. Depending on the screen size, the objects in a Fluid Box container grow or shrink without compromising the screen width.
You can add Fluid Boxes the big button bar.
- Horizontal Fluid Box layout
- Vertical Fluid Box layout
In this example, you create a layout with one Fluid Box with four cue balls. The view changes accordingly as you preview the project in a different device.
-
-
Padding: Padding adds space on all sides of an object. To add padding horizontally to the objects, enter the padding value in pixels. Negative values are not allowed.
Distribute Objects Equally: Click the button to ensure that all objects in a Fluid Box are equally spaced and are of the same size. For example,
Objects before distributionObjects after distribution
In this example, you create a layout with one Fluid Box with four cue balls. The view changes accordingly as you preview the project in a different device.









-
If you click anywhere else, the blue handles go away. To bring them back, perform any of the following:
- Click anywhere outside the stage area and then drag the mouse onto the stage.
- Click anywhere in the staging area and select the parent Fluid Box in the Fluid Box Selector section. You can see that the handles return.
-
The image above represents a layout for desktops (1024x627). To check how this layout behaves in other devices, move the slider at the top to see the changes in the layout.
If you preview the project in different devices, you can see that the Fluid Box containers align themselves intelligently according to the device width.
If the text specified in a text box spills over to accommodate the change in device width, a button appears at the bottom of the text container. Click that button to see the complete text. For example, in this case, the text appears as:
Nota:
You cannot copy a slide that has objects in a Fluid Box and paste it to a blank or a responsive project. As a workaround, right-click the Fluid Box, choose Select All, and paste the objects to a blank or responsive slide.
Nota:
If there is a single object in a Fluid Box, you cannot resize the object. You can see the red handles around the object, which means that the object can not be resized.
You can modify the width of a Fluid Box by changing the values on the Position panel in the Property Inspector.
For example, if the width of a child Fluid Box is 33.3% of the parent Fluid Box or 341 px, you can change it to the values you want and the changes then reflect on the stage.


Nota:
In the Position panel, if you enter a value that is more than the maximum allowed value, the value resets to the original value.
Hit the play button to see your content automatically change shape and form factor across the full spectrum of device sizes. See how responsive your content is on every screen size.
Click the Layout Preview button to see your content automatically wrap, scale and align across device sizes.

You can also use the same option in the Wrap properties. Change the wrap property for the Fluid Box and click the Layout Preview button to check out the new wrapping behavior.
As discussed in the previous section, a wrap point is that level, which when reached, wraps or rearranges objects with a change in the device width.
For example, when the wrap point is at 80%, at 80% of the device width, an object gets rearranged in the Fluid Box according to the properties defined in the Wrap options.
Often in e-learning projects viewed in devices, you want objects to wrap in more than one Fluid Box. While you can easily set a wrap point in one Fluid Box, the ability to set wrap points in multiple Fluid Boxes give you more flexibility while developing e-learning projects.
To set up a wrap point in Fluid Boxes, click Edit > Preferences, or press Shift+F8 to launch the Preferences dialog.

Select the Enable WrapPoint
In the project, when you add multiple Fluid Boxes and objects inside each Fluid Box, you can see that you can enable wrap points in each Fluid Box.
When you move the sliders, the objects wrap at the exact point where you had specified the wrap threshold.

Make
To view different
-
cp.responsiveButtons = { //"ButtonName" : [Primary,Tablet,Mobile], "Rewind" : [true,true,false], "Backward" : [true,true,true], "Play" : [true,true,true], "Slider" : [true,true,false], "Forward" : [true,true,true], "CC" : [true,true,true], "AudioOn" : [true,false,false], "Exit" : [true,true,true], "FastForward" : [true,true,false], "TOC" : [true,true,false] };
-
If you want each of the playbar control buttons to appear in Primary, Tablet and Mobile views, change the above code to [true,true,true] for all the buttons. Save and close the file.
For example, if you want the "Slider" to appear only in Tablet and Mobile views, then edit the code as follows:
"Slider" : [false, true, true]
Nota:
If you want a different playbar to be responsive, follow the same procedure mentioned above but copy the responsive function in the js file first.
The first preference is given to the checkboxes in skin editor. If they are not selected, then irrespective of the value of true or false that button does not appear in the playbar.
Create a single screen capture that can be used across multiple screens and devices. Adobe Captivate allows you to choose the portion of the screen capture you want to display on smaller screens.
-
Nota:
Use manual recording when you want to pick and choose a few screenshots during the recording process.
When you record using automatic recording, Adobe Captivate captures screenshots automatically and places them on separate slides. Automatic recording is the most commonly used recording method in Adobe Captivate.
-
To convert the project into responsive, click File > Save As Responsive. You can see a warning message about objects not being supported in a responsive project. For more information, see Unsupported objects in HTML5.
Click Save and save your project as a responsive project. You have a new responsive project, as shown below:
New responsive project
-
In the responsive slide, you can either insert your own FluidBox layout (FluidBox > Vertical or Horizontal) or click Suggest FluidBoxes to place the objects intelligently into responsive containers. If you click Suggest FluidBox, you can see that the project layout changes, as shown below:
FluidBox layout
In any responsive project, Captivate lets you preview your project in various devices such as Desktop, iPhone, iPad, and so on.
You can create custom preview devices in addition to the ones already provided by default.
To create a custom preview device:
-
<?xml version="1.0" encoding="UTF-8"?> <devicelist> <device name="Desktop" width="1024" height="627" candelete="0"/> <device name="iPhone6" width="375" height="667" candelete="0"/> <device name="iPad" width="768" height="1024" candelete="0"/> <device name="Galaxy S7" width="360" height="640" candelete="0"/> <device name="Nexus 5x" width="412" height="732" candelete="0"/> <device name="Galaxy S8" width="1000" height="1000" candelete="1"/> </devicelist>
Create content with five breakpoints:
- Desktop with a viewport of 1024x627,
- Tablet Landscape with a viewport of 896x627
- Tablet Portrait with a viewport of 768x627
- Mobile Landscape with a viewport of 667x410, and
- Mobile Portrait with a viewport of 360x460
Preview the output using play slide in respective device layouts. Publish the content as HTML5.
Adobe Captivate enables you to drag and drop objects with a seamless experience across all the three breakpoint views in responsive projects.
For information on View-specific properties of
You can view the Align panel by clicking Window > Align.
-
To navigate through the different breakpoints, click the Desktop, Tablet, and Mobile icons in the Responsive Project layout.
You can view the responsive project area divided into six unique breakpoints as shown in the screenshot below. Each breakpoint area is a unique authoring space.
Available breakpoints
You can see sliders available at the beginning and end of each breakpoint.
By default, five breakpoints are available for you to author content.
If you create content for any device bigger than the viewport size of the mobile layout, you can increase the size by just dragging the slider.
Nota:
Any size above the default viewport size would assume the next higher viewport layout.
For example, if you want to have the mobile viewport as 450x450 instead of the default values. In such a case, since this size is higher than the Mobile and lesser than Tablet, it would assume the layout of Tablet.
Smart positioning is allowed in between breakpoints. Adobe Captivate enables you to preview the projects with seamless experience in between breakpoints. In other words, users do not experience any time lag in preview of output while traversing from one view to another view in between breakpoints.
Set different backgrounds in different views through inclusion/exclusion of objects.
You can also set the device height for each layout by selecting the Device Height check box in the Property Inspector. If Device Height is selected, you can see the yellow border for each layout as shown in below screenshots for Mobile layout.


Slide Height can be linked to Device Height by clicking the link icon next to Slide Height in Properties window as shown in the screenshot below. Change the slide height for specific view or for all views.

Adobe Captivate also allows you to customize the height of viewport as per the device height.
Viewport height is the page layout height for Primary (Desktop), Tablet, and Mobile. You can adjust this height to fit any specific device height with the help of Slide Height option in Properties.
Nota:
Unlink the slide height from the device height to modify it.
Let us assume the viewport height and device height for mobile layout is 415. Consider a case
In this case, all the content inside viewport height is visible in
If the viewport height is bigger than the device height, then the content beyond device height is visible to the end user with the help of a scroll bar in the device.
Now, you can align any object at
- Insert any smart shape in the primary breakpoint slide.
- Click the smart shape and view position tab in
Property inspector. - Click Advanced. You can see the horizontal and vertical center alignment options as shown in the snapshot.
Now, you can align any object at center of the slide in all breakpoints of responsive projects using Captivate's horizontal and vertical center alignment options.
-
Nota:
Enable the Align panel view, by clicking Window > Align.
Horizontal center alignment - if you apply this alignment, then you can move the object only in
vertical direction in the slide. Its horizontal movement is restricted.Vertical center alignment - if you apply this alignment, then you can move the shape only in
horizontal direction in the slide. Its vertical movement is restricted.Both horizontal and vertical center alignment - if you apply both the alignments then
movement is restricted in both the directions.Color coding of the center and vertical alignment options is supported. The border color of two check box options attains the color scheme of
breakpoint at which the alignment options are chosen.
Nota:
If you have multiple shapes, then you can align a single object on the center of the slide and link the rest of the objects to the centered object to achieve slide centered flowcharts at all breakpoints.
If you de-align horizontal or vertical center option, the object does not move back to its original position.
You can set different default caption Text colors for the breakpoint views.
- Choose Edit > Object Style Manager
- Select Default Caption Style
- In Text Format, Click drop-down box next to Break Points and choose Desktop, Tablet Portrait, or Mobile Portrait.
- Choose the color for each breakpoint.
You can capture the interactions across all views and set autofocus for a specific interaction area in views. Set one smart shape as a background image in Responsive project and you are allowed to set crop area for the background image in different views.
Questions and Results slides, along with Master Slides are supported seamlessly across all the views in the Responsive Project.
Responsive properties and Themes are applicable for Question slides.
A star symbol indicates an overridden style in Sample Text area of the Property Inspector.
Adobe Captivate supports drag and drop interactions for responsive projects.
Drag-and-drop interactions provide an interesting and engaging way of assessing your users’ knowledge. This interaction lets users answer questions by dragging and dropping objects in the designated areas or objects.
A drag-and-drop interaction involves a drag source and a drop target. Users drag the drag sources and drop them onto drop targets.
In responsive project, you can run the drag and drop interaction wizard by choosing Insert > Launch Drag and Drop Interaction Wizard. You can also choose Interactions > Drag and drop as shown in the snapshot below:

All the features of drag and drop interaction in Responsive projects are similar to the blank projects as well. For information how to create a drag and drop interaction, various features of the interaction and best practices see Drag and drop interactions.