Tokyo Starfish likes Chad...
Happy Birthday Chadster!
Chad and I have been trying to create his site for a looooooong time. I know we will eventually get it done… In the mean time I wanted to post some of the beta tests:
Old Beta: AS2. Neat little slide mechanism for the sections.
Latest Beta: AS3, Away3D…
Detail of TCL's 2008 MPLS Service Map
In this post I wanted to explore the evolution of the network and services maps I created for VSNL International and Tata Communications (TCL) over the years. I covered the interactive version in a previous post. The static maps were a huge undertaking. Up to the beginning of 2008, I was more or less designing and maintaining all these maps for the client.
Detail of the 2005 Global Footprint map
3D Stacks created in Illustrator...
Aside being the resident Flash & Map guy at STC, one of my main task was business illustrations… Cleaning up Powerpoint Illustrations to make them shiny and pretty. I actually started doing all the re-makes in Illustrator and gradually extracted icons and elements to use directly in Powerpoint. I tried as much as possible to add depth to otherwise pretty borring stuff. Illustrator’s 3D capability was a huge time saver.
I helped develop an icon library that is still used to quickly create illustrations. Using vector art allowed us to use illustrations for print, web, PDF and Powerpoint distribution. It also allowed me to quickly port items or entire illustrations to flash for animation.
Below are samples of some of VSNL International’s illustrations (now TATA Communications) I created.
Interactive map for TATA Communications
This post actually covers a project that spanned over the past three years, culminating last February with the launch of the TATA Communications brand. Started as the VSNL International network map, this application grew to various connectivity and services maps. I was responsible for the design and production of the Illustrator maps but also their porting to flash and development of an interactive application.
The creation of the maps was in itself a huge undertaking. Especially as the network grew in size and complexity. A lot of time was spent researching the data. I created all the icons, services and data structure. For three years I was dubbed “Mr. Map” as I created or updated all the major maps used by the organization.
For the launch of TATA Communications I redesigned all the maps and also rewrote the original application from the ground up. The new version uses OOP and is more manageable. All the data is external (maps, layer data, configuration, etc…) The 2008 version included the following new functionality:
The actual application (GUI & code) is only 44kb. The Most complex map came in at 100kb. Pretty amazing
View the interactive Global Footprint Map.
The interactive maps can be accessed from the Our Network page.
A little experiment with a 3D map chooser…
Below are samples of the static map designed for this project.
Detail of the GUI
Flash Video (or FLV) doesn’t need an introduction. Thanks to sites like youTube, FLV is the de facto solution for deploying videos online. On top of leveraging the Flash player install base it offers excellent scripting to allow for interactive video applications.
Globalnumberportability.org’s flash demo uses FLV and incorporates a navigation and close captioning to synch the text with the animation. It also includes navigation controls to jump to a specific section. It uses an XML playlist that also include the copy for captions and cue points info.
The TATA Communications main homepage flash also incorporates FLVs.
Hand drawing animation
Based on designs by Laurent, I created these flash banner ads. I added the animated hand that draws content on screen. Although not an original idea, I thought it would work well with the hand drawn design. This was good old keyframe flash animation… All the effects (shadows, blurs, etc…) are using internal flash filters to deliver files below the 25kb allowed.
S&D were so happy with the banners that they asked us to produce a version for the homepage of the site. That one also uses local connect to allow the body and header flash movies to communicate and play in synch.
These ad banners ran for about a month on Forbes.com.
Close up of the navigation bar
As requests for flash based presentation grew at STC, I developed a simple platform to quickly create and manage them. Each presentation uses a simple XML data structure to update the presentation’s config, sections and slides. The slides could be of 3 types: static, animated or stepped. Stepped would allow to use the main navigation to control the timeline in a loaded SWF file. This presentation system was used with several clients for standalone presentations or web delivery. We even used it to power STC’s new biz presentations.
Below are some screenshots of the customized presentations.
Closup of the 3D render...
It was nice to walk into the Singapore office of then VSNL International and seeing the wallpaper I had designed on everyone’s desktop…
I actually don’t like to have a background (other then a solid grey or black on my desktop(s)) but clients love them. They help remind people who they work for and/or that they are on the wrong floor or wrong office. Just kidding. When rolling out a new brand it’s a good way to surprise people. IT can update everyone’s desktop overnight.
Photoshop fun.. Unused :(
As STC expended to Singapore, we were asked by a local non-profit to create elements to support their effort. This included evites, a small site, events support, etc…
For the site we used my slidy navigation script I had developed for my friend Chad’s site.
I also used my simple Z order script to develop animations to play on LCD TVs during various events. Another test using this simple z depth implementation.
Detail of the new GUI
As part of the exploration process for re-branding Broadstreet Digital (BSD), I was tasked with updating the GUI of their platform. As far as I know this was never implemented internally by BSD’s IT team. The key here was to try to respect the original elements to allow for a quick and easy production of the new GUI. I tried to isolate and match the original images and re-skin existing elements as much as possible. I also tried to allow for most of the update to be CSS based.
