Intro

Theme versus Template

The goal of a Captivate theme is to keep a consistent design throughout your project. It can be 'applied' to any project, even after creation. Although most themes will be created for a certain resolution, when designed carefully it is not necessary to apply it only to projects with the same resolution. When you apply a well designed theme to a project, the 'look' will change immediately and you'll not have to edit the design a lot afterwards. A theme is saved in a file with extension cptm. You can have themes for a normal (blank)  or for a responsive theme. Captivate 8 and 9 both have several themes in the box, most of them being responsive themes. They show up as thumbnails when you click on the Big Button 'Themes'. Those Captivate themes are stored in the Public Documents, under the subfolder 'Layouts' of the 'eLearning Assets', at the same level as the Theme Colors palettes.

You can store your custom themes in this folder or wherever you want. The Thumbnails view (under Themes button) has a Browse button which allows you to navigate to any folder. I will mostly save a custom theme in the project folder when working for a client. But you see in the screenshot that I have a custom theme (CP8Theme) in the default folder. That folder is a copy of the original Layouts folder in the Gallery under the Captivate installation folder. If you ever have messed up one of the themes in the Public documents, you can restore it from that original folder. If you delete the whole Layouts folder in the Public documents, while Captivate is closed, on restarting the application a new copy of the original folder will be installed in the Public documents (see also my article: Keep your Customisation).

To save a theme you need to use the Themes menu, not the big button 'Themes'. Use the option 'Save Theme as' if you started from an existing Captivate theme.

A template in Captivate has to be chosen before you create a project. You have to use the option File, New Project, Project from Template. This means that a template needs to have exact the same resolution as you want for your project. As for a theme, there is a difference between a template for a responsive, and one for a normal (blank) project. A template file has the extension cptl. When you create a project from a template, it will get the normal extension cptx. You can edit a template, and that will the only reason why you would save it again as a cptl. It is also possible to create a template from a normal cptx-file with the option 'File, Save As'. There is no 'reserved' folder for templates, Captivate has no included 'templates'. The term is often wrongly used: most Captivate 'templates' that you can find on the web, are just cptx-projects, not templates in the Captivate language. 

When a template is saved, the used theme, preferences etc are saved with the template. However you can always apply another theme later on. 

Components of a Theme

1. Theme colors palette

2. Object Styles - Object Style Manager

Some tips:

• Use only colors from the palette defined in Step 1.
• Do not hesitate to change one of the (grayed out) styles between brackets [Default...]. You can overwrite those styles, since you are working on a custom theme. Those are the styles that will be applied immediately when you insert an object. Another approach is to clone a style and set it as Default style. The problem is that you'll end up with tons of custom styles, which makes selecting the proper style in dropdown lists not easier. That is why I always change existing default styles. 
• For buttons: the InBuilt states Rollover and Down are available together with Normal  for change in the OSM, do not forget to check/edit those states. This is valid for Text Buttons, Image Buttons and Transparent buttons.
  

  
• For shapes: you cannot define a default style for text and another default style for buttons (too bad), but any shape style that you define should include InBuilt states (Normal, Rollover, Down) because any shape can be converted to a button.
  

  
• Quizzing objects are in a separate category. Quiz buttons cannot be replaced by shape buttons (yet), but you can define an individual object style for each quiz button. Feedback captions can be replaced by shapes.
  Feedback captions and shapes not always use theme colors in the default Themes included with Captivate. Be careful: if you want to have consistent colors in your project, you'll need to check those styles.
• It is not possible to define real Effects in an Object style. Only the 'old' Transitions can be defined.

3. Master slides

Some tips

• Use the new Rulers to assist you for designing master slides: Guides Rule!
• If you ever will use the theme for software simulations: keep a real Blank master slide, because it is used both for software simulations and for PPT import. You don't want those slides covered up with other stuff.
• Remember that shape buttons can be used on master slides, they can have actions. This can be a big time saver for custom buttons like the ones from these posts: Toggle buttons   and Replay slide button
• Do not forget to label the master slides

4. Skin

Use the theme colors palette to customize the skin: playbar, borders and Table of Contents. You can even insert a logo on the TOC and eventually custom expand/collapse icons.

5. Recording defaults

