Randomizing in Captivate

Intro

Randomizing exists in some limited situations in Captivate:

  • Question pools allow to add randomized quiz slides to a project.
  • Shuffle feature for several question types can be seen as randomizing.

However in all other situations you need to use JavaScript to get a randomized number (or text). This short blog is meant as an answer to a user request in the eLearning community, to be found under this link. In my blog you will find multiple examples of randomizing for games. This is a very simple example since the user only wants to have a random card chosen from a deck on clicking the deck. A second click on the deck needs to flip back to the cover of the cards.

Example file

There is only one slide in this project besides the Title slide. The three (tarot) decks are identical, have 14 cards. Try it out. You may get some ideas how to use this workflow for games. In the future I will post more examples of this workflow in a bigger tutorial project. 

This example can be watched below (fixed size) or you can click this link for a rescalable version.


Step-by-step workflow

The timeline of the tarot slide shows the three decks. Each deck has a Click box on top of the deck, which will trigger an advanced action with embedded JavaScript. I hear you exclamations! Why not use the deck itself (PNG image) as interactive object. It is impossible because JS is used to change the state of the object, and it is impossible in that case to use the image itself as button. Of course that is annoying, because a responsive project with Fluid Boxes will not allow stacking of the click box with the multistate object in the same location. You would need a button in another location. For a non-responsive project (like this example) it is not a problem.

Multistate object (deck)

Decks are multistate objects with 15 states. The Normal state shows the cover. Due to the script the labeling is important for the other custom states. They are all labeled Cardx  where x is a number corresponding with the rank of the card. The three decks in the example are identical, but you can have decks with a different number of cards, just use the same logic for the numbering. Look at the Object state panel for Deck1:

Variables

In Captivate I need only one variable for each deck to follow up the status: is it showing the cover, or a random card? Two possibilities means that I can use a Boolean variable. When the cover is visible, the variable has the value 0, for a random card it has the value 1.

Advanced Actions

Click boxes trigger a conditional advanced action. Here is the action for the first click box (CB_1) over Deck1:

The Boolean variable v_1 is checked. If it has the value 0, a random card needs to be shown which is done by a JS script (see below), and the variable is toggled to 1. If it has the value 1, the cover (which is the Normal state) is shown. 

For the second and third deck, the variable and the name of the deck need to be edited.

Javascript

The used trick is to create the name of the state by concatenation of two strings:

  • First string is always 'Deck1'.
  • Second string is a random number between 1 and 14, converted to string.

I have explained in depth the use of Math.floor(Math.random()*(max-min))+min) in an older blog post:

Playing-with-numbers-part-1

That random number is converted to a string with a JS method. Result of the concatenation is the name of one of the states in the deck multistate object. 

For the second and third deck, the deck name need to be changed in this script. If you do have more or less cards in those decks you need to edit the maximum number (here set at 15).

More ideas?

This basic example may have ignited your creativeness? What about creation of a jackpot game? A funny mathematics exercise for your kids? A board game where you use a dice? 

For this use case it is impossible to create a shared action. One of my long-standing feature requests for actions is the possibility to generate a command using concatenation. A second one: being able to change a state based on a variable.






Comparing Advanced and Shared Actions

Intro

If you have followed me since a while, you know that I am a great fan of Shared actions.  However I am aware that many developers seem to be afraid of those shared actions. In this post I will try to demystify the 'shared action', and answer some questions.

First of all: the biggest advantage of a shared action is its reusability. Whenever you need an action which will be used multiple times in a project, or which you plan to use in more than one project, it is worthwhile to consider the use of a shared action. Here are some other reasons. You can skip this part and come back to it later:

  • When used within one project, you are using instances of the same shared action. If you prefer using duplicated and edited advanced actions the file size will be bigger. It can be compared with the use of multiple instances of the same graphic/audio clip.
  • Shared actions appear in the Project Library with all the functionalities of Library assets: how many times uses, on which events etc..
  • You can transfer an existing advanced action to a new project using copy/paste of the object triggering the action: a button, click box, TEB (success/Last attempt events), slide (Enter/Exit event). If variables are used in the advanced action, they will be created in the new project. However, in many cases, commands in the advanced actions will revert to Continue if what they are referring to is not available in the new project. Example: missing slides for navigation commands, missing states or even multistate objects...  
  • Transferring a shared action to a new project is a breeze: drag the action from the original Library to the Library of the new project. Variables which are not used as parameters will be created (similar to copy/paste for advanced actions). Since the shared action is not connected with any event, you don't have to bother about having everything in place before transferring the shared action.
  • There is no built-in way to document Advanced actions in Captivate. A shared action however allows to add a description to the action and to the parameters if any are used. 

There are some limitations to shared actions:

  • It is not possible to trigger a shared action from a hyperlink.
  • You cannot attribute a shared action to several events at once, as is possible for an advanced action.

Beware: not all advanced actions are suited as shared action. In a recent post about 'Hint after x failed clicks' I explained a use case which was meant as introduction for Captivate users new to variables and advanced actions. You may have a look at that first blog post:  https://blog.lilybiri.com/automatic-hint-after-x-failed-clicks

Conversion to shared action

It is a good idea to create and test the action as advanced action before creating the shared action. This was the advanced action  created in the mentioned blog post, triggered by the Success event of the  'wrong' hotspots (5) in the example:

Two user variables were used: 

  • v_attempts tracks the number of clicks on the button/hotspot
  • v_failure is used in the Failure feedback message and allows to change the content of that message. The default failure message will be replaced by a Hint message after the defined number of clicks.

First version Shared Action

Open the advanced action in the dialog box, use the button Save as Shared action, and this dialog box will appear:

In the screenshot you see that I have filled in the description. It is important to do so, try to explain in short sentences what the action will do exactly. It may seem a loss of time, but if you reuse the action a couple of months later, you'll understand why I emphasize this.

In the main part you see the 'parameters', and in this particular case all of them show the green check mark. This means that you can save the shared action as it is. Result will be that the parameters remain static, cannot be changed when you attach the action to an event.  They will not need a description neither. Comparing with the advanced action:

Pro

  • The description of the action, which is impossible for an advanced action.
  • Its appearance in the Project Library with all the functionality of other assets.
  • For reusability in another project: you can drag the shared action from this library opened as external library to the Project library of the new project. For an advanced action you would need to copy/paste one of the wrong hotspots to the new project.

Con

  • You cannot attach the shared action to all wrong hotspot events at once, you need to do it one by one. The advanced action could be attached in one workflow by selecting all the wrong hotspots.
  • For another hotspot slide in the same project it will be easier to create a duplicate advanced action, and edit the Hint text (value for the variable v_failure).

Second version Shared action

In the first screenshot I marked two parameters with a question mark:

  • Parameter '2': literal indicating the number of required wrong clicks before showing the Hint.
  • Parameter 'Click on the icon 'Responsive project'': the new value (literal) for the variable v_failure to replace the failure text by the Hint text.

You can make the static parameter dynamic by clicking the check box, and entering a description for the parameter. To me the most important candidate is the Hint text. Making that parameter dynamic, means that you can enter a different Hint text for each new attachment of the action to an event. Beware: the correct checkmark will only appear after confirming the description of the active parameter:

This makes the action flexible: you only have to enter the Hint text as parameter whenever you attach the shared action to an event.

Pro

  • Besides the description of the action, the meaning of the parameter will appear whenever you apply the shared action.
  • Its appearance in the Project Library.
  • Reusability in any new project remains.
  • File size will be lower compared with using duplicate advanced actions.
  • You can edit the Hint text for each instance.

Con

  • You cannot attach the shared action to multiple events at once.
  • You need to fill in the text parameter with each attachment (copy/paste is possible)

Third version Shared action

You can make the action even more flexible by declaring the number of wrong clicks to be a dynamic parameter.  Using that shared action you'll be able to change the number of wrong clicks before showing the Hint instead of the Failure message.  Like increasing the number for a more complicated hotspot slide. I don't have to explain this screenshot anymore:


More tips

I may write out a third blog about using this shared action as template for advanced actions, including possible enhancement by adding graphical (audio) assets to the Hint text message.

If you want to learn more about using Shared actions, please have a look at my 'crash course'. 

Shared Actions : intro

Lesson 1 (video)

Lesson 1 (step-by-step)

Lesson 2 (video)

Lesson 2 (step-by-step)

To circumvent the "Con" of shared actions not being able to apply to multiple events at once, remember that you can easily create an advanced action from a shared action. Here is an example:

Using Shared action as template



Automatic Hint after x Failed clicks

Intro 

This short blog post is created to answer a question in the Adobe forum about clicking an interactive object with multiple attempts. After two wrong clicks, the Retry message should be replaced by a Hint message. There are multiple workflows possible, but I tried with this simple solution to use as much of the existing features as possible.  The Hint will be only text. A more elaborate solution could be a Hint where the text is accompanied with a highlight box and/or other graphical elements. If useful, could create such an example as well. This one is meant for relative new users of Captivate, hence the step-by-step workflow.

Example

Watch this published 3 slides project, using this link (for a scalable version).



On the second slide you'll see the results of the workflow: learner is asked to click the correct button. Number of attempts was set to Infinite but could also be lower. First two wrong clicks lead to a Retry message, on the third wrong click the Hint message replaces the Retry message.

Workflow

Slide setup

Have a look at this screenshot, where the slide (2) and its timeline are visible:

The six interactive objects are shape buttons (Alpha and Stroke both set to 0) over the buttons of the image. One of them deserves the correct click and the other ones are wrong choices. All buttons have the default pausing point at 1.5secs. They will all trigger an advanced action, which means the slide will remain paused. You see the Correct feedback message, using the Default Success Shape style (messages are no captions, but shapes).

Variables

The workflow needs setting up two user variables using the Project menu, option Variables:

  • v_attempts will track how many times a click has been done. Its default (start) value is set to 0. Its value will always be numerical.
  • v_failure: will have a text message. In the screenshot of the variables dialog box you see the default value. However it is not really necessary to define that default value if you use the Reset action described below and triggered by the On Enter slide event. 

The first variable is easy to understand. The variable v_failure will be used as placeholder in a default feedback message. That makes the message 'dynamic': by changing the value of the variable, message text will change. This is the only way to achieve such a change, because those default feedback messages do not support multiple states (although the States button is active, you cannot add states). You'll learn which message to use in the next part.

Events and Advanced Actions

As mentioned before, I did set up the 6 shape buttons with Infinite Attempts. This means that they are left with only the Success event, which occurs on clicking the button. Only the Success message will be necessary. That may seem illogical, is linked with the Captivate meaning of Success and Failure. Success means the button has been clicked, Failure means the click happens outside of the button. You understand that clicking outside of a button is useless here.

Setup SBCorrect

Clicking the Correct button should result in navigation to the next slide with the simple action 'Go to Next Slide' (happens to be the default simple action). That navigation will not happen immediately after clicking the button because the option 'Pause for Success/Failure Captions' is activated. Display time for those messages (because they often are not in a caption, but in a shape) is 3 seconds, can be changed in the Timing Properties. See the full setup in this screenshot:

The correct feedback message can be edited on the stage, uses the Default Success Shape style.

Setup 5 SB_Wrongx 

Dynamic Message

Clicking the Wrong buttons will also show the Success feedback message, and you'll get 5 of them. For the learner they should look like Retry (or Hint) messages, so I choose another Shape style for these messages (see screenshot Slide setup). Since they are linked to their buttons and all appear in a different location I also used the Align, Align and Resize to the same size from the right-click menu after selecting the 5 messages.

The trick here is to fill those messages with the same user variable v_failure to replace the normal success text. Do this by using the X-button in the Character part of the Properties panel of the message while in editing mode:

That X-button will show the 'Insert Variable' dialog box. User variable is the default choice, you just need to choose v_failure from the dropdown list. Important: the default 'length' is set to 50 characters, if you expect a longer text increase that amount. In this screenshot I increase it to 100:

Advanced Action FailureAct

This is a screenshot of the Preview window of that action:

You see that this action has two decisions:

Decision 'Tracking' is non conditional. It consist of one Increment action for the variable v_attempts.

Decision 'Message' is conditional, has only the THEN part, not an Else part. When the attempts are greater or equal to 2, the text in the variable v_failure is changed to the Hint text. Of course it is possible to change that amount of attempts if wanted.

EnterSlide Action

If you allow the learner to revisit the slide, and want to have the identical situation of the first visit, it will be necessary to Reset the variables. You'll need this non-conditional advanced action, to be triggered by the On Enter slide event:

Both variables v_attempts and v_failure are reset to their original values. Because an advanced action is not releasing the play head, I added Continue. In this example it is not really necessary, but it would mean that the play head remains in the first frame and is not advancing to the pausing point at 1.5 secs. It is possible with other setups, like having an effect or animation that you need that release of the play head.

Video Demo - Tips

Intro

You will not find in this blog post details about the basics of creating a Video Demo (cpvc-project) in Captivate, just some practical tips which could make the workflow easier. 

Since I rarely use the possibility to capture from webcam along with the screen recording, you'll not find tips about that neither. Many users reported issues with webcams or cameras. Sorry you'll not find a solution for those issues neither.

Tips for Preparation

You'll need a solid 'storyboard', similar to what you need for a software simulation. My preparation always includes:

  1. In Preferences, Recording, Video Demo set the bitrate to 32-bit instead of 16-bit. You could also change the location of the temporary working folder if you don't have enough space in the default folder under AppData. In most cases you will want to keep the default choice for capturing the mouse tracks:

    BTW this setting will also improve the quality of Full Motion Recording slides in software simulations, although it seems to be only for Video Demo.
  2. Recording requires, similar to software sims, to see 1px/px. That can be done by editing the AdobeCaptivate.ini file, DPIAwareness setting as you are invited to:

    However I prefer the alternative: lowering the screen resolution until I can set the Display Resolution to 100% and still be comfortable to manage Captivate. 
    Example: laptop used has a recommended screen resolution of 3840x2160px and a display resolution of 225%. To be able to work comfortable with Captivate at 100% I need to lower to HD (1920x1080)

Tips for Recording

As mentioned at the beginning, I will focus on screen recording, not webcam recording.

  1. Do not try to record a complete video at once, but split it up in manageable chunks. In most cases I record only a couple of minutes in one session. After recording the first part, I will use the editor to clean up, and eventually replace the audio clip (see tips about editing). Goal is to finalize the real duration of that part before adding the next recording. To add the next recording you need to move the play head to the end of the first footage and start the recording using the menu Insert, Video Recording:

    Tip: If you plan to use the recording to create an interactive video later on, you can use planned bookmarks or overlay slides to choose how to split up in chunks. 
  2. It is important to record in an appropriate rhythm. For that reason I always opt to capture video and audio at the same time. In most cases the narration will define the wanted rhythm. That narration can be a 'draft' version which you'll replace later on by a proper recording (see tips about editing). Try to make the mouse movements as swift as possible, and try a narration speed convenient for a one to one talk.

Tips for Editing

The Video Demo editor has a lot of features, and editing is non-destructive. Although it is possible to do some editing in specific editing applications like Premiere Pro and Rush (see later), those applications need a published MP4-file. It is important to do use the editor before switching to those other applications.

  1. When previewing the video you'll often find the mouse paths too boring because they are too slow. In that case I often prefer to hide the path and use only the the marker for the mouse click itself.

  2. Although you can edit the audio narration clips in Audition or in Captivate, it is possible that you want to replace the 'draft' audio by a more professionally recorded version. This is possible using either the Audio menu, Import Video Narration. However, in that case you get the full audio clip. For that reason I prefer to use the Edit options in the Library on the individual audio clips of each part. That way you'll keep even the original WAV files on top of the 'edited' clips which can be new recordings. Look at this example of a video which had 7 parts. Some audio clips have been edited, others have been replaced.
  3. The object styles are available in Video Demo projects. Use them to create proper styles for the static objects you want to insert: highlight boxes, shapes, captions.
  4. If you use text (captions or shapes) you don't have to bother about the used fonts, as in normal cptx projects. ( Fonts in Captivate). It is perfectly possible to use a cool system font.
  5. Careful with transitions which you'll need between the 'chunks' of your video. You can also bridge a gap between clips using a static object which can have transitions (no Effects).

Extra tips

Video Demo Slides in Software sims

Software simulations often need Full Motion Recording slides for mouse movements. Those slides are short videos, which are still based on the original SWF technology (FLV slides). Although they will be converted to MP4 when published, several developers have reported issues with the conversion. You can avoid those problems by replacing the FMR slide by Video Demo slides. The easiest way is during recording:

  • When you expect a FMR slide to appear, stop the recording.
  • Use the Slides button to create a Video Demo slide, the resolution will be set automatically to the chosen resolution at the start.
  • After the creation of the Video Demo slide, continue with the software simulation. 

Final touch with Adobe Premiere Rush 

The Video Demo editor has great features for mouse management, Pan and Zoom, inserting static objects. However if you want to uplevel your video with great intro and outro, you need a real video editor. This can only be used with published MP4 footage. I used Premiere Pro in the past, but always found it rather challenging for the small improvements to the videos. Adobe launched Rush a couple of years ago, available for phones, tablets and desktop. It has exactly the amount of features needed to embellish your Video Demo projects. If you have a license to Creative Cloud, give it a try:

Adobe Premiere Rush

Interactive video

It is no secret that I am not a big fan of passive video, because due to my decades of experience with coaching/training/teaching interactivity is my first goal.  A recorded Video Demo is perfect to use as Interactive Video to enhance its learning efficiency. It is not offering a big amount of interactivity but way better than passive video. Here is an example:
Custom Play/Pause button



Timer Learning Interaction - use case

Intro

That interaction is meant in the first place to show the learner the exact time he spent on a course. In that situation the interaction is often timed for the rest of the project. However it can be used in other situations. This blog is due to a user request on the Adobe forums, have a look at this link. Summarized: the course should be exited automatically when a slide is displayed longer than a certain time, because it means that the learner probably disappeared without closing the course. That caused issues due to the LMS when retaking a new session for that course. 

Example file

I used one of my previous projects to show the result of the proposed workflow. In this case the course will be exited on each slide if it is displayed for more than 3 minutes. Of course it is perfectly possible to edit that duration, or even have a different duration for each slide as you'll see in the described setup workflow. Try to be patient on at least one slide to let the 3 minutes elapse and see the course automatic exit. You can open this course in a scalable version using this link, or you can watch the embedded non-scalable one below.



Setup

Basics Timer interaction

When you insert a Timer interaction, you'll have to define the properties in this dialog box:

You need to define the amount of time (here 3 minutes 0 seconds) for the timer, and whether you want to count down or up. In a normal situation you can have a message popping up after the end of the counting, but in this case it was not needed. I marked three fields in this screenshot:

  • Background: I unchecked this option which would show the image of a clock. Since the timer should not be visible for the present use case I preferred a transparent background. 
  • Variable: is an optional field, but was needed in this case(see below). That variable is a Boolean with only two possible values (0/1). You need to define that variable in Project, Variables. It was labeled v_timer in this use case. Its default value will be 0, and toggled to 1 when Timeout occurs.
  • Jump to Slide on Timeout: which slide is not important, but you can use the On Enter event of that slide to trigger an advanced or shared action. As you'll see in the setup, I used a very short dummy slide in this case.

Even after closing the dialog box, you can always reopen it using the pencil icon in its Properties panel:

Setup workflow

Variable: Although each slide will have an instance of the Timer Interaction, the created user variable v_timer (see screenshot under Basics) can be used for all instances. The value will automatically be reset to 0 on a slide with a new instance of the interaction. It will be toggled to 1 only when the Timeout occurs on a slide, and then the course will exit. Variables do not keep their value when closing a session.

Timing Interaction instances: insert an interaction on the first slide where you want to enable the timeout, and resize it and set up the properties as indicated in the screenshot under Basics. Since its visibility is not wanted, there are two ways to make this possible. Remember that the background already has been made transparent (see screenshot of the dialog box):

  • If the slide background is a solid color, you can use that color for the Text in the interaction:
  • It is not necessary to have the complete interaction on the slide, you can move it partially to the scratch area so that the numbers (text) is not visible on the stage. That will be necessary if the slide background is not a solid color:

You can copy/paste the interaction to the other slides without any problem. All fields  will be the same. Only two possible exceptions which can need editing: the text color field (if using the first method above) and the time duration if you don't like to have the same timeout settings for each slide.

Dummy slide: in this case I used a very short slide at the beginning of the project, duration = 0.1second. It is not really necessary to use such a slide, you can choose any slide of the project. These are the reasons for my choice:

  • The On Enter event of this slide will be used to trigger an advanced action. For most slides in my projects I already have a dedicated On Enter action to reset situations. If you need to add another decision to those actions, it will be different for each project where you want to use this workflow. The Dummy slide can be copied to any project, including its advanced conditional action.
  • The first slide will already be rendered in the project whatever the slide used to navigate back to this slide. That may speed up the navigation process. However: if you have quiz slides, you need to enable Backwards navigation in the Quiz Preferences. 

Advanced action

The On Enter event of the Dummy slide triggers this advanced action:

Since this is the first slide, it has to continue to the next slide on first visit. That is the reason for the conditional action, because on first visit the timer variable v_timer will have its default value (0). Only when the slide is visited from another slide where timeout has occurred, that variable will be set to 1. 

Before exiting the navigation is returned to the "last visited slide" in order not to mess up bookmarking by LMS: last visited slide (bookmarked) will be the slide where timeout occurred. If you don't want bookmarking by LMS, you can delete that command.

Reusing workflow

User insisted on a workflow that was easily to be reproduced in multiple projects, both responsive and non-responsive. 

For another non-responsive project:

  • Copy/paste the dummy slide and use it as first slide.  An extra advantage will be that the used variable v_timer will be created in the new project.
  • Copy/paste the learning interaction. You may need to edit the timeout duration and eventually the text color to adapt to the colors of the new project.
  • Now you can proceed as described: just copy/paste the interaction to all the slides. Do not forget to check Quiz Preferences to allow Backwards movement.

For a fluid boxes project:

  • Copy/paste the dummy slide, do not bother about fluid boxes on that slide.
  • You'll need to create a fluid box for the Timer interaction, it is not possible to copy it from a non-responsive project. Edit the interaction as needed, the user variable has been created from the dummy slide.
  • It is recommended to create the fluid box on the used master slide(s), because you'll need to copy/paste the first instance to the same fluid box on each slide. 

Button states - Basics and Tips

Intro

Recently I answered several questions about button states, which proved that some information is missing. For that reason I checked the official Captivate document, and indeed to me it is not at all complete especially for buttons which are the most used interactive objects. You can have a look:

Work with multi-state objects in Adobe Captivate

Some examples: the InBuilt state 'Visited' is not mentioned at all. I couldn't find any information about the lock of InBuilt states for buttons and how to circumvent it. The recent added button types - SVG and Bitmap images - are not even mentioned. What is the meaning of the blue and red selection rectangles in button state objects? Several years ago I published an extensive blog about the InBuilt states for Drag&Drop objects (Inbuilt D&D states) to fill in gaps in the Help document.  With this blog I will try to summarize tips and workarounds for InBuilt states for buttons. After a short recapitulation of typical features of Button states, you'll get some examples.

Typical features

InBuilt states

Buttons of any type have by default three InBuilt states: Normal, Rollover and Down. Those three states are part of the object styles for text buttons, image buttons, transparent buttons and shapes (because they can always be converted to shape buttons). However no object styles can be created for bitmap images and SVGs used as buttons, the most recent types added in version 11.5. 

Less known is the fourth InBuilt state: Visited, probably because you always need to create that state. It cannot be included in the object style for the four mentioned button types neither which is a pity. Audio can be attached to the Visited state and Normal state, while that is impossible for the Rollover and Down state

InBuilt states will appear in specific situations. Rollover when hovering over the button, Down while button is pressed, Visited after the button has been pressed and released. However the Visited state can also be set using the Change State action which is impossible for any other InBuilt state (for buttons and D&D objects). Like with custom states, you can add Audio to the InBuilt states. Here are two tips based on that knowledge:

Tip 1: The Down state will disappear when you release the button. If you want to keep the down state after release, use the Visited state, looking identical to the Down state. This is valid for both responsive and non-responsive projects.

Lock Size/position

The size and position of the button is the same for all InBuilt states, based on what you designed for the Normal state. That is the reason for the lock symbol which you see on the stage when Rollover, Down or Visited are selected. 
The Normal state defines the clickable area, hence the Lock symbol. For all buttons, except the SVG used as button, this will always be the bounding box of the button. You can always edit or replace the content in a state but that content will be rescaled to the bounding box defined in the Normal state. In the example screenshot that content was a SVG where the clickable area was kept to the bounding box. That vector image type always keeps its height/width ratio. If you want to use another SVG in the Rollover or Down state, which needs more space, be sure to create a bounding box which is bigger than what is needed in the Normal state. Here is an example, the SVG in the Rollover state is wider, so the bounding box in the Normal state has a larger width.
In this example a different SVG was used in all the states. You cannot replace a SVG by a bitmap image, each replacement needs to be of the same type.

Tip 2: (answer to this thread in the eLearning community: Word Search) to create a highlight appearing after a click, use a shape button with 2 (or 4, the Rollover and Down are not important) states, one is the Normal state and the shape has no fill nor outline, the second one is a custom state where the shape has an outline. Use the action 'Go to Next State....' for that button. First click will show the custom state (outline), second click will revert to the Normal state.

Extra objects

Contrary to audio which can only be added to the InBuilt states Normal and Visited, you can add extra objects to all InBuilt states. However this is only possible in non-responsive (Blank) projects and in static fluid boxes. Normal fluid boxes do not allow adding extra objects to a state (due to the stack prohibition). 

This aspect opens a lot of tweaking possibilities. Those extra objects are not locked, nor do they need to be of the same type. Contrary to the locked button states which have a blue outline marker, extra objects will have a red outline marker (see screenshot under Tip 3). There is no real limit to the number of objects you can add. Whereas audio cannot be added to Rollover or Down states, you can add extra objects to those states.

Tip 3: Create a tooltip for a button by adding a text (or other object) to the Rollover state.

Tip 4: Quick Click/Reveal workflow, using a button with a custom state derived from the Normal state but with the Reveal objects added to it. Use 'Go to Next State' for that button, and you have a toggle button, which will hide the revealed objects when clicking again. When using a variable as explained here, you have even more control.

Tip 5: Can you increase the size of a shape button in Rollover state, was another recent question? The forementioned trick with a bigger bounding box in the Normal state is not functional in that case. Here is another possibility:

  • In the Rollover state make the shape button invisible. Depending on its setup this means Alpha for Fill set to 0, border width set to 0 and eventually take out the text.
  • Add a bigger image of the shape button to the Rollover state and align it as wanted.

Of course you can this also apply on the Down state and/or with a smaller version of the button, see screenshot:

Tip 6: Starting with an invisible Normal state for a shape button (Alpha and stroke set to 0) and adding an object to that state within the bounding box of the shape button, allows you to create a rotating button. A full description of the workflow can be found in this blog post. Of course this means the clickable area will be greater than the image itself, but most learners will not detect that incongruity.


Conclusion

You'll for sure know about more examples to use button states in a creative way. Feel free to post your ideas in a comment, always appreciated.

Fractioning (custom) motion paths

Intro

Motion effects can be customized in many ways. Pausing Captivate's timeline will also pause automatically any effect if it is not finished. This feature can be used to make boring slides more engaging. To see what I mean, have a look at this example file. It has three slides using that approach:

  • Business Model: has a simple left to right motion path use on a cover shape to deploy an infographic sequentially.
  • Career Steps: uses a custom polygon path to have an animated avatar and discovering states in a multistate object
  • Captivate Hurdles: has a custom curved path, and uses also multistate objects.

You can watch the example file full screen by clicking this link.

Or have a look at this embedded example:


Workflow

Steps

Each of these three steps will be explained in detail below:

  1. Create the motion path, and edit its duration taking into account the number of wanted fractions.
  2. Create the button and its advanced action, which will have two decisions:
    1. Decision 1 will manage the motion and pausing, and a tracking variable if you want a second decision to be done when all parts have been deployed. This decision is non-conditional
    2. Decision 2 will be done when the path has ended and is conditional
  3. Test the interaction, it will probable need tweaking the path length and fraction times. Moreover if you allow to revisit the slide, you may need an On Enter action to reset the situation.

The detailed explanation will be done using the first example ‘Business Model’ . Explore its timeline:

Slide background is a a shape filled with a gradient. That shape was duplicated to be a cover, which is stacked on top of the Infographic (with the images) and the Next button. Motion effect will be attached to that cover shape. On top of the cover you’ll see the Play button (no pausing point), title and instruction text. The Next button has a pausing point which needs to be after the end of the motion effect.

Step 1: Motion path

The effect applied to the cover is a simple Left-to-Right motion path. It has no easing because easing would be applied to the start and/on end of the complete path, but you’ll use it in fractions. This linear path will be cut in 6 parts. I used a vertical guides grid to visualize the 6 fractions, and make sure that each guide is in between two images. Have a look at this screenshot, showing the guides and their setup (using View, Create Multiple Guides):

Motion path  is visible on the stage with end and start points. Those points are always connected to the center of the bounding box of the shape. The start point is at 1024/2px = 512px because the project width is 1024px. You need to extend the length of the path by moving the end point horizontally (keep SHIFT key pressed) to the X coordinate 512+1024px = 1536px. For that reason I added another vertical guide at 1536px. Turning the snap on for the guides helps to position the end point. See screenshot:

For the duration of the Effect, start from the time to use for each fraction. I found that using a time between 1 and 2 seconds is fine. As you can see in the timeline screenshot above, for this slide a duration of 1.5secs was chosen, leading to the Effect duration of 9secs. If you look closer to the Timeline, you’ll see that the effect duration is slightly shorter, because of step 3: tweaking.

Step 2: Action for Play button

Basic setup

At first sight the needed advanced action for the Play button seems to be rather simple.:

  • Pause the slide On Enter.
  • For the Play button use this sequence:
    • Continue      to release the playhead, the motion effect will start
    • Delay Next Actions by 1.5 secs          for the Business model slide 1.5seconds is 9secs/6
    • Pause      to pause the motion effect waiting for the next step (see guides in the first screenshot )
  • The Next button will be uncovered in the last step.

However, there is no way to prevent the learner to click the Play button after the motion effect ended, and the Continue command would then override the pausing point of the Next button, which you probably want to avoid. To prevent this you need a way to track the end of the motion path. Using a variable v_counter for tracking is an easy way. Although you could use one conditional decision, I like to separate the advanced action in two decisions. Have a look at this screenshot of the basic PlayMotion action:

Supposed here is a starting value of 0 for the variable v_counter. When all 6 parts have been ‘discovered’ the Play button will be hidden. It could be possible to replace that Hide action by a pure Pause action, but it would lead to frustrated learners.

If you try out this basic action for the Business Model slide, you’ll have a flickering problem. That has been a pain since many versions. In the Tweaking section of this blog, I will show you how to solve this. Moreover in the video displayed in the previous post, you’ll see that the first part of the effect is deployed immediately. There is also need for an On Enter action on all the slides, to reset everything in the original situation including the value of the counter variable.

Extended Setup

This simple slide didn’t need to have another action to be done besides part of the motion effect. That is not the case for the Steps nor the Hurdles slides. The extra actions need to be inserted before the Delay command in the Always decision. Look at the versions for the Hurdles slide. Multistate objects were used to show explanations. There are 4 parts. At the end the Play button (is in a group with a Tooltip) needs to be hidden, and the group of extra buttons made visible:

Step 3: Tweaking

Timing

When testing the project with F11, Preview HTML in Browser, you'll see that the timing is not perfect: motion effect. There are two ways to tweak this timing, and often both are needed:

  1. Decrease the total time of the motion effect (Timeline panel or Timing Properties). That will speed up the motion, more will be shown with each part. If you look at the first screenshot, Timeline panel for the Business Model slide, you see that the duration of the effect is now 8.9secs instead of the original 9secs. For the Steps slide, I reduced the original 10secs (5steps of 2sec) to 9.7secs, for the Hurdles slide 5secs was reduced to 4.8secs

  2. Decrease the Delay time in the advanced action for the Play buttons. You could see in the Hurdles action the change to 1.8secs. 

On Enter action

You’ll need such an action to reset the situation if the learner is allowed to revisit the slide, and also to be able to reuse the unique variable v_counter.  Whenever possible, avoid to create multiple variables if you can reuse the same variable. Here is a simple On Enter action for the Steps slide:

As promised, here is the On Enter action for the Business Model slide, which is more complicated because it solves the flicker issue, and will show the first part of the image (Hence the Assign to 1 command for the counter variable):

To avoid the flickering of the InfoGraphic image, it is hidden to start with and shown after 0.3secs.  I also added a Fade in Transition The starting value of the variable is now 1 instead of 0. To deploy the first part of the infographics you’ll see the same actions as in the Play button action. The total delay for this first part is 1.6secs.

More?

It would be wonderful to hear how the described workflow could inspire you for your projects.. 

Creating custom paths - curved or polygonal - comes with some issues:

  • For polygons: you cannot create horizontal nor vertical parts for an obscure reason. I have logged this bug multiple times.
  • For curves: realizing cusp points is normally not possible... 

If you want to learn how to overcome those issues, please let me know.



Combining Slide Audio and 'Play Audio'

Intro

This short blog post is meant to answer another question on the Adobe forums. It is at the end of this thread:

https://community.adobe.com/t5/captivate-discussions/pausing-slide-audio/td-p/12312792

This was the goal:

  1. Slide has narration as slide audio
  2. There are multiple shapes used as buttons, which should trigger an audio clip using 'Play Audio' command; those shapes have no pausing point.
  3. When a shape button is clicked the audio clip should play, but the slide audio should pause, and resume after the audio clip ends.
  4. There is at least one more interactive object pausing the slide towards the end. Idea is that the learner can still listen to the audio clips after the slide audio has finished.

This learner tried to solve this with simple actions, using the feature 'Pause slide audio when clicked'. It cannot be solved that way however.

Example project

Watch this short project created to double-check my proposed workflow with a shared action for the shape buttons. After the Title slide you'll see a slide with a Next button to pause the slide, and a shared action triggered by each of the shape buttons. A copy of the Timeline panel can be found on the third slide. I used some slides from the Aspire Quick Start Project.

You can open a rescalable version using this link or watch the embedded version below:



Setup

You could see the slide audio (narration) in the Timeline panel. The audio clips for the shape buttons were imported to the Project library, and their exact duration was checked, because it will be needed in the shared action. Have a look at the shared action with its two parameters (name audio clip and duration clip):

It has two parameters:

The command Pause in the action will pause the slide audio automatically, contrary to a pausing point of an interactive object. You don't have to change any setting in the shape button Properties. The Continue command which will be done at the end of the audio clip will take care of resuming the slide audio.

Do not bother about having two clips playing at the same time. If the learner clicks another shape button before the first audio clip ends, that first clip is stopped automatically. No need to add a command like 'Stop triggered audio' which is only needed when you want to stop a playing clip without playing a new at the same time.

The user is concerned that applying the shared action will take more time than the approach he tried out with simple actions. However, since you don't have to change settings in the shape button Properties panel, the shared action approach needs even less clicks. Check it out. There is no danger of choking Captivate which could happen if you use duplicate advanced actions since you are using instances of one shared action (ecologically).

Problem

The previous solution works fine until the learner has reached the pausing point of the Next button. At that moment, the Continue command in the shared action will override the pausing and the playhead will continue until it reaches the end of the slide and moves to the next slide. It is necessary to cope with that different situation. The Delay command nor the Continue command take into account possible pausing points. 

There are two different situations, each needing a different workflow:

  • Learner clicks a shape button before the narration has ended. In that case the slide audio needs to be paused, and to resume after the end of the triggered audio clip.
  • Learner clicks a shape button after the narration has ended. You need to maintain the pause which occurs at the pausing point of the Next button.

This screenshot shows the Timeline panel, illustrating the two situations. Situation 1 in red, situation 2 in blue.

This needs apparently a conditional action for the shape buttons. You have to figure out which situation is valid. For that reason you need to know when the narration has ended. It is easy to see its duration in the timeline, in this case it was 28secs. To calculate the frame number at the end of the frame I used micro-navigation. If you are new to this type of navigation, please have a look at this blog post:

Intro to Micro-navigation

Solution

Variables

You need two user variables:

  • v_start: will store the frame number of the first frame of the slide with the narration and shape buttons
  • v_stop: will store the frame number at the end of the narration

Contrary to the timeline panel where seconds restart on each slide, the frame numbering continues throughout the project.

Shared Actions

EnterSlideAct

This shared action will be triggered with the Slide Enter event, and is meant to calculate the value of v_stop. Have a look:

The first frame number of the slide is stored in v_start. The duration of the narration is converted to frames, by multiplying with the system variable cpInfoFPS. The only parameter is that duration.

PlayAudio_Act

The former standard action has been transformed to a conditional action:

Same parameters as before. The condition checks if the learner clicked the shape button before or after the end of the narration. Only when the narration hadn't been finished it will need to resume. That has been done with the Delay command and Continue. That is not necessary after reaching the end of the narration, because the pausing point of the Next button needs to be kept pausing, and the narration doesn't need to resume.

This shared action is needed for each of the interactive objects used to play an audio clip.  In the project I used shape buttons. They are visible in the timeline screenshot as SB_Topic1…. SB_Topic4.

By using shared actions instead of duplicate advanced actions, you avoid choking the project if you need lot of those actions which was the case for the user asking the question. Moreover multiple instances of the same shared action also will result in a smaller file size. Of course they are also very easy to transfer to future projects. You can learn more about using shared actions in these videos:

Use Shared Actions: Lesson 1 (crash course)

(re)Use Shared Actions: Lesson 2 (crash course)

Choose and use Personal avatars

Intro

One of the reasons I started using eLearning assets as professor in a university college, was to offer students a more personalized learning experience. In this blog I will not expand on that goal, but show how you can use an ignored feature of advanced actions in combination with multistate objects to offer the choice or a personal avatar. 

Do you know that several simple actions (dropdown list in the Actions tab for a slide or an interactive object) also appear as possible commands in advanced action, but that they are ‘enhanced’? Typical examples are:

  • Show/Hide: as simple action they can only address objects (or groups) on the same slide as where you trigger the action. However when used in an advanced action, you can address all project objects.

  • Change State/Go to Next State/Go to Previous State: when used as simple actions you can only point to multistate objects on the slide of the action, but used in an advanced action you point to all multistate objects in the project.

Example project

Have a look at this example. You can use the Table of Content (custom button) to navigate freely. This project has:

  • Title slide
  • Slide ‘Flashlight’ with timeline staggering, where you see bottom left an avatar
  • Slide ‘AvatarChoice’ where you can change the avatar. It is not the first slide to prove that the avatar change will also be functional on the previous slide (Flashlight)
  • Slide ‘CareerSteps’ which has an avatar outside of the slide, but it will appear in steps if you click the play button (motion path animation triggered partially with each Play button click)
  • Slide KnowledgeCheck where the avatar is used to give a feedback message

Have fun:



Setup workflow

Multistate objects

Lot of multistate objects were used in the project:

Slide AvatarChoice

The four buttons with the avatars are SVGs used as buttons. The InBuilt states Rollover and Down were deleted, but a custom state labeled 'Chosen' was added to show the selected avatar by adding a white-stroked border (shape) to the original avatar image.

Slides Flashlight, CareerSteps, KnowledgeCheck

The images SV_Candidate (Flashlight), and People (CareerSteps) have 4 states. The Normal state shows by default the first male avatar. This screenshot shows the states for SV_Candidate, the one for People is similar. They use the same names for the states.

The image KCMessage (KnowledgeCheck) has 5 states, the Normal state being an empty shape (Alpha and Stroke both set to 0). It is just an alternative, because that message needs to be hidden with the On Enter action of this slide. Reason: the message should pop up only after clicking the Submit button. Same names are used for the states, but M1 is new since it is no longer the Normal state:

Events and Actions

W1Act, W2Act, M1Act, M2Act

Those advanced actions are triggered by the Success event of the the buttons on slide AvatarChoice. Here is an example screenshot for the button SVB_W1, the action W1Act:

The four first commands, changing states, take care of the buttons on the slide itself. Only the clicked button will switch to the second state 'Chosen'.  You can easily adapt those commands for more or less buttons on that slide, in this case there were 4 buttons.

The three later commands switch the multistate objects on the other slides to the appropriate state.  Add similar commands if you have more than 3 slides to propagate the choice.

Beware: it is important to check the option 'Retain state on slide revisit' for the multistate objects on the three slides where the chosen avatar has to be solidified. If you don't do that, the choice will be visible only on the first visit of that slide, not on later visits.

KnowledgeCheck slide

The On Enter slide event is used to hide the multistate object 'KC_Message'. 

For the setup of the actions on the slide, refer to this screenshot:

It is of course possible to have different feedback messages, by using conditional actions, but that was not the goal of this blog post. 

You cannot have any multistate object in a default feedback message (Failure, Success) on a question/knowledge check slide. That is why you need to create a custom solution.

No shared actions?

Why did I not choose for my favourite shared actions in this particular use case? Reason is that such a shared action would need a lot of parameters, even for this short project: 7 for the multistate objects, 4 for the states on the AvatarChoice slide, and 3 for the to be changed state on the other slides. That results in 14 parameters! It is much easier to edit the duplicate advanced actions in this case than applying shared actions with 14 parameters.


Forced view for Tabs Interactions - Shared actions as template

Why?

Recently the question appeared a couple of times in the forums: is it possible to delay the appearance of the Next button until all tabs in the learning interaction Tabs have been clicked.  This ‘Forced view’ request has been documented many times for normal click/reveal interactions and for a branching scenario. However the limitation of all learning interactions to the provided editing functionality prevents an easy way to realize such a scenario. Same is valid for Accordions, Timeline, Pyramid etc… interactions.

My recommendation is to use one of the multiple interaction slides from the Quick Start Projects (version 11.5, Assets panel). They do not offer Forced viewing out of the box, but can be transformed to do the trick. Have a look at the published example.

Warning: This blog contains three short video clips, it may some time to load completely on your system.

Example project

In this example I took 3 ready-to-go slides: one from the Safety, the Alliance and the Earth projects. The existing actions have been edited and you’ll get the Next button only when all tabs on a slide have been clicked:


The embedded example has a fixed resolution. You can also use this link for a scalable version.

How?

All was done using two shared actions, which you’ll be able to download in a Library project:

  1. VarsCreateForceTabs: is used to create the needed user variables, and acts also as reset action On Enter for each slide. In this particular case the same action (one parameter) could be used directly. However if more is used in the On Enter action, the shared action can be used as template for a dedicated advanced action.
  2. ForceTabs: has been used only as template for all the advanced actions on the 14 tab buttons in this project. I will describe the workflow step-by-step in a future blog.

If you want to try the workflow (described below) out, download this project which has the two shared actions in its Library. In an older blog (or video)  I explained how to import those actions in any project using External Library. Download the project from this link:

SA_Library

Workflow

Step 0: Next buttons

Add the Next button to each slide, and hide it in output. I labeled them SB_Next_Earth; SB_Next_Safety, SB_Next_Alliance 

Step 1: import the shared actions to your project

  • Open the Library panel in your project. Scroll to the Shared actions subfolder.
  • Use File, Import, External Library and point to the downloaded project file. It will appear in a floating panel top left of your screen.
  • Find the Shared actions folder in that external library and select BOTH shared actions.
  • Drag them to the Shared actions folder in your project library. They will both appear with a usage of 0. But the variables used in those actions will now appear in the Variables dialog box (Project, Variables). 

You can watch this step in the video below as well.

Step 2: use VarsCreateForceTabs action as Reset action

  • Check the On Enter event for the Quick Start Project slide you want to use. In many case that will be the default action 'No Action'. If that is the case, apply the Shared action 'VarsCreateForceTabs' to the event. It will need only one parameter: the number of tabs. 
  • If the On Enter event triggered another action than 'No action', screen that action. In many cases it is a superfluous action. One example is the 'Horizontal Tabs' layout in the Business project. It has an On Enter action to reset states to the Normal state, but that action is not needed since such a reset happens automatically when you re-enter the slide. Reason: the option Retain State on revisiting slide is unchecked.
  • If the existing On Enter action has to be done, you need to use the Shared action as template to create an advanced action. In that advanced action you'll need to add the existing action, which can be done by copy/paste eventually on a new decision tab. In the available Quick Start Projects the On Enter actions are never conditional. 
  • Using the described workflow, the Next button will remain visible when the slide is revisited. That is mostly the required situation: only on a first visit clicking all the tabs is required to get the Next button, but later on that is no longer the case.

Second step is also shown in this video clip:

Step 3: use ForceTabs as template for Tab action

  • Select a Tab button on the slide. In the following screenshots I selected the first button on the slide from Earth, which will have the name C2R37_BTN_xx  (xx will be a number added by Captivate to make the name unique).
  • Check its action in the Properties panel, Actions. Open that action in the Advanced Actions dialog box.  For all the ready-to-go slides with a similar Tabs interaction, those actions always have one standard decision. No IF conditional decisions, nor While loops
  • Select all the commands in that action, copy them to the clipboard (Edit menu, right-click menu or with CTRL-C).
  • Open the shared action 'ForceTabs' from the dropdown list top left (starts with Blank). You'll need to fill in the two parameters in the dropdown lists. First parameter which appears in the two first decisions is the tracking variable. Second parameter in this case is the Next button, which was hidden in output. A Preview of such a filled in shared action is visible in this screenshot, created for the first tab button in the slide taken from the Earth QSP:
  • Return to the first decision 'Always', on the second line (after the 'Increment' command), paste the commands copied to the clipboard (CTRL-C or from the menu).  Save the advanced action with a unique name. For that same tab button as the previous screenshot, this would result in:
  • Assign the new advanced action (in the example SB1_Earth_act) to the tab tutton.

You will need to repeat this third step for each of the tab buttons. Eventually you could also duplicate the advanced action for the first tab, and edit the duplicates. Do not forget to copy the commands from the original advanced action on the tab to the first decision 'Always' after the Increment command. In that scenario, only the first parameter (tracking variable) needs to be edited, but in the first AND the second decision. If you start from the shared action as template you need to define that parameter only once. However you don't need to edit the last decision, because the Next button will be the same for all the tab buttons if you work with duplicate advanced actions.

Here is the video clip for the third step:

Conclusion

Although this blog was meant in the first place to answer a forum question, I had a hidden agenda (a badass?):

  • Using shared actions as template
  • Using shared actions to avoid creating variables over and over again
  • Combining existing advanced actions with filled in shared actions
  • Understanding and extending the use of Ready-to-go slides from the Quick Start Projects.