Portfolio: Dig It! The Secrets of Soil

Background

In 2018, the National Museum of Natural History, part of the Smithsonian Institution, was concerned with the upcoming sunset of Flash Player. They had several online exhibits featuring activities built using Flash which had already stopped working on a large number of devices and were displaying deprecation warnings and click-through barriers on others. One of these is Dig It! The Secrets of Soil, which has seven interactive pages detailing classifications, compositions, locations, and ecological implications of different ground across the United States.

Interface Media Group is well-known in DC for its expertise on storytelling, both in the political arena and in the realm of museums. Having heard of IMG's video expertise, Natural History asked the company if there was a way to preserve the activities, memorializing all the content from each into video that could be streamed online. As the company's expert on Flash and ActionScript, I was asked to investigate and see if there was a way we could automate the process or potentially add more value.

The museum wanted us to start with three of the seven activities they thought were relatively simple: "State Soil Interactive", describing the different kinds of soil commonly found in each state and offering short interviews with various geologists, "Where in the Soil World?", which asks guests to identify the origin of three (essentially) core samples, and "The Big Picture", a short quiz with randomized questions about soil trivia and additional trivia as rewards for answering the questions successfully. "State Soil" and "The Big Picture" offer HTML versions of the activities, while "Where in the World?" is only available in Flash.

My Role

With the sunset of Flash has come the sunrise of HTML5, including advanced CSS transformations, responsive design, multimedia and animation, and drawing 2D and 3D primitives directly onto a canvas, replacing substantially all the major use cases for Flash. I proposed we update the HTML versions of "State Soil" and "The Big Picture" to take advantage of these new capabilities, as well as add an HTML version of "Where in the World?" The sales team was having difficulty envisioning the results, so I rebuilt one to help drive expectations and cost estimates for the remainder.

"State Soil"'s position as an animated presentation of essentially static, business-style data was the easiest to port -- as well as the most content -- so I wrote a script to export all the graphics and data that were available in the HTML version. The Flash version has the same overall presentation, but has a skew transform and hover effects on the list of states on the main menu, and animated transitions to all the selections. The Flash version also embeds all of the content for all of the states and geologists in the main file, while the HTML version has them as separate ASP.NET pages.

After collecting all the data available from the HTML version -- the geologist section and original credits were missing from Smithsonian's servers -- I rebuilt all the effects from the Flash version in HTML5. I also implemented progressive loading, so after the main menu loads it loads each state in the background, as well as allowing states clicked on from the main menu to "cut the line" and load immediately. Due to time constraints I didn't implement the geologist section, as I was not able to extract assets from the Flash version. Aside from that, the result was indistinguishable.

While I didn't actually implement the other two interactives, I proposed what steps I would take to accomplish porting them to HTML5, including using client-side scripting and local storage for the trivia quiz instead of ASP.NET ViewState, and using HTML5 Canvas animations for the ID quiz.

Fate

Natural History ultimately did not revamp or convert the Dig It! activities due to budget constraints, and they remain online today in their original form.