• Create a default style for the highlight box in step 2: with a big bright red stroke and outer fill. Set it to display as default highlight box style.
• Open Preferences, Recording, Defaults and check the default Highlight box style: it will still be set at the original default style in the original theme. Bit annoying, but it also allows you to save two different sets of object styles within a theme: one for normal slides, and one for software capture slides.

Do not forget to save the theme (using the Themes menu)!

Do you need a Template?

I ask this question often everywhere: with all the design power and flexibility of a custom theme, why would you still need a template? Before themes existed, I used templates to be able to reuse variables and advanced actions (see: Template for reusing script). With the present version of Captivate, we have shared actions which I store in a separate project to be used as external library in any project. Variables, used in those shared actions, get copied automatically when the shared action is dragged into the Library of the new project.  When you copy an object, that triggers an advanced action, the action will be copied along when pasted into another project. 

I used templates to have footnotes on each slide, pointing to the name of the project, showing the slide number and the total amont of slides. But now you can put them on master slides, using system variables or user variables that can be populated later on. 

When would I use a template in Captivate 9? For courses that have several modules, where you want to have some slides in common, maybe have custom navigation/control buttons that cannot be put on the master slide, but need to be timed for the rest of the project. I would rarely use it to have placeholder slides, unless some team members need to have that assistance. Lot of placeholders have fixed object size, which can just be annoying. If you do have a lot of advanced actions (maybe variables), that cannot be replaced by shared actions, identical entries in Project Info, variables not included in shared actions: those would be situations where I would think about creating a template.

Conclusion

I hope this post did clarify the difference between a theme and a template. If you ever see somewhere my question 'Do you need a template', this will no longer be a mystery, right? 

Intro

Did you hear me yelling 'Finally' when the last patch for Captivate was released to version 9.0.1.320? We have now Rulers in Captivate and real (Adobe) guides. I am using that name because they are quite different from the existing Smart Guides which are useful when aligning objects. Moreover the implementation of the Rulers and Guides is really very nice,  Kudos to the Captivate engineers!  Just one example: in responsive projects you can choose to have rulers in Percentages instead of pixels, which is the most logical choice! In this article I want to explain you the reasons for my joy, showing you how I use Rulers and Guides.

Grid

Maybe you don't remember that old grid, which is still present in Captivate 9. It consisted of tiny points, with a default distance of 16 px. You cannot change color of those points (black), which makes that grid useless on dark backgrounds. You can change the default distance between points from 16px to another value, but always the same horizontally and vertically. Personally I remember that distance mostly because it will define how much an object will move or resize when you use CTRL in combination with arrows as shortcut keys (see my old blog post: Shortcut keys for moving/resizing objects). Since many years I didn't use the feature for what it was meant to be used: as a 'grid'. If you just now discover its exitence: turn on the 'old' grid, using View, Show Grid.There is a snapping linked to it as well, which you can turn on/off.

A grid can be very useful in some circumstances!  With the new Guides you have now a powerful alternative: create a custom grid, with lines instead of points, maybe with different distances in horizontal/vertical direction, and use a custom color that stands out from the background. It can be especially useful for responsive projects because percentages instead of pixels  I recommend to lock the guides after creation of the grid. Your grid will be saved with the file, you can show/hide the grid whenever you want.

Here is an example of such a grid, created with the option Multiple Rulers in a blank, normal project:

For a responsive project, I would mostly limit the grid to vertical guides, because it is the width that is most important for the design of such a project. Here is a screenshot for a responsive project, with guides in increments of 10%, extra guides at the left and right side at 45% (margins). Only one horizontal guide at 50%. I dragged out an extra guide to 10% for the title.

Theme/Template design

Motion Paths

If you ever created custom motion paths, which has become much more interesting in Captivate 9 where we have three types of custom motion paths, you know how difficult it is to adjust start and end points to a specific location. I remember the example that I created for this blog post:

Reset Effects

All the cards followed a custom motion paths but had to end up in a stack. My work flow was bit cumbersome:

• create a "cross hair" using a horizontal and a vertical line object in a group
• position that group on the exact location, using the X coordinate of the vertical line and the Y coordinate of the horizontal line
• adding a motion path (no curved, I used the zigzag motion path) to each card, and drag the end point carefully over the crosshair
• saving that motion path as a custom path
• applying it in the necessary advanced action

