Displaying a semi-transparent FLV file in an MX VideoDisplay control in Flex

VideoDisplay

The following example shows how you can display an FLV file with alpha channel transparency in an MX VideoDisplay control in Flex 3 by setting the backgroundAlpha style to 0.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_backgroundAlpha_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="absolute"
        backgroundGradientColors="[#FF0000,#0000FF]">
 
    <mx:VideoDisplay id="vidDisp"
            source="walking.flv"
            backgroundAlpha="0.0"
            width="80%" height="80%"
            horizontalCenter="0" verticalCenter="0"
            complete="event.currentTarget.play();"/>
 
</mx:Application>

The walking.flv can be found at the “Introducing True Alpha Video in Flash 8” article in the Adobe Flash Developer Center.