Classic Captivate vs 'Charm' test case (responsive project).

Intro

The 'All New Captivate', version 12 has been released just over a month ago.

It lives along Captivate Classic because it has not all the features which are expected in a full-blown authoring tool. Main limitation is that you can only create responsive projects. As a long-time user of Captivate I know that this implicates a lot of prohibited workflows which are possible in a non-responsive project.

To test the differences in workflow and possible bugs/lacking features I want to recreate a responsive project in the new version. The project which you'll be able to see here, was created with Fluid Boxes and based on a Quick Start Project 'Rhapsody' for the design aspect. 

'Crunch Numbers' test project

Play with the project on any device, using this link. You can also view the embedded one below, but on mobile devices you better use the link.



The topic is simple, and suited for playing on small mobile devices. There are some references to previous blog posts, but they used a non-responsive project. I focused on multistate objects because I know already that they are easier to use in the new Captivate release than in Classic Captivate.

Test follow-up

I plan to document each of the steps of the test process in another blog with limited access. Although my primary focus will be on recreation of the interactivities in the project, I will also spend time on the design features. Here is a non-restrictive first list of steps:

  • Preparation: setup of Preferences and Theme.
  • Recreating simple content slides using the slide templates and blocks
  • Eventually use of slides from Quick Start Projects.
  • Setup Multistate objects
  • Use of audio.
  • Animations tool
  • Defining user variables
  • Replacing Shared actions by Interaction tool (and Copy/Paste)
  • Replacing Advanced actions by Interaction tool (and Copy/Paste)
  • Scoring 

Steps in Bold are for me the primary goal.

After the process I will post a link to the result in this blog.

Invitations

As mentioned the new blog will not be public. If you are interested in following my test steps and conclusions, you'll need to contact me either:

  • by sending me a mail with your credentials to info@lilybiri.com
  • by adding a comment here, but I need your name and mail address
  • by filling in the form under the Contact button on my website.

You may get an invitation. It will be a limited group and I expect some engagement/reactions on the private blog.




Quiz/Score slides in Quick Start Projects - part 2: Responsive projects

Intro

Recently I posted about using Quiz slides as ready-to-go slides from the available Quick Start projects, in their non-responsive version. The conclusion was not very positive, because most themes didn’t include the necessary master slides to allow you to create all types of quiz slides with the theme look/design. For the Score slides the situation is even worse, because they cannot be inserted as ready-to-go slide, they will appear automatically after insertion of a quiz slide, or after setting up the Quiz Preferences to show a score slide (for scored objects). If the Results master slide has not been created in a theme (as was the case for multiple QSPs) you’ll not be able to get them in your project, unless by using the long workaround I explained in that post.

This second part refers to the responsive versions of the Quick Start Projects. It is a relief to see that the situation is better for the used themes. You will be able to download a table, with the same indications as in the first post.

Table

The number of Quick Start Project with a responsive (fluid boxes) set up is more limited than for the non-responsive projects. You can find a similar overview like the one provided for the non-responsive projects in this downloadable table:

QuizQSPResp

Items marked in red need some explanation, have a look at the Tips below

TIPS

Similar to the non-responsive projects, there are QSPs (Quick Start Project) with a fully developed theme, including dedicated master slides for the score slide and the quiz slides. That group includes the projects Safety, Wellbeing and Alliance. A second group (Earth, Rhapsody and Wired) has master slides but only partially similar to the example slides. Mostly images are lacking, but since you are dealing now with Fluid Boxes, it will need some knowledge of that workflow to reproduce the look of the quiz and score slides.

The project Aspire  has several example MCQ slides, only one of them is using a dedicated master slide. It has also an incomplete Results master slide. The project League has incomplete quiz master slides.

The situation for the score slide is different. As told before, you cannot insert a score slide as a standalone slide. It will be inserted automatically after you have inserted a question slide of the same theme, or when you select the option ‘Show score at the end of the Quiz’ in Quiz Preferences, Settings.

The tips for the question slides, mentioned in the previous post, are valid here as well. For that reason, focus in the TIPS is only on the Results (score) slide. If you want to learn more about the Fluid Boxes layout for question slides, and about editing the feedback messages, have a look at:

Tips for Fluid Boxes quiz slides

Feedback Messages in Fluid Boxes question slides

Score slide

Three groups of Quick Start Projects, each with a different approach.

Group 1: Safety, Wellbeing, Alliance

These projects have a Results master slide consistent with the global Theme design. The content (inserted fields) is similar to Results slides in all themes packaged with Captivate. That means that you can use choose the to be inserted fields, using Quiz Preferences,  Settings, button ‘Quiz result messages. The screenshot below shows an example, where two fields (Max. Score and Attempts) have been unchecked. The Fluid boxes layout will adapt to those changes.

No problems with this group at all. When you insert any question slide from one of these QSPs the results slide will automatically be inserted and have the design of the master slide of that same QSP.