Now I can use a horizontal and a vertical guide, which I can exactly position without using the Options tab with coordinates. Just double-click on the ruler on the exact coordinate that you want.

Watch this screenshot: the thee shapes move each along their individual motion path, but they end at the same location (and paths cross at another location). 

Custom shapes

SVG are a big new feature, but they don't have (yet) the flexibility of shapes which can be used as text container, as button and filled with a texture, and image, a gradient all on the fly. Although Captivate is not meant to have all the editing features of a vector graphics application like Illustrator, you can create pretty nice custom shapes. Any included shape can be converted to a freeform shape, you just have to edit the points and tangent points. 

How can guides help with this process? Have a look at this screenshot. The creation of this symmetrical shield (or highway sign) was lot easier with the help of the rulers when editing the points and tangent points.:

Update: an updated version (with a new workflow) and more details about Resetting a slide is published recently under this link

Intro

As promised in a previous article, I explored the enhancements to Drag&Drop in Captivate 9, more specifically added InBuilt States. In previous versions only buttons and shape buttons had those states. Captivate 9 added multistates to all objects and provided InBuilt states for all objects in a Drag&Drop slide: drag sources and drop targets. Custom states can be added as well. Both InBuilt states and custom states have some limitations similar to the Inbuilt states for buttons. Drag&Drop objects have also limitations for added custom states.

Example Movie

Drag Sources: states

Drop Targets: states

The Drop Targets have 6 InBuilt States (see slide 3 in movie). Three of those states have a name that is identical to an existing state for the drag sources: DragOver, DropAccept and DropReject. For Drop Targets you can add objects to all states, both InBuilt and custom states. Some states appear immediately, other states only appear after Submitting the exercise. Here is the overview, again with a visual reminder from the first use case in the example movie.

1. Normal state (InBuilt): is the Default state. This state will be the main state before the Submit button is clicked. It can be replaced by another state but that will only be for a short duration. The size of this state is important, because several states are locked to the same size. You can rotate the Normal state, which will also lock some of the states to the same rotation.
   

   

2. Dragover state (InBuilt): this state appears when a drag source is over the drop target and will remain so until the object is dropped on or moved away from the target. This state is not locked, it can be resized and rotated.
   
3. DropAccept state (InBuilt): will appear after dropping a drag source on the drop target, it will replace the Dragover state. However this state will remain visible only for a short duration. Then the Normal state will re-appear. The reason is that a drop target can accept multiple drag sources, and has to be ready to 'accept' or 'reject' the next drag source.  It is totally locked: will keep the same size as the Normal state, cannot be rotated. But, as told, you can add objects, which was the case in the example movie (adding the wings).
   
4. DropReject state (InBuilt):  will appear after dropping an incorrect drag source on the drop target if the target is not set to allow All objects to be dropped. It will replace the Dragover state. The state will appear for a short duration before reverting to the Normal state. State is  It is totally locked: will keep the same size as the Normal state, cannot be rotated. But, as told, you can add objects, which was the case in the example movie (adding the wings).
   
5. DropCorrect state (InBuilt): this state will appear after Submit if the drag source(s) dropped on the target are all correct. It will replace the Normal state permanently. The state is fully locked (to the Normal state): no rotation nor resizing is allowed. You can add objects.
   
6. DropIncorrect state (InBuilt): this state will appear after Submit if the drag source(s) dropped on the target are not all correct. It will replace the Normal state permanently. The state is fully locked (to the Normal state): no rotation nor resizing is allowed. You can add objects.
   
7. Custom state: this state is also fully locked to the rotation and size of the Normal state which is limiting even though you can add objects.  
   

Reset - My Reset

Setup Use Case 1

The advanced action DDSuccess4 has three statements:

Due to hiding the drag sources with this Success event, the On Enter action of the slide has to 'reset' the situation by showing the group Gr_Draggers again. This was combined with the assignment of the user variable v_enter for this slide in the action:

Setup Use Case 2

Update:

A new version of these workflows (for CP2019) can be found in a new post and in an interactive Captivate tutorial.

Replay or Reset Slide

