It’s been a while since I posted anything up, but boy am I going to make up for that in spades. The following two animations are short Motion Graphics pieces Chris Petrillo and I did to show what it would be like to interact with our website. It is entirely pre-rendered, but we think it’s a damn close approximation of what using our site is going to feel and look like.

http://cias.rit.edu/~nmshowcase/QuasiComplete.mov
http://www.newmediaunderground.com/animatic.mov

And below I give you the beginnings of a working media viewer. When it’s done, it will be an Image Gallery, Video Player, and Web Launcher all rolled into one. I only have the Image Gallery portion working so far. More to come….

MediaPanePrototype

Here’s another animation that integrates dynamic content with a prerendered animation. This time we’re loading 15 images from XML and attaching them to the stage dynamically. The animation itself is also more complicated, dishing out 15 cards end-over-end while also having a smooth camera pan. The system is working, and running, great, and I should have a tutorial on how to accomplish this shortly.

Render Demo (Flash 9 Required)

Here’s a quick little demo that uses the DistortSprite class in AS3 to distort a dynamic image loaded through XML to match up in perspective to a pre-rendered, animated card.

PreRender Test (Flash 9 Required).

The basic concept here is that we have a prerendered animation from a 3D app, in this case Cinema 4D. And what we need to do is be able to dynamically attach images on top of that card in Flash. So we rendered out the animation from C4D without an image, and then motion tracked the 4 corners where the image would be placed in AfterEffects.

Then, by using Dr. Woohoo’s AE2Flash script, we were able to send that motion tracker data for the 4 corners out to an XML file. Since the dimensions of the Comp in After Effects are identical to the dimensions of the stage in Flash, the coordinates should line up. Then we simply run a DistortSprite class we have that just grabs 4 corners of a dynamic image and distorts them to those points that we calculated from the motion tracker. What we’re left with is the illusion of a dynamic image being transformed in 3D space along with our actual prerendered 3D scene.

Ok, so when we originally planned on having an mp3 player in the VHood, I didn’t think I’d end up writing iTunes in Flash, but wutcha gonna do. Obviously I’m exaggerating, but this is a pretty capable online mp3 player. This version loads the songs from xml, but the live version we have in the vHood loads from a database and even has file uploading working. Also, the file uploading grabs the id3 tags from the mp3 automatically, pretty sick.

This new version has more fleshed out controls, and also has the addition of a mini player. If you click on my wonderful placeholder graphic at the top right of the audio player, you can minimize the mp3 player to its miniPlayer view. Then, click on the “mp3″ text in the miniPlayer to bring it back. Obviously those buttons need some serious work, but the interaction works for now.

Flash Mp3 Player, v2
[SWF]http://www.labs.jarringsenses.com/wp-content/uploads/2007/02/audio_player_v2/audio_app_v_002.swf, 450, 400[/SWF]

One of the features we’ve been planning for the VHood is music uploading so that each user can play music stored up on the server, as well as see other peoples’ music and play those as well.

Here’s a little audio app I wrote to handle the mp3 player interface. It dynamically creates a playlist out of an xml file, as shown here, or from a database, which is how it’s done in the actual VHood. You can also dynamically reorder the playlist in case you feel my list doesn’t “flow” how you like. The code itself is based off of a tutorial at gotoAndLearn.com and I’m using the mp3 files he provided for that tutorial.

Flash Audio Player

So over the past month or so, I’ve been posting some experiments I’ve been working on for this project called the VHood, but never actually got around to explaining what it is. The Virtual Hood, or VHood for short, is a virtual hang out for friends to be together when life’s circumstances split them apart.

The main way to bring friends together is through chat: video, audio, and text. The VHood has all of these, and can actually handle multiple (currently up to 15 with the developer version of FlashCom) video connections at once, arranged in a carousel. Everyone can see everyone else at once, and everyone can hang out. We also want to implement uploading of photos, music, and videos, and also having a shared calendar of events.

It’s got a long way to go, but you can visit the current incarnation of the VHood at http://www.jm42.net/vhood . Use the login name: guest and the password: guest. It’s still very much in active development, so be forewarned: stuff WILL break, your browser MIGHT crash, and your PET CAT might die (ok, maybe not that last one). But again, you’ve been warned.

Well, I finally got into AS3, and I must say, it is awesome. The learning curve is steep, especially if you’ve been doing AS2.0 for a while since a lot of little things have changed that will trip you up, but the benefits far outweight the negatives.

We’re doing our Senior Project in AS3.0 as a result, so I did a little test app to get started. It’s a pretty simple gallery, but it also incorporates deep linking, so browser buttons work and you can bookmark individual pages to go back to them later. Check it out…. (Flash 9 Player required)

http://www.jarringsenses.com/courses/nmtp/gallery

Finished writing the trig and methods to get the carousel working with the adding and removing of connections. You click on the + symbol to add a connection and click on the icons themselves to remove them.

Final Prototype

Finally got rid of those icons and started using some of our own graphics. This prototype simulates the adding of a new connection (new user login) and allows each person logging in to have their own name and color. You can remove connections at will by clicking the minus sign as well. I also fixed the perspective so that the currently selected icon is dead center, and everything else forms around it.
Prototype_v002

I found some pretty nice Flash tutorials to help out the interface end of the VHood proejct. The first is the carousel itselft which I got from gotoandlearn.com, which has a great collection of beginner and advanced Flash tutorials. The other was from Pixelfumes and showed how to add a movieclip to a bitmap object and use the bitmap object to blur. The carousel in this prototype is dynamically created and calculated using XML, and has a draggable floating window that blurs everything behind it.

Realtime Blur Tutorial, Carousel Tutorial

Prototype v001

Update: Rewrote active blur engine. It used to convert the entire stage to a bitmap object and then mask it so that it only showed the blurring behind the window. New class now only converts the area where the window is into a bitmap object and then blurs it, hopefully improving performance when there are several windows on the stage at once. Also abstracted into an actibeBlur.as class.
Prototype v001b