Guides and Fluid Boxes: Best Buddies!

Intro

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

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

Fluid Boxes and Themes

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

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

Object Styles

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

Master Slides

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

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

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

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

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

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

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

Fluid Boxes and Guides

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

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

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

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

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

Edit Title Master Slide

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

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

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

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

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

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

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

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

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

Custom Master Slide

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

Conclusion

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




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.


Feedback shapes in Captivate 2017

Why this short post?


If you have read my article about the 3 most important stumbling blocks for Captivate (newbie) users, you'll know that Themes are amongst them.  The components of themes are described in What's in a Theme/template. and in this post you'll learn about he use of Theme colors. Almost daily I see questions, comments on the forums like "I don't use a theme" which is  - sorry for the word - nonsense because every project is based on a theme. The theme with the least intrusive design is the Blank theme, which has no color palette and only offers the minimum set of 6 master slides. 

The themes packaged with Captivate 2017 have some issues with the feedback messages:
  1. Hint shape is using the Success Shape Style, should use the existing Hint Shape Style

  2. Failure shape is using the Success Shape style, should use the existing Failure Shape Style
Shapes are set as default for feedback messages, not captions 
The feedback captions use an appropriate style in the themes Easiest way to solve the problem would be to change Preferences, Defaults and choose for captions if that is not messing up your design.  Below you'll read how to ecit the themes.

Where are default Themes stored?

The original themes can be found under the installation folder, in the Gallery\Layouts for the language you used when installing. I am on Windows, installed the US version of Captivate and the path on my Win system is: 
C:\Program Files\Adobe\Adobe Captivate 2017 x64\Gallery\Layouts\10_0\en_US. 
You'll also find the ThemeColors folder in that location. The included themes are: (Blank), Blue, Clear, Clean, OldPaper, Poise, Suave, White (which is the default theme). All themes are responsive, but can be used for normal, blank projects.

However, while working with Captivate, you will use the themes from a copied folder. In Windows that copied folder can be found under 
Users\Public\Public Documents\Adobe\eLearning assets\\Layouts.  
Reasons for this work flow are possibly:
  •  you cannot mess up the original themes
  •  the Public folder is accessible for developers which do not have administration rights. 

If a theme seems corrupted or is too messed up, you can always restore it by copy/paste from the Gallery (need for administration rights). If you have both CP9 and CP2017 installed, you'll see both Layouts in the copied folder. But the layouts folder for CP2017 has a subfolder 'bpthemes' containing all the CP9 themes on my system (not sure if that is the case when you only have a CP2017 install).

TIP: don't put custom themes in the sames folder as the default themes (Public). If you have to restore all themes by deleting the Layouts folder you will not lose the custom themes. I store them mostly with the project(s) they are used for.


Editing Default Themes 

Restoring the correct object style for the Failure and Hint shapes is pretty easy: open the Object Style Manager (SHIFT-F7), and replace the Success style by the appropriate style (which does exist) as you can see in this screenshot
image

I suspect you will want to keep the correct object styles for the feedback messages for future projects as well. Use the menu Themes, option Save Theme.  The result will be that the theme is edited in the copied folder, in the Public documents To change the original theme in the Gallery, you'll need to do it outside of Captivate, using Explorer and needing administration rights. However a user yesterday reported that the option 'Save Theme' was dimmed(?).  Reason was that he was working in a blank, normal project. All default themes in CP2017 are responsive. To protect the responsiveness, you have to edit the theme from within a responsive project. The option 'Save theme' will be available in that case. You can always use a responsive theme in a normal project.

Internal and External Libraries

Intro

Reusability in Captivate is one of this tool's most amazing features,  but a lot of the (often time-saving) possibilities are not well known by (starting) users. When I mention the word  'external library' in a presentation I see a lot of confused eyes among the participants.  Even recently, based on an answer on the forums, someone sent me a message: 'What are you talking about, never heard about external libraries in Captivate, where can I find them?'. Time for a short blog post, with some efficiency tips about using the Library. Contrary to the Timeline panel which is hidden in the newbie UI (I consider this a great mistake), the Library panel has a big button on the Big Button Bar in the newbie UI. I'll take you on an overview of that panel.

The Help documentation is very concise about Library: https://helpx.adobe.com/captivate/using/captivate-library.html It has a description of the columns in the Library panel, which I will not repeat in this post.

Internal Library


