3 Audio Tricks

Intro

Last week I answered several questions about audio on the forums with pretty simple workflows Maybe you will like them? Contrary to what you are used to read in my blog, this is a short article, there is no example movie.

Trick 1: Audio when hovering over a (shape) button

Buttons and shape buttons have 4 InBuilt states: Normal, Rollover, Down and Visited (only available in CP2017).

Quite a while ago I explained what I mean by an 'Audio Object'. It is a shape or a highlight box, which you make invisible to the user by changing the stroke width to 0 and set the Alpha for the Fill to 0 as well, but attach audio to that object. If you want to learn more about them have a look at this post.

This screenshot illustrates the workflow. The audio (Cymbals) will only play when hovering over the button.

Trick 2: avoiding overlapping audio on quiz slide

A problem occurs on quiz slides with following setup:

  • Slide audio plays explaining the question
  • Object audio is attached to the Feedback messages

Problem is that when a learner submits the answer(s) before the slide audio ends, there will be overlapping of the slide audio with the audio of the message that pops up. It is not possible to control the appearance of the Submit button, since it is an embedded object, has no individual timeline. Submit button in all Captivate themes is of the type 'Transparent button'. This was my workaround, and the user confirmed it was working perfectly:

  • Create an image that is similar to the Submit button. That is perfectly possible with a shape: same fill, same stroke, same font, font size and font color as the quiz buttons.
  • Take out the label 'Submit' from the original Submit button, set the stroke width to 0, alpha for the Fill to 0 so that it becomes invisible. It will still be active.
  • Put the image in the same location as the invisible Submit button (use Align menu).
  • Change the start of the timeline of the image, so that it begins just at the end of the slide audio.
  • Move the pausing point of the quiz slide to be after the end of the slide audio. Only way to do that is by mouse dragging. That pausing point is not in the Timing panel.

Why is this working? Because the Submit button is an embedded object, it is always on top of added custom objects (the image). That means it is active! Only when the learner would click by accident on the 'invisible' active button, the problem will occur. But in most circumstances the learner will not be aware of that possibility and will wait patiently until the audio finishes and the 'Submit' indicator appears.

Trick 3: Audio in states

Just want to refresh your memory: it is possible to attach audio to states. When you change a state, the audio of the previous state is automatically stopped. A feature that you can use in many ways as I illustrated in these movies:

Automatic Lists

Drag&Drop Object Actions

You can even create a shape with states that are invisible but have all audio clips. Let your creative mind wander....


Poster Image - AutoPlay

Intro

This short blog post is meant to help solving an issue that pops up in the forums once in a while: "How to get rid of the white screen and Play button on mobile devices?". When publishing to HTML the AutoPlay is automatically disabled,  Reason is that some devices and OS (iOS) do not allow Autoplay. For SWF output you had the choice: it was possible to change the default setting which was to have a movie playing automatically after loading. I often disabled that option when embedding SWF's on my blog (look at older articles), especially when audio was involved because it is not very polite to have audio being pushed to the reader automatically. 

Consequence of the AutoPlay being disabled without your control as developer, is the appearance of a big white screen with a small play button right in the middle. The button looks like this (but originally one is smaller, 96x96), black arrow in black circle with transparent background:

Such a button will not always blend well in the design of your project.

Poster image

To get rid of the white screen, you need to create a "poster image"? That is a static image, preferably with the same resolution as your project. For a non-responsive project, published with Rescalable turned on, the poster image will fill up the screen. All embedded HTML movies in my blog were using this type. 

Mostly I duplicate a slide from the project to create such a poster image, Duplicate because it may need some editing, especially if you also want to have a better looking Play arrow. I will take a screenshot of that slide while it is playing to save as a PNG (or other image format) and then hide the slide to avoid it to be included in output. 

When the image is ready, set up the Preferences, Project, Start and End: turn off AutoPlay and indicate the poster image.

Play Arrow

My personal hack to have a play arrow that is fitting with the design of each project is this workflow:

  • I created a copy of the original image  C:\Program Files\Adobe\Adobe Captivate 2017 x64\HTML\assets\htmlimages\PlayI_icon.png and edited to turn it into a full transparent image 
  • I renamed the original image and put the empty image in the same path.
  • On the poster image I created an arrow, mostly I use a triangular shape, rotated 90°, using colors from the project Theme Colors palette. You will have seen them in previous blog posts.
  • That Arrow has to be centered horizontally and vertically. 

Dimmed or not Dimmed?

The uploaded published HTML project will by default have a dimmed Poster image (Alpha = 70%). It was meant to have the original Play icon stand out from the background. But that black play icon is gone:

A helpful user on the forum posted the solution: Mark Sabrento  Thanks a lot, Mark (screenname sabre123). I tried it out and it works great. You find it in this  thread

Look for the file CPM.js, which you'll find in the published folder under \assets\js

Open his file in an editor (I use Brackets, but even simple Notepad is possible). Change 0.7 to 1 in this line to set the opacity(alpha)  to 100%

cp.autoplayImage.style.opacity=0.7




Drag&Drop Actions

Intro

In the webinar which I presented on 2018/3/15 about Shared Actions, I showed several workflows with shared actions. If you want to have a look at the presentation used during the webinar, look at my previous blog post. You'll find a link to the published interactive movie

One of those examples, was a Drag&Drop slide where both advanced and shared actions were used as Object Actions. It can help you with the tough task to choose between the two types of actions. A similar example appears in the presentation, where only a shared actions was used. It had 7 drag sources and two drop targets:

Example movie

You can watch this movie to understand the goal of the D&D slide. It has 6 drag sources and only one drop target. You will be asked to drag only the correct new features in CP2017 to the drop target. Only when the answer is correct will you see the Next button. There is a Reset button for the D&D, which is not the default reset (because of the states used on the drop target) but uses an approach which I have explained already multiple times.


Setup D&D slide

Auto Submit Correct Answers is activated, and the Submit button has been dragged to the scratch area. The drop target accepts all drag sources, which will disappear behind the target but the count is limited to 3 (because there are 3 correct answers). Due to the Auto Submit which only will happen for the correct answer, the Next button will only appear when the answer is completely correct (Action 'On Success'). 

The drop target is a multistate object. I didn't add InBuilt states in this case but three custom states, using a gradient edited for each state with 'Edit Gradient'.

On the slide, not overlapping with any object, there is a multistate shape, labeled 'Comments',  acting as feedback container. The normal state is blank and you see the other states in this screenshot:

Advanced Action DD_CorrectAct

I imported the shared action used in the presentation to the project Library and used is as a template for this Advanced action DD_CorrectAct. I added the Play Audio command. First I tried to add the audio to the state 'Correct' of the multistate shape 'Comments', but that proved not to work in this case, probably due to the Drag&Drop limitations. After the duration of the audio clip (4secs) the shape reverts back to the Normal state, which is invisible to the user (Alpha and Stroke set to 0).

Sorry for the generic label on he drop target. You probably know from my previous blog posts that renaming an object used in a D&D interaction, will kill the set up. 

Since this action is used with exactly the same feedback text and same audio clip for 3 drag actions it is much better to use an advanced action in the situation. 

Shared Action DD_IncorrectAct

The previously described Advanced action DD_CorrectAct is used as source to create a shared action. Since there is no state change needed for the drop target, the fifth command can be deleted. Five parameters are needed (due to the fact that audio couldn't be embedded in states). Four of them are compulsory parameters, one candidate was turned into a parameter: the literal for the delay time. That delaty time has to be at least as long as the audio clip to be played.

You just need to apply the advanced action and the shared action to the proper object actions: 

Want more?

Goal of this simple example was to show when to use a shared action instead of an advanced action? It could have been done with 3 duplicate advanced actions, which is what I see most clients doing. Start to appreciate the advantages of shared actions over duplicate advanced actions:

  • Ease of transfer to other projects
  • Management in the Library
  • Possibiity to use as template

Give it a try. If you want to learn more, give me some feedback, please.






Webinar Shared Actions!

Update

Thanks to all who attended the webinar, mentioned below. As usual I created a presentation with Captivate (2017) for this webinar. This allowed me to convert it to an interactive movie, which I want to offer to all readers of my blog.  I hope you'll enjoy it and learn something about Shared Actions, which are so ignored by most Captivate users. 

As for a normal training I like to use the subject of the training in the presentation. As you can see in this screenshot of the Library many shared actions were used in the presentation:

Their usage can be found in the Advanced Interaction panel, with the exception of the shared action which was used on the Drag&Drop slide:

I plan to explain some of those shared actions in future blog posts. Another plan is to write a more elaborate workbook for Shared Actions, which can be used for exploring in-depth, but also as a 'cookbook' because it will have recipes. A typical use case for Shared actions are Custom question slides, which are not treated in this short presentation. If you think a workbook would be help you  please send me a note or post a comment.


Invitation

If you are interested in a live session about using Shared Actions, you can register for the webinar on March 15, at 4pm CET (8am PT).  You'll find the link to the registration form for  webinar 'Dare to Share: Power of Advanced Actions in Captivate'. at the end of this invitation.

The majority of my blog posts are dedicated to advanced and shared actions. Advanced actions is a feature of Captivate since version 4. It allows to extend Captivate's functionaltiy in many ways, without having to learn a programming language. With the point-and-click interface of the new enhanced Advanced Actions dialog box in CP2017, you can realize scripts that will be converted to JS on runtime for HTML output (if you still use SWF output, will be converted to AS3).

Shared actions were new in Captivate version 7. They are a more flexible alternative to Advanced actions, with focus on reuslability. Due to the presence of parameters, to be filled in on assigning a new instance of the shared action to an event, you can adapt the action to each new situation. In Captivate 8 variables and literals became possible parameters as well, thus increasing that usability. Shared actions have some other important advantages over Advanced actions: they will appear in the Library like any other asset. Using the External Libraries feature this makes exchanging shared actions between projects very easy. The Usage button is available for Shared actions.

Variables that are not defined as parameters will be automatically created in a new project when you import the shared action using it. That is a real timesaver.  Some parameters can have only one type (variables, literals, states, audio clips) but most of them can have different types:  they can be a group, an image, a video, whatever you need in that project.

Less known is the ability of using a shared action as a template for the creation of an advanced action. That can be a great time saver. Learn about this feature as well in the webinar


Poster

You're welcome to particapte in this webinar, Here is the registration link:

Dare to Share

Be sure: you’ll walk away with many creative ideas!  As a plus: you’ll be working in the brand new Advanced Actions dialog box of Captivate 2017.

Shared or Advanced actions?

Why?

Shared actions were a new feature in Captivate 7 and were improved in Captivate 8. Nevertheless I rarely see examples of shared actions, and there is also lot of misunderstanding.  Some users think they can only be reused in other projects. I did see experts claiming that they are totally useless, that it is much easier to duplicate advanced actions. I don't agree with that opinion, about 90% of all the project I have developed do include shared actions. They are especially useful for responsive projects as well. In a recent article you can find links to tutorials about shared actions.

 A problem that still remains is that you cannot edit an existing shared action, had hoped that would have been solved in 9 in a recent version but it didn't happen. The reason is probably that since they are not much used, this improvement doesn't get on the priority list. If you want to learn more about how to create shared actions and see some examples, have a look at this recent article in which I summarized several older posts. This post is a showcase, where I'll try to explain when to use a shared action, and when you cannot use them. The origin of this showcase is due to this question in the forums. The answer I gave there is working, but has a serious drawback, I will explain both this first simple answer, followed by a second version that will work in all situations. I hope you learn from that workflow: test out all possible situations, even though they seem to be improbable. As a trainer/coach never underestimate how trainees will explore courses.

Problem

User did look for a solution to apply to this use case:

  • Drag&Drop slide with two drag sources and two drop targets
  • Each drag target should accept only one drag source
  • Depending on the sequence of the dragged items, one out of two texts should appear.
  • Learner can switch the drag sources
  • Auto submit for the answer.
  • Slide needs a reset button

Example movie

Watch this embedded movie (rescalable HTML), where you'll see the two solutions after publishing. As an alternative you can also watch it directly using this link. You can test the problem with the first solution as well. Everything works fine if you switch only once, like first dragging the First text to the Top target, than drag the Second text to the Top target. However if you switch a third time, First text to the Top target, you'll see that the functionality is lost. This will not happen with the second solution.


Setup Drag&Drop slide

The setup is the same for both solutions. Drag sources are shapes and labeled SS_DragOne and SS_DragTwo. The shapes acting as drop targets are labeled SS_DropTop and SS_DropBottom. The feedback will appear in another shape SS_Feedback, which has 3 states: Normal, OneTop (first scenario with SS_DragOne in SS_DropTop) and TwoTop (second scenario (SS_DragTwo in SS_DropTop). 

Since Auto Submit is turned on in the Actions tab of the Drag&Drop panel, I dragged the Submit button out of the way to the scratch area. 

That means that both possible answers have to be defined as Correct answers. This can be done with the button 'Correct Answers' on the Options tab of the Drag&Drop panel.

Each drop target should accept only one drag source, but the learner can switch them if wanted, as long as no correct answer has been defined. For that reason editing the dialog box 'Accepted Resources' is necessary, because the default setup is that each Drop target accepts all drag sources. This dialog box can be opened from the Format tab of the Drag&Drop panel, when a drop target is selected. It has to be repeated for both targets. Rest of the setup like snapping behavior is not important for the rest of the workflow, do what you like.

First solution

This solution is using two variables: v_first and v_second. They are related to the first scenario (SS_DragOne in SS_DropTop and SS_DragTwo in SS_DropBottom) and the second reverse scenario. Default value of the variables is 0. 

I used the same shared action for all object actions, for both targets. It is pretty simple, conditional with one decision. It has three parameters:

  1. First parameter is the variable associated with the scenario, v_first or v_second. 
  2. The multistate feedback object is the second parameter
  3. The state to be shown, which fits the scenario is the third parameter.

This was the original idea:

  • When the first drag action occurs, it fits into either scenario 1 or scenario 2; the appropriate variable is set to 1.
  • If the drag source is replaced on that same target nothing happens.
  • When the second drop target is filled with the other drag source, it has to be in the same scenario. Checking if that associated variable has a value=1, means that both targets are filled, and the feedback is shown, depending on the scenario variable.

What is the problem with this action? It works fine until the user changes the object twice on the first target: in that case the feedback will be shown to early. That was the reason for the second solution which does avoid this problem.

Second solution

Besides the two scenario variables, a third variable to track the number of drag actions was created: v_counter. It started also with a default value of 0. The shared action now has 3 decisions as you can see in this Preview:

The first decision 'Always' is a mimicked standard action. The increment command for both v_counter and the associated scenario variable (v_first or v_second, depending on the object action) will always be done.

The second decision 'Complete' checks if both targets are filled, which is the case when both v_counter and the associated scenario variable have the value = 2. In that case the correct feedback is shown (similar to first solution).

The third decision 'Incomplete' is the one that solves the problem with solution 2. If there has been 2 drag actions (v_counter is equal to 2) but the associated variable for the active object action is still set to 1, that means that the user has switched the drag sources on one target two times. In that case the variable for the other scenario (which probably has already a variable different from 0) is reset to 0. 

It is not necessary to define v_counter as parameter, since it will be used as counter whatever the scenario. This action needs 4 parameters, because both v_first and v_second are used in the action; whereas in solution 1 only one of them was used..

Reset 

This is not the default Reset from Drag&Drop, because it will not reset the variables nor the state of the feedback container. I used the usual workaround (micronavigation as explained in 'Replay Slide' is not possible yet due to a HTML5 bug in CPwhere the On Enter action is not executed) to reset the variables and that feedback container. Two dummy slides with a duration of 0,1sec are inserted: one before each D&D slide. The reset button triggers the command 'Go to Previous Slide', thus forcing the playhead to re-enter the D&D slide.

The On Enter action 'EnterDD' is also a shared action and looks like this:

I used that action for both D&D slides, even though v_counter is not used in the the first solution. 

I hear you! Why a shared action, you only need it twice, and the only edit to make to a duplicate advanced action is the label of the feedback container. If you were one of my college students, you would know that 'Weymeis never acts without a reason....'. I will try to explain why I preferred a shared action with two parameters, instead of two advanced actions.

When you import this shared action in a new project by dragging it to the Library from this project opened as External Library (see Libraries) the variables v_counter, v_first and v_second are created automatically in that new project, with their definition and default value. That is a time saver, something to take into consideration when creating shared actions. This happens only for variables that are not defined as parameters.

Offer

Do you want to try out those actions? Send me a mail (info@lilybiri.com) and tell me if you use shared actions, or will use them in the future?  As a 2018 offerI will send you a project that you can use as external library with the two shared actions (EnterDD and DragSequence) described in this blog post, and instructions how to use them.


Custom Review

Goal

This question recently appeared on the forum (thread):

"I'd like to customize the results page at the end of a quiz to display the numbers 1 to 20 (representing the 20 questions in the quiz) and indicate if each question was answered correctly or incorrectly."

Although I posted an answer, the user never returned to check it. Since I have spent some time to work out that solution, I also discovered that it could be very useful in two situations that are often mentioned as failing in the normal Captivate design:

  • To show the user an overview of answers on a test with Knowledge Check slides: which anwsers were  correct/incorrect? If you are not sure about the differences between KC slides and normal quiz slides, have a look at this article.

  • To create a Review slide, where the learner would see the same information for normal quiz slides. Captivate has a great Review feature for quiz slides (not for KC slides) but it has some shortcomings. It will not only show the answers by the learner but also the correct answers. Moreover, clicking the Review button will cancel all remaining attempts on Quiz level for apparent reasons. With the solution I propose the user would not see the correct answers, only which questions were answered correctly or incorrectly, and the Retake attempts would still be available. 

The work flow is based on a couple of simple shared actions, use of multistate objects (for the feedback checkmarks) and some advanced actions.

Example movie

Watch this embedded movie or use any device to open this link (it is a rescalable, non-responsive HTML5 project). 

You will first see a test with two Knowledge Check slides, followed by a 'Review' slide. You will be able to retake this test, or to continue.

Second part is a realy quiz, with 5 question slides. Question slides are followed by a Review slide. In Quiz Preferences I provided 3 attempts. When the attempts are exhausted or you succeeded passing the test, the Next button (was formerly a Retake button) will take you to the official Score slide.

.

Set up

Checkmark - multistate object

The checkmarks, both on the Review slide for the KC question and for the real quiz, are shapes with 3 custom states:

  1. Normal state: shape is invisible because Alpha for Fill and Stroke for Width are both set to 0.
  2. Correct state: shape is filled with a PNG representing a green tick symbol. This can of course be all you want: text, text + image, text + image + audio. I kept it simple. 
  3. Wrong state: shape is filled with a PNG that is the Cross symbol.

Here is a screenshot of the Object styles for the checkmark:

The checkmarks are labeled: Check_KC1 - Check_KC2 for the KC slides, and Check_1, Check_2.... Check_5 for the Quiz slides. The numbers make it easier to select them by filtering in the Parameters dialog box, because they are used in the shared actions.

Retake button Quiz Review - multistate object

That button on the Review slide for the Quiz, is used to start a new attempt because the user will not see the Score slide. I had to reproduce he functionality of that Score slide, where the Retake button automatically disappears in two situations: either the learner has passed the quiz, or the Quiz attempts are exhausted. I solved that by adding a custom state to the Retake button, where the label changes to 'Next'. To have a non-confusing Rollover and Down state, which would be valid for both the Retake and Next button, I used the text '>>'. This is the Object state panel of this button, type Transparent button like the Quiz buttons and buttons on the Score slide: The advanced action (see below) EnterReview will take care of switchnng beteen the Normal and Passed state.

The Review slide for the KC questions doesn't need that type of button. It has two buttons: Retake for those who want to retry the KC test (answers are always reset for KC slides when leaving them) and a Continue button.

KC/Question Slides - variable v_KC

I changed the default setup to only one attempt for the KC-slides (default =  Infinite attempts). That change made the Last Attempt event availalbe. Contrary to Quiz slides the results of the KC-slides are not stored in exposed system variable. I wanted to show a 'trophy' on the Review slide to learners who correctly anwered all KC-questions. To track the correct answers, I created a user variable, labeled v_KC  which starts with a default value of 0 and is incremented for each correct answer. For the same reason, the shared action triggered by the Success event is different from the one used for normal quiz slides. If you import the shared action to another project, the variable will automatically be created. 

Quiz slides kept the default setup: only one attempt allowed.

Events for Actions

On KC-slides Success event (Quiz Properties) is used for Shared Action 'CorrectAnswerKC'

On KC-slides Last Attempt  event (Quiz Properties) is used for Shared Action 'WrongAnswer'

ReviewKC slide On Enter event triggers Advanced Action 'EnterReviewKC'

Continue button Success event (on ReviewKC slide) is set to simple action 'Go to Next Slide'

Retake button Success event (on ReviewKC slide) is set to simple action 'Jump to slide  KC1' (first KC slide)

On Question slides Success event (Quiz Properties) is used for Shared Action 'CorrectAnswer'

On Question slides Last Attempt  event (Quiz Properties) is used for Shared Action 'WrongAnswer'

Review slide On Enter event triggers Advanced Action 'EnterReview'

Retake button Success event (on Review slide) is set to simple action 'Go to Next Slide'

Score Slide On Enter event triggers Advanced Action 'EnterScore'


Shared actions

WrongAnswer triggered by Last Attempt event (KC slides and Quiz slides)

It is a very simple action with two commands: changing the state of the associated checkmark to the Wrong state and going to the next slide. There are two parameters: the checkmark (which is different for each slides) and the state. Although the state always has the same name (Wrong), there is no way to turn it into a 'fixed' parameter (one of my feature requesnts). Here is the action with filled in parameters

I like the way it is possible to track shared actions in the Library, look at the Usage panel for this action/ You see that this shared action is used both for the two KC slides and for the 5 Quiz slides.

CorrectAnswer triggered by Success event Quiz slides

It is a similar action, now showing the state Correct in the first command:

CorrectAnswerKC triggered by Success event KC slides

I used the CorrectAnswer from Quiz slides as template to add an extra command that will increment the variable v_KC.

Advanced Actions

EnterReviewKC triggered by the On Enter event of the ReviewKC slide

This is a simple conditional action, to decide if the trophy will show up or not.

EnterReview triggered by the On Enter event of the Review slide

This conditional action has two decisions. The first decision will change the state of the Retake button to have a Next button if the quiz has been passed or the Quiz attempts are exhausted. The second decision is about showing an image if the quiz has been passed. It also shows or hides the text mentioning the number of the present attempt.

EnterScore triggered by the On Enter event of the Score slide

This is the 'trick'. To have the functionality of a Retake button on the previous slide, which is the Review slide, the playhead visits to the score slide, but will immediately jump back to the first question slide. All quizzing system variables are reset in that case. Only when all attempts are exhausted or the learner passed the quiz, will the score slide become visible to the learner.

More is possible...

Several enhancements are possible based on this approach:

  • You can have multiple review slides, if there is not enough space on one slide

  • You can have a review side after a chapter which has some question slides or KC slides; in that case you'll have to tweak the advanced actions; if you want to track different bunches of KC slides you can either reuse the variable v_KC or use several variables. In the last scenario you'll have to turn the variable in the shared action into a real parameter.

  • I used a simple checkmark to indicate correct/wrong answers. It is not limited to that: in custom states you can also have audio, text etc...

More ideas? Suggestions?






:


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.

Timeline - Advanced Workflows

Intro

At the Adobe Learning Summit (Las Vegas - 24 October 2017) I was invited to present a session about the Timeline for advanced workflows. It is one of my favorite subjects (bit below my most preferred topic 'Advanced/Shared actions') because I see so many questions on the forum that are due to not or misunderstanding the Timeline functionality.

Tutorial

For those users who were not able to attend ALS2017, I converted my Captivate presentation into a self-paced learning tutorial.

It has been published as Scalable HTML5 project. Autoplay is turned off (not allowed in some OS), just click the triangle button to start the movie (with narration). You can watch it directly on any device from this link

Or you can watch it below:

The tutorial has at its end links to different published movies, examples using the described features of the Timeline. Several features are used in the movie itself: skipping audio on the dashboard (second slide) on later visits, Delay commands for automatically building lists on different slides. Be sure to use the circular button at the bottom to show the value of the system variable cpInfoCurrentFrame, to discover (some of) my secrets.

Feedback

I would appreciate feedback and welcome questions. Are you interested in learning more about the examples? Are the mysteries not totally clear to you? Please let me know... If you want a copy of the handouts created for this presentation, send a mail to info@lilybiri.com.




Power of Shared Actions in Captivate

Intro

Shared actions were a new feature in Captivate 7 several years ago. They were improved with Captivate 8.  I never understood why almost no one talks about them, even self-labeled experts seem never to use them. This is a real pity because their power is much underestimated. In most projects I open an external library (have a look at Internal and External Libraries) which has frequently used shared actions. It saves me a lot of time in each project. I will try to summarize in this blog post the results of my almost 5 years of experience with Shared actions. As usual my goal is to get more CP-users to understand when and how to use them.   More users could mean getting enhancement feature requests on the priority list of the developers :)

Example movie (CP2017)

Please watch this movie, one of the examples I will explain at the Adobe Learning Summit, session 202 'Make the most of Captivate's Timeline for Advanced Workflows'. You will see in this movie how one shared action can be used both to skip slide audio on revisiting a slide, or to force to view the entire slide on first visit. This is a use within one project. That action certainly has its place in a common external Library. To have an explanation of the shared action, you'll have to be patient, because I want to give 'First View' to the participants of the session in Las Vegas, 24 October.

Published Tutorials Shared Actions

These posts were published 4 years ago (yes, have over 4 years experience with SA :-)). If you are on CP2017, the screenshots may be a little bit different because of the change to the Advanced Actions dialog box (see AA Dialog in 2017). However the work flow and terminology for Shared actions is still the same.

