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.
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.
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:
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).
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.
Two advanced actions are used:
EnterGame triggered by the On Enter event of the Game slide
WrongAct triggered by the Success event of the Click box CB_Wrong
Another rather simple standard action, to let some audio play and have effects with the cover:
Shared Action 'CorrectHotspot' triggered by the SVG buttons (Success event)
The most important script for this game. Several actions happen when a correct hotspot is clicked:
- An effect is applied to emphasize the clicked SVG, in this example I used a ScaleTo effect.
- Secondary an audio clip is played (sort of congratulation)
- The hotspot needs to be disabled, to avoid having it clicked multiple times.
- To track the number of discovered hotspots, the counter variable needs to be incremented.
- Progress has to change in the indicator (yellow circles multistate object)
- When all hotspots have been found, the final image has to appear (with an effect).
This is a Preview of a filled in action, where the 5 necessary parameters are marked in a color rectangle:
None of the candidate parameters need to be a parameter: the two variables (v_counter and v_hotspot) nor the literals. As I have emphasized many times, it can be tricky to define a literal as parameter. In this particular case it could have been possible to indicate the Delay time needed to listen to the audio clip being defined as parameter. That would be necessary if you want to use audio clips with very different lengths for the the individual hotspots. The parameters are visible in this screenshot:
Why shared action instead of duplicate advanced actions?
You can use exactly the same shared action if you have a different number of hotspots (differences). Just edit the action EnterGame to replace the value to be assigned to the variable v_hotspot. It is the reason I replaced the literal '6' by a variable v_hotspot. Several parameters are used multiple times in the shared action: the name of the progress bar, the hotspot, the audio clip. When using duplicate advanced actions you would have to edit quite a lot.
One of the disadvantages is the fixed status of the applied Effects. If you want another effect, use the shared action as template for an advanced action, replace the effects and save it as a new Shared action. If you are new to shared actions: contrary to advanced actions it is perfectly possible to save a new action with the same name, provided the older one is no longer used.