Motion paths, triggers and Pantone’s 2017 Colour of the Year

2016-12-30_16-06-36
Click on the image above to view the demo

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.

Picture6.png

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.

collage.png

Firstly, I inserted the character into Storyline, then saved the image as a .wmf.

screenshot-15

I then inserted the .wmf file into PowerPoint and ungrouped the .wmf image (Ctrl + Shift + G).

collage2

I then needed to delete a couple of shapes that appeared around the neck of each of these characters.

2016-12-30_18-55-01

I selected all pieces of the image and removed the outlines – removing the outlines makes the image much easier to re-colour.

nooutline

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.

collage5

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.)

Picture5.png

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).

The Result

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.

2 thoughts on “Motion paths, triggers and Pantone’s 2017 Colour of the Year

  1. I really really like the balloons and the background noise. This is a very classy screen Dianne. I’m thinking of where I could use the method. Instead of balloons, I have money, $100 bills. They fly around the screen and the learner can click on them to reveal a question or a note.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s