If you insert a question slide directly (using Quiz menu) the theme of the project will have priority and the project Results master slide will be used. This is due to the fact that version 11.5 supports the use of multiple themes.

Group 2: Aspire and Rhapsody

Those projects have two Results slides. This screenshot shows them for Aspire:

The first master slide (Result) is the default master slide used when the Results slide is inserted (due to insertion of a question slide). It has only partially adapted the Theme design.

The second master slide (Custom Result) is used in the Alliance project for the example results slide.  You can switch the existing Results slide to this master slide if you want. BUT! the big problem is that you’ll miss the Advanced action used for this results slide, and the text content for some text captions.  This is a big problem if you are not familiar with those features.

Group 3: Wired, Earth and League

These projects have no Normal Result master slide. By Normal I mean that you can add/delete fields as shown in the screenshot ‘Quiz Result Messages’ under Group 1. These projects have only a customized Result slide, which is using an advanced action.

This is a problem: when you insert a question slide from one of these projects, the companion Results slide will be that custom slide. That means that you will have to find the advanced action and attach it, after having filled in the missing information.

Two possible solutions: either you will replace the custom Results slide by the default Results slide from the project theme. These two screenshots may illustrate the workflow. It is a project using the ‘Cement and Steel’ theme packaged with Captivate.  A T/F question slide was inserted from the QSP ‘Earth’, which resulted also in the Results slide of ‘Earth’, and you can see the result here (missing Text, advanced action). You see the results slide at the back (with part of the missing fields in the scratch area), the Filmstrip and the Properties panel of the results slide. You see that the Results slide belongs to the ‘Earth’ theme:

To replace the Results slide by the one belonging to the theme ‘Cement and Steel’, use the dropdown list (showing Earth) to switch, and you’ll get only one possible master slide: the Results Master slide of ‘Cement and Steel.’ Select that master slide, and you’ll get all the fields back, no advanced action needed, although the design may need some editing.

Post a comment, if you want to learn how to recover the advanced actions for the custom results slides in groups 2 and 3.

Fluid Boxes and Interactive Video? (Position Properties panel)

Intro

With CP2019 the Position Properties panel, originally used only in Breakpoint Views workflow, can also be used for a Fluid Boxes project. From recent questions on the forum I detected that this can lead to confusion, especially for starting users. Some use only the Position Properties panel to create slides and ignore the Fluid Boxes setup.  That was not the goal of adding access to this panel. 

If you choose to set up a responsive project with Fluid Boxes workflow, it is compulsory that you leave the layout to be monitored by Fluid Boxes control as primary. Only for specific situations Fluid Boxes should be overridden by using Position properties. It is similar to the use of Static fluid boxes: their use should also be limited as much as possible or you lose most of the fluidity which is typical for Fluid Boxes.  Besides object stacking, one of the excluded items in a normal fluid box is Interactive video. This blog tries to explain best practice for such a slide, which will not have any fluid boxes. 

Position Properties panel can also be used for objects which are unlocked from any fluid box. 

Interactive video slide

It is not compulsory to have fluid boxes on each slide. Be careful: if you use a packaged responsive theme, it is possible that the theme provides fluid boxes on the master slide(s). Same is valid when you use slides and theme from one of the Quick Start Projects.  The savior in this case in any correct Captivate theme is the Blank master slide. It shouldn never have fluid boxes. 

Recommendation: use the Blank master slide to insert an interactive video. That is the case for the example screenshots. The video was taken by night, hence very dark. For that reason I changed the background color of the Blank master slide to black instead of the default white. That way it could blend more easily with the video if it is not filling the slide (setup 1). This has consequences for the overlay slides as you'll see later.

In a normal fluid box you cannot have slide video.  Similar to bitmap images it is very important that the width/height ratio is maintained whatever the browser resolution on the device. That is where Position Properties are important. Two possible setups, to have the video adapting to any browser resolutions will be described.. 

The images are for a video in 4:3 format. The desktop resolution is 1024x627 as you can see in this screenshot. The width of the video is 1024, which means that part of the height (765) is outside. 

I turned on the feature ‘Preview Height’ under the Style tab, which results in the yellow surrounding box and the indication of the device size.  When the resolution changes, there are two ways to keep an acceptable view, while not distorting the video. The setup is realized using the Position Properties panel. If you don't see that panel, turn it on using the Window menu.

Setup 1: Width = 100%, Height = Auto

This will result in having the video  always completely visible. The following screenshot shows the iPad situation. Due to the black background the empty slide pixels blend in well with the video. Next to the result you’ll see the Position Panel setup, with Advanced part expanded. Vertical and horizontal alignment are turned on, reason why the % for Left, Right, Top and Bottom are greyed out

Setup 2: Width = Auto, Height = 100%

This will result in cropping the video as you can see in the setup and the screenshot of the same iPad situation as in the first setup:

