<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"
    creationComplete="init()"
     viewSourceURL="srcview/index.html">


    <mx:Script>
        <![CDATA[
            
            private function init():void
            {
                // set the bg image
                canv1.setStyle("bgImage", "flash.jpg");
                
                // make hbox draggable
                hb.addEventListener( MouseEvent.MOUSE_DOWN, startDragHandler);
                hb.addEventListener( MouseEvent.MOUSE_UP, stopDragHandler);
            }
            
            private function startDragHandler( e:MouseEvent ):void
            {
                hb.startDrag();
            }
            
            private function stopDragHandler( e:MouseEvent ):void
            {
                hb.stopDrag();
            }
            
            private function resizeCanvas():void
            {
                if (canv1.width == 300)
                {
                    canv1.width = 900;
                    canv1.height = 600;                    
                }
                else
                {
                    canv1.width = 300;
                    canv1.height = 300;
                }
            }
            
        ]]>
    </mx:Script>

                

    <mx:Canvas backgroundColor="#FF0000" id="canv1" x="60" y="50" borderSkin="skins.CanvasBorderSkin" minHeight="500" maxHeight="500" minWidth="600" maxWidth="600">
        <mx:HBox id="hb" x="73" y="36" width="400" height="200" backgroundColor="#804F4F" horizontalAlign="center" verticalAlign="middle">
            <mx:Text text="Drag me" fontSize="20" enabled="false"/>
            
        </mx:HBox>
    </mx:Canvas>
    
    <mx:Button x="60" y="21" label="resize" click="resizeCanvas()"/>
    
</mx:Application>