Intro

If you do follow me since a while, you are aware of the fact that I am a big fan of the Rulers and Guides which appeared with version 9.0.1. They have a lot in common with the same feature in other Adobe applications (Illustrator, Photoshop to mention two). Shortly after the release I wrote an article about possible use cases in normal (blank projects): Guides Rule!

Using Fluid Boxes as alternative for Breakpoint views is an added feature with CP2017, about which you'll find a lot of articles, webinars and videos.  I am always stumped because none of them ever shows the use of Rulers nor Guides. This article will try to convince you that Guides are even more important for Fluid Boxes design than for normal projects.

Fluid Boxes and Themes

There are some limitations when using Fluid Boxes. Some objects cannot be used: zoom object, highlight box, click box (if placed over another object), line shape and some possibilities for multistates. You cannot use groups neither. Most of those limitations are linked with the 2-dimensionality of Fluid Boxes. Static Fluid boxes are a workaround, but you'll lose a lot of 'fluiditiy4. I will talk about my personal workarounds for those limitations in a later post.

Less known are the limitations for Themes. I start every project, even a small one, by customizing an existing theme or creating a theme (based on the Blank theme). Such a custom theme will save a lot of time later on, if small design changes have to be done. THe components of a Theme are described in more details here.

Object Styles

Fluid Boxes workflow will save you time when setting up object styles for Text containers: captions and shapes. You don't need to set up the font size for different screen resolutions, as is necessary for Breakpoint views. Text will rescale automatically when the screen resolution changes. Maybe you'll have to decrease the minimum font size which is set to 14p (for Breakpoint Views it used to be 10p, still readable on smartphones). 

Master Slides

All the included themes in Captivate have Fluid Boxes on the master slides (the 'virgin' Blank theme has them only on the quiz/score masters) . Two exceptions: you  will not find Fluid Boxes on the main master slide, nor on the Blank master slide. You'll see a lot of informational stuff where every presenter starts always with a slide based on the Blank master slide because it is also 'virgin'. Be careful when editing the Blank master slide, because it is needed for PPT-import and software simulation slides, edit only a duplicate).

I found it clarifying to explore the Fluid Boxes on the master slides of the included themes. Result of that exploration were two blog posts :

• Fluid Quiz Slides: describes the setup of Fluid Boxes for the Quiz slides; interesting is the use of the static Fluid Box for feedback messages. The Blank theme has the same setup as the other themes.
• Fluid Boxes and Master Slides: explores the content master slides in the themes, and how to use them. 

During the research for this post I discovered that it is not possible to insert Fluid Boxes on the Main Master Slide. I am used to have some information on that Main Master slide, which I want to show on all slides. Here is an example of the bottom part of the Main Master slide:

That is not possible within a Fluid Box. I tried to set up the Position Properties (which are available) but often weird positioning showed up when published. It is not possible to have different font sizes: either you let everything rescale proportionally and get very small text on phones, or you have to keep the size in px which will maintain the objects and font size fixed. Not really a workable solution.

Alternative for objects which you want on all slides, is to put them on the first slide and time for the Rest of the Project. However you cannot time objects for the rest of the project when using Fluid Boxes, not a workaround in this case.

My solution: insert the objects on each master slide you'll need in the project in Fluid Boxes. That is where Guides are indispensable to me.

Fluid Boxes and Guides

Turn on the Rulers under the View menu and you'll see that they are in percentage, not in pixels as for normal projects? 

For all to be used master slides, I want a setup, with a Fluid Box at the bottom to accomodate the text and button(s) as shown above. That FB should have a height of 10%. That FB will be divided in two: 70% width to the left (text), 30% to the right (buttons). To achieve that, create two Guides

1. Horizontal Guide at 10% from the bottom by double-clicking on the 90% mark of the vertical ruler
2. Vertical Guide at 70% by double-clicking on the 70% mark of the horizotal ruler
3. Lock the Guides (View, Lock Guides)
4. Turn on "Snap to Guide" in View menu

The guides will be visible as well in Master Slide as in Filmstrip view. You can change guide color in the Preferences, Be sure to change the Guide% color.

Switch to the Master slide panel. You'll get the step-by-step work flow to add a 10% Fluid Box at the bottom of two master slides (Title and Custom master slide), and have two child fluid boxes in that first FB.

Edit Title Master Slide

All included themes (also the OldPaper theme I use in this example) have one Fluid Box on the Title master slide, filled with one Title Placeholder. It is not possible to add a Fluid Box, the button Fluid Box on the Big Button Bar is dimmed. To solve this and be able to recover the placeholder:

1. select the placeholder
2. check the option 'Unlock from Fluid Box' on its Properties panel
3. drag the placeholder off the stage in the scratch area
4. uncheck the option 'Unlock from Fluid Box', later on we'll drag it back on the master slide

Select the parent fluid box (drag a rectangle half off the stage). You can now insert two vertical Fluid boxes. You will have to change the setup of the Parent Fluid box. The wrap option 'Squeeze in a column' is fine as are the alignments, but in order to use all available space you need to activate the options Stretch to fit, both Horizontally and Vertically.

