This week’s eLearning challenge was all about drop-down effects. Drop-downs definitely make sense for navigation, but I was really attracted to the personalization possibilities of including drop-downs in a project. I originally thought of drop-downs as a way to build an avatar for the learner, but this would have required a large number of options (gender, hair color, eye color, etc.) Then I considered a snowman builder, and finally settled on something that looks similar: an ice cream sundae. This offered a manageable number of customization and it’s pretty fun.
The Method
To start with, I created the ice cream sundae in PowerPoint. The key to making it all work (and verifying that it would still look ok if some of the layers were missing) was the Selection Pane. This lets you hide objects without needing to move them out of the way. This functionality exists in Storyline, but I think it’s pretty easy to miss in PowerPoint if you don’t know it exists. You can see in the image below I have an object called “Background”. That isn’t the blue background on the slide; it’s actually a rectangle with no outline and no fill that’s bigger than the entire sundae.
When I needed to export individual components (like the cherry), exporting the rectangle and the cherry together ensured that the cherry would end up in the correct position. All of the images I exported were the exact same dimensions using that little trick.
Once I had the individual components, I was ready to start building. Most of the objects were placed on the base layer. I made three drop-down fields and two checkboxes. If you take a look at the .story file linked at the bottom of the page, you can see that I actually built the checkboxes myself. That was entirely due to a brain fart where I forgot Storyline provides checkboxes.
To display the drop-down options, I created three layers. The layers had rectangles for the options within a drop-down, as well as another rectangle with a “drop-up” symbol. When a drop-down option is clicked, it does three things:
- Hide the slide layer
- Change the state of the corresponding sundae component on the base layer
- Change the state of the corresponding label on the base layer so you can see what has been selected
Back on the base layer, this is what it looks like:
The ice cream, sauces, and toppings have different states corresponding to the different options. The whipped cream and cherry only have one state each, but are hidden by default. Checking the checkbox changes their states to normal. Keeping up with proper labeling will make sorting out the triggers much easier.
The Result
Click here to see the full interaction.
Click to download the .story file and or the .ppt file if you’d like to customize the sundae options yourself.
0 Comments