Matchstick Game (Shared Actions)

Intro

A while ago, with Captivate version 8, I created a SWF version of this game. If you have a browser (such as Internet Explorer) supporting the Flash Player plugin, you can have a look using this link.  With that verrsion I could take advantage of the brand new Shared Actions, which allowed to have variables defined as parameters. In version  CP7 where shared actions were introduced, that was not yet possible.

Today HTML5 output is the standard. Moreover Captivate in recent versions has added some very useful features, which I would like to use to create a new version of this game:

  • Multistate objects, making the old Hide/Show workflows unnecessary, sparing time which was needed for resetting. Feature was added with CP9.
  • Guides and Rulers make setting up layout so much easier. Feature was added with second release of CP9.
  • New commands in Advanced actions: ‘Go to Next State’, ‘Go to Previous State’, ‘Delay Next actions by’  appeared in CP2017 with the new version of the dialog box)
  • Effects 2.0
  • Bitmap image used as button, new feature in CP2019,  release 11.5. I also used some design elements from the Quick Start Projects.

Why didn’t I use SVGs i this case? The stock image which I used to create the different matchsticks, did lead to smaller file size for PNG than for SVG. I know that they may be blurry when upscaled. There is no problem with the clickable area being the bounding box, due to the shape of the matchsticks. That is often the reason why I prefer SVG, but not the case here.

Have some fun with either the scalable version using this link, or with the embedded version (rules are explained in the file):


Tip: have a look at the end of the blog for a suggestion...

Setup

The example file has 4 slides, using some design elements (and colors) from the Quick Start Project 'Wired':

  • Title slide with a 'Play' button, which triggers the default 'Go to Next Slide' command
  • Intro slide, explaining the Game rules and a Start button. The On Enter event of this slide has an advanced action. Slide has double action: explaining rules on first visit, dummy slide on next visits. Such a dummy slide is necessary for a Reset action/
  • Game slide: On enter event is also used as advanced action trigger. More details below.
  • End slide

Slide Game - Timeline and Layout

I set up a grid of guides fo-r the game slide. It will be very useful when adding a second game slide based on another word:

The timeline is used to have the Next button and the final set of matchsticks (with flames) appear when necessary. No Hide/Show actions were needed:

You see on this timeline: 

  1. Gr_Match has been expanded, with 15 multistate objects, the Matchsticks. They are labeled in a logical way: start with Mt _ (Match), followed by a number for the group (1-3) and second number for the matchsticks, starting from left to right, top to bottom. Example: Mt_12 is the top stick in the first group, Mt_25 is the bottom stick in the second group.
  1. All are PNGs used as buttons, their timeline ends ar 1.6secs and pausing point is at 1.5secs. The Rollover and Down states have been taken out, a custom state 'Burnt' has been added:

  2. Feedback: a multistate smart shape timed for the rest of the slide. Normal state is made invisible, Success, Late and Cheat state were added:

  3. SB_Reset: shape button timed for the rest of the slide, default setting (pausing point not really necessary), timed for the rest of the slide. It triggers the simple action 'Go to Previous Slide'.
  4. SB_Next: shape button, appearing at 2.5secs, pausing point at 0.7secs. This means that the button will be invisible while playing the game.
  5. Gr_End:  group with burning matchstick images. Timeline starts at 1.6 seconds, till the end of the slide. That group will also remain invisible to the learner during the game.

Variables

You'll need a whole bunch of variables (4+15):

v_correct: will track the number of correctly removed matchsticks; start value = 0

v_moves: wil track the number of removed matchsticks; start value = 0

v_max: fixed value, number of matches that may be removed; will be populated in EnterGame action

v_visit: to track the visits to slide Intro;  start value = 0

v_11, v_12....v_35: Boolean variables , one for each matchstick, start value = 0; they track if the matchstick has been removed (value = 1) or not. The labeling is using the same logic as for the Mt_ labels. That makes it easy wen defining parameters.

Events and Actions

EnterIntro

As the name tells, this advanced action is triggered by the On Enter event of the second slide 'Intro'. 

It is an easy to understand conditional action, based on the tracking variable v_visit. On first visit the slide is played normally, on following visits the slide is skipped immediately, and re-enters the Game slide. That is necessary to reset variables for that slide.

Because it is used only once, I didn't convert it into a shared action. Nevertheless, could be a useful conversion but that will be explained in another blog post.

EnterGame

Triggered by the On Enter event of the Game slide, is used to reset all the variables. 

Similar to EnterIntro, it could be interesting to convert to a shared action. Explanation in that same future blog post (or webinar?).

Match_NOK (shared action)

This action is triggered by the Success event of the matchstick buttons, for those who should NOT be removed (hence the N in the name of the action). Here are screenshots of the action with indication of the parameters, and the description of the parameters:

The action has three conditional decisions.

  1.  First decision 'Doing' checks the value of the tracking Boolean variable, because the matchstick can be clicked to remove it (v_xx == 0) or to restore it (v_cc ==1). The variable tracking the number of moves will be incremented or decremented.
  1. Second decision  'Checker' compares the number of moves with the allowed maximum, and shows a message (state) when that maximum has been reached. I used the Delay command, to have the message disappear after a while.

  2. Third decision 'Cheat'  will lead to another message (state) if more than the allowed removals have been done. Again Delay command was necessary, ;this time to create an automatic Reset by going to the Intro slide.

This shared action has been used 9 times. Only the first two parameters have to be entered carefully, the other 4 are always the same.

Match_OK (shared action)

This action is triggered by the Success even of the matchstick buttons which need to be removed. Here are screenshots of the action with indication of the parameters,(2 extra compared with the previous shared action: Success state and the Gr_Match):

The first three decisions are similar to those of Match_NOK. Just one exception: this time the variable v_correct needs to be incremented/decremented within the first decision. A last decision 'End' was necessary for the Success situation, where v_max removals  (here 6) resulted in the correct word. 

More?

If you are pretty new to Variables, Advanced and Shared actions, this may seem very complicated. 

What if you want another slide with another word, maybe another number of maximal removals? 

You want to recreate such a game, maybe with other objects than matchsticks? 

It could be done without having to create any variable, just by using shared actions. Wished I could explain this in a workshop . Would you be interested? It is a very nice example of the way shared actions can allow you to create interactions WITHOUT PROGRAMMING SKILLS.   You don't have to believe me, of course... let me know if you want to participate  You can contact me using the mail address, or go to my website and fill in the contact form mentioning this invitation.