Sending byteArray (image) and variables to server-side script as POST data in AS3

zedia.net — Wed, 21 Jul 2010 17:07:49 +0000

A couple things here, I first talked about how to send an image and variables to the server (at the same time) on this post, but it felt a bit weird, the file had no name to retrieve it and the variables were sent as GET. Now while working a with a new colleague, he showed me this code that for him was nothing but for me was amazing. It is a little library called UploadPostHelper made by Jonathan Marston back in 2007 (2007! why didn’t someone talk to me about this library before!!!).

Anyway here is a little code snippet showing how to use it:

var jpegEncoder:JPGEncoder = new JPGEncoder(85); //using the JPGEncoder from as3corelib
var jpegBytes:ByteArray = jpegEncoder.encode(myPicture.bitmapData); //encoding a Bitmap into a ByteArray
 
var urlRequest : URLRequest = new URLRequest();
urlRequest.url = "THE URL OF YOUR SERVER SIDE SCRIPT";
urlRequest.contentType = 'multipart/form-data; boundary=' + UploadPostHelper.getBoundary();
urlRequest.method = URLRequestMethod.POST;
 
//now create an object with the variables you want to send as POST
var postVariables:Object = {variable1Name:variable1Data, variable21Name:variable2Data, variable3Name:variable3Data}
urlRequest.data = UploadPostHelper.getPostData( 'image.jpg', jpegBytes,"filedata", postVariables); //here is where the magic happens, filedata will be the name to retrieve the file
urlRequest.requestHeaders.push( new URLRequestHeader( 'Cache-Control', 'no-cache' ) );
 
//from here it is just a normal URLLoader
_pictureUploader = new URLLoader();
_pictureUploader.dataFormat = URLLoaderDataFormat.BINARY;
_pictureUploader.addEventListener( Event.COMPLETE, _onUploadComplete, false, 0, true );
_pictureUploader.load( urlRequest );

How easy and beautiful is that?

So can get the code for the UploadPostHelper at the bottom of this post or I have made a zip file with the .as file here.

Dude, 2007!

Loading a COLLADA model without loading a file

zedia.net — Wed, 02 Dec 2009 19:56:06 +0000

You know what is funny? It’s when every project your doing what was cool 2 years ago. Yeah I have been doing a lot of Papervision3D lately, but you know what, I’m fine with it, I actually like it. Anyway, I think Augmented Reality is retarded (ok not that much, but fun to say). So I’m doing all that 3D and usually it’s easier to just load COLLADA models, mostly because you get more complex shapes and the texturing is also easier, all done by the 3D artist. That also help with the workflow, 3D guy does his thing Flash guys does his and they can work at the same time, which is great.

Normally I would just load the DAE file externally, it’s just an xml file but some times it can get quite big. For the project I am currently working on, (stay posted this one is going to be great) I have a lot of very small models, like a lot (omg I sound like the 10 years old daughter I don’t have). So I can’t load all of them externally because this would make too many server call which would in return slow my application greatly. It is not well know (maybe Flex developer knew this more) but you can embed the DAE file inside your SWF by using the Flex embed tag, now available in Flash CS4. I found this info on the pv3d.org site. Here is the code:

[Embed(source="../../../../../assets/domino.dae", mimeType = "application/octet-stream")]
private var daeAsset:Class;
 
var byteArray:ByteArray = new daeAsset() as ByteArray;
var _dae:DAE = new DAE();
_dae.load(byteArray);

Well that is pretty cool and it saves you some loading time and server calls. What I don’t like with the embed tag is that the path to your asset is relative to the class file path not to the project, so sometime it is very tedious to find the right path.

Now let say you were generating textures at runtime (you guessed right, that is what I am doing) you still need to put a listener on the DAE to know when the load is completed, because even though it’s faster than loading an external file it’s still not instantaneous. Here is the full code:

[Embed(source="../../../../../assets/domino.dae", mimeType = "application/octet-stream")]
private var daeAsset:Class;
 
var byteArray:ByteArray = new daeAsset() as ByteArray;
var _dae:DAE = new DAE();
_dae.addEventListener(FileLoadEvent.LOAD_COMPLETE , _daeLoadComplete, false, 0, true);
_dae.load(byteArray);
 
function _daeLoadComplete(event:FileLoadEvent):void {
  event.target.removeEventListener(FileLoadEvent.LOAD_COMPLETE, _daeLoadComplete);
  var child:DisplayObject3D = _dae.getChildByName("modelName", true) //modelName is the name of the shape the was outputted from your 3D program, you can see that name in the trace from Papervision3D
 
  var bitmapMaterial:BitmapMaterial = new BitmapMaterial(_texture, true);//_texture is you runtime generated bitmapData
  child.material = bitmapMaterial;
}

Ok, only 4 more articles to write to remove the annoying roar4milk widget from my homepage (the reason for the sudden music).

zedia flash blog » ByteArray

Sending byteArray (image) and variables to server-side script as POST data in AS3

Loading a COLLADA model without loading a file