Create a single horizontal layout. This layout becomes a parent Fluid Box.
- Captivate Classic User Guide
- Introduction to Captivate
- Captivate Classic Release Notes
- Create Projects
- Create different types of projects in Adobe Captivate
- Customize the size of an Adobe Captivate project
- Responsive Project Design with Adobe Captivate
- Create Virtual Reality (VR) projects
- Work with responsive text in Adobe Captivate
- Work with themes in Adobe Captivate
- How to apply view specific properties in responsive projects
- How to create backup files for Adobe Captivate projects
- Asset panel
- Create branching and forced navigation in Captivate
- Replace image on the stage
- Add and Manage Objects
- Work with multi-state objects in Adobe Captivate
- Object effects
- Insert web objects in Adobe Captivate projects
- Work with object styles in Adobe Captivate
- How to rotate objects in Adobe Captivate
- How to manage objects with the Main Options toolbar
- How to merge objects in a slide
- How to manage objects in the library
- How to group objects in Adobe Captivate
- Edit object information using the Advanced Interaction panel
- How to copy, paste, and duplicate objects in Adobe Captivate
- Control the visibility of objects
- How to change the display order of objects in Adobe Captivate
- Apply shadows to objects
- How to align objects in Adobe Captivate
- How to add reflection to objects in Adobe Captivate
- Import assets into a Captivate project
- Slides
- Add slides to an Adobe Captivate project
- Editing slides in an Adobe Captivate project
- Delete Adobe Captivate project slides
- Change slide order in Adobe Captivate
- Set slide properties in Adobe Captivate
- Add and convert slide notes to audio files with Adobe Captivate
- Set up knowledge check slides in Adobe Captivate
- How to add slide transitions in Adobe Captivate
- How to work with master slides in Adobe Captivate
- How to lock Adobe Captivate slides
- How to hide or exclude slides in an Adobe Captivate project
- How to group and ungroup slides in Adobe Captivate
- Timeline and grids
- Create Quizzes
- Insert question slides in Adobe Captivate projects
- Set quiz preferences for Adobe Captivate
- How to enable learners to submit all quiz responses simultaneously
- How to set up question slides with Adobe Captivate
- Using random question slides in Adobe Captivate
- How to allow users to return to quiz
- Import questions from CSV format files
- Import questions from GIFT format files
- How to insert pretests in Adobe Captivate
- Audio
- Video
- Interactive Objects
- Interactions
- Non-interactive objects
- Create and edit smart shapes
- Edit and create text captions with Captivate
- How to use images and rollover images with Captivate
- How to customize smart shapes in Adobe Captivate
- How to create zoom areas in Adobe Captivate
- How to set audio for noninteractive objects
- How to create rollover slidelets in Adobe Captivate
- How to create rollover captions in Adobe Captivate
- Change mouse properties in Adobe Captivate
- Use highlight boxes in Captivate
- Work with swatches in Adobe Captivate
- Fix size and position of non-interactive objects
- Add animations to a Adobe Captivate project
- Advanced Editing and Project Reviews
- Variables and Advanced Actions
- Record Projects
- Publish Projects
- Preview and publish responsive projects
- Publish project to Adobe Captivate Prime
- Publish projects as HTML5 files with Adobe Captivate
- Publish projects as executable files
- Publish projects as MP4 files with Adobe Captivate
- Set publishing preferences in Adobe Captivate
- Using web fonts from Adobe Fonts in Adobe Captivate
- Report quiz results to an internal server
- Use Adobe Captivate with Other Applications
- Import and edit PowerPoint presentations in Captivate
- Upload an Adobe Captivate project to a Learning Management System
- Learn about the Common JavaScript interface for Adobe Captivate
- How to publish Captivate projects to Microsoft Word
- Using Adobe Connect with Captivate
- How to add Captivate projects to a RoboHelp online help system
- How to package multiple SCOs using the Adobe Multi-SCORM Packager
- Troubleshoot Adobe Captivate
- Resolve known issues and limitations in the latest versions of Adobe Captivate, Adobe FrameMaker, and Adobe RoboHelp.
- Early build for Captivate (2019 release) on macOS Big Sur (macOS 11)
- Hotfix for VR content not playing on devices
- Configure SSL for Live Preview on Devices
- Captivate (2019 release) activation issues on macOS Catalina
- Captivate responsive courses will not auto-play on browsers
- Issues with Asset panel in Adobe Captivate (2019 release)
- Error 103 while installing Adobe Captivate
- Issues when previewing a Captivate project
- Resolve known issues and limitations in the latest versions of Adobe Captivate, Adobe FrameMaker, and Adobe RoboHelp.
Responsive Project Design
Designing a responsive project using Adobe Captivate Classic 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 Classic 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.
Fluid Boxes in Adobe Captivate Classic
What is a Fluid Box
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.
Using Fluid Box in Captivate Classic
In Captivate Classic, 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
Horizontal 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.
-
-
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.
-
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,
-
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.
-
Horizontal: Choose the horizontal alignment options of the objects along the main axis. The options are:
-
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.
In the Property Inspector panel, choose the flow of objects and the type of object wrap.
Choose the horizontal alignment of the objects – Center, Left, or Right.
Choose the vertical alignment of the objects.
Top Align
Middle Align
Bottom Align
Space in Between
Space Around
Creating a Fluid Box project with multiple containers
-
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:
-
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.
As you highlight a Fluid Box on the stage, the appropriate Fluid Box in the hierarchy above gets highlighted as well, so that you know which Fluid Box you are working with.
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:
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.
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.
Modify the width of a Fluid Box
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.
In the Position panel, if you enter a value that is more than the maximum allowed value, the value resets to the original value.
Automatic Device Preview
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.
Enabling wrap point for Fluid Boxes
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 check-box and click OK. Restart Captivate Classic.
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.
Responsive capture
Responsive playbar
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 Classic 8 x64\en_US\Gallery\Playbars\HTML\cpPlaybarMobileStep text
Uwaga: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]
Uwaga: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 Classic and the playbar is updated.
Responsive capture (Responsive simulation)
Create a single screen capture that can be used across multiple screens and devices. Adobe Captivate Classic allows you to choose the portion of the screen capture you want to display on smaller screens.
-
Open a Captivate Classic 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.
Uwaga: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 Classic captures screenshots automatically and places them on separate slides. Automatic recording is the most commonly used recording method in Adobe Captivate Classic.
-
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.
Converting a blank project into a responsive project
-
Create a blank project with some objects, as shown below.
-
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:
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.
-
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:
-
Move the objects, place them as you like, and then preview or publish your responsive project.
Creating custom preview device
In any responsive project, Captivate Classic 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 Classic as an Administrator.
Then type the required dimensions, as shown below:
-
To add the preview in the list of preview modes, click + near the dimension fields. You can see the following dialog:
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 Classic and you can see that the changes reflect in the Preview in drop-down list.
Breakpoints in Responsive project
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 Classic 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.
Creating a Responsive Project
-
After launching Adobe Captivate Classic, 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.
Adaptive design (Smart positioning)
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.
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 Classic 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.
Customize Theme colors
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.
Device height
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.
Slide Height
Adobe Captivate Classic 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.
Unlink the slide height from the device height to modify it.
Customizing Slide Height
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 Classic 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.
Align objects
Now, you can align any object at center of the slide in all breakpoints of responsive projects using Captivate Classic'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.
You can see the horizontal and vertical center alignment options as shown in the snapshot.
-
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.
Uwaga: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.
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.
Set Default Caption Colors
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.
Capture support for interactions
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.
Drag and drop interaction
Adobe Captivate Classic 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
Download sample projects
To learn more about Captivate Classic and how you can create engaging learning content, download the following projects: