Newbie: Help with Script that captures image?

[Beefandy]

Hi, I'm not very clued up on code. Basically I had some actionscript written for me and I am trying to get my head round it..

The swf file kind of captures a certain area of a flash movie which is loaded in.. I guess it works a bit like a camera..

Anyway, what I am trying to do is figure out what determines the size of JPEG produced. At the minute its pretty small.

The Flash movie is used to make an avatar. When the user is finished they hit a button and it captures the design, then emails it.

I have found a line of code which relates to the size of the jpeg which is emailed

var myBitmapData:BitmapData = new BitmapData(230, 200);

What I want to do is produce a much bigger image than 230, 200

I tried changing those numbers higher and it did not work, any suggestions?

Also I want to be able to send the image to a seperate page where an API can be picked up. Any simple solutions? That would have a seperate button.

Here is the code I see, any help would be great!

import flash.display.MovieClip;
 import flash.display.DisplayObject;
 import flash.display.MovieClip;
 import flash.display.Sprite;
 import flash.display.Stage;
 import flash.geom.Rectangle;
 import flash.net.*;
 import flash.events.*;
 import flash.ui.Mouse;
 import flash.display.Loader;
 import flash.display.LoaderInfo;
   import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.text.TextField;
import flash.geom.Matrix;
import bulupe.encoding.JPEGEncoder;
 
 var i =new Loader();
 i.load(new URLRequest("ar.swf"));
 this.hld.addChild(i);
 
 b2.buttonMode=true;
 b2.mouseChildren=false;
 b2.addEventListener(MouseEvent.CLICK,dop3);
 this.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
 this.adr.addEventListener(FocusEvent.FOCUS_IN,setFoc);
 
 function setFoc(ee:FocusEvent)
 {
  ee.target.text="";
 }
 
 function keyDownHandler(event : KeyboardEvent) : void 
 {    
 if (event.keyCode == Keyboard.ENTER)     
  {        
  this.adr.text="";
   var myBitmapData:BitmapData = new BitmapData(230, 200);
  var mat=new Matrix();
  mat.translate(-181,-80);
  myBitmapData.draw(this.hld,mat);
  var bmp:Bitmap = new Bitmap(myBitmapData);
  this.hld2.addChild(bmp);
  var myEncoder:JPEGEncoder = new JPEGEncoder( 90 );
  var myCapStream:ByteArray= myEncoder.encode(myBitmapData);
  trace(myCapStream);
  var header:URLRequestHeader = new URLRequestHeader ("Content-type", "application/octet-stream");
  //var myRequest:URLRequest = new URLRequest ( "createJpeg.php?name="+"somename"+"&email="+"qforge@gmail.com"+"&d="+"FF");
  var myRequest:URLRequest = new URLRequest ( "createXml.php?name="+"somename"+"&email="+this.adr.text+"&d="+"FF");
  myRequest.requestHeaders.push (header);
  myRequest.method = URLRequestMethod.POST;
  myRequest.data = myCapStream;
  var ld:URLLoader = new URLLoader();
  cfgLoaderListener(ld);
  ld.load(myRequest);
  } 
 }

 
 function dop3(mm:MouseEvent)
 {
  

  var myBitmapData:BitmapData = new BitmapData(230, 200);
  var mat=new Matrix();
  mat.translate(-181,-80);
  myBitmapData.draw(this.hld,mat);
  var bmp:Bitmap = new Bitmap(myBitmapData);
  this.hld2.addChild(bmp);
  var myEncoder:JPEGEncoder = new JPEGEncoder( 90 );
  var myCapStream:ByteArray= myEncoder.encode(myBitmapData);
  trace(myCapStream);
  var header:URLRequestHeader = new URLRequestHeader ("Content-type", "application/octet-stream");
  //var myRequest:URLRequest = new URLRequest ( "createJpeg.php?name="+"somename"+"&email="+"qforge@gmail.com"+"&d="+"FF");
  var myRequest:URLRequest = new URLRequest ( "createXml.php?name="+"somename"+"&email="+this.adr.text+"&d="+"FF");
  myRequest.requestHeaders.push (header);
  myRequest.method = URLRequestMethod.POST;
  myRequest.data = myCapStream;
  var ld:URLLoader = new URLLoader();
  cfgLoaderListener(ld);
  ld.load(myRequest);
  
  
 }
 
 function cfgLoaderListener(urlLoader:IEventDispatcher):void {
   urlLoader.addEventListener(Event.COMPLETE, completeHandler);
  }
 function completeHandler(event:Event):void {
   trace("pratih");
   }

[neznein9]

For starters - you have identical blocks of code for the enter key and for clicking the button - I suggest you combine those so you can change the code once and it works for both:

function keyDownHandler(event:KeyboardEvent):void{
    if(event.keyCode == Keyboard.ENTER){
          this.adr.text="";
        captureImage();
    }
}

function dop3(mm:MouseEvent):void{
    captureImage();
}

function captureImage():void{
    var myBitmapData:BitmapData = new BitmapData(230, 200);
    var mat=new Matrix();
    mat.translate(-181,-80);
    myBitmapData.draw(this.hld,mat);
    var bmp:Bitmap = new Bitmap(myBitmapData);
    this.hld2.addChild(bmp);
    var myEncoder:JPEGEncoder = new JPEGEncoder( 90 );
    var myCapStream:ByteArray= myEncoder.encode(myBitmapData);
    trace(myCapStream);
    var header:URLRequestHeader = new URLRequestHeader ("Content-type", "application/octet-stream");
    //var myRequest:URLRequest = new URLRequest ( "createJpeg.php?name="+"somename"+"&email="+"qforge@gmail.com"+"&d="+"FF");
    var myRequest:URLRequest = new URLRequest ( "createXml.php?name="+"somename"+"&email="+this.adr.text+"&d="+"FF");
    myRequest.requestHeaders.push (header);
    myRequest.method = URLRequestMethod.POST;
    myRequest.data = myCapStream;
    var ld:URLLoader = new URLLoader();
    cfgLoaderListener(ld);
    ld.load(myRequest);
} 

Next - you're right about the "new BitmapData" part - that's setting the maximum size you can generate - it's analogous to a new canvas in photoshop. The artwork comes in a few lines later when you call .draw(). In the middle is the part you need - the transformation matrix that adjusts the artwork during the rendering pass. Right now you have a translate in there (which repositions the artwork left 181 pixels and up 80 in relation to the bitmap you're drawing into).

You can add a line in there to scale the thing you're drawing as it goes into the bitmap. That might be tricky though because the offset will scale too when you change the matrix:

    mat.scale(4, 4);            //  makes the image 400% scale
    mat.translate(-181,-80);    //  offsets the image 181px left and 80px up 

    mat.translate(-181,-80);    //  offsets the image 181px left and 80px up
    mat.scale(4, 4);            //  makes the image 400% scale
    //  image is now going to be 724px left and 320px up 

[Beefandy]

Thanks for your help on this, its a bit clearer now..

I tried the exact thing you said with 4, 4

However it must send it off alignment because it does not capture anything now, basically get a blank image in email

Not sure how I would work this one out..

[neznein9]

I'm guessing the translate is off - try out everything from zero translation up to 4x what was in there to start with. It also might help to start with a 2x scale to see if you can get your bearings and then work your way up and offset accordingly.

One other thing to try during development - put an opaque background on the object you're drawing to make sure you're targetting it correctly. You should see the color come through in your bitmap if everything is targetting correctly.

this.hld.opaqueBackground = 0xFF0000; 

[Beefandy]

Hi, thanks a lot for this! I have figured this part out now..

4, 4 scale works perfect with dimensions 830, 800

So I can use this rule for any size..

Now my next challenge is to make this larger image post to a separate page which could be picked up by an API. What I want to do is make the design easily picked up by 1 set url page.

I still want the email function which is working fine but for the larger image, I would like a separate button which simply sends the captured image to a set url page

Thanks