Learn About Fireflies
An interactive course with revealing information about fireflies.
Audience
Youth to adults
Tools
Articulate Storyline, Photoshop
Responsibilities
Research, Mockup, Instructional Design, eLearning Development, Visual Design
Overview
This e-Learning project began with the idea of using an interactive slider to activate overlapping motion paths. Fireflies were an excellent fit for the project for the animations, and I was able bring them to life with a night sky backdrop and some neon icons.
Each firefly has its own layer and a continuously looped path that is automatically triggered by the slider. The slider variable is used to toggle the textboxes from hidden to visible.
The firefly content was compiled and written from a variety of researched sources.
Challenges
Slider Feel
A challenge of this project was adjusting the slider to respond in a way that felt natural without counterintuitive macro or micro motions. To solve this, the slider value range is set to 0-50, with 2 step increments, and stops on the 10s, instead of staying with a 1-5 value range which made large jumps.
Background Sound
Another challenge was to create the appropriate atmosphere using a looped ambient night sound. Fortunately, I found a free sound effect that fit but was too loud, so I reduced the volume within Storyline several times to soften it out. I also created a Sound On/Off button to instantly mute the sound.
Firefly Movement
I drew the motion paths by hand in the hopes that the fireflies would make convincing movements on the turns. When I set them to follow the motion paths, the fireflies twitched on all the jagged points of the path. I liked this effect, so I kept it.
Lighting Effect
I wanted the final slide to show how cumulative light pollution harms fireflies. To illustrate this, I made the text and fireflies become less visible as the lights get brighter. Similar to how the fireflies' light communications are being disrupted. These effects were achieved by casting yellow shadows from the light bulb icons. Unfortunately, the icons contained so many grouped elements that their transitions were causing computers to process their animations slowly. I was able to reduce the processing load by pasting the icon group into Photoshop and then creating a single transparent graphic.
Future
I would love to continue this work highlighting other insects or larger animalia. I have a lot more ideas for creating interesting environments and animating objects.