Use the horizontal guide to change the height of the bottom Fluid box. This Fluid box needs these settings:

• Flow: Horizontal
• Wrap: Squeeze in a Row (to have text and buttons alwas next to each other), 
• Horizontal: Space Around (eventually define some padding) and Stretch to fit
• Vertical: Middle Align and Stretch to fit

The top fluid box: I choose vertical Flow, kept all the other default settings.

You can now insert two horizontal Fluid Boxes and change their width using the vertical guide, Flow horizontal for both.

The left Fluid box needs to have Left Align horizontally and the right one Right Align. I choose a horizontal padding for both and a vertical for the right Fluid Box. You can now insert the text (doesn't have to maintain the aspect ratio) and the Next Shape button.

I dragged the Title Placeholder back on the slide and created this Title slide from the edite Title slide:

Custom Master Slide

If none of the content master slides fits your purpose, you can start from a duplicate of the Blank Master slide. Insert two vertical Fluid Boxes. Although that master slide doesn't have a starting Parent Fluid box, it will be automatically created when you insert fluid boxes. The work flow to set up the bottom fluid boxes is pretty much the same as for the main master slide. You can now add a Back button as well. If you want more fluid boxes, go ahead. Here is a example of a custom master slide, which you could try to reproduce: And get a (Belgian) beer after success.

Conclusion

Now it should be clear why I love the Rulers and Guides for designing any project, but especially when using Fluid Boxes workflow. The Guides which you set up are saved with the project, you can hide them from the View menu and they'll always be ready to help you out when necessary :)

Intro

Did you hear me yelling 'Finally' when the last patch for Captivate was released to version 9.0.1.320? We have now Rulers in Captivate and real (Adobe) guides. I am using that name because they are quite different from the existing Smart Guides which are useful when aligning objects. Moreover the implementation of the Rulers and Guides is really very nice,  Kudos to the Captivate engineers!  Just one example: in responsive projects you can choose to have rulers in Percentages instead of pixels, which is the most logical choice! In this article I want to explain you the reasons for my joy, showing you how I use Rulers and Guides.

Grid

Maybe you don't remember that old grid, which is still present in Captivate 9. It consisted of tiny points, with a default distance of 16 px. You cannot change color of those points (black), which makes that grid useless on dark backgrounds. You can change the default distance between points from 16px to another value, but always the same horizontally and vertically. Personally I remember that distance mostly because it will define how much an object will move or resize when you use CTRL in combination with arrows as shortcut keys (see my old blog post: Shortcut keys for moving/resizing objects). Since many years I didn't use the feature for what it was meant to be used: as a 'grid'. If you just now discover its exitence: turn on the 'old' grid, using View, Show Grid.There is a snapping linked to it as well, which you can turn on/off.

A grid can be very useful in some circumstances!  With the new Guides you have now a powerful alternative: create a custom grid, with lines instead of points, maybe with different distances in horizontal/vertical direction, and use a custom color that stands out from the background. It can be especially useful for responsive projects because percentages instead of pixels  I recommend to lock the guides after creation of the grid. Your grid will be saved with the file, you can show/hide the grid whenever you want.

Here is an example of such a grid, created with the option Multiple Rulers in a blank, normal project:

For a responsive project, I would mostly limit the grid to vertical guides, because it is the width that is most important for the design of such a project. Here is a screenshot for a responsive project, with guides in increments of 10%, extra guides at the left and right side at 45% (margins). Only one horizontal guide at 50%. I dragged out an extra guide to 10% for the title.

Theme/Template design

Motion Paths

If you ever created custom motion paths, which has become much more interesting in Captivate 9 where we have three types of custom motion paths, you know how difficult it is to adjust start and end points to a specific location. I remember the example that I created for this blog post:

Reset Effects

All the cards followed a custom motion paths but had to end up in a stack. My work flow was bit cumbersome:

• create a "cross hair" using a horizontal and a vertical line object in a group
• position that group on the exact location, using the X coordinate of the vertical line and the Y coordinate of the horizontal line
• adding a motion path (no curved, I used the zigzag motion path) to each card, and drag the end point carefully over the crosshair
• saving that motion path as a custom path
• applying it in the necessary advanced action

Now I can use a horizontal and a vertical guide, which I can exactly position without using the Options tab with coordinates. Just double-click on the ruler on the exact coordinate that you want.

Watch this screenshot: the thee shapes move each along their individual motion path, but they end at the same location (and paths cross at another location). 

Custom shapes

SVG are a big new feature, but they don't have (yet) the flexibility of shapes which can be used as text container, as button and filled with a texture, and image, a gradient all on the fly. Although Captivate is not meant to have all the editing features of a vector graphics application like Illustrator, you can create pretty nice custom shapes. Any included shape can be converted to a freeform shape, you just have to edit the points and tangent points. 

How can guides help with this process? Have a look at this screenshot. The creation of this symmetrical shield (or highway sign) was lot easier with the help of the rulers when editing the points and tangent points.: