Why I recreated my favorite Flash websites in HTML5.

Before Adobe ceases Flash support later this year, I remade all of the popular Flash-based GTA websites.

Grand Theft Auto Flash Websites recreated in HTML5
Grand Theft Auto Flash Websites recreated in HTML5
https://classicgtasites.com/

The Grand Theft Auto series was a part of my childhood ever since I first discovered Vice City in 2002, and although my fondest memories are from playing the games themselves, I‘ll always remember Rockstar’s approach to promoting them through manuals that were actually city guides and websites that took a deep look into each game’s characters and locations, fully immersing the player in the world they had created.

When I became a web designer back in 2018, Adobe had previously revealed their plans to kill Flash, which was already dead given its lack of mobile compatibility since the release of the original iPhone.

I was about to lose a place where I had spent countless hours as a child before I could even play those games, so I thought about recreating each website with modern technologies to save them from disappearing.

Rockstar Games has not made any statement regarding what will happen to these websites, but I assume they will just let the Flash content die and keep the HTML side accessible. I shared with them this project, but got no response as expected.

So, in October 2019 I started this personal project to preserve the classic Grand Theft Auto Flash websites, using HTML5, CSS3 and JavaScript aiming to recreate their original counterparts as close as possible.

Grand Theft Auto III Flash Website
Grand Theft Auto III Flash Website
Grand Theft Auto III original Flash site compared to the HTML5 recreation / classicgtasites.com/III
Grand Theft Auto Vice City Flash Website
Grand Theft Auto Vice City Flash Website
Grand Theft Auto Vice City original Flash site compared to the HTML5 recreation / classicgtasites.com/vicecity
Grand Theft Auto San Andreas Flash Website
Grand Theft Auto San Andreas Flash Website
Grand Theft Auto San Andreas original Flash site compared to the HTML5 recreation / classicgtasites.com/sanandreas
Grand Theft Auto Liberty City Stories Flash Website
Grand Theft Auto Liberty City Stories Flash Website
Grand Theft Auto Liberty City Stories original Flash site compared to the HTML5 recreation / classicgtasites.com/libertycitystories
Grand Theft Auto Vice City Stories Flash Website
Grand Theft Auto Vice City Stories Flash Website
Grand Theft Auto Liberty City Stories original Flash site compared to the HTML5 recreation / classicgtasites.com/vicecitystories
Grand Theft Auto IV Flash Website
Grand Theft Auto IV Flash Website
Grand Theft Auto IV original Flash site compared to the HTML5 recreation / classicgtasites.com/IV
The Warriors Flash Website
The Warriors Flash Website
As a bonus, I also remade The Warriors Flash website in HTML5, CSS and JavaScript / thewarriorsgame.com

As you can see, there are some changes between both versions, which were made for a few reasons:

1. Size of the elements:

Additionally, irrelevant elements were removed like brand names and legal texts. The HTML parts of the original website (NEWS, SCREENS, MOVIES sections, etc.) were not added in these recreations since they will still be accessible after Flash is not supported. I wanted a cleaner version of each website, focusing on the soon to be defunct Flash content.

2. Mobile-friendly(ish)

Adobe Flash websites were entirely designed around the idea of the user interacting with various elements using the mouse (and sometimes keyboard), which makes the translation to touch screens a bit difficult given the less accurate pointing device we use on those -our finger-, and the amount of small interactive elements present.

Touch screen availability also means losing the very common rollover (or hover) effect used in all of these websites. That means when we touch an element it will behave as if we clicked it, but sometimes we’ll miss a key interaction by doing this. The only workaround found is to hold the finger over an element for a brief second to simulate a mouse rollover.

3. Annoying or repetitive interactions

This was considered too repetitive to use and therefore replaced. Now the user only has to hover over an element to display its content and then click to interact, no back and forth between screens which saves time in such a content-heavy website.

4. Design choices and other minor changes

Things like transitions between features (which are actually vectors in the Flash sites but only static images in these recreations) and minor interactions with elements were left behind given the work it would require to fully recreate them.

Adding to this, I chose to keep some sounds that play automatically when interacting with elements at the cost of slightly annoying the user (sorry).

Obtaining the assets

But it’s not as simple as that, sometimes those elements don’t really have what you are looking for, like audio or video files that are not there until you interact with whatever triggers them.

To get those elements, you will have to open the ‘Network’ tab on your Developer Tools (Chrome) and there you will be able to see and download all the assets that you’ve triggered so far inside the .SWF file you are viewing.

It’s a bit of an intricate and tiresome process, but you will be able to grab every asset from a Flash website this way, and convert them to modern formats for the web. For example .FLV files can be converted to .MP3 and .MP4.

Final thoughts

Much like me, other web developers around the globe have created projects to preserve Adobe Flash content. If Flash games were a part of your childhood you can check out BlueMaxima’s Flashpoint, and if you remember a specific website fondly you can head to the Web Design Museum which has a huge collection of Flash-based websites from 1991 to 2006 and where anyone can submit suggestions to expand it.

Thank you for reading this article and hopefully checking out my project too. As much as Adobe Flash had its flaws, it will forever be a part of Internet history that we must remember and if possible, preserve.

Image for post
Image for post

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store