June 20, 2017
Building responsive simulations with Adobe Captivate 2017
Comments
(5)
June 20, 2017
Building responsive simulations with Adobe Captivate 2017
Pooja works as a Senior Director of Digital Learning at Icertis. She has created several award-winning eLearning courses and authored books and video courses on eLearning tools and technologies. In her previous roles, she worked as a principal eLearning evangelist at Adobe and chief learning geek at a start-up. Pooja is CPTD, and COTP certified. She holds a master’s degree in education & economics and a doctorate in educational technology.
Legend 227 posts
Followers: 24 people
(5)

Adobe Captivate 2017 comes with an exciting new workflow to aid in the creation of responsive eLearning courses: Fluid Boxes. Instead of designing multiple slides for different screen sizes (known as breakpoints), you work on a single slide. Fluid Boxes, containers that you insert on the stage and then populate with content, improve the responsive development time significantly.

Let’s take a look at the steps to record a responsive simulation with Captivate 2017:

To begin, start Captivate 2017 and double-click the Responsive Project thumbnail on the New tab of the Home screen.

1_Captivate 2017 Welcome Screen
A new, responsive project is created. Unlike Captivate 8 and 9 responsive projects, there are no breakpoints. Instead, you will see the Preview-in drop down list and the Preview Slider, to view how the content will be displayed on different device sizes, right inside the Captivate edit area.
2_Responsive Preview Options

Notice that the default maximum width and height of responsive projects in Captivate 2017 is set to 1024 x 627. You can increase or decrease it by rescaling the project.

To rescale the project, click Modify > Rescale Project.

In the Rescale Project dialog, enter the new width and height in pixels or percentage, and click Finish.

3_Rescale Project

Now let’s record the simulation. Go to the Toolbar and click Slides > Software Simulation (Click OK to confirm addition of slides after the selected slide.)

Select the window you wish to record, click the Record button, and then record the simulation (press the End key on your keyboard to finish recording).

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 will disappear 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.

4_Blue Rectangle

You can reposition this blue rectangle to any other location and you’ll want to ensure that the rectangle covers the click area in the simulation.

To preview the slide in different device sizes, select the device options from the Preview-in drop-down menu. Notice that the visible area is always surrounding the blue rectangle and the rest of the area is greyed out.

5_Preview In Devices

To preview the entire project, choose Preview > Project. You can move the slider to check the responsiveness of your simulation.

When you publish and deploy the responsive simulation course to an LMS or web server and view it on a mobile phone or tablet, you will be able to pan to the areas which are not shown in the simulation. And as a result of this special panning functionality in responsive simulations, the default Swipe Right, Left, Up, or Down gestures are disabled for all the responsive simulation slides.

Want to learn more about the new features and enhancements in Adobe Captivate 2017? Check out my Captivate 2017: First look course on Lynda.com and LinkedIn Learning.

This post was first published in IconLogic blog.

5 Comments
2021-12-08 06:03:36
2021-12-08 06:03:36

how does this compare to captivate 19?

Like
2018-09-27 14:21:18
2018-09-27 14:21:18

This is awesome!

Like
(3)
2017-10-19 17:26:27
2017-10-19 17:26:27

Always love your work Pooja, looking forward to seeing you again and attending your certification workshop on Monday!

Like
(3)
2017-10-19 17:25:34
2017-10-19 17:25:34

Always love your work Pooja, looking forward to seeing you again attending your certification workshop on Monday!

Like
(3)
2017-06-22 08:00:55
2017-06-22 08:00:55

A great feature of Adobe responsive page, thanks for sharing a nice post.

Like
(3)
Add Comment