Replay/Reset (Captivate course)

Intro

This pretty short article will explain several ways to create a button that will replay a slide from its first frame and is functional on that slide only. The reason is that I have been asked about this use case multiple times. 

Questions

First thing to check is: does this slide have an On Enter action? The default On Enter action for a slide is 'No action'. On Enter actions are however the way to go if you want to reset a slide to its initial configuration, to clean up the 'mess' that can happen on that slide by the user or by the interactivity on that slide. On example: maybe the user has popped up objects  using a hyperlink on a word or iimage? In that case you'll need an On Enter event. The action needed for a Replay button will have to make sure to 're'- enter the slide, in order to have that On Enter action done. To better understand what I mean, I created a short example movie.

Example movie

Watch this movie, which I have been testing both for SWF (version here) and for HTML5 output. You'll see two slides:

1. Slide 'Title': it has an On Enter action to play an audio clip.
   
   
2. Slide 'Pills': a user variable v_counter is used (and displayed) to store the number of clicks on the 'pills'. The timeline of this slide looks like this
   

   
   
   Each of the pills (shape buttons) triggers a shared action, that will show a state (with explanation), increment v_counter, wait for 2 seconds before releasing the playhead.

On both slides you'll see two buttons: 'Replay1' will restart the slide from its first frame, without re-entering the slide. That means that the On Enter action is not executed again. The second button 'Replay2' will re-enter the slide. Listen and watch the difference (look at the counter on the second slide). Refresh the browser when you are ready to watch this example. Refreshing will also get you back to the start of the movie.

'Replay1' - On Enter action is not repeated

    Jump to slide Intro

1. For slide 'Title': the audio clip will not be heard.
2. For slide 'Pills': the variable v_counter is not reset to 0, and will continue to increment.

TIP: 

Replay2 - On Enter action is repeated

Frame enigma - TIP

If you watched the frame number closely, you will have seen that the 'first' frame (on slide 'Title') is not 1 but 3 or 4. Here is the explanation: since I wanted the Replay2 button to be active on this first slide, I needed a slide before that first slide for the micro-navigation. That slide will not be visible to the user because it is only 0,1 sec long. At a frame rate of 30fps, that means ...3 frames.

Intro

In the past I wrote some posts about creating Toggle buttons. The oldest article explained the use of an Expression and a system variable for a button that kept the same style but could turn on/off a functionality (created for versions 5/5.5). My excitement about shape buttons, appearing in version 6, was the inspiration for several scenarios in which the style of the toggle button changed with the on/off situation. 

When shared actions appeared with Captivate 7, I posted some articles about the difference with advanced actions. Captivate 8 enhanced shared actions by allowing variables and literals as candidate parameters. Although Captivate 9 seems not to add any improvements to shared actions (had hoped secretly for an easier way to edit them), combining shared actions with the new multistate objects will save a lot of time. The use case described here is a good example. Start by watching the example movie to understand my interpretation of Toggle buttons.

Example movie

Concept 

All toggle buttons have in common to be associated with a variable that can be toggled by the developer: I'm talking about Boolean variables, which can have only two logical values '0' (False/No) or '1' (True/Yes). Both system and user variables are possible. On this screenshot you see the Timeline with the 6 shape buttons, labeled to identify their functionality (SB is my indication for Shape Buttons):

Variables

The associated variables are in the same sequence as on the timeline, from top to bottom:

• v_visgrp (user variable with Default value = 0) for SB_visib_group
  
  
• v_visib (user variable with Default value = 0) for SB_visib
  
  
• cpCmndShowPlaybar (system variable with Default value = 1) for SB_Playbar
  
  
• cpCmndTOCVisible (system variable with Default value = 0) for SB_TOC
  
  
• cpCmndCC (system variable with Default value = 0) for SB_CC
  
  
• cpCmndMute (system variable with Default value = 0) for SB_Audio

This list shows that one of the system variables doesn't have '0' as default value, cpCmndShowPlaybar. Solution for this discrepancy can be found in switching the states for the associate button, or in switching the variable itself to '0', thus hiding the Playbar. I used the second scenario: with the On Enter action for the third slide I did Hide the Playbar, which toggles cpCmndShowPlaybar to 0

The shared action can be used for any button with such a, associated Boolean variable, system or user variable. Some examples are shown in the last slide of the example movie: cpLockTOC or a user variable to toggle an audio object.

States

The shape buttons have three InBuilt states: Normal, Rollover and Down. For each button I added one custom state. That state will change the shape button to show the 'OFF' state, and if necessary additional objects are added in this state. In this screenshot you see the 4 states for the shape button SB_Audio:

This shape button has a SVG added in each state. At this moment SVG cannot be used as a Fill image for a shape button (maybe in a next version?), they are separate objects. For some states I also changed the style of the shape itself (Fill):

1. Normal: has a SVG indicating you can mute  audio (since cpCmndMute has a default value of 0, which means that audio is playing)
2. Rollover: Speaker only (SVG), Fill different
3. Down: Speaker only (SVG), Fill different
4. AudioOn: has a SVG indication to play audio; this will be the state that is visible when audio is muted, cpCmndMute = 1.

The buttons SB_TOC, SB_CC and SB_Playbar have a similar setup: for the InBuilt states text was inserted in the shape. The custom fourth state adds two line objects (cross) over a duplicate of the Normal state. Look at the screenshot for the SB_Playbar:

Both instances of the Visibility toggle button use SVG's to change the style of the shape button (similar to SB_Audio), but they add other objects for the 4th custom state as you can see here:

Shared Action

1. the button itself (SB_Audio in the screenshot above)
2. the state 'Normal' which is used and
3. the state 'AudioOn' which is used as well

Candidate parameters are:

1. The variable cpCmndMute: it has to be a parameter, because we need other Boolean variables for the other buttons
2. Literal '1': because I choose the 4 th state (custom) for each button with this action in mind, it is not necessary to define this literal as a parameter

This leads to the definition of the shared action with 4 parameters, the compulsory and one candidate parameter. In this last screenshot you see the parameters with their values for another button, SB_Playbar. Watch the description of the parameters.

Conclusion

In many situations using a Captivate playbar is not a good choice, and with states, one single shared action from your script library it is now really simple to create not only Next and Back buttons, but also every other toggle button needed on the course slides. If using shape buttons (as was the case here) you can put them on the first slide of the course, time them for the rest of the project. They will have each a unique ID, which allows you to take control of those shape buttons, to hide them when they are not needed on some slides. Good luck!

Intro

First project

No better way to get the feeling of new features than to create a real project from scratch. In the following movie (only one slide) you'll see that I recreated a slide that was posted in the first article about shared actions. I didn't upgrade the project, didn't use the objects, nor the actions/variables from the old project. If you watch it closely, you'll detect that I used:

• new states work flow, both for static and interactive objects
• imported SVG's and roundtripping with Adobe Illustrator
• Effects 2.0 with custom curved motion paths
• new commands in Advanced/Shared actions

I will offer some tips about those 4 major new features when you have played with this slide. Refreshing the browser will allow you to restart the movie. Of course I discovered also some little gems hidden between the big diamonds, while exploring. 

Example movie

Multiple States

In Captivate 8 it was possible to create 3 states for shape buttons, both in the Object Style Manager or individually using the Properties panel, Style tab. In this example you did see that the 'default button states' (Normal, Rollover, Down) can even have a different label, not only a fill and a stroke applied to them. Look at this screenshot of the Object State panel for the central oval shape button in the movie. Watch the default states (marked by red rectangle) and the extra 4 states I added to end up with 7 different states. 

For the four extra states I used SHIFT-CTRL-ALT-Z to Duplicate State a couple of times. You'll find the option also in the right-click menu on a state.

Drag&Drop objects also have InBuilt states, but will blog about Drag&Drop in a future post.

Hidden gem

In the Object Style Manager (I saved the style for that central shape button) the different default states for shape buttons show up, just like for any normal button. They were also saved in the OSM for Captivate 8, but not displayed in this 'cool' way :)

SVG - Illustrator roundtripping

