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!

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

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….