Development

Sport Chalet: The Mountain

So I just recently finished up a micro site for Sport Chalet, a California/West Coast based sporting goods boutique. Sport Chalet came to Firstborn wanting to promote their winter line of snowboarding and skiing equipment and apparel. To help, they also got a bunch of professional snowboarders and skiers to help promote the site by modeling with equipment and by giving interviews. Our goal was to figure out a way to display all these professionals as well as just models in an interesting way. The concept we arrived at was to create a 3D mountain and populate the face with hot spots that would represent one of the sixty or so people. After selecting a person, the user is taken to a ‘rider page’ that has motion tracked video with target points that describe what that person is wearing.

The first challenge was to create the mountain in 3D in Flash. Originally we were going to create the mountain based off of a grayscale depth image, where the height of the 3D mesh would correlate to the brightness value. However, this did not offer us as much controll over the final result of the mountain. Instead, we decided to model the mountain in an external editor and bring it into papervision. Our first inclintion was to use collada or md2 format. However, I was unsure of how much accessesability I would have to the mesh, as we would need to make it interactive. In fact, since each triangle would be it’s own object it could not be appart of one mesh, so rather the mountain would be a collection of independent objects. Additionally, the art director was using Cinema 4D which at the time did not support collada export. So it seemd to me that the only option left was to make my own importer from Cinema 4D. The importer I created uses VRML files (.wrl) which are ascii text based files that contain an array of point and faces, as well as UV coordinates for texturing. It’s actually a simple process to rebuild all mesh, except for a few tricks such inverting the Z-axis (papervision’s is opposite to Cinema’s) and reversing the normals since they all come in backward. Since I wrote my own importer, I knew exactly what was happening, and thus had totally controll over how the polygons are created and handled, therefor making the interaction process that much easier. Here are a few steps/examples of creating the mountain:

Example 001: Bringing the object in directly from Cinema (the color is from its original material) and showing the wireframe as well.
Example 002: An example of adding a bitmap texture to the object and have it retain proper UV coordinates.
Example 003: Adding a color gradient based off of each triangle’s centroid position relative to the entire mesh, as well as cropping polygons on the lower portion to remove the rectangular base
Example 004: Adding some effects such as Flat Shading (which had a bug that I needed to fix first) and subtle glow.

Another interesting process was creating the tracked videos. The site contains 78 tracked videos, which for each we needed to do the keying, color correction, and finally motion track each one. After each video was tracked with one or several trackers, we simply copied the keyframes right from after effects and ran them though a custom parser we built to convert them into XML. You can see the result on the site or in this demo.

So please check the site out, hopefully you’ll enjoy it, as it was pretty fun to make. There’s a contest you can enter as well, but you have to be able to get to one of the Sport Chalet stores, and they’re only located around Southern California / west coast area.

Exporting Cinema4D Objects into Flash

I developed a way to export an object from Cinema4D and bring it into Flash with FIVe3D. Since I am using FIVe3D, the object comes in as vector, and not as bitmap. Currently I haven’t done anything with texture, but I would like to try and preserve color data for each polygon. I figure, if you want a bitmap image instead on a complex polygon model, you might as well just use PaperVision3D.

The export method was the trickiest part, or rather, just finding which format works bes. It seems that VRML will give you all the data you need and formated so that I could understand it. The two important exports are an array of 3D points which look like: [ 0 6.794 0, 13.385 6.794 0, 42.833 6.794 0, 72.281 6.794 0, ] for however many points you have, then another array of face sets that looks like [ 0,1,42,-1,1,2,43,-1,]. The face set is instructions on how to connect the points. So in the previous example, the first polygon (which is a triangle, so you’d need to triangulate before export) is starts at the first point (0) then connects to the 2nd point (1) and finally the 42nd point (42). The negative one must be for another use, so currently I ignore it when I parse.

Anyways, here’s just a simple object I exported and took into Flash: Bottle

Continue reading “Exporting Cinema4D Objects into Flash”

Thoughts on Flash CS4: IK, 3D, and the like

Adobe has a press conference about CS4 the other week, including (of course) the newest version of Flash. Some of the exciting new features are the IK tool and native 3D. I’ve been playing around with the beta version for some time now, and I’m sorry to say I’m a little disappointed. However, there are things that I do like about it. The first is the interface, which looks more like After Effects. It will take a little time to get used to, but that’s no biggie and I don’t spend that much time in the Flash IDE anyways. The second nice feature is the new way of applying tweens. You can tween motion, rotation, scale, filters, etc all independently (and actually control, not just apply easing independently, as you could in previous versions). But even better is that you can scale the timeline and the tweens, so if a tween is too short, you can stretch it out, and it applies to keyframes in between as well – very useful. You also get path guides when you apply tweens like you do in After Effects, so applying curves is easy.

