capturing bounds and storing values for jpeg capture

[evan]

if I create a rect object and use startDrag and stopDrag

with the function that controls MouseUp I can
trace the size and position with:


trace("rect bounds ", rect.getBounds(this));


I would like to do something like assign a variable like

var Capture:Number;

and then place the values from rect.getBounds in it

Capture=rect.getBounds(this);
and then

trace(Capture);
but that won't work because I think it's got 4 values at once to store

I have some code from learnactionscript.com and seen lee brimlow's demo on gotoand learn about taking a snapshot of a video.

I am trying to reverse engineer something I have seen here (http://disney.go.com/pooh/html/advntr/hunt.html)

so far I have code for the basic jpeg capture,





import com.adobe.images.JPGEncoder;
var Capture:Number;
var rect:Sprite=new Sprite();




rect.graphics.beginFill(0x0000FF,1);
rect.graphics.drawRect(250,250,50,50);
rect.graphics.endFill();
rect.alpha=.25;
addChild(rect);


stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed, false, 0, true);

function onKeyPressed(evt:KeyboardEvent):void
{
switch(evt.keyCode)
{


case Keyboard.SPACE:

trace("space");
var paintGrab:BitmapData = new BitmapData (50,50);



paintGrab.draw(canvas);
var myEncoder:JPGEncoder = new JPGEncoder(100);
var byteArray:ByteArray = myEncoder.encode(paintGrab);

var header:URLRequestHeader = new URLRequestHeader ("Content-type", "application/octet-stream");

var saveJPG:URLRequest = new URLRequest ("savejpg.php?img=mydrawing.jpg");
saveJPG.requestHeaders.push(header);
saveJPG.method = URLRequestMethod.POST;
saveJPG.data = byteArray;

navigateToURL(saveJPG, "_blank");


break;
case Keyboard.ENTER:

trace("enter");
break;

}

}


//in this sample, canvas is a movie clip on the stage
rect.addEventListener(MouseEvent.MOUSE_UP,dragnot);
function dragnot(evt:MouseEvent):void{
rect.stopDrag();

trace("rect bounds ", rect.getBounds(this));

// rect.getBounds(this);
//Capture=rect.getbounds(this)
//trace(Capture);
}
rect.addEventListener(MouseEvent.MOUSE_DOWN,dragcam);
function dragcam(evt:MouseEvent):void{
rect.startDrag();
}



there is also some php that runs with it that I didn't post -I got it to work but I can't control an image capture inside bouunds coords -as in I don't want a complete screenshot of the whole stage.

[Medyman]

but that won't work because I think it's got 4 values at once to store

You're right... If you trace out what you get back from a getBounds() method call, you'll end up with something like:


(x=100, y=200, w=30, h=40)

Even if you save that to a variable, there isn't much that you can do with the data in that format. But you can change the format...or at least extract data and create a new format.

So, if you do something like:

var b = rect.getBounds(this);

You can acess each of the values individually and then assign them to whatever values you want. Personally, I'd use an array to store all the values. Or create a new object and attach the values to that. Though, if four seperate variables make sense, go ahead.


trace(rect.getBounds(this));
var b = rect.getBounds(this);
trace(b.x);
trace(b.y);
trace(b.width);
trace(b.height);

Hope that helps. :D

[evan]

yes, that does and it has it's uses too, as in I could trigger events by tracking individual bounds properties x,y,height and width

but in this line:

paintGrab.draw(rect.Capture);

or paintGrab.draw(Capture);

I can't get the jpeg to be captured on a segment of the stage via the moving rect box which acts as a camera -the way that game works.

I'm dying to figure out how they did that.

[Medyman]

Hey Evan,

I think this (http://manewc.com/2008/03/12/as-3-actionscript-image-crop-project-part-ii-copying-bitmap-data/) might be of use to you.

[evan]

that's what I want to do later on in the short term I just want to define a rectangular boundry where the capture will take place and export it as a jpg



var paintGrab:BitmapData = new BitmapData (50,50);


this only has two parameters defining the size of the square -what about defining where it goes to take the file from?


myRectangle.graphics.drawRect(beginX, beginY, endX - beginX, endY - beginY);

lets say I just wanted to have a static set of coords not dynamicly selected by the user I would just plug in the values there right?

but if I wanted to drw my own rect or move a sprite, trace it's bounds , record the values in variables I could also do it with that line of code -am I over simplifying it?

[Medyman]

but if I wanted to drw my own rect or move a sprite, trace it's bounds , record the values in variables I could also do it with that line of code -am I over simplifying it?

Sure...if you're drawing your own. You can use the code in the example I linked to.


function rectStartingPoint(m:MouseEvent):void
{
beginX = mouseX;
beginY = mouseY;

stage.removeEventListener(MouseEvent.MOUSE_DOWN, rectStartingPoint);
stage.addEventListener(MouseEvent.MOUSE_MOVE, rectDraw);
}

function rectDraw(m:MouseEvent):void
{
endX = mouseX;
endY = mouseY;
}


When you first click to begin drawing, it records that point. When you release, it records that point.

Then using the formula it posted, it draws the rectangle.

If you're moving a Sprite and assuming that its registration point is in the upper left hand corner:

beginX and beginY equal Sprite.x and Sprite.y respectively. endX and endY equal Sprite.x + Sprite.width and Sprite.y + Sprite.height respectively.

Is that what you're looking for?

[evan]

yes, eventually I want to get there.

Also I think I can just plug in some values to a sprite that doesn't move -right?

-as in have a user save their artwork in a drawing pad would that work too -I assume it will.

(I have two projects in mind for this kind of thing)


-I'll have to play with it because everything that example does is overkill -and it uses external code (I just starting out with it).

[Medyman]

I'll have to play with it because everything that example does is overkill -and it uses external code

How is it overkill? To me, it seems exactly like what you're doing. Draw a rectangle & copy the source below it. The only difference is that in the example, you're adding the copied bitmap to the displayList whereas you would send it off to the JPGEncoder.

Also, there is no external code there. Also those imports are of native AS3 classes. The developer there is using a Document class so those import calls are required. If you're using the Flash IDE, you shouldn't have to import any of those.

Of particular interest to you would be the cropImage() function, I think.

[evan]

cool I woke up at 3:00 am to get started.

I wasn't sure why all those classes had to be installed -but with external code I guesse you need to do that.

I'll give a shout if I get stuck.


thanks.

[Medyman]

I wasn't sure why all those classes had to be installed -but with external code I guesse you need to do that.

Yup...when you're using a Document class or other external classes you have to explicitely import whichever native Flash classes you need. When you're coding within the IDE, Flash does that automatically for you when it complies the SWF.

If you ever decompile a SWF that you've created using the Flash IDE, you'll see that the import * statements will be there. Of course, you didn't have to write them yourself -- they were automatically added based on which classes you needed in your code.

[evan]

I'm trying to mesh this code with the rest of it and

so far I'm S.O.L.:confused:
I would also like to eliminate the need for the loader alltogether without fowling it up.

I did get it to work by hardcoding the rectangle size and coords:rolleyes:




saveJPG_btn.addEventListener(MouseEvent.CLICK, onSaveJPG );

function onSaveJPG(evt:Event):void {



var paintGrab:BitmapData = new BitmapData(bmpWidth,bmpHeight)

paintGrab.draw(pad);



var myEncoder:JPGEncoder = new JPGEncoder(100);
var byteArray:ByteArray = myEncoder.encode(paintGrab);

var header:URLRequestHeader = new URLRequestHeader ("Content-type", "application/octet-stream");

var saveJPG:URLRequest = new URLRequest ("savejpg.php?img=mydrawing.jpg");
saveJPG.requestHeaders.push(header);
saveJPG.method = URLRequestMethod.POST;
saveJPG.data = byteArray;

navigateToURL(saveJPG, "_blank");
}




here is the link and source (http://www.asmakta.com/clients/encode3/jpeg_capture4.html)


What I want to do is simply take a snapshot of the drawing without doing anything fancy.