Game: using JavaScript in a Shared action

Intro

Last week I presented at the Adobe eLearning World 2020 “Deep dive into Captivate with Advanced and Shared actions’. I had prepared 3 different scenarios, to be ready for any audience. Due to the poll before the session I decided to go for the ‘newbie’ scenario because the majority was new to Shared actions, and a considerable amount of attendees even to Advanced actions. That means that intermediate and advanced users were perhaps disappointed. To remediate I plan some blogs and examples as illustration. This is the first one.

Javascript and Shared actions

It is possible to have the command ‘Execute Javascript’ embedded in a shared action. When talking about games, randomization is mostly used but not a ready-to-go feature in Captivate. In the session I showed a very simple board game where the tossing of a dice is simulated, and the board cursor advances based on the result of the dice toss. That was realized with one shared action.

This game uses random numbers as well. It is a memory game which can be used in many variations due to the flexibility of shared actions, variables and multistate objects.

Game

You will learn about the game rules in the game. There is an easy and a more complicated way to play the 3 games. Hope you don’t keep only the easy one if you are in for some memory training:

Play with the rescalable version using this link or with the embedded (fixed resolution) version:

Have fun!


Find the Twins - Game (Shared Actions)

Inttro

Looking back in my blog history, I remember very well the first Memory Game created 10 years ago (with version 5.5). It was quite an adventure, because I wanted to prove it to be possible without having to use ActionScript  (since only SWF output was available).

Now 10 years later, ActionScript has been replaced by JavaScript but  I still try to create games without having to use JS.  That is possible when randomness is not necessary as is the case for this game. However newer features like multistate objects, SVGs which can be used as buttons, and most important 'Shared Actions' make it a lot easier now. Kudos to the Captivate team!

Have fun with the embedded version (fixed size), or the rescalable version using this link



Extensions possible?

The structure of this game allows a lot of flexibility. The two challenges have a different total number of shapes. Shapes can be replaced by images to convert it into a kid's game. It is also possible to increment the number of pairs, or to make a search for trios instead of pairs.

SVGs  used as buttons have several advantages. You can limit the clickable area to the image, instead of to the bounding box. They remain crisp ion all devices, whatever the browser resolution.  Disadvantage is that they take a while to redraw, which you may have seen when the slide was reset. 

As you could read I used:

  • 3 shared actions.  one of them was used 30 times!  If you are not yet convinced about the value of Shared actions over Advanced actions, I will present about both on 24th of June in the  Adobe eLearnng World 2020 conference.
  • 2 advanced actions for the Reset action On Enter for the challenge slides
  • 4 variables




Game: test your logical mind!

If you have watched my course about Using Shared Actions, you'll already know that this is one of my favorite features. It makes it possible for newbies to create rather complicated tutorials without need of programming skills. 

I already uploaded a game recently, here is another one. You can use this link or play with the embedded one:


It was created with SVGs (thanks to Illustrator), one shared action, two advanced actions (which could be converted to shared actions as well), Drag&Drop features, multistate objects. The setup makes the game very flexible. In the example sequences were all with 6 shapes, but you can create them with any number of shapes. You would have to find a new indicator for the degressive score if you have more or less shapes. The adult version can be converted to a kid's game, by using easier sequences . Have fun!

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. 






Find the differences (game)

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).
  • 7 SVGs functioning as buttons. Those are the correct hotspots (if you want to cheat... look at the labels). They need to be on top of the click box, but the stacking sequence of those SVGs is not important. The Rollover and Down states of those SVGs have been deleted. One custom state 'Down' has been added, which has the Chinese character for 'OK'.
  • 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

As usual this standard action will prepare the correct situation for the 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.






Playing a dice game, using While loop

Intro

