In this article, I will be discussing some facts you need to know for getting started on working with fluid boxes. This will basically involve giving an overview on what are fluid boxes, how to use them, insertion and selection of fluid boxes.

So, let us get started!

What is a Fluid box?

As part of Adobe Captivate 2017 release, Fluid boxes are the containers which layout your content intelligently as per the defined settings. They are adaptive across various devices and screen sizes, to provide great learning experience while maintaining the integrity of your content.

With Fluid boxes, come their properties like Flow direction, Wrapping, Stretching, Alignment, Padding, Optional and Static which we will discuss in detail across this article.

 

How to use Fluid boxes?

One of the most important things to keep in mind while working with fluid boxes is to have a layout design ready for your content before you start placing the actual course content on your slide. This step is a critical one, as it serves to provide a strong base foundation for building your responsive project.

For example: To create a slide as shown below:

You must have already prepared a layout, something like this:

 

How to insert Fluid boxes?

You can insert Fluid boxes using the Fluid box option  present in Captivate tool bar.

Upon clicking Fluid Box button, you will see two options:

Horizontal and Vertical are the flow direction for your fluid boxes which are inserted as children within your Root Fluid box (I will be referring to the Root fluid box as the main Fluid box on the slides within which all other fluid boxes or objects will be contained). Remember, every time you chose to insert multiple fluid boxes, they get inserted as children within a Root Fluid box.

For example, if you chose to insert two horizontal fluid boxes , they get inserted on a slide like below:

After you insert fluid boxes, always the Root fluid box is selected on the slide and it is highlighted with the dark blue boundary.

The blue handle which is common between the boundary of inserted fluid boxes  is used for resizing the fluid boxes. This will only appear if the parent fluid box of child fluid boxes is selected (In this case it is Root Fluid box by default).

Also, if you notice the Properties panel, a Fluid box selector panel appears which shows the fluid boxes currently inserted on a slide in a hierarchal fashion. Blue color highlight in the Fluid box selector panel shown the fluid box which is currently selected on the slide.

 

How to select a Fluid Box?

There are 3 basic ways of selecting a fluid box. One of the basic thing to remember is that when a fluid box is selected on a slide, it is always marked with a dark blue boundary (as shown below).

In above figure, child fluid box 2 is selected on the slide, highlighted in dark blue boundary. Label on top of selected fluid box (in this case FB_19) is the name of the fluid box. Arrows on the label represent the flow of selected Fluid box.

 

Ways to select a fluid box:

1. Click on the empty area within the fluid box
2. Use the Fluid box selector panel
3. This approach comes handy if a Fluid box contains other fluid boxes or objects within it and it is hard to find the empty area within the fluid box to click.

 

For example, in a case like below, when there are three text captions filling out the entire area of child fluid box 2, how do you select the fluid box:

It is simple. Select any object within the fluid box (In this case I will be selecting the grey text caption). Move your mouse pointer on the boundary of the selected object, which is overlapping with the Fluid box. Fluid box will get highlight in light bluish green color (as shown below). All you must do is click on this highlighted boundary and Fluid box will get selected. Remember, you must click for fluid box to get selected

 

Same approach needs to be followed if a fluid box containing child fluid boxes need to be selected. First select any of the child fluid boxes of the fluid box you want to select and then move the mouse pointer to overlapping boundary and then click on the highlighted light bluish green boundary.

Points to be noted-

• Fluid box which is currently selected is always represented by a solid dark blue boundary.
• Fluid box which is currently not selected and is serving as a parent for fluid boxes or objects within it, is always represented by a light bluish green boundary upon hovering over its boundary.

Check out the Knowledge Fact – 2

Have you started using Fluid Boxes, please share your experience & any questions you have around this new feature…