WordDNA: Twitter + Flickr + Away3D

Source Code is available here

Recently I had been wanting to do some more interactive 3D type of projects. I wanted to create something beyond just a pre-rendered sequence that simulated camera movement. I have previously been using papervision3D but wanted to expand my knowledge and check out the competition. Papervision X has been long expected but with Ralph Hauwert Unit Zero One leaving the team I thought it was time to move on. Away3D was very highly recommended by my colleague Kyle Beikirch for it’s more frequent updates to SVN and ease of interactivity. Since I was exactly sure what would be interactive when I started: I gave it a shot.

In what I did there wasn’t really a huge difference between the images but I did like how Away3D uses associative arrays much like Greensock Tweening platform instead of traditional constructors. If I didn’t want to pre-render as many assets as possible I would need an internet source to grab them from. I thought that combining the antics of twitter with somewhat related photos could yield some interesting results. At first I grabbed XML from the twitter time line, but I wanted to have more control over my results. I used the Tweetr Twitter API, and got a lot of code inspiration from Lindsey Burtner’s Word Feeder. Lindsey helped me last year when I first began mashing together the last.fm API, and proved an invaluable resource, so props to her.

Let’s dive into some of the key functions that make this work:

Once the Flickr and Twitter data has been collected we then insert it into a 2D MovieClip and prepare it for 3D.

Dynamic Draw of Movie Clip to Bitmap Material

We prepare it for 3D by simple flattening it with transparency.

Document Class creates Bitmap Material

I wanted to organize the planes in a Helix and found this post from Lee Brimelow’s blog and modified it for my needs. The by rotating the scene 360 degrees we get this cool spin effect for the zoom out.

Make a Double Helix our of Shapes

Now we need a way to navigate between planes, at first it was very linear but that got boring quickly. So I added in a new random index each movement to make it feel more exploratory. Adding a mouse event to planes would have been the next logical step to give users some control.

Generating a Random Index from an Array

Now the fun part: the camera. First we get the distance to to the next target and tweak it so that that camera movement is smooth for all distances.

The Camera has two tweens:

1) To move away from the plane randomly around it in 3D space

2) To move towards the new target

We change the focus of the camera by tweening an empty displayObject3D this would be our “null object” in 3d or After Effects.

The bezier gives the tween a nice smooth and organic feel, something that is lacking with a lot of fully 3d sites.

The newY just calculates which direction the camera should swoop in depending if the target is above or below it.

Moving the Camera

We save the initial values of our current target so that we can return it to it’s rightful place the user is done looking at it. In our tweenCameraDone() function we save the coordinates of the camera in case we need to reset it.