WWF – My World — Hello. My name is Václav Vančura.

WWF – My World

Year:

2011

Client:

disturb media

Tags:

actionscript disturb flash gui html/css javascript mysql php video webdesign

See it live at myworld.panda.org

I was glad to help London studio disturb media with a new World Wildlife Fund special 50th anniversary interactive site.

Please see the video below or click the “see it live” button above.

View on Vimeo

My tasks for this project were:

Geolocation engine (both IP- and WIFI-based geolocations are used)
Video asset loading and optimization
Facebook connect
Google Analytics AS3 wrapper
Remote logging wrapper
Localization system and automatic typography converter (English, Spanish and special Chinese versions)
Graphical user interface coding and animation (rendering library available on GitHub as Moderatrix and Emitor
Client map rendering and animation
Minor parts of UI design
Core organization (via signal flavoured RobotLegs MVC library)
Asset archive system
HTML + PHP + JS + CSS + MySQL (well actually everything)

Basically that means the whole site (except server map rendering) was done by me: client AND server. I love to make sites like this one, only when I do both client and server programming, I know what’s going on in any part of code and I am very sure the resulting code is top-notch.

Click the images below to view
full resolution screenshots.

Intro screen, the application is being loaded. Click the image to see the full resolution screenshot.

Room screen. Select the item you want to save. Click the image to see the full resolution screenshot.

Geolocation engine successfully detected user’s position and it’s displayed now. Click the image to see the full resolution screenshot.

The flight animation in progress. Click the image to see the full resolution screenshot.

The user is going to make a pledge now. Click the image to see the full resolution screenshot.

This is the user’s last journey, displayed on the world map from their actual position to the pledge destination. Click the image to see the full resolution screenshot.