Flex Examples » VideoDisplay http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 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/ http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex-4/#comments Fri, 22 Jan 2010 02:01:43 +0000 Peter deHaan http://blog.flexexamples.com/?p=2327 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 [...]]]> 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.

 
]]> http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex-4/feed/ 12 Displaying a semi-transparent FLV file in an MX VideoDisplay control in Flex http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex/ http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex/#comments Fri, 22 Jan 2010 01:24:33 +0000 Peter deHaan http://blog.flexexamples.com/?p=2323 The following example shows how you can display an FLV file with alpha channel transparency in an MX VideoDisplay control in Flex 3 by setting the backgroundAlpha style to 0.

Full code after the jump.

<?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/ --> <mx:Application name="VideoDisplay_backgroundAlpha_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[#FF0000,#0000FF]">   <mx:VideoDisplay id="vidDisp" source="walking.flv" backgroundAlpha="0.0" width="80%" height="80%" horizontalCenter="0" [...]]]> The following example shows how you can display an FLV file with alpha channel transparency in an MX VideoDisplay control in Flex 3 by setting the backgroundAlpha style to 0.

Full code after the jump.

<?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/ -->
<mx:Application name="VideoDisplay_backgroundAlpha_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="absolute"
        backgroundGradientColors="[#FF0000,#0000FF]">
 
    <mx:VideoDisplay id="vidDisp"
            source="walking.flv"
            backgroundAlpha="0.0"
            width="80%" height="80%"
            horizontalCenter="0" verticalCenter="0"
            complete="event.currentTarget.play();"/>
 
</mx:Application>

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

 
]]> http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex/feed/ 0 Maintaining an video’s aspect ratio on a VideoDisplay control in Flex http://blog.flexexamples.com/2008/12/30/maintaining-an-videos-aspect-ratio-on-a-videodisplay-control-in-flex/ http://blog.flexexamples.com/2008/12/30/maintaining-an-videos-aspect-ratio-on-a-videodisplay-control-in-flex/#comments Wed, 31 Dec 2008 04:40:26 +0000 Peter deHaan http://blog.flexexamples.com/2008/12/30/maintaining-an-videos-aspect-ratio-on-a-videodisplay-control-in-flex/ The following example shows how you can maintain a loaded video’s original aspect ratio on a Flex VideoDisplay control by setting the maintainAspectRatio property.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/12/30/maintaining-an-videos-aspect-ratio-on-a-videodisplay-control-in-flex/ --> <mx:Application name="VideoDisplay_maintainAspectRatio_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="maintainAspectRatio:"> <mx:CheckBox id="checkBox" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:VideoDisplay [...]]]> The following example shows how you can maintain a loaded video’s original aspect ratio on a Flex VideoDisplay control by setting the maintainAspectRatio property.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/30/maintaining-an-videos-aspect-ratio-on-a-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_maintainAspectRatio_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="maintainAspectRatio:">
                <mx:CheckBox id="checkBox" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:VideoDisplay id="videoDisplay"
            maintainAspectRatio="{checkBox.selected}"
            source="http://helpexamples.com/flash/video/cuepoints.flv"
            autoPlay="false"
            width="200"
            height="200"
            click="videoDisplay.play();" />

</mx:Application>

