CREATING A CUSTOM HOTSPOT ACTIVITY FOR ELEARNING USING FLASH

Here’s a quick look at how to create a cool Storyline-compatible hotspot interaction in Flash for an eLearning module. I recently wanted to make a pick-many activity where the user could select multiple keys on a keyboard. In Storyline, hotspot activities are weakened by the fact that only selectable objects have a hand cursor over them. I got around this by making a huge hotspot that covered the entire keyboard, and then putting the ‘correct’ hotspots on top of that one. This solved the hand problem, but made it impossible to have any hover/selected effects on individual keys. The user would have no idea which keys they had selected.

I know when to stop beating my head against a wall; Storyline just isn’t made for this type of complexity. This is a job for the Flash! The Adobe Flash, that is. I’m not going to go through the whole ActionScript3 code here, but I want to talk about the important part – the communication between Storyline, and the keyboard, which is a SWF movie.

For my purposes, I want the activity to be marked correct when the user has selected both ‘Ctrl’, and ‘O.’ The activity should be marked incorrect if any other buttons are marked as ‘selected’ when the user submits the interaction. To accomplish this, I placed three buttons off-screen, and assigned them to be the hotspot targets – two correct buttons, one each for ‘Ctrl’ and ‘O’, and one incorrect button, which gets selected whenever there are incorrect keys selected.

These buttons are triggered by Storyline variables (in this case, True/False variables named ‘correct1’, ‘correct2’, ‘incorrect’). There are triggers which change the state of these three buttons, based on the state of the associated variables. When the user hits ‘Submit’ the state of these three off-screen buttons is what determines if the interaction is marked correct or incorrect. Here’s an example of what the slide looks like in Storyline:

Okay, simple! So how do we adjust Storyline variables from a SWF movie? The answer can be found in this great article by Julio Ordonez. Here’s the short version, though. In your ActionScript3 code, call the following function to change a variable (in this case, we’re setting the variable ‘correct2’ to True):

ExternalInterface.call(‘GetPlayer().SetVar’,’correct2′, true);

The internal logic of deciding when to set each of your Storyline variables as True or False will be largely dependent on your particular circumstance. In my case, for example, I wanted my interaction to be marked correct only if two specific keys were selected, out of a possible 40 or so. I created an array to track all of the currently selected keys, and then iterated over the array on each mouse click, changing the Storyline variables depending on which keys in my SWF movie were selected.

The basic setup will remain largely unchanged, however. Simply hide your hotspots offscreen, and set their states via Storyline variable which are in turn set from within your Flash movie.

Here’s a working demo of the keyboard interaction.

#animation #articulatestoryline #CanadianLearningvendors #developingeLearning #Developmenteducation #eLearning #eLearningvendors #gamification #instructional #instructionaldesign #leading #learning #learningapps #mobile #mobilelearning #Pathways #PathwaysTrainingandeLearningInc #TorontoeLearning #topelearningcompanyinCanada #training