September 04, 2004

My spoof on MM's new flash video banner

When I first saw the new flash video banner a little less than a week ago I was quite impressed with the quality compared with the speed it streamed in. It took me a bit to figure it out, but they are definitely using Flash Communication Server for that. I truly wonder how they aren't burning up their FCS servers having it on the home page with the amount of people that go through there maybe not even watching the whole video. Connections/disconnections.. I did something like that once on my site and FCS crashed the server after about 10000 connections/disconnections or so. It just wasn't cleaning stuff up fast enough. I'm sure they've messed with that part in FCS though so that it doesn't happen to them.

So, on to what I created and why.

The banner that I'm talking about is the one with the blonde girl wandering across looking at the "flash video gallery". This banner they made I found quite impressive and thought to myself "that's pretty cool, great effect on the user and it's not intrusive. It's got an impact yet is not impacting". If you just had the video on there and no girl walking across it would have much less of an effect I think, and if it was just a girl walking across the screen you wouldn't have the "gallery" theme that it is based on.

Not only that, I was extremely impressed with the quality of the video in all, especially with the keying work they did with the girl. Most likely they have an expensive studio on hand with some high end cameras and all the software to do it in. I'd love to know their process and equipment they used, though I have some idea..

While looking at it, I wondered how they got the video so clean yet FLV video files don't support alpha.. did they do it with PNG's? Nope, the whole thing is one FLV, which surprised me because I couldn't see the telltale "shifting" of pixels when graphics are compressed with video. It really did look like the video was on top of the graphics that were in flash.

Thinking on all of this, I decided that I wanted to build the same thing, mainly just to see if I could do it really and how close I could get the quality to the original.

If you haven't seen the real thing, then here it is (reload the page until you get the banner with the girl and "flash gallery").

Mine is a bit different though (It's a guy version... starring yours truly) and the theme is a bit different though the design is close to the same. Unfortunately, I don't have a vodafone phone nor a wrist watch that I can talk to my buddies on, so I had to settle for my Docomo Fujitsu F900iT (which happens to be the latest and greatest model out right now in Japan) to chat it up with video (which it can actually do.. and it's very very cool, but expensive, to have a vid chat on your phone). The second vid is a dragon boat race that I actually competed in a couple of years ago (hell of a lot of fun, I recommend it to anyone) spiffed up with some extra voice stuff I had and some "news" graphics. Here's my version. Keeping in mind this is a "funny" version, not meant seriously in anyway. All fun and games :D It's also not an FCS version (progressive) so if it streams funny, just reload the page 'cause I haven't bothered with preloading or anything (too lazy)

The tools of my trade you ask? Premiere pro 1.5 to get the vid off my Sony T30 handycam. After Effects 6.5 to chroma key the vid of me walking around, warp the vid in the phone and mix a few vids to get the right feeling of a "beach party" plus the mixing of voice and vid for the "flash news". Adobe Audition 1.5 to mess with the sounds a bit to get them the right tone for what would be the phone's tiny speaker sound, and to tone down some of the other voices/sound. After it was all edited together, I then brought it into Squeeze 4.0 to spit it out as an flv (which turned out great!) and then it was off to FlashMX2004 to make up the script to load in the flv, set the button and back graphics. I originally had the back graphics in the video but decided it would be best to just keep that in flash and mask the corners of the vid so that it didn't show outside of the white area. Graphics were all done in Photoshop, but I have to say.. I'm not much of a graphic person...

I think it turned out pretty good actually (not to toot my own horn but...) and I'm quite happy with what I learnt in the process. Taking video, keying, editing it and getting it ready for Flash and the web is quite a process I think, and at times there is quite a bit of trial and error. It takes more time when your comp is bogged down due to too many high-end cpu/memory hogging apps running at the same time, but nothing too bad (playin' with the cats and stuff while waiting for renders...etc). It's not like I haven't done this stuff before, but I found this time to be a bit different. Can't really explain it, but it was like trying to not only achieve a goal, but to surpass it and go the extra distance. No money involved, no clients, just a desire to see a theme, project, idea in my mind come to life. In fact, this idea bugged me so much I ended up staying up the night rebuilding my little studio here and setting up all the equipment, then taking the video! At like 5 in the morning! :D But it's ideas that come to me just as I'm about to go to sleep that really work out. The only problem is that if I don't get up and do it.. I usually forget half of it, and never go about getting it done.

A truly fun experience, and I'm even thinking of making a couple more versions as I've had some seriously funny ideas come to me from friends that I'd like to put in. Spoofs.. like Monty Python. I love those guys.. way too funny.

Posted by Graeme at September 4, 2004 01:16 AM
　



Comments

Excellent post - I haven't used the adobe tools but this get one thinking

Posted by: cvb at September 4, 2004 03:18 AM

No need to reload,mm version is here:
http://www.macromedia.com/swf/homepage/fma/en_us/assets/FMA_video_gallery.swf

BTW:Thx for sharing your idea.

Posted by: Danger at September 4, 2004 03:51 AM

Hi Graeme,

Very nice job on the spoof. We know the video capabilities in Flash are state of the art, but it’s good to see customers such as you starting to really understand what you can do. I mean, look at what you’ve done here: Video within video! Customized UI! Video that “questions the rectangle” – Wow! Let’s see any other video platform do that!

Just a couple of quick notes to your comments/observations:

Re: FCS connections – An alternative way to stream video with Flash Communication Server where you don’t have to worry about using up the connection limits on the license is to use the Flash Video Streaming Service, available via our CDN partners VitalStream and Speedera. The service also has server redundancy and automatic load balancing and failover so you can stick to making those great experiences while “the plumbing” is taken care of for you. It’s what we use here.

Re: Wondering how we did this/what equipment we used – Looks like you got this part figured it out. Perhaps we should get you to write the Dev Center article!

Again, good job. Now if only your “model” looked as sexy as ours. ;-)