I call this the (until now) missing link in the beautiful bracelet of Adobe applications that allow you to create amazing eLearning courses: Captivate, Photoshop, Audition, Edge Animate, Edge Inspect and now finally Illustrator!! Scalable Vector Graphics, contrary to bitmap images, do not suffer from quality loss on re-scaling. Moreover for simple graphics the file size is incredibly low, which is certainly an advantage when you are creating for mobile devices. Beware: file size can be large if you have complicated graphics. Look at this screenshot: I used 8 SVG's - they end up in a dedicated folder in the Library:

Effects 2.0

The previous Effects panel is gone! Effects timelines are now embedded under the object to which they apply. Live preview with the Play button in the Timeline (or use Space bar), you can have all motion paths on different objects visible at the same time. That makes life so much easier. Curved motion paths are possible. When you hover over an effect in the Effects part of the Timeline panel, you'll see a preview of that effect. This works even with custom saved effects:

Hidden gems

1. You can use the same shortcut keys for effect timelines as for the object timelines to increase/decrease its length. That is a valid alternative for typing in a value in the Timing panel or for dragging with the mouse. Example: right arrow key will move the whole effect timeline 0.1sec to the right, CTRL-Right will move over 1sec, SHIFT-Right will increase the timeline duration with 0.1sec. All arrow combinations shortcut keys described in this old article: TinyTimeline Tidbits are functional. I regret that CTRL-E, which extends the duration till the end of the slide has not been included for Effect Timelines. Neither does CTRL-L move the effect timeline to the playhead position, it will move the object timeline with the Effect timeline even if the Effect timeline is the selected one.
   
   
2. For the custom motion effects (scribble, curved, line) start with the cursor over the present location of the object, and the beginning of the path will snap to the center point of that object (more precise: the center point of the bounding box).
   
   
3. You can uncheck 'Show motion paths' if your screen is getting too crowded, look in the Timing panel just above the fields for Effect Start and Effect Duration. BTW you can increment the values in those fields using arrow keys: UP for 0,1sec, SHIFT-UP increments to the next full second. Field has to be selected in that case. If field is not selected you can use the typical Adobe scrubber.

New Commands

These commands have been added:

1. Go to Next State: only available in the list for simple actions, for all events
   
   
2. Go to Previous State: only available for simple actions, for all events
   
   
3. Change State: available for simple, advanced and shared actions. This command needs two paramaters: the object and the state; for a shared action both will be compulsory parameters. I used this command a lot in the example movie, both in a conditional advanced action (on the central shape button) as in a shared action triggered by the four bubble shape buttons.
   

   
   
   
   
4. Delay Next Actions by: finally you will be able to time commands in the sequence for standard/conditional advanced and shared actions. This new command takes one parameter: the amount of time which can be a literal or a variable. In the next screenshot you see that I used it to play the audio clip after the custom effect (with a duration of 1.2secs) has been finished. That parameter is a 'candidate' parameter, not compulsory, when you use it in a Shared action. For more information about parameters see the article Parameters in shared actions. The situation is the same in Captivate 9 as it was in Captivate 8.
   

   
   Personally I am very excited about the this new command, which allows better control over timing by advanced/shared actions. 

Hidden gem

More Small Gems

1. Drag&Drop until Captivate 8 didn't have a Success Caption by default. I explained a workaround in Drag&Drop Tips. You can forget about that tip in Captivate 9, Success caption is now available. It uses the default Success Shape or Success Caption style, depending on your Preferences and theme.
   

   
   
   Objects used in Drag&Drop similar to interactive objects, have also 'Inbuilt states'. That is not a little gem, will post a new Drag&Drop Tips article for version 9 in the future
   
   
   
2. Intelligent naming of copy/duplicate. In former versions, a copy or duplicate of an object in the same file or in another file would get a generic name. In Captivate 9 if you copy/duplicate an object with a meaningful name the copy will keep that name with an added underscore+number. Big improvement, and now you have even more reasons to set up a good naming convention for your projects. Look at this screenshot: this is a copy of the central shape button to another file:
   

   
   
   
   
3. Simple action feature: another popular post (and a Youtube video) can be dropped in the trash can for Captivate 9 but I don't regret it at all. You no longer have to create a standard oneline advanced/shared action (or use micro navigation) to prevent the playhead from continuing. Just check the box that is highlighted in this screenshot:
   

   
   
   
   
   
   

Guidance

