I have something exciting for the Captivate course authors to try and trust me when you tell your learners they need not switch on their laptops or PC’s to access their course, they will surely be overwhelmed. Yes, following some generic guidelines you can re-design and upgrade your old Captivate blank projects to a responsive one and this time without breakpoints (Captivate 8 and 9 users will be familiar with this term) and if you are a new Captivate user you can always go and explore the scope and power of the new Fluid Boxes concept.

First thing that you need to do is open your old Captivate 8 or 9 Projects in Captivate 10 and perform a Save As Responsive operation. (you can exercise this on attached sample1)

 As you click on Save as Responsive you will be prompted with a dialog listing out the unsupported items in your projects. These objects are basically the ones which are not supported in general for an HTML5 output. For more details, you can visit the following link, https://helpx.adobe.com/captivate/using/publish-projects-html5-files.html

Once you see the dialog you can click on show unsupported items (if any) and consider replacing them after you save it as responsive and an upgrade operation is performed.

Now you project shall open in the responsive UI where you shall be able to see the responsive width slider. This marks the stage where you can start working with the Fluid Boxes in your project. You can go about adding these fluid boxes manually or even with the help of the Suggest Fluid Box Button.

SUGGEST FLUID BOX

Before reading this part, make sure you have a fair idea of the the fluid Box and their properties.

You can refer to the following articles by Zeeshan:

What Suggest Fluid Box does?

Suggest Fluid Box is an algorithm which tries to detect the distribution and layout of the objects on the slide and tries to fittingly place them inside these fluid boxes setting the most appropriate properties for flow, wrap, horizontal and vertical alignment. Apart from this, it intelligently sets the alignment and margin of text captions and has considerations whether to Maintain Aspect Ratio for an object or not. (say for an image it always checks the checkbox for maintaining the Aspect Ratio)

Assuming you are aware of the 2-Dimensional design paradigm with fluid boxes (that is, you cannot have overlapping items inside the fluid boxes), you may consider the following useful tips before you hit the suggest fluid box button.

You can try these along in the attached samples, which have been divided in 3 parts:

1)original blank project (sample1)

2)post suggest (sample2)

3)final project after modifcations(sample3)

•   Checking for the overlap of items

This consideration comes in handy before suggestion, as suggestion tries to put even the slightly overlapping items in a Static Fluid Box ( I shall write an additional article of where and how to use them), for now you can consider to ignore them as they may not make your project visually appealing on the first go unless you have a fair idea of where and how to use them. To check for the overlap, you can simply select all (CTRL+A) items and check for the overlapping boundaries. Consider, resizing or re-positioning such objects so that Suggest can produce best results for you. ( now you may be able to link to the fact I told you about 2-Dimensional design paradigm and how the algorithm goes about determining the Fluid Box layout).

Consider re-positioning or resizing  the objects to avoid overlapping as in the demarcated regions. End Result be something like this:

Now what about time, date and location, where I actually need the background smartshapes to Overlap?

Can you recall reading something about fluid boxes and fill?

• Deleting background(highlighting) smartshapes and achieving this using fill

I have separated out three objects from the overlap. Consider deleting part 1.Now if you wonder where do I get to apply fill, you shall be able to do so once you have Fluid Boxes in your project post suggest.(remember to come to this part after suggestion) for now delete part 1.Make sure you delete the same smartshape for  DATE and LOCATION as well.

Just before suggestion your slide should look something like this:

 

Hit the suggest button and you shall see Fluid box Grid applied to your slide. Now your slide should look exactly as in the slide of sample2.

If you see something weird on the slide perform an undo(CTRL+Z) operation and check if you missed any of the above steps and verify overlapping (CTRL+A).Perform Suggest Fluid Box again.

PS: Do not confuse Remove Fluid Box operation and undo. Both are different operations and have different use.

At this point, your further course of action depends on the satisfaction of your results. The next phase is concerned more with the visual enhancement of your course which revolves around setting Fluid Box properties along with previewing the project moving the responsive slider, which I shall cover in part 2 of this blog.