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.

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.

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!

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

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…

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.