Comments on: Displaying a semi-transparent FLV file in an MX VideoDisplay control in Flex 4 http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex-4/ Just a bunch of Adobe Flex Examples Sun, 12 Feb 2012 19:26:49 +0000 hourly 1 By: credit repair agencies http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex-4/comment-page-1/#comment-9960 credit repair agencies Mon, 26 Sep 2011 02:28:27 +0000 http://blog.flexexamples.com/?p=2327#comment-9960 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. 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.

]]> By: Christian http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex-4/comment-page-1/#comment-7590 Christian Mon, 26 Apr 2010 12:56:29 +0000 http://blog.flexexamples.com/?p=2327#comment-7590 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): <code> <!-- 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"> </code> 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 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

]]> By: Christian http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex-4/comment-page-1/#comment-7589 Christian Mon, 26 Apr 2010 12:54:32 +0000 http://blog.flexexamples.com/?p=2327#comment-7589 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"> 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”>

]]> By: Peter deHaan http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex-4/comment-page-1/#comment-7585 Peter deHaan Mon, 26 Apr 2010 05:21:44 +0000 http://blog.flexexamples.com/?p=2327#comment-7585 But, but, but.... It's 48 point red/white text! But, but, but…. It’s 48 point red/white text!

]]> By: Christian http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex-4/comment-page-1/#comment-7581 Christian Sat, 24 Apr 2010 13:39:52 +0000 http://blog.flexexamples.com/?p=2327#comment-7581 sorry for spamming your blog. dont now how to post code... Christian sorry for spamming your blog. dont now how to post code… Christian

]]> By: Christian http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex-4/comment-page-1/#comment-7580 Christian Sat, 24 Apr 2010 13:38:09 +0000 http://blog.flexexamples.com/?p=2327#comment-7580 Sorry.. the code: <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 </code> 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

]]> By: Christian http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex-4/comment-page-1/#comment-7579 Christian Sat, 24 Apr 2010 13:35:17 +0000 http://blog.flexexamples.com/?p=2327#comment-7579 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): <code> ... <!-- defining show and hide effects in the declaration block --> <!-- effects --> ... <!-- setting event listener for the relevant mouse events --> ... <!-- setting show and hide effects for the control group and making it invisible --> <!-- video player controls --> </code> 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 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

]]> By: Christian http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex-4/comment-page-1/#comment-7578 Christian Sat, 24 Apr 2010 12:18:45 +0000 http://blog.flexexamples.com/?p=2327#comment-7578 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 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

]]> By: Peter deHaan http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex-4/comment-page-1/#comment-7575 Peter deHaan Fri, 23 Apr 2010 22:41:05 +0000 http://blog.flexexamples.com/?p=2327#comment-7575 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: <pre lang="mxml"> <?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> </pre> And the custom Spark VideoPlayer skin, <em>skins/CustomSparkVideoPlayerSkin.mxml</em>, is as follows: <pre lang="mxml"> <?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> </pre> Basically it is the same as the default Spark VideoPlayerSkin except I only include the background Rect in the full screen states: <pre lang="mxml"> <!-- 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> </pre> Peter 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

]]> By: Peter deHaan http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex-4/comment-page-1/#comment-7574 Peter deHaan Fri, 23 Apr 2010 22:33:20 +0000 http://blog.flexexamples.com/?p=2327#comment-7574 Sorry, I should have read my own post above... This works for me using the Spark VideoDisplay control: <pre lang="mxml"> <?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> </pre> Peter 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

]]>