Full code after the jump.

Flash CS3
PC: \Adobe Flash CS3\en\Configuration\Components\Video\FLVPlaybackAS3.swc

Flash CS4
PC: \Adobe Flash CS4\Common\Configuration\Components\Video\FLVPlaybackAS3.swc

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/11/using-the-flash-flvplayback-control-in-flex/ -->
<mx:Application name="FLVPlayback_MXML_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:video="fl.video.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function flvPlayback_autoLayout(evt:Event):void {
                videoHolder.width = flvPlayback.width;
                videoHolder.height = flvPlayback.height;
                flvPlayback.x = 0;
                flvPlayback.y = 0;
            }
        ]]>
    </mx:Script>

    <video:FLVPlayback id="flvPlayback"
            source="http://www.helpexamples.com/flash/video/caption_video.flv"
            scaleMode="maintainAspectRatio"
            skin="SkinOverPlaySeekMute.swf"
            skinAutoHide="true"
            autoLayout="flvPlayback_autoLayout(event);" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn"
                label="Play Video"
                click="videoHolder.addChild(flvPlayback);" />
    </mx:ApplicationControlBar>

    <mx:Panel backgroundColor="red">
        <mx:UIComponent id="videoHolder" />
    </mx:Panel>

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/26/positioning-items-in-flex-using-a-constraint-based-layout/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .bugImage {
            bottom: 20;
            right: 20;
        }
    </mx:Style>

    <mx:Canvas id="canvas"
            backgroundColor="black"
            backgroundAlpha="0.4"
            width="100%"
            height="100%">
        <mx:Image source="assets/bug.png"
                styleName="bugImage" />
    </mx:Canvas>

</mx:Application>

View source is enabled in the following example.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/26/positioning-items-in-flex-using-a-constraint-based-layout/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

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

            private function sliderLeft_change(evt:SliderEvent):void {
                image.setStyle("left", sliderLeft.value);
                image.setStyle("right", NaN);
                sliderRight.value = 0;
            }

            private function sliderRight_change(evt:SliderEvent):void {
                image.setStyle("right", sliderRight.value);
                image.setStyle("left", NaN);
                sliderLeft.value = 0;
            }

            private function sliderTop_change(evt:SliderEvent):void {
                image.setStyle("top", sliderTop.value);
                image.setStyle("bottom", NaN);
                sliderBottom.value = 0;
            }

            private function sliderBottom_change(evt:SliderEvent):void {
                image.setStyle("bottom", sliderBottom.value);
                image.setStyle("top", NaN);
                sliderTop.value = 0;
            }
        ]]>
    </mx:Script>

    <mx:Number id="MAX_WIDTH">{canvas.width - image.width}</mx:Number>
    <mx:Number id="MAX_HEIGHT">{canvas.height - image.height}</mx:Number>

    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="left:" direction="horizontal">
                <mx:HSlider id="sliderLeft"
                        minimum="0"
                        maximum="{MAX_WIDTH}"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        dataTipPrecision="0"
                        showTrackHighlight="true"
                        change="sliderLeft_change(event);" />
                <mx:Label text="{sliderLeft.value}" />
            </mx:FormItem>
            <mx:FormItem label="right:" direction="horizontal">
                <mx:HSlider id="sliderRight"
                        minimum="0"
                        maximum="{MAX_WIDTH}"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        dataTipPrecision="0"
                        showTrackHighlight="true"
                        change="sliderRight_change(event);" />
                <mx:Label text="{sliderRight.value}" />
            </mx:FormItem>
            <mx:FormItem label="top:" direction="horizontal">
                <mx:HSlider id="sliderTop"
                        minimum="0"
                        maximum="{MAX_HEIGHT}"
                        liveDragging="true"
                        snapInterval="1"
                        dataTipPrecision="0"
                        showTrackHighlight="true"
                        change="sliderTop_change(event);" />
                <mx:Label text="{sliderTop.value}" />
            </mx:FormItem>
            <mx:FormItem label="bottom:" direction="horizontal">
                <mx:HSlider id="sliderBottom"
                        minimum="0"
                        maximum="{MAX_HEIGHT}"
                        liveDragging="true"
                        snapInterval="1"
                        dataTipPrecision="0"
                        showTrackHighlight="true"
                        change="sliderBottom_change(event);" />
                <mx:Label text="{sliderBottom.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Canvas id="canvas" width="100%" height="100%">
        <mx:Image id="image"
                source="assets/bug.png"/>
    </mx:Canvas>

</mx:Application>

View source is enabled in the following example.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/26/positioning-items-in-flex-using-a-constraint-based-layout/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Number id="HORIZONTAL_MAX">
        {int((canvas.width - image.width) / 2)}
    </mx:Number>
    <mx:Number id="VERTICAL_MAX">
        {int((canvas.height - image.height) / 2)}
    </mx:Number>

    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="horizontalCenter:"
                    direction="horizontal">
                <mx:HSlider id="hSlider"
                        minimum="{-HORIZONTAL_MAX}"
                        maximum="{HORIZONTAL_MAX}"
                        liveDragging="true"
                        snapInterval="1"
                        dataTipPrecision="0" />
                <mx:Label text="{hSlider.value}" />
            </mx:FormItem>
            <mx:FormItem label="verticalCenter:"
                    direction="horizontal">
                <mx:HSlider id="vSlider"
                        minimum="{-VERTICAL_MAX}"
                        maximum="{VERTICAL_MAX}"
                        liveDragging="true"
                        snapInterval="1"
                        dataTipPrecision="0" />
                <mx:Label text="{vSlider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Canvas id="canvas"
            backgroundColor="black"
            backgroundAlpha="0.2"
            width="100%"
            height="100%">
        <mx:Image id="image"
                source="assets/bug.png"
                verticalCenter="{vSlider.value}"
                horizontalCenter="{hSlider.value}" />
    </mx:Canvas>

</mx:Application>

View source is enabled in the following example.