Best regards,
Chris

Posted by: Chris at September 4, 2004 05:22 AM

Hey Graeme,
Thought I would die laughing!
It's great!
-Brian

Posted by: Brian Lesser at September 4, 2004 05:48 AM

Excellent! Yours is actually a good deal better than the MM version.

Posted by: alex at September 4, 2004 12:31 PM

cvb - Thanks, I wanted to go into a bit more detail to be honest but held off due to "time restrictions". If you get 'em use 'em. Adobe rules.

Danger - thanks bud for the link. It's a bit handier than having to go about reloading the home page. No probs on sharing, I hope somebody got something out of all that other than me :)

Brian - So you found it funny eh? excellent! I was hoping somebody would get some laughs out of it. I've got a whole bunch of other versions running through my head, so we'll see when I have some time if a couple of new versions make it up!

Alex - Thanks! Not sure if it's "better", but I like it better hahaha. Maybe MM should hire me then to do their video banners... hmmm

Thanks all for the comments, much appreciated :D

Posted by: Graeme Bull at September 4, 2004 06:08 PM

Chris, thanks for popping in to take a gander at a spoof on your guys' hard work. I'm glad MM didn't take it the wrong way and did see it as the joke that it is. *A wave of relief rolls through the studio*

A couple of comments on your comments though, the video in video isn't really flash it's AE, but I truly agree with you on the customized UI and "questions the rectangle" bit. Flash rules when it comes to this stuff, and I can guarantee we are going to see a LOT more coming up in the near future. I can't wait to see the ideas that people come up with.

I figured that you guys were using VitalStream or Speedera, but I've not the cash for something liket that, so it went progressive. Though I do think services like that rule, and will most likely steer clients that way when they need them. Whether I can think of and build all the redundancy and "plumbing" for the app, at times it just isn't worth it, especially for short time projects.

As for me figuring it out.. I'm not sure about that. I'm positive you guys are using better stuff than I do, and most likely have the "decked out studio" or the cash to rent one. Still, I guess in the end if the result is the same it hardly matters what you have :)

Are you serious that you'd like a devnet article written? I wouldn't mind at all, and I can even do it in 2 languages! haha.. But please let me know if so.

As for the model, I couldn't get "sexy" at 5 in the morning, she was sleeping and would kill me if I woke her up. So unfortunately I turned to the next best thing! :D I bet I can beat your model in an arm wrestling match though ;)

Posted by: Graeme Bull at September 4, 2004 06:20 PM

Hi Graeme. Just thought I'd comment on the great spoof you made. I love doing spoofs myself. The first flash spoof I made was of the splash screen inside Flash MX 2004 Pro. I used it for a fake company just to give it some sort of use. Link: http://www.labrat.filetap.com/old

Anyways, nice job on the spoof. I'd love to see what else you do with it :)

Have a good one.

Steve

Posted by: Steve at September 5, 2004 11:47 PM

Thanks for comments Steve! Nice one with the flash help screen spoof. I'll see what I can cook up with another spoof in the near future :D As soon as I finish up all this waiting client work..

Posted by: Graeme Bull at September 6, 2004 10:52 PM

Excellent explanation and project. I have been frustrating over how to get alpha transparency with video. Does the background of your Flash piece have to be the background of the FLV video you bring in?

Posted by: Chris at September 11, 2004 03:21 AM

Yes Chris it does because FLV's don't support transparency. If I didn't walk in front of the background I could have gotten away with just flv.

Posted by: Graeme at September 12, 2004 03:31 AM

Hi!
Good job. If you need to have the video without the background, I think the following should work:
- Make the bluescreen video and make the background white.
- Convert the video to black and white (with the person in black and the background in white) and export it to an image sequenze.
- Import the video in one layer, and the image sequence in the layer above.
- Trace all the images and remove the white backgrounds (can be done automatically with JSFL)
- Turn the top layer into a mask

Of course, that mean the video must be in swf (for instance in a movie clip), but you could change the background. The front video wouldn't have a soft edge (anti-alias), so it wouldn't look as good as a proper composited video, but if you wanted video people in a game or something like that...

Anyway, just an idea... And if somebody want to play with video and doesn't have the adobe tools, it's possible to do interesting stuff with a program like virtualdub as well :-) The last version (1.6) can export raw YUV-avi which can be used with sorensen squeeze, while all versions work with the Macromedia import. Great program to optimize the video for compression.

Posted by: Tore at September 13, 2004 10:41 PM