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.
4 clickable links around the main city hub, indicated by stars in red circles, provide navigation to themed zones where my work can be accessed through multimedia experiences as described in the list below.
  • Illustrated work can be accessed via my computer, with blinking lights, the actual time on the monitor, and steam rising from my cup
  • Design work can be accessed via a street advertising billboard, with the left and right motions controlled via two graffiti arrows
  • Animated work can be played directly in my movie theatre
  • Photography work can be viewed in my art gallery, which can be panned around in 3D
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