Now about the IK tool. Yeah, it’s cool – but that’s it. I’ve had to make puppets in Flash before, and it’s a bitch, so it is nice to have this feature, but I’ve only had to make puppets once. It’s not like every day I am making IK people. And now that it’s available, I have a feeling we’ll see a lot of puppets just for the heck of it. I think the true potential of it will being used in an abstract way, such as in a way to link elements together and snake around. Adobe themselves said it best back at FITC: Just because we have the IK tool doesn’t mean you need to make everything into a puppet. Struck recently released a project for Mario Super Sluggers where they used the Puppet Tool in AE to add little animations to the stars which is a nice touch. This sort of thing is where I hope the IK/Puppet tool will be used, for adding that extra little detail, not for just creating puppets of people. (You can read a little more about the site on Jonathan Minori’s blog, who was the Art Director on the project.) I guess it is more useful to the animation side of Flash as opposed to development.

The 3D element seems like a nice idea. For simple stuff like parallax or just doing some simple transitions, it’s a pretty nice idea. I guess if you are doing bitmap transitions, then it’s probably beneficial. The drawbacks seem that there are not many customizable features (I could be missing them) such as the perspective. If you’re doing simple vector shapes in 3D, it’s still better to use FIVe3D, which is the 3D tool I am most comfortable with. I did a few test comparing the two and it still runs faster. Of course, as I’ve mentioned in earlier post, FIVe3D is specialized for vector content, so using it to handle bitmaps is not it’s original intention (although it still works great). Here are the test, and I just want to make it clear: I’m not here to say “FIVe3D is great and Player 10 can suck it” – just that each one has it’s own strength and weaknesses, and that you use each one when necessary.

Multiple Objects: Drawing a bunch of squares and then simply rotating them on an EnterFrame. FIVeD keeps them as vectors (the outline is always the same) and flash must translate them into a bitmap, as you can see the outline on those squares getting lost as each sprite rotates.

FIVe3D | Flash Player 10

Large Object: Drawing one very large object, and then pushing it back in z-space and rotating it on an EnterFrame. Since FIVe3D is vector based, it’s not a problem, but player 10 seems to struggle with it, as it must be handling it as a giant bitmap.

FIVe3D | Flash Player 10

I guess what I am upset about is that there were some issues I wish Adobe had worked on to improve rather than creating new ones. Did we really need 3D native inFlash? No, because there are countless other engines out there such as PaperVision, Away3D, Five3D, Sandy3D, and others. The IK tool? Yeah, a nice feature that will come in handy and be worth it’s weight in gold when the time comes to make another puppet, but there are other things that I could use more. Personally, I’d like to see better audio control, which unfortunately means a pretty big overhaul of the entire player. I’d also like to see a way to remove all listeners from a given EventDispatcher, and I’m not quite sure why that hasn’t been implemented yet. (For all I know, there might be a very good reason.) It was easy enough to write my own class that manages the adding and removing of event listeners, but the downfall there is that you’re using a 3rd party to mange your events, so it’s just seems more cumbersome and doesn’t really seem worth it.

In closing, just so it’s not all a rant, I would like to congratulate Adobe on their upcoming release. I’ve been tinkering around in Flash for 5 or so years now (since Flash 5 back in 2002/3 when I was introduced to it in High School) and I’ve been excited every time Macromedia/Adobe launched a new version, as it is always exciting to see the product grow and add new features. Photoshop has some nice little features too, the content-aware scaling seems pretty cool and is fun to play with. It has a little feature on the color picker too that is “copy color as html” which is nice since it just adds it to your clipboard. Except it adds it as “color=#FFFFFF” and as far as I can tell you can’t edit that anywhere to make it so it would be ready for Flash (so instead it would be “0xFFFFFF”).

Note: Seems like when witting a post in Google Chrome, line breaks don’t save for some reason. You also loose the instant spell check that Firefox has.

Depth of Field test

I want to start posting some of the little experiments I’ve been working on at work. I did an experiment trying to optimize depth of field rendering in FIVe3D. The way you can have 500 objects in 3D space with depth of field blur on all of them and still have decent performance is to use smoke and mirrors. Basically, the objects are not being blurred. Instead, before the program runs, it takes the Sprite or Bitmap that is to display, and draws it and saves it as a bitmap. Then, it applies a blur to it and redraws it, and saves it as another bitmap and stores it away, then blurs a little more and so on. So, at the end, there’s an array with say 20 or so images with different states of blur on them. Then, based on the perspective of the objects, I find out their distance from the camera, and generated a value of how much to blur the object. But instead of blurring it, I just swap out the current bitmap with the applicable pre-blurred image. If you want to see some really cool depth of field stuff, check out some of the experiments by Mr. Doob.

click and drag to rotate, mouse wheel zooms in/out

XM Wild Ride

So I just finished my first project at Firstborn Multimedia – XM Wild Ride and is more of a game than a traditional site. The user is driving along in their new XM radio enabled car and you’ll drive though four cities based off of the many different genres XM satellite radio offers. During open road areas in between cities you can take exits to two minigames and a theater section, which unfortuanly only has one video as of now. The site uses the same engine that was used for the Zune Journey that Firstborn did last year.

My role on the project was development. I programed the ‘Help the Hippo’ game which is basically Frogger with a hippo. I also did the main drive experience, which involved taking the preexisting Zune scroller engine Mathieu created and repurposing and almost completely overhauling it. This was the first thing I was assigned to pretty much from day one. I started by doing the game, but after finishing up the alpha pretty quickly I was switched to doing the drive. All the enviroment illustrations were provided to us but I arranged them for the enviroments. Mathieu Badimon was the lead developer and oversaw the entire development, as well as programmed the site shell and structure. Izaias Cavalcanti did the ‘Flip the Animals’ game and Max Holdaway did the theater section. Joon Park modeled the characters and fellow RIT New Media Designers Mike Kuzmich and Eric Eng did the animations. Will Russell and Wes Adams were the producers for the project. We also had some help with the animations and touch up work by some of our interns.

By the way, we hid a bunch of Easter eggs, which are invisible targets on select buildings. Here’s an example freebie – if you click mouth of the guy on the first bus stop, you’ll get a mini-map showing the position of the other cars that I used for debugging. (Also, while developing the project I discovered the site syncs well with the new album from The Dandy Warhols, specifically Love Song and Mis Amigos.)

More FIVe3D experiments

Here’s two more experiments I recently did with FIVe3D. This first one here is taking the image depth analyzer and is extending it to generate a 3D mesh instead. (I added the option to turn off the stereo rendering help performance.) The next test was something I did for a potential upcoming project. I’ve been meaning to get back to my “Flash Roots” (no pun intended on the ‘root’) and visit my first Flash project ever – a game called Super Josh. One way or the other I am going to start working on a new version, which would technically be the fifth game even though most of them never got very far. Anyways, here’s the Super Josh FIVe test. Basically, I can use FIVe3D to render the environment and use pre-rendered sequences from Cinema 4D for more complex geometry such as characters. The idea for this is based upon many games that have done this before, the one that stands out the most to me is Mario Kart 64.

Speaking of 3D, here’s another test I did back in college using the BitmapTransform class with tracker points exported as XML from After Effects. The BitmapTransform class just deforms an image based on four target points.

Anaglyphic 3D Rendering in FIVe3D

So since Mathieu Badimon, creator of FIVe3D, sits right behind me at work and we’ve been working on a project together, I figured I should give his 3D engine a try. In case you aren’t familiar with it, FIVe3D is a light, simple, 3D emulator for Flash. However, don’t confuse it with PaperVision. If you want full modled polygons with textures, lighting, shadows – basically full 3D, then that is where PaperVision is your tool. But if you need simple 3D rendering, and you don’t want to import a million classes and compromise performance, then that’s where FIVe3D comes in to play. Mathieu does a pretty good job at showing off it’s uses on his LAB site.

So back to what I’ve been up to. I’ve always been interested in doing niffty 3D stuff with Flash, so getting into this was right up my ally. One of the first things I did was extend the engine to render stereographically, as where you would be wearing those old time 3D glasses with the two different color lenses. With the FIVe3D classes, I’ve extended the Scene3D class, so instead of Scene3D you use AnaglyphScene3D and it will display the result for use with 3D glasses. So anything done with FIVe3D can be dropped into it and it should work perfectly. It’s set up so the user can change the offset of the two perspectives, as well as show the original rendering. I still have to tweak the way it applies all three together as right now it blows out the original image’s colors. Keep in mind too that in order to get the stereographic effect, you need to render the scene twice, so if you’re showing the original image as well then you’re rendering 3 times, and that can make the performance take quite a hit.

Anyways, here are two examples of what I’ve done with it. This first test just shows a bunch of cubes in space, but it runs pretty smoothly, even on my old G4 PowerBook. This next test can be pretty heavy, so be prepared for a browser crash if your computer is weak of heart. This depth demo takes a grayscale image and converts it into points with a z-depth based off of the brightness value. I’ll do some more with it, and will probably post some more test within the next few weeks.

Working at Firstborn in NYC

It’s been some time since I’ve made a post. Back at the end of June I moved to Brooklyn and started work at Firstborn Multimedia as a Flash Developer. So far it’s been great, living in the city and working there. I have about an hour commute to work, but it’s really nothing. And Firstborn is a great company with some really cool people. You might know of Zeh Fernando of Tweener fame, he freelances for Firstborn but will be moving up here sometime next year I guess. Right now I’m working on a project with a bunch of people, one of them is Mathieu Badimon, the creator of FIVe3D. That project should be finished by the end of the month and I’ll definalty make a post when it’s live. Other than that, life is good. I live a block away from the best pizzeria in Brookyln, Di Fara Pizza, and believe me it’s worth the wait and the price. I also get to see a nice view of the financial district everyday from the subway when it goes over the bridge, including the Statue of Libery when it’s clear. I also noticed for the first time yesterday (after working there for over a month) that I can see the Empire State Building from the office.

FITC 2008: Flash 10 and AS4

A little while ago I went to FITC Toronto 08 festival. FITC is an annual ‘design and technology festival.’ It used to stand for Flash in the Can[ada] but since Adobe has acquired Macromedia the festival has been broadened to include other technologies such as motion graphics, 3D, experimental (processing), installations, etc. It’s run on it’s own by Adobe is a big sponsor.

There were a lot of great presentations this year. Mario Klingman had a great presentationa again, this time focusing on a.viary on which he is working on the Pattern Generator. Eric Natzke showed some of his recent visual Flash work, and Robert Hodgin showed what he’s been doing with Processing lately with music, flocking, and pigeons. Keith Peters gave a talk about fractals and some crazy math as well as an Air app he made to demonstrate both. Dr. Whoo Hoo talked about some crazy stuff with Illustrator and Flash communicting, such as having a swf run actions in an open .ai file. I have some ideas I want to try with that when I get some time. (Illustrator games anyone?) North Kingdom gave a great presentation of what they’ve been doing and what life is like in Skellefteå in Sweden. I picked up a print by Scott Hanson after his presentation and still need to finish the frame for it. There were other great ones too, as well as some great insight to the future of Flash. (I also can’t forget the 2nd night party that had the Junior Boys, a band that I love)

Mentioned at the keynote presentation was some cool features for Flash 10. One is better timeline control, which will act more like after effects. When MovieClips are tweened, there are now bevier paths on the stage that allow for easily easin, curving, and changing. There will also be build in IK for puppeting that will also export for runtime. Another long awaited feature is Z-depth and simple 3D, so now you can have planes in space. I looks a lot more basic than PaperVision, but the key thing is that it is native to Flash and the IDE.

In the future also look for AS4. Don’t get all worked up, this is more similar to the AS1 to AS2 migration than the AS2 to AS3 overhaull. ECMAScript, which JavaScript and thus ActionScript is based off of, will be updated by the end of 2008. There are very basic changes, but the one that makes me the most excited it the union datatype, which allows you to datatype a variable as more than one type. So, if you have a String or Number being passed into a parameter, you can datatype it as both.

JSFL scripts

JSFL scripts have been around in Flash for a while now, I think since MX 2004. Incase you haven’t run into them yet, jsfl scripts are used to extend Flash. RIT New Media Design students might be familiar with a file that Adam Smith wrote that prepared your Flash file’s library for use with preloaders. Over the summer I wrote a few extremely simple scripts that are now impossible for me to live without. However, today my laptop crashed and I lost these files, and upon searching the internet, I realized that there is not a lot out there easy to find on these files. So I rewrote what I had, and I figure I’d share them since they are so immensly helpful.

All three of these scripts will go though your library and modify the images/bitmaps. One will turn allow smoothing on, the other two will compress all as jpeg/photo or png/lossless. These are usefull when using the Photoshop importer to bring in png sequences, this way you do not need to open every single image and turn smoothing on or change the compression back to jpeg.

(You’ll want to right-click and save to desktop for these)

Drop these files into the Configurations folder, found here:

Windows:
boot driveDocuments and SettingsuserLocal SettingsApplication DataAdobe Flash CS3languageConfiguration
Mac:
Macintosh HD/Users/userName/Library/Application Support/Adobe/Flash CS3/language/Configuration/