The choice between both setups  depends on the video and whether you need to preserve it to be fully visible or not. For the second setup, if you want to keep another part than the central part, you can add specific setting for the X and Y position of the video, instead of using the center horizontally option.

How do you treat the overlay slides? They need to be created individually, should you use a master slide with or without fluid boxes? Read on.

Content overlay slides

After a lot of exploration, I detected that you get the best result when creating Overlay slides without using Fluid Boxes as well. For the layout, use a similar approach as you used for the video with the Position Properties.  Using Fluid boxes could mess up the slides when they appear in the interactive video. Here is a screenshot of such an overlay slide, when using Setup 1 (Width set to 100%):

It has been set up without vertical alignment in this case. As you may know, the black background (because the video is on a black background) will become transparent when the overlay slide appears to allow the dimmed video to be visible (more about this in an older post).

This screenshots shows the same overlay slide for setup 2:

Knowledge Check  Overlay slides

The situation is different now. This is a Fluid boxes project, so it is impossible to create those KC slides without using the responsive masters for quiz slides.  I tested this out in the same short (dirty) example project and everything works as expected. Just a warning: do NOT use a playbar, because it causes a lot of flickering when a Knowledge Check slide appears.  If you want navigation possibilities for the overlay slides (when you want a sequence of slides) create custom navigation. 

Similar use cases

Background images for slides or master slides can be treated the same way. 

Position properties panel can also be useful when taking out objects from a fluid box, to attach it to the one of the slide edges, or to another item. A company logo is a typical example. 

Those use cases have been treated in many videos, but I never found one about the workflow for an interactive video. since you have to deal with the overlay slides as well, suspected this could be a useful blog.

Using SVGs instead of bitmap images in or out of fluid boxes in a responsive project can lead to weird situations. Stuff for another blog.

The example project is not provided. If you want to play with it, contact me by mail or through my website. It is just a trial and error project, not an example of a nice interactive video.

Responsive Projects: Object styles

Intro

This is the last blog in a sequence of 3. In the first article I explained meaning of Object Styles when creating a custom theme, terminology and how to create a custom object style based on an example on the stage.

The second post explored in depth the Object Style Manager, for creation and management of Object Styles.

In this last article the focus is on Responsive projects: tips and tricks to keep in mind for Object Styles in a responsive theme. Since CP2017 Captivate offers two workflows for responsive projects: first is using Fluid Boxes, second older using Breakpoint Views. Tips will be specific for each of those workflows. If you want to re-read the advantages/limitations of both workflows, may I recommend reading this post. I also mention the workflow of  Rescalable HTML project as alternative for responsive projects.

Fluid Boxes project

For such a project I recommend to use real fluid boxes whenever possible. It is the only way of having a real fluid layout. If you demote (use that negative word on purpose) a Fluid box to a static fluid box to circumvent some limitations like stacking of objects, you lose the real fluidity and the layout can look very weird on smaller browser resolutions.  A static fluid box keeps the width/height ratio, and that may cripple other real fluid boxes on the slide, even when you control the exact position.

Objects not allowed in normal Fluid Boxes

What are the limitations of real fluid boxes? Many objects cannot be used. For the Object styles, that means you don’t have to bother about styling those objects. They all are in the category of the Standard objects:


  • Highlight Box cannot be used because it is meant to be stacked over the object to want to highlight. If outer fill is selected, it is covering up the rest of the slide which is breaking the stack rule..
  • Rollovers are not possible in any fluid box (not even in a static fluid box): Rollover Area, Rollover Slidelet, Slidelet.

  • Zoom object cannot be used for the same stacking rule: Zoom Source and Zoom Destination

Font size in Fluid Boxes

The font size which you define in the Object style, will be used for the highest browser resolution. In the default setup, it is indicated as Desktop (default = 1024x627px). If you have set up a higher resolution for the desktop, maybe for a 1280px wide resolution, you could prefer a slightly larger font size.

No need to bother about the other browser resolutions. After publishing fonts will decrease in size smoothly until the minimum font size is reached. At that moment the famous ‘icon’ will appear to indicating text doesn’t fit in the available text container (shape or caption). Just one tip: set the minimum font size to 10p if you expect to have learners on small browser resolutions.

Breakpoints

To have complete control over the layout in different resolutions, you need to switch to Breakpoint mode workflow, using an option in the Project menu.

Objects not allowed in Breakpoints

All objects allowed for HTML output can be used in Breakpoint mode.  When you check the HTML5 tracker under Project menu, you’ll see warnings about unsupported items like Slide transitions, Text animations. The warning also points to Rollover objects. However they will be functional on desktop/laptop screens when a trackpad or a mouse is used. On Mobile screens, the rollovers will not be functional. I would not recommend to use the Rollover slidelet because it is no longer actively supported and can be buggy.

Font size in Breakpoints

