THE IDEA: I’ve racked my brain for a few days trying to think of an everyday application with lots of buttons that I could recreate for Challenge #89-Creative Button Effects. For some reason, a drive-through restaurant came to mind… so many options to choose from. I locked onto the idea of creating different button shapes for each category of food, although experimenting with different Hover and Visited states for each individual button.
THE TECHNICAL SIDE: I set up the menu in Articulate Storyline as a single slide with 7 slide layers:
- Main Dish buttons
- Side Dish buttons
- Desserts buttons
- Veggies pop-up (see the Troubleshooting section)
- Thank you
Each of the buttons has a Normal state, a Hover state, and a Selected state. I added the icon and text label on the Normal state, so the graphic would act as a group. I downloaded the icons from flaticon.com, which is definitely a new favorite resource.
Of course if I was creating these buttons on a more traditional module, I would use a more consistent style on all the buttons, but I tried to take advantage of the chance to play with different style treatments: pop-ups, color changes, 3d shadows, etc.
Between the last week’s challenge and this one, I learned how to create a transparent player, so that the module seems to float on a white background. I really like this clean look, especially when there is no need for the Next/Previous buttons or the Resources link.
TROUBLESHOOTING: Although I was already familiar with the functionality of States in Articulate Storyline, this was an excellent opportunity to really explore how to use them as well as to brainstorm button graphics.
The biggest headache I ran into was that sometimes the states seemed to overlap each other in ways that I couldn’t figure out. The graphics of the “Visited” state sometimes behind the “Hover” state. This seems to be a common problem (as noted in this discussion on the e-Learning Heroes Community) for other users as well. I was able to solve this issue for a several of the buttons, but others I never could. Instead I figured out how to adjust the design to work within the limitations of the software.
I also ran into an issue with the “Fresh Veggies” Hover state. Because the pop-up bubble overlaps the shapes on the Main Dishes layer, it sometimes hid behind those graphics, depending on the order in which you opened the layers. (I’ve actually run into this issue before when it was impossible to order the shapes on the timeline to avoid this unwanted effect.) The workaround I discovered today was to place the pop-up shape on a new layer and add an object trigger to “Show layer … when the user hovers the mouse over.”
Like many of the other submissions for this challenge, I attempted to animate some of my button states. However, I quickly realized that I was somewhat limited by the animations available in the original Storyline software (as opposed to Storyline 2). I was able to make the animations work seamlessly for the “Pizza,” “Fruit Salad,” and “Ice Cream” buttons, while I really wished for the ability to use a “Wipe” animation for several of the others.
TAKING IT ONE STEP FURTHER: This challenge was mostly about creating custom buttons, but as I read several of the resource links, I was also intrigued by the ability to add more functionality to the buttons.
- Because my menu was divided into categories, I used button sets to force the user to select only one option per category. (tutorial on Adding Button Sets)
- I used the Disabled state and added four variables (MainDish, SideItem, Dessert, and PlaceOrder) to force the user to choose a main dish and side item before “unlocking” the dessert options. (similar tutorial on How to Disable the Next Button Until Learners Finish Interacting with a Slide, although my scenario was a bit more complex since I was working with my custom buttons on multiple layers)