I recreated my favorite Flash websites in HTML5

Before Adobe ceases Flash support later this year, I remade all of the popular Flash-based Grand Theft Auto promotional websites using modern technologies.


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 original Flash site compared to the HTML5 recreation / classicgtasites.com/III
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 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 original Flash site compared to the HTML5 recreation / classicgtasites.com/libertycitystories
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 original Flash site compared to the HTML5 recreation / classicgtasites.com/IV
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:

Obviously the original Flash websites were designed for the common screen resolutions back in the early 2000s (800x600 and 1024x768), which makes the elements very small when viewed on modern screens. The first step was to make the main elements bigger and more visible.

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)

I highly recommend browsing these websites on a PC or laptop with a mouse to get the best experience, but given HTML5's ability to run on mobile devices, you can browse them on your phone or tablet too (on landscape mode that is).

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. Design choices and other minor changes

Lastly, while I tried my best to recreate the original sites, my skills as a web developer are limited, so I had to make a few design changes on elements I couldn’t recreate or simply because they were too time-consuming to make considering the final result.

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

If you ever tried to ‘inspect’ a Flash website, you may realize it’s not possible, at least not in the common way of right-clicking an element. You will have to inspect the whole website through Developer Tools and look for .SWF elements to download and open in your computer. Then you can use a decompiler to see and open 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

Adobe Flash is dying this year, but not everything is lost. First of all, remember you can always open .SWF, .FLV and other Flash based files with the official Adobe Flash projector, a very lightweight executable that you can download for free and works on Windows and Mac.

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.



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