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

In a previous example, “Displaying a semi-transparent FLV file in an MX VideoDisplay control in Flex”, we saw how you could display an FLV file with alpha channel transparency in an MX VideoDisplay control in Flex 3 by setting the backgroundAlpha style to 0.

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

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?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-4/ -->
<s:Application name="MX_VideoDisplay_contentBackgroundAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <s:Rect width="100%" height="100%">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="red" />
                <s:GradientEntry color="blue" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <mx:VideoDisplay id="vidDisp"
            source="walking.flv"
            contentBackgroundAlpha="0.0"
            width="80%" height="80%"
            horizontalCenter="0" verticalCenter="0"
            complete="event.currentTarget.play();"/>
 
</s:Application>

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

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

12 thoughts on “Displaying a semi-transparent FLV file in an MX VideoDisplay control in Flex 4

  1. Hi Peter, how would you display an FLV file with alpha channel transparency in an Spark VideoDisplay control? Is that possible. And how would you do so, if the video is displayed via the spark VideoPlayer control. Any clue? Christian

    1. @Christian,

      I don’t know that I’ve tried an FLV with an alpha channel. Do you have a small alpha’ed FLV that you can post somewhere so I can take a look.
      I imagine you’d need to create a custom skin for the Spark video controls that would remove any potential background fill.

      Peter

      1. Sorry, I should have read my own post above…

        This works for me using the Spark VideoDisplay control:

        <?xml version="1.0" encoding="utf-8"?>
        <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx">
         
            <s:Rect width="100%" height="100%">
                <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="red" />
                        <s:GradientEntry color="blue" />
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>
         
            <s:VideoDisplay id="vidDisp"
                    source="walking.flv"
                    loop="true"
                    width="80%" height="80%"
                    horizontalCenter="0" verticalCenter="0" />
         
        </s:Application>

        Peter

      2. And if you want to display a transparent FLV using the Spark VideoPlayer control you will need to do a custom skin, as seen in the following example:

        <?xml version="1.0" encoding="utf-8"?>
        <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx">
         
            <s:Rect width="100%" height="100%">
                <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="red" />
                        <s:GradientEntry color="blue" />
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>
         
            <s:VideoPlayer id="vidDisp"
                    source="walking.flv"
                    loop="true"
                    skinClass="skins.CustomSparkVideoPlayerSkin"
                    width="80%" height="80%"
                    horizontalCenter="0" verticalCenter="0" />
         
        </s:Application>

        And the custom Spark VideoPlayer skin, skins/CustomSparkVideoPlayerSkin.mxml, is as follows:

        <?xml version="1.0" encoding="utf-8"?>
        <!-- A chrome color of 0xCCCCCC in the fullScreenStates means we ignore the chromeColor property 
        all together as 0xCCCCCC is essentially just a no-op color transform -->
        <s:SparkSkin name="CustomSparkVideoPlayerSkin"
                xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                alpha.disabledStates="0.5" 
                chromeColor.fullScreenStates="0xCCCCCC">
            <!-- states -->
            <s:states>
                <s:State name="uninitialized" stateGroups="uninitializedStates, normalStates" />
                <s:State name="loading" stateGroups="loadingStates, normalStates" />
                <s:State name="ready" stateGroups="readyStates, normalStates" />
                <s:State name="playing" stateGroups="playingStates, normalStates" />
                <s:State name="paused" stateGroups="pausedStates, normalStates" />
                <s:State name="buffering" stateGroups="bufferingStates, normalStates" />
                <s:State name="playbackError" stateGroups="playbackErrorStates, normalStates" />
                <s:State name="disabled" stateGroups="disabledStates, normalStates"/>
                <s:State name="uninitializedAndFullScreen" stateGroups="uninitializedStates, fullScreenStates" />
                <s:State name="loadingAndFullScreen" stateGroups="loadingStates, fullScreenStates" />
                <s:State name="readyAndFullScreen" stateGroups="readyStates, fullScreenStates" />
                <s:State name="playingAndFullScreen" stateGroups="playingStates, fullScreenStates" />
                <s:State name="pausedAndFullScreen" stateGroups="pausedStates, fullScreenStates" />
                <s:State name="bufferingAndFullScreen" stateGroups="bufferingStates, fullScreenStates" />
                <s:State name="playbackErrorAndFullScreen" stateGroups="playbackErrorStates, fullScreenStates" />
                <s:State name="disabledAndFullScreen" stateGroups="disabledStates, fullScreenStates"/>
            </s:states>
         
            <!-- host component -->
            <fx:Metadata>
                [HostComponent("spark.components.VideoPlayer")]
            </fx:Metadata>
         
            <fx:Script fb:purpose="styling">
                <![CDATA[
                    /* Define the skin elements that should not be colorized. */
                    static private const exclusions:Array = ["videoDisplay", "playPauseButton", "scrubBar", 
                                                             "currentTimeDisplay", "timeDivider", "durationDisplay", 
                                                             "volumeBar", "fullScreenButton"];
         
                    override protected function initializationComplete():void {
                        useChromeColor = true;
                        super.initializationComplete();
                    }
         
                    override public function get colorizeExclusions():Array {
                        return exclusions;
                    }
         
                    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                        dropShadow.visible = getStyle("dropShadowVisible");
         
                        super.updateDisplayList(unscaledWidth, unscaledHeight);
                    }
                ]]>
            </fx:Script>
         
            <!-- drop shadow -->
            <s:RectangularDropShadow id="dropShadow" blurX="17" blurY="17" alpha="0.32" distance="4" 
                        angle="90" color="#131313" left="0" top="0" right="0" bottom="0" 
                        excludeFrom="fullScreenStates"/>
         
            <!--- Video and player controls are clipped if they exceed the size of the 
                  component, but the drop shadow above is not clipped and sizes to the component.
                  We also set verticalScrollPosition so that when we do clip, rather than clipping  
                  off the bottom first, we clip off the top fist.  This is so the player controls 
                  are still visible when we start clipping. -->
            <s:Group id="clippedGroup" clipAndEnableScrolling="true" left="0" top="0" right="0" bottom="0" 
                     verticalScrollPosition="{Math.max(0, 184-clippedGroup.height)}">
                <!-- There's a minimum size for the video and controls.  If we go below that
                     we are clipped. -->
                <s:Group minWidth="263" minHeight="184" left="0" right="0" top="0" bottom="0">
                    <!-- background when the videoDisplay doesn't fill its whole spot -->
                    <s:Rect bottom="1" left="1" right="1" top="1"
                            bottom.fullScreenStates="0" left.fullScreenStates="0" 
                            right.fullScreenStates="0" top.fullScreenStates="0"
                            includeIn="fullScreenStates">
                        <s:fill>
                            <s:SolidColor color="0x000000" />
                        </s:fill>
                    </s:Rect>
         
                    <s:VideoDisplay id="videoDisplay" bottom="24" left="1" right="1" top="1" 
                                    bottom.fullScreenStates="0" left.fullScreenStates="0" 
                                    right.fullScreenStates="0" top.fullScreenStates="0" />
         
                    <!-- video player controls -->
                    <s:Group left="0" right="0" height="24" bottom="0" bottom.fullScreenStates="150">
                        <!-- actual controls with a maxWidth in non-fullScreen mode -->
                        <s:Group bottom="0" horizontalCenter="0" left="0" right="0" maxWidth.fullScreenStates="755" id="playerControls">
                            <s:ToggleButton id="playPauseButton" left="0" bottom="0" 
                                    skinClass="spark.skins.spark.mediaClasses.normal.PlayPauseButtonSkin" 
                                    skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.PlayPauseButtonSkin"
                                    layoutDirection="ltr"
                                    focusIn="event.target.depth=1" focusOut="event.target.depth=0" />
         
                            <!-- scrubbar + the currentTime/duration labels -->
                            <s:Group left="39" right="75" top="0" bottom="0">
         
                                <!-- background for scrubbar + the currentTime/duration -->
                                <s:Rect left="0" right="0" top="0" bottom="0">
                                    <s:fill>
                                        <s:LinearGradient rotation="90">
                                            <s:GradientEntry color="0xFFFFFF" color.fullScreenStates="0x585858" alpha.fullScreenStates="0.55"/>
                                            <s:GradientEntry color="0xDCDCDC" color.fullScreenStates="0x1E1E1E" alpha.fullScreenStates="0.55"/>
                                        </s:LinearGradient>
                                    </s:fill>
                                </s:Rect>
         
                                <!-- fill highlight  (exclude in fullScreen) -->
                                <s:Rect left="1" right="1" top="1" height="11" excludeFrom="fullScreenStates">
                                    <s:fill>
                                        <s:SolidColor color="0xFFFFFF" alpha="0.3" />
                                    </s:fill>
                                </s:Rect>
         
                                <!-- one pixel border -->
                                <s:Rect left="1" right="1" top="1" bottom="1">
                                    <s:stroke>
                                        <s:LinearGradientStroke weight="1" rotation="90">
                                            <s:GradientEntry color="0xFEFEFE" color.fullScreenStates="0xFFFFFF" alpha.fullScreenStates="0.12" />
                                            <s:GradientEntry color="0xEAEAEA" color.fullScreenStates="0xFFFFFF" alpha.fullScreenStates="0.09" />
                                        </s:LinearGradientStroke>
                                    </s:stroke>
                                </s:Rect>
         
                                <!-- border for the scrubbar/time label controls -->
                                <s:Rect left="-1" right="0" top="0" bottom="0">
                                    <s:stroke>
                                        <s:SolidColorStroke color="0x131313" color.fullScreenStates="0x222222" alpha.fullScreenStates="0.66"  />
                                    </s:stroke>
                                </s:Rect>
         
                                <!-- scrub bar + currentTime/duration in a HorizontalLayout -->
                                <s:Group left="0" right="0" height="23" bottom="0">
                                    <s:layout>
                                        <s:HorizontalLayout verticalAlign="middle" gap="1" />
                                    </s:layout>
         
                                    <!-- spacer -->
                                    <s:Rect width="7" height="1" />
         
                                    <s:ScrubBar id="scrubBar" width="100%" liveDragging="true"
                                            skinClass="spark.skins.spark.mediaClasses.normal.ScrubBarSkin"
                                            skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.ScrubBarSkin" />
         
                                    <!-- spacer -->
                                    <s:Rect width="8" height="1" />
         
                                    <s:Label id="currentTimeDisplay" color.fullScreenStates="0xFFFFFF" />
         
                                    <s:Label id="timeDivider" text="/" color.fullScreenStates="0xFFFFFF" />
         
                                    <s:Label id="durationDisplay" color.fullScreenStates="0xFFFFFF" />
         
                                    <!-- spacer -->
                                    <s:Rect width="8" height="1" />
                                </s:Group>
                            </s:Group>
         
                            <s:VolumeBar id="volumeBar" snapInterval=".01" stepSize=".01" liveDragging="true"
                                    right="37" bottom="0" 
                                    layoutDirection="ltr"
                                    skinClass="spark.skins.spark.mediaClasses.normal.VolumeBarSkin"
                                    skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.VolumeBarSkin"
                                    focusIn="event.target.depth=1" focusOut="event.target.depth=0" />
         
                            <s:Button id="fullScreenButton" right="0" bottom="0" label="Fullscreen" 
                                    skinClass="spark.skins.spark.mediaClasses.normal.FullScreenButtonSkin"
                                    skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.FullScreenButtonSkin"
                                    focusIn="event.target.depth=1" focusOut="event.target.depth=0" />
                        </s:Group>
                    </s:Group>
         
                    <!-- border -->
                    <s:Rect left="0" right="0" top="0" bottom="0" excludeFrom="fullScreenStates">
                        <s:stroke>
                            <s:SolidColorStroke color="0x131313" />
                        </s:stroke>
                    </s:Rect>
                </s:Group>
            </s:Group>
         
        </s:SparkSkin>

        Basically it is the same as the default Spark VideoPlayerSkin except I only include the background Rect in the full screen states:

                   <!-- background when the videoDisplay doesn't fill its whole spot -->
                    <s:Rect bottom="1" left="1" right="1" top="1"
                            bottom.fullScreenStates="0" left.fullScreenStates="0" 
                            right.fullScreenStates="0" top.fullScreenStates="0"
                            includeIn="fullScreenStates">
                        <s:fill>
                            <s:SolidColor color="0x000000" />
                        </s:fill>
                    </s:Rect>

        Peter

  2. Oh wow! Yes it also works for me perfectly. Thanks!!

    But I really don’t understand why. But one step after the other
    1.)RE: VideoDisplay: Obviously the Spark VideoDisplay recognizes the alpha channel transperency itself. And as you wrote it works without any style set (e.g. contentBackgroundAlpha = 0.0). Thats fine for me so far. But what if I don’t want VideDisplay to use the alpha channel. At the moment this is actually not my problem, but it could become one.

    2.)RE: VideoPlayer: Why does including the background rectangle in the full screen state tell the VideoDisplay within the VideoPlayer to use the video’s alpha channel? I’m quite new to Flex4 and maybe I misunterstood some basic concept.

    Thanks a lot!
    Christian

  3. oh OK… I see… I now understand my second question: If the background rectangle is included in full Screen States, it is simply exclude from the other states. To fully remove it from any state, I have to remove the rectangle from the skin.

    I encountered another problem. I dont know if this is the right spot to ask for it. Anyway: I’d like to video controls that come with the Spark Video Player to be invisble until the user mouse overs the videoplayer. I did the following in the VideoPlayer Skin Class (only the relevant code blocks):

    ...

    ...

    ...

    It works when the mouse pointer enteres the videoplayer and the controls appear. The problem ist, that the controls disappear when the mouse is over the controls (play/pause button, scrubber, etc.) or the videoDisplay. In this case the mouse is obviously considered to be “out of” the main group and over the controls and videoDisplay respectively.

    Any clue for that, although this might be the wrong spot for those questions.

    Thanks a lot, Christian

  4. Sorry.. the code:

    ... &lt!-- defining show and hide effects in the declaration block --&gt
    &ltfx:Declarations&gt
    &lt!-- effects --&gt
    &lts:Fade alphaFrom="0" alphaTo="1" id="fadeIn" /&gt
    &lts:Fade alphaFrom="1" alphaTo="0" id="fadeOut" /&gt
    &lt/fx:Declarations&gt

    ... &lt!-- setting event listener for the relevant mouse events --&gt

    &lts:Group id="clippedGroup" clipAndEnableScrolling="true" left="0" top="0" right="0" bottom="0"
    verticalScrollPosition="{Math.max(0, 184-clippedGroup.height)}"
    mouseOver="this.videoPlayerControls.visible=true" mouseOut="this.videoPlayerControls.visible=false"&gt

    ... &lt!-- setting show and hide effects for the control group and making it invisible --&gt

    &lt!-- video player controls --&gt
    &lts:Group left="0" right="0" height="24" bottom="0" bottom.fullScreenStates="150"
    id="videoPlayerControls"
    visible="false"
    showEffect="fadeIn" hideEffect="fadeOut"&gt

      1. Sorry, I really need to apologize. I saw that big hint. But forgot the ; behind the &lt and &gt. So here’s my code again:

        <!– defining show and hide effects in the declaration block –>
        <fx:Declarations>
        <!– effects –>
        <s:Fade alphaFrom=”0″ alphaTo=”1″ id=”fadeIn” />
        <s:Fade alphaFrom=”1″ alphaTo=”0″ id=”fadeOut” />
        </fx:Declarations>

        <!– setting event listener for the relevant mouse events –>

        <s:Group id=”clippedGroup” clipAndEnableScrolling=”true” left=”0″ top=”0″ right=”0″ bottom=”0″
        verticalScrollPosition=”{Math.max(0, 184-clippedGroup.height)}”
        mouseOver=”this.videoPlayerControls.visible=true” mouseOut=”this.videoPlayerControls.visible=false”>

        <!– setting show and hide effects for the control group and making it invisible –>

        <!– video player controls –>
        <s:Group left=”0″ right=”0″ height=”24″ bottom=”0″ bottom.fullScreenStates=”150″
        id=”videoPlayerControls”
        visible=”false”
        showEffect=”fadeIn” hideEffect=”fadeOut”>

      2. Sorry, I really need to apologize. I saw that big hint. But forgot the ; behind the &lt and &gt. So here’s my code and my question again:

        I encountered another problem. I dont know if this is the right spot to ask for it. Anyway: I’d like to video controls that come with the Spark Video Player to be invisble until the user mouse overs the videoplayer. I did the following in the VideoPlayer Skin Class (only the relevant code blocks):

        <!-- defining show and hide effects in the declaration block -->
        <fx:Declarations>
        <!-- effects -->
        <s:Fade alphaFrom="0" alphaTo="1" id="fadeIn" />
        <s:Fade alphaFrom="1" alphaTo="0" id="fadeOut" />
        </fx:Declarations>

        <!-- setting event listener for the relevant mouse events -->

        <s:Group id="clippedGroup" clipAndEnableScrolling="true" left="0" top="0" right="0" bottom="0"
        verticalScrollPosition="{Math.max(0, 184-clippedGroup.height)}"
        mouseOver="this.videoPlayerControls.visible=true" mouseOut="this.videoPlayerControls.visible=false">

        <!-- setting show and hide effects for the control group and making it invisible -->

        <!-- video player controls -->
        <s:Group left="0" right="0" height="24" bottom="0" bottom.fullScreenStates="150"
        id="videoPlayerControls"
        visible="false"
        showEffect="fadeIn" hideEffect="fadeOut">

        It works when the mouse pointer enteres the videoplayer and the controls appear. The problem ist, that the controls disappear when the mouse is over the controls (play/pause button, scrubber, etc.) or the videoDisplay. In this case the mouse is obviously considered to be “out of” the main group and over the controls and videoDisplay respectively.

        Any clue for that, although this might be the wrong spot for those questions.

        Thanks a lot, Christian

  5. The problem here is how the media servers expect to get the ‘application’ and the ‘file name’ you will be streaming. The query string variables must be passed to the application. But when the VideoPlayer component takes the source you give it and passes it to the server, it passes the query string variables with the file name.

Comments are closed.