This is v2 of the Gringo website. After the successful Middle Finger Pub , it was time for Gringo to showcase it’s portfolio. We’ve decided on a simple interface, a basic timeline of projects. Each project’s detail page features a small demo of the project, mostly a condensed look and feel for each site. I was responsible for the main timeline view and the mini-api to load and communicate with all the internal demos.
A few people saw this as a rip off of Apple’s signature animation. The truth is that at gringo we are all happy mac users, and it’s becoming a tradition for each one of our websites to pay a tribute to a OSX visual feature. The first version of Gringo’s website, the Middle Finger Pub mimics the genie effect. This one had the challenge to recreate Apple’s cube within the flash player.
Technically it was quite challenging as the website allows for a resizable stage and the cube takes the entire stage area. Making the flash player 8 render a full screen real time distortion of those images wasn’t easy.
While a demo loads, other demos are marked as unfocused by a subtle but powerful effect: de-saturation. Thanks to flash 8’s ColorMatrix, and Tweener it was a breeze to implement.
This was my first commercial project using Zeh’s excellent Tweener library. A set of classes for doing animation, Tweener is incredibly powerful and versatile, with great api by Zeh. I could ramble on Tweener’s merit for hours but that deserves an entire post to itself. Look for Tweener making a big splash in the near future.
Almost at launch, we hit a bug on the flash player that would make the browser crash on Internet Explorer. It was a very specific bug, affecting only the ie active-x control and revisions 8.33 and earlier. It took us some time to track it down, and it’s pretty uncommon for flash development to check carefully for different player versions on a specific platform. In the end we decided on simple requiring the flash player 9, since that version was not susceptible to this crash, but the whole site was coded for flash 8.
Since most of our work is flash centric, we had to figure out a way to keep an up to date HTML version of the website that would simple follow along the flash version. I hacked a python script that transforms the website’s xml data and outputs a HTML version for search engines and those rare visitors with no flash player. The HTML versions, while very simple, respect the general look of the website . Python is such a beautiful language and with so many powerful libraries that reading the xml, parsing, copying all needed images and writing for two different languages was achieved in less than 50 lines of code.
The website was featured on the FWA on January the 17th.