To all readers: best wishes for a healthy and enthralling 2020!

Have some fun with this small game, created from an Adobe Stock image, using Illustrator (for assets) and Captivate 11.5. Again SVGs are used extensively. You can play the embedded game (fixed resolution) but I recommend to play it from this link which is a rescalable version. It may be easier to find the differences, especially if you are using a big screen.

Lot of SVGs, some multistate objects, one shared action, two small advanced actions + two variables. If you follow me since a while you know that I had lot of fun with all my favourite Captivate tools.  I didn't use any Javascript directly (actions are converted to JS on runtime) but I’m sure this can be done with JS as well.

The usual white screen with grey arrow is replaced by a poster image. After the mysterious title slide game, game and end image are all on the second slide.

Setup

Objects and Timeline

SVGs reign as you can see in the screenshot of the Timeline panel of the game slide:

The stacking (z-order) of the objects is important. From bottom to top you see:

• Two instances of the same image (SV_Correct to the left and SV_NOK to the right.
• Two text containers which show the two titles (Tx_Correct and Tx_Difference).
• A click box CB_Wrong: it is important that this click box is below all other interactive objects, and that its pausing point is at the same time as the other ones (here 1.5secs).

• 

• A multistate object functioning as progress bar. The Normal state is invisible (Alpha set to 0), and you see all the states in this screenshot:
  
  

  

  Just a note: there are some display problems with SVGs in the present version, and that can make the previous screenshot bit confusing. Although the circles have the same size in all states, they seem to be smaller when more circles are present. Moreover something seems to be wrong with the C4 state: total width seems smaller than for the other states. Reason was that originally that state switched to 'Custom', instead of Original.
  In this case it is very important that the option 'Original' size is forced for each state.
  

  

• A shape 'Cover', which is rectangular filled with Solid dark gray, with Alpha = 70%.
• Final image 'SV_Eind' (sorry for the Dutch label). 

Variables 

Two user variables were created:

• v_counter: with a start value of 0, will be incremented when a correct hotspot has been clicked.
• v_hotspot: will be set to the number of hotspots minus 1; in this case it is set to 6 since there are 7 hotspots.
  

Advanced Actions

Two advanced actions are used:

EnterGame triggered by the On Enter event of the Game slide

WrongAct triggered by the Success event of the Click box CB_Wrong

Another rather simple standard action, to let some audio play and have effects with the cover:

Shared Action 'CorrectHotspot' triggered by the SVG buttons (Success event)

The most important script for this game. Several actions happen when a correct hotspot is clicked:

• An effect is applied to emphasize the clicked SVG, in this example I used a ScaleTo effect.
• Secondary an audio clip is played (sort of congratulation)
• The hotspot needs to be disabled, to avoid having it clicked multiple times.
• To track the number of discovered hotspots, the counter variable needs to be incremented.
• Progress has to change in the indicator (yellow circles multistate object)
• When all hotspots have been found, the final image has to appear (with an effect).

This is a Preview of a filled in action, where the 5 necessary parameters are marked in a color rectangle:

None of the candidate parameters need to be a parameter: the two variables (v_counter and v_hotspot) nor the literals. As I have emphasized many times, it can be tricky to define a literal as parameter. In this particular case it could have been possible to indicate the Delay time needed to listen to the audio clip being defined as parameter. That would be necessary if you want to use audio clips with very different lengths for the the individual hotspots. The parameters are visible in this screenshot:

Why shared action instead of duplicate advanced actions?

You can use exactly the same shared action if you have a different number of hotspots (differences). Just edit the action EnterGame to replace the value to be assigned to the variable v_hotspot. It is the reason I replaced the literal '6' by a variable v_hotspot. Several parameters are used multiple times in the shared action: the name of the progress bar, the hotspot, the audio clip. When using duplicate advanced actions you would have to edit quite a lot. 

One of the disadvantages is the fixed status of the applied Effects. If you want another effect, use the shared action as template for an advanced action, replace the effects and save it as a new Shared action. If you are new to shared actions: contrary to advanced actions it is perfectly possible to save a new action with the same name, provided the older one is no longer used.

Why?

Recently a Captivate posted a question in the Adobe forums.: ‘How to create a lightbox within a state of an object‘. She was upgrading an older project, where the developer used a slide for each lightbox, by using multistate objects to replace the multiple slides.  After having asked for some extra information, it turned out to be more complicated than just the creation of lightboxes.  It was about a two-step process for extra information:

1. Clicking a ‘question button’ would show the answer to the question as a popup (Click-Reveal workflow). That popup didn’t really need a way to close it, but clicking another question button should replace the content by new content. OP was correct that using a multistate object was the perfect workflow for this first step, with a Normal state which was invisible by setting Alpha (for the Fill) and Stroke both to 0. I have demonstrated this use multiple times in blogs.
   
   
2. The content needed to have a way to open a ‘lightbox’ (in the traditional sense explained before) with more information related to the question/answer already shown. 

Problem

Such an interactive object can be a button, a click box or… a hyperlink. Quite a while ago I wrote a couple of articles to demonstrate the power of hyperlinks which is ignored by many. However, for HTML5 output in the recent version (11.5.1) its use to run advance actions seems not always to be functtional, needs lot of testing. Originally when creating the sample output, I planned to use hyperlinks in most cases, but had to give up for the reason just explained. BTW all actions triggered by hyperlinks worked perfectly for SWF output. So I had to revert to buttons in most cases. I will explain the complete setup in a blog.

Example project

• Clicking a question button will show a popup which should contain the answer, and there is a (image used as) button to open the lightbox. The question buttons shows a ‘Current state’ when clicked.
  
  
• Clicking the button opens a lightbox: cover, shape with content, and a hyperlink used to close the lightbox. When the lightbox is closed, the question button will revert to a ‘Done state’. It is not a Visited state, but a custom state.

You can watch the project below (fixed resolution) or using this link (rescalable output)

Setup

Objects – timeline

See the setup, using this screenshot of the timeline panel:

From bottom to top:

• Five question buttons, which are shape buttons labeled SB_Quest1….SB_Quest5. They have a pausing point at the default 1.5secs. For those buttons I deleted the InBuilt Rollover and Down states, but added two custom states: ‘Current’ and ‘Done’. 
  

  

  .
• A group of shapes used as text container for the answers SS_Answer1…. SS_Answer5. I could have used a multistate object as well. I started using individual texts because I hoped to use a hyperlink for the lightbox switch.
  
  
• A shape used as Cover. Its position in the stack order is important: it needs to be above the answer and question objects, but under the multistate object SS_ExtraInfo. That cover is a shape, filled with dark gray, partially transparent. Beware: it is also used as text container: look for the text ‘Close Lightbox‘ which has been converted to a hyperlink triggering an advanced action.
  
  
• Multistate object SS_ExtraInfo which has a state to appear in the lightbox for each of the answers. The Normal state is empty (Alpha and Stroke shape = 0).
  

  

• Button Bt_Info (used a button from thitOt not necessary to be on top of the stack, Its position in the stack order is not important, because will be hidden when the lightbox appears.

Variable

Events and Actions

On Enter slide event: "EnterAct"

This simple non-conditional action is meant to set the slide to its original situation:

If I had used a multistate object for the Answer popups, with a Normal state that was invisible (like for the SS_ExtraInfo), I would not have needed the second command (Hide Gr_Answer). By hiding the Cover, I also hide the hyperlink since it is a text in the cover. No need to hide SS_ExtraInfo since the Normal state is invisible. Why didn’t I use a hyperlink instead of the button Bt_Info? Because the advanced action was not triggered as it does when using SWF output. Too bad.

Question buttons:  Shared Action "QuestAct"

Another non-conditional action, based on this Advanced action:

I converted it to a Shared action, with these 6 parameters:

Button Bt-Info: Advanced action "ShowLightBox"

This is an action with 6 decisions. The first decision is non-conditional, the five remaining decisions are conditional because a different state has to be shown based on the question number in the variable v_quest.  Those decisions have only one command and can easily be created with the duplicate decision button.

Hyperlink: Advanced action "CloseAct"

The hyperlink in the Cover shape triggers a 6 decision action very similar to the previous one:

More…

You can extend the described workflow to more than 5 questions. The shared action can be used, and you may have to add decisions to the two longer advanced actions.

I didn’t provide a close button on the answer popups, for learners who don’t want to see the lightbox, for whom the answer popup is sufficient. It could be done with a hyperlink or an extra button.

It would be possible to have something happen when all question buttons have been clicked, but that will require the creation of one extra variable for each button, a Boolean to be toggled from 0 to 1 if a button has been clicked.  The check for the extra happening has to be added to the CloseAct.

Intro

In a recent thread user asked how to prevent that a learner would click the Submit button on a Drag&Drop slide before having performed at least one drag action. Sort of alternative for preventing ‘Skip’ on a normal quiz slide. Such functionality is not available out of the box.  The D&D slide needed to be scored, which made the situation more complicated (easy reset by developer is only possible for Knowledge Check slides).

Like all quiz buttons, the Submit button on a D&D slide is an embedded objects. Consequence: it doesn’t have an individual timeline nor an ID. There is no way to disable that button. You can drag it out to the scratch area, and use Auto Submit, but that was of course no solution for this situation.

Example file

Have a look at this published file.  As usual I used some ready-to-go-slides, in this case from the project ‘Rhapsody’.  All slides were taken from this Quick Start Project, but I deleted the existing Drag&Drop interactions,  just used the design components. After the title slide, you’ll see two Drag&Drop slides. The Submit button is not on the slide when you start, it will only appear after the first drag action.

The Submit button is not on the slide when you start, it will only appear after the first drag action.  To make the slides more similar to quiz slides, I added a second step to the Submit Process.

Check your Captivate knowledge for version 11.5. Either use this link (rescalable) or watch the embedded published file (fixed size):

The trick is to use the Timeline and a motion path effect triggered by any Object action. Not really very complicated, follow the steps below. This workflow, due to stacking of objects, is not that easy in a Fluid Boxes project, the example was a non-responsive project with Scalable HTML output.

Step-by-step Delaying Submit button

1. Pause the timeline before the default pausing point

By default each Drag&Drop slide has a pausing point at 1.5secs, similar to question slides and linked to the Submit process. Too bad, that pausing point is not visible in the Timeline panel, you can only see and edit it in the D&D panel.

You need to pause the timeline at a frame before this pausing point  at 1.5secs by inserting an interactive object which remains invisible to the learner. In this case I inserted a click box, small size (1px for width and height) and located in a place where it is very improbable that learner will try to click. Set it to infinite attempts with the command ‘No action’ to be triggered by its Success event; do not show the Hand cursor. Have a look at this screenshot for the setup of this click box:

The topmost click box which appears later, will be explained the workflow for creating second step Submit process.

Step 2: Drag Submit button off the slide

To make the Submit button invisible you drag it in the scratch area, either to the left (first D&D slide) or to the right (second D&D slide).

Step 3: Timebased motion effect to Submit

Although the Submit button is an embedded object, you can apply an effect to it using the Right-click menu or the Timing properties. The timing of the effect will not be visible in the Timeline panel, because the button has no timeline. The only way to set up the timing is with the numbers in the Timing panel. This motion effect (I used Left-to -right or the opposite one depending on the location) can be very short (used 0.2secs). It is important that it starts at or after the pausing point of the click box (step 1), and ends before the default D&D pausing point (which was kept at 1.5secs.). See this screenshot for one of the Submit buttons:

Step 4: Create User variable 'v_drag'

Create a Boolean variable, labeled it v_drag. Its default value should be 1. It will be toggled to  after the first drag action.

Step 5: Advanced (conditional) action 'ObjectAct'

The purpose of this action is to release the playhead with the first dragging of any drag source to a target. The result will be that the Timebased effect on the Submit button will occur, and the Submit button enters the slide. The playhead will be paused by the default D&D pausing point at 1.5secs. Hence the importance of the timing of the effect described in step 3.  To avoid a same playhead release to happen on subsequent dragging, the tracking variable v_drag is toggled to 0, and the action is conditional:

Step 6: Attach 'ObjectAct' to all Object actions

Since you don't know which will be the first drag action, you need to attach to every drag action. That  is the boring part since there is no easy way to attach the same action to all at once, not even for one drop target. Here are the steps for each drop target:

• Select the drop target
• Click the button ‘Object Actions’ in the tab ‘Format’
• For each of the drag sources open the No action list, choose Execute Advanced Action
• Choose ‘ObjectAct’ as advanced action.

In the example file you’ll have 3*6=18 object actions in the first D&D slide, and 4*4=16 in the second slide. I really hope one day there will be a way to apply the same action to multiple object actions at once…

Do not forget to test! The actions Success and Last Attempt (wrongly labeled as Failure) were left both to the default command ‘Continue’. That way the learner will have time to watch the feedback. Timing of the feedback shapes (or captions) can be edited as you probably know.

Workflow: adding second step to Submit Process

If you veiwed the example file, there was a second step (click the slide to proceed) added. If you don’t do that, the feedback message will appear and the playhead will be released, out of control for the learner. It is a simple trick, as you may already have seen in the first screenshot of the Timeline for the first click box.

I added a second click box, covering the whole slide, but appearing after the release of the playhead by the Drag&Drop actions on Success of Last Attempt (1.5seconds). This click box triggers the default ‘Go to Next Slide’:

Don’t forget to warn the learner about this second step, The example file had the warning in the feedback messages.

This last extra workflow is NOT possible in a Fluid Boxes project because stacking is not allowed. You can use the first workflow with the motion path in a Fluid Boxes project, but may have to replace the click box by an invisible shape or transparent button (no fill nor stroke) if you want to add them to a normal fluid box.

Intro

Example project

I used some ready-to-go slides from the project ‘Earth’. I didn’t allow Review, and the score slide is not included. As usual, needed to edit the embedded slides. Several slides have a Pause On Enter, which is never a good idea IMO.

Setup

Multistate objects

Both popups triggered by the extra shape buttons labeled ‘Info’ and ‘Score’ are multistate objects with 2 states:

1. Normal state is a shape with Alpha = 0 and Stroke = 0. This means it is invisible to the user
2. State popup exists for both buttons, and has the necessary information to pop up. I used only text, but you can also add images or even event video.. For the Score button I used inserted system variables (cpQuizInfoPointsscored and cpQuizInfoPointsPerQuestionSlide). That way popup will have different values on each quiz slide.
   

   

The  multistate content shape objects (SS_Info and SS_Score) are inserted on the second slide ‘Instructions’ which is the slide preceding the first question slide.  This is very important, don't try to do it on the first question slide itself. I added a button Continue to that slide to replace the Pause On Enter. The multistate object timelines start after the pausing point of the button. They are timed for the rest of the project with the option ‘Place object on top’. Since their Normal state makes them invisible to the learner, no need to mess with Show/Hide.

Variables (Boolean)

Two Boolean variables were created, labeled v_info and v_score.  Their default value = 0, corresponding with the Normal state of the two mulitstate content shapes SS_Info and SS_Score.

Shape buttons

Actions and events

Hide buttons On Enter for Exit slide

Success action buttons SB_Info and SB_Score

A conditional action is needed. I preferred a shared action with 4 parameters. I suppose this is an action which can be used in many projects. If you import the shared action into a new project (from an External Library or with the Import functionality), you do not have to create the variables, only multistate content objects. The shared action is derived from this advanced action:

Each of the four parameters is marked  with a color. One of the big advantages of shared actions over advanced actions are the descriptions which explain clearly what you have to choose, see this screenshot which is for the second button SB_Score:

More?

Here are some possible changes or extensions of the idea, which is basically that you need the popups present on the slide BEFORE the first quiz slide and timed for the rest of the project.

• I used only text in a shape, but the popups can be anything, you can add images, video....
• With the present setup both popups can be visible at the same time. If you don't like that, add an extra command to the shared action (and a parameter) where you change the state for the 'other' popup back to Normal.
• You do not like the way popups have to be closed with the same toggle button? It is not possible to add interactive objects to a state, except to the Normal state. You can also insert a hyperlink like an X to the normal state. But that means you have to switch the content filled state (which is Popup at this moment) and the empty state. Bit more work but doable. About using Hyperlinks to trigger actions, have a look at More is in a Hyperlink
• If you want individual content in the popup, different for each quiz slide, remember you can use a variable to store content. Insert the variable in the content popup and populate it with the On Enter action of the quiz slide.
• ....

Intro

Example

You can watch this file either from this link, (scalable)  or in its embedded version (fixed resolution):

Setup

Here is the filmstrip of the example file:

Slides 1-3 are based on ready-to-go slides from the project Alliance.

Slides 4-8 are random quiz slides taken from a pool with 10 questions.

Slide 9 is again taken from Alliance (but with lot of multistate objects, see later).

Slide 10 is the hidden default score slide. It will automatically be moved after slide 9 because of the scored button on this slide (see step 3).

Slide 11,  final slide allowing to be sure that the final result (100% or 0% ) is correctly transferred to the LMS. I inserted the system variable cpInfoPercentage in a shape on this slide (top left).

Step 1: Score random question slides

Supposed you have the question pools ready, insert the required amount of random quiz slides in the project. All slides in a pool have by default the same score (10 points), it is not possible to have partial scores for MCQs with multiple correct answers.  There seems to be a bug for a FIB slide, where the correct answer appears as tooltip in case you have that question. Will log the bug, seems new.

Once the random quiz slides are inserted, it IS possible to edit the score. I took all score out, set them to 0. Just a tip, check the Advanced Interaction panel (F9, or under the Project menu) to see that the total quiz score is now indeed set to zero.  Penalty has no sense in this situation because success doesn't depend on the acquired score of the quiz.

To avoid long waiting time after the submit process for a question, I moved the pausing point near the end of the slides in all the pool questions.

Step 2: Tracking correct questions

To track the number of correctly answered question, you need to create a user variable v_counter, with a start value = 0. 

That variable needs to be incremented with each correct answer.  Number of attempts on question level is set to 1. It is then sufficient to create a simple advanced action to be triggered by the Success event of all random quiz slides:

Step 3: Results slide

I used a ready-to-go slide to show the result, but have converted several objects to multistate objects. The Normal state is the one shown on Success, the Failure (new) custom state will be shown on failure. This is the timeline of that slide:

Moreover I added two interactive objects to the slide, both invisible in output to start with (eye button in Properties):

• Bt_Failure: is a transparent button similar to the Next button in the Alliance project. It has its default command 'Go to Next Slide'. 
• SB_Success: is a start shape marked as button. Special is the fact that this button is set to Report (Actions tab ), and to include in Quiz. When you check in the Advanced Interaction panel (F9), this shows:
  

  

 Step 4: Conditional action EnterResult 

Use the On Enter action of the Results slide (slide 9) to show the correct state of the 4 multistate objects shown in the Timeline screenshot, and to show either the button SB_Success or Bt_Failure, based on the requirement of having at least 4 answers correct. Of course, the number 4 can be changed (OP wanted 7 correct answers). The action is self-explanatory:

This trick with the two buttons was published in my blog, over 8 years ago. The example file in that article is of course SWF output.  I didn't want to use two identical buttons - same location - in the example of today because that is impossible in Fluid Boxes projects.  This was not such a project, but it is perfectly possible to use the same workflow in a responsive project. It was also the main reason for the multistate objects used on this Results slide.

Extra: Editing Alliances

This is bit off topic, just for those interested

I did edit the ready-to-go slides a lot. Having a pause triggered by the On Exit event is not something  like because it can create problems. All slides have at least one interactive object, which can pause the slide near its end. That project has some quiz slides, but they are NOT based on the quizzing master slides. This means that the theme was not fully realized. When I inserted random quiz slides, which necessarily do use quizzing master slides they looked very different from the nice quiz slides. I have updated the master slides to make them looking approximately like the ready-to-go slides.

There are more problems with this project, which I detected but didn't encounter in this particular project. As I have written in previous posts, never do use the Switch to Destination theme!

Intro

Example

• Geo slide: alphabetically clicks on countries (used English names, not the original names of the coutnries)
• Keypad slide typing the pincode on a numeric keypad.

First and last slide are taken from the Quick Start Project 'Aspire'. The images used as button also are from the Assets panel.

You probably will have more ideas where this workflow can be used for Knowledge Check slides. There is a sequence type of quiz slide, you can test a sequence with Drag&Drop slides, but these alternatives are less limited in design. ould love to hear your proposals for sequence checks as well

Setup

Variables

• v_counter: will track the number of clicks on interactive objects. It starts with a default value of 0. It is reused on the second sequence slide, by resetting to the default value using the On Enter action of that slide.
• v_correct: will track the number of correct clicks, set up with default value of 0 and re-used in the same way as the previous variable.

Multistate Objects

The Normal state is empty (easy to reset, will automatically reset when returning to the slide if ‘Retain State’ is unchecked). The 6 following states correspond with the correct sequence, hence their labeling. The last state is the Wrong state. The sequence of states is important, because I will be using the ‘Go to Next State’ command in the actions.

SVGs

The group Gr_Wrong on the Keypad groups all button SVGS which are not used in the pincode. Those buttons are on top of the image, and can be hidden, since the remaining keypad image shows them as well but in a non-interactive version. For the Geo slide, the colored country  SVG buttons are also on top of a big SVG (Europe), but I don’t want the colored ones to disappear, for that reason the buttons will be disabled, not hidden (see advanced actions below).

Actions and events – Geo slide

Only the items marked by a red oval have to be switched for the actions SV2….SV5Act: the name of the SVG button in the first decision, and the literal (number) in the second decision. If the clicked country is not fitting in the correct sequence, the learner sees the Wrong state in the multistate shape and the Retry button will appear.

The last country SVG button (SV6) has a slightly different action, derived from the previous one.  Reason: the Next button has to appear if the sequence is correct. That extra command is highlighted by a blue rectangle.

The Next button has the default command ‘Go to Next Slide’ on its Success event.

The Retry button needs to  everything, as you can see in this screenshot. Action is triggered by the Success event:

Actions and events – Keypad slide

Some explanation may be needed for the Hide command which I highlighted. Since the required pincode (29791) needs the number ‘9’ twice (second and fourth position in the sequence) I have put two SVGs on top of each other: SVG_Two and SVG_Four. By default SVG_Two is visible, but SVG_Four  is hidden and becomes visible With the same action where SVG_Two is hidden. You cannot have two interactive objects on top of each other when both are active at the same location.

The Number buttons trigger an advanced action On Success.  It is similar to the one in the Geo slide, except for using Hiding instead of disabling. Example of the first number button (which is 2):

As explained above, for SVG_Second (number 9) is bit different

Similar to the Geo slide, the last correct button (number 1) will show the Next button if all was correct:

Any wrong number button will trigger this action using its Success event:

The new Retry button, labeled RetryBis is similar to the one on the Geo slide, triggers:

Remember that the SVG button Four  is in the same location as Two, because both have the number 9. That is why SVG_Four has to be hidden and SVG_Two shown.

Why no Shared Actions?

• The SVG button SV_1 – compulsory parameter in the first decision
• The literal ‘1’ in the condition of the second edition, not compulsory
• The multistate object Tx_Display, compulsory parameter in the second decision
• The state Wrong in the ELSE part of the second decision
• The button Bt_Next in the ELSE part of the second decision

Why is the literal a problem? Because it is also used in the Increment command. If you replace it by 2 for the second button, this will also be the case in the Increment command. I may have a workaround, but it is not always functional.

Second reason: with the workaround the parameters would increase to 6, which is my limit for a usable Shared action. Whereas using duplicate functionality for the advanced action is lot quicker, since only two items need to be edited.

This blog is already way too long. If you like to hear about my ‘thumb rules’ for choosing between duplicate advanced and shared actions, post a comment. Maybe I’ll dedicate another blog to it.

Why?

In Flanders there is a saying ‘Twee vliegen in één klap’ (killing two flies at once). Let me show a workaround for a Pretest (without the normal limitations) and update  that old post, taking advantage of improvements since …. version 6. Have to refurbish a lot of posts, which are still attracting visitors, with HTML5 output. Here is one of them.

Example file

Setup

I will explain the variables used in this example, and the actions/events in the rest below.

Variables

System variables

cpQuizInfoPointsscored: the points scored so far by the learner, is updated after the Submit button is clicked.

cpInfoLastVisitedSlide: is used to check if the learner gets to a slide from the previous slide or from another slide (because getting a passing score has become impossible.

User variables

v_PassPerc: required pass percentage for the Pretest. As explained for the previous variable, I preferred a specific variable instead of the system variable cpQuizInfoPassPercent. The value has to be filled in on definition, in this case it was set to 80  %.

v_PassScore: will be calculated from the two previous variables (is same in the example as cpQuizInfoPassPoints.

v_MaxUntil: will be calculated. What is the maximum score the learner would have gotten until the present question (all answers correct).

v_MaxRemain: will be calculated. What is the maximum score the learner can obtain with the remaining questions? Logically the sum of v_MaxUntil and v_MaxRemain should be equal to v_MaxPretest.

v_Possible: will be calculated, what is the maximum score which the learner can obtain if he/she gives a correct answer to all questions still to be answered.

Advanced Actions – Events

EnterFirst

The variable v_Passcore is calculated from two other variables having a default value. In this case v_MaxPretest was 40 points  (maximum score) and v_PassPerc = 80% required for passing the test. Result will be 32 points for v_Passscore.

The variable v_MaxUntil will get its first value, which is the score possible to obtain for this first quiz slide.

EnterPre

CheckPre

The trick used is to calculate v_Possible, which is the maximum score a learner can still get after the present question, supposing he/she will give a correct answer to all the remaining questions  (value of v_MaxRemain). Learner already obtained a score stored in cpQuizInfoPointsscored. This calculation happens in the first decision ‘Maths’.

The second decision is conditional, and will navigate the learner out of the Pretest (Jump to Score slide) if he will not be able to pass the test. If it is still possible to acquire the passing score, the test continues.

EnterScore

This is the most complicated action, because it has to take care of three situations.  Each situation results in a conditional decision:

1. If the learner has finished all questions (last visited slide was slide 8, which is the last question slide), but did fail, (comparing score with v_PassScore).  In that case the appropriate state of an multistate SVG and a multistate text container is shown.  The Next button appears as well.
   
   
2. If the learner has not finished all questions, (last visited slide was not slide 8) another state is made visible for both multistate objects, and the Next button appears.
   
   
3. If the learner has a passing score for the test, another state is shown and not the Next button, but the ‘ToTest’ button appears, which will navigate the learner to the results slide (from which a separate quiz file can be launched).

Conclusion

Of course the same approach can be used for a normal quiz. It can spare the learner a lot of frustrations if he started the quiz, without mastering the content, and quickly sees that the result will never be sufficient. That was the original reason for the first older post. 

It would be interesting to know if you ever use the default Pretest slides, because I really dislike the many limitations. All Pretest slides need to be at the start of the course and in sequence. All navigation will be disabled, on the playbar as well in the TOC, not only for the Pretest slides but also for content slides which is very annoying. What do you think?

Would it be possible to replace the Pretest slides by Knowledge Check slides? I suspect it would be possible, maybe stuff for another 'anti-frustration' post? The advantage would be that a final quiz will be easier to set up.

Intro

Adding audio clip

• Import the audio clips to the project Library
  

  

• Drag the audio clip to the timeline of the slide (or to the stage, be careful not to drag to an object on the stage). Originally the slide timeline on most QSP slides is 3 seconds. If the audio clip is longer, a dialog box will appear. Choose the first option to extend the slide timeline.
  

  

• Audio timeline appears below the slide timeline. I will increase the slide timeline duration manually bit more, so that I’m able to move the audio clip to leave a small gap before and after the audio.
  

  

• You see in previous screenshot that all the object timelines have been extended automatically.  Reason is that most - but not all  - slides in the QSP are timed for the 'Rest of the Slide'. Check Timing Properties. Have also a look at Tip 1 below.
  
  
• Test the audio, not by using Play Slide but by using a real Preview. This means for a non-responsive project that you need to use F11, Preview HTML5 in Browser. For responsive projects any Preview is fine. The three following tips are meant to fix problems detected during previewing.

Tip 1: Fix when objects disappear

In this slide (12 from Aspire) some objects have a timeline keeping the original duration of 3secs. When playing that slide in Preview, those objects will disappear after 3 seconds.

How to fix?

Tip 2: Pause commands on slide events

Many slides in the Aspire project have the setup as shown in this screenshot.

This setup will prevent the audio clip on the slide from playing because the Pause command on the first frame will pause also slide a udio.

You have to take out that pause. You can safely replace it by ‘No action’ which is the default setting both for On Enter and On Exit slide events Result will be that the slide will not be paused, but the playhead will move seamlessly to the next slide when the audio has finished. That is IMO the most logical situation. If you want to mimick a presentation, where each slide is paused at the end and needs learner intervention, you can change the On Exit action to ‘Pause’ or add a button ‘Next’ to pause the slide. However do not forget that this may not be the best practice.

Tip 3: Pausing points

Contrary to the Pause command (see tip 2) a pausing point will not pause slide audio, although the playhead will be paused and so will all graphics assets/effects which are running or appear later.  By default, all pausing points will be set to occur at 1.5secs, either on the slide (for Quiz slides and Drag&Drop), or after the start of the interactive object timeline.

In most cases the increase of the slide duration due to inserting an audio clip will not cause problems, when the pausing point is due to an interactive object like a button. Reason is that the button will often trigger an action jumping to another slide, or revealing some content. The frames after the pausing point (inactive part) are not important in that case.

Possible issues can occur on quiz slides, if you insert an audio clip.  Here is an example (T/F slide 23 in Alliance):

You see the pausing point on the slide timeline at 1.5secs. Some smart shapes are not timed for the rest of the project (see Tip 1). However since the slide is paused at 1.5secs, before the end of those shape timelines, you’ll not be bothered by that while the audio continues playing (not paused). However, if while testing that slide, you have to wait a long time after the Submit process, and you see the shapes disappearing, that is due to the Actions setup in Quiz Properties. They were set in this slide as shown here:

Both actions are set to ‘Continue’, which means that the playhead is released. It will have to move through all frames after the pausing point (inactive part), and only moves to the next quiz slide after reaching the last frame. Not exactly what you want. Two possible fixes:

Fix 1: 

As is the case for other quiz slides in the QSP projects, replace the action ‘Continue’ by ‘Go to Next Slide’. You don’t have to bother about the wrongly timed smart shapes in that case.

Fix 2: 

Move the pausing point on the quiz slide with the mouse (not possible in Timing properties) to place it near the end of the slide. In that case you have to extend the smart shape timelines as explained in Tip 1. This workflow is recommended over the first fix,  if you expect slow connections with the LMS.

Similar problems can occur on Drag&Drop slides but will not expand on that. Know however that the pausing point is not visible on D&D slides in the Timeline panel as is the case for quiz slides.

Some links

Pausing Captivate’s Timeline

For quiz slides, the Submit Process is explained in detail in this post:

Submit Process

If you want to add audio clips from another type than slide audio:

Pausing Timeline and Audio

Intro

However yesterday a user asked another similar question on the forums. You can visit the thread here

The title doesn’t really reflect the full question, which was clarified later on. User wants to have survey slides, which each have two statements. The learner should rate each statement with a number between 0 and 10, and the sum of both ratings should always be 10. As usual I have a dislike for the word ‘force’ used in the title. The example you will be watching, is not forcing really. I considered three possible situations:

1. Two ratings have a sum of 10, rating is accepted immediately.
2. Sum of the two ratings is not equal to 10. In that case the second rating will be edited to achieve a sum of 10. Learner can accept this change or if he prefers:
3. Learner gets the opportunity to retry to set correct ratings.

Contrary to my old blog post, where I used a MCQ, for this solution used the Radiobuttons interaction. Likert question was not possible, since I needed a rating scale with 11 dvisions (0-10). Moreover Likert is not supported for responsive projects. Although the example is a non-responsive project, the described workflow would also be possible for responsive projects (some changes needed)..

Example File

Setup

Due to this specific setup, extending the survey to more than 3 survey slides is very easy.  Just duplicate a survey slide and edit the statements. Everything will work fine. I will explain the objects using the timeline, the user variables to be created and the advanced actions.

Timeline Survey slide

Have a look at the screenshot of the timeline of the FIRST survey slide:

• Two statements, labeled SS_XStatement, and SS_YStatement. I didn't create a dedicated master slide with two placeholders for these statements, but that would be possible. Labeling of those statements is not so important, because they are not used in any action.
  
  
• Two instances of the RadioButtons Learning Interaction, used as rating scales. Please don't be confused by their green colored timeline, because these interactions are not interactive, they are static. This is a design bug. The properties of one interaction can be seen in this screenshot:
  

  

  Important fields are marked in Red or Green. Beware: you have to create the variable - here ‘v_X‘ i- n the Variables dialog box.
  
  
• Question1: text above the statements with the warning about the sum (could also be a placeholder on the master slide)
  
  
• Submit button: needs to be a shape button, because it has to be timed for the rest of the project. Eventually you can use a SVG or bitmap image (from 11.5 on). Both can also be timed for the rest of the project.
  
  
• A group Gr_Feedback, including the Accept button, Retry button and the Message which appears when the sum of the rates is not equal to 10.  This group is also timed for the rest of the project, which means that both buttons need to be shape buttons, SVG or bitmap images.

Variables

• v_null: empty variable is used to clear the associated variables to the learning interactions. More details about its functionality in this blog
  
  
• v_start: will store the first frame of each survey slide. For the Retry action, the micro-navigation solution described in Replay Slide (scenario 2) is used, hence the necessity of the variable which can be empty as default value. This variable is reused on each survey slide.
  
  
• v_X: variable associated with the rating scale (interaction) of the first statement, default can be empty. This variable is reused on each survey slide. Default value can be empty.
  
  
• v_Y: variable associated with the rating scale (interaction) of the second statement, default can be empty. This variable is reused on each survey slide. Default value can remain empty.
  
  
• v_sum: will be calculated by adding v_Y to v_X. Default value can be empty.
  
  
• v_XScore: will be calculated after each survey slide, by adding the value of v_X. Default value can be empty.
  
  
• v_YScore: will be calculated after each survey slide, by adding the value of v_Y. Default value can be empty.
  
  

Actions/events

EnterAct

SubmitAct

This action is triggered by the Success event of the Submit button. Because that shape button is timed for the rest of the project, you need only one instance of this two-decision action:

The first decision ‘Always’ is not conditional, calculates the value of v_sum which is used in the condition of the following decision.

Second decision ‘Checkit’ verifies if the sum of the ratings is equal to 10. If that is the case, the ratings for X and Y score can be added to the totals, and navigation to the Next slide is done. If the sum is different from 10, the group (2 buttons + message) shows up. The value of v_Y is corrected (10 – v_Y) which will show immediately on the rating scale. The learner can accept this correction or opt for retaking (Retry) the rating.

AcceptAct

RetryAct

This action is triggered by the Success event of the Retry button. Because that shape button is timed for the rest of the project, you need only one instance of this action:

EnterResults

Conclusion

Hope you liked this solution? For a responsive project with fluid boxes, the workflow will be more cumbersome, not only because of the Fluid Boxes setup but also because:

• You cannot use grouping in fluid boxes.
• The possibility to have objects timed for the rest of the project is limited. It is possible if the slides are based on the same master slide, which could be the case for the survey slides.

Could I have used Shared actions? Of course,  I dragged the Replay action from my external library with Shared actions bit for your convenience converted it to an Advanced action. The other actions can be converted to shared actions as well. However withthe described setup, the advanced actions are used only once. If you have issues with the timing for the rest of the project in a Fluid Boxes project, I would certainly recommend to use shared actions because you’ll need an instance on each survey slide.

Intro

• Warrning;  Switch to Destination theme
• Embed QSP slide
  

All QSP projects have also a responsive version, created with the Fluid Boxes workflow. To embed such a slide, you'll  an extra difficulty: how will the fluid boxes – both on master slides and slides – behave?  In this blog that extra problem is discussed, including tips to avoid problems. Supposed is that you have read the two previous articles – for the basic knowledge. First recommendation ‘NEVER’ use the switch to Destination theme for a Fluid Boxes project when inserting a QSP slide in a custom responsive project.

Master slides – Tips

All responsive QSP projects have a bunch of master slides. Those master slides have fluid boxes setup.  Setup can be totally different from the non-responsive projects with the same name. Look at the 'Wired' projects: lot of master slides in the responsive version, no master slides except the necessary 6 in the non-responsive version. As you may have deducted from my previous posts,  the NAME of the master slide used for an embedded QSP slide is very important. If the same name has been used in the receiving (destination) project, extra care is needed. For your use I have created a table comparing Master slide names used in the 5 available QSPs (at this moment: September 2019).  You can download the pdf (was quite a lot of work to create it, please show respect for the protection built in).

QSP MasterSlides

In the table some cells are identified in a special way:

• If the same master slide name is used twice in the QSP, both numbers  are in the same cell, red font on  a grey background. This is a very worrying situation, not sure why the developers did use dual names.
  
  
• Some master slide names appear in several QSPs. If they are identical they are bolded and red for the projects where it is the case. Italic names point to master slides similar to others, but with a slightly different name.

I didn’t include the quizzing master slides. They rarely have been edited a lot (except for the Results slide) and follow the rules I explained in this older post ‘Quiz Slides and Fluid Boxes‘. You could extend the table with the master slide names in your project if you try to embed QSP slides in a company project with an existing theme.

Even master slides with same name, can have a totally different Fluid Boxes setup. The Master slide 'Objectives' is present in 3 QSPs. Have a look at the fluid boxes setup for this Master slides in the projects Aspire, League and Wired.

Aspire's master slide, as you can see, has a rather simple Fluid Boxes setup. The slide ‘Course Objectives’ which is based on this master slide didn’t add supplementary fluid boxes.  That is the case for most slides in the QSPs, only using the Fluid Boxes defined on the master slide. The slide provides 4 topics (Objectives) all in one Fluid Box to the left.

In this master slide of the 'League' project, a lot more Fluid Boxes have been defined. In the screenshot the boxes FB_956 and FB_957 have been collapsed. Their setup is similar to the one shown under FB_955. This master slide provides 3 topics, each in its Fluid Box. As with the Aspire project, the Slide ‘Objectives’, based on this master slide, doesn’t have extra Fluid boxes.

The 'Wired' master slide has the most complicated setup. It is impossible to show the full setup for this master slides. The collapsed FB’s at the bottom each have 5 vertical fluid boxes. No extra FB’s wer added n the slide ‘Objective’. Aspire had 4 topcis (in 1 FB), League had 3 in an individual FB, but Wired has 5 topics. .

You can imagine what happens when you switch from source to destination theme for an inserted slide where both themes use a master slide with an identical name. Have a look at the mess in this example. After inserting the described master slide from the Aspire project, I applied the Wired theme to it. Result, without any warning:

Not only are the objectives not getting into the appropriate FB, the green topics text is not in a Fluid box at all. You will have to move them manually into fluid boxes, and probably delete a lot of (empty) fluid boxes. That is cumbersome work, especially since the FBs are defined on the master slide. That means they cannot be deleted on the slide itself..

Conclusion

For responsive project to brand embedded QSP slide, please follow the step-by-step plan to add a fitting Master slide to the project theme, as described in ‘Embed QSP slides‘. Double-check the name of the Master slide, if it is an existent name in your project, first edit that name in the  QSP theme. That way you will avoid a disaster like I showed above with master slides using the same name.

Feel free to use the pdf I provided with an overview of master slide names for the present responsive QSPs. Beware: there may still be typos, please report them.

Intro

Recently I posted this article about ‘Destination/Source Theme’  I warned for using the switch button to the Destination theme after insertion of a QSP slide.  Logically you expect now an alternative workflow?  A general scheme for both responsive and non-responsive projects is however not possible. Reason: the present QSPs have a beautiful design but the technical setup is very different, no rules. 

I will try to offer some tips here to make it possible to blend the inserted QSP-slides into your project design which is probably based on a custom theme. Due to the big variation in technical setup, this first post will be limited to:

• non-responsive projects
• Quick Start projects which use master slides in a consistent way

The second condition excludes the project Wired which only uses the Blank master slide.

In a future post I will try to offer similar tips for responsive (Fluid Boxes) QSP-projects

Start situation

The workflow with its screenshots is based on insertion of one QSP slide from the project Aspire.  The receiving project is the DemoProject I mentioned in the previous blog post. Both projects have rather different color palettes:

The DemoProject uses three fonts: Termina, Filson Soft and Trebuchet (rarely), whereas the Aspire project only uses Tahoma.

The inserted slide was the Exit slide of the Aspire project was inserted in the DemoProject as you can see in the screenshot. It really needs branding. If you want to follow along, you can add that Exit slide to one of your projects.

Branding workflow step-by-step

Step 1: Master slide

Open the Master slide panel with the inserted Aspire slide ‘Exit Layout’ selected. You will see all the master slides of the Aspire project, but the used master slide is automatically selected. You see that it is labeled ‘Welcome w/o Sub + CONTENT’. Have a close look at that master slide and its components on the Timeline:

You see from bottom to top: an image placeholder,  a Title (shape) placeholder, a caption placeholder and another shape placeholder meant for a shape button.  Sorry, but the styles used in the master slide are mostly overridden styles, and replaced by other styles on the slide itself. Just for your information, don’t bother about it.

Step 2 Copy master slide

You will copy and paste that master slide to the original course theme (DemoProject) using these steps:

• Use right-click menu (or Edit menu) to copy the selected Aspire master slide described above.
• Return to the Filmstrip
• Select any slide from the original project
• Open the master slide panel again, it will refresh and show the master slides of your project (here the DemoProject).
• Paste the copied master slide from the Aspire master slide panel.

The result in this case is visible on this part of the master slide panel. The new master slide is still selected, and kept its original name. This was possible because that name didn’t exist in the DemoProject theme (more about importance of master slide names in next blog . If the same name exists in the receiving (Destination) project, you need to rename the master slide before the copy/paste

Of course the object styles are not what you want. In the screenshot above, the Title shape placeholder is selected, and you see that the style was overridden (+ sign). If that had not been the case, the Default Title Smart Shape style of the DemoProject would have been applied automatically. Another example of the lack of rules for the QSPs

Step 3: Replace styles

Still on the master slides, apply styles for the original project DemoProject theme to the objects. In this case:

• There is  a Default Title Smartshape Style in the DemoProject theme, needed only to use ‘Reset Style’ for the title. Because the style was centered, changed it to left-aligned but the font (Termina) and the color were applied automatically.
  

  

  You see a + sign, because after resetting the style I added the alignment change, didn’t create a new style for this alignment change. It will only be used on the inserted slide, all other titles in the original project are centered.
• Same workflow is used for the caption, since a Default Caption style exists (Filson Pro and light color)
• For the shape button placeholder, another shape button style was chosen from the DemoProject theme.
  

  

Step 4: Apply Master slide

Open the Filmstrip, and select the inserted Aspire slide. In the Properties panel choose the theme DemoProject and the list with master slides will appear. Choose the ‘Welcome w:o sub…..’ master slide and you should get this result:

You see some remaining problems: the placeholder for the shape button was not used in the QSP, probably deleted and replaced by another button. Either you edit that original button or you keep the placeholder button.

The background has of course not changed. You may need a last step:

Step 5: Final touch

Two more tasks need to be done to have a fully branded slide fitting in your project design:

1. Replace the image. Changing the Hue with the Edit Image features could work in some situations, but not for an image with a blue sky. Of course, editing in Photoshop while masking the sky is possible.
   
   
2. Replace the blueish gradient at the bottom. It is not a gradient created in Captivate but another image. However it could be possible to use Edit Image, and move the Hue slider for this gradient.

Conclusion?

This workflow may seem cumbersome, but it is safe contrary to the switch to Destination theme.  It is only one example slide, of course. Just hoping you would try this out. It may even lead to improving practice for your custom themes.

Intro

Since the release of 11.5 I have written a blog post about Theme enhancements , another one with Tips for the Assets panel, and one for the use of QSP projects.  About the Copy/Paste Appearance I have warned that this can be a great feature in some situations (states, temporary testing, use for text styles) but should never replace Object Styles if you are or professional eLearning developer. Why do I mention this post? You’ll find a similar warning in this blog about using the  switch to destination theme, when inserting (QSP) slides from a project whiif that new slide is inserted after a slide with another theme:

In the screepnshot you’ll see the button which appears in the Timeline under the inserted slide. Default setting is to keep the Source Theme which is the theme used in the project from which you inserted the slide (in this case from the QSP ‘Wired’, non-responsive). For consistent projectt design, it is tempting to switch immediately to the Destination theme which is the main theme of your project (provided you had a one-theme project before inserting the slide).  Believe me: do NOT switch without preparation because the result can be disastrous. I have seen this happening with trainees, and in a webinar presented by Adobe.

This post is meant to give you some insight in the reasons for my warning. I may refer to older posts about themes, which is a topic that is not popular probably because the Theme impact on courses is largely underrated. Too often, when asking on social media about the used theme, I get the answer 'I do not use a theme', something which is impossible!

Let us start with a summary of what happens when you click the option ‘Use Destination Theme’.

Result of switching to Destination theme

All components of a theme can be switched without any warning. Here is an overview:

Theme Colors

Each theme has its theme colors palette. Recently I wrote about using Adobe Capture or Adobe Color to start such a palette, which will mostly be based on the stylesheet of the company. In a well-designed project only colors from that palette are used: 10 main colors + 50 tints. When switching a palette, you have no control over the mapping of the colors. For the present situation this means that  color 1 of the source palette will be replaced by color 1 of the destination palette, etc. That can already lead to strange results, because not every palette keeps dark and light colors in specific locations.  Here is an illustration of two totally different palettes. The first is in my test the destination palette, second the source palette of a QSP theme: can you guess  what happens when the colors are switched?

No Usage button is available for colors - too bad.  After the theme switch you’ll have to manually edit if the colors are not appropriate. If it was possible to map colors between the palettes this would be easier: I could tell that the first color of the source theme had to be replaced by the third color of the destination theme, that color 4 was OK to be replaced by color 4 etc. One of my feature requests.

Theme fonts

Situations is similar.. In most cases you will see three fonts in the Theme Properties. Some QSP’s use the same font for all text whatever the style. If your destination theme uses 3 fonts and the inserted QSP slide uses ony one font, all the text styles after switching to destination theme will be replaced by the first font in your original project theme. This image explains what I mean: the source theme in Wired has only Arial as font. When I insert it in my demo theme, which uses three fonts (Trebuchet is the least  used but for some reason appears as font 1), there is no way for Captivate to know to which styles font 2 and 3 need to be applied. Result: all fonts will be Trebuchet. In this case that font was only used in feedback messages, Filson Pro was the main font for all text, Termina for Titles. There is – same as for colors – no way to change the sequence of the fonts. Mapping wouldn’t help here, a Usage button however would be welcome. My demo theme is fully documented, which is not the case for the QSP projects.

Object Styles

Now it is getting tough, because each of the QSP’s has its way of defining styles. Some use default object styles, others don’t use them (do not understand the reason).  Fonts and colors will be replaced as I explained above. But the remaining components of the object styles will only be replaced by the style of the destination theme if  they use the same style name. For the QSP’s that is rarely the case. Typical example is the [Default Title Smartshape Style]. It exists in my test demo theme, it exists in each of the QSP’s but is never used. Result: the existing object styles in the QSP will be added to the styles in the destination theme. If you use a lot of inserted slides, you’ll end up with a very long list of object styles added to the existing styles in the original project theme. Very hard to manage those styles!

Master slides

Similar to the object styles, if a master slide exists with the same name in the destination theme, that master slide will be applied (have seen this happening several times). That can be really catastrophic, especially for responsive projects because the fluid boxes structure of the destination theme will probably be totally different. It is less dramatic for non-responsive projects but could be frustrating as well.

If the master slide has a name which is not available in the destination theme, it will be added to the master slides. Similar to object styles, there are no common design 'laws' for the QSPs.. I can only post some more details for each individual QSP. One example: the responsive ‘Wired’ QSP has a complete set of master slides with fluid boxes, the non-responsive ‘Wired’ doesn’t use any master slide, all slides are based on the blank master slide which is very weird and not at all user friendly.

Skin

Setup of the skin is not affected by destination or source theme. It will be one skin for the project, based on the original theme which you used to start the project. Only theme component you don't have to worry about!

Conclusion

Hope you understand now why I did introduce this post as a warning post.  In most cases I would recommend never to use the opportunity to switch to the destination theme when inserting a slide, unless you know the themes of the source and destination theme in-depth. That is not easy for QSP-slides. I may post more recommendations for a workflow that can avoid most of the problems when trying to embed those slides with respect of your custom styling.

Intro

Being able to use SVG’s, for which you can limit the clickable area to the SVG itself, creates a lot of opportunities. In a recent post I explained how you can use them for a custom Hotspot question. 

This time I played with Flags, in Europe a lot of national flags have a cross embedded. Play with this example file. After the title slide which has some explanation, you have to color 5 knowledge check slides, Have fun. 

Small warning: if you are on a small screen, you may have to insist to color the small parts (especially on the UK slide). The part is really clicked when you have seen it shrink. You can play from this link (scalable HTML) or with the embedded version (fixed size):

Setup

You’ll find details about the setup,with topics:

• Objects (including timeline)
• Variables and Events
• Advanced actions
• Shared action (has been used 47 times)

Objects – timeline

From bottom to top you see:

• SS_Proback1: (smart shape) the white background of the progress bar (bottom left). Since the flags have different amounts of parts, I preferred to have an individual background on each flag slide, whereas
• SS_Progress: (smart shape) progress bar is timed for the rest of the project. It has a normal state which is invisible (no Alpha nor stroke), and a state for each added green star, totals 18 states but not all states are used on each slide.
• Gr_Denmark: has all the flag parts, on this slide 5. All parts are SVG’s used as buttons with the default pausing poins at 1.5secs. Each SVG has 3 object states: Normal (with a black pattern), Correct (colored), Wrong (Gray tint). Here is the screenshot with object states for the Cross part of the UK flag:
  

  

• Gr_Colors: group with 5 colors, timed for the rest of the project because same colors are used for all flags. Colors are shape buttons, default pausing point at 1.5s. They have 3 states: Normal, Current and Dimmed. Here a screenshot for the Red smart shape.
  

  

• Country_DK: country name (text)
• SB_Next: shape button timed for the rest of the project, no pausing point, with 3 InBuilt states (Normal, Rollover, Down)
• Title

Variables and events

Three user variables are created for the actions:

• v_color: will store the name of the color chosen from the color shapes; the exact names are needed which are Blue, DarkBlue, Red, White and Yellow.
  
  
• v_counter: will track the number of correct flag parts which have been colored (is equal to the number of stars displayed by the progress bar).
  
  
• v_max: the number of flag parts to be colored. For the first two flag slides this is 5, for the two following slides it is 9 and the last flag slide has 17 parts.

I didn’t provide a replay course button at the end, to limit the number of events and actions. The used events  are:.

• On Enter slide event for all flag slides. They trigger a similar advanced action, depending on the number of flag parts: 'Enter5' (first two flag slides), 'Enter9' (two following slides) and 'Enter17 'for the UK slide.
  
  
• On Enter slide event for the End slide triggers 'EnterEnd'.
  
  
• Success event for the Color shape buttons trigger a similar advanced action 'Blue_Act', 'DarkBlue_Act', 'Red_Act', 'White_Act' and 'Yellow_Act'.
  
  
• Success event of the SVG’s which are the flag parts (used as buttons), trigger all the same Shared Action 'FlagAct'.

Actions

Enter5Act/Enter9Act/Enter17Act (advanced actions)

You see it is mainly a Reset action. Because the color shape buttons are timed for the rest of the project, it is necessary to reset their state to Normal when entering a new slide.  That wouldn’t have been the case if I had repeated the colors on each slide, and left the option ‘Retain state …’ unchecked. However such a setup would have complicated the actions a lot more, than using this advanced action On Enter. The actions for 5 and 17 parts are almost identical, only the value of the variable v_max will change (command marked in red in screenshot). Because of the limited number of actions (3), and the fact that only one command had to be edited,  I prefer duplicate advanced actions over a shared action with multiple parameters.

EnterEnd

This simple action will hide several items which were displayed for the rest of the project and no longer necessary on the Congratulations slide:

Blue_Act, DarkBlue_Act, Red_Act, White_Act, Yellow_Act

These advanced actions are triggered by the success event of the color shape buttons.

The 5 actions are also very similar, here is the screenshot of the Red_Act:

It is very simple to duplicate the actions for the other colors, and change the first command and switch one dimmed and current state to adapt the action to the new active button.

FlagAct

Shared action triggered by the Success event of the flag parts (SVG used as button). In older versions than 11.5 this setup would not have been possible since many bounding boxes are overlapping. The shared action, which I used 47 times, looks like this:

I indicated the 6 parameters by a color code. Four of them are always the same, but they are compulsory, need to be parameters (Progress bar, Next button, Wrong and Correct states). Only the color and the flag part are important to set up correctly. A good labeling system for the flag parts can help. You may have seen that I took care of labeling in a consistent way.

Conclusion

Hope this example releases your creative ideas for similar use cases, both for adult learners and (of course) kids.  It would be great if you commented about that. Or do you have questions, suggestions?

Why?

Font groups

I don't mean Font Families, but the way fonts are grouped in Captivate.

Have a look at the dropdown list for Character when you are in the edit mode for a text container, caption or shape. You will see that 4 groups are listed up, from top to bottom: 

1. Theme fonts: new group in version 11.5. If you use only one theme in the project, this group will show the fonts used in that theme, same information as under the Theme Properties. If you have multiple themes in the project, this group will show the fonts for the theme used in the active slide.  You can use this group to switch between the fonts of that particular theme. The active font is highlighted as you can see. Since all fonts of the three other groups can be used in a theme, these fonts do not guarantee that your learners will see them correctly.
   

   

2. Adobe fonts: formerly those fonts were indicated as Typekit fonts. This group may be empty for you, only fonts which you licensed using the CC (Creative Cloud) app, tab Fonts:
   

   

   
   Fonts from this group can be used safely, your learners will see them! When publishing you have to indicate which domains will be added to the license. The number of fonts you can license, and the number of domains, depend on your plan for Adobe Fonts.
3. Web Safe fonts: a limited group of fonts which are safe to use (my screenshots are on a Windows system):
   

   

4. System fonts: this last group shows all fonts installed on your system. That group will likely include the brand font(s), those who are commonly used for print in your company (or your client's company). Problem with using those fonts is that they will only appear in all circumstances if the learner has the same font installed on her/his system. 
   

Static vs Dynamic Text

Shapes and captions are labeled 'static' if there is no variable inserted in the text. 

If the project is a non-responsive project, static text containers will be converted to bitmap images. This has positive and negative consequences:

• Positive is that you can use any font, even a system font without having to embed them. The learner will see an image of the text.
• Negative: if you publish the project to Scalable HTML output, and the project is upscaled you'll have the usual blurriness which occur for all bitmap images. Moreover if you have a mixture of static and dynamic text containers there will be a visible difference between the two types of containers.

If you have at least one variable (system or user) in a text container it becomes dynamic. This means that the text will not be converted to images but has to be generated on runtime. Typical example is the score slide after a quiz: most system variables on that slide get their value only after the end of the quiz.  What are the pro and contra this time?

• Positive is that the font will look crisp at all time.
• Negative: if you use a system font, and that paricular font is not installed on the learner's system, it will be replaced by a generic font (mostly Times New Roman), which looks very unprofessional. 

For responsive, Fluid Boxes project all text will be treated as dynamic text.

Recommendation

Fonts to use

Personally I recommend to avoid System fonts for all courses.  Keep to Adobe fonts or eventually Web safe fonts.

I hear you! How to explain to your manager or client that you cannot use the 'holy' branded fonts in their company style sheet. There may be exceptions, but in most companies those style sheets have been set up for 'printed documents', not for web and certainly not for eLearning. There is a big difference between both: Colors and Fonts are typical examples. This article is not dedicated to colors, but most ignore that CMYK and RGB can be quite different. The Adobe Fonts library has thousands of fonts. It should be possible to find a font which is very close to the 'branded print' font. You can challenge them: show two slides with exactly the same content, but one with their 'brand font' and another with the Adobe font which you found. Will the learners see the difference? 

Blurriness in non-responsive Scalable projects

The ideal solution would be that static text containers were converted to SVG instead of bitmap image, but that is at this moment just daydreaming (have no idea how complicated that is for the Captivate engineers). When I had a stubborn client who couldn't be convinced of using Adobe font, I converted all static text containers to SVG myself. It could still lead to a minor difference between the font look in static and dynamic text, but it was crisp.

A common workaround is to create an empty user variable, which you add at the end of each static text. That will force generation of the text on run time, which means you have to avoid system fonts. With that workaround you'll not see any difference between static and dynamic text.

Another possibility is to develop the project in a very high resolution, so that only downscaling will ever happen. However that has consequences for the file size.

Intro

The Assets panel is a nifty new feature, and I am confident that its use will be enhanced in the future. You could have read my first comments in this post. You find under Tip 2 a special feature concerning the Characters of the Illustrated category. One of the complaints often heard about downloading characters is that you have to do this one by one, which is taking a lot of time. If you like the Illustrated category, and also have access to Illustrator, you can find a tip which could save you a lot of time. It is no secret that the new features in 11.5 for SVG’s are my favorites, and they’ll play a role here as well. What would you think about characters in SVG-format, which means always crisp, never pixelated? With the possibility to edit the colors within 

Workflow

Step 1: Download Illustrated Work File

After the download you’ll be able to open the folder immediately from the popup dialog box. I mentioned already that it is under Others in eLearning Assets (under Public documents\Adobe if you are on Windows).

Step 2 Illustrator – Preparation

Be sure I am not at all an expert in Illustrator, my expertise is more with Photoshop, Captivate, Audition and InDesign.  Three items in the Illustrator environment will be important, try to find them and get acquainted. The active workspace is not  important, I used Essentials:

1. Selector tool (black arrow) which is the first tool in the vertical Toolbox, indicated by a red circle in the next screenshot. It has also a shortcut key V.
2. Properties panel: it may be open, just find it or you can open it from the Windows menu. This panel will be used to identify the nature of a selection (step 3).  It is highlighted in light blue in the screenshot. For this particular selection it indicates as ‘Group’. You are familiar with grouping in Captivate and that knowledge will be useful in step 3. IYou can increase its size both horizontally and vertically.

The characters come with 4x6  poses.  Only face changed in the groups of 6: disappointed, speaking, normal and happy.

Step 3: Identify and change status of character

Choose the Selector (arrow) and drag a rectangle surrounding (or cutting) the character you want to save.  You’ll see a lot of blue lines (paths) appear in the image. If the Properties panel indicates that this is a group, it is great, done with this step! Here is an example (character Sydney):

For the following example, the selected paths are indicated as "Mixed Objects". You need to group them which is possible with the same shortcut key CTRL-G as in Captivate. Alternative is the command 'Group' from the right-click menu , or from the menu Object. Here is an example of a selection which has to be grouped (character Jessica):

Step 4: Drag objects to Asset Export panel

Step 5: choose Export fomat(s) 

You can  indicate to which format you want to export, and multiple formats are possible. In the screenshot below you’ll see that not only  SVG, but also PNG’s in 3 different sizes was chosen. The last option indicated an exact height for the PNG. That way you can increase the quality to what you want exactly, since the original image is vector-based. You know the rule in Captivate: best quality for a bitmap image (PNG is bitmap) needs inserting the character in exactly the size you want. It can also be interesting to increase the size if you want to use only part of the character.

Let us compare with the normal download of characters from the Assets panel. You get only two choices , both with a fixed size (high and low).

Available formats are visible in this screenshot. For the characters, which have a transparent background you should not use JPEG because it will replace  the background by a solid color:.Now click the Export button. You will be asked to indicate the location for the images. You can put them in a subfolder of the eLearning assets or anywhere. They will not show up in the Downloads section of the Assets panel.

Conclusion

I like the Illustrator Export Asset panel a lot. Being able to use SVG format has many advantages: always high quality, and  it is so easy to edit colors in Captivate (or by roundtripping with Illustrator). This article is also meant to provide a possible workaround for having all characters available immediately without having to download them one by one. Too bad that you do not get such an overview image for the normal characters, only for the illustrated ones.

A warning: the downloaded Workfile (see step 1) nor the exported assets will appear in the Downloads section of the Assets panel. You could store them in the Others folder under eLearning Assets, but will have to import them manually to the Library of a project to use them. 

Intro

“I have groups of slides. Each group consists of a handful of slides that has event video on each slide and nothing else. The videos autoplay. The user can enter these groups at any point and must watch each video before being redirected back to a main menu. “

After I had gotten all details, I created this example file. The assets panel in 11.5 was very useful as you can see. Only Chapter 1 has been worked out with 4 slides containing event videos. For Chapter 2 and 3 only one slide is available with a back to menu button. Try it out: you can start with any video, but then the sequence will be linear: 1-2-3-4, 2-3-4-1, 3-4-1-2 and 4-1-2-3 are all possible. You can use the Chapter 1 button on the main menu as many times as you wish. It should be foolproof. However… you have to watch the videos from start till end.

The embedded movie is at a fixed resolution. The project is published as Scalable HTML and you can also play it directly in any resolution from this link.

Setup

Variables

Events and actions

Enter event of video slides 1-2-3-4

This event is used to trigger an advanced action which will check the value of the 4 variables. If they have all the value 1, the learner will be navigated back to the menu slide. Have a look at  the Preview of this action:

Exit event of video slides 1-2-3

For the first three video slides this event is used to trigger a simple action, similar to this one for the first slide:

Assign v_one with 1

Exit event of video slide 4

1. All video slides are viewed (learner started with first video)
2. Not all video slides are viewed (learner did not start with first video)

The first situation means that the learner will be navigated to the main menu slide, the second that he still has to view video 1 and maybe more. This means we need a conditional advanced action. Here is the screenshot:

Since the exit event has also to toggle the variable v_four, I used two decisions. The first one ‘Always’ is toggling that variable. The second decision is the conditional one described above.

Success event of the Video buttons (Chapter 1 slide)

Since both remaining chapters will have a similar group of video slides, this approach can be used there as well, to reuse the same variables. The advanced actions described before, can be duplicated and edited. The shared action can be used as it is without any change.

Why?

Almost 5 years ago I have published some articles about the Theme Colors. From what I hear on social media, and read in most books and manuals (and in a recent webinar) there is a lot of confusion about this topic. In Captivate 11.5, which has now Quick Start Projects and the possibility for multiple themes (with their palette) in a project, this topic becomes even more important. In personalized training, my trainees will always learn that the creation of a good Theme Colors palette is the first step for a useful  custom theme. No doubt about the relevance of such a theme in a company environment, where you need to apply the style sheet of the company. However even a standalone project benefits largely from a good theme to have consistent design.

Creation of Color Scheme (5 colors)

To avoid confusion with Theme Colors in Captivate I prefer to use here the word ‘Color Scheme’ for the palette with 5 colors to which I refer in this part.

Classic color schemes consist of  5 colors, when you use one of the two applications provided by Adobe:

1. Adobe Color,  a cloud-based (free) desktop application. You can open it using the CC app or with this link.  Years ago it had the name  'Adobe Kuler'. It gets regular updates, only recently that was the case. You can find inspiration in this site because lot of schemes are publicly available. Of course it is also possible to create custom schemes, either starting from one or more colors, or from an image. The schemes typically get saved to … one of your CC Libraries. For most Adobe applications that is fine but Captivate sadly has no access (yet?) to those libraries. As a workaround you could use  Captivate Draft (has access). However since the transfer from Draft to Captivate results automatically in a Fluid Boxes project, that workaround is not useful if you need to create non-responsive projects. 
   
   There are plenty of tutorials around for Adobe Color. Just one example: YouTube tutorial. If you have access to LinkedIn learning, you could also find courses.
   To get the scheme into a normal cptx project, you can save a color scheme as ASE file. For a reason explained later, not the ideal format for Captivate. You can make the color values visible in Color, but I miss a way to export them easily. When you open such a file in Notepad or similar, you could extract the RGB-codes but that is cumbersome. Or you can write them on a piece of paper.Hexadecimal is fine:
   

   

   For that  reason I prefer using a mobile app, around since quite a while:
   
   
2. Adobe Capture: available for iPad and for Android (still beta, but functional). I have it installed on my iPad and my Android phone. Short tutorials included.  You have exactly the same functionality as with Adobe Color, but can also directly shoot an image as basis for your scheme. It can also be used to create shapes (SVG’s) and gradients, but I’ll leave that for another blog. Especially with the enhanced use of SVG's in 11.5, an interesting topic.
   
   The advantage of Capture is that you are not limited to saving the schemes to a Library, or save to ASE-file. You can export the scheme as ‘color values’ and print or send them by mail, or social media. Much more useful for Captivate. That functionality may be hidden somewhere in the desktop application, but so far couldn’t find it. You’ll get a txt file with all details of the colors, which is the ideal form for Captivate. Here a screenshot of such a file:
   

   

   Be sure: I will not explain the different ways of defining colors (although I would love to), Captivate accepts only RGB or HEX format. However,  in the Theme Colors palette I suspect that the HSB format is used to create the tints derived from the main colors.

Transfer Color Scheme into Captivate

Do NOT use Swatch Manager

If you have read my old blog post, you will know that it is possible to import an ASE-file in the Swatch Manager. Follow this workflow:

• Clear all swatches
• Click Append
• Point to the ASE file.

In this screenshot you see the result of such a workflow:

You do not need the Swatch manager, your theme will be saved with Theme Colors palette. How can you get the colors in that Theme Colors palette? Only way  is to find the color value of each of these swatches and type them in the Theme Colors editing window. Not so user friendly. This explains my present topic title: NOT to use the Swatch Manager, although I am aware that many trainers and books still mention it. Personally they could take out the Swatch manager, it is a legacy feature.

Use Color Values

Starting from the txt file you got with all the color values, open the Theme Properties panel, and go into Edit mode. To enter a color of the theme, you need 4 steps:

1. Copy the hexadecimal value for the txt file
2. Open a color
3. Go to the Color wheel
4. Paste the value

Here is a screenshot illustrating the workflow:

It is still a cumbersome workflow,. Sorry, but this is due to the fact that ASE import is impossible in the Theme Colors palettes. 

The palette has now 5 main colors, you can add 5 more. Have a good look at the existing palette: do you have enough light and dark colors to provide contrasts? Often it is a good idea to add neutral colors as black, white grey. It is not really compulsory to have/use 10 colors (+tints). In all cases if you want to switch to another palette you have to be very careful. Here I think about branding the QSP project slides.

Some users/trainers recommend and use the color picker a lot. Not a good idea at all. Check it out: you will not always get the color you want when checking its value in the Color wheel. The Theme color palette is directly available (see screenshot below).

When your Theme colors palette is finished, always colors from that palette, never use the Swatch manager. It is the best guarantee to have consistent color management. Moreover, when using other Adobe applications for asset creation or editing (Photoshop, Illustrator) you can easily transfer the colors, using the ASE file or the color values. Even though you’ll use them in a Swatch panel, because that is the default workflow in that application It should be clear now that for Captivate colors are in the Theme Colors palette, not in the Swatch manager. If you open the color dialog, and the used color of the item is a Theme color, the dialog will open in its first state (highlighted in screenshot) automatically. Forget the Swatch manager (second state), the color wheel (third state) and the color picker (last state).

If you like this introduction, could write more detailed articles. Just let me know what you’d like? 

If you want make me happy, add your voice to my repeated request to make it easier to import a color scheme (from Color or Capture) to create a Theme Colors palette.

Intro

About 5 years ago I published this blog explaining the workflow for such a question using shape buttons. The embedded example in that blog was of course a SWF output.  With release 11.5 the possibility to use SVG’s as buttons, and to control the clickable area, combined with multistate object made me feel it is time to update this old post.

Why a custom Hotspot Question?

• hotspots have to be rectangular
• partial scoring is impossible

• hotspots with any shape
• partial scoring, which still can be reported to a LMS
• full control

Limitations of custom questions

Example

Please be a bit patient when you see a ‘pink’ feedback (which is the correct style). It may be due to the amount of SVG’s on the slide, but it takes time to hear the audio and see the flag appear and animated.
If the embedded movie is too small for your device, you click this link.

Setup

Look at the screenshot, which shows the Timeline and the Properties, Actions tab for one of the non-correct SVG-buttons  (Luxemburg). In the Style tab, the option ‘Enable Click in Bounding Box’ is disabled to limit the clickable area to the shape of the SVG itself (see recent post). In the screenshot both groups (countries/flags) are expanded. 

For the SVG buttons (countries) Success message is activated and used to display feedback. Those messages have two different styles: grey for the wrong clicks, and pink for the correct ones. After the correct message, an audio clip sounds and the flag of that country will appear at the bottom left. Both for correct and incorrect SVG’s the state will change to the Visited state when clicked: That visited state is grayscale for incorrect clicks. No advanced actions needed so far.

Actions

The on enter event of the question slide triggers the simple action ‘Hide Gr_Flags’

The first three commands are self-explanatory. Why did first apply the effect (line 4) to the group, and wait 0,1 sec before showing the flag? Because that will avoid flickering, a trick I learned from another user many months ago.

Duplicate that action, and edit it for the three other correct SVG’s.

Why did I not use a Shared Action?

If you are a fan, you know that I mostly use Shared actions when possible. This was also the case for this example.Of course, I created first a shared action. But a strange phenomenon appeared: the Effect was not applied for each instance of the shared action, only for the first one. I wanted the whole group to be animated after a correct answer. Yes, I could have ungrouped and changed the action, but then that meant another advanced action On Enter for the slide (where I now hide the group). Moreover I like to have the effect emphasize the whole group instead of one flag.

Still looking out for the reason of this non-consistent behavior. Really this is the first time I encounter a difference between an advanced and shared action behavior. Be sure, will update this post when I have an answer.

§Intro

In previous posts I have talked about the advantages and disadvantages of the 6 button types, and how you can edit the colors of SVG’s, even in states and when they are used as buttons. SVG’s, being vector images are excellent for use in projects to be viewed on multiple devices, whether it is a scalable non-responsive or a responsive project (fluid boxes or breakpoint views).

Unique about SVG’s used as buttons, is the fact that you have control over the clickable area, which is not the case for other  button types. In the example below you’ll see buttons which would have been impossible to realize with any other button type.

Example file

Watch this two-slide project. The Title slide is taken from the QSP ‘Legacy’ (non-responsive), but I have changed fonts (not fan of Arial). The second slide uses an edited master slide from that same QSP. Click the buttons in circular image in any sequence, and you can also reset the slide (used the Scenario 2 technique described in Replay Slide)

Setup Clickable Area

Six Buttons

The 6 buttons in the circular arrangement have overlapping bounding boxes. Have a look at this screenshot:

By unchecking the option ‘Enable Click in Bounding Box’ the clickable area will be limited to the space within the colored shapes, and those do not overlap. 

I kept only the Normal and Visited InBuilt states of the buttons . In the Visited state I added an icon (also SVG) from the Assets panel,  colored in the same color of the button (which was dimmed). That icon also covered up the number, which was part of the button SVG. Here is the Object state panel for button 6:

Reset Button

For this button I used an icon from the Assets panel. and added a text caption close to this button. The bounding box of the SVG is encreased so that the Reset text looks to be inside of the box. In this case The default option under the Style tab ‘Enable Click in Bounding Box’ remained checked. It now looks as if the learner can click both text and icon. I didn't use the padding option, which would make the icon smaller inside the bounding box.

Other Items

The information is stored in a multistate shape, where the Normal state is invisible (Alpha and Stroke set to 0). A two state shape is used for the final image, which is in a custom state of a circular shape. That circular shape also has an invisible Normal state. 

For the multistate objects the option ‘Retain State on Slide Revisit’ remains unchecked. Since the Reset button is re-entering the slide, all multistate objects will automatically revert to their Normal states.

Actions and variables were custom made, I didn’t use any of the click-reveal interactions from the QSP’s. Sorry about that, but I’m so used to create that type of interactivity that it comes almost naturally. One tracking variable for each buttons was needed to have the final image appear after all buttons have been clicked. 

Intro

Captivate ‘s most recent release, 11.5.0.476 added two types to the button treasure chest. You all know that the button is perhaps the most used interactive object. If you are only creating non-responsive projects, you may sometimes replace it by a click box, but that is not a possibility for Fluid Boxes projects.  In this post you’ll find an overview of all button types, with their advantages and disadvantages. It will be a lot of reading, if you want a short overview and check some details later, check this post.

This long article offers more details than the published output in Tips for use QSP

Common features for all button types

• The ability to pause the playhead or not by adding a pausing point, which you can do in the Timing Properties panel. The pausing point will appear with the typical pause symbol on the button timeline. Pausing point will not stop everything (see Pausing Timeline).
• Two events ‘Success’ and ‘Last Attempt’ (this is not available with Infinite attempts) which you can use to trigger any possible action. Success event means clicking the button, Failure means clicking outside of the button.
• Add-on of two extra InBuilt states on top of the Normal state Rollover and Down states. A fourth InBuilt state exists but is not automatically created; Visited. Inbuilt states typically appear in a situation. The form of the button in those states has size and location locked to the Normal state. however you can add more items in each state and define Custom states as well.

The 6 types can be divided in two groups of 3:

1. Old types (which I have known since I started using Captivate).
2. Newer types: one was added with Captivate 6, 11.5 added two more.

Old Button Types 

Those are Text buttons, Transparent buttons and Image buttons. They can be added using the Interactions button, option Button.  You will always get a Text button. If you want a Transparent or an Image button, you have to open the dropdown list under Style Name in the Properties panel. Image button is the second choice, Transparent the third. In this screenshot (same for most included themes) two more styles are visible, both for quiz buttons (which are also transparent buttons).

Common features for older types:

• Button(s timeline is green.
• They have  a default object style, which you can define in the Object Style Manager. The object style includes the InBuilt states Normal, Rollover and Down (not Visited). Like all object styles they will be included in the (custom) theme. Multiple object styles are possible for each type. To reuse such a button use either the theme, or you can export/import individual styles in a new project.
• Bounding box of the button is the clickable area, whatever the shape of the button (for image buttons).
• They cannot be used on master slides.
• They cannot be timed for the rest of the project.
• They can be used for the embedded buttons on quiz and score slides.
• They cannot be used as extra (custom) button on a quiz or a score slide.
• You cannot use copy/paste appearance, not even between buttons of the same type.
• They will not show up in the Library.

Text Button

This type is always rectangular. Fill nor stroke can be edited. You can only make the button transparent, which results in only the Label showing up (see screenshot with dropdown list for the checkbox ‘Make Transparent’. Look at this screenshot for a possible ‘look’ of the states:

The text on the button needs to be typed under ‘Caption’ in the Properties panel, not in the button itself. The text can be formatted: font, font size, font color and attribute.

Tips for use

Since Captivate 6 I have never used this type anymore. Not being able to use theme colors for its style is a show stopper for me. Using the option ‘Make transparent’ is not very appealing since it still keeps the bounding box as clickable area. Personally I regret that this button type is the default type when using the Button option under Interactions.

Transparent Button

Tips for use

Since quiz and score slides need an old type for the embedded buttons, this one is my preferred type. That is due to its better styling options, which makes it possible to give the transparent button exactly the same look as a shape button (which is still more flexible). You may wonder: why not an Image button? Read below why.

Image button

Before shapes appeared with version 6 I have created a lot of image buttons. You need a graphics application to do so:

• Create three graphics (bitmap), you are free to choose the type. I mostly use PNG (allows alpha channel), but you can use BMP (was the original choice), GIF… Graphics need to be exactly the same size.
• The images need to have the same name, but followed by _up, _over, _down.  You can see a lot of image buttons in the GalleryButtons under the installation folder:
  

  

• Save the buttons in the same folder, doesn’t have to be the Gallery folder.You would need administrator rights to add them in that folder.
• After inserting an image button, use either the dropdown list (for included image buttons) or the Browse icon (for custom image buttons stored elsewhere) and point to one of the graphics. Which one is not important, Captivate will recognize the other graphics and use them for the appropriate state.
  

  

  You see that the name on the button needs to be part of the image which is one of the disadvantages of this type of buttons. You need a lot of duplicates, each with its proper label as you could see in the excerpt from GalleryButtons shown above. You see also that the size of the button is mentioned next to its description, for the included buttons. Since those are bitmap image, it is best to use them at their original size. Increasing the size leads to loss of crispness as is very well visible in the last screenshot.
• Whatever the shape of the image, the clickable area remains the surrounding bounding box.

Tips for use

Since shapes became available, which can be filled with an image (see Turn an image into a button) I never used image buttons. Now, with 11.5 you can use both bitmap images and SVG’s directly as buttons. In my series about Tweaking Quiz slides, I mentioned them as only solution for a Fluid Boxes project to Tweak a Results slide. As you can read in that post, I used it exactly because it was possible to make an image button totally transparent, which is not possible for a Text Button nor a Transparent button because of the label. That is the only exceptional situation where I recommend an Image button?-.µ

None of the previous types are available in the new Assets panel.

Newer Button Types

Common features

• They can be used on master slides. Those will not have an ID, cannot be controlled by actions.
• They can be timed for the rest of the project. That way you create one button with a unique ID which can be controlled (Hide/Show, Enable/Disable)
• They can not be used as embedded buttons on quiz and score slides.
• They can be used as extra (custom) button on a quiz or a score slide.

This list is not as long as for the old trio. To see specific features for each type continue reading.

Shape Button

Such a shape button has some features taken over from the old trio:

• Its timeline is green. A Smart shape has a blue timeline, which turns green when you check the option ‘Use as button’, identifying it as an interactive object.
• Shapes have multiple default object styles, which you can check/define in the Object Style Manager. However you do not see a default style for a Shape button. Since any shape can be used as a button, each of the styles has the  InBuilt states Normal, Rollover and Down (not Visited) included. Similar to all object styles shape (buton) styles will be included in the (custom) theme.
• They will not show up in the Library, are not available in the Assets panel neither.

Shape button has also some similarities to the Transparent button, concerning the style: you can fill a shape with a solid color, a gradient, a texture or an image. You can also indicate color and width of the stroke. But, a shape button can have any shape, transparent buttons are limited to rectangle and rounded rectangle shape. This  is even valid for the states: you can switch to another shape in the InBuilt or custom states. Only rule is that the original bounding box location/size of the Normal state has to be preserved. Look at the Object state panel of (maybe too exaggerated style) of this shape button:

Personally I appreciate also the fact that the label can be typed in the shape, you don’t need to use the Properties panel (Text and Transparent button). I defined an object style for this button. It will include the edited image (Normal and Down state), the gradient and the text style for the Rollover state, and all strokes. Object style will not have the different shapes (Normal state is a freeform shape).

Shape button is the only button type which will allow Copy/Paste appearance as well! Read more in Copy/Paste Appearance.

If you are not yet convinced that this a very flexible type of button, look at the common features for the three buttons in this post.

Here are some minus points:

• If you want the shape to be filled with an image, only bitmap images can be used (as for trnasparent buttons). To have a crisp looking image, create it in exactly the same size as the shape button. More details in ‘Turn an image into a button
• You will find no Shape buttons in the Library,  only images if you used them s fill. I recommend to create a subfolder for images used in shape buttons. The Buttons section in the Assets panel neither has shape buttons.
• Shape buttons automatically shrink when pressed, trying to simulate a a real button.  Some developers do not like that effect (which you’ll also see in the two other button types of this post). Mixed feelings: I don’t care about this feature, but not everyone agrees. It would have been better to leave the choice to the Captivate developer.

Bitmap image as Button

You can swap images in the states, using the button indicated in this screenshot by a red rounded rectangle. In this example I used three different images from the series Brady (Illustrated category). You can add a text container in each state, but it is not really embedded in the image itself, or you can choose an image which has text in the graphics. Here I just used the character images.

You cannot define an object style s.

If you open the Assets panel, you’ll find a group titled ‘Buttons’. All the buttons in this group are of this type. However, the three InBuilt states will show identical images. In a previous article about the Asset panel I offered a tip to make it possible to have different images show up when inserting a button from this panel. That make it a lot easier to reuse buttons from this type: insert them from the Assets panel.

Common features described at the start are valid for this type as well.

Features which are less appealing:

• Contrary to all buttons discussed before, this type keeps the blue timeline of any non-interactive object.
• It is a bitmap image, which means quality loss when rescaling. Rescaling happens for Rescalable HTML output and in responsive projects.
• Shrinking happens for this type as well, may be very visible (with simple buttons like the ones in the Asset panel) or barely visible for a big character button like I showed in the screenshots.

SVG as Button

I have already blogged about this type in the already mentioned blog with Tips for the Assets Panel, but also in “Edit SVG’s“. Up till now it has never been possible to use a SVG in an interactive object like a shape button or a transparent button. For the first time you can use a vector-based image as a button, which is great news for responsive projects and rescalable HTML5 projects. They share the common features with the two other types of this post.

SVG’s also may have a smaller file size than their bitmap counterparts. I have converted some png-files from the Characters, Illustrated category to SVG’s. File size reduced to about 30% of the png filesize.Look

At least as exciting is the fact that the clickable area for a SVG need NOT be the bounding box of the image. Look at the Properties panel:

Watch the option ‘Fit to Bounding Box’, with the associated slider (blue rounded rectangle). In the default situation the slide will be at its maximum (to the right) which means the bounding box is filled with the SVG. I created some padding as you can see, by moving the slider to the left. The green rectangle indicates the option to define the clickable area. Default setting is ‘Enable Click’ which means the legacy situation where the bounding box is clickable everywhere. I unchecked it, and now the clickable area is limited to the SVG space. Expect in the near future to see a use case where this innovative feature will be used.

Similar to Bitmap image as button, no object styles are possible. The used SVG’s will appear in the Project Library. If you used the same SVG for each state its name will appear with a usage of 3 or more (if you have more states). For a more complicated image, I recommend to create the SVG’s separately (I use Illustrator) and import them to the Project Library. In this screenshot you see a Delete button, for which I used one of the provided Icons in the Assets panel, converted it to a button.  But unlike the Bitmap images, there is no way to include a different image for the other InBuilt states.

Negative points:

• Like its twin (Bitmap as button), this type keeps the blue timeline of any non-interactive object. Should have turned green (logged feature request).
• Shrinking happens for this type as well,
• No easy way to reuse a SVG button with all its states.

Conclusion

Here are my personal conclusions:

1. If I need a button which maintains a high quality image on many different screen resolutions use a SVG aton.
2. If reusability of certain buttons is important, and I need to localize them as well, I will use a shape button except…
3. For quiz and score slides as embedded buttons I have no choice but need to use Transparent buttons.
4. I am not tempted by bitmaps as buttons, except for a rare complicated button. Even though it is bit more cumbersome, in all other situations will use a shape button filled with the image.
5. I never use Text buttons.
6. I only use an image button in that Tweak situation described in the first post.

Would love to hear your ideas!

Intro

You may be aware of the fact that it is not possible to delete a score slide, once it has been inserted automatically because you created a quiz. It will become 'hidden'. For normal slides that means it will not be included in the output of the Captivate file. However, you may also know that quiz and score slides are bit 'special', because they have embedded objects (no timeline) and a lot of inbuilt functionality.

You need to be careful with that Hidden score slide, as a user in the forums experienced. Read on, if you want to discover another secret of the Score slide.

Problem and Solution

User didn’t want to show the score slide after a quiz, but created a a slide to jump to in case of Success, and another in case of Failure. Setup of the Quiz Preferences are visible in this screenshot:

The default way of achieving this is to click the Continue button on the score slide. But the user didn’t want to show the score slide. It is not possible to delete the slide but it was hidden. A slide which is hidden normally is not part of the published output. However Quiz and Score slides cannot be considered to be ‘normal’ as you’ll find out. His problem was that, whatever the result, the first of the two custom slides was always shown. Hence his complaint that the actions were not working.  Try it out, use this example published file and you’ll see that you always are navigated to Failure slide, which is the first slide, even if you have a 100% result:

Wrong setup

When I heard that the user didn't use the score slide, guessed the origin of the problem. It is due to the very special ‘status’ of the score slide, even when it is hidden. The Filmstrip of the previous example looks like this:

Correct setup

I moved the score slide in a position before the slides Success and Failure.

Why did this fix the problem? Quiz is considered finished when you reach the score slide, even when it is hidden. Now the quizzing system variables have their final value, including  cpQuizInfoPassFail which is responsible for the choice between Passing Grade and Failing Grade. When the score slide was after the Success/Failure slides Captivate expected more questions to come and didn’t evaluate that variable.

Another way of solving the problem, bit more work, is:

• Keep the score slide visible, but always before the custom Success/Failure slides.
• Use the On Enter event of the score slide to trigger a conditional action, checking the value of cpQuizInfoPassFail, navigate to the Failure slide if its value is 0, to the Success slide if it is 1. No need to set the Quiz Preferences actions in that case. And you automatically skip the score slide, learner will not see it.

Conclusion

Never trust the word 'hidden' if it is a Score slide!

Intro

The most recent version, 11.5.0.476 includes the new Assets Panel which I presented in this post.

You are able to use Quick Start projects, or slides taken from those projects to avoid having to design and to work out interactions for your project from scratch. Those projects/slides are available in a responsive (Fluid Boxes) and non-responsive version. I tested it out for a tutorial which you can watch using this link (it is a responsive fluid boxes project):

Button Types

If this topic, also related with 11.5, seems interesting, I will post a more detailed description in the near future. But today you'll get some tips from what I learned creating this tutorial.

QSP tips

1. Open the project, and delete or hide the slides you don’t want to use in your course.
2. Open a non-responsive or a Fluid boxes project, and insert slides from the Assets panel.

I used the second approach for the tutorial, for a logical reason: I didn’t use even half of the provided slides in the Aspire project. Project has only 17 slides, including a lot of duplicate instances of slides. I used these slides from Aspire:

• Welcome layout
• Timeline Interaction 02
• Main Menu layout 02
• Subtopic Header layout (used 6 instances)
• Tab Interaction 01 (used 3 instances)
• Related Content Interaction (used 3 instances)
• 3 Column layout
• Exit Layout

Tip 1 Duplicate slides

• Insert one instance of the needed slide
• Go into the Filmstrip, slide will be active (surrounded by a blue rectangle)
• Duplicate that slide, either with the right-click menu or with the universal shortcut for duplicate: CTRL-D.
• Move the slide by dragging in the filmstrip to the wanted location.

You can repeat this workflow as many times as needed. Due to Captivate’s smart labeling, the advanced actions will not corrupt in most situations. Why not always? See next tip.

Tip 2: Check Navigation commands

In a slide like the Main Menu Layout, the topic buttons point to another slides in the total project. On insertion of that slide only, without the target slides, all commands will revert to the default navigation command ‘Go to Next Slide’. You have to replace it by ‘Jump to….’ while indicating the correct target slide (in the project the slides of the Subheader Topic layout). This will prove easier if you use the next tip:

Tip 3: Rename slides

Tip 4: Replace image

1. Select the image.
2. Click on its name in the Properties panel
3. Choose another image from the Library dropdown list, or use the Import button to find it on your system.

However, on many slides an image is used as Fill for a Fluid Box. Look at the Subtopic Header slides (there are 6 in the example): having the image as fill allows to add an image on top of the fluid box. Normally you cannot stack two images, this is a useful solution for that limitations.

If you want to replace the fill for a Fluid box, you need to select that fluid box, you cannot just click the image. After selecting the FB you see that the fill is set to Image, click the second Fill button, use the Browse icon to find an image to replace the image. Be careful to check the Position properties if the new image doesn’t have exactly the same size as the original one.

Tip 5 Multistate objects

More questions?

Intro

Themes thumbnails dialog box

In older versions this dialog box had thumbnails of the available themes in the Layouts folder (and you could browse for themes in other locations). The active theme – which always had to be unique – was highlighted with name and resolution visible. The default theme was marked by a check mark.

In 11.5 this dialog box has two parts, separated by a horizontal line. The next screenshot, and indicated explanation  is valid for projects with one theme, not with multiple themes:

The top part shows the active theme, as usual with name and resolution. For a responsive project it is the resolution for the primary view (desktop).

The bottom part shows more available themes, and you can use the Browse hyperlink to search (custom) themes which may be stored on your system. Themes show name and resolution when hovering over the thumbnail. The default theme is still recognizable at its check mark. You see above that I have set the Blank theme as default theme).

To apply another theme to the project, select the new theme from the bottom part (or browse to it) and accept the warning. All slides will be converted to the new theme, which will replace the old theme in the top part. This workflow has not changed, but you’ll see below that this changes for projects with multiple themes.

Totally NEW is the button ‘Theme Properties’, replacing the former ‘Theme Colors’. You’ll read about this new panel in next point.

Themes Properties panel

Clicking the Theme Properties panel, will open this new panel, which shows you (for a one-theme project) the Fonts used in this theme (new) and the Color palette used:

Fonts may not be totally visible the panel cannot be resized (which is the pity). But clicking the Edit button at the bottom will show you all used fonts and colors, ready for editing.

A new functionality, which can save you many working hours: it is now very easy to replace one of the used fonts by another font. I always recommend to avoid using system fonts, use only websafe fonts or Adobe (formerly Typekit) fonts. That way you’ll be sure that all learners will see the font you had in mind, even when using dynamic text (includes variables) or creating a Fluid Boxes project. In older versions, replacing a font was very cumbersome, because you had to screen all object styles in the Object style manager which included characters, and change them one by one ( see Manage the Object Style Manager ). In this editing panel you cannot see however the Usage of the fonts (feature request) but it is already a big enhancement!

As I mentioned in my first review of version 11.5, the colors in the palette have now simple numbered names. The older names (Title, Subtitle, …) were confusing because they were rarely used for those objects. Editing colors in the color palette is the same as in previous versions.

Theme in Slide Properties

Less important for a course with only one theme, but the Slide Properties have an indicator of the used theme for that slide:

Theme fonts in dropdown list PI

When you are in edit mode for text containers (captions or shapes), the dropdown list for fonts will show at the top a group 'Theme fonts', which is new. The following group are the Adobe fonts (formerly Typekit fonts) if you have licensed some. The third group is the usual 'Websafe' group. You should limit font use to those groups, System fonts have to be avoided, especially if you are creating fluid boxes project. If you use system fonts, there is no guarantee that your learners will see that font, that it will be replaced by a generic font like Times New Roman or Tahoma.

 Multi-theme projects

You can insert slides using another theme than the project theme. Once inserted you’ll see in the Filmstrip an icon, showing two options Use destination Theme or
Keep Source Theme (which is the default choice). Beware: this icon only appears when a slide is inserted. When you insert another slide, the icon will disappear, in favor of the last inserted slide.

Look at this screenshot, taken after insertion of a slide with the “Earth” Theme (one of the Quick Start Project themes). You see that the first slide no longer has the icon, it was in the theme ‘Aspire’ has no longer the icon. This project has now 3 used themes: DemoTheme (my custom theme), Aspire and Earth. What is now the destination theme for the last slide? It is not the original project theme, but the theme ‘Aspire’ of the previous slide. I find this bit confusing.

You can use one of these two workflows to change the theme of a slide (where you no longer have the icon to change to the destination theme):

• Select the slide, use the Themes button and click the theme you want as destination theme for the slide. If there is no appropriate master slide, it will be added to the destination theme.
• Select the slide, use the dropdown list in the Properties panel (see screenshot) and choose the destination theme. If there is no appropriate master slide, you will be invited to choose one of the existing master slides.

In the thumbnails under the big button Themes, all the used project themes appear in the top part. The ‘active’ theme shown is the one of the slide selected at that moment. If you select multiples slides, not all using the same theme, it is the theme of the first slide selected who will show its theme as active?

Clicking the Theme Properties panel will bring you to the properties of the active theme. If you want to see the Properties for another theme used in the project, do NOT click that theme in the top part of the thumbnails, because you would change the used theme for the active slide!. You need to leave the thumbnails dialog box, select a slide in the filmstrip with that other theme to make it active in the thumbnails, in order to be able to access its theme properties.

Master slides

In a multi-theme project, the master slide panel will show only the master slides belonging to the theme of the selected slide, not all the master slide used in the project. Just a warning: if you have both the Filmstrip and the Master slide panel open, which is only possible in the Expert UI, not in the default UI, the master slide panel will not refresh automatically if you choose a slide with another theme than the one showing at this moment. You have to leave the master slide panel and come back to force it to refresh.

If you change the theme of an inserted slide to the destination theme, and it uses a master slide which is not available in the destination theme, an extra master slide will be created. It will use the destination theme colors palette and its object styles.

If that happens, you may have to use the button ‘Reset master slide’ to enforce the use of the new object styles. It is not always happening automatically, if an extra master slide was needed.

Object Styles

Theme fonts in PI

Same logic: the dropdown list in the Properties panel, will show the Theme fonts for the theme used by the selected slide.

Skin editor?

When i explored the skin, I found that only one skin exists. In the example I used for the screenshots, the skin designed for the custom theme ‘DemoTheme’ was always applied. Even when I have changed all the slides to another theme, or applied another theme to the whole project (where the message appears that skin is updated). Not sure what is going on, will update this post when I have more information.

I did not check out Recording defaults, last component of any theme.

Intro 

This post is meant as an answer to a thread posted in the eLearning community. "I want to create a menu that slides on and off the screen, like a door that moves to the left and right, when the user clicks a button." I invite you to read the comment by Greg Stager who is posting some links to blogs he wrote where JS is used to create slider solutions. As you know, I often try to use only Captivate features to solve similar use cases instead of JS. This is a new example. You'll find a step-by-step workflow to recreate the example I show. The shape (which I use as 'box') is not having a menu, I invite you to (re-)read my post about Hyperlinks for the creation of a Dropdown menu. They are a great way to avoid creating multiple interactive objects in the 'box'. 

If you don't like creating advanced actions, I have an offer at the end of the post to make your life easier...

Example

Watch this short file, only three slides after the 3 seconds long Title slide. They have two buttons (from the Assets panel in 11.5): a Next button on top, and the Slide toggle button below it. You can use the toggle button as many times as you wish on a slide. To restart, refresh the browser.

Step-by-step workflow

Step 0: Next button on master slide

I used only one master slide in this project, which made it easy to put the Next button on that master slide. I kept the default option 'Pause project until user clicks' (Actions tab). That will result in having each slide paused at its last frame.

Step 1: Sliding assets

Two assets have to be created and put on the first slide where you want to use the sliding box:

Step 2: Custom Out Effect

Create a time-based effect to get the sliding box out of the stage. Do not use an Exit effect, but a simple motion path. I added an AlphaFromTo effect as well (100% to 0%), and reduced the duration of both effects to 1 second. 

Workflow to save this effect as a custom effect is described in detail in this post. Do use that method after you have done step 3:

Step 3: Create Guides

Show the Rulers (View menu) and create two vertical guides, through the start and end point of the motion path. See this screenshot:

They will be needed to create the In Effect, to be exactly the opposite of the Out effect. Now you can save the custom effect, and take it out from the slider box.

If you didn't use a horizontal motion path, you'll need also horizontal guides. If you need more information about using Guides and Rulers, look at 'Guides Rule'.

Step 4: Move slider box in Out position

Use the guide in the scratch area to move the slider box to the correct position. I mostly use shortcut key (SHIFT or CTRL combined with left arrow) to keep that movement horizontal. For a non-horizontal movement, you use vertical and horizontal guide. You'll see a screenshot of the new position in step 5

Step 5: Custom In Effect

Create this effect using the two guides (or four if you needed also horizontal guides). In the screenshot you see this effect, where I combined a motion path effect with an AlphaFromTo effect (0 to 100%). Save the effect, same as for the Out custom effect. 

Step 6: Hide Slider box

Use the On Enter action of the slide to hide the Slider box. 

Pause

Now comes the hard work: you could skip steps 7-9 and scroll immediately to the bottom for an offer. 

Step 7: Variable v_slider

Create a user variable, which I named v_slider. It will be used to track the status of the Slider box: in or out? Similar logic you'll be able to see for all the Toggle buttons in this older post.

Step 8: Advanced Action ResetSlide

Create this advanced action (conditional):

Step 9: Advanced Action ToggleSlider

Create this conditional action. Like with the previous actin, I indicated the 4 parameters if converted to a shared action.

Step 10: Attach the actions to events

The action ResetSlide has to be triggered by the Success event of the Next button, whereas ToggleSlider has to be linked to the Success event of the toggle button.

Offer

You can obtain the described actions as shared actions for free, including a short explanation of how to use them. You could skip steps 7 to 9, but still have to do the other steps.

How? Visit my website (lilybiri.com), fill in the contact form with your request, and a small comment on my blogs or website. You'll get everything by mail. I probably will post more offers in the near future, if you don't want to hear about them, you can indicate that as well (I am European, respect the GDPR).

Intro

At this moment the stored  assets are restricted to those available with Captivate (under Assets tab  or to downloaded assets (under Downloads tab). You cannot add custom assets fto the panel. For those custom assets remember that you can use external libraries.

The center tab – Discover – has two choices,  ‘Templates’ (confusing term, not the cptl template files) with a submenu or ‘Characters’. Both link to the site of the eLearning Brothers. Once downloaded, they will appear in the Downloads tab.

Tip 1: Projects/Slides

1. Non-responsive project (Blank project in Welcome screen)
2. Responsive project with Fluid Boxes (none available for Breakpoints)

If you insert a slide in an existing project created in one of those types, the inserted slide will automatically be of the same type. A master slide may be added, and object styles but I’ll leave more details for another blog post about using QSP's

However, some users asked me "how do you open a full QSP in the wanted type"? There is no choice available after selecting a project.

Workaround which works for me: open first a project in the wanted type, either a blank project or a responsive project. Anyway you need an open project to launch the Assets panel. Selecting a QSP to open as new project, will open it in the same type as the already opened project. You can then delete the first project..

Tip 2: Characters

Screenshot is taken on a Windows system. If you download a extra character from the eLB site, it will be stored under Characters_11_5, not in the Content folder.

It is still not possible to download more than one or all characters from a set at once (please log a feature request). However, if you like the Illustrated category, here is a tip. Characters in that category are based on one drawing file, which you can download as well. You have some choices for the format, I prefer AI (Illustrator). If you are comfortable with that vector image application, you can extract all characters from that file and export them not only as PNG, but also in other formats inclucing SVG (smaller file size and vector based, crisp look whatever the resolution - interesting for responsive projects). Those drawing files are always labeled ‘Name: Illustrated work files’. You can also use that file as reference file. After download it will be stored in the subfolder ‘Others’ under eLearning assets, (not in Content, nor Characters).

Tip 3: Icons

Those icons are stored in a subfolder under the Contents folder in eLearning assets. When screening that folder you'll see that the 'icons' are in JPEG format. However when you insert an icon, the SVG is created in the same folder as the original JPEG image.

Tip 4: Buttons

I am finalizing another blog about the 6 button types available in Captivate 11.5, including advantages and disadvantages of each type. Which type of buttons do you insert from the Assets panel? That was bit of a mystery at first. When you insert a button from this asset category, it is a PNG image (bitmap) with the option ‘Use as button’ checked off. The three InBuilt states (Normal, Rollover, Down) which are normally included in a button object style, are identical. You have of course the possibility to edit the image for the other states once the button is inserted. However I was bit curious when watching the name of the image. Look at this screenshot of a button:

That name ‘Deep-download_up.png’ reminded me of the name convention needed for an (old) image button. For image buttons you need to create three images in the same size, with an identical name followed by _up (for normal state), _over for rollover state and _down  for the down state. Looking in the Buttons folder (under already mentioned Content folder) taught me that all the buttons had a similar name structure ending on _up.  The folder has is similar to the Characters and Icons subfolders: numbers as folder names. Each folder contains only one image file for the ‘up’ state.

Of course you can edit the states in the project, using the Object state panel and copy/paste the button if you need more instances.  But you will not be able to reuse that button with the edited states in a future project.  I tried out a workflow based on my CP-intuition:

• I duplicated the _up file in the Content\Buttons fokler for the button 5751 ‘Bubbly_downloads_up'
• renamed the duplicates to Bubbly_downloads_over and Bubbly_downloads_down,
• edited the duplicates in Photoshop, watch the result in this screenshot:

Success! When inserting the 'Bubbly....' button in a project, it had three InBuilt states. Not only when inserting in the same project, but also in other projects. You cannot have an object style for Images used as buttons, as is possible for shape buttons, text buttons, image buttons and transparent buttons. However this workflow opens an alternative for re-usability  (one domain where Captivate excels over other authoring tools). One drawback: Assets are only edited on the used device, they are not in the cloud.

More about buttons in a future blog as promised.

Intro

Do I use the Format Painter in Word? Sure, when I have to write a quick short document, which I’m sure I will never have to edit later on. Even in that case I mostly use it for paragraph formatting, seldom for text formatting. When creating courses in Word  (which happened if they were mostly text-based switched to Framemaker when I could get a license in college, because it handles graphics and other assets lot better) I would NEVER use the format painter. Even Word has Styles for a professional workflow. Captivate is style-based as well, in the sense of Framemaker and InDesign.  Object styles are part of the theme you are using in a course, and I have published several posts about themes.

In this post I will try to explain which situations are suited for using appearance duplication. It is not possible for all object types, as you will discover, and has a hidden gem which you may not have discovered (yet). Let me know if my guess is wrong.

Objects supporting Copy/Paste Appearance

Static objects

First requirement is that the object type had an object style. This means that images, audio, video, bitmap image as button, SVG used as button do not have the feature. Check the Object Style Manager. That is also the right place to detect the included features in a style. Example:  Transition (Fade in/out with its duration) is part of the object style. When using the Appearance feature it will be transferred as well. The supported objects for appearance pasting are a minority. You cannot use it for Highlight box, zoom object, rollover items although they have an object style. Only text containers:

• Captions: in the themes packaged with the present versions, all used captions are transparent captions. But the older not-transparent captions are still available. They always come with the Callout pointer in several directions, the used pointer will not be transferred. Have a look at the screenshot below. You can transfer the style of the left caption (pastel orange) to the right caption (default style). top left pointer will not be transferred. But color, font, font size and attribute, alignment, margins, leading (space between lines) and transition will be pasted.
  
  
• Shapes: can also be a text container, but that is not compulsory. Fill, Stroke, Transition and Text properties will be transferred. The shape itself is not part of the style and will not be changed.

• 

After using the Copy/paste featuure

Look at the style names. For the shape the style has been taken over on the second shape, which is great!. However the style of the left caption has been applied but shows a + sign to indicate an overridden style.  I have tried this for quite a lot of captions, it seems to be always the case  and that is bad news! When later on you want to change something in the applied style (here MyCaption), that change would not be applied to the right caption shown  in the screenshots. Hence my

Warning

If you use Copy/paste appearance on text captions, and you have decided on the final look you will need to double-check the styles and avoid all overridden styles. If you forget to do so, the slightest edit you’ll have to apply in the future to that style will become a nightmare.

Interactive Objects

The only interactive object to accept Appearance duplication is the Shape button, my favorite Captivate object! Its object style includes the look of the Inbuilt Styles Normal, Rollover and Down (not Visited).  What is the result of a Copy/paste Appearance. Here are two shape buttons, and their Object States panels. The left button has a custom style MyShapeButton, the right button uses the Default Smart Shape Style of this theme:

Both buttons have the 4th InBuilt state - Visited - added. Its default look starts as the Normal state but I edited the style. After copy/paste appearance from the left to the right button, you expect to see this:

The good news is that the second button has now also the style MyShapeButton applied to it, same as for a non-button shape. Have a look at the new Object State panel of the right button:

Hidden Gem

Captivate has no individual Text Styles (no Character styles, no Paragraph styles), they are included in the object styles of the text containers (like shapes and captions, text entry boxes). Up till now I used Copy/Paste appearance to transfer styles between objects from the same type: caption to caption, shape to shape, shape button to shape button. However it is possible to copy/paste the text style between objects who are not the same type. That may not  seem unexpected between shape and shape button, but it IS ALSO possible between Caption and Shape or Shape button!

Workflow:

• Go into Edit mode for the Caption, and select all the text if you want also to transfer the leading (F2, CTRL A)
• Right-click, Copy Appearance
• Go into Edit mode for the Shape, select all text (see above)
• Right-click, Paste Appearance

If the shape is a shape button, the text style will appear in all the InBuilt states.

Of course the name of the styles will not be transferred, since a text style has non name. The style will show a +, which means it is overridden. If you decide to keep the text change in the shape, please create a new style.

Using Appearance Duplication

This new feature can be useful, but should never replace Object styles.  I would use it when being in “Draft” mode at the start of a project, when  discussing with the client about style choices. Certainly the easy way to transfer text styles is appealing to me, if followed by creation of an object style. But due to the fact that you can never be sure object styles will not be overridden (as is the case for captions) there is no way to create the custom theme before double-checking all styles. I start each project with a custom theme, because it can save so many hours of work in the future. The changes for themes in this new update are also very welcome, but that will be in another article.

Copy/paste appearance can be very useful when creating multistate objects to transfer the style of the normal state to other states. Think about a shape button, where the font style of the label is not always transferred to the other InBuilt states. 

Intro

Although I have already posted about one Submit button for multiple TEB’s, recently users tried to apply that blog to non-validated TEB’s, which was not the goal of that original post. Moreover giving another attempt to a TEB where the Submit has been done has become less easy with HTML5 output. SWF output had so many advantages (rewinding the playhead a couple of frames was simple), but that is the past.

This example was created with version 11.5.0.476, the most recent version of Captivate. I uses some image and button assets from the new Assets panel. However, nothing has changed for interactions in this major update to version 11. I am confident that the solution will work for every version since 8, meant for HTML output.

Example

The first slide has three fields to fill.  If any field remains empty, a textual warning will appear and you can retry. The Continue button appears when all fields have an entry. Project has no poster image, just the default play button. It is not rescalable. Here is the link

Setup

Variables

• v_one, v_two and v_three will be used witl be associated with the Interactions
• v_null is needed for the advanced conditional action to test if the field is blank; more info in ‘Where is Null’‘

Scrolling Text Interactions

You see in the dialog box that I edited the font (used an Adobe font), the font size and attribute.  Just a reminder: it is not sufficient to type in a variable name to define it, you need to define it in the Variables dialog box. 

Although I resized the interactions to the same height as the Text containers with the questions, the height is decreased in the output file. Be careful with copy/paste to duplicate an interaction, prefer the Duplicate functionality within Captivate (CTRL-D).

Advanced Action

This action is triggered by the Submit button. I used the On Enter event of the slide to hide the warning that will pop up if at least one field is empty. This is the Preview dialog box. The operator 'is equal to' is replaced by the JS equivalent needed '=='. The logical operator OR is replaced also by its JS equivalent |  As you perhaps know, an advanced action will be converted to JavaScript on Runtime.

The replacement of the grayscale image by the color image, disappearing items on the slide: all is achieved using  the timeline. For those interested, here is a screenshot of that timeline, I didn't group any items, but their label clearly shows what they are.

Conclusion

As usual I appreciate any comment, whether to add an alternative or to ask questions. You are welcome on my website as well.

Intro

You may also ignore that the new Assets Panel (wait for an in-depth exploration in the near future) includes a set of ‘icons’ which are SVG’s. The hotspots used in 360 slides are SVG's as well, the editing functionality was added to make customizing their colors possible. All SVG’s in your project end up in a dedicated folder of the project Library.

Remember: SVG used as button is only possible for HTML5 output, not for SWF output

.

Example slide

Step-by-step ‘Edit colors’

I will explain this for the Normal state of the big SVG which you clicked in the example slide.

1. Insert SVG and resize

Step 2: Edit mode

Step 3: Select a ‘path’

Step 4: change color

SVG button states

The Visited state is selected in this screenshot. Look at the Properties panel: you see that the opacity is reduced to 50%. This always applies to the full SVG, but in this case only to this state of course. You see a user variable inserted in the added speech bubble. That bubble has no reduced opacity, it is not part of the original SVG but an added shape£.

More?

The Advanced action triggered by the big SVG buttone:

No need to trigger the Visited state, it appears automatically after the first click on the SVG button.

Intro

If you are a fan of my blog, you know that usually I will not talk about a new release on the day it is released (although I have explored it in a beta test group). This time however I am so excited about this intermediate release. It has 'Voor elk wat wils' (interesting features for each developer whatever her/his level) to use a Flemish proverb. Do not expect a full review here, want to talk only about some of my preferred features which do appeal to my level of expertise. My apologies if you don't like that 'egocentric' approach. Be sure I will write more in the future, need some time to explore in-depth. As in the past, I may overlook some little gems which I couldn't dig out yet, will continue the search. You'll find three small gems at the end.

SVG as Button

It has been possible to fill a shape with an image since version 6. Converting the shape to a button was a much easier way to create nice buttons than the older workflow with Image buttons where you needed a graphics application (and had to create several images) Shape buttons also can have custom states besides the InBuilt states which they share with the old button types (Normal, Rolllover, Down, Visitedà. I never use those legacy types anymore, except for Quiz/Score slides where they cannot be used as embedded buttons.

However, those shape buttons have two lmitations:

• You can only fill with Bitmap images, the much sleeker vector images like SVG were not possible.
• The clickable area of the shape button is the bounding box, not the image itself.

WIth 11.5 it is possible to use SVG's directly as buttons without the need for a shape. And you can limit the clickable area to the image itself! This is a big step forward. File size of SVG's tends to be small compared with bitmap images, and moreover they are excellent for responsive project due to its vector nature.  The SVG has all the features of a shape button: can be used on master slides, can be timed for the rest of the project (not in Fluid Boxes), can be added to quiz and score slides as extra button. A setup with 3 buttons like this screenshot was not possible in previous versions, because the bounding boxes are overlapping: The screenshot may look blurry (has been converted to bitmap here) but the original SVG's in Captivate are really crisp. Size of the SVG: about 75Kb.

In the default setup, the clickable area is still the bounding box, you have to uncheck that option:

Bitmap images as Buttons

Similar to SVG's, they can now directly be used as button, no need to fill a shape button. Same for the clickable area: can be limited to the image. Depending on the type of images this extends the functionality which I explained in the first point. I dream of custom hotspot questions with partial scoring as described in this older post. Watch out for use cases in future blog posts. Not only are you now rid of the cumbersome workflow which I described here, but if you use a bitmap format which supports transparency (GIF, PNG24) you can uncheck the same feature to reduce the clickable area as for SVG'S.

Themes 

Interactive video

One of the new features in the first release of CP2019 which I really like a lot. Not so much changes after this patch. It is interesting that you now are not only limited to videos on your system or from YouTube, but that you can also use Vimeo videos.

Another improvement is the possibility to insert a sequence of overlay slides (content or KC slides) on a frame of the video. 

VR project/360 slides

Several enhancements:

• To the actions which can be triggered by hotspots the much asked for 'Play Video' was added.
• The hotspots are now very customisable, black and white (minstrels?) are over and out: edit the colors as much as you want.
  Double click on the hotspot when inserted, select one of the paths and choose a color.
  

  

• If you trigger Text, you will like the new formatting possibilities. Just a pity that Typekit fonts cannot be used....
  

  

• No need to guess a duration for the popups anymore. Default setting is now a close button in the top right corner as you can see in the previous screenshot.

Small gems

Theme colors: in the screenshot of the new Themes panel inserted earlier, you see that the main theme colors are now named 'Color1.... Color10. This fits better the use of the colors, because in previous versions there was a Title color, which was not always used for titles, a Subtitle colors which was rarely used for subtitles etc...

Drag&Drop:  when selecting Infinite attempts in the Actions tab, the 'Failure action' will disappear, very logical since it will never happen in that situation. Regret however that the wording 'Failure' is still not replace by 'Last Attempt'. The action doesn't occur On Failure, but only at the last attempt, same as for quiz slides.

Preview menu: for non-responsive projects, the option 'Preview HTML5 in Browser (F11)' is now the first option which is great! The death of Flash player for all browsers will soon be a fact, every developer has to switch to HTML5 output. The other Preview methods are all still based on a temporary SWF output (except Play Slide, which is NOT a preview method). To check the future output only the mentioned Preview HTML5 in Browser should be used.

...sure will find more of those.

More...

This was not a complete overview at all. As I explained, need more time for features like the new Assets panel, use of Quick Start Projects, Branching setup, multiple themes, copy/paste appearance etc... 

Intro

Developer time can be very different from the real time spent by the user viewing slides in that project.  You’ll see in this refurbished article how to show both times, developer and real ones. It is a nice use case for System variables.  BTW, if you didn’t get my free table with System variables, maybe it is the right moment .

Contrary to the old post, which was meant for SWF output, I used JS this time instead of advanced actions with the Expression command.  Reason is that for SWF output the formatting of the variable values could be controlled by the number of characters to display when inserting the variable in a text container. That is not working for HTML5 output. Formatting of numbers is a typical use case (like random data) where I tend to use JavaScript.

Example output

Real time workflow

Developer's time workflow

As I announced at the start, for several reasons I preferred to use JS instead of Expressions in an Advanced action as was the case for the older blog post. I propose two scripts. The first one is close to the older blog post, because I use the same system variables, and two methods of the JS interface for Captivate. Details can be found in this document.

In the second script I skipped using the known system variables, replaced them by some more methods of the same document.

Script 1

Variables

The system variables used in the first script are:

• cpInfoFrameCount: its value is the total number of frames in the Project Info panel (see first screenshot in this article)
• cpInfoFPS: each movie is played at a certaing speed, which defines its qualtiy. It is indicated as Frames per Second. The higher that rate, the higher the quality
• cpInfoCurrentFrame: indicates the present frame number. Frames are numbered, starting with 0, not per slide but for the whole project. More details can be found in this blog post about Micro-navigation

In Captivate I created these user variables to display the results in the project:

• v_total: total duration of the project in seconds
• v_done: sum of the duration of the previous slides in seconds
  
• v_perc: percentage of duration viewed, in %
  

To avoid confusion, variables in JavaScript used these names:

• frames: will start with the value of cpInfoFrameCount and end after calculation return the total project duration (secs) 
• start: will start with a frame number (frist frame of the present slide) and after calculation return the alreadu viewed duration (secs)
  
• speed: will store the value of cpInfoFPS
  
• percent: will return the percentage viewed after calculation
  

Javascript

I am using two methods from the Common JS Interface:

• getVariableValue to store the values of Captivate's system variables in the JS variables frames, speed, start. (lines 1-3)
• setVariableValue to return the results to the Captivate variables v_total, v_done and v_perc (lines 6-7,9)

The calculations in lines 4-5 and 8 are straightforward. To control the formatting of the numbers I used the method 'Number.toFixed(x)'. I didn't want to display two decimals for a simple reason: the first frame will be detected on each slide, and that would have led to a duration of 0,03 seconds on the first slide (30 seconds in a frame). It would be possible to split up the results in minutes and seconds as well. I wanted this example to be a simple introduction to JS newbies. I planned to use the formatting in a third article about numbers. The first two were 'Playing with numbers - part 1' and 'Playng with numbers - part 2'. Both were meant as simple intro to JS for newbies. However, since they didn't get a lot of viewers, I gave up spending more time on it.

Script 2

No system variables here, the user variables and variables in JS are the same as in the first script: v_total, v_done, v_perc, frames, speed, start, percent.. Have a look at the script:

I didn't need the method getVariableValue in this case but used three more methods on top of setVariableValue to return the results to Captivate:

• getPlaySpeed: returns the same value as the system variable cpInfoFPS (line 1)
• getCurrentFrame: returns the same value as the system variable cpInfoCurrentFrame (line 2)
  
• getDurationInSeconds: spares me one calculation, this value doesn't exist as system variable. This time I don't have to divide the total number of frames (exists as getDurationInFrames) by the FPS value. (line 3)
  

The other lines in the script are similar to those explained in the first script.