Interactive 3D World Map for TATA Communications

STC Associates asked me to produce yet another coverage map for TATA Communications! This time, since the data was pretty light and it included satellites, we thought doing it in 3D would add a bit of shinny. Truth be told, I am a 3D junky (obviously).

In comes Away3DLite, picked for its small footprint and performance. The location data is XML driven and uses actual geo-locations to place the PoPs and satellites around the earth.

I had ported to Away3D the original script, from Andy Zupko’s excellent tutorial, for a previous project. The scroll menu is based on this demo by Soulwire.

I modeled & texture the satellites and marker.. yea, these are some high class models

Check out the map!

Dynamic 3D Animation

A cool little flash project built in collaboration with STC Associates for an event during International Telecoms Week (ITW) 2010 in DC. The party was attended by over 1700 guests. They were asked to vote for a keyword to best represent the future of telecom. The result were rendered using this animation.

Originally I started using the built in 3D of FP10: that was a waste. Text looked horrible and native AS3 3D controls are not great. So I switched to Away3D and the amazing TextField3D class. The DOF is a simple blur applied to the ObjectContainer3D. I had a random movement on the camera but that was turned off in the event’s version.

Here are pictures of the animation and projection setup during the event.

OSM Mapped to a 3D Plane with as3Dmod

Building on my first experiment with OpenStreetMaps and Away3D, I decided to cook up two more!

The first one uses a block grid to display the map in 3D space. On zoom the blocks rotate 360. I used the ModestMap TweenMap, displayed in on the left, to allow control and capture the map’s bitmap data.

The second example uses a 3D plane to display the map’s data. I added a Perlin deformation with as3Dmod to create a wave or fabric like floating look.

The stats shows a rapidly increasing memory usage due to ModestMaps’ tile caching (defaults to 256 tiles). Once I have it cleaned up, I will upload the source code for these

Demo on HYPE's blog

Last night, while waiting for the London Flash Designer and Developer Meetup to start, I decided to create a demo using HYPE and Away3DLite. It is nice to be able to just tinker with complex renderings using very little code and focus on visuals.

In this demo Away3DLite is used to render 900 cubes and animate the camera. HYPE processes the sound being streamed (Magenta) and resizes the cubes accordingly. Two Bitmap Canvas are used to display the 3D rendering of Away3DLite. One is used to create the blur trail. The actual code needed to render this is less the 40 lines. The rest is AS3 structure.

Using frameworks like HYPE and Away3DLite allows us to go back to the innocent days of AS2 and use code as a pure creative enabler. That’s probably why I was a bit thrown off when another attendant of the meeting said he didn’t like using frameworks, which is ironic for a Flex developer.

I don’t think people appreciate how lucky we are to have open source frameworks like these available. Well, I do! Thank you for all your hard work. Please check out HYPE and Away3D for some serious fun!

Click here to view the demo.

Click here for the source code.

OpenStreetMap... The solution to Google's limitations

It was with much disappointment that I discovered Google would not allow us to manipulate its map tiles with Flash bitmap processing. Thus limiting greatly what is possible visually with the look and feel of their maps. Of course that also means no Away3D, PV3D, etc…

I managed to customize the look of Google Maps by using Tweener’s de-saturation feature to render the map tiles in Black and White. Many have posted on the Google Maps API bug reports and feature requests. Google is afraid that we would harvest their tiles and does not want to put a cross domain policy file.

I decided to revisit the issue and to look for alternate services that would allow such use. Of couse no luck with Yahoo! and Microsoft, just like Google, they want to protect their tiles.

But behold the power of open source: OpenStreetMap.org and ModestMaps. Using the Flash API from ModestMaps for openstreetmap and Away3D, I was able to map the maps onto a cube and have it renders beautifully. OpenStreetMap allows you to go trigger happy with their tiles, just as long as you add their security policy file to you project (see the source code). You can even download the tiles for offline use!

3D Cubes Roaming in Away3D

Though a bit late, this month’s experiment builds on last month setup and adds a bit of AI. Cubes now roam and avoid each other when near collision. A very basic detection system using a vector and couple of recursive functions. All calculations are made using Away3D’s functions like distanceTo() and movement is handled by moveForward(). The newer post are represented by bigger cubes. The icons are from PJ Onori’s excellent iconic.

Click here to view this experiment. Source code can be viewed here.

Update: For Valentine’s Day here is a special version and its source code.

