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…

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:

• Layer visibility management
• Interactive layer palette
• Fullscreen mode
• Scrollwheel support
• Custom printable view
• Full OOP (30+ classes and sub-classes)
• Vector only GUI (full use of flash effects and filters)

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 doesn’t need an introduction. Thanks to sites like YouTube, Flash 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 Flash Video 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.

I created both design and animations for the videos. These were produced in Flash and exported as videos.

2007 Holiday card

Every year, like clockwork, someone at STC realizes its December and we need a holiday card. For the past 3 years we actually had time (meaning 3 to 5 days) to produce some nice interactive versions.

In 2005 we created a little match game.

In 2006 I applied the concept developed for print of making new faces from cutouts of the STC employees headshots.

For 2007 I just developed an interactive 3D version of the printed card. The card was a cube with the top and bottom open. Inside were everyone’s at STC signature. Outside were the employees making the letters of the card’s words… Hard to explain, just check out the actual flash

This last one was my first serious project using PV3D (Papervision). It also uses some of the new AS3 APIs like sound spectrum. Aside a few annoyances of Flash 9, a fun project.

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.

Banner 120×600

Banner 336×280

Banner 728×90

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.

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 homepage design comp

For this project (developed through Cyber Sytes) I was contracted to design the site and create all the flash elements. Including a brochure application using a flip book effect. The brochure used a dynamic back-end and an XML layer to carry data to and from Flash. Created to be flexible this book is still online today. It generates revenues via ad placements.

Functionality included: Search/Filter, bookmark and custom printing of listings. Coded in AS2 the application uses OOP and Classes to manage elements and ensure modularity. At the time this was one of the most complex application I had created.

Click here to view the brochure application.

The site’s homepage design has been changed from the original one I created (see comps below).

Eimers Group Neighborhoods Page

For this site I was contracted by Cyber Sytes to produce all of the main flash elements. The header/navigation portion of the page and an interactive neighborhood map. This was to be the first of many interactive maps I would create. I was brought into the team as a flash developer only. Design (including the map and GUI) was done by Eric from CYSY. I only produced and coded the flash.

Visit the Eimers Group’s site

The map application uses XML as its data source. Including the dots (or locations) name, kind, positioning, link, etc… We included a debug or back-end version of the flash to help the crew at Eimers add the position of a new location. Functionality includes filtering of the data and jump to a specific neighborhood. Control of the map mimics those of most map apps: Pan, Zoom and an interactive preview of the current visible area. The actual map application came out at around 40kb. The map’s background (under 100kb) and XML data (variable) are external.

Click here to see the interactive neighborhood map