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.

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.

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…

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…

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.

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