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:
- Success event of the Play button, it will trigger an advanced action PlayAct
- Success event of the Click box (Reset) it will trigger the advanced action ResetAct
- 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):
- The number of steps taken by the image cannot go beyond the random number stored in v_dice (see first decision) and
- 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!
