classicgtasites.com
Original Medium article
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.
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. Annoying or repetitive interactions
Great example of this would be Grand Theft Auto IV’s website, where every time the user clicks on a map blip, a new screen loads containing usually only a video and/or image.
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
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.