In a previous blog post I explained the ins and outs of the new Advanced Actions dialog box. If you feel confused about my terminology in this more practical blog post, please read that first article. A decision block of type 'While' is totally new in version 2017. It has some similarities with the Conditional decision block (IF, Then, Else) but offers new possibilities as you'll see in this simple game.  The While loop can be used to create a looping sequence of commands. That loop can be infinite, or limited in number of executions, based on one condition or a combination of conditions.  Mohana Das from the Adobe team published recently this article demonstrating the infinite While loop. Please read that article, for users familiar with advanced actions the used condition 'IF 1 is equal to 1' will be easily recognized, since this was the condition needed to create a mimicked standard action decision in older versions. It means that the sequence of commands will continue to be done, since that condition always results in True. In a future blog post, I will offer some tips about breaking such an infinite loop.

The present article  will focus on using the While loop, based on a condition which results in having the commands sequence repeated a limited number of times. It is a very simple game, every object was created within Captivate. One exception: the color shift in the Characters was achieved using roundtripping with Photoshop.

It is not a responsive project, to avoid a too long article (should have to explain setup in fluid boxes with logic of the variables and advanced actions). Maybe in a next article?

Play first!

Download this published folder (HTML5). Sorry, cannot embed it in this post (allows only SWF's and it is not playing well in Flash output). Unzip the folder, launch the index.html file to start playing.  It is a small game: when you click on the Play button, a dice will be rolled and you'll see one of the faces of the dice, indicating a (random) number. The girl is supposed to climb the stairs, she will go up as many steps as the number you won. The goal is to reach the top. When the girl reaches the top of the stairs, clicking on the Play button will result in another scenario, and a Reset button will appear. 
On entering the Game slide you'll see two looping animations, with added randomness and a possibility to stop the the looping. You'll see this action in Preview, but I will not provide details. 

Slide setup - preparations

Have a look at the timeline of the Game slide:
I created the stairs as a freeform shape. That was pretty easy with Guides (see Guides Rule) and Snapping to guides. Of course a better approach would be to create that shape in Illustrator with export to SVG, but it is always a challenge to use only the available Captivate tools.

Dice: this is a multistate object, the normal state is a square shape, for each of the sides circular shapes with a gradient fill are added. Look at  the Object state panel for this object. 
The 3D animated dice has also been created as a group from a lot of shapes.

Effects - Characters
Two custom motion effects were created for the climbing girl. Default effects couldn't be used in the advanced action, because the path had to be edited. Here are two screenshots of the custom effects: Impatience (before starting game) and StepUp  (during play).

The original Character (climbing the stairs) will disappear with a default Exit effect 'Zoom out'. when the top is reached.
The Sticky image that replaces the original one climbing the stairs, will get a default Entrance effect 'Drop in and Bounce'. The text panel in that image is covered with a click box, functioning as a Reset button.
Play button: is a simple transparent button. 

Variables (for game only - more are needed for the start animation)

I created 5 user variables:  
  • v_dice: starts with an empty value, will get a random number between 1 and 6 (using JavaScript, see Playing with Numbers)
  • v_counter: starts with a value=0 and will be used in the condition for the While loop to fix the number of repetitions to match the random number in v_dice
  • v_stair: is a second counter, that will be used to keep track of the total number of steps done. It is needed to know when top is reached. The staircase has 16 steps. It also starts with a value=0.
  • v_null: empty variable (see...) used to reset the v_dice variable after each use of the Play button
  • v_roll: starts with a value=0, will track the number of dice rolls needed to complete the steps; that number appears after the top of the stairs is reached. It is a third counter.

For the EnterGame action a 6th variable v_anim is used.


Events and actions

The three used events for the game are:
  1. Success event of the Play button, it will trigger an advanced action PlayAct
  2. Success event of the Click box (Reset) it will trigger the advanced action ResetAct
  3. On Enter event of the Game slide, which triggers the animations: EnterGame

ResetAct triggered by Click Box

I couldn't use Scenario 2 of the Replay Slide blog post.  There are a couple of reasons, one being that the Game slide was originally the only slide. It is never a good idea to start a project with a complicated On Enter action (as is necessary for the looping animation). The workaround is to have a short dummy slide (mine is 0,2 secs) before the game slide and use this Reset action:
Due to the command 'Continue', the On Enter action of the game slide (second slide) is always executed. At this moment for HTML5 output this is not the case when using micronavigation (as in the blog post about Replay slide).

PlayAct triggered by Play Button

The PlayAct has 3 decision blocks, one of each type: the first decision is a standard action (sequence of commands), the second is a While loop based on a condition and the last decision is an IF condition, in previous versions labeled as a conditional action. Here is the Preview:

Decision 1 'Random'  (standard action)

With this sequence, the 3D dice (animated On Enter) will be hidden and replaced by the static dice in its Normal state.
The one line JavaScript will generate a random number between 1 and 6
  window.cpAPIInterface.setVariableValue("v_dice",Math.floor(Math.random()*(7-1))+1);
I explained the construction of this line in detail in this blog post

The variable v_counter is reset to 0. It is important that this is done before the While loop in the third decision.

Decision 2 'EndCheck' (conditional IF action)

This decision checks if the character has reached the top by comparing the user variable v_stair with the total number of steps (16). Contrary to v_counter, v_stair is only reset to 0 when re-entering the Game slide (using ResetAct).

The Play button is hidden (to avoid disturbing the rest of the sequence) and the static multistate dice.

The original character disappears, is replaced by a group (character + click box + text balloon) with some default effects.

If the condition is not fulfilled (ELSE), which means the top has not yet been reached, the variable v_roll is incremented by 1. 

Decision 3 'ShowNumber' (While loop)

The condition used to limit the execution of the commands in this loop, is a combination of these two (AND):
  1. The number of steps taken by the image cannot go beyond the random number stored in v_dice (see first decision) and
  2. The total number of steps done, stored in v_stair, cannot be greater than 16, number of steps in this staircase.

The commands to be done while that AND combination results in True are:

  • Switching the static dice to the next state (see image of the Object states for this static dice above)
  • Character gets on the next step (using custom effect StepUp, but that name has been changed by Captivate to the name of the effect it was based on 'RightToLeft'.
  • The variable v_counter is incremented, it is this variable which is used in the first condition
  • The variable v_stair is incremented; that variable is not reset by clicking on the Play button, is necessary to check if the top is reached (decision 2 'EndCheck').

EnterGame triggered by the On Enter event

Here is the Preview, let me know if you need more details

Questions?

Fire away. Creating this game was a lot of fun, 'while' exploring 'while' loops. Let your creative juices surge!

Matchstick Game - shared actions

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


Intro

This post is inspired by a question on the Captivate forum, have a look at this thread: 'Advanced actions for a Matchstick Game'. After reading the question, I accepted the challenge. Some advanced actions are used, mostly to reset the game, but the two 
most important actions are shared actions. It is also a good example for a lot of tips I have offered in this blog:
  • Setup of a labeling system that makes it easier to choose parameters when applying a shared action.
  • Sequence of statements and decisions in a conditional action is very important because Captivate will always evaluate each statement and decision in sequence.
  • Choice of optional parameters for a shared action.
  • Using On Enter Slide events to reset variables and objects.
  • Using groups to simplify advanced/shared actions.

Game - rules

You can play the game:
  • goal is to create a word from the initial set of matchsticks by removing some of them;
  • clicking on a matchstick will remove it and a ghost image will appear instead of the original matchstick
  • you can reset the matchstick by clicking on the ghost image
  • maximum number to be removed is 6; you will be warned when you reach that number
  • you can try to remove a seventh matchstick, but I consider that as cheating :)
  • you have a Restart button

Objects - Labeling

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

From bottom to top you see:

  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

I will not explain the simple and the 2 advanced actions, article would be too long. In a planned cookbook for shared actions I will explain everything in depth:
  • 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

Two shared actions are used:
  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.





Captivate 6 - Advanced Actions

Intro

If you did read some of my posts, you'll know that I focus often on using Advanced actions in Captivate to extend its functionalities. And if you look at the just released version 6, like me, at first sight you will be disappointed because apparently nothing much has changed about Advanced actions: no enhancements in the user interface, only two possible new statements (play and stop an audio clip), still not possible to export/import/print/comment those advanced actions, etc. To re-use them you'll have to create a template, and here is a first positive note: it is now possible to save an existing cptx-file as a template.

Same as with the release of Captivate 5.5 I'll leave it to the Evangelists and other Captivate friends to talk about the big new features like new video demo, interactions, shapes, quiz enhancements, themes, shapes etc. Those more visible features, even though they are exciting, have never been targeted by this blog and I'm a focussed person. Hoping to find time to publish more in the near future, planning to use the new video feature to publish some YouTube videos about.... advanced actions. Let me know if you find that useful?

Favourites

On this release day, I want to tell you how two new features (my first favs) will save you a lot of time when scripting advanced actions:
  • object grouping
  • shapes used as buttons
For this purpose I recreated in CP6 a Game, explained in a previous post: Concentration Game. Can you have a look there and play the game if you do not remember about it? The CP6 version is a bit simplified, has less cards and only one image to discover. But the differences due to those new features will be very clear.

Later on, after having explored more in the released version (for the moment I'm still using an prerelease version) I will try to publish a list with my likes and dislikes, in the same sense as this one: What I (dis)like in Captivate 5.5.

Shape buttons

In the original game, each part of the image was covered up with three objects:
  1. a mnemonic-image to be disclosed on click, set for the rest of the project so that it has only one ID
  2. another image with the back of the card, visible before the mnemonic is disclosed, set for the rest of the project for the same reason
  3. a click box to trigger an advanced action:  this cannot be set for the rest of the project
In Captivate 6 I replaced the objects 2 and 3 by one Shape button. Contrary to other interactive objects, a shape button can be set for the rest of the project, to preserve its unique ID. Since now only two instead of three objects have to be addressed, advanced actions will be shorter.

Object Grouping

Long awaited feature: being able to group objects on the Timeline, to label the groups, to collapse/expand them, to make them visible/invisible on the stage for editing reasons. Less known: you can use the group label in advanced actions as well, to execute a statement on all the objects of the group. That is great for show/hide or for enable/disable actions. In the new game I choose to create a group with all the Mnenomics, and another group with the Shape buttons. When entering the last slide (Congratulations) all those objects have to be hidden. In Captivate 5.5 this resulted in a long list with Hide statements, 3 for each card (since I had three objects per card). In Captivate 6 you only need two statements: one for each group, whatever the number of objects in that group. That is really a great time saver.

Video

Do not judge me too harsh, this is my first try at the new video demo feature, have still a lot to learn by practice. If the video doesn't show up on your page, please watch it on YouTube: Advanced actions Captivate 6.
Watch the differences between the two games, and how both the shape buttons and the object grouping made the scripting easier in Captivate 6. Be sure, will blog more about actions triggered by Shape buttons! They cannot only be displayed for the rest of the project, but also be added to master slides and question slides. This opens new possibilities.

Concentration Game - created exclusively with Captivate

Intro

Another challenge popped up on the user forum:
"I am trying to recreate the Classic Concentration game. Does any one have any ideas how I would do this in Captivate?"
You can read the full thread here: How would I create the Classic Concentration Game?

And I tried to realise this exclusively with Captivate functionalities: no widgets, no ActionScript. There are of course limited functionalities as I will explain at the end. I have been using the possibilities of hiding/showing objects a lot in this example. For this reason I recommend reading a previous post about this subject: 

In this blog post you'll find the global concept of the sample movie. Later on I will publish a companion article that will explain the advanced actions in depth.

Example movie

Play with this SWF to get the feeling of the game. Only two games are available but the number of images can easily be extended without too much trouble. Have fun.
 

Work Flow

You'll find here the same subjects I explained in my previous post Look before you leap where I tried to give you a detailed view of my preparing brainstorming; the 'Leap' portion (construction of the advanced actions) will be treated in the article:

Situations - Slides - Events

Here are the situations that can occur in the game:
  1. Choice of a challenge: either Europe or North America will have consequences later on, so I'll need a variable
  2. Clicking a first card, content of card will be showed, has to be remembered (by user and by the game), so I'll need a variable
  3. Clicking second card, content will be showed and remembered (variable)
  4. Game has to compare the content of both cards (duo): correct/incorrect will have different consequences/branching
    1. correct: cards are removed (image visible based on choice), game has to remember this 'duo' was correct, next action of user 
    2. incorrect: cards are again turned, next action of user
  5. User can choose to guess: answer can be correct/incorrect
    1. correct: congratulations, game ended
    2. incorrect: next action of user

This game has only 5 slides (see also Advanced Interaction View in Gallery),and you can check the timeline of the slides in the Gallery images:
  1. Intro: is the welcome screen, where the user can choose between North America and Europe (for the hidden image) using two buttons. This slide is reused, after a wrong guess of the user (situation 5) he is navigated again to this slide (hence two text captions).

  2. Game: is the most complex slide, with tons of objects, and most objects are timed 'For rest of project' which leaves them with one unique ID; the click boxes on the 'cards' are triggering advanced actions that will show the cards, and there is a Guess button that navigates to slide 4. This slide will be explained more in detail later on.

  3. Second: to have more events for triggering actions I used this second Game slide that will appear after the user has chosen two cards to reveal and with the timing 'For rest of project' it has the same game objects; the user will be able to read the Success/Failure captions, and proceed with a Next button which returns him to the second slide Game.

  4. Guess: when the user has clicked the Guess button on slide 2, this slide is presented; it has the same game objects as on the two previous slides, and a Text Entry Box that will be validated. If the answer is correct, navigation is to the last slide, if it is wrong, navigation is to slide 1 Intro.

  5. End: shows the image totally even if not all cards have been removed, a relevant text caption depending on the image and a Text animation; this slide will only be reached when the user has guessed the answer correctly.
Events used to trigger actions, slide and object events:
  • Enter of first slide Intro to show/hide buttons and Text Captions: advanced action EnterIntro
  • Buttons on slide Intro (Europe/North America): advanced actions Bt_EU Bt_NA
  • Button 'Next' on slide Intro (only visible on second visit) triggers simple navigation to next slide
  • Enter of second slide Game: advanced action EnterGame
  • Click boxes (12) on slide Game: advanced actions CB_11, CB_12.... CB_34   (location in label: 34 = 3rd line, 4th position)
  • Button 'Guess' on slide Game triggers a simple navigation action to slide 4 
  • Enter of third slide Second: advanced action CheckSecond
  • Button 'Next' on slide Second is set to Continue, because exceptionally I used the next event (Exit) and have to be sure the playhead reaches the last frame
  • Exit of third slide Second: advanced action ExitSecond
  • TEB on fourth slide Guess navigates to slide 5 End if validation is correct, to slide 1 Intro if it is incorrect
  • Enter of last slide End: advanced action EnterEnd

Variables

  • v_void: empty variable to check if variable v_one is empty
  • v_choice: to store the choice of Europe (E) or North-America (A)
  • v_current: very important variable to save time when editing, it will store the content of the last chosen card (AE, DW, Fl, FW, ID or PR) 
  • v_one: stores the choice of the card if it is empty (first card of duo) by using the variable v_current
  • v_two: stores the choice of the card if v_one is not empty (second card of duo) by using the variable v_current
  • v_AE, v_DW, v_Fl, v_FW, v_ID, v_PR will get the value=1 if that duo was discovered
  • v_counter will increment by 1 with each new discovered duo; I didn't use it in this example, but could be used to have a different score at success depending on the number of duos that had been discovered before guessing the image
  • v_first: gets the value=1 after the first slide has been visited, because that slide is reused and has to show different objects on the subsequent visits.


Objects

The timelines in the Gallery provide information on the objects and are pretty simple for slides Intro, Guess and End. 

On slide Game you have a lot of objects (not all are visible in the Timeline image). The stacking order is here very important, as is the timing of those objects. And I really hope that next version of Cp will offer us the ability to group objects, to have them in collapsible folders on the Timeline. From bottom to top this slide has:
  • the two images to be discovered, one for North America, one for Europe; this could be extended to more choices or even more images from those two continents; images are set to display for 'Rest of Project', so when discovered (partially) this will show up in slides Second, Guess; on slide End they will be uncovered totally
  • for each card you'll find a trio of objects (highlighted for first card on the first row), for this example: 
    • PR1_Fr image of the content of the card (here the mnemonic for Premiere), needs to be the bottom one; I choose this label because it tells me about the content (first card with Premiere, Fr); this image is also timed for Rest of Project
    • PR1_Bk the 'back' of the card that is visible when the game starts (used a gradient for those, but you can of course use whatever image you want), timed for Rest of Project
    • CB_PR_11 click box over the card, that will trigger the advanced action CB_11; I used this longer label to be able both to identify the content and the place to make it easier to attach the advanced actions (and edit the duplicates)
  • Text Caption for the button Guess ("If you want to guess....")
  • Button Guess
On slide Second all the objects set to display for rest of project (from slide Game) will be visible as well as its proper objects:
  • Button Next, left to the default action 'Continue' 
  • Text Captions Correct/Incorrect: the proper caption will be visible based on the action On Enter for this slide; when exiting the slide both Text Captions will be hidden and user is returned to the previous slide Game

Actions

As mentioned before, I will not explain the actions in detail here (post would be too long), just the general idea of each action

EnterIntro
This action checks if the Intro slide has been visited already, if this is the case the choice buttons (North America/Europe) are replaced by the Next button, and the Welcome caption is replaced by the Sorry caption. After that check the user variable v_first is set to 1.

Bt_EU/Bt_NA
Action will populate the user variable v_choice and go to the next slide

EnterGame
Complex conditional action, that first resets the user variables v_one/v_second to empty (v_void). It will set the proper image to visible, based on the user variable v_choice. Then for each of the duos it will check if they have been discovered and display that situation (hiding the back and fore images of the cards to display that part of the image if duo was discovered), using the variables v_AE.....v_PR.

CB_11.... CB_34
Those actions will populate the user variable v_current and hide the back of the chosen card. Then either v_one or v_two will get the value stored in v_current, depending on the fact that it is the first or the second card.

CheckSecond
Action will compare the content of v_one and v_two to check if they are equal. If not, the incorrect caption will get invisible. For the correct duos this has to be checked for each possible duo (combined condition) because of the need to set the user variables v_AE....v_PR that are used for the action EnterGame. The correct caption will be visible, the appropriate user variable is set to 1 and v_counter will be incremented.

ExitSecond
Correct and Incorrect captions are hidden, navigation to the previous slide

EnterEnd
All cards are hidden (foreground and background), which will reveal the total image. The appropriate text caption relating to the image is made visible based on the user variable v_choice


Conclusion

Captivate is not Flash, and I'm perfectly aware that for this kind of games programming in ActionScript is better suited. I limited the number of cards to 12, but it can be extended to more cards and duos. More images to discover is easily possible as I explained before. But if you want to change the content of the cards, this will be a lot more work. It is possible to have a differentiated score depending on the number of duos that are displayed before trying/succeeding a guess. You can report easily the score to a LMS (attach it to the TEB on the fourth slide Guess) but if you want a differentiated score to report you'll get stuck like with other question slides (customized or not) because you cannot attach different scores to an interactive object based on a conditional action.


Anyway it was fun to try to create this simple game, it allowed me again to refer to the workflow and the hide/show functionalities that I explained in previous posts. Your comments are, as usual, very welcome.
 

Update

Yesterday eLearnDesigner posted a comment to tell me that she discovered a bug in the game: when a user clicks twice on the same card, it will be considered as a success and both parts of the image will be revealed. Thanks a lot!

Of course I had overlooked this possibility, and solved this by changing some actions:
  • CB11...CB24  here I added a statement to disable the click box that had just be clicked.
  • EnterGame both click boxes for the pair of cards were enabled again if there was no match.