04
Aug
08

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 = 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.


4 Responses to “Displaying a video in a pop up window in Flex”


  1. 1 Blenjar Aug 4th, 2008 at 4:08 pm

    Thats sick!

  2. 2 MechanisM Aug 9th, 2008 at 7:34 am

    yay!! this example is very useful 4 me!! thanxxx!!

  3. 3 MechanisM Aug 9th, 2008 at 7:35 am

    did anybody seen any good example of SWFAddress??gimme da links please?

  4. 4 Mark Aug 11th, 2008 at 7:57 am

    There is lots of talk about using video - but finding a post about how to *embed* video in a Flex app was a lot harder than I expected. If you can convert an .FLV to a .SWF, you can easily embed a video file just like you might embed an image. See the code below for an example. I think this warrants a post of its own…

    <mx:SWFLoader id=”myVideo” left=”0″ right=”0″ top=”0″ bottom=”0″ source=”@Embed(source=’misc/video.swf’)” autoLoad=”true” />

    <mx:Canvas id=”canvas” height=”100%” width=”100%” verticalScrollPolicy=”off” horizontalScrollPolicy=”off”
    &lt:mx:Button x=”-21″ y=”244″ label=”Get Data …” click=”myVideo.load()” />
    <mx:Canvas/>

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".