Responsive Project Design with Adobe Captivate

Designing a responsive project using Adobe Captivate gives you the much needed edge over your competitors. Author just once and content will rearrange itself for the tablet and mobile views. Start from a blank canvas, record an iOS device, or even import a storyboard using Adobe Captivate Draft. Deliver multiscreen, location-specific, device-aware learning experiences without programming.

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 flexibility to adapt to the display space.

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.

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.

Create a single horizontal layout. This layout becomes a parent Fluid Box.

Place the cue balls in the Fluid Box one at a time from the library.

In the Property Inspector panel, the following Fluid Box properties get enabled:

Static: If you select this check-box, the objects inside the Fluid Box overlap and can be moved anywhere inside the Fluid Box.

Optional: If you select this check-box, an object disappears whenever its width is hit. Optional works only with one kind of wrap, Squeeze in a row or Squeeze in a column.

Flow: Denotes the direction in which the objects are laid out in a Fluid Box. In a horizontal flow, the objects are laid out horizontally. Similarly, in a vertical flow, the objects are laid out vertically.

Horizontal: Choose the horizontal alignment options of the objects along the main axis. The options are:

Left Align: Objects are aligned to the left. The first object is at the beginning of the axis.

Center Align: Objects are centered along the axis

Right align: Objects are aligned to the right. The last object is at the end of the axis.

Space in Between: Objects are evenly distributed along the axis; the first object is at the beginning of the axis and the last object is at the end of the axis.

Space Around: Objects are evenly distributed along the axis with equal space around them.

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 distribution

Objects after distribution

Wrap point: A Wrap point is a point, 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.

For example, when the preview area is 1024 pixels wide and the wrap point is set at 50%, and when the device width is set to 512 pixels wide, the objects rearrange themselves.

Wrap: Defines when and how the objects in a Fluid Box wrap or rearrange themselves when a pre-defined threshold is met. The following options are available:

Wrap to next row: When the wrap point reaches the threshold, an object drops down to the next row.

Squeeze in a row: When the wrap point reaches the threshold, the objects do not change their position. The objects adjust their sizes according to the device dimensions.

One Row/Column: When the wrap point reaches the threshold, the objects align themselves in a column.

Symmetrical: When the wrap point reaches the threshold, the objects rearrange themselves according to the number of objects in the Fluid Box.

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.

In the Property Inspector panel, choose the flow of objects and the type of object wrap.

Flow and wrap options

Choose the horizontal alignment of the objects – Center, Left, or Right.

Horizontal alignment options

Choose the vertical alignment of the objects.

Vertical alignment options

Top Align

Middle Align

Bottom Align

Space in Between

Space Around

Create a responsive project (File > New Project > Responsive Project or press Ctrl+H).

On an empty slide, insert a Fluid Box layout, as shown below:

Fluid Box layout

After inserting the vertical layout, click any part of the layout. FB_5 is the parent that represents the entire slide container. On the Property Inspector panel, you can view the entire hierarchy of the individual Fluid Box containers.

Parent Fluid Box

To modify the objects, choose the appropriate container.

On the Fluid Box containers, drag the blue handles to adjust the size of the child containers.

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.

Insert objects in the containers as shown below:

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.

In case of a device with smaller 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.

Before changing width

After changing width

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.

Live device preview

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.

Enable Wrappoint

Select the Enable WrapPoint check-box and click OK. Restart Captivate.

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.

Objects wrap in each Fluid Box

Make playbar controls responsive. From Windows>Skin Editor, you can create a customized skin by changing the playbar controls and saving the changes as a theme. Now, you can make playbar controls appear differently in Primary, Tablet, and Mobile views.

To view different playbar controls in each of the Primary, Tablet, and Mobile views outputs, customize the cpMobilePlaybar variable.

Go to Playbar Location:

C:\Program Files\Adobe\Adobe Captivate 8 x64\en_US\Gallery\Playbars\HTML\cpPlaybarMobileStep text

Nota:

The location varies as per the installation directory in your computer.

Create a backup for the playbar you would like to change.

Open the playbarScript.js file

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.

Relaunch Captivate and the playbar is updated.

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.

Open a Captivate Responsive Project

Click Slides > Software Simulation

Record Additional Slides window appears.

Choose the slide after which you want the recorded slide to be inserted and click OK.

Screen Capture screen window appears.

Select recording type as Automatic or Video demo or Manual and click Record to capture the 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.

In Responsive Project, click Mobile view.

The screen capture realigns itself and appears as shown here:

You can observe that the background is skewed.

You can use a portion of the background image in Mobile view.

In the Property Inspector, click Use portion of background image. You can move the slide capture to the background portion of your choice.

Now, you can notice the difference from previous view.

Create a blank project with some objects, as shown below.

New blank project

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

Drag the slider to see your project in various views.

If the text specified in a text box spills over to accommodate the change in device width, an Expand button appears at the bottom of the text container. Click that button to see the complete text.

Expand button

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

Move the objects, place them as you like, and then preview or publish your responsive project.

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:

First, launch Captivate as an Administrator.

Then type the required dimensions, as shown below:

Custom preview dimensions

To add the preview in the list of preview modes, click + near the dimension fields. You can see the following dialog:

New custom preview device

Type a name, for example, Galaxy S8, and the custom preview device now becomes a part of the list of preview devices.

To delete a custom preview device, select the device, and click - near the dimension fields.

<?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>

Add or delete a custom preview using the name, width, and height attributes.

Restart Captivate and you can see that the changes reflect in the Preview in drop-down list.

Preview drop-down list

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 Responsive project, see View-specific properties.

You can view the Align panel by clicking Window > Align.

After launching Adobe Captivate, click the first thumbnail on the home screen, Responsive Project and click Create.

Alternatively, you can choose File > New Project > Responsive Project.

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.

You can choose the Preset Theme Colors or customize Theme Colors to make your own color schemes.

From the Toolbar, click Themes > Theme Colors

Choose any one of the Preset Theme Colors from Select Theme Color drop-down and clickCustomize. Customize Theme Colors window appears as shown below:

Choose the component for which you want to change the colors.
You can change the colors of each component of slide such as Title, Skin, Sub Title, Slide BG.

You can pick the color with the help of Shades, or Swatches, Color Picker, or Eyedropper tools.

Click the title of the Preset Theme and use your own title name.

Click Save.
Now, you can see your customized Theme color displayed in the drop-down list.

You can use Settings wheel icon, to Manage the theme colors: Delete, rename.

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.

Setting device height

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 where the device height is 500, you can adjust the viewport height by moving vertical device height slider until you reach 500. By default, the device height is linked with Slide Height. You can de-link it by clicking the link icon next to Slide Height value in the Property Inspector.

In this case, all the content inside viewport height is visible in mobile device, by default. So, this provision enables you to develop content accurately in the layout to match the device height.

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 center of the slide in all breakpoints of responsive projects. Horizontal and vertical center alignment options are introduced in Captivate 9.

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.

Insert any shape or object in the primary breakpoint slide.

Select it and view the Position panel in the Property Inspector. Click Advanced.

Click Advanced.

Vertical and horizontal image alignment options

You can see the horizontal and vertical center alignment options as shown in the snapshot.

Alignment options

You can choose horizontal and vertical center alignment options by right-clicking on the object and selecting Align as shown here.

Alternatively, you can use the icons from the window align panel as shown here.

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.

From an expert: Responsive drag-and-drop-interaction

Allen Partridge

To learn more about Captivate and how you can create engaging learning content, download the following projects:

Note legali | Informativa sulla privacy online

Responsive Project Design with Adobe Captivate