Use cases

Following on those tutorials I explained a bunch of use cases where shared actions were used. Examples are the way to explore new features, and you'll find a list with links here:

1 (shared) Action  = 5 Toggle Buttons

This blog post has a unique shared action that you'll be ablefor several toggle button in all your projects. The post was written  for Captivate 8. If you are using Fluid Boxes work flow (responsive projects) in CP2017, you can have the toggle buttons in a fluid box on master slides, not timed for the rest of the project (unless in a static fluid box):


Dashboard, using shared actions

The advantage of shared actions when setting up a menu or dashboard

Drag&Drop Tips

When using object actions for Drag&Drop slides, shared actions can be an excellent choice over duplicate advanced actions


Custom Hotspot Questions

Using shared actions to create a custom controlled hotspot question which has lot of advantages over the default type of Hotspot question.


Forcing First View

This is an older version of the Example that you watched above. It did already use Shared actions.

Matchstick Game

Games often need repetitive actions and that means that shared actons are the way to go.


Playing with Captivate 9

Another version of a dashboard created with shared actions, to celebrate the arrival of CP9.

Myths and tips

Strange myths exist about Shared actions. Lot of users believe they are only useful  between projects, not in the same  project. Personally, with the exception of the external library mentioned at the beginning, I always give priority on shared actions within one project over advanced actions if appropriate. If an action is used at least twice in a project, and it is possible to use a shared action, I will not use duplicate advanced actions.