Each project has its Library, I use the term 'internal' for the Library which is created with each project. In that Library several assets will be stored automatically in different folders when you insert them in a project (on the stage) or import them directly to the Library. Even when you delete the items from slides (stage), they will remain in the Library and can be reused. These are the default Library folders:
  • Audio: will have all audio clips, whether imported or recorded in Captivate; whenever you edit an existing clip, the original and edit clip will be in this folder. If you import a (compressed)mp3 file it will automatically be converted to a 'raw' wav-file which will also be in this folder. It is recommended whenever possible to import a wav file, when published it will be compressed to mp3 by Captivate.
  • Backgrounds: backgrounds used in project, master slides or created when recording a software simulation.
  • Equations: only for the versions that have MathMagic included (if you see it still in CP2017, which has no longer MathMagic, this is a bug). That folder will store the images created with MathMagic.
  • Images: has all used bitmap images of any format; exception are the images created from layers in an imported Photoshop file. When importing such a file an individual folder will be created (under the root, not under Images), with the same name as the PS-file, and having all the layers converted to PNG images. If you insert Characters (Media button) they will appear in this folder as well. Later on in this article you'll find a screenshot with an imported Photoshop file.
  • Media: will store video, animations...
  • Shared Actions: contrary to advanced actions, shared actions are in their dedicated folder in the Library, and they have all the possibilities offered to all assets.
  • SVG: stores all SVG (Scalable Vector Graphic) images
  • Web: for web objects
Under the Preview part, you'll find a Control panel with these 9 buttons:
  1. Open Library: is an alternative for File, Import, External Library (see sbelow)
  2. Import: you cannot import folders, but you can select multiple assets to import in one action. They will be placed in the folder for their type. You cannot import layers from a Photoshop file with this button, you need to use the menu File, Import, Photoshop File.
  3. Export: it is possible to export a number of assets to one location. Each will get its appropriate extension. If you never used shared actions, know that the extension 'cpaa' will be added for them. 
  4. Edit (CTRL-U): If you have associated an application for the asset, using this button will open the asset in the associated application. Examples in my situation: audio clip will open in Auditon,  SVG' in Illustrator, bitmap images in Photoshop. Alternative is using the right-click menu (but you'll have to use two clicks in that case), Edit with....If you have the asset Properties window open, you'll find an Edit button as well (see screenshot below)
  5. Properties: will open a window with asset properties; I almost never use that button but will double-click on the name of the asset (see Properties in the screenshot below). 
  6. Usage (CTRL-ALT-U): there is a column 'Use Count' as well, but this button opens immediately a list with all the locations where the asset is used. Alternative is option Usage in the right-click menu on the asset, or the Usage button in the Properties window (see screenshot below). In the screenshot you see that Usage counts also images used in object states.
  7. Update: if source files have been changed externally, you can update the assets in Captivate with this button. Need for updating is visible in the column 'Status' (red bullet)
  8. Select Unused Items: contrary to what some people 'believe' deleting unused items will only decrease the file size of the raw cptx file, not the file size of the published file. I prefer not deleting unused items until the project is finished.
  9. Delete

TIPS

  • Captivate users tend to insert assets one by one on slides using the Media Button. An alternative way is to import first (all) assets to the Library. From the Library you can drag them to the stage (or to an object). For audio clips, when dragging to the stage you'll have it inserted as slide audio, dragging to an object will create object audio. Same is valid for shared actions: dragging a shared action to the slide will create an On Enter action for the slide, dragging a shared action to an interactive object will create a Success action for that object.
  • You are not limited to the default folders described above. It is perfectly possible to create folders under the root and to create subfolders under existing folders. For complicated projects with lots of assets, I sometimes set up folders for each slide or slide group. Another approach if you take advantage of the great roundtripping possibility with Photoshop is to keep image assets for a slide or slide group in one Photoshop file. In that case I'm only talking about the bitmap images of course. For large, complicated projects both work flows will help to manage assets when the clients is asking for (last minute) changes. In the screenshot above Tips, you see an imported Photoshop file (Libraries_Small.psd), where I indicated 4 layers which have been converted to PNG-images
  • Even if you don't use custom folders/subfolders think about labeling assets that got generic names. A relevant example are audio clips generated by TTS. 

External Library

The Library of any project (has to be closed in Captivate) can be opened as a floating Library panel in a new project. You can open multiple libraries. You have two work flows to open such an external library:
  1. Use the first button in the Control panel of the Library panel (see above) and browse to the project (cptx)where the Library you want to use is stored.
  2. Use the menu File, Import, External Library and point to the project (cptx).
Opened External Libraries will appear in a dropdown list under the Open Library button:

In the screenshot below you see such a floating External Library to the left of the docked Internal Library. If you are using the Newbie UI you'll not be able to dock that External Library in any docking station (always recommend to switch to Expert UI). Its layout is totally similar to the Internal Library. The only way to recognize it as external, is the name of the Captivate file from which it was opened, and the presence of that same name in the dropdown list under Open Library button.


If you are not used to floating panels because you are in the Newbie UI, here are some warnings. 

  • Do not reset the Classic workspace while an external library is opened, or you'll lose it.
  • External libraries do not appear in the Window menu where you find most of the default panels. Only the internal Library (CTRL-ALT-L) can be switched on/off using that Window menu. 
  • The only way to close an external Library is with the Close button. That button is in the top right corner of the panel and pretty tiny, moreover the colors are grey on black which is not a very good combination for tired eyes:

You can use an external library (or multiple external libraries) exactly in the same way a the internal library: drag an asset to a slide, or to an object (for audio clips). However I will offer one recommendation for Shared actions (see more details in this blog post): I prefer to drag those actions first to the Internal Library, instead of attaching them directly to a slide (On Enter) or an interactive object (Success event). As you probably know, if a shared action is using a variable, this variable will automatically be created when using that action in a new project. To avoid problems with duplicate variables follow the recommendation of that mentioned article.