You can also set the maintainAspectRatio property using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/30/maintaining-an-videos-aspect-ratio-on-a-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_maintainAspectRatio_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                videoDisplay.maintainAspectRatio = checkBox.selected;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="maintainAspectRatio:">
                <mx:CheckBox id="checkBox"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:VideoDisplay id="videoDisplay"
            source="http://helpexamples.com/flash/video/cuepoints.flv"
            autoPlay="false"
            width="200"
            height="200"
            click="videoDisplay.play();" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/12/30/maintaining-an-videos-aspect-ratio-on-a-videodisplay-control-in-flex/feed/ 1 Determining the length of an FLV video using the VideoDisplay control in Flex http://blog.flexexamples.com/2008/12/29/determining-the-length-of-an-flv-video-using-the-videodisplay-control-in-flex/ http://blog.flexexamples.com/2008/12/29/determining-the-length-of-an-flv-video-using-the-videodisplay-control-in-flex/#comments Tue, 30 Dec 2008 05:15:20 +0000 Peter deHaan http://blog.flexexamples.com/2008/12/29/determining-the-length-of-an-flv-video-using-the-videodisplay-control-in-flex/ The following example shows how you can determine the length of an FLV video (in seconds) using the Flex VideoDisplay control by using the totalTime property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/12/29/determining-the-length-of-an-flv-video-using-the-videodisplay-control-in-flex/ --> <mx:Application name="VideoDisplay_totalTime_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="totalTime:"> <mx:Label [...]]]> The following example shows how you can determine the length of an FLV video (in seconds) using the Flex VideoDisplay control by using the totalTime property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/29/determining-the-length-of-an-flv-video-using-the-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_totalTime_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="totalTime:">
                <mx:Label text="{videoDisplay.totalTime}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:VideoDisplay id="videoDisplay"
            source="http://helpexamples.com/flash/video/cuepoints.flv"
            autoPlay="false"
            click="videoDisplay.play();" />

</mx:Application>

