Flex Examples
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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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
@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
Sorry, I should have read my own post above…
This works for me using the Spark VideoDisplay control:
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:
And the custom Spark VideoPlayer skin, skins/CustomSparkVideoPlayerSkin.mxml, is as follows:
Basically it is the same as the default Spark VideoPlayerSkin except I only include the background Rect in the full screen states:
Peter
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 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
Sorry.. the 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">
sorry for spamming your blog. dont now how to post code… Christian
But, but, but…. It’s 48 point red/white text!
Sorry, I really need to apologize. I saw that big hint. But forgot the ; behind the < and >. 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 < and >. 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
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.