For all the copy/paste lovers: believe me, using assets from an external library is a much safer work flow than copy/paste objects between projects (one of the causes of corruption). 

Using external libraries can save time and help to achieve design consistency. For much used shared actions (like the toggle action described in this post) I have a dedicated project ready which I open as External Library in any new project. Images and SVG's, which I use all the time, are stored in another Libarry. I have an external library with sound clips that are useful. If you are a developer in a company, you see the advantage of using external libraries for sure!

(CC Libraries) 

This last part is 'wishful thinking': if you are a CC user like me, it would be a relief if we got access in Captivate to the CC Libraries. It would make the transfer of assets created with Adobe Color, Photoshop, Audition, Illustrator, Animate, Adobe mobile apps.. so much easier. Same is valid for managing Adobe stock assets, which can be inserted in CP. 

Captivate Draft has access to the CC Libraries, and could be used as an intermediate player: use it to retrieve custom color palettes, image and other assets. Once the Draft project is exported to Captivate, you'll have them in the Internal Library. But if you don't have an iPad, this work flow is impossible. Same when you don't use Draft for storyboarding but another application.

Please, log a feature request to support (one of) my Captivate dream(s)! 

1-2-3 Eye Buttons Mystery

Title is not an nostalgic reference to the best spreadsheet application ever (Lotus 1-2-3) but is related to... Captivate.

The THREE 'eye buttons' in Captivate are a source of confusion because they have exactly the same look (contrary to my image above) but show very different functionality. 
Questions due to that confusion appear not as frequently as the timeline misunderstanding questions, but nevertheless think that a clear explanation could help to dissipate confusion:

1. Eye button on the Timeline

This button appears in the timeline panel in the first column, on top, next to the lock button. If you click the top button all objects on the stage are hidden. To hide individual objects, click a radiobutton left of the object timeiine. A red cross will appear (see screenshot below). A full explanation of this and other timeline features and can be found in this article. Hiding an object on the stage has no effect whatsoever on the presence of that object when publishing (or previewing) the course: the object will be visible. What is the goal of this eye button? As you know (if you did read the article about the timeline), contrary to normal video timelines (included the Video Demo Timeline), a cptx slide will show all objects on the stage, whether they are scheduled to appear from the start or later on. That makes aligning a lot easier, but can also lead to a very crowded stage where objects are covering up other objects (except in the case of Fluid Boxes). To facilitate editing, it can be useful to hide some objects using this first Eye button.

This screenshot, taken from the game explained in 'Using the While loop' shows several hidden (on stage) objects and even a group. Since the topmost group still has one visible object (click box), its bounding box is visible on the stage. For the other group even the bounding box has disappeared.

There is one exception: you can also click the radio button left of the slide timeline. In that case the slide will be hidden (with all its content) and it will not appear when previewing/publishing. It is an alternative work flow for using the right click menu on slide(s) in the Filmstrip, option 'Hide Slide'. With both work flows you'll see a dimmed slide in the Filmstrip and an eye icon (not a button) as indicator.


Eye button in the Properties panel: Visibility in Output  

If you want an object to be initially invisible in the published course, you need to click this button in the Properties panel (inspector) of that object, top left. It is almost the opposite button of the first because the object will not disappear on the stage at all. Why would you hide an object in a published course? Maybe because you'll want to make it visible later on.  Example: you want to allow navigation to the Next slide only after certain actions have been performed by the learner (like clicking hotspots, or entering text in fields). Showing an object will be done with the command 'Show'. Making an object invisible by using this second Eye button can also be done on runtime by the action 'Hide' and that is often a better approach.  Since you can show a hidden object, it means that the object is included in the published version which is not the case with a hidden slide. A hidden slide is not included in the published course.


Eye button in the Drag&Drop panel

