Making It Move Again: Rebuilding a Flash Map in HTML5
Intended Audience: Web Developers, History Enthusiasts, Cartographers
Estimated Reading Time: 12 minutes
Live demo: webmaps.mikerandrup.com
In 2009, two students at the University of Wisconsin-Madison built an interactive animated map of the Dead Sea's changing water levels across five thousand years of history. A.D. Riddle and David Parker's project visualized geological and archaeological research spanning 3300 BCE to 2000 CE, plotting sea depth against a draggable timeline while crossfading between 29 distinct coastline images derived from topographic data. It won the animated category of the 2009 Student Web Mapping Competition sponsored by NACIS (North American Cartographic Information Society) and was featured in Cartographic Perspectives that fall.
It also never worked on a single iPhone. Apple's first smartphone shipped in 2007 without Flash support and Steve Jobs made it permanent in his 2010 open letter, "Thoughts on Flash." By November 2011, Adobe had abandoned Flash Player for all mobile browsers. The map was desktop-only from that point forward — and then the desktop died too. Chrome and Firefox began blocking Flash by default in 2019. Adobe ended all support on December 31, 2020 and started actively preventing Flash content from running twelve days later. By July 2021, Microsoft had removed Flash from Windows entirely via system update. Riddle's award-winning work went from groundbreaking to invisible.
An Egyptology Club in Dallas
I serve on the board of the North Texas chapter of ARCE (American Research Center in Egypt) in a technical, communications, and membership chair capacity. Our chapter hosts monthly lectures on topics ranging from pyramid construction to ancient trade routes. At a recent meeting featuring a talk on the Amarna Letters — diplomatic correspondence from the reign of Akhenaten that touched on Canaan and the broader Mediterranean — I got to talking with a fellow attendee. It came up organically that I have a deep background in HTML5 development. That attendee was A.D. Riddle, a professional credentialed cartographer whose specialty extends well beyond Egypt.
He told me about his old Flash maps. He sent me a .swf file. No source code — the original .fla project file was long gone. He hadn't touched the project in seventeen years and was candid about it: he had practically no memory of how any of it worked. He just knew his award-winning creation had been broken for a long time and that bothered him.
I told him I'd take a look.
Cracking Open a Seventeen-Year-Old Binary
A compiled .swf is a sealed artifact. All the data — historical depth measurements, coastline contour images, site coordinates, tooltip text — is locked inside the binary. Riddle later mentioned that he and Parker had originally tried to architect the map to read data dynamically, but ran out of time within the semester and ended up hard-coding each lake level to its specific year.
I happen to own a boxed copy of Adobe Creative Suite 5.5 Master Collection, purchased years ago. I installed Flash CS 5.5 from it that morning. It turned out to be entirely useless for this purpose — opening the .swf simply launched the built-in Flash Player and played the map back. It couldn't parse the binary or expose the internals. But at least I got to experience the map running, and it was clearly a project worth reviving.
The real extraction came from FFDEC (JPEXS Free Flash Decompiler), an open-source tool that can decompile .swf files into their constituent parts. Its command-line interface cracked the binary open and yielded everything:
- 29 coastline SVG layers (Extracted Vector Graphics, akin to the source Illustrator files) (labeled ds300 through ds436), each tracing the Dead Sea's shoreline at a different historical water level — at five-meter depth increments
- The full ActionScript source, including the 213-entry data arrays mapping years to depth layers, the site coordinate data for 14 archaeological sites and 5 reference cities, and the playback logic
- All bitmap assets: the terrain base map, splash screen photograph, cross-section valley profile, timeline graph background with pollen curve and period bands, button states, map pins, and the 1975 reference boundary
The ActionScript files Riddle had provided separately in his initial zip turned out to be just mc_tween, an animation easing library. The actual application data all came from FFDEC's decompilation.
Four Days, 118 Commits
With the data and assets in hand, the scope of a rebuild went from speculative to concrete. I chose React with TypeScript and Vite, deployed as a static site on AWS Amplify. The layout is a fixed 920×571 pixels — the original Flash dimensions — so Riddle can embed it via iframe on his existing website.
The architecture mirrors what Riddle and Parker built: three synchronized panels driven by a single index into a 213-point dataset. A yearIndex value from 0 to 212 maps to a calendar year (3300 BCE through 2000 CE), a depth layer identifier, and a normalized fill percentage. Change the index and the topographic map crossfades to the corresponding coastline, the cross-section diagram adjusts its water level, and the playhead moves along the timeline. CSS transitions handle the crossfades — the outgoing coastline layer fades out over two seconds while the incoming layer snaps in, matching the original GreenSock TweenLite timing.
The real work was hand tuning. The Flash editor had been a visual layout tool — Riddle and Parker dragged elements into position on a stage. I had extracted pixel data, not coordinates. Nearly a hundred UI elements needed to be positioned in code: 14 archaeological site markers, 5 reference city labels, era region boundaries on the timeline, the playhead track, the 30 cross-section water fill shapes, overlay toggles, and more.
To solve this, I built a Positioner component — a dev-mode tool that wraps any element in a draggable, resizable overlay with keyboard nudging. Toggle it on with a keystroke, drag things into place, and it logs the final coordinates to the console. It turned a tedious process into a manageable one and shipped with the app as a debugging aid for future work. Without it, placing elements accurately from extracted screenshots would have taken far longer than the build itself.
The project also got a mobile web treatment that the Flash original never had. A ScaledWrapper component dynamically resizes the fixed-width display to fit the viewport, and touch interactions allow scrubbing the timeline on phones and tablets — something Flash couldn't have delivered even when it was alive.
I sent Riddle a live URL before the end of Day 1 of an early draft. A project of this scope would not have been feasible in a few days without leaning heavily on an AI coding partner for the sheer volume of implementation work.
What's Next
Sometimes an old skill finds a new use. I've had a deep HTML5 background since the early days of the transition away from Flash — I wrote and spoke about it during the early 2010s. Thirteen years later, I'm literally doing the thing: taking a specific dead Flash artifact and making it move again in the browser.
The Dead Sea map was the immediate deliverable, but my primary interest is an interactive map of Egypt for the chapter website. I'd like to collaborate with Riddle on one that can be configured via URL parameters from the event calendar I built for NorthTexasARCE.org. When a member clicks through to learn about an upcoming lecture on the Amarna period (for example), the map would default to showing Amarna's location between Luxor and Memphis — instant geographic context for any talk the chapter hosts.
Live demo: webmaps.mikerandrup.com
Credits: Original map by A.D. Riddle and David Parker (2009). Data sources: Frumkin, Frumkin & Elitzur, Horowitz, Beitzel, NASA SRTM, UC Berkeley shapefiles, Dead Sea photo by Todd Bolen.