Flex Examples
In a previous example, “Setting a roll over open delay on a Spark DropDownList control in Flex 4″, we saw how you could set a roll over open delay on a Spark DropDownList control in Flex 4 by extending the DropDownList control, accessing the protected DropDownController object and setting the rollOverOpenDelay property.
The following example shows how you can set the roll over open delay on a Spark VolumeBar skin part in the VideoPlayer control in Flex 4 by setting the rollOverOpenDelay style.
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/02/04/setting-a-roll-over-open-delay-on-a-spark-volumebar-control-in-flex-4/ --> <s:Application name="Spark_VideoPlayer_volumeBar_rollOverOpenDelay_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:controlBarContent> <mx:Form> <mx:FormItem label="VolumeBar rollOverOpenDelay:"> <s:HSlider id="sl" minimum="0" maximum="2000" change="sl_changeHandler(event);" /> </mx:FormItem> </mx:Form> </s:controlBarContent> <fx:Script> <![CDATA[ private function init():void { // Set initial HSlider value. sl.value = vidPl.volumeBar.getStyle("rollOverOpenDelay"); } protected function sl_changeHandler(evt:Event):void { vidPl.volumeBar.setStyle("rollOverOpenDelay", sl.value) } ]]> </fx:Script> <s:VideoPlayer id="vidPl" source="http://helpexamples.com/flash/video/caption_video.flv" muted="true" horizontalCenter="0" verticalCenter="0" creationComplete="init();" /> </s:Application>
View source is enabled in the following example.
You can also globally set the rollOverOpenDelay style using the StyleManager so it applies to all VideoPlayer controls, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/04/setting-a-roll-over-open-delay-on-a-spark-volumebar-control-in-flex-4/ --> <s:Application name="Spark_VideoPlayer_volumeBar_rollOverOpenDelay_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" initialize="init();"> <fx:Script> <![CDATA[ protected function init():void { var vBarCSS:CSSStyleDeclaration = styleManager.getStyleDeclaration("spark.components.mediaClasses.VolumeBar"); vBarCSS.setStyle("rollOverOpenDelay", 1000); } ]]> </fx:Script> <s:VideoPlayer id="vidPl" source="http://helpexamples.com/flash/video/caption_video.flv" muted="true" horizontalCenter="0" verticalCenter="0" /> </s:Application>
Or, you can set the rollOverOpenDelay style in an external .CSS file or <Style> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/04/setting-a-roll-over-open-delay-on-a-spark-volumebar-control-in-flex-4/ --> <s:Application name="Spark_VideoPlayer_volumeBar_rollOverOpenDelay_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"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; s|VolumeBar { rollOverOpenDelay: 1000; } </fx:Style> <s:VideoPlayer id="vidPl" source="http://helpexamples.com/flash/video/caption_video.flv" muted="true" horizontalCenter="0" verticalCenter="0" /> </s:Application>
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,
I am having a bug with the VolumeBar position appearing far over to the top left of the screen, as though the videoplayer is on the top left. See home page link: http://www.chefsinthecity.net/. When I roll over the volume area of the video player it appears at the top left of the screen. It’s as though the application is not recognizing the Group container’s position that is containing my video player, so it’s displaying the volume bar in the position as if the videoplayer were on the top left of the screen.
Have you seen this bug before? I noticed in the VideoPlayer.as file, that there doesn’t seem to be any reference to x and y positioning for the VolumeBar itself. My mxml is much stronger than my actionscript so I’m a little reserved about editing the VideoPlayer.as file. I also notice a reference to spark.skins.spark.mediaClasses.normal.VolumeBarSkin but I’m not sure how to access that or how to go about addressing this bug.
Thanks,
Erik
@Erik Hendin,
I’m not sure which build of the Flex 4 SDK you’re using (you can try tracing the
trace(mx_internal::VERSION);), but I’d try upgrading to the latest nightly Flex SDK build http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4 and see if you can still reproduce the bug. If so, can you please file a bug at http://bugs.adobe.com/flex/ and include a simple test case. I’ve never seen this issue before, but I’m not sure if you’re using modules or some nesting I’ve never tried.Thanks!
Peter
Thanks a lot, Peter – the SDK: 4.0.0.10485. After some testing it looks like it has something to do with a skinClass I have that’s in a skinnable container which is a parent of the VideoPlayer. Had some trouble posting code here using the ampersand l t ; etc.., so will try to do so in a separate reply.
But the skinclass was actually based on http://blog.flexexamples.com/2009/03/22/setting-a-background-image-on-an-fxapplication-in-flex-gumbo/ so it may well be something regarding an older SDK.
(I had originally used modules but for testing put the video on the application level and got the same result.
Just in case the blog won’t accept it, this is my structure
APPLICATION (Basic Layout)
** Group
****Group
******SkinninableContainer (with skinclass)
**********VGroup
**************VGroup
*******************VideoPlayer
When I take out the skinless the position of the VolumeBar is fine. Will try to post code now. I can figure out a workaround regardless, but will see what is up with the SDK version.
Thanks again!
Erik
THis is the code:
SKIN CLASS: com.skins.contentBackgroundVideoModule
<!– –>
My mistake – it was a an s:filters tag that seemed to be skewing things – in the skinclass I had a drop shadow filter and when I removed that – it was not happening. SO the skinClass was not the problem -
Thanks for your help!
-Erik
Yeah, the Flex 4.0.0.10485 SDK is *really* old (Sep 2009). I think we’re in the 4.0.0.14173 area now. I’d definitely recommend downloading the latest nightly Flex 4 SDK build and using that instead.
Peter