New Homepage Flash Animated Banner

As part of the new S&D branding and website, I was to produce a new banner loader along with the banners. The usual tricks (XML driven, using external assets, etc…)

I did experiment a bit with duplications (see here for a great tutorial from Lee Brimelow). I stated to use the Natzke like animation but ended up writing a custom animation class that uses Tweener and its special Bezier modifier. I will post some of these experiments soon.

New Switch & Data Homepage

Complience 2008 Flash Animation

Back in October, I was tasked with animating this banner. It was a nice return to basic keyframe animation, away from pure AS3 coding! I only wish I could have used the new Bones feature of CS4/FP10…

Compliance 08 Microsite

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…

Homepage 3D Flash

I have been working with Dave, Art Director at STC, for over 9 years. So by now we more or less share one brain. For the knappogue homepage he showed me a sketch via webcam and I knew what where we were heading. 3D Baby! And what is even better then 3D modeling/rendering? Real time interactive 3D. Now that’s magic. Ever since Flash 5 human beings have been doing 3D flash content, although at times more 3Dish. But with Flash 9 & AS3, faster CPUs and open source APIs like PV3D or Away3D it has become a new avenue for designer/developers like me. For this particular case I used Away3D. Main reasons: clean API, easy to extend and straight forward mouse interactions. The concept is simple: a fold out postcard set. Its all custom built. I had to dig deep inside the API to get it where I needed.

Check out the 3D postcards (after the age verification)

Project details:

• AS3
• Uses Away3D, Tweener and Bulkloader APIs
• external XML data and assets
• Click hot zones (to flip postcards, close them or for more info link) are set in the XM data
• Dynamic reflections
• OOP: extended several classes (like Plane to create a new Postcard3D class). Custom events and event dispatchers.

Special thanks to Rob and the Away3D team.

PS: Can someone (Jorge or Andrew) implement the latest version of the flash… It has a way cooler intro animation, proper preload display and many tweaks…

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

The creation of the maps was a tedious but challenging task. It first required a lot of research to gather the core data. Then started the process of designing all the elements that would make up the map (icons, line styles, colors, fonts, architecture of data, etc…) Putting it all together in Illustrator required a few hundred hours.

The first version of the network map reflected the concept of Global Business Pathway. Used in the branding of VSNL International. The Pathway sphere was a container for the services icons for a location (see Tokyo in the illustration below.)

Close up of the complex connectivity to Japan

VSNL International re-branded in 2006, the Global business Pathway was dropped. I designed a new visual style for most of the elements. More modern and streamlined. The network and services had expanded following the acquisition of Teleglobe. The new visual style needed to account for the increase in complexity.

New services icons and labels

North Asia... Still looks busy.

I also experimented with completely different renderings. First was a connectivity view of the network. It illustrated the major undersea cables and the cities where they interconnect. But did not show geography. This map was dubbed the Schematic Network Map.

Major cables interconnect

Close up of the schematic view

Rendering the undersea cable routes as subway lines are shown on maps from the Paris or London Subway. The routes would run along each other and follow angular turns to clean up the busy areas. Although the line style wasn’t used, the concept of Hubs and other new visual treatments would be use in later versions of the map.

Clean lines

Close up of the Singapore Hub

Due to issues with the world map used (distorted projection, inaccurate data and no country polygons) it was time to re-create the maps on a new template. A new stock world map was used as a base for all the maps. It showed a less distorted view of the world and allowed for more accurate geodata. It also meant a complete re-creation of all the maps in a short time. I setup a system of includes, symbols and other modular elements to speed up production. This made revisions and updates much less disruptive.

2008 GFP Map detail

Hub and major locations

The new template also allowed for new country by country coverage maps.

MPLS Map detail

Close up on India

The key for me (and STC) was to deliver meaningful maps that would also be visually pleasing. Creating vector based maps allowed us to use them from print to online interactive. As interactive PDFs to email (where layers of data could be turned on and off).

The latest Global Footprint map has over 30 undersea cables, a complex IP terrestrial network, hundreds of landings and service locations. It manages to represent a bird’s eye view of TCL’s network and services. This has been one of my most challenging and most rewarding project.

Global Footprint Map used on CNBC for TCL's launch

As STC’s design department grew, I was able to spread the wealth to the other designers… Although one of them quit after working on a map update for a week. Like I said: tedious work.

Read on: The interactive version.

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:

• 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 (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.

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