AS3 send BitmapData to backend efficiently

I was recently asked to send a medium/large file to a backend server running with php. At first I tried sending byteArray but that got messed up from JSON.strigify then I thought to convert the byteArray to base64 format. Although it worked an image of 500×700 occupied ~500kb on the database so it was unacceptable.
The solution was to compess the byteArray and send it, and then decompress it when I received it again. And here is how I did it:


public static function deconstructBitmap(bmp:BitmapData):Object
    {
      // converting the bitmapdata into a byteArray
      var byteArray:ByteArray = bmp.getPixels(bmp.rect);
      // compressing using the default algorithm 'zlib'
      byteArray.compress();
      var enc:Base64Encoder = new Base64Encoder();  
      var b64;
      enc.encodeBytes(byteArray);
      // joining all in one line
      b64 = enc.drain().split("\n").join("");
      // the rectangle is needed for re-contstruction
      return {'bmpData':b64,'rect':bmp.rect};
    }

And now we have a compressed byteArray with our bitmapData the 500×700 bitmap data now occupies ~13kb on the database!

And here is the re-construction of the byteArray into bitmapData ready to be inserted to <s:Image/> or any other component.


public static function constructBitmap(obj:Object):BitmapData
    {
      // to avoid errors
      if(obj!==''&&obj!==undefined&&obj!==null&&obj.bmpData!=='ByteArray'){
        var dec:Base64Decoder = new Base64Decoder();
        dec.decode(obj.bmpData); // decoding using the same algorithm
        var newByteArr:ByteArray=dec.toByteArray();
        newByteArr.uncompress();
        // end of decoding //
        
        var bitmapData:BitmapData = new BitmapData(obj.rect.width, obj.rect.height);
        bitmapData.setPixels(bitmapData.rect, newByteArr);
        return bitmapData;
      }
      else
      {
        return null;
      }
    }

And thats it, two simple functions to make you and your database happy!

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Re-arrange objects in a VGroup by Drag&Drop (Flex Spark)

Adding drag and drop support for Group components, as well as swapping of children or reorder.
This might seem like a straightforward issue and an easy solution, but as I found out… only list based views have the ability to re-arrange their children via dragging and droping. But there is one hidden gem, all the Group based components have build-in support for drag and drop operations, and whilst the user cannot enable directly the dropEnabled option (which allows the re-arrange like operation), it is fairly easy to create a custom functionality to imitate it.
Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Flex Spark VideoPlayer FullScreen bug workaround

VideoPlayer has a native bug which causes it, to loose its width and height attributes when the user cancels FullScreen mode.

A workaround is to capture the event and re-enter the player attributes as follows:

Listening to the FULL_SCREEN event at the systemManager

systemManager.stage.addEventListener(FullScreenEvent.FULL_SCREEN,funct ion(e)
{
var event = e.fullScreen;
if(event==false)
{
player.percentHeight=100;
player.percentWidth=100;
player.invalidateDisplayList();
}trace(e);
});

and if it is about to close I re-enter the percentages for the player height and width, and it again works as expected.

I hope this helps someone….

Facebooktwittergoogle_pluspinterestlinkedin
linkedin