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.
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)
Here’s a quick in class exercise that generates triangles at random 45 degree-increment angles and at a random color. The eventual goal is to add AI so that it looks to a random direction around itself, finds an empty spot and draws a new triangle, eventually filling most of the screen.