You can use the totalTime property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/29/determining-the-length-of-an-flv-video-using-the-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_totalTime_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="totalTime:">
                <mx:Label id="lbl" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:VideoDisplay id="videoDisplay"
            source="http://helpexamples.com/flash/video/cuepoints.flv"
            autoPlay="false"
            click="videoDisplay.play();"
            metadataReceived="lbl.text = videoDisplay.totalTime.toString();" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/12/29/determining-the-length-of-an-flv-video-using-the-videodisplay-control-in-flex/feed/ 8 Setting a background image on a VideoDisplay control in Flex http://blog.flexexamples.com/2008/08/28/setting-a-background-image-on-a-videodisplay-control-in-flex/ http://blog.flexexamples.com/2008/08/28/setting-a-background-image-on-a-videodisplay-control-in-flex/#comments Thu, 28 Aug 2008 07:23:46 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/28/setting-a-background-image-on-a-videodisplay-control-in-flex/ The following example shows how you can specify a background image for a Flex VideoDisplay control by setting the backgroundImage style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/28/setting-a-background-image-on-a-videodisplay-control-in-flex/ --> <mx:Application name="VideoDisplay_backgroundImage_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.VideoEvent; import mx.utils.StringUtil; private const src:String = "http://www.helpexamples.com/flash/video/water.flv"; private [...]]]> The following example shows how you can specify a background image for a Flex VideoDisplay control by setting the backgroundImage style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/28/setting-a-background-image-on-a-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_backgroundImage_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.VideoEvent;
            import mx.utils.StringUtil;

            private const src:String =
                    "http://www.helpexamples.com/flash/video/water.flv";

            private function loadBtn_click(evt:MouseEvent):void {
                videoDisplay.source = src;
            }

            private function playBtn_click(evt:MouseEvent):void {
                videoDisplay.stop();
                videoDisplay.play();
            }

            private function videoDisplay_ready(evt:VideoEvent):void {
                loadBtn.enabled = false;
                playBtn.enabled = true;
            }

            private function videoDisplay_playheadUpdate(evt:VideoEvent):void {
                var playTime:Number = videoDisplay.playheadTime;
                var totTime:Number = videoDisplay.totalTime;
                progressBar.setProgress(playTime, totTime);
                progressBar.label = StringUtil.substitute("{0} of {1}",
                                                    playTime.toFixed(3),
                                                    totTime.toFixed(3));
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="loadBtn"
                label="Load"
                click="loadBtn_click(event);" />
        <mx:Button id="playBtn"
                label="Play"
                enabled="false"
                click="playBtn_click(event);" />
    </mx:ApplicationControlBar>

    <mx:VideoDisplay id="videoDisplay"
            autoPlay="true"
            backgroundImage="@Embed('Fx2.png')"
            width="230"
            height="220"
            ready="videoDisplay_ready(event);"
            playheadUpdate="videoDisplay_playheadUpdate(event);" />

    <mx:ProgressBar id="progressBar"
            mode="manual"
            label="{videoDisplay.state}"
            labelPlacement="center"
            width="{videoDisplay.width}" />

</mx:Application>

View source is enabled in the following example.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/28/setting-a-background-image-on-a-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_backgroundImage_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        VideoDisplay {
            backgroundImage: Embed("assets/Fx2.png");
        }
    </mx:Style>

    <mx:VideoDisplay id="videoDisplay"
            source="http://www.helpexamples.com/flash/video/water.flv"
            autoPlay="true"
            width="230"
            height="220" />

</mx:Application>

Or, you can set the backgroundImage style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/28/setting-a-background-image-on-a-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_backgroundImage_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.VideoDisplay;

            [Embed("assets/Fx2.png")]
            private var flexLogo:Class;

            private var videoDisplay:VideoDisplay;

            private function init():void {
                videoDisplay = new VideoDisplay();
                videoDisplay.autoPlay = true;
                videoDisplay.source = "http://www.helpexamples.com/flash/video/water.flv";
                videoDisplay.width = 230;
                videoDisplay.height = 220;
                videoDisplay.setStyle("backgroundImage", flexLogo);
                addChild(videoDisplay);
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/08/28/setting-a-background-image-on-a-videodisplay-control-in-flex/feed/ 0 Setting the volume on a VideoDisplay control in Flex http://blog.flexexamples.com/2008/08/24/setting-the-volume-on-a-videodisplay-control-in-flex/ http://blog.flexexamples.com/2008/08/24/setting-the-volume-on-a-videodisplay-control-in-flex/#comments Mon, 25 Aug 2008 06:38:42 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/24/setting-the-volume-on-a-videodisplay-control-in-flex/ The following example shows how you can control the volume on a Flex VideoDisplay control by setting the volume property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/24/setting-the-volume-on-a-videodisplay-control-in-flex/ --> <mx:Application name="VideoDisplay_volume_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="volume:"> <mx:HSlider id="slider" minimum="0.0" maximum="1.0" value="0.7" snapInterval="0.01" tickInterval="0.1" [...]]]> The following example shows how you can control the volume on a Flex VideoDisplay control by setting the volume property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/24/setting-the-volume-on-a-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_volume_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
         layout="vertical"
         verticalAlign="middle"
         backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="volume:">
                <mx:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="0.7"
                        snapInterval="0.01"
                        tickInterval="0.1"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:VideoDisplay id="videoDisplay"
            source="http://www.helpexamples.com/flash/video/cuepoints.flv"
            volume="{slider.value}"
            autoPlay="false" />

    <mx:Button id="playBtn"
            label="Play"
            click="videoDisplay.play();"
            enabled="{!videoDisplay.playing}" />

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/24/setting-the-volume-on-a-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_volume_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
         layout="vertical"
         verticalAlign="middle"
         backgroundColor="white"
         initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.Button;
            import mx.controls.HSlider;
            import mx.controls.VideoDisplay;
            import mx.controls.sliderClasses.Slider;
            import mx.events.SliderEvent;
            import mx.events.VideoEvent;

            private var slider:HSlider;
            private var videoDisplay:VideoDisplay;
            private var playBtn:Button;

            private function init():void {
                slider = new HSlider();
                slider.minimum = 0.0;
                slider.maximum = 1.0;
                slider.value = 0.7; /* 70% */
                slider.snapInterval = 0.01;
                slider.tickInterval = 0.1;
                slider.liveDragging = true;
                slider.addEventListener(SliderEvent.CHANGE, slider_change);

                videoDisplay = new VideoDisplay();
                videoDisplay.source = "http://www.helpexamples.com/flash/video/cuepoints.flv";
                videoDisplay.volume = slider.value;
                videoDisplay.autoPlay = false;
                videoDisplay.addEventListener(VideoEvent.PLAYHEAD_UPDATE, videoDisplay_playheadUpdate);

                playBtn = new Button();
                playBtn.label = "Play";
                playBtn.enabled = !videoDisplay.playing;
                playBtn.addEventListener(MouseEvent.CLICK, playBtn_click);

                var formItem:FormItem = new FormItem();
                formItem.label = "volume:";
                formItem.addChild(slider);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                Application.application.addChildAt(appControlBar, 0);

                addChild(videoDisplay);
                addChild(playBtn);
            }

            private function slider_change(evt:SliderEvent):void {
                videoDisplay.volume = evt.value;
            }

            private function playBtn_click(evt:MouseEvent):void {
                videoDisplay.play();
            }

            private function videoDisplay_playheadUpdate(evt:VideoEvent):void {
                playBtn.enabled = !videoDisplay.playing;
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/08/24/setting-the-volume-on-a-videodisplay-control-in-flex/feed/ 6 Displaying a video in a pop up window in Flex http://blog.flexexamples.com/2008/08/04/displaying-a-video-in-a-pop-up-window-in-flex/ http://blog.flexexamples.com/2008/08/04/displaying-a-video-in-a-pop-up-window-in-flex/#comments Mon, 04 Aug 2008 15:14:31 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/04/displaying-a-video-in-a-pop-up-window-in-flex/ The following example shows how you can use the PopUpManager class to display a VideoDisplay control in a TitleWindow container in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/04/displaying-a-video-in-a-pop-up-window-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.managers.PopUpManager; private function button_click(evt:MouseEvent):void { var popUpVideoDisplay:PopUpVideoDisplay; popUpVideoDisplay = [...]]]> The following example shows how you can use the PopUpManager class to display a VideoDisplay control in a TitleWindow container in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/04/displaying-a-video-in-a-pop-up-window-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;

            private function button_click(evt:MouseEvent):void {
                var popUpVideoDisplay:PopUpVideoDisplay;
                popUpVideoDisplay = new PopUpVideoDisplay();
                popUpVideoDisplay.source = "http://www.helpexamples.com/flash/video/water.flv";
                PopUpManager.addPopUp(popUpVideoDisplay, this, true);
            }
        ]]>
    </mx:Script>

    <mx:Button id="button"
            label="Launch video"
            click="button_click(event);" />

</mx:Application>

PopUpVideoDisplay.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/04/displaying-a-video-in-a-pop-up-window-in-flex/ -->
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
        showCloseButton="true"
        styleName="noPadding"
        creationComplete="init();"
        close="titleWindow_close(event);">

    <mx:Style>
        .noPadding {
            paddingBottom: 0;
            paddingTop: 0;
            paddingLeft: 0;
            paddingRight: 0;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.managers.IFocusManagerComponent;
            import mx.controls.Alert;
            import mx.core.IFlexDisplayObject;
            import mx.events.CloseEvent;
            import mx.managers.PopUpManager;

            [Bindable]
            public var source:String;

            private function init():void {
                PopUpManager.centerPopUp(this);
            }

            private function titleWindow_close(evt:CloseEvent):void {
                PopUpManager.removePopUp(evt.target as IFlexDisplayObject);
            }
        ]]>
    </mx:Script>

    <mx:VideoDisplay id="videoDisplay"
            source="{source}"
            resize="init();" />

    <mx:ControlBar horizontalAlign="right" width="100%">
    </mx:ControlBar>

