Football Fan Club Animated Website

Web Design     OCTOBER 22, 2006    

In entertainment industry one of the important requirements is to keep the audience entertained at all time to avoid boredom. When it comes to entertainment websites, this basic requirement becomes a challenge as the graphical and visual effects were not fully compatible with the existing web technologies and due to their heavy file sizes, loading the website over dialup or basic internet was going to take a long time and obviously the audience may not wait long time to get entertained.

In designing the football fan club website the challenge was to come up with various of techniques to make the website interactive and entertaining while keep the overall size as minimum as possible. One of the most promising web technologies at the time was the Adobe Flash which allow the designers and developers to bring the graphical and audio files together in order to increase the attraction and creation of a unique website.

The issue was that the components of the website has to load in order to display and run the animation sequences. With using the techniques to dynamically load the contents as required in the sequence, we have solved the issue of loading all components and loading time. In this technique, the website designed without any graphical objects and load the assets externally on demand which reduce the main site size and load the contents as needed.

Also to reduce the content sizes all the graphical objects were compressed using the JPEG compression methods to reduce the file size while preserving the image quality and using the MP3 compression algorithms to minimize the audio files and sound effects. Using these compressions the file size of the images were reduced from 100-120Kb to 30-40Kb per files and the audio files from 500-800Kb to 100kb.

After Adobe added the Unicode support to Flash, we were able to even load the text contents dynamically from text files written manually or generated by the website backend system.


window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q027PK392X');