The inspiration for this demo was the Articulate e-Learning Heroes weekly challenge #154 which asked course designers to use Pantone’s 2017 Color of the Year (Greenery) in their e-Learning courses, with examples given including games, quizzes, scenarios and interactive dials.
I chose to work with one of the Pantone colour pairings for Greenery – “Rev it up” and had fun creating this interactive demo where you get to pop balloons to learn more about the colours that make up this pairing.
The Design and Development
The idea for this demo came from a party-themed interaction I recently designed for a client.
I added a Freeform motion path to each balloon on the base layer and set the duration to 45 secs for some of the balloons and longer for others as I wanted some balloons to move slower and some faster. I also added a Speed “Bounce” Path Option and staggered the starting time of the balloons by placing them at different points along the timeline, with a Fade Entrance Animation.
The interactivity involves clicking on each balloon image as it moves around on its motion path. A trigger then simulates the popping of a balloon by changing the state of the image to “Hidden”. Another trigger then shows the relevant layer of information, with the Slide Layer Properties set to “Pause timeline of base layer”. This layer has a close option with a trigger to “Hide this Layer” after you’ve viewed the information. You are then taken back to the base layer where you continue on with the interactivity.
Working with vector and .wmf files in PowerPoint
As this demo was based on working with colours, I used PowerPoint to work with the vector balloon image to match the colours in the Pantone colour pairing.
I also decided to experiment with altering the colours of the Articulate Storyline animated characters.
Firstly, I inserted the character into Storyline, then saved the image as a .wmf.
I then inserted the .wmf file into PowerPoint and ungrouped the .wmf image (Ctrl + Shift + G).
I then needed to delete a couple of shapes that appeared around the neck of each of these characters.
I selected all pieces of the image and removed the outlines – removing the outlines makes the image much easier to re-colour.
Then I selected the parts of the image I wanted to re-colour and filled these shapes using the eyedropper (you could also enter the colour’s RGB values here). To achieve the two-tone colour effect, I adjusted the shading of the colour on some of the shapes by adding transparency once I’d applied my chosen colour.
Lastly, I grouped the image pieces (Ctrl + G) and saved this as a picture in the default format, .png.
(Of note, you can also save this re-coloured image as a .wmf and use the file again in exactly the same way as I’ve described above.)
Including Learner Feedback
I included several feedback layers in this design that I think are important when designing an interactivity like this one. Thinking about how different learners may interact differently, and considering all possibilities, including the possibility that the learner may take no action at all as far as interacting with this demo, I included an intro and/or instruction layer, a layer with a message letting them know they have completed the activity (triggered to display when a True/False variable changes to True when the state of all of the balloons are hidden), and layer with a message letting the learner know that they haven’t popped all of the balloons (triggered to display when the “Media completes”, with a condition that a True/False variable is not True).
It really pays to keep an open mind about the possibilities and experiment with motion paths and triggers in Storyline. I had no idea you could actually click on an object as it moved along a motion path – but you can and now I’m thinking of other ways this type of interactivity could be used to make learning more engaging.