When this button is set to 'active', and you did set up the Drag&Drop interactivity by defining the drag sources, the drop targets and the links for correct answers those three components are made visible: green rectangles for the drag sources, blue rectangles for the drop targets and blue arrows for the links. When you deactivate this eye icon, those indicators will disappear. Since it happens that Captivate deactivates that button without your consent, it is good to know how to make those indicators visible: click on the barred eye icon: 

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. 





    Playing a dice game, using While loop

    Intro

    In a previous blog post I explained the ins and outs of the new Advanced Actions dialog box. If you feel confused about my terminology in this more practical blog post, please read that first article. A decision block of type 'While' is totally new in version 2017. It has some similarities with the Conditional decision block (IF, Then, Else) but offers new possibilities as you'll see in this simple game.  The While loop can be used to create a looping sequence of commands. That loop can be infinite, or limited in number of executions, based on one condition or a combination of conditions.  Mohana Das from the Adobe team published recently this article demonstrating the infinite While loop. Please read that article, for users familiar with advanced actions the used condition 'IF 1 is equal to 1' will be easily recognized, since this was the condition needed to create a mimicked standard action decision in older versions. It means that the sequence of commands will continue to be done, since that condition always results in True. In a future blog post, I will offer some tips about breaking such an infinite loop.

    The present article  will focus on using the While loop, based on a condition which results in having the commands sequence repeated a limited number of times. It is a very simple game, every object was created within Captivate. One exception: the color shift in the Characters was achieved using roundtripping with Photoshop.

    It is not a responsive project, to avoid a too long article (should have to explain setup in fluid boxes with logic of the variables and advanced actions). Maybe in a next article?

    Play first!

    Download this published folder (HTML5). Sorry, cannot embed it in this post (allows only SWF's and it is not playing well in Flash output). Unzip the folder, launch the index.html file to start playing.  It is a small game: when you click on the Play button, a dice will be rolled and you'll see one of the faces of the dice, indicating a (random) number. The girl is supposed to climb the stairs, she will go up as many steps as the number you won. The goal is to reach the top. When the girl reaches the top of the stairs, clicking on the Play button will result in another scenario, and a Reset button will appear. 
    On entering the Game slide you'll see two looping animations, with added randomness and a possibility to stop the the looping. You'll see this action in Preview, but I will not provide details. 

    Slide setup - preparations

    Have a look at the timeline of the Game slide:
    I created the stairs as a freeform shape. That was pretty easy with Guides (see Guides Rule) and Snapping to guides. Of course a better approach would be to create that shape in Illustrator with export to SVG, but it is always a challenge to use only the available Captivate tools.

    Dice: this is a multistate object, the normal state is a square shape, for each of the sides circular shapes with a gradient fill are added. Look at  the Object state panel for this object. 
    The 3D animated dice has also been created as a group from a lot of shapes.

    Effects - Characters
    Two custom motion effects were created for the climbing girl. Default effects couldn't be used in the advanced action, because the path had to be edited. Here are two screenshots of the custom effects: Impatience (before starting game) and StepUp  (during play).

    The original Character (climbing the stairs) will disappear with a default Exit effect 'Zoom out'. when the top is reached.
    The Sticky image that replaces the original one climbing the stairs, will get a default Entrance effect 'Drop in and Bounce'. The text panel in that image is covered with a click box, functioning as a Reset button.
    Play button: is a simple transparent button. 

    Variables (for game only - more are needed for the start animation)

    I created 5 user variables:  
    • v_dice: starts with an empty value, will get a random number between 1 and 6 (using JavaScript, see Playing with Numbers)
    • v_counter: starts with a value=0 and will be used in the condition for the While loop to fix the number of repetitions to match the random number in v_dice
    • v_stair: is a second counter, that will be used to keep track of the total number of steps done. It is needed to know when top is reached. The staircase has 16 steps. It also starts with a value=0.
    • v_null: empty variable (see...) used to reset the v_dice variable after each use of the Play button
    • v_roll: starts with a value=0, will track the number of dice rolls needed to complete the steps; that number appears after the top of the stairs is reached. It is a third counter.

    For the EnterGame action a 6th variable v_anim is used.


    Events and actions

    The three used events for the game are:
    1. Success event of the Play button, it will trigger an advanced action PlayAct
    2. Success event of the Click box (Reset) it will trigger the advanced action ResetAct
    3. On Enter event of the Game slide, which triggers the animations: EnterGame

    ResetAct triggered by Click Box

    I couldn't use Scenario 2 of the Replay Slide blog post.  There are a couple of reasons, one being that the Game slide was originally the only slide. It is never a good idea to start a project with a complicated On Enter action (as is necessary for the looping animation). The workaround is to have a short dummy slide (mine is 0,2 secs) before the game slide and use this Reset action:
    Due to the command 'Continue', the On Enter action of the game slide (second slide) is always executed. At this moment for HTML5 output this is not the case when using micronavigation (as in the blog post about Replay slide).

    PlayAct triggered by Play Button

    The PlayAct has 3 decision blocks, one of each type: the first decision is a standard action (sequence of commands), the second is a While loop based on a condition and the last decision is an IF condition, in previous versions labeled as a conditional action. Here is the Preview:

    Decision 1 'Random'  (standard action)

    With this sequence, the 3D dice (animated On Enter) will be hidden and replaced by the static dice in its Normal state.
    The one line JavaScript will generate a random number between 1 and 6
      window.cpAPIInterface.setVariableValue("v_dice",Math.floor(Math.random()*(7-1))+1);
    I explained the construction of this line in detail in this blog post

    The variable v_counter is reset to 0. It is important that this is done before the While loop in the third decision.

    Decision 2 'EndCheck' (conditional IF action)

    This decision checks if the character has reached the top by comparing the user variable v_stair with the total number of steps (16). Contrary to v_counter, v_stair is only reset to 0 when re-entering the Game slide (using ResetAct).

    The Play button is hidden (to avoid disturbing the rest of the sequence) and the static multistate dice.

    The original character disappears, is replaced by a group (character + click box + text balloon) with some default effects.

    If the condition is not fulfilled (ELSE), which means the top has not yet been reached, the variable v_roll is incremented by 1. 

    Decision 3 'ShowNumber' (While loop)

    The condition used to limit the execution of the commands in this loop, is a combination of these two (AND):
    1. The number of steps taken by the image cannot go beyond the random number stored in v_dice (see first decision) and
    2. The total number of steps done, stored in v_stair, cannot be greater than 16, number of steps in this staircase.

    The commands to be done while that AND combination results in True are:

    • Switching the static dice to the next state (see image of the Object states for this static dice above)
    • Character gets on the next step (using custom effect StepUp, but that name has been changed by Captivate to the name of the effect it was based on 'RightToLeft'.
    • The variable v_counter is incremented, it is this variable which is used in the first condition
    • The variable v_stair is incremented; that variable is not reset by clicking on the Play button, is necessary to check if the top is reached (decision 2 'EndCheck').

    EnterGame triggered by the On Enter event

    Here is the Preview, let me know if you need more details

    Questions?

    Fire away. Creating this game was a lot of fun, 'while' exploring 'while' loops. Let your creative juices surge!

    Advanced Actions Dialog box in Captivate 2017

    Intro

    In my previous blog post about my preferred new features in Captivate 2017 I mentioned that the dialog box for Advanced Actions got a nice new layout. It is like new shoes, sometimes it takes time before they feel as comfortable as those old sneakers :). The focus of this article is on clarifying that new dialog box. Maybe you'll discover some unknown gems here as well? I recommend to download the example published file, or watch it (as SWF output) in that article if you are using a Flash enabled browser on a desktop or laptop. 

    Structure - sections

    The dialog box still has a fixed size (I wished it could be resized) and in this screenshot I indicate three sections, which I will explain more in detail below:

    1. Section 1: with the Global control panel to the right, two dropdown lists and the Action name field. That field has to be filled in for an advanced action, but not when your goal is to create a shared action (see Dare To Share).

    2. Section 2: has the control panel and navigation possibilities for the Decisions. Decision is the name used in the official Help documentation for those parts of the action that have the generic names 'Untitled_1'...(and function as buttons to navigate to a decision). When opening the dialog box a default number of 3 decisions will be present. You'll see in the screenshots that I am used to rename those decisions, certainly for an action with multiple decisions.

    3. Section 3:  shows the type of decision, has the control panel for the Commands or actions. I prefer the word commands to avoid confusion. 

    Nothing has changed at the bottom of the dialog box, with the buttons Usage (for the active Advanced action; for Shared actions you'll find the Usage button in the Library), Variables (which allows you to open the Variables dialog box if you want to create more user variables or check the available variables, you cannot delete variables when entering the dialog box from this button), Save as Shared Action... (will open the Shared Actions dialog box), Save or Update Action and the Close button.

    Section 1: Global

    On the first row you'll have:

    • Create from: followed by a dropdown list. I call this the actions template list. It will have the default template 'Blank' on top, but also the name of all shared actions in the project. One of the possibilities of shared actions is to use them as a template for a normal advanced action. The list is not alphabetically ordered. You can type the first character to navigate to a template starting with that character.
    • Control panel with 6 buttons
      • Preview button: this button is still unknown by many users, and has become even more useful than before. In previous versions you could only see a conditional action in this Preview, but since the former standard actions are now embedded in the same interface, you can also preview standard actions. Here is a screenshot of such a simple standard action. Watch the indicator 'Execute Actions' which means that this is a standard action. 

        The biggest advantage of the Preview window is for advanced actions with a lot of decisions, because you'll get an overview of all decisions. However: the operators for conditions (like 'is equal to ') are translated in the JS and AS equivalents (== means 'equal to', && means 'AND"). Parts of the decisions are collapsed in this example (triangle buttons):
      • Create New Action is the + button. It is no longer necessary to choose first of all the type of action, which was the case in previous versions.

      • Import Shared Action: works only for shared actions (doesn't appear in the tooltip). That same button is to be found in the Library. Personally I always prefer to import (and export) shared actions from the Library.

      • Export Shared Action: works only for shared actions (doesn't appear in the tooltip), same button as in the Library. 

      • Delete Action will delete the active action

      • Duplicate action: can be very useful. In some instances duplicate advanced actions are to be preferred to shared actions (maybe a future blog post).

    On the second row in section 1 you see;

    • Action name: compulsory for advanced actions. Be careful with names (sorry for the repetition), do not use names that are used for other items.

    • Existing Actions: has a dropdown list, ordered alphabetically. You can type the first character to navigate to an action starting with that character.

    Section 2: Decisions

    This section has these items, starting at the top left:

    • Control panel with 3 buttons (which now are not as tiny as they used to be in former versions):
      • Add decision (+ button): the decision will be added after the active decision (its name is bold and blue, non-active decisions have their name in regular black font).

      • Delete decision: active decision will be deleted

      • Duplicate decision: very useful. Look above at the second Preview example where decisions 4 and 5 are very similar to decision 3 and have been created with this button.

    • Previous/Next buttons: will navigate and make that previous or next decision active. These button have also 'grown up' :)

    • The last group at the right is also a navigation panel, but will mostly be dimmed, unless you have more decisions that can fit in the fixed width of the dialog box as you can see in this global screenshot:

      Those buttons allow to navigate, but will not select the decision you are navigating to, the present decision will remain active. First button scrolls to the first decision, second/third to the previous/next decision without making them active, last button scrolls to the last decision. Personally I suspect that I will not use those buttons often because you have another way:

    • Dropdown list with names of all the decisions is to be found under the triangle button at the end of the line with the decision buttons (which you can of course also use to navigate to a button). Of course, I am a labeling freak as you can see in the screenshot. When you select a decision from this list you'll navigate to that decision and it becomes active. Beware: the width of the dropdown list is limited, use short names or at least have significant characters at the beginning of the name. The list is ordered in the sequence of the decisions, you can use a first character to switch to a decision name starting with that character. More reason to label: if you leave all names at Untitled, you'll not get any help from 'U


    Section 3: Commands

    Select a decision by clicking on its button (Untitled_x as generic name or with a custom name). It is possible for each decision to choose its type: Standard, Conditional IF, Conditional While (loop). Look below for the differences. In this section you'll see several instances of the same control panel with a sequence of 8 buttons, some having a shortcut key (I use a Win system):

    1. Add (CTRL-N) will add an extra line after the last line of that part
    2. Remove (Delete): deletes the selected line(s)
    3. Copy (CTRL-C) will copy the selected line(s).
    4. Cut (CTRL-X) the selected line(s)
    5. Paste (CTRL-V) copied or cut lines: will work in between actions as well, as long as it is in the same part (depends on the type of decision)
    6. Insert (CTRL-I) will insert an extra line before the selected line
    7. Move Up: the selected line(s), can be useful because of the importance of sequence of commands.
    8. Move Down: the selected line(s), can be useful because of the importance of sequence of commands.

    Type 1: Standard 

    If you leave the check box before 'Conditional action' unchecked, you are ready to create a sequence of commands, formerly named a 'standard advanced action'. This screenshot shows such an action and before (under Control panel of the Global section 1 I showed a Preview of such an action):

    This type has only one control panel, since there is only one part in this type: the list of commands that have to be done in the chosen sequence. As told before, you can select a number of commands and paste them to the clipboard. They can be used within the same advanced action, in other decisions of any type, but only in the so-called 'Actions' part. However you can paste the copied lines also to another advanced action, with the same restriction.

    Type 2: Conditional IF

    To create a decision of this type, you have to check the check box  before 'Conditional action', and choose the option 'IF' in the dropdown list as is visible on this screenshot:

    This screenshot shows two parts of the complete decision, to see the last part 'ELSE' you have to click on the ELSE button at the bottom of the Actions part in the first screenshot:

    The three parts of this action: Condition, THEN (is not mentioned like that, second part under the Condition, ELSE have a control panel as described before. You can always copy/paste between the Actions part (THEN and ELSE), but the Condition part is 'standalone'.

    The first screenshot also shows the dropdown list, because you can define different conditions with AND (all conditions have to be fulfilled), OR or a combination of both (be careful with the last option).

    Type 3: Conditional While (loop)

    To create a decision of this type, you have to check the check box  before 'Conditional action', and choose the option 'While' in the dropdown list as is visible on this screenshot:

    For the Conditions the situation is identical to Type 3 (AND, OR, Custom). This type has only two parts however: the Condition and the list of commands that have to be repeated as long as the condition part results in True. Two parts means two control panels, not interchangeable. But you can copy/paste from another decision or action, as long as you remain in the same part (condition or Actions). 

    Conclusion

    I hope this bit boring overview was useful for you. Promised: next blog posts will be practical, still busy with examples concerning Pausing the Timeline (focus on audio). Explanation of usage of the new While loop, with some examples is on the way as well.  Not to forget: the very useful integration of Go to Next/Previous State in advanced actions: you'll get a tutorial for a user controlled or non-controlled presentation as well.

    TIP: for complicated actions with many decisions of all types, I add an extra character to the name: '..._S' for a standard decision, '...._C' for a conditional IF decision, and '...._W' for a conditional while loop. Easier to identify.

    If you have questions, issues with the Advanced actions of any kind, please fire away!


    Captivate 2017's gems

    Intro

    About two weeks ago Captivate 10, now labeled Captivate 2017 was released. If you did visit my blog in the past, you know that I prefer to wait a while before posting my first impressions. My focus is also more on the non-hype features added in this release, I call them the 'hidden' gems. Some are mentioned in the documentation, some not.

    Retina screen - software recordings

    Captivate 9 was the first release which could be used on retina screens. However to record a Video Demo or a Software simulation you did have to edit the AdobeCaptivate.ini file. It was a solution, but bit cumbersome. After the capture process you had to edit that same file again to be able to use Captivate on that screen.

    Tip: when using Windows 10 as OS, be sure to check the Display setting before recording a Video or a Software simulation. Bu default it will be set to a number higher than 100%. To record you have to reset it to 100%.

    In Captivate 2017 this is no longer necessary, thanks to the Adobe team!

    Advanced Actions enhancements

    The Advanced Actions dialog box has been refurbished, and many will have emphasized that it is now easier to combine standard with conditional actions. Personally I don't find that so important because the condition 'IF 1 is equal to 1' worked as well, but much more has changed. I will post an article later explaining the changes in the dialog box more in depth. 

    Enhancements Decisions

    The existing functionality for multiple decisions in former versions has been preserved: adding decisions, moving decisions, duplicating decisions. The buttons got another look as you can see on this screenhot. There has been added two extra time savers,  if you have a lot of decisions in one advanced action:

    • A dropdown list showing all decisions, and allowing you to navigate and select  a decision (Section 3, to the right)
    • A control panel to scroll to the next, previous decision, and to the Last and First decision (Section 2, to the right).

    Added commands

    I am very happy that the commands 'Go to Next State' and 'Go to Previous State' (one of my first feature requests when multistate objects appeared) are now available in the list with commands in the Advanced Actions. In Captivate 9 there were only available as simple actions (Actions Tab dropdown list). This improves efficiency quite a lot, as you will see in the example movie below.

    While loop

    It has taken a 'while' but finally we have a looping possibility in Advanced actions, no longer needed to switch immediately to JavaScript. In combination with the command 'Delay Next Actions.... ' a lot is now easier in advanced or shared actions. Just one pretty easy example: create a countdown animation by combining a counter variable, a while loop, an effect and that Delay command. While loops can be combined with standard and conditional decisions as well.

    Example movie

    This short example has two slides:

    • First slide shows a countdown animation and a progress bar. That slide is using the new While loop. Use the Start button to see the animation. When the animation is finished you'll get a Reset button. Here is a screenshot of the used action (Preview). .
    • The second slide is using the "Go to Next State" command both for the text items and the images with the sticky character. Use the Continue button to go to the next state. When all states have appeared, you'll get a Reset button.

    Test this movie out, if Flash player is enabled in your browser:

    You can download the published HTML5 version from this link.  You'll have to unzip the folder, and launch the index.html file.

    Typekit integration

    Finally we have access to the Typekit Library (I'm used to it using CC applications)! In the example movie I used two fonts which I already acquired with a CC subscription (Fira Sans and Rosario), but Typekit also has a free license. You have to check it out, time to get away from those limited set of websafe fonts. When publishing with Typekit fonts, you'll need to add a domain name. For testing purposes you can choose for 'Local host'. If you are collaborating on a project, you'll have to be sure that the collaborators have a Typekit license as well. In that case when opening a Captivate project, Tk fonts will be synchronized on their system.

    Responsive projects

    A lot of articles and tutorials have been published already to acclaim the use of Fluid boxes in responsive projects. However I am also happy that the 'old' way with Breakpoint views is still available as well. If you upgrade a responsive project from a previous version (8 or 9), it will automatically show in the Breakpoint view mode, since the development has happened in that mode. After two weeks with Fluid Boxes in CP2017 I don't have enough experience yet to judge their full power. My first impression is that the kind of project will indicate (dictate?)  the choice of the development work flow:

    • Fluid Boxes mode development will be a big timesaver for text-heavy projects. No need to check all text container styles for font sizes in all breakpoint views, no need to adapt the margins, leading to have text fitting in a text container on any mobile device.
      The continuous slider to see the changes for all possible browser resolutions is great!
      The design of a responsive theme with fluid boxes needs a different set of mind: how to set up the grid with Fluid boxes in content master slides. 
      The minus point of working with Fluid boxes is that you lose some control. My teacher's experiences learned me that you cannot use the same layout on a smartphone as you use for a laptop or even a tablet screen. That will make using Fluid boxes not appropriate for all courses. If you are a die hard designer, maybe you will not like the way that objects will be handled when the browser resolution changes? 
      Objects in a Fluid box are essentially in a 2D space: you cannot have overlapping objects. That is the reason why the Help explains that Zoom objects, Highlight Boxes and Click boxes are not allowed in a FB. The line object and mouse objects are excluded as well. However you can use them in a static Fluid box.

    • Breakpoint mode development is a lot more work, but gives you more control for layout differences between devices and for design. You can have overlapping objects, and with the exception of the Rollovers almost anything can be used.

    Tip: to switch to Breakpoint view development use this option in the Project menu:

    The possibility to change a normal (blank) project to a responsive project is a much asked for, very useful addition. The reverse is not yet possible, responsive to non-responsive.

    After some more experience with using Fluid Boxes, my opinion could change of course. Anyway I am persuaded already that the customisation of the theme is more important than ever. If you wonder why, maybe have a look at this article: 'What is in a Theme/Template?'

    Update August

    This week I discovered an undocumented enhancement thanks to a user on the forum: 

    https://forums.adobe.com/message/5077114#5077114

    When using the Submit All feature for a quiz, up till now it was not possible to localize this popup dialog box (style can be changed using the Object Style Manager):

    In Captivate 2017, the dialog box whidh appears when you click the option 'Submit All Messages in Quiz, Preferences has all you need to localize everything. In previous versions this dialog box had only 3 items.

     

    More?

    This personal view on the new features/enhancements in version 2017 (10 under the hood) is based on a limited time of exploration. In a future blog post (or showcase) I will give more details about the creation of the example movie. As promised, the overwhelming number of buttons and features in the new Advanced Actions dialog box will be the subject of another tutorial. At least, if you find this useful?






    Interactive Video Buttons

    Intro

    When I posted the article about Pausing the Timeline (part of the sequence of articles about that most important panel), I promised to add some use cases to illustrate using pause and pausing points. Let us start with a  simple use case, based on a recent forum question in this thread: Interactive Video Buttons


    Use Case - description

    It is clear that the user is not aware of the difference between pausing the timeline by an interactive object (pausing point) and by the command Pause. The idea is that the learner, while a video is playing, can launch a popup that has some static content (text, images...). While that popup is opened, the video should pause. On closing the popup the video should resume playing. The user proposed to have a close button for that purpose, which is the easiest solution (Scenario 1 below).   hyperlink instead of the close button as I described in this article: More is in a hyperlink - Close button

    It could also be done with defining the open button as a toggle button Scenario 2).

    For both scenarios it is necessary to insert the video as a multi-slide synchronized video to be able to control the video with Captivate functionality. If you insert the video as event video it will play totally independent from Captivate.

    Scenario 1 

    In this scenario the popup will appear with one button, and be hidden by another button or hyperlink. 

    This makes it possible to have two actions, simplifies the setup: no need for a variable, no need for a conditional action. You can use two standard actions. If you want multiple buttons and popups, or expect to be using this work flow in other projects, I strongly recommend to create shared actions instead of advanced actions. This article will describe only the advanced standard actions.

    Have a look at the setup of the slide. Look at the Timeline panel. It has only 3 objects (from bottom to top: video, shape button, popup). In the screenshot the shape button SB_Info is selected. It will open the popup 'Info'. Look at the Timing properties of the button. The option to pause is unchecked (which is not the default situation), the shape button is timed for the rest of the slide. The result is that the button will be active for the whole slide, there is no inactive part. 
    The popup in this example is a shape used as text container, labeled 'Info'. That popup has to be invisible in output (eye icon in the Properties panel). If you expect that the slide can be revisited,  a better approach is to use the On Enter event of the slide to hide this popup 'Info'. To close the popup I preferred using a hyperlink over a close button.  The popup is ta single object. If you prefer to have a 'real' close button, you'll end up with two objects (text +  button). In that case you can group them, to reduce the number of commands for showing and hiding.

    Standard Advanced Action ShowContent

    This action is triggered by the Success event of the button SB_Info as you see in this screenshot:

    After showing the popup (only one text container, can also be a group), I choose to disable the button SB_Info. If you want it to more user friendly, you can add a custom state 'Inactive' to that button and change to that state. This will avoid confusion for the user, some may expect that button to be a toggle, which is not the case in this first scenario. The last command will pause the timeline unconditionally, resulting in both video and audio to be paused.

    Standard Advanced Action CloseContent

    to be triggered by the hyperlink over the big X character:
    if you prefer a Close button, this same action will be triggered by the Success event of that button; you can use exactly the same action. If you are using a responsive project, or HTML5 output only, the work flow with a button is to be preferred because the hyperlink event is not to be trusted with HTML5 output.

    It is a similar advanced action (use the duplicate feature), with three commands which are the opposite of those in ShowContent: Hide (was Show), Enable (was Disable), and Continue which will release the Playhead, both video and audio will resume.

    Scenario 2 

    In this scenario aToggle button is used both for opening and closing the popup.

    In that case you can use an approach similar to what I explained in: 1 action = 5 toggle buttons
    It is a little bit more complicated because:
    • You need an extra custom state for the popup button which indicates that it changes to a close button after having opened a popup:
    • You'll need a variable to track the status: I will use v_visib, a Boolean, with value = 0 when the popup is not visible,
      and value = 1 when the popup is visible; since I used a shared action from an external library, that variable is created automatically.

    • You'll need a conditional advanced action to be triggered by the Success action of the button:, this is the advanced action version created based on the shared action:

    More Possibilities

    An interactive video will often be spread over multiple slides, to offer navigation buttons to different parts of the video. It is not a problem to have the scenarios available on all slides: time both the button and the popup groups for the rest of the project, always on top.

    I mentioned the possibility to group a close button with text, but groups with more objects are possible as well: image, shape, animations. Group all together, hide the group On Enter for the slide, and you only have to replace the single object in the scenarios above by the group. 

    Turn the actions into shared actions, and keep them in a separate project. You can open the Library of that project as an external Library in future projects. Especially the toggle action, it will save time because you don't have to create the user variable.

    Future use case, example of Pausing the timeline, will be about audio. It is more complicated because there are several ways to use audio in Captivate, perhaps I will need more than one post.