able to load external image onto bitmap for drawingboard

Question

Here is my new code but it does not render external image, please help.

//load libs
import flash.net.*;
import flash.geom.Matrix;
import flash.display.*;
import flash.events.*;
import com.adobe.images.JPGEncoder;

function myLoader() {
    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, sketch);

    var request:URLRequest = new URLRequest("http://www.sergiorodriguez.org/images/2008_5_FXD_VividBlack.jpg");
    loader.load(request);
 //addChild(loader);

}

//action for mouse 
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveCursor);
Mouse.hide();

function moveCursor(event:MouseEvent):void{
 pencil.x = event.stageX;
 pencil.y = event.stageY;
}


var canvas_mc;
 canvas_mc = new MovieClip()

addChildAt(canvas_mc,0);
canvas_mc.swapDepths

//draw area to sketch
function sketch(e:Event):void{
 //load bitmap and draw it to memory
 var myBitmapData;
  myBitmapData = new BitmapData(500, 500);
  myBitmapData.draw(e);

 //define matrix
 var matrix;
  matrix = new flash.geom.Matrix();

 //start canvas
 canvas_mc.graphics.beginBitmapFill(myBitmapData,matrix, true, true);
 canvas_mc.graphics.drawRect(0, 0, 500, 500);
 canvas_mc.graphics.endFill();

 //listening  events
 canvas_mc.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
 canvas_mc.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
 canvas_mc.addEventListener(MouseEvent.MOUSE_MOVE, makeLine); 
}  

//mouse draws on press
function startDrawing(event:MouseEvent):void{ 
 canvas_mc.graphics.lineStyle(1, 0, 1);
 canvas_mc.graphics.moveTo(mouseX, mouseY);
 canvas_mc.addEventListener(MouseEvent.MOUSE_MOVE, makeLine);
}

//mouse stops drawing on realese
function stopDrawing(event:MouseEvent):void{
 canvas_mc.removeEventListener(MouseEvent.MOUSE_MOVE, makeLine);
}

//creates lines
function makeLine(event:MouseEvent):void{
 canvas_mc.graphics.lineTo(mouseX, mouseY); 
}

//call function
myLoader()

//start to save onto server
var serverPath:String = "";
function createJPG(m:MovieClip, q:Number, fileName:String){
 var jpgSource:BitmapData = new BitmapData (m.width, m.height);
 jpgSource.draw(m);
 var jpgEncoder:JPGEncoder = new JPGEncoder(q);
 var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);
 var header:URLRequestHeader = new URLRequestHeader ("Content-type", "application/octet-stream");
 var jpgURLRequest:URLRequest = new URLRequest ( serverPath+"jpg_encoder_download.php?name=" + fileName + ".jpg");  
 jpgURLRequest.requestHeaders.push(header);    
 jpgURLRequest.method = URLRequestMethod.POST;    
 jpgURLRequest.data = jpgStream;

 var jpgURLLoader:URLLoader = new URLLoader(); 
 //jpgURLLoader.load(jpgURLRequest);  
 navigateToURL(jpgURLRequest, "_blank");
}

save_btn.addEventListener(MouseEvent.CLICK, saveBtnPress);
save_btn.addEventListener(MouseEvent.ROLL_OVER, saveBtnOver);
save_btn.addEventListener(MouseEvent.ROLL_OUT, saveBtnOut);

function saveBtnPress(e:Event):void{ 
createJPG(canvas_mc, 90, "sketch");
}

function saveBtnOver(e:Event):void{ 
 Mouse.show();
 pencil.visible = false;
}

function saveBtnOut(e:Event):void{ 
 Mouse.hide();
 pencil.visible = true;
}

Answer 1

You need to wait for the image to load before you can draw it:

public function LoaderExample() {
    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, handleComplete);

    var request:URLRequest = new URLRequest("www.foo.com/image.jpg");
    loader.load(request);
}

public function handleComplete(e:Event):void {
    //do stuff with the image here
}

Answer 2

Hi, what do you mean with "completed" event? What should we change in your or the other's code?