HTML5 Portfolio: Marktropolis

Posted 25th April 2017
Marktropolis is an interactive online experience which I originally developed in Flash way back in 2010 to showcase a wide variety of my skills.
It was based on the story-based dynamic of the 1992 software Johnny Castaway; with 25 key time animated events that were carefully planned and animated by myself to play out at a considered pace for adding depth and variety such as: a police chase, different traffic streams, a runaway balloon and many more. And I also developed 4 different interactive scenes that could be visited around the city.
A script was also used for loading the city from a different point on each return visit, so as to give an impression that the city was actually a living breathing entity which was moving through its daily cycles.
The original animation for the main hub included a moving sky, shadow effects, moving traffic in the background, animated leaves on the bushes, and much more.
View a video demo of the original experience below:
Despite the complexity of this project I was able to ensure rapid load times by condensing the entire experience, without sacrifice of quality, into the smallest sizes possible. (one megabyte total so that the original experience would load without too much delay for dial-up modems.)
After Flash was phased out, I eventually redeveloped the entire project from the ground up as a cross platform responsive HTML5 experience, with a caveat being that the animation had to be reduced for mobile optimisation.
Clickable links around the main city hub provide navigation to four themed interactive galleries featuring a selection of my work.
The gallery featuring my illustrated work is an office scene with icons that pop up to a larger view, blinking lights, and steam slowly rising from a hot beverage.
The gallery featuring my design work is a street scene featuring a motorised billboard, with graffiti left and right buttons which trigger the clunky kind of "chk chk chk" motion/sounds synonymous with these displays.
The gallery featuring my animation work is a cinema scene through which different videos can be loaded.
The gallery featuring my photography work is a 3d isometric gallery, which can be rotated whilst ambient music plays in the background.
The current HTML5 experience can be viewed by clicking the link below; although note that it will open in the same window and without the main website menu, so simply click the green street sign to return when finished - Visit Marktropolis
The original Flash animated version of Marktropolis was nominated for the CSS design awards in 2014 - link
Mark Nathan Willetts is a creative entrepreneur from Nottingham, England. His artistic work has been exhibited internationally. And he has worked as an educator and senior editor at companies such as Experian and Velawoods.
"We must continually grow until our ideas converge for a better future"
- Mark Nathan Willetts