This week’s Articulate ELH Challenge is to create an interaction using Pantone’s color of the year for 2017, and since I already wanted to do a catch-up challenge about working with dials I made it a two-fer.
Greenery makes me think of the green anoles here in South Carolina. They change color to match their surroundings, but it turns out the chameleon has a larger color spectrum than the anole.
So I decided to make an interaction where your challenge is to match a chameleon’s color to his background (in this case Greenery) using dials to adjust the RGB levels.
Creating a 3-dial RGB interaction took some work, but figuring out how to build it in Storyline 360 was a piece of cake.
Simplicity was the goal, with the word “Greenery” and the color itself always prominent. I didn’t want there to be anything you’d have to click on or find. The instructions are simple and on-screen, and the only action you have to take is to adjust the dials, which are the functional focus.
I also wanted the chameleon to have a little personality. It’s more fun changing a guy’s color if he’s cute and staring right at you. I purchased a vector line drawing of a chameleon and used Fireworks to change his colors.
If I’d realized there were over 16 million possible RGB combinations I’d have started working on this awhile back. Fortunately I didn’t need that many combinations to convey the sense of exploration I was after. I settled on five dial stops for each color, all starting at 0 and ending at 255 with three uniform stops in between. That meant I only had to create 125 chameleons for all possible dial combinations. (Gulp.)
The only way to keep the color combinations straight as I created chameleons and dial triggers was to organize them in a spreadsheet. Nothing but love for a good spreadsheet.
I added some background birds to set the scene, but what brings the interaction to life is the actual goal: Having fly for dinner. To emphasize that, you see and hear him buzz in as the chameleon’s motivation is revealed at the beginning, and again when it’s dinnertime. Dan Sweigert graciously volunteered to impersonate the dining chameleon delivering the coup de gras. (Sorry, little fly.)
Ready for Some Greenery?
See More Pantone Challenges!
This is actually the fourth Pantone color of the year interaction I’ve done for the challenges. Here are the others: