Setting the base color on the full screen button on a Spark VideoPlayer control in Flex 4

The following example shows you how you can set the base color on a Spark VideoPlayer control full screen button in Flex 4 by setting the baseColor style.

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/2009/05/09/setting-the-base-color-on-the-full-screen-button-on-a-spark-videoplayer-control-in-flex-gumbo/ -->
<s:Application name="Spark_VideoPlayer_fullScreenButton_baseColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">

    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                videoPlayer.fullScreenButton.setStyle("baseColor", evt.color);
            }
        ]]>
    </fx:Script>

    <mx:ApplicationControlBar cornerRadius="0" width="100%">
        <mx:Form styleName="plain">
            <mx:FormItem label="baseColor:">
                <mx:ColorPicker id="colorPicker"
                        left="20"
                        top="20"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <s:VideoPlayer id="videoPlayer"
            source="http://helpexamples.com/flash/video/cuepoints.flv"
            muted="true"
            horizontalCenter="0"
            verticalCenter="0" />

</s:Application>

[GoogleAdsWide]

View source is enabled in the following example.

You can also set the baseColor style using an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/09/setting-the-base-color-on-the-full-screen-button-on-a-spark-videoplayer-control-in-flex-gumbo/ -->
<s:Application name="Spark_VideoPlayer_fullScreenButton_baseColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";

        s|VideoPlayer #fullScreenButton {
            baseColor: haloGreen;
        }
    </fx:Style>

    <s:VideoPlayer id="videoPlayer"
            source="http://helpexamples.com/flash/video/cuepoints.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.

3 thoughts on “Setting the base color on the full screen button on a Spark VideoPlayer control in Flex 4

  1. Dear Peter,

    You deserve a lot of credits for your relentless work. Bravo and thank you.
    Here is my question: I can’t I find the documentation for this new component – spark VideoPlayer. Is it available for general public?

    Thanks,
    Igor Borodin

  2. Igor Borodin,

    The latest public Flex Gumbo Language Reference documentation is currently located at livedocs.adobe.com/flex/gumbo/langref/. Unfortunately it looks like it is a little out of date, but documentation should be available when we release the Flex Gumbo Public Beta in June 2009 (source opensource.adobe.com/wiki/display/flexsdk/Gumbo).

    In the meantime, it looks like you’ll have to browse the class files and read the comments/documentation:
    <SDK Dir/>\frameworks\projects\flex4\src\spark\components\VideoPlayer.as

    Peter

  3. Thank you, Peter. I’ll follow your suggestion and look forward to the beta release.
    IB

Comments are closed.