May 10, 2017
Using Optional with Fluid Boxes in Captivate 2017 to customize content across devices
Comments
(5)
May 10, 2017
Using Optional with Fluid Boxes in Captivate 2017 to customize content across devices
Staff 3 posts
Followers: 0 people
(5)

To follow along with this article, download the project from here: Customize_Content_Using_Optional and then continue.

What is Optional?

Optional is an option only available for Fluid boxes, and objects added to Fluid boxes. Marking an object optional means that if you view your project on a smaller screen, that object may be omitted from the output to properly fit in everything else. Hence, when there is not enough space on the screen, an optional object, or an optional Fluid box, will not appear on that device.

Optional works when your Wrap property is set to “Squeeze in a row/Squeeze in a column”. It does not apply to other Wrap types. Optional objects or containers will disappear on reaching the wrap point for that project. For example, if your project width is 1024 px, and wrap point is set to 80%, then at devices with a width of around 819px or lesser, optional objects will not be seen, and the rest of the content adjusts itself in its absence.

Let us explore the usage of Optional with some examples.

How to use Optional

Below is an example of a slide which has some content in the middle, and two characters on either side. Our objective is: when the screen size is small e.g. on a Mobile device, we choose not to display the two characters, and instead only the content in the middle.

  1. Insert three Fluid boxes to your slide using the Fluid Box dropdown.

Insert Fluid boxes

  1. After inserting, you will see some blue resize handles for the Fluid boxes. Resize your Fluid boxes accordingly.
  2. Select the fluid boxes on the edges (first and third) and insert some images e.g. Characters. Go to Media > Characters and select any character of choice.
  1. Your slide will now look something like this:

2

  1. Select the fluid boxes in which the characters are placed (you can do this by selecting each character and hovering over the edge of its container. Once the container is highlighted, click to select it), one by one, and mark them as Optional:

3

  1. Now select the Parent Fluid box (in which everything is contained) and go to the Properties Panel and set Wrap Type to “Squeeze in a Row” (Optional works only with Squeeze in a Row OR Squeeze in a Column)

4

  1. Put some content in the middle Fluid box now, which you want to be displayed in any device. E.g. Add one text caption and three smart shape buttons to create a Menu-like slide. You can format the shapes and text as you like.
  1. Now select a device from the dropdown to see how your slide looks on different devices. E.g.

5

  1. Your default view is Desktop. Select other devices, such as iPhone 7 Plus.

6

  1. You can make both entire Fluid boxes, as well as individual objects as Optional. In this project, Slide 1, the Fluid boxes on the left and right are Optional. This means, when there is no more space in a lower view, the fluid boxes will not be visible. This will be applied to anything within these Fluid boxes.

Similarly, on Slide 2, in the attached project, objects(Image_5) are marked as Optional.

To try this out, download the CPTX from here: Customize_Content_Using_Optional and open it in Captivate 2017.

Happy authoring!

5 Comments
2019-01-15 11:14:58
2019-01-15 11:14:58

Where are the screen-shots??. Otherwise explanation is quite clear and good.

Like
()
2018-10-13 14:06:32
2018-10-13 14:06:32

What about avatars? Can I place an avatar on top of several fluid boxes independently? Or do I have to squeeze them into a fluid box (which wouldn’t make sense)?? Thanks

Like
()
2018-05-24 20:02:39
2018-05-24 20:02:39

I don’t see any of the examples it looks like a broken link

Like
()
2017-05-11 17:28:42
2017-05-11 17:28:42

Hi Mohana,

Thanks for this. You just answered a big question I had! Very timely.

Cheers,
Steve

Like
()
(1)
>
Stephen O Hearn
's comment
2017-05-12 06:33:13
2017-05-12 06:33:13
>
Stephen O Hearn
's comment

Thanks Stephen 🙂 No problem

Like
()
Add Comment