<?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
  frameRate="32" creationComplete="initApp()" viewSourceURL="@mx-flex-paint.html"
  backgroundColor="0x000000"
  
      backgroundGradientAlphas="[ 0.5, 0.5 ]"
      backgroundGradientColors="undefined"
      horizontalAlign="center|left|right"
      horizontalGap="8"
      modalTransparency="0.5"
      modalTransparencyBlur="3"
      modalTransparencyColor="#DDDDDD"
      modalTransparencyDuration="100"
      paddingBottom="24"
      paddingTop="24"
      verticalAlign="top|bottom|middle"
      verticalGap="6"
  
  >
  
          <mx:Script>
                  <![CDATA[
                          
                          /*
                          
                          Examples_SaveAsJPG
                          
                          Written by:
                          Dustin Andrew
                          dustin@flash-dev.com
                          www.flash-dev.com
                          
                          LAST UPDATED:
                          10/04/06
                          
  			*/
                          
                          import com.flashdev.bitmap.getPixelArray;
                          
                          import mx.managers.*;
                          import mx.events.*;
                          import mx.core.*;
                          import flash.utils.*;
                          import flash.events.*;
                          import flash.net.*;
                          
                          private const _strSaveJPGUrl:String = new String(<flex-paint.php>);
                          
                          private var _numColor:Number;
                          private var _numSize:Number;
                          private var _strTool:String;
                          private var _numCursorID:Number;
                          private var _booDraw:Boolean;
                          private var _bmpDraw:BitmapData;
                          private var _bmpDisplay:Bitmap;
                          private var _comDraw:UIComponent;
                          private var _objGetPixels:getPixelArray;
                          private var _winProgress:progress;
                          
                          // Custom cursors
                          [Embed(source="local/icons/pencil.png")] 
                          private var curPencil:Class;
                          
                          [Embed(source="local/icons/paintbrush.png")] 
                          private var curPaintbrush:Class;
                          
                          //[Embed(source="imgs/paintcan.png")] 
                          //private var curPaintBucket:Class;
                          
                          // Initialize
                          private function initApp():void {
                                  _booDraw = new Boolean(false);
                                  _bmpDraw = new BitmapData(boxDraw.width, boxDraw.height, false, 0xFFFFFF);
                                  _bmpDisplay = new Bitmap(_bmpDraw);
                                  _comDraw = new UIComponent();
                                  boxDraw.addChild(_comDraw);
                                  _comDraw.addChild(_bmpDisplay);
                                  changeDrawColor();
                                  changeDrawSize();
                                  selectDrawTool("pencil");
                          }
                          
                          // Called when draw color is changed
                          private function changeDrawColor():void {
                                  _numColor = palColor.selectedColor;
                          }
                          
                          // Called when draw size is changed
                          private function changeDrawSize():void {
                                  _numSize = numDrawSize.value;
                          }
                          
                          // Called when selecting a draw tool
                          private function selectDrawTool(strTool:String):void {
                                  _strTool = strTool;
                                  btnPencil.selected = false;
                                  btnPaintbrush.selected = false;
                                  //btnPaintBucket.selected = false;
                                  switch (strTool) {
                                          case "pencil" : btnPencil.selected = true; break;
                                          case "paintbrush" : btnPaintbrush.selected = true; break;
                                          //case "paintbucket" : btnPaintBucket.selected = true; break;
                                  }
                          }
                          
                          // Called to change cursor based on draw tool selected
                          private function changeCursor():void {
                                  clearCursor();
                                  switch (_strTool) {
                                          case "pencil" : _numCursorID = CursorManager.setCursor(curPencil); break;
                                          case "paintbrush" : _numCursorID = CursorManager.setCursor(curPaintbrush); break;
                                          //case "paintbucket" : _numCursorID = CursorManager.setCursor(curPaintBucket); break;
                                  }
                          }
                          
                          // Called to clear custom cursor
                          private function clearCursor():void {
                                  CursorManager.removeCursor(_numCursorID);
                                  _booDraw = false;
                          }
                          
                          // Called to draw on canvas
                          private function drawToCanvas():void {
                                  // Draw offset for cursor angle and brush size
                                  var potOffset:Point;
                                  switch (_strTool) {
                                          case "pencil" :
                                                  potOffset = new Point((_numSize / 2) * -1, ((_numSize / 2) * -1) + 5);
                                                  _bmpDraw.fillRect(new Rectangle(boxDraw.mouseX + potOffset.x, boxDraw.mouseY + potOffset.y, _numSize, _numSize), _numColor);
                                                  break;
                                          case "paintbrush" :
                                                  potOffset = new Point(0, 14);
                                                  var shpCircle:Shape = new Shape();
                                                  shpCircle.graphics.beginFill(_numColor);
                                                  shpCircle.graphics.drawCircle(boxDraw.mouseX + potOffset.x, boxDraw.mouseY + potOffset.y, _numSize);
                                                  _bmpDraw.draw(shpCircle);
                                                  break;
                                          //case "paintbucket" :
                                          //        potOffset = new Point(14, 12);
                                          //        _bmpDraw.floodFill(boxDraw.mouseX + potOffset.x, boxDraw.mouseY + potOffset.y, _numColor);
                                          //        break;
                                  }
                                  _bmpDisplay = new Bitmap(_bmpDraw);
                          }
                          
                          // On enterframe handler
                          private function onEnterFrame():void {
                                  if (_booDraw) {
                                          drawToCanvas();
                                  }
                          }
                          
                          // On mousedown handler
                          private function onMouseDown():void {
                                  _booDraw = true;
                          }
                          
                          // On mouseup handler
                          private function onMouseUp():void {
                                  _booDraw = false;
                          }
                          
                          // Clear drawing
                          private function clearDraw():void {
                                  _bmpDraw.fillRect(new Rectangle(0, 0, boxDraw.width, boxDraw.height), 0xFFFFFF);        
                          }
                          
                          // Start to save bitmap, first open progress window
                          private function startSave():void {
                                  _winProgress = progress(PopUpManager.createPopUp(this, progress, true));
                                  _winProgress.title = "Processing bitmap data...";
                                  _winProgress.progBar.label = "0%";
                                  _winProgress.addEventListener("creationComplete",  startProcess);
                                  PopUpManager.centerPopUp(_winProgress);
                          }
                          
                          // Called when popup progress window is ready to start processing bitmap
                          public function startProcess(event:Event):void {
                                  _objGetPixels = new getPixelArray(_bmpDraw);
                                  _objGetPixels.addEventListener("progress", onProcessProg);
                                  _objGetPixels.addEventListener("complete", saveToJPG);
                                  _objGetPixels.process();
                          }
                          
                          // Get process progress
                          public function onProcessProg(event:Event):void {
                                  _winProgress.progBar.setProgress(event.target.percent, 100);
                                  _winProgress.progBar.label = event.target.percent + "%";
                                  _winProgress.progBar.validateNow();
                                  if (event.target.percent >= 99) {
                                          _winProgress.title = "Rendering bitmap...";
                                  }
                          }
                          
                          // Save drawing to JPG
                          private function saveToJPG(event:Event):void {
                                  // Vars to send
                                  var varSend:URLVariables = new URLVariables();
                                  varSend.width = _bmpDraw.width;
                                  varSend.height = _bmpDraw.height;
                                  varSend.data = event.target.dataString;
                                  // Send request
                                  var request:URLRequest = new URLRequest();
                                  request.data = varSend;
                              request.url = _strSaveJPGUrl;
                              request.method = URLRequestMethod.POST;
                              navigateToURL(request, "_self");
                              
                              PopUpManager.removePopUp(_winProgress);
                          }
                          
                  ]]>
          </mx:Script>
  
          <mx:HBox id="appBox" width="100%" horizontalCenter="0" height="100%" verticalCenter="0">
                  
                  <mx:Panel width="100%" height="100%" layout="absolute" id="panCanvas" title="">
                          
                          <mx:Box bottom="0" right="0" id="boxDraw" enterFrame="onEnterFrame()" mouseDown="onMouseDown()" mouseUp="onMouseUp()" mouseOver="changeCursor()" mouseOut="clearCursor()" top="0" left="0"/>
                          <mx:ControlBar horizontalAlign="right">
                              <mx:Button label="" id="btnPencil" icon="@Embed('local/icons/pencil.png')" height="30" width="100%" click="selectDrawTool('pencil')"/>
                                  <mx:Button label="" id="btnPaintbrush" icon="@Embed('local/icons/paintbrush.png')" width="100%" height="30" click="selectDrawTool('paintbrush')"/>
                                  
                                  <mx:HRule width="100%" height="0"/>
                                  <mx:NumericStepper id="numDrawSize" value="10" minimum="1" stepSize="1" maximum="100" width="100%" change="changeDrawSize()"/>
                                  <mx:HBox width="100%" horizontalAlign="center" verticalAlign="middle" horizontalGap="0">
                                          <mx:Image source="local/icons/color_swatch.png"/>
                                          <mx:ColorPicker width="100%" id="palColor" selectedColor="#800000" height="30" change="changeDrawColor()"/>
                                  </mx:HBox>
                                  <mx:Button label="clear" height="30" icon="@Embed('local/icons/picture_delete.png')" id="btnClear" click="clearDraw()"/>
                                  <mx:Button label="save..." id="btnSave" icon="@Embed('local/icons/picture_save.png')" height="30" click="startSave()"/>
                          </mx:ControlBar>
                  </mx:Panel>
          </mx:HBox>        
  </mx:Application>