Video in Flash has become pretty hot lately, ranging from the basic home video turned swf to streaming FLV (flash videos) progressively or with Flash Communication Server all the way to having live video conversations in a conferencing/collaboration application. The bonus of making Flash your final output is that it can be embedded cleanly into not only an html page (you can do that with any video file really) but also any Flash movie as well. To top it off, if you so chose to, you can add in interaction with the video with not just stop and play buttons but have it react to certain buttons or areas that are interacted with in the application/web page itself. The possibilities are endless.
Going on that line, lately Macromedia has been pushing Flash video a lot more and started up a new campaign on their home page with streaming video banners. One of these banners made use of Flash Communication Server to stream it out smoothly to viewers and really caught my eye as it was so clear and free of artifacts that I couldn’t understand why it downloaded and played so smoothly. Not only that the implementation of the banner in the middle of the page without requiring any interactions topped it off. This article is about a video banner spoof I did on that Macromedia video banner.
Before I get started on this, I would like to mention that this banner is meant as a joke, a spoof on the original banner and for nobody to really take it seriously as a “copy” of the original. I have been very open to the community as to what I created and have no intentions of using this banner in a live site. Also, my procedure of creating this banner may not be the “best” way of creating it, or even what some professionals might prefer, but is just one way of completing a project. To each his own I say. I’ll start off with my original thought process, decisions I made along the way, and finish off with what I think I could have done better or changed. I’ll try to keep things basic enough that anybody can follow along, so for some more experienced this article may seem a bit long or too detailed.
Take a look at this link to see what we are going to try to accomplish:
http://www.macromedia.com/swf/homepage/fma/en_us/assets/FMA_video_gallery.swf
Here is my version:
http://www.solid-thinking.com/mmspoof/spoofPlayer2.html
So let’s get started on what I did to create this banner and what was running through my mind during the creation. To start let’s go over what my goals were and what I needed to do to spoof the original.
First thing would be that I needed to figure out how to get a human walking across a virtual background. As you can see in the Macromedia version, there is a female walking across the stage and viewing “pictures” in the gallery of Flash videos. Which in turn, change to video when she stops to look at it. The first thing I thought when I looked at it was how they created a video file that could play over graphics. You would need to support alpha channels, and as far as I knew this wasn’t possible to do with FLV files. So I started experimenting with PNG files, but quickly realized that you would need a lot of PNG files to create a video that long. This isn’t a viable approach.
If PNG’s aren’t viable, that left me to assume that it is an FLV file. How do I know it’s an FLV? Looking in my internet files cache directory I couldn’t find any file that would be that video which means that it is being streamed by Flash Communication Server. Which means? it’s one file! The whole thing, all three videos and graphics are one file! OK, so now this makes it much easier. I now know exactly what I needed:
- A video of a person walking across a stage looking at the “pictures”
- 2 videos, one must be somebody talking to the monitor and the other must be something TV or movie style
- Background graphics
- Flash movie “holder” to play the flv file
The one doubt I still had was to how to make the video so clear that artifacts wouldn’t start showing up for the graphics. This generally looks like “smudges” in the pixels which would make it look a little less real and not what we are shooting for. This problem was tackled with the excellent encoding of Sorenson Squeeze. I’ll go over that a bit more later.
First off was the hardest part, shooting the video for the “virtual walk”.
This is done by using a key. A key is when you put a certain color behind the actor when taking the video and then erase it out later leaving just the actor. When you do this, you are left with an alpha channel which means you can now put anything behind the actor. Common colors for keys are “chroma” colors which are generally a choice of 2 – blue or green. Depending on the clothes of the actor you would want to choose one or the other, it’s mainly a preference of the director which one to use though. Keeping in mind though that for DV cameras, which is what I shot with, green tends to key out better later which is why I use green. A quick note on keying, I won’t go into that much detail as there are way better resources out there on the issue, is that it can be done during production or post-production. Expensive equipment is required for keying while shooting so… I didn’t do that here. I did my keying in After Effects after I brought the video in with Premiere..
So to start off I needed to setup your studio where I would shoot. The most important thing is to make sure the lighting is setup properly. Take a look at my “studio” and I’ll point out the areas that could have been improved and why.
As you can see my studio is a bit small and low budget. I used a spare room that I have and put up a roll of chroma green paper. Paper isn’t bad but cloth is much better as it absorbs light nicer and will help with shadows and bright areas. Also, cloth doesn’t crease up like paper can (and it doesn’t tear either). But paper is nice and cheap and easy to find 😉 First off, as you can see in circle 1 we already have shadows, from my face all the way down my body. This is mainly because I am too close to the background. You should (if you have the space) try to be at least 10 feet away from your background so that it’s pretty much impossible to put your shadow on it. I don’t have that much space, hence shadows from my lighting. Also, do a comparison of the color in circle 2 and 3. You’ll notice a large difference I think. Circle 2 is well lit, and if possible you would want the whole background lit up so. Unfortunately my ground light had to be placed in front of me and dimmed due to lack of space so lighting up the bottom was tough as I didn’t want hard light which would cause even more shadows. All in all though it’s not that bad.
One thing to note when you are taking video is to take lots of it. After you have taken your video, watch it, check it and look closely at your lighting and key on the camera monitor/lcd screen before heading back to the computer. Do you have the right movement? is the timing right? are you moving too fast? too slow? are you glowing because the lights are too strong? Things like that. Shoot lots of takes if you need to. I can guarantee that you can never have enough footage. Another thing I found is that I came up with different ideas while shooting the video. I then picked the best of them to put in.
Moving on, first thing after capturing the video is that I needed to get rid of that background. I did it in After Effects but there is other software out there that will do the same thing. This again is just a matter of preference. To help the keying it is best to mask out the parts that you don’t need at all. This is great because we can get rid of the bottom part that went so dark and would pretty tough to key out. Of course we don’t need the floor nor my mountain bike in there..
As you can see in the above pic I have masked out the areas that I don’t need, this will help the keying plugin as there is less for it to look at. If I had wanted to spend more time on this I could have masked it even closer to my body and animated it, but the keying tools that come with AE are pretty good so I just went with a general masking.
After that keying was done I moved onto the video of me yelling into my phone. I needed the graphics for this so I literally took a picture of me holding my phone and cut out the areas I didn’t need. Bringing that into AE I then needed to make the video that would run when I walked up to this “picture” and looked at it.
Back to the studio I went to yell into my camera. Keyed that out, as you can see in the pic below the key color is a bit better as I could light up the background better and there were no shadows.
Then it was a matter of adding in some ambient noises and an ocean. Those were brought in from various videos that I’ve taken while on vacation or something. Nothing special there. I put the camera in a frame that I made in Photoshop, brought it all into AE and then put in the video of me yelling. To give it more of a small camera video look I bulged out the middle of my face a bit and took out some of the color.
All I needed to do with that now was line up the timing of the video starting and stopping with me walking across the screen and looking at it. I had generally thought it all out beforehand and timed how long I could make it so it was just a matter of lining the video up and minor cutting or extending of it and/or animation of the video cutting out. Being a spoof I couldn’t have the video working out perfectly like the original so I went with the real-life theme of lines getting cut and buffering of video halfway through it playing 😀
The next video was pretty much the same idea but different style. I needed something newsworthy so used some video I had of a dragon boat race that I participated in a few years ago. The announcer’s voice was actually in a completely different part of the video, but like the Macromedia version it didn’t matter because nobody could really understand it anyways 🙂 After preparation of the graphics in PS again, I brought it all into one video, added in the buffering animation and lined it up again like the first video of the phone. That took care of the video and graphics of the banner, now to move onto getting it into Flash.
The first problem next up is that I couldn’t output video with curved corners and that is what the original had. My first thought was to mask out the edges in AE and output it with the background color the same as the Flash file. This is an OK approach but there is a chance of the color being slightly different and another issue in that the video has a shadow. It would be better to just have that white background with the shadow in the Flash file I thought and then just mask out the video to get the rounded corners. In this case I could also match up the roundness of the corners a bit better and easier and the video wouldn’t have to include that part which means less bandwidth and less work for the encoder to do (quicker render too I think).
So, after rendering out to AVI at 100% quality and then bringing it through Sorenson Squeeze 4.0 to an FLV file I started working other FLA file. A quick note about rendering out from Sorenson, I didn’t put a lot of time or thought in it and mainly rendered a few times until I got the quality I was looking for. There is hardly a perfect recipe for video as there are just too many variables to think of (size, quality, movement, sound, colors etc..) so it’s best to just do quick renders and pick the quality you need. After a while you can guess much closer to what you would want which makes it faster, if not too much easier. One thing to keep in mind though is that you should try to keep data rates low. The video file can be huge, that theoretically shouldn’t make a big difference other than taking a long time to download. Although if the data rate is too high slower computers will have trouble playing the file and it will stop to buffer a lot if you don’t code it right.
MOVING ONTO FLASH
I built the white background with the shadow in Photoshop and imported it in to Flash. Placed a video object on top of that, sizing it out to the size of the video, and then masked out the video edges according to the graphic. Added a button on top of the video and some actions to make it work and play the video, and then published it all out.
I wanted to use Flash Communication Server for the streaming of the video but decided that it wouldn’t be worth the bandwidth and made it progressive.
In conclusion I found this project a great experience really. My main goal really was to see if I could create the same thing, how long it would take and how much money it would cost. I’d have to say all in all that I spent about 10 to 12 hours total on it and I already had all the equipment so it didn’t cost anything other than my time, electricity and coffee. Though if I had to do it from scratch the budget would have to be in the range of 4 digit number or so just to get the camera and software to make the video. I already knew how to key video but it was good practice again especially with the limited time and budget I had decided to put towards this project. Combining video, graphics and interactive elements is definitely something that only Flash can do at the moment and it’s a lot of fun working on a project like this. I do wish I could have gone all out and hosted it with FCS so I could see the real difference between the original and my version though.
The one thing I could have done different I suppose is to put a bit more energy into the coding in Flash, and also to be a bit more precise with the encoding of the flv file. It currently sits a bit over 2MB which is a bit large I think and due to the high data rate plays a bit choppy on a slow computer. I’m positive it could have been made a lot smaller if only it was possible to have alpha channels in FLV files, but I think that day is quite a ways away. We’ll see though.
For a few other details that may have been left out, please see the original post on my blog:http://www.sti-media.com/blog/archives/000073.html