In a Breakpoint views project, the font size will not decrease smoothly when you decrease the resolution of the browser. You have to set up the font size for all the Breakpoints you want to use in your project: from 3 (minimum) to 5 (maximum). Between those breakpoints the font size will remain fixed, equal to the setup for the  higher of the two breakpoints the browser resolution is situation: you’ll keep the font size of the Desktop view until the resolution of the landscape Tablet (if you activated it) or the Portrait Tablet is reached.

It is no secret that the Adobe team is promoting the Fluid Boxes workflow over the Breakpoints (which mean more work but offer more control to the developer). For that reason, there are no real Breakpoint views themes packaged with Captivate 11 (CP2019) anymore. A responsive project will always start with a Fluid Boxes, where you can use a packaged or custom theme. When switching to Breakpoints that theme loses all fluid boxes, but the object styles for fonts are not changed: all breakpoint views keep the same font size which is the maximum font size set up for Desktop (or higher Custom size) in the Fluid Boxes.

This is a situation where I use the Object Style Manager to start with the tedious work, eventually to be edited later on while designing the master slides. The OSM will now have a dropdown list for the activated Breakpoints, whenever font size is needed. That is the case for the Captions and Shapes under Standard Objects and for most of the Quizzing Objects. Of course, you don’t have to bother about Captions if you only use shapes and vice versa. Look at this screenshot, for the Title shape, common style in most themes:

When you check the font size for the 4 Breakpoints below the Desktop, you’ll see that the size is fixed. You need to decrease the size gradually. Minimum font size is 10pt. It is a bit guessing at the start to find a good distribution between the maximum and that minimum font size (which is for Mobile Portrait). My workflow:

  • I look for the smallest used font size on Desktop, that will have to be 10pt for the Mobile Portrait.

  • Once you have chosen Mobile Portrait in the dropdown list, that resolution will remain for the other styles until you change again. Edit all mobile font sizes at once, related to that smallest size.

  • Landscape Tablet doesn’t have to be much smaller than Desktop, unless you use a really big resolution for the desktop breakpoint. So I’ll set up all the font sizes for that breakpoint.

  • etc.

Here is a check list of the objects I usually edit. Know that I never use captions, only shapes as text containers. As for the buttons, only shapes and transparent buttons (compulsory for quiz slides) are used.  They appear in the same sequence as in the OSM.

  • Buttons: I edit the style(s) for the Transparent button and for the Quiz button here (both will also appear for Buttons in the Quizzing category)
  • Text Entry Box: edit only one style which I set as default style.
  • Text Entry Box button switch to Transparent button whose default style has already been edited
  • Smart Shape: for use as text container.
  • Title: often start with 16p for the lowest breakpoint
  • Subtitle: often start with 14p for the lowest breakpoint
  • Success/Failure/Hint Shape: all need same font sizes. Beware some included themes use same style (Success), you’ll want different styles but with same font size in breakpoints.
  • Quizzing Partial Correct Shape: all other shapes use a default style which has been edited under the Standard objects.
  • Quizzing Progress indicator
  • Quizzing Review Area: is only used on the score slide to store the text about passing/failing
  • Short Answer

IMPORTANT:  Do not forget to save the theme when you have finished. Indicate clearly that it is a Breakpoint Views theme. That way you will be able to apply the theme when you have converted another project to a Breakpoint views workflow. If you change the design a lot throughout , it may be worthwhile to create a Blank project with edited font sizes for Breakpoint Views projects.

If you do use Breakpoint views because you have learners using a lot of devices and want to have a simple look for the smallest screens instead of having the same layout fluidized, please log feature requests. It should be possible to choose which workflow to prefer when creating a responsive project: Breakpoints or Fluid Boxes. Fluid Boxes should not be imposed by default  as is the case at this moment in CP2019.

Quiz Slides with Fluid Boxes

Goal

Today this question appeared on the forums:  "Easy way to give better feedback in Fluid boxes in the Quiz"

So for the second time in a couple of days a blog post based on such a question. If you missed my workflow to tweak Feedback messages for Drag&Drop, here is the link.

That question is related with a blog post I have been writing about the setup of Fluid Boxes in Quizzing Master slides. If you have read that post, it explained that all feedback messages on those master slides are stacked on top of each other, and for that reason that Fluid Box needed to be converted to a Static Fluid Box. I didn't mention in that post the workflow I am using to create individual feedback messages on the quiz slides which is the purpose of this short article. You can see it as a add-on for the article about fluid boxes in Quizzing master slides, and maybe also show some features of that static Fluid Box, which are not very well documented but which I discovered when trying to find the easiest workflow.

Workflow

Before starting the work flow described below, check the quizzing master slide. Make sure the used styles for the messages are correct and that all the message containers have the same size and are aligned. For the packaged themes that is not always the case.

You have to know that it is NOT necessary to unlock an object from a static fluid box before moving it! That is only the case for the normal, non-static fluid boxes. In static fluid boxes the objects are not glued to the fluid box in the same level. You can even move them out of the fluid box.

Remember: if you screw up something when trying out the workflow, you can always return to the normal situation by clicking the button 'Reset Master Slide' in the Properties panel of the slide.

Step 1

Select the top message. In the default stacking order it will be the Success message. Edit the text. If you are seeing the text of the other images below, check the opacity of the fill, and increase it. 
After editing keep the message selected and move it out of the way. I mostly use the shortcut key CTRL-UP in this case. With each use of that shortcut the message will move up 16px (which is the default size in the grid). Be careful: the message will be over the fluid box containing the answer area. It will not snap to that fluid box, but you'll not be able to select it anymore. That doesn't matter.

In the used theme shape for this message had an Opacity = 0. I changed it to 80% to be able to read and edit the text. No need to  reset the style, will be done in the last step.

Step 2

Edit the next message, in default setting it will be the Incorrect message. 

Step....

If you have more messages, move the second message up, edit the third etc..

Last Step

Pretty easy: reset the master slide as shown in the first screenshot.

Conclusion

It remain a cumbersome workflow, but at least you don't have to unlock from the fluid box as many tell, nor getting them back into the fluid box. If you looked at the thread you see those unnecessary steps mentioned by the Adobe chat and another user. Probably misunderstanding the differences between static and normal fluid boxes. It is still a new workflow, Fluid Boxes, and really quite different from designing a non-responsive project or even a responsive project with Breakpoints.

 

Fluid Boxes Or Breakpoint Views?

Intro

Captivate 2017 added a new workflow to develop a responsive project: 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 explain my way of choosing a workflow for such a project. It is 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.

Overview Workflows 

If you want to publish a project to be watched on any device, you have to forget about SWF output! Only HTML5 output can be used. presently 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. However developing time for such a fully responsive project will be much larger.

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:
  • Titlee: 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

Comparing setup Theme Breakpoints vs 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

Since I am working in the Expert UI, I created two separate workspaces for Fluid Boxes and for Breakpoint Views because the work flow is quite different especially when editing master slides. In both workspaces I have Master slides and Filmstrip visible at the same time, which means they have to be in two different docking stations. For both workflows I will have Rulers active on the stage to be able t use guides for a consistent design.

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
    This is often used as alternative for objects like 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 present limitations that bother you most of all. It will be a big help for the Adobe Captivate team.

Fluid Boxes and Master slides

Intro


A while ago I published a post explaining the setup of the Quizzing Master slides, compulsory parts of each theme, even the almost empty Blank theme. In this article I will try to explain my experiences using Fluid Boxes on Content Master slides. Most themes shipped with Captivate have several content master slides (exception = Blank theme). Let us first start with the master slides that are not behaving like the content or quiz master slides

Main master slide, Blank and Title master slides

Main Master slide

It is not possible to insert Fluid boxes on the main master slide: the button seems active but both options (Vertical and Horizontal) are dimmed. Objects placed on that Main master slide, and inherited by the daughter master slides, are to be set up using the Position Properties panel. Example: the text container with my name and copyright in the example movie.
However after some more testing on iOS devices, the Position properties set up for those objects are not correctly displayed in portrait mode. 
TIP: at this moment avoid putting objects on the Main master slide, since they don't display at the correct location on some mobile devices.

As you probably know, it is not possible to have shape buttons timed for the rest of the project when you use Fluid boxes. You could put a shape button on the main or one of the other master slides but you cannot control it because it has no ID. In the example movie I preferred to have a Next button on the individual slides, because ton most slides it is hidden until the learner has visited everything. However a toggle shape button for Audio, for CC, for the TOC could be on the Main Master slide. They will not behave like objects in a Fluid box however, but act as defined on the Position Properties panel for size and location.

Blank Master slide 

This master slide has no Fluid boxes by default but you could add them. As I have explained in previous articles, you should prefer to duplicate the master slide for editing, don't edit the original slide because it is used for Powerpoint import and for software simulations.

Title Master slide

That master slide has one Fluid box (parent fluid box) but no child fluid boxes. It is set up as 'Squeeze in a Column', and vertically and horizontally centered. Because the title placeholder is inserted directly in that parent fluid box, you are not able to insert child fluid boxes.  Because each new project, using the default theme White will start automatically with a Title slide, this has caused already many frustrations when starting with the use of Fluid boxes. If you want to use fluid boxes on the first slide, you have to change the master slide from Title to Blank (exception Blank theme which starts with a Blank slide).

TIP: if you want to add objects on the Title master slide, first take out the Title Placeholder, to be able to insert child fluid boxes. Then put back the Title Placeholder in one of the child fluid boxes.

Content master slides

It can be a time saver to use a content slide that has already Fluid boxes. In a future next article I'll explain how to create a custom content master slide with the help of Guides, but for now let us focus on an existing master slide, and see how we can tweak it.
In the example movie, the second slide is based on the Content04 master slide from the Theme 'OldPaper'. I didn't customize the theme, just applied the correction explained in my last post