Half-myth is that you cannot edit a shared action. That is partially true. You cannot edit a shared action which is already assigned to events and have it changed automatically. However you can use the original shared action as template to create a new shared action. You will have to assign it to all events after completing the new shared action. At that moment you will appreciate the fact that the shared action appears in the Library and has a Usage button  -  like any other asset. Contrary to advanced actions you can even reuse the same name for a shared action, provided the older action is no longer present in the file. That is one of those annoying things, that you can never reuse a name for an advanced action, even if it has been deleted. Keeping track of Usage of advanced actions is also very cumbersome.

Shared actions cannot replace advanced actions in all circumstances, and they need a different set of mind when preparing the actions. You have to be very careful with the candidate parameters: variables and literals.  I could tell a lot about spectacular results when replacing advanced by shared actions that are set up in an efficient way: courses that couldn't be published anymore because of the number of variables and advanced actions that now run very smoothly, decrease of file size and loading time when using shared instead of advanced actions. Once lot of Captivate users gave me the title 'Queen of Advanced Actions'. At this moment I feel more like the defender of Shared Actions, not the first ignored and underestimated stepchild of Captivate.  Too often I hear comments like: 'I cannot see any advantage in using shared over advanced actions'.  Sorry, but that means you never tried them out. This article proves that I have explored them.... and they are on my top feature list of Adobe Captivate.

Conclusion

I would love to organize an online training with focus on use of shared actions. If you would consider such a course a valuable add-on to your skillset, please send me a message using info@lilybiri.com.



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 :)