I’ve been thinking about video quite a bit recently. One thing that really bugs me is how people tend to treat video as this thing that sits in a box and plays from start to finish. When Flash 8 introduced alpha in video it opened up a whole new range of techniques, and I’ve just spent a little bit of time roughing out a simple (and rather crude) example:
This example is seemingly simple, but there are quite a few steps involved which I will explain below. What happens here is that you can click a colour, and the car’s surface will fill with that colour as it rotates, as if paint were splashing into its existing finish.
So just to explain how I went about this. I took a 3D model of a Nissan Accura into 3DS Max, and rendered out 3 alpha PNG sequences:
1. The specular map for the car body (this shows the highlights/reflections and lowlights), this doesn’t give the desired effect, so if you are a 3DS guru please get in touch, but anyway , we also have…
2. The normal render of the body. This was used simply as an alpha channel later on, so I could create a solid colour fill that matched the outline of the body of the car as it rotates.
3. The entire model, but the body was assigned a “cartoon” red material along with the background, so that I can later remove the body, leaving just the wheels (as they would appear in situ, i.e. you can’t just render out the wheels because you’d see too much of them as they rotate)
I took all of these into After Effects to render out some AVIs with alpha channel, and ran them through the Flash 8 video encoder to give me some FLVs.
Finally I downloaded some royalty free video footage of some red paint splattering and keyed it in After Effects so that I could knock out the white background leaving just the red paint.
So with all the raw materials in place, I took it into Flash, and then went about the following steps:
1. Add render number 2 to a layer on top of the plaint splash video, and assign it as the mask, setting both to use bitmap caching. What this does is set one alpha video as an 8 bit mask for another, giving us a paint splash video that stays inside the boundaries of the car body work outline.
2. Add video number 3 to a layer above these, this simply adds shine, wheels and windows on top of our paint splash fill.
3. Add the spectrum graphic. All I do is check for mouse presses, and when I detect one I set the colour of the paint splash using Color.setRGB(). I also have a solid rectangle that I use to colour the body whilst the paint splash is animating (so that the car doesn’t just dissappear), this allows us to have the paint splash into the previous colour.
This was just a first attempt and not only is it ugly and glitchy, but the process can be streamlined, performance and quality increased (now I have some steps to build on), but hopefully it gets you thinking about using Flash Video in less obvious ways to create new experiences. I’m looking forward to combining some new techniques I’m working on with subtle usage of Papervision3D, it’s a pretty exciting time now that we have so many options and more opportunity to think outside of the box.