Look at the setup of the Fluid boxes on the master slide: the parent fluid box (FB_15) has two vertcial child FB's (FB_16 and FB_17). The top one is meant for the Title placeholder: 

The bottom Fluid Box has 4 child FB's, (FB_19,FB_20, FB_21, FB_22), which are set up to wrap Symmetrically (when width is too small, two FB's will move to the next row), and have a padding both vertically and horizontally to have some spacing between the FB's. Each of them has a placeholder for an image.

Example movie

Play with this responsive movie (will open in a new window) which has only 3 slides: Title slide (with inserted Next button, and taking over my name from the main master slide), a slide based on Content04 master slide, with a lot of tweaking, and an End slide. The Next button on the second slide will only appear when you have clicked all available shape buttons and seen all the content. 

Refining slide based on Content master slide

The FB setup on the master slides can be tweaked on a slide based on that master slide. You can remove all fluid boxes, but that is has not much sense. To demonstrate I did a lot of tweaking for the second slide of the movie which you just watched:
  • I deleted the image placeholders


  • I decreased the height of the top fluid box (FB_MS2_16) to 10%, originally it was 15% (edited font style as well)

  • I added a third vertical child FB under the parent FB_MS2_15, it is labeled FB_9
    TIP: this will not affect the master slide, if you use Reset Master Slide button in the Properties panel of the slide, you'll get the original layout


  • That last FB_9 got two horizontal FB's, FB_37 (70% of the width) and FB_38 (30% of the width); the last one will be used for the navigation buttons (Back/Next)

  • The setup for FB_38 is visible in this screenshot
  • Each of the four FB's in the center (FB_19,FB_20, FB_21, FB_22) has no longer any object (see 1) and can be divided in two new vertical child FB's


  • As you can see on the screenshot, the top FB will have the button and explanation text (originally hidden, but cannot be grouped in FB's), the bottom one has an example of the style (also initially hidden).

  • Setup for the top FB's here is visible in this screenshot; for the Shape button ('Normal') the option Maintain Aspect Ratio is kept, but not for the Text container, so that it can change for smaller screen sizes (especially in portrait mode).

More questions?

You will have seen that I always had Rulers and Guides activated. My next blog post will focus on the use of that great tool, which almost no one seems to use?

Sure, I have several advanced actions in that movie, but that was not the goal of this post. No explanations here about those actions.


Tips for 'Fluid' Quiz Slides

Intro

When publishing my first reflections on Fluid Boxes work flow versus Breakpoint View work flow I didn't mention my expectations for a smoother creation of Quiz slides using FB's. In my experience with responsive projects in previous versions, the most frustrating part were those (damned?) quiz slides. You are probably aware of the very strict rules to honor for quiz slides: need to be careful with 'embedded' objects which include functionality that can be broken. Styling quiz/score slides is tough even in normal (blank) projects and turns into a nightmare when having to do it for up to 5 breakpoint views. Every post I published about quizzes gets a lot of visitors. Many questions about quizzes are posted on the forums as well. This explains why I listed Quizzes as second most important stumbling block for Captivate users in this article.

The present post is not (yet) the promised upgraded version of the most popular article I ever wrote about questions, only a summary of tips I discovered while exploring the Fluid Boxes work flow for quiz slides (score slide will be subject of a later post). If you are new to Fluid Boxes, please take some time to read the articles posted by Zeeshan. Up till now, he published 3 but promised more on their way:

Using Fluid Boxes - Knowledge Facts 3

Quizzing Master Slides -Setup Fluid Boxes

All quiz slides, and the score slide, are based on a dedicated Master slide. Master slides have embedded objects (no individual timeline): Title, Question, Answer Area with Answers, buttons, feedback messages, progress indicator to mention some. The functionality of the quiz is embedded in those master slides (two-step Submit process, updating quizzing system variables, tracking attempts on question/quiz level, review and retake on score slide, etc). 

if you choose the Fluid Box work flow for a responsive project in Captivate 2017, the included themes will also have Fluid boxes on the quizzing master slides. There is one exception: the Likert master slide has no Fluid Boxes because Likert questions are not supported for responsive projects. Each theme needs to have at least a main master slide and 6 daughter master slides. Besides the Blank master slide which is essential for Software simulations and PPT-import, the other 5 daughter master slides are all about quizzes: MCQ,T/F,FIB,Sequence; Matching; Hotspot; (Likert = not supported in responsive); Result. 

The Setup for the quizzing master slides is common for all included Themes. I will explain extensively the most used master slide (MCQ, T/F...) and summarize only the differences for the other quizzing master slides. The score slide, which causes a lot of issues at this moment, will be explained in a future blog post, hoping that some of the problems will already have dissipated by a patch?

Setup Fluid Boxes in MCQ,T/F,FIB,Sequence Master slide

This is the most used master slide for sure. You have the Root fluid box (ID/ FB_8) containing 6 child Fluid Boxes. The ID's I mention for the Fluid boxes are from the master slides. Apparently the ID has to be unique as usual. When a quiz slide is created based on a master slide the ID will change: 3 characters will be inserted, referencing to the slide number. Example: FB_MS5_10 is the fluid box for a question based on the MCQ master slide, originally on slide 5. Beware: that ID will not change when you reorder the slides, which can make it quite confusing if you are used to reorder a lot. The Root fluid box (ID/ FB_8) is set up this way.

  • Flow: Vertical (has 6 child fluid boxes)
  • Wrap: Squeeze in a column , which means the child fluid boxes will never be rearranged. the 80% has no consequences, because stretch to fit is activated.
  • Horizontal Alignment: Center with Stretch to fit activated
  • Vertical Alignment: Space around
  • Padding: none, which means the space around has no effect on the child fluid boxes

The 6 child fluid boxes, from top to bottom,have this content and setup:

Title Fluid Box (ID: FB_9)

  • Flow: Horizontal - has mostly only one item, the title shape or caption
  • Wrap: Wrap to Next Row
  • Horizontal Alignment: Space around with 'Stretch to fit' activated
  • Vertical Alignment: Middle Align with 'Stretch to fit' activated
  • Padding: none, which means theoretically the title could touch the left and right side of the fluid box/slide. Personally I avoid that by adding a small horizontal padding (5-10px).

Tip: in theme 'Clear' the title overlaps with a design element. You can change the Vertical alignment to Bottom, and eventually increase the height of this first child fluid box to fix that. Another solution is to turn off that design element by unchecking the option 'Show Main Master Slide Objects.

Later on you'll see that the Advanced answers feedback messages will cover up this FB. Be careful when resizing and moving those messages. You could mess up the arrangement of this Title fluid box. Best way is to unlink those messages from the FB before touching them.

Question Fluid Box (ID: FB_10)

  • Flow: Horizontal (but has mostly only one item, the question shape or caption); text in that container is vertically aligned to top, to allow wrapping of longer text questins
  • Wrap: Wrap to Next Row
  • Horizontal Alignment: Space around with 'Stretch to fit' activated
  • Vertical Alignment: Middle Align with 'Stretch to fit' activated; for the inserted text placeholder text is aligned at the top; you could eventually change that to middle as well if you don't have long questions.
  • Padding:  50px horizontal (text placeholder is indented from left and right side of the slide/fluid box). If the focus is on smartphones, this padding could be too big (lot of smartphones have only a width of 320px).

Answers Fluid Box (ID: FB11)

  • Flow: Horizontal 
  • Wrap: Wrap to Next Row
  • Horizontal Alignment: Space around with 'Stretch to fit' activated
  • Vertical Alignment: Middle Align with 'Stretch to fit' activated; 
  • Padding:  50px horizontal (placeholder is indented from left and right side of the slide/fluid box); 20px vertical, the inserted answer area doesn't touch the top and bottom of the Fluid box. Comment about this being maybe too much for small screens is valid here as well.

Tips: the individual answer placeholders cannot be resized in the master slide (as is the case since CP6). They are designed to have only one line (contrary to the question placeholder which has space for multiple lines). If you have answers that are pretty long, font size will be decreased to squeeze the answer in the available space. If answers have different lengths, this could result in  different font size for the answers which is certainly not wanted (see image below). Here are two workarounds:

  1. If you don't mind the font size to be decrease but want the same font size for all the answers on a slide, check the option 'Enable Uniform Text Scaling' in the Properties panel for the slide. Eventually you can decrease the mininum font size which is set pretty high in 2017 (14p, minimum was 10p in previous versions).

  2. If you don't want to have the font decreased, but prefer text wrapping, you have to resize the individual answer containers on the side (not possible on the master slide). Start by increasing the container height for the longest answer, use the Align menu ro resize all to the same height, move them as far away from each other and Distribute vertically. Eventually you can decrease the vertical padding to have more space, and/or make this Fluid Box higher, which will decrease the height of the other boxes. This work flow is certainly necessary if you allow shuffling of the answers. Whenever the answer cannot fit in the container anymore the usual icon 'read more' will appear. 

In this image you'll see the result: Default setup on top, in the middle the result when 'Enable Uniform Text Scaling' is activated and at the bottom the same answers after manually resizing, moving and distributing vertically.

If your goal is a good experience on smartphones, I would recommend to reduce the padding in this Fluid box: 2x50px horizontally is a lot if the browser has only 320px in the width. 

Messages (ID: FB_15)

Since the Feedback messages are all in the same location, this had to be a Fluid Box of the Static type to allow overlapping objects. 

Issues: The usual problem for editing those messages remains: to edit a message you have to get all other messages out of the way, since they are embedded (they don't have a separate timeline). which means you cannot hide them on the stage  If the messages are the same on all quiz slides, you can edit them - before inserting quiz slides - in Preferences, Quiz, Default Labels (same for the button labels).
However if you want individual messages on the quiz slides themselves, I used to move each message to be able to edit the one below. Problem is that they will be moved over another Fluid box, and that means you cannot select them anymore.  I thought to use the Arrange menu but.... it is not available on quiz slides, only on the quizzing master slides! Not available in the right-click menu, dimmed in the Align toolbar. I tried to move the message in the scratch area (horizontally) for editing, but with the focus loss when zooming in, this is a real pain. Best way I detected (time consuming) is:

  • Edit the top most message in place (mostly Correct); since most of the messages are in a (semi) transparent shape/caption, increase the Alpha to cover up the other messages for editing.
  • Move the top message out of the way (I use shortcut keys like Shift-Up)
  • Edit the next message (same for Alpha as for the first one)
  • Move it also out of the way
  • Do not forget the Retry message if you have multiple attempts
  • When finished, use 'Reset Master Slide' to move all the messages back in their Fluid Box (FB_12). Since the object styles will be reset as well, the Alpha of the shapes/captions will be reset to the initial value. Beware: be careful not to override object styles in this case (indicated by + sign next to style name).

Here is some good news: if you choose multiple Failure messages (up to 3 still) because you have multiple attempts, those extra Failure messages (#2 and #3) will appear over the Answer FB. Contrary to messages moved over that box, these can be selected and edited easily. When previewing/publishing the slides all Failure messages will appear in the same location although being in different locations on the stage.

When using Advanced Answer options for MCQ, one correct answer, to show feedback messages for each answer, another problem appears.The text captions for the feedback are very small, and in the top right corner (over the Title Fluid Box), slightly off stage. Depending on the number of answers, some will appear lower, over the Answer Fluid Box.

Buttons Fluid Box (ID: FB_16)

  • Flow: Horizontal 
  • Wrap: Symmetrical, which is almost the same as One Row. Only when the number of buttons is even, will you have a rearrangement in two rows.
  • Horizontal Alignment: Space around with "Stretch to fit" not activated
  • Vertical Alignment: Middle Align with Stretch to fit not activated
  • Padding: 0px horizontal and 2px vertical

The maximum amount of buttons is 6: two Review navigation buttons, Clear, Back, Skip and Submit. If you are used never to insert Back and Skip buttons (which is my normal setup) you can better increase the font size (now 20px) to 28px or even 30px. If the option 'Enable Uniform Text Scaling' enabled, the label will rescale nicely and especially the small symbols << and << on the Review navigation buttons will be readable even on small screens. The buttons don't have the option 'Maintain aspect ratio' enabled, which means that the width only will be resized.

Progress indicator Fluid Box (ID: FB_17)

  • Flow: Horizontal 
  • Wrap: Wrap to next row.
  • Horizontal Alignment: Center Align "Stretch to fit" not activated
  • Vertical Alignment: Middle Align with Stretch to fit not activated
  • Padding: none

This fluid box has only one text caption with the progress indicator, in font size 12p which is smaller than the minimum font size. The text will never rescale even if 'Enable Uniform Text Scaling' is activated.

Setup Fluid Boxes in Matching Master slide

This master slide has one extra child Fluid box for the Column Titles. The Answer Fluid box is bit different. The ID's of the fluid boxes on this master slides are:

Root Fluid Box FB_18

Title Fluid Box FB_19

Question Fluid Box FB_20

Column Title Fluid Box FB_21

  • Flow: Horizontal, has two text placeholders for the column titles
  • Wrap: Squeeze in a row.
  • Horizontal Alignment: Center Align "Stretch to fit" not activated
  • Vertical Alignment: Middle Align with "Stretch to fit" not activated
  • Padding: none
  • Answer Fluid Box FB_22: this Fluid box has now two answer areas, linked by the line indicators
    Messages Fluid Box FB_23
    Button Fluid Box FB_24
    Progress Indicator Fluid Box FB_25

    Setup Fluid Boxes in Hotspot Master slide

    This master slide has only 5 child Fluid boxes, because Question and Answer are now in one box. Moreover it is a Static box, which means overlapping objects are possible. These are the ID's of the boxes:

    Root Fluid Box FB_26

    Title Fluid Box FB_27

    Question Fluid Box FB_28: static fluid box, will contain the image with the hotspots

    Messages Fluid Box FB_29
    Button Fluid Box FB_30
    Progress Indicator Fluid Box FB_31

    General tips

    I would recommend to activate the option 'Enable Uniform Text Scaling' for question slides in most circumstances. Since this option is at slide level, it will be valid for all Fluid boxes on the slide. 

    Avoid to override object styles, that is a general rule but even more necessary for quiz slides. It will happen that you want to reset the Master slide and in that case all styles will be reset to the Default style. If you want to change a style, do not hesitate to save the edits to those default styles. 

    Preview is never WYSIWYG certainly not when you are using the slider during preview to see the changes for other screen resolutions. Example: it often happens during Preview that the text in long answers (even when manually resized and redistributed) seem to be cut off for small screens; when published all looks mostly a lot better.