2fish Website

Flash Website

Tasks: Concept, Design, Animation, Development In 2009, I created this website for the 2fish brand experience company. This makes it a really old project in a technology that no longer exists - but it’s still one I’m proud of.

The client needed a website that would allow users to access standard information about 2fish as a company, browse examples of their work, as well act as a living example of the out-of-the box brand experiences the company offered to others.

I designed the website to be a mini world that a character would explore in the background while the user accessed information. It was designed to be reasonably ambient while still grabbing the users attention at times.

The character (internally names Axel), explores the world autonomously - only reacting to user behaviour on changing pages, or occasionally looking at their cursor. For the users looking for more interactivity, various aspects like the trees, clouds and fish offer playful surprises.

The surface of the water was animated dynamically with code. I found this to be easier than manually animating the water to look random without obvious tiling or repetition. I later considered screen-recording the water animation and including that instead to optimise CPU usage, however, this wasn’t implemented. The CPU usage proved not problematic while screen recording created a number of other limitations such as seamlessly tiling and that creating a pixel-based image would limit adaptability to various screen sizes.

The bubbled underwater were also produced through code. I wrote a class that could be applied to any Movieclip instance and cause it to randomly spawn bubbles. A similar class was also attached to Axel whenever he was under water which also responded to Axel’s speed of movement - If he swam fast, he created more bubbles.

The site was built on top of WordPress so that the client could update all text content easily. The content was then pulled in using WordPress APIs and populated within the world.

Deep linking of the site was also implemented so that the URL would update as each section of the site was accessed. This involved careful loading management to ensure that Axel would parachute in, but not dive to the relevant page until it was loaded. If the website was already loaded, changing the URL or clicking the back and forward browser buttons would recognise this and, rather than reloading the page, simply animate Axel swimming to the relevant section.

This animated GIFs above give a small low res preview of the animation, however, the video below showcases the user’s experience more accurately while also demonstrating certain technical aspects.