Please bring me your most headache-inducing project, and I’ll do my best to solve your quandaries.  Since these spots are limited, make sure to sign up now with your top 3 appointment choices. The slots will be filled on a first come, first served basis. We’ll do our best to schedule you for one of them. If you just want to drop in to say hi, I’d love to see you. But, please make sure that you register so we get an idea of how many Captivate users to expect.

Dynamic buttons

In the archive you'll find several articles about shape buttons, which appeared with version 6. I used to call them 'chameleon', because they can be useful as shapes (images), text containers, buttons, and recently also for the automatic feedback text appearing on question slides and with interactive objects. Maybe you are not yet aware of this aspect of shape button? You can insert a variable as a label on the button. On runtime the value of the variable will appear. That value can be changed by actions, and the label will change in that case, hence my title 'Dynamic'. Some ideas to use this feature?

• Localisation: if you use custom shape buttons on master slides (or timed for the rest of the project) to replace the play bar, you can change the label on those buttons based on the language choice. If the language is chosen from a dropdown list (learning interaction) or with radio buttons (learning interaction), insert the variable associated with that interaction. Combine this with the work flow explained in Branch Aware Quiz
  
  
• Custom Question Slide: if you want to allow a limited number of attempts, you can add the attempt number on the Submit button, or you can change the label to 'Continue' after the last attempt. Of course you'll need a companion conditional action to change the functionality of the button as well.
  
  
• Navigation: if you use shape buttons on the master slide, they cannot be hidden/shown. But you can change the value of the variable that acts as label on each slide. Using a Back/Next button, put a null value to the label on the first slide for the Back button, and change the Next button to an Exit or Return button on the last slide (you'll need to create a conditional action in that case as well).

Windows 10

Update: new version of this game, with HTML5 output and using images as buttons to be found under this link

Intro

Game - rules

Objects - Labeling

The game is on one slide after the intro-slide. This is the Timeline panel:

1. Gr_Match: group with the images of the matchsticks. For labeling I divided them in 3 groups. I_MS_11 is the most left matchstick of the first group, I_MS_22 is the upper matchstick of the second group, I_MS_35 is the bottom one in the third group, etc. Those numbers will also be in the names of the Outlines, the Click boxes and the associated variables. This group is initially visible.
   
   
2. Gr_Outline: group with the grey ghost images (outlines). Same labeling discipline: I_OL_11, I_OL_22, I_OL_35,...This group is initially invisible
   
   
3. Gr_Txt: which is expanded on the screenshot has the three messages that are used in the game. This group is initially invisible.
   
   
4. Gr_CB: group with click boxes over the matchstick images+outlines. They follow same labeling system: CB_11, CB_22, CB_35...
   
   
5. Bt_Restart:  the button to restart, reset everything
   
   
6. Tx_Task: the title
   
   
7. Tx_Rules: the explanation
   
   

Variables

To track the status of each matchstick, I created a boolean variable with initial value of 0 for each of them. Labeling is similar to those for the images, outlines and click boxes: 

• v_11, v_12, v_13, v_14, v_15   for the first group
  
  
• v_21, v_22, v_23, v_24, v_25   for the second group
  
  
• v_31, v_32, v_33, v_34, v_35   for the first group

Three extra variables were needed:

• v_moves: will track the number of removed matchsticks
  
  
• v_correct: will track the number of correctly removed matchsticks
  
  
• v_visit: needed to track if the intro slide is visited for the first time; a jump to that slide is used in an advanced action to reset the game

Actions

Advanced actions

• EnterIntro: conditional advanced action with two decisions that is triggered by the On Enter Slide event for the first slide 'Intro'. It will check the value of the variable v_visit and jump to the second 'Game' slide if it is not a first visit. 
  
  
• ResetGame: a standard advanced action is triggered by the Restart button Success event, and by the On Enter Slide event for the second slide 'Game'. It will reset all the variables and restore the initial view of this slide (no outlines, only images).
  
  
• Simple action 'Go to Previous Slide' is triggered by the On Exit event of the second slide 'Game'.

Shared Actions

1. MatchStickNOK: to be triggered by a click box over a matchstick that should NOT be removed. This shared action is used  9 times. It is a conditional action with 3 decisions: 'Doing', 'Checking' and 'Cheating'. In the screenshot you'll see this action, with as an example parameters are set to the '11' matchstick. That is a matchstick that should in this case trigger the second shared action.
   

   
   This shared action has 6 parameters. The only optional parameter is highlighted in this screenshot, it is the tracking variable v_x associated with the matchstick. No need to define the other variables (v_moves, v_correct) nor the literals as a parameter.
   
   

   
   
   
   
2. MatchStickOK: to be triggered by a click box over a matchstick that should be removed. This shared action is used 6 times in this particular example. The first three decisions 'Doing', 'Checking', 'Cheating' are pretty much the same as for the previous shared action, with one exception: increment or decrement for the variable v_correct. This shared action has a fourth decision 'End' that will display a Success message if all correct matchsticks are removed. Since this can only happen when the user removes a correct matchstick, this decision was superfluous for MatchStickNOK action. The sequence of decisions is very important: the condition 'IF v_moves is equal to 6' (decision 'Checking') will also be True if 6 correct matchsticks have been removed, but the commands in 'End' will override those of 'Checking' because of the sequence. There are two screenshots here:
   

   

   
   This shared actions has 7 parameters since the Success Message has to be added. Only optional parameter that was upgraded to a real parameter is again v_x, the tracking variable associated with the matchstick.
   

   

Enhancements

I hear you! How will it be possible to use those shared actions for a Matchstick Game with another setup? I have some ideas, what about you? Please post your suggestions in a comment.

Intro

Dropdown interaction

Example Movie

Variables

Here is a screenshot of the user variables

As explained before v_attempts tracks the number of attempts and starts with value=3, v_drop is the associated variable for the dropdown interaction.

I used v_dummy, a variable containing the text  'Choose a language' out of laziness, to avoid having to type that text over and over again. Be careful: it has to be exactly the text in the first item, it is not possible to use a variable in the item list.

The variable v_groet is used on the third slide, to customize the text based on the current time of the user (cpInfoCurrentHour). The variable v_wrong is a Boolean (value=0) that will be set to 1 when the attempts are exhausted without finding the correct language.

Events and Actions

EnterDrop, triggered On Enter for slide Drop

ResetAct, triggered by the Success event of the Clear interactive object

A standard action that restores v_drop to its default value and hides the group Gr_Feedback.

CheckSubmit, triggered by the Success event of the Clear interactive object

1. EmptyDone if the user clicked on Submit without making a choice and it was the last attempt
2. Empty if the user clicked on Submit without making a choice and there are still attempts left
3. Correct
4. WrongDone if the user choose a wrong language and it was the last attempt
5. Wrong if the user choose a wrong language and there are still attempts left

The Sequence is important: if you put Empty before EmptyDone, it goes awry if it is the second attempt, because Empty would have decremented v_attempts and that means that EmptyDone would result also in a True condition, and user will lose an attempt. Same for WrongDone and Wrong, they cannot be switched. 

ExitDrop, triggered by On Exit event of slide Drop

More...

Update: if you are on a more recent version, please check out this article:

Forcing First View with micro-navigation (shared action)

Intro

Problem

Example movie

Watch this movie to check the solution. To make the switch between the initial Next buttons and the replacement Next button clear I used a different style. Moreover I inserted a text container with two variables: the system variable cpInfoCurrentFrame and a user variable v_frames (see later) that are used to solve the problem. To navigate back to already visited slides, open the TOC with the red curved arrow top left. The TOC close button has a similar look. Refresh the browser to start the movie again. I didn't check AutoPlay, you'll have to click on the (ugly) arrow in the middle of the slide.

Events and Variables

1. Success event for the initial Next buttons: rBt_One, Bt_Two, Bt_Three, Bt_Four. I don't need a Next button on the last, fifth slide. Those button will trigger the same advanced action NextAction:
   

   
2. On Enter event of slides 1-4 will trigger a shared action Show_Next:
   

   
3. Success event for the replacement Next Shape button SB_Next executes a simple action: "Go to Next Slide"
4. On Enter event of slide 5 (last slide) will trigger a simple action: "Hide SB_Next"

Advanced/Shared Actions

Advanced Action "NextAction"

Shared Action "Show_Next"

Conclusion