</mx:TitleWindow>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/08/04/displaying-a-video-in-a-pop-up-window-in-flex/feed/ 20 Setting the background alpha on a VideoDisplay control in Flex http://blog.flexexamples.com/2008/04/18/setting-the-background-alpha-on-a-videodisplay-control-in-flex/ http://blog.flexexamples.com/2008/04/18/setting-the-background-alpha-on-a-videodisplay-control-in-flex/#comments Sat, 19 Apr 2008 02:57:46 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/18/setting-the-background-alpha-on-a-videodisplay-control-in-flex/ In a previous example, “Setting the background color on a VideoDisplay control in Flex”, we saw how you could modify the background color of a VideoDisplay control in Flex by setting the backgroundColor style.

The following example shows how you can set the background alpha on a Flex VideoDisplay control by setting the backgroundAlpha [...]]]> In a previous example, “Setting the background color on a VideoDisplay control in Flex”, we saw how you could modify the background color of a VideoDisplay control in Flex by setting the backgroundColor style.

The following example shows how you can set the background alpha on a Flex VideoDisplay control by setting the backgroundAlpha style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/18/setting-the-background-alpha-on-a-videodisplay-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function loadButton_click(evt:MouseEvent):void {
                var url:String = "http://www.helpexamples.com/flash/video/clouds.flv";
                videoDisplay.source = url;
            }

            private function unloadButton_click(evt:MouseEvent):void {
                videoDisplay.close();
                videoDisplay.source = null;
                videoDisplay.mx_internal::videoPlayer.clear();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundAlpha:">
                <mx:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="1"
                        snapInterval="0.01"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker id="colorPicker" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:VideoDisplay id="videoDisplay"
            backgroundAlpha="{slider.value}"
            backgroundColor="{colorPicker.selectedColor}"
            width="160"
            height="120" />

    <mx:ControlBar>
        <mx:Button id="loadButton"
                label="Load"
                click="loadButton_click(event);" />
        <mx:Button id="unloadButton"
                label="Unload"
                click="unloadButton_click(event);" />
    </mx:ControlBar>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/18/setting-the-background-alpha-on-a-videodisplay-control-in-flex/feed/ 0 Setting the background color on a VideoDisplay control in Flex http://blog.flexexamples.com/2008/04/18/setting-the-background-color-on-a-videodisplay-control-in-flex/ http://blog.flexexamples.com/2008/04/18/setting-the-background-color-on-a-videodisplay-control-in-flex/#comments Sat, 19 Apr 2008 02:44:49 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/18/setting-the-background-color-on-a-videodisplay-control-in-flex/ The following example shows how you can modify the background color of a Flex VideoDisplay control by setting the backgroundColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/04/18/setting-the-background-color-on-a-videodisplay-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ private function loadButton_click(evt:MouseEvent):void { var url:String = "http://www.helpexamples.com/flash/video/clouds.flv"; videoDisplay.source = url; [...]]]> The following example shows how you can modify the background color of a Flex VideoDisplay control by setting the backgroundColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/18/setting-the-background-color-on-a-videodisplay-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function loadButton_click(evt:MouseEvent):void {
                var url:String = "http://www.helpexamples.com/flash/video/clouds.flv";
                videoDisplay.source = url;
            }

            private function unloadButton_click(evt:MouseEvent):void {
                videoDisplay.close();
                videoDisplay.source = null;
                videoDisplay.mx_internal::videoPlayer.clear();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker id="colorPicker" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:VideoDisplay id="videoDisplay"
            backgroundColor="{colorPicker.selectedColor}"
            width="160"
            height="120" />

    <mx:ControlBar>
        <mx:Button id="loadButton"
                label="Load"
                click="loadButton_click(event);" />
        <mx:Button id="unloadButton"
                label="Unload"
                click="unloadButton_click(event);" />
    </mx:ControlBar>

</mx:Application>

View source is enabled in the following example.

You can also set the backgroundColor style in an external .CSS file or in an <mx:Style /> block, as seen in the following snippet:

<mx:Style>
    VideoDisplay {
        backgroundColor: red;
    }
</mx:Style>

Or, you could set the backgroundColor style using ActionScript, as seen in the following snippet:

videoDisplay.setStyle("backgroundColor", "red");
 
]]> http://blog.flexexamples.com/2008/04/18/setting-the-background-color-on-a-videodisplay-control-in-flex/feed/ 1 Detecting changes in a camera’s activity and status in a Flex VideoDisplay control http://blog.flexexamples.com/2008/01/22/detecting-changes-in-a-cameras-activity-and-status-in-a-flex-videodisplay-control/ http://blog.flexexamples.com/2008/01/22/detecting-changes-in-a-cameras-activity-and-status-in-a-flex-videodisplay-control/#comments Wed, 23 Jan 2008 05:49:20 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/22/detecting-changes-in-a-cameras-activity-and-status-in-a-flex-videodisplay-control/ In a previous example, “Displaying a webcam’s video in a Flex VideoDisplay control”, we saw how to connect to a user’s webcam, if they have one installed.

In the following example we see how to listen for the Camera object’s activity event and status event, using some good ol’ ActionScript.

Full code after the [...]]]> In a previous example, “Displaying a webcam’s video in a Flex VideoDisplay control”, we saw how to connect to a user’s webcam, if they have one installed.

In the following example we see how to listen for the Camera object’s activity event and status event, using some good ol’ ActionScript.

Full code after the jump.

This example won’t be very interesting unless you actually have a webcam installed.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/22/detecting-changes-in-a-cameras-activity-and-status-in-a-flex-videodisplay-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.utils.StringUtil;

            private function videoDisplay_creationComplete():void {
                var camera:Camera = Camera.getCamera();
                if (camera) {
                    videoDisplay.attachCamera(camera);
                    camera.addEventListener(ActivityEvent.ACTIVITY, camera_activity);
                    camera.addEventListener(StatusEvent.STATUS, camera_status);
                } else {
                    Alert.show("You don't seem to have a camera.");
                }
            }

            private function camera_activity(evt:ActivityEvent):void {
                var str:String = "[{0}] activating:{1}\\n";
                textArea.text += StringUtil.substitute(str,
                                    evt.type,
                                    evt.activating);
            }

            private function camera_status(evt:StatusEvent):void {
                var str:String = "[{0}] code:'{1}', level:'{2}'\\n";
                textArea.text += StringUtil.substitute(str,
                                    evt.type,
                                    evt.code,
                                    evt.level);
                switch (evt.code) {
                    case "Camera.Muted":
                        Alert.show("User denied access to camera.");
                        break;
                    case "Camera.Unmuted":
                        Alert.show("User allowed access to camera.");
                        break;
                }
            }
        ]]>
    </mx:Script>

    <mx:VideoDisplay id="videoDisplay"
            creationComplete="videoDisplay_creationComplete();"
            width="160"
            height="120" />

    <mx:TextArea id="textArea"
            editable="false"
            width="100%"
            height="{videoDisplay.height}"
            wordWrap="false"
            verticalScrollPolicy="on" />

</mx:Application>

View source is enabled in the following example.

If you want to display the Adobe Flash Player Settings dialog box again, you can use the following ActionScript:

Security.showSettings(SecurityPanel.PRIVACY);

You can also allow users to go to different tabs in the Settings dialog by by using something similar to the following snippet:

<mx:ApplicationControlBar dock="true">
    <mx:Button label="Camera"
            click="Security.showSettings(SecurityPanel.CAMERA);" />
    <mx:Button label="Privacy"
            click="Security.showSettings(SecurityPanel.PRIVACY);" />
</mx:ApplicationControlBar>
 
]]> http://blog.flexexamples.com/2008/01/22/detecting-changes-in-a-cameras-activity-and-status-in-a-flex-videodisplay-control/feed/ 9