Friday, March 28, 2008

Adobe Flex - Flash Programming for Programmers!

One of the features that I was really excited about implementing in Ringlight was a Flash-based media player for browsing photos, videos, and audio files. I like the idea of being able to view all of my files from any computer with a web browser without having to download them first.

Unfortunately, Flash programming is not the most natural occupation for me. I find the concept of laying your code out on a timeline which trudges ever forward, causing variables to go in and out of scope based on the ticking of a clock... well, I don't like it very much. I don't particularly appreciate the Flash IDE or the fact that Flash source is in a binary file either. I don't mean to malign the art of the Flash programmer. I know you all have heroically found workarounds to all of these inconveniences and I salute your dedication. It's just not my cup of tea.

However, now we have Adobe's Flex. It fixes most of my problems with Flash programming because it's Flash programming designed for programmers. The entire source for a Flex project is in an XML file. While I am not one to jump on the XML-solves-everything wagon, it does mean that you can edit for Flash applications in a text editor, check them into source control, and cut-and-paste whole projects to your blogs and chats and such.

Additionally, the compiler is free and cross-platform. This means you can compile your Flash apps right on your server. No more compiling on your desktop, uploading to the server, testing, and repeat. There's even an Apache module which will automatically detect changes in the source and recompile apps for you on demand. Sweet.

This is not to say that Flex is without problems. Flex coding can be as frustrating as Flash programming sometimes. I recently had a terrible time trying to follow online tutorials for making a Flex image browser. They all suggested using the Loader class, but it had some issues with image scaling. However, the suggested workaround for image scaling involves accessing the raw bitmap data of the image. This operation is unfortunately blocked by Adobe's inane and pointless security model, which requires that to access the raw bitmap data of an image the site hosting the image must authorize it in their crossdomain.xml file. So you are totally free to write a Flex image gallery for Flickr photos, but if you want to scale them then that's not allowed! The workaround is to just use the Image class instead of Loader. You don't get the right events to have a fancy loading animation this way, but at least it works.

Check out my Flex image loader example code. It's not finished as the buttons don't work yet, but it does load images just fine.

All in all I'd say that Flex is a breath of fresh air in the world of Flash programming. If you're a programmer then I'd recommend that you try it out.

Tuesday, March 4, 2008

Fullscreen Hardware-Accelerated H.264 Flash Video

Before I went to San Francisco to develop peer-to-peer Internet video solutions for BitTorrent, I was promoting my own peer-to-peer video streaming solution, Alluvium. There was a lot of interest in the time in p2p acceleration for video streaming and Alluvium had a unique take, pushing DVD quality videos over standard consumer broadband Internet connections. I pitched this software to KLRU, our local Austin PBS affiliate, and their comments would be the same ones that I would hear from everyone. They loved it, they were shocked by the quality, they desperately wanted to get all of their content online as soon as possible and that they needed p2p in order to make the economics work out. They only had one problem with Alluvium. It used its own customer player, a necessity to achieve quality playback. They wanted a Flash player because they wanted to integrate the player directly into their website.

Unfortunately, Flash has never been synonymous with high-quality video. At the time, Flash was missing two components necessary to be used for high-quality video: support for the H.264 codec, which makes files small enough to stream over cable modem but with DVD quality, and hardware-accelerated fullscreen playback, which let's you watch them fullscreen without your computer grinding to a halt.

With the release of Flash 9, Beta 3, (Release #115), Flash now supports these features. With this release, Adobe is positioned to dominate the high-quality Internet video market. Unfortunately, achieving the holy grail of hardware-accelerated fullscreen H.264 video in Flash is not by any means simple and neither the official documentation nor the tutorials available online clarify things.

I have, therefore, drafted this list of tips for people pursuing this noble goal.

  • The only way to achieve fullscreen, H.264, and hardware-acceleration at the same time is to use the FLVPlayback component. Several other options which you might read about should be ignored, such as Video, VideoPlayer, NetStream, and NetConnection.
  • You must use the ActionScript 3.0 version of FLVPlayback. There is an ActionScript 2.0 version available, but it does not have fullscreen support.
  • If you are integrating the player into an existing application, you must rewrite all of your ActionScript 2.0 code to be ActionScript 3.0, as your cannot mix code from the two language variants.
  • Make sure in your Publish Settings that you are exporting as both Flash 9 and ActionScript 3.0.
  • You will need a very recent version of the Flash development environment. You will need Flash CS3 and most likely will need to install all of the available updates.
  • You will need a very recent version of the Flash plugin, at least 9.0 r115.
  • Fullscreen mode for Flash 9.0 r115 for Linux does not work well at all. Even normal quality YouTube videos play back very slowly in fullscreen mode.
  • The supported video formats are Sorenson, VP6, and H.264 codecs in either .flv, .mov, or .mp4 containers. You cannot play .avi, or .wmv files. Not all .mov and .mp4 files will play as some may use other codecs.
  • In order to make a H.264 file, use QuickTime Pro. This is just the normal QuickTime player after you pay the $30 registration fee. It produces the best quality H.264 files. For the container format, choose .mov as it is the most standard.
  • If you have other H.264 files which you have made previously, you need to make sure that the index is at the beginning of the file. Some programs put the index at the end of the file and these files will not stream. Google for the "QTIndexSwapper" program to fixed files that have the index at the end.
  • If you're streaming files from an HTTP server, they must have a .flv, .mov, or .mp4 extension and not take any CGI arguements. For instance, putting the files up on a normal webserver will work fine, but serving them from a content-management or other dynamic system might not.
Once you have a player working, you might want to customize the buttons and the style of the controls. While the documentation provides several options, the only one I have found to work properly is making a new custom skin from one of the standard skins. To do this, I have provided some additional tips:

  • Find a skin you like in Program Files\Adobe\Adobe Flash CS3\en\Configuration\FLVPlayback Skins\FLA\ActionScript 3.0\
  • Copy it and edit it as you'd like.
  • To edit the controls, edit the versions in the library. The items you see on the stage are just examples for you to look at. The actual skin used by the player is created dynamically by pulling thing out of the skin movie file's library.
  • Choose the skin for the FLVPlayback component in the Parameters configuration window, using the skin property.
  • In order for your skin to show up in the list of possible skins. publish it and copy the resulting .swf file to Program Files\Adobe\Adobe Flash CS3\en\Configuration\FLVPlayback Skins\ActionScript 3.0\
  • Make sure that when you upload your final player .swf file to your webserver and you also upload the skin .swf file. Also make sure that both files are readable by the webserver. Otherwise, the controls for your player may not show up.
I hope that this has helped you in your pursuit of fullscreen high-quality video in Flash. It's certainly been an epic journey for me and I'm glad to finally have a working Flash player. Unfortunately, like most media players, it has a visual glitch when switching from one video file to the next in fullscreen mode. It briefly shows the controls on every video transition. This is the exact sort of annoying behavior which we found in every video player and which eventually lead us to writing our own (very nice) player. However, Flash is most likely going to be the king of Internet video, so you have to work with what you have.