Saturday, 18 July 2009

ITube, WeTube, YouTube...

With the first in a series of Adobe Flash animated shorts completed, the next task was to output the Flash to a video format for distribution on YouTube. There are a few steps in this process:

1) Aspect Ratio
YouTube now supports both standard definition (SD) and high definition (HD) video with aspect ratios of 4:3 (SD) and 16:9 (HD). For these shorts I opted to work at SD and found a resolution of 800 x 600 works well for production in Adobe Flash. If you opt for HD, a resolution of 1280 x 720 is recommended by YouTube.

Note: YouTube now ships the High-Def player, so if you do select SD, YouTube will add bars either side of your video. Yes, HD is the future, but consider that many projectors still operate on an aspect ratio of 4:3 (although most plasma/cinema projection systems display the widescreen HD format).

2) H.264 Codec & Supported Video Formats
OK, so having decided on SD or HD output, set stage dimensions in Adobe Flash to match the output resolution and completed the animation, the next task is to output this to a video format which YouTube can handle. In fact, really the video format is almost academic, its the codec which is important. (A codec is an algorithm for compressing video for distribution).

The darling of the codec world at the moment is H.264, an impressive algorithm which produces extremely high quality output with low file sizes, perfect for Internet delivery. YouTube supports H.264, MPEG-2 or MPEG-4. Amongst the YouTube friendly formats which can use H.264 are: Quicktime (.mov), MPEG4 (with mp3 audio) and DivX. (Note: At the time of writing this article, YouTube does not support the native Flash video format .flv). For more information on YouTube supported codecs, see YouTube Help.

3) Exporting From Adobe Flash (CS3 and above) To QuickTime (.mov)
If you've used movie clips on the root timeline or if you've generated the entire animation via Actionscript, then exporting to QuickTime (.mov) from Adobe Flash will render the video correctly. You can also take advantage of the H.264 codec. In Adobe Flash, Goto File > Export > Export Movie and select "QuickTime (.mov)" from the available format options. The "QuickTime Export Settings" dialogue window will appear.

Note: Ignore stage colour (generate alpha channel) renders the stage background transparent, so the background of the host application (e.g. web page in a browser) will show through.

To apply the H.264 codec, select the "QuickTime Settings" button on the dialogue window. The "Movie Settings" dialogue window will appear, which allows access to advanced settings for video, sound and streaming. Under "Video", press the "Settings" button. The "Standard Video Compression Settings" dialogue will appear. Select "H.264" from the available codec options to export with the H.264 codec.

Et VoilĂ ! One animated video for YouTube...