3D render of a maze with hedges

A few 3D renders, mostly exploration around Puzzles, Mazes and Transparency. My favorite, the one with actual vegetation didn’t make the cut

Randomized 3D Layout using Coordy and Away3D

New year, new homepage! My new year’s resolution: Publish a new experiment every month… And update this blog more often!

This month it is using a newly discovered layout API called Coordy. The 3D is rendered using Away3D and tweens are handled via TweenMax. For coloring the cube I draw a random feed from the Kuler API and the blog data is a custom RSS Feed from my WordPress blog.PureMVC was used to structure the application. Coded in Flash Builder Beta 2 and designed in the Flash IDE.

Update: Added a new component: as3sfxr. This is a Flash 10 library to dynamically generate sounds for classic arcade games. It even included a random function!

Update: Souce code here.

Dashboard and content bubles...

After sitting in limbo for a while TATA Communications and STC Associates finally launched the updated New World Ready site. Due to launch in October 2009 and subject to a very aggressive timeline for completion, I decided to use the GAIA Framework to build the site. On top of SEO optimization and Deep Linking, GAIA handles dynamic assets loading (like XML Data, Images, etc…) flawlessly. A real time life-saver.

Developed for the earlier version of the site, I had to update the 3D quiz to run in the flash site. I also developed a simple but custom video player. Coded in Flex and designed in the Flash IDE.

3D Carousel using Away3D

Latest iteration of my 3D carousel. Built for re-use, since this is a popular format these days. It uses Away3D, an extensive XML config and external XML data. Constructed using PureMVC, it makes extensive use of the ExternalInterface to interact with the site (and Google Analytics).

Abylity’s website.

Sound Spectrum Rendered using Awa3DLite

Using Flash I generated animated sound spectrum renderings and edited them into two videos. The second video uses the new Away3DLite framework for Flash player 10. Amazingly the swf came in at 28kb and the framerate is great!

First video:
A 2D rendering using bars, circles, blur filters all rendered to a bitmap.

Second video:
3D renderings using Away3DLite and 484 cubes

Video of interactive 3D projects

While going through some of the recent interactive 3D work I produced, I thought it would be nice to create a video showcase. I also wanted to explore the workflow for capturing and editing these flash projects in action. Music is by Danger.

Shot in Claude's Workshop

While in the South West of France I took a series of shots of my friend Claude Merlet to illustrate the process of restoring an antique armoire. I took these and created a small video to showcase his work.

Une Journée à l’Atelier: Un petit montage photo d’une journée de restauration dans l’atelier de Claude Merlet a Saint Martin Petit (47), France

A day with Claude Merlet. This is a short photo montage of a day spent with Claude Merlet in Saint Martin Petit (47), France.

www.claudemerlet.com

The STC Logo re-created using only AS3

This project is (so far) the most complex implementation using Away3D I had to develop. It is used to display the visual portfolio of STC Associates on the new site.

The application includes an extensive configuration and all the data for galleries via external XML files.

It includes re-creating the logo in code at run-time. Using AS3DMod, I was able to dynamically deform the cube to match STC’s logo. Adding a Perlin noise over time creates a nice wave animation that brings the whole thing to life. The logo becomes the gateway to the various projects and the central interactive element.

I made extensive use of Away3D’s Object3DContainer to create a smooth animated carousel to display the projects. Including a flip to show galleries.

The latest revision can be viewed here.

I am not too happy with the way the final integration was done, you can view the live version on the STC site here. Some of the sections are empty while others have too many items. I think I also gave too much control in the configuration XML!

Results of the Quiz

As part of a global brand awareness campaign, I was tasked with developing a flash quiz for TATA Communications. To spice things up we agreed to use Away3D to render the questions and results and make this a richer and more entertaining experience. I also added Javascript interfaces to integrate with Google Analytics and back-end answers collection.

Visit the New World Ready site or Take the  quiz!

Frame from the 3D animation

Originally part of an interactive flash piece for the Managed Hosting Service micro-site, I was asked to create 4 animations to illustrate various concepts around the service. I extended a 2D mock-up, created by Dave Huffman at STC, using server racks of various sizes to show scale. From there I created the 3 other visual renderings.

You can view both original mock-ups and final renderings in the video below.

Motifs of the TCL Interactive Card

The 2009 version of the TCL holiday card was to offer multiple options of colors, motifs, logos and message.

Click to view the Flash card and the External Interface Controls via Javascript

The design department created the static mosaics (except for the tree, which I did.) I then re-created the whole thing in Illustrator (using symbols) and imported the final mosaics in Flash for some coding fun. A little OOP magic and I setup a particle like system to animate each of the little triangles in sequence.

The second part was to expose some of the functions to be controlled via Javascript. I used the External Interface API to do so. It was then sent of to be coded into the html template.

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

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.

3D renders of one option for a new logo icon

In late 2006 STC was commissioned by Arbinet to re-brand and re-design their site. As part of the exercise, I was asked to design some of the comps that were to be submitted to the client for review. Although these were rejected, I think they are cool enough to make it here…

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

Illustration for ad banner

For this project I was contracted by Cyber Sytes to create three ad banners for a local boat dealership. The tagline “Does your boat raise fish?” wasn’t my idea but I had fun with it and created simple cartoon like animations to illustrate it. We actually won a Silver ADDY® Award for the campaign.

Click here to view banners One
Click here to view banners Two
Click here to view banners Three

detail of the GUI

Yet another New York eatery… But now in Flash 7! We produced the site as the restaurant was being built. I say we because my dear friend Dave modeled and texture the space seen in the homepage video from the architect’s blueprints. I then rendered and integrated the video into the site. Flash 7 introduced better scripting of FLVs and also new encoding. I also used XHTML and the newly supported CSS to load and format menus and most text content at runtime.

I also created the audio soundscape.

You can visit the archived site
(keep in mind some of the links may be broken)

Homepage

Events Page

Detail of la casa's homepage

Site for our dear friend Evita, a party promoter in NYC. This was a redo of her previous site. The old design did not reflect who Evita was and what her crowd would expect to see. I re-branded, redesigned and produced La Casa Evita. The final site projected a dark, mysterious but slick image and was inline with what would be visually expected from a nightlife industry site in NYC.

Previous design

Re-designed site

Introducing the iCock, iCock Mini, etc...

Just a little bit of fun around the introduction of the iPod. I followed the apple product releases of that time (2004/2005). These creations were modeled and rendered in Lightwave.

GUI detail

Part of the trend of trendy mexican eateries, Soho Cantina was my first project collaboration with the team at the Dene Group. They also launched PlateNYC that later became Soho Cantina East. Although the food was traditional the setting and location (fashionable Soho) required a more polished and trendy website.

Click here to view the archived site

detail of a postcard created for Cibar

On the footsteps of Ilo came Cibar a martini bar in Manhattan’s exclusive Irving Place neighborhood. For this site I also took all the photographs. Although we’ve updated the content over the years, the design and functionality remains as it was when we first launched. Thanks to a minimalist approach the site has weathered trends and still looks polished today.

Visit Cibar’s Site

Flash 6 goodness

Take Flash 6, TextField.getFontList(), HTML text support, a list component and a textfield: you have the STC fontBrowser. A few thousand users later we have a hit. It helped STC’s site rank higher and generated a buzz around the agency’s interactive production. Pretty nice considering that it was a very simple tool to develop.

Click here to use the original STC fontBrowser.

An updated version of the fontBrowser in AS2 and with a new GUI.

Following the success of the fontBrowser I developed the STC Timetracker an online tool to keep track time spent on tasks. Although a lesser success I still get emails from people using it today.

Detail of the 3D illustration

This render was used to illustrate the 2003-2004 holiday card for Great Spirits. Modeled and rendered in Lightwave. The reflections and “fast” Fresnel took for ever to render on my work computer, at the time an AMD equivalent to a Pentium 2.

Holiday Card Illustration

Flying cow render

Originally created for Great Spirits (now Castle Brands). This exploration was to be used to support the launch of a new Irish Cream drink. Can’t remember how we (STC’s brains) arrived at the flying cow idea, but I executed on it and did a quick model and renders in Lightwave. Although the idea didn’t “fly” with the client, I kept the flying cow as a visual element of wemakedotcoms. The original cow had green patches.

Original Cow

Inside Ilo

Ilo was my very first freelance flash project. A full site done in flash version 5 back in 2002-2003. I remember the drop down behavior was a struggle and I also spent extra time on getting the scroll bar to animate. I have noticed that the click behavior on the buttons of the scrollbars have stopped working (might be a backward compatibility issue.)

Click here to view the archived site