As we often do, we started by illustrating our artwork using Adobe Illustrator. Once we were happy with the layout of our screen, we used the neat new Asset Export pane in Adobe Illustrator CC to export our artwork as a series of 96 ppi PNGs. The asset Export feature is so easy to use, all you need to do is drag your artwork on to the panel, confirm your settings and hit export.
FYI, images at 96 ppi are a must if you want to make your Articulate Storyline projects look great.
Next we inserted our images in to Storyline using the Insert Picture from File option and recreated our screen layout.
Once the brain image had been reconstructed we set about editing the state of each of the sections of our illustration. As you can see from the image below, each part of the brain has five states (white, peach, red, yellow and cyan).
Our next aim was to create an interaction that would allow the user to colour each of the parts of the brain independently.
To do this we knew we’d need to attach a number of triggers to the colour swatches in our palette.
Once we got started, it became apparent that our trigger panel was filling up pretty quickly. While we’re yet to build anything with enough triggers to bamboozle Storyline, we were finding it quite difficult to keep track with the nuts and bolts of our project, so decided to rethink our approach.
Earlier we mentioned that each part of the brain illustration now had five states. We went on to create five, True/False variables and named them to match the colour of each state (white, peach, red, yellow and cyan).
Putting it all together
The final step was to connect the colour palette to the brain illustration.
As the illustration had been constructed using multiple PNGs stacked on top of one another, we were worried that the user might face issues when trying to accurately select the areas of the brain to recolour. To get around this we used the freeform drawing tool to trace the outline of each part of the illustration that we wanted to be able to recolour. We removed the fill and line colours of the five new shapes, making them invisible, and attached the following triggers to each:
Each of these triggers is setting the state of part of the underlying image based on the condition of the five True/False variables we created earlier.
In short, if the user clicks the red swatch, the red variable is set to true (and all others set to false). Then when the user clicks the illustration it is coloured red.
We hope you enjoy looking at the finished example here.
We’ve stripped our example back to basics and you can download the .story file here. Take a look and see how you can use this functionality to create something fun!
Let us know how you get on via Twitter @4ptLtd.
David began his career in eLearning in 2000 after earning qualifications in Graphic, News and Infographic Design.
He is passionate about creating well-designed and purposeful eLearning solutions and is a current Articulate E-Learning Heroes Super Hero.