Getting Started with Responsive eLearning using Fluid Boxes in Adobe Captivate (2017 release)

Adobe Captivate (2017 release) packs more punch when compared to its predecessors. In this webinar, you will learn about Fluid Boxes, a feature introduced in Captivate. The new workflow using Fluid Boxes allows you to create responsive projects more easily and works just right when the content is viewed across devices.

All you need are to add Fluid Boxes to the slide, and pick from the simple properties to flow, wrap, and align objects as per your requirement. You can also convert these fluid boxes to static fluid boxes to lock the position of the objects on the screen. Also, if you have any decorative assets in the course, you can mark them as optional, and they will magically disappear in the smaller devices.

Follow the steps as they are shown in the webinar, and see a breathtakingly, refreshing result!

Get Premium Adobe Captivate 2017 Course from Skillshare for FREE!

I’ve added my premium video tutorial to Skillshare.com. Here is a way you can view the full 1 hour and 20 minute course for FREE.

  1. Click the following link http://skl.sh/2iY3hiU
  2. Once you’ve watched the Introduction, click on the Start Your Free Month Today button.
  3. Select the 30-day free trial option
  4. Select your sign in options and payment information
  5. Watch the course.

Of course, if you don’t intend to continue with your Skillshare.com account be sure to cancel before the promo period ends.

Tough Choice: Breakpoints or Fluid Boxes?

Intro

Captivate 2017 added a new workflow for developing responsive projects: Fluid Boxes. It doesn’t mean that the existing workflows to make projects accessible with all devices are no longer important. In this post I will try to talk about my present view on the different develoment methods. It is perfectly  possible that not everyone will agree with my point of view and I would welcome all discussions. At the same time I believe that the current work flow for those Fluid Boxes will be optimized in the future by the team as well, which will probably lead to editing this text. It is valid today, November 2017, about half a year after the launch of the Fluid Boxes method. More than ever, this post is valid today, November 2017 and will certainly change in the future.
future.

Overview Workflows

If you want to publish a project to be accessible from any device, you have to ignore the still available Captivate SWF output! Only HTML5 output can be used. For such a course development  Captivate offers 3 workflows:
  1. Scalable Projects: you can publish a blank (normal) project to HTML5 with the option ‘Scalable HTML Content’ activated.
    This will not result in a real ‘responsive’ project, because the layout will be the same on all screens. Another word sometimes used for this type of project is ‘adaptive’.

    Advantage of this workflow is that the development time will not increase compared with a project that is meant only for desktop/laptop. It can be a good choice for courses that will rarely be viewed on smartphones, and you don’t mind to have only landscape mode. I just wanted to mention this easy workflow, but the rest of this post has its focus on the two other workflows.

  2. Responsive Project with Fluid Boxes which is the work flow introduced with CP2017. I see the result as a solution between the Scalable HTML projects (same layout on all screens) and a  esponsive project developed with Breakpoint views. Such a full responsive project can  have different layouts for diferent screen sizes corresponding with the Breakpoints. When using Fluid boxes the layout will be rearranged by the application depending on the screen size and the settings.  Some items can be left out for small screens but you will not have full control over the design for each size. Moreover there are some limitations which I will explain later on (with possible workarounds and tips). Developing time for this type of project will be in between time needed for scalable project and for a  Breakpoint Views project. Fluid boxes have a great way to make font size changing in a ‘fluid’ way.
  3. Responsive Project with Breakpoint Views is available since version 8. It is no longer the default approachn when starting a responsive project.  You have to switch to this workflow from the Project menu.

    This workflow allows fully responsive projects: you have control over the design for a maximum of 5 resolutions. You can not only leave out items, but also replace them by other items, like replacing an animation or video by a static image or even an icon to cope with smaller screens. Control over the design means control over size and position of each item in each breakpoint. You have to know that developing time for such a fully responsive project will be much larger tahn for the first two workflows.

Example Movies

I published two responsive projects, one developed with Fluid Boxes and another with Breakpoint views. They have the same content, but show limitations and workarounds for the Fluid Boxes, compared with the Breakpoint views development.
Both projects have 4 slides:
  • Title: not all  images which in the Breakpoint example could be used on the Fluid Boxes version because you cannot stack items. I could have combined the images in a graphical application to have one image for Fluid Boxes, but the different effects and timing didn’t have a workaround.
    The images used for the mobile screen (Breakpoint) are different and smaller than for the other breakpoints. Not so for the Fluid Boxes example.
  • Buddies: similar: the ruler cannot be used for Fluid Boxes, at least not when stacked with other images.
  • Content: different items can be clicked to show more information. For the Breakpoint version that information is stacked and Hide/Show is used. Text and images are combined in a group. For the Fluid Boxes I used the workaround by creating one object with different states. Grouping is not possible here.
  • Comparison: maybe less apparent, but I used an effect on a group (image + shape with text) for the Breakpoint view version, since grouping is not possible for Fluid Boxes I had to use separate effect on the items.
Responsive projects cannot be embedded, use these links with any device please:

Breakpoint Views

Difference between Theme Breakpoints and Fluid Boxes

As described in this article, setting up a theme means the creation of a Theme Colors Palette, Object Styles, Master Slides, Skin and eventually Recording defaults. The main differences between Breakpoint Views and Fluid Boxes are in the Object Styles for Text containers and in the Master slides:

Object Styles

Design of Breakpoint Views for text, when decreasing the width of the screen, will keep the font size fixed until the width of the next Breakpoint is reached. That means that for any text container, caption or shape, and for button labels, you need to define a font size for each used Breakpoint. That can be a tedious process, because you have to test it out for all possible screen resolutions. A lot of text styles are needed, both for Standard and for Quizzing Objects.  To improve the readability I will often also increase the leading (distance between lines) since it is set to 1 (term used in Captivate for leading is Spacing).

For Fluid Boxes this is not necessary, because font size will adapt to screen size in a ‘fluid’ way when changing the screen width. It is limited by the ‘minimum size’, which is set at 14pt, which is IMO too high. In previous versions the minimum font size was 10pt which still leads to readable text on smartphones.

Master Slides

I always work in the Expert UI and have different workspaces for Fluid Boxes and for Breakpoint Views because of the specific work when editing master slides. In both workspaces I have Master slides and Filmstrip visible at the same time, which means they need to be in two different docking stations (left and bottomin my case). For both workflows I will have Rulers active on the stage to be able to use guides for a consistent design over different master slides (even more important for Fluid Boxes).
Breakpoint views: the most important panel here is the Position Properties panel. In combination with Rulers/Guides you can size and position all items on the master slides, including the placeholders. For Breakpoint workflow all master slides can be used, including the main master slide. Main master slide is a great tool for items that are common to most slides, including daughter master slides.  The object styles defined in the previous step will be used automatically provided you defined them as default styles! If you plan to use quizzes, do not overlook checking the default quizzing master slides. Labels to be used on quizzing master slides  have to be defined in the Quiz Preferences.

Fluid Boxes do not need the Position Properties panel, except for Static Fluid Boxes. Fluid Boxes are defined with the Properties panel. You cannot use the main master slide for Fluid Boxes, because all default themes with the exception of the Blank theme, have fluid boxes set up.  Even when editing the Blank theme the option Fluid Boxes is unaviailable for the Main master slide. In two previous posts I described the work flow for quizzing master slides and content master slides. Do not forget to have a look at the post about Fluid Boxes and Guides, because those Guides are indispensable to set up a consistent design spanning all master slides.

Limitations and workarounds – Fluid boxes

Do not use objects on the main master slide. Most other limitations are due to the fact that fluid boxes have to be “twodimensional”, which means that you cannot have objects overlapping or stacked in the same location, even if they don’t appear at the same time in the timeline. Here are some of the the results of that 2D paradigm and possible workarounds::
  • Grouping of objects is impossible
    That is not only disappointing for management of crowded timelines, but it also means that group effects are impossible. THse group effects can be very useful, look at this article.
    A widespread workflow consists in having different texts, grouped and  stacked in the same location. Based on a click to show one out of the group can be done with a shared action with two commands: first hides the group, second  shows one text. That work flow is impossible in fluid boxes. You’ll have to create duplicate advanced actions with a lot more commands.
    Lightboxes are also impossible with fluid boxes.
    In many cases a workaround is possible by using one multistate object instead of the group. In the movies for which I posted the links, that approach has been used on slides 3 and 4. Compare both movies. A multistate object can also be an alternative for objects appearing staggered on the timeline, but in the same location. Using an On Enter action with the command Delay Next actions can be a workaround (see Autolists).
  • It is not possible to have an object timed for the rest of the project
    Such an object is often used as alternative for objects (toggle shape buttons or a logo) on the master slide. Since such a object has a unique ID, it can be controlled, hidden on some slides and shown on other slides. Controlling objects on master slides is not possible because they do not have an ID. You’ll need perhaps more master slides when working with Fluid Boxes as workaround.
  • Some types of objects cannot be used: Zoom object, mouse object, highlight box, click box over another object and line object.
    Many users still stick to the the old work flow of putting click boxes over images to create a hotspot. Workaround is to  use a shape filled with the image, a workflow that is available since many years but apparently not well-known.
    For a highlight box: use a shape as well with multistates, one having a thick border and eventually a semi-transparent fill. No workaround however for the outer fill which exists only for a normal highlight box.
    The Line shape is a rebel, often causes issues (only shape that cannot be rotated in Options). You can replace it by a rectangle with a minimum width of 4 px which is the minimum.
If you really need to use a zoom object, mouse object or stacking items in the same location: use a static fluid box. That is the case for the default fluid box where feedback messages are stacked on the Quizzing Master slides. You have to be aware that static fluid boxes will just keep the width/height ratio, but are not really ‘fluid’.

Conclusion

Do not misunderstand my post, because it sometimes looks like I don’t like Fluid Boxes workflow. It is a great way to create responsive projects in much less time than with Breakpoint views, but you need to be aware of what is possible. I am confident  that some of the present limitations will disappear in future releases. Use your design skills and knowledge to judge if a project is suitable to be developed with Fluid Boxes or if you need Breakpoint Views workflow.

If you like Fluid Boxes, do not hesitate to enter feature requests for those limitations that bother you most. It will be a huge help to the Adobe Captivate team.

Make a responsive splash screen with several pictures

Introduction: a few weeks ago I made a video (that you can show again at the bottom of this page) showing a way to make a splash screen for responsive projects. The picture used in this demonstration worked with all the screen sizes but wasn’t responsive. However I mentioned at the end of this video that it was possible to make a responsive splash screen by using Media Queries into the Css file.

I hadn’t explained it because it wasn’t the objective to make a Css lesson in this video, but for people interested, here is the step by step process to make a responsive splash screen with several pictures.

What is the main objective?

Instead of using one picture as shown in my “Customizing a splash screen for its customers and mobile / learning solutions” video, the objective here is to use and insert 3 pictures that will appear and change according to the size of the device or browser, like shown in this short video below:

 

 — STEP BY STEP PROCESS —

Prerequisite

It is better to have already viewed the “Customizing a splash screen for its customers and mobile / learning solutions” video located at the bottom of this page or in the Video category.

Step 1

Unlike shown in the video, don’t fill the “Auto Play” form field in the Start and End menu. Let it blank. Just uncheck the checkbox like below.

pict1

 

 

 

Notice: if you have already filled this field, there is no possibility to make it blank again (Captivate doesn’t allow it). So replace your current picture by a picture that is 1px wide and high in a transparent format. The aim is to put an invisible picture to replace yours.

Step 2

Once your Captivate project is completely finished, publish it to the HTML5 format.

Step 3

To enable your splash screen to be responsive you need to prepare several pictures with different sizes. As said at the beginning, I am going to use 3 different pictures for this presentation and as size for each one I am going to use the same than the ones used by Captivate into its Css file for its “gestureimage*.*.png”.  That means:

  • Mobile size:                             width:186px;  height:350px
  • Mobile Landscape size:         width:335px;  height:281px
  • Tablet size:                              width:531px;  height:277px

Do the same on your side by preparing 3 different pictures with the sizes above-mentioned (of course you can change these sizes or add pictures to your project if you have good knowledge of Media queries.)

Step 4

Once done go to the following path: “yourproject/assets/htmlimages” of your published project at Step 2, and insert your 3 pictures into the “htmlimages” folder.

 pict2

 Step 5

Go to the “css” folder (path: “yourproject/assets/css”) and open the “CpLibraryAll.css” file with a HTML or Css editor.

pict3

Step 6

Within this file, 3 Media queries rules have been generated by default by Captivate. These Media queries rules begin by the following Css syntax: “@media”

(see yellow highlight in the picture below). Identify them into your file.

pict4

Step 7

Make these three Media Queries rules distinct like shown below in order to better edit the next steps.

 pict14

Step 8

Identify the double braces that finish each rule,

pict6

and make two line breaks just before the last one. The result must be like below with a blank line between both.

pict7

 

Step 9

For each blank line, enter the following Css code (see also screenshot below) :

Code for line 1:

#playImage{background-image:url(../htmlimages/mymobileimage.png); width:186px;height:350px}

Code for line 2:

#playImage{background-image:url(../htmlimages/mylandscapeimage.png); width:335px;height:281px}

Code for line 3:

#playImage{background-image:url(../htmlimages/mytabletimage.png); width:531px;height:277px}

Once done replace the name of the “png” picture by yours. Moreover if you haven’t used the same size than me, change also their width and height values).

Notice: “# playImage” is the css ID of the picture.

pict8

 

Step 10

Save your css file.

Step 11

Launch your “index.html” file and check out the result in your browser by resizing it. You should see your three different pictures that appear and change according to the size of your browser like shown in the video at the top of the page.

 

   END OF THE PROCESS   

CONCLUSION / NOTICE

1 – By default Captivate generates three types of Media queries but if you have good knowledge of Css and Media queries you can add others.

2 – This article only describes how to make a responsive splash screen with different pictures. It doesn’t describe the whole process shown in the video below, like the way we hide the picture of the arrow, the customization of the background and the loading page, as other tricks.

So if you want to get a complete overview of how to make a splash screen for mobile and tablet solutions, don’t hesitate to look at this complete video. A teaching aid made with fluid boxes is used.

 

Webinar: Advanced Tips and Tricks to create Responsive Projects in Adobe Captivate (2017 Release)

Advanced Fluid Boxes in Adobe Captivate 2017Join me to learn about the tips and tricks for using Fluid Boxes in Captivate and make the most of them. She will also cover the best practices for creating responsive simulations, click-based interactions, drag-and-drop interactions, quizzes, etc. Along the way, learn about some tips and tricks for using Fluid Boxes with Master Slides, Multi-state Objects, and more. Don’t miss it!

Webinar title: Advanced Tips and Tricks to create Responsive Projects in Adobe Captivate (2017 Release)

Date and time: 7th November 2017 | 8:00 AM PT

Registration link

#eLearning #LIVESTREAM Converting to Responsive Projects 2017-11-6 16:00 EDT

Captivate 2017

In this Adobe Captivate eLearning live stream, I will share with you the methods for converting non-responsive Adobe Captivate projects into responsive design projects. I will cover converting to fluid box design as well as breakpoint design and one other method that you might find interesting.

Follow the link below at any time to set up a reminder to be notified when this event becomes live on November 6th at 4 PM Eastern Time.

#eLearning #LIVESTREAM Converting to Responsive Projects 2017-11-6 16:00 EDT

If you enjoy my LIVE STREAMS, please share them with your colleagues and don’t forget to subscribe to my YouTube channel to make sure you’re notified of all my upcoming events. If you subscribe to my YouTube channel you will receive my Adobe Captivate 2017 – Responsive Custom Quiz Questions online course from Udemy for only $10 (a $50 value).

Beyond the LMS: A Mobile First approach to learning using Adobe Captivate, Formative Assessment, Google Analytics, HTML5 and Google Firestore

welcome-home

 

Hello Adobe Captivate Community!  I’m excited to hear from you and welcome your ideas and input on the work I am about to describe.  Your tutorials and forum posts have helped me tremendously in getting to completion on years of work and I am proud to share it with you today.

I discovered Adobe Captivate 4 years ago when searching for a way to reach people on mobile devices. I needed to replace a platform I had developed with a mobile first solution.

Enter Adobe Captivate: Captivate’s responsive design capabilities solved all my development needs.  The genius of fluid boxes in the latest update made it easy.  My need for Captivate did not originate from the need to build courseware.  For me, Captivate was a tool to create complex HTML5 presentations that branched in order to depolarize groups and build consensus.  Using Google Analytics I could assess every click and how the user got there.  I could provide instant feedback to the participants.  I could work across any device.  After 30 years of building CBTs (we used to call it Computer Based Training), websites and designing lots of stuff, Captivate became the tool to pull it all together … and more.

18-relationship-with-the-enviromment

This is a fluid box containing a background image, and 3 horizontal fluid boxes contained in it. The top and bottom fluid boxes contain smart objects used as buttons. The center contains a smart object that holds text.

Enter Google Analytics:  In order to do the consensus building work, I needed data.  For example, in the screen above there are 3 branches … 3 decision trees.  I needed to show data around these groups.  Adobe Captivate and Google Analytics worked perfectly together. I could show every single click, and not only that a learner clicked a smart object button, how they got there.

events

Captivate’s HTML5 output puts DIV IDs around every element on a screen. When those elements are a button, they can be tracked in Google Analytics. We can not only see that the item was clicked, but the learner’s choices on how they got there.

 

Enter Formative Assessment: As a freelancer it was natural for me to go out and find work in Adobe Captivate after mastering a big chunk of it.  (Thank you Captivate community for sharing your techniques.)  I lucked into discovering a client that was highly skilled in adult learning theory. He looked at my work and contextualized it by putting adult educational theory practices around what I had been tinkering with online for 25 years.

israel-palestine

Using skip actions in Captivate allowed me to speak to different audiences and find consensus points in the gray area of very complex issues. I didn’t know I was doing mobile online formative assessment.

 

Enter Fluid Boxes: The genius of fluid boxes is that, in my opinion, Adobe created a WYSIWYG editor to mimic bootstrap.  Having designed websites for years, it was an easy leap to make in Captivate … easier than hand coding a website.  Mostly I use simple rows, and squeeze smart objects in them.  I love being able to wallpaper the fluid boxes with background images and overlay transparent smart objects inside them.

fb-full

This screen has 4 rows, with the 3rd containing 4 columns. Smart objects as buttons allow for various states that dim and light up to reveal the background. Photo Credit

fb-tab

As the screen reduces in size the 4 columns are set to flow underneath each other, while the other rows are set to squeeze. Photo Credit

 

fb-mobile

The toggle advanced action is used to assign a variable of 1 to each selected item, and if tapped again, change it back to zero. Advanced actions are used to check which item is set to 1 and which item is set to 0. If the user gets the answer correct on this knowledge check, they branch one way, if not … another. FORMATIVE ASSESSMENT! Yay!! Photo Credit

Enter Firestore: Building with mobile in mind means that there is a good chance learners are going to access your course on different devices.  Captivate has a tutorial here in how to use JavaScript for local and session storage, and I highly recommend using CpExtra from Infosemantics to automate this task (and much more), but for real data persistence, you need the Cloud.  Google Firestore was released in Beta last month.  Techcrunch talks about it here. It not only can handle storing captivate and custom variables but you can use authentication and push notifications with it as well.  This can easily help  you turn your Captivate responsive project to a real html5 application.

 

The features supported by Google Firebase (and Firestore too).

 

A few more things, because this is getting long …

1.  The power of HTML5 and Captivate’s web object allow us to embed anything on a screen!  I’m using it to embed HTML pages on Captivate screens. The pages are created using the Uikit framework from Yootheme.  (Yootheme stuff is part of Joomla / WordPress world.)  Here is a link to the Uikit framework.

2.  PhoneGap works perfectly with your mobile layouts.  The only thing you’ll need to do is open up your index.html page and make it conform to the latest version of PhoneGap.

3.  I think LMSs are a thing of the past.  Sorry.  But …  if you want to use one, thanks to Captivate, everything I wrote above will work on any LMS and if you want to focus on the LMS reporting, instead of Google Analytics, you can!

4.  One of the advantages to setting up your Captivate project like a web site, with multiple projects loading into each other, is that you can link anything to anything.  It is very difficult to move backwards due to SCORM standards and let the user jump around like they are reading the NY Times.

5.  Jumping around like they are reading the NYTimes … yes.  I’d love to talk to you all about educational theory and stuff … but I believe in a truly nonlinear experience for the learner.

6. Just more thing … Thank you for Typekit integration!  Not only can we choose from a huge library of fonts, but they do not fluctuate in size the way a standard web font might from browser to browser.

 

pages

Uikit pages embedded in a web object. This one has responsive pagination for unlimited text. We can put up a few words, a few pages, or an entire publication.


Javascript powered audio player embedded in a Captivate Web Object for responsive layout and unlimited audio tracks.


 

wevboth

Our smallest layouts in responsive projects will perfectly package up to an HTML5 app using PhoneGap. Modify the index page to add all kinds of app-like features.

And Finally:  Thank you.  I love Adobe Captivate and want to thank the following folks who have helped me incorporate this tool in my own way.  You don’t know you helped me, but I already feel like I know you.  Thank you Pooja Jaisingh, Paul Wilson, James Kingsley, Lieve from lilybiri.com, Michael @ cpguru.com, Rod and Tristan at Infosemantics,  and Ajit Kumer at Typekit support.

I’d love to dive into any of the topics on a much deeper lever.  Please feel free to comment and we can see if this goes anywhere.

Adios for now. – Brian

 

 

Shared Actions for Easy Navigation Controls

I record Adobe Captivate tutorials on procedures I use myself. One such topic that I haven’t covered before now is shared actions. I simply haven’t had a reason to use them in my everyday work. I would use “advanced actions” for the navigation controls I would put at the beginning of my course and display for the rest of the project. One problem is that you can’t have items displayed for rest of project and contained in a non-static fluid boxes. I solve this problem using a shared action in this video tutorial.

 

 

Use Guides for your Fluid Boxes Design!

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:

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