Flex Mobile AS3, PersistenceManager storing/receiving BitmapData - actionscript-3

I'm using the PersistenceManager to store data from my App. If I store BitmapData, it will stored correctly, but after a restart the BitmapData is now an Object. If I cast the Object to BitmapData it doesn't work.
pm.setProperty("sign", signArea.getBitmapData());
And this is the way I try to load it.
pm.getProperty("sign") as BitmapData;
If I doesn't stop the app, it would loaded correctly, but after a restart the "sign" is not BitmapData anymore. It's now an Object.

I don't think you can safely store an instance of BitmapData in a shared object (internally used in the PersistanceManager). It is not explicitly mentioned in the docs: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/SharedObject.html
You can however save the data of the BitmapData as a ByteArray and convert is back when retrieving.
// write
var byteArray:ByteArray = bitmap.bitmapData.getPixels(bitmap.bitmapData.rect);
so.data.byteArray = byteArray;
so.data.width = bitmap.bitmapData.rect.width;
so.data.height = bitmap.bitmapData.rect.height;
so.flush();
// read
var byteArray:ByteArray = so.data.byteArray;
var bitmapData:BitmapData = new BitmapData(so.data.width, so.data.height);
bitmapData.setPixels(bitmapData.rect, byteArray);
Notice that you'll also need to store the width and the height of the image. You could wrap this in an object so that you have 1 entry in the persistance manager instead of 3. This might be more convenient if you want to store multiple bitmaps.
// write
var bd:BitmapData = signArea.getBitmapData();
var r:Rectangle = bd.rect;
pm.setProperty("sign", {bytes:bd.getPixels(r), width:r.width, height:r.height});
// read
var signData:Object = pm.getProperty("sign");
var bitmapData:BitmapData = new BitmapData(signData.width, signData.height);
bitmapData.setPixels(bitmapData.rect, signData.bytes);

Related

My ByteArray isn't retaining filters

I have an RTMP stream that I need to take a screenshot of. I got a security error using bitmapData.draw() since it was coming from AWS S3 so I found a workaround that allows me to take a screenshot of the video:
var bitmap = new Bitmap();
var graphicsData : Vector.<IGraphicsData>;
graphicsData = container.graphics.readGraphicsData(); //-- container is a sprite that holds my video element
bitmap.bitmapData = GraphicsBitmapFill(graphicsData[0]).bitmapData;
var image:ByteArray = new JPGEncoder(85).encode(bitmap.bitmapData);
At this point, I send the ByteArray to PHP, create a JPG out of the ByteArray and save it to the server. That all works great.
The issue is I apply filters realtime to the container sprite which alters the look of the video like brightness, contrast, saturation etc, but when saving to the server, the saved image doesn't contain the filters I had applied.
I tried reapplying the filters to bitmap, graphicsData and bitmap.bitmapData, but nothing worked.
How can I either retain the filters applied or reapply the filters to the above code?
EDIT
Here is how I initially apply the filters:
private function applyEffects(effects:Array):void
{
currentEffects = effects;
var props:Object = {};
for (var i:String in effects)
{
props[effects[i].effect] = effects[i].amount;
}
TweenLite.to(container,0,{colorMatrixFilter:props});
}
props object could look something like: {contrast:0.5,saturation:1}
Ok, I have solved this on my own with a little suggestion Jack Doyle (GSAP Author) gave me. I have described what I did differently in the comments of my code:
var graphicsData:Vector.<IGraphicsData>;
graphicsData = container.graphics.readGraphicsData();
var origBitmap:Bitmap = new Bitmap();
origBitmap.bitmapData = GraphicsBitmapFill(graphicsData[0]).bitmapData;
//-- at this point I have a screenshot of the video
var props:Object = {};
for (var i:String in currentEffects)
{
props[currentEffects[i].effect] = currentEffects[i].amount;
}
TweenLite.to(origBitmap,0,{colorMatrixFilter:props});
//-- at this point I've reapplied the effects.
//-- originally, sending bitmap.bitmapData to the encoder didn't retain the filters so I went 1 step further
//-- create a new bitmapData and draw the reapplied filter'd bitmap
var filteredBitmapData:BitmapData = new BitmapData(640,360);
var filteredBitmap:Bitmap = new Bitmap(filteredBitmapData);
filteredBitmapData.draw(origBitmap);
//-- encode the new bitmap data
var image:ByteArray = new JPGEncoder(85).encode(filteredBitmapData); //-- filteredBitmapData is now filtered and I can send this to the server

loading saved bitmap

i had saved a bitmap and i want to load it in runtime.
here is my codes:
var saveDataTxt:SharedObject = SharedObject.getLocal("File");
var textName:String; var textClass:Class;
textName = "Text0" + 1;
textClass = getDefinitionByName(textName) as
Class;
var tx:BitmapData = new textClass(); txtP[1] = new
Bitmap(tx);
saveDataTxt.data.txtArray[1] = txtP[1];
addChild(saveDataTxt.data.txtArray[n]);
but it gives me an error :
**TypeError: Error #1034: Type Coercion failed: cannot convert Object#384c2b1 to flash.display.DisplayObject.**
whats the solution?
To store a bitmap in a shared object, you would need to serialize it to a byte array first (see Is it possible to store images in the SharedObject of Flash?)
What you can do, is just store your custom BitmapData subclass in the shared object (if you don't want to bother with byte arrays)
//you need to register every class/subclass in your shared object
registerClassAlias("flash.display.BitmapData", BitmapData);
var saveDataTxt:SharedObject = SharedObject.getLocal("File");
var textName:String; var textClass:Class;
textName = "Text0" + 1; textClass = getDefinitionByName(textName) as Class;
registerClassAlias(textName,textClass); //need to register the custom class
var tx:BitmapData = new textClass(); txtP[1] = new Bitmap(tx);
saveDataTxt.data.txtArray[1] = tx; //just store the bitmap data
addChild(new Bitmap(saveDataTxt.data.txtArray[n] as BitmapData)); //you have to cast the object as bitmap data

Save JPG from CDROM to PC

I am using following function to Save the output from SWF and send it to a PHP page so that it creates JPG, my problem if there is not INTERNET connection and the SWF is in a CDROM can the Save function be used in FLASH so that it outputs JPG and save it on a computer.
In short can we Save movieclip output as an JPG
/**
Screenshot and jpg output
**/
import flash.display.BitmapData;
import flash.geom.Matrix;
//Buttons handlers. Should add an extra function because delegate doesn't allow to pass parameters
shaF.onPress = mx.utils.Delegate.create(this,makeShadow);
//Helper functions to pass parameters
function makeShadow() { capture(0) }
/*
create a function that takes a snapshot of the Video object whenever it is called
and shows in different clips
*/
function capture(nr){
this["snapshot"+nr] = new BitmapData(abc._width,abc._height);
//the bitmap object with no transformations applied
this["snapshot"+nr].draw(abc,new Matrix());
var t:MovieClip = createEmptyMovieClip("bitmap_mc"+nr,nr);
//positions clip in correct place
//t._x = 350; t._y = 10+(nr*130); t._xscale = t._yscale = 50
//display the specified bitmap object inside the movie clip
t.attachBitmap(this["snapshot"+nr],1);
output(nr);
//attachMovie("print_but", "bot"+nr, 100+nr, {_x:t._x+t._width+50, _y:t._y+t._height/2})
}
//Create a new bitmapdata, resize it 50 %, pass image data to a server script
// using a LoadVars object (large packet)
function output(nr){
//Here we will copy pixels data
var pixels:Array = new Array()
//Create a new BitmapData
var snap = new BitmapData(this["snapshot"+nr].width, this["snapshot"+nr].height);
//Matrix to scale the new image
myMatrix = new Matrix();
myMatrix.scale(1, 1)
//Copy image
snap.draw(this["snapshot"+nr], myMatrix);
var w:Number = snap.width, tmp
var h:Number = snap.height
//Build pixels array
for(var a=0; a<=w; a++){
for(var b=0; b<=h; b++){
tmp = snap.getPixel32(a, b).toString(16)
//if(tmp == "-fcffff")
//{
//tmp="-ff0000";
//}
pixels.push(tmp.substr(1))
}
}
//Create the LoadVars object and pass data to PHP script
var output:LoadVars = new LoadVars()
output.img = pixels.toString()
output.height = h
output.width = w
//The page (and this movie itself) should be in a server to work
output.send("show.php", "output", "POST")
}
stop()
Since you already have the BitmapData, this is fairly easy. Modifying your output function:
//Copy image
snap.draw(this["snapshot"+nr], myMatrix);
//Now check if we want to save as JPG instead of sending data to the server
if (runningFromCdrom) {
var encoder:JPEGEncoder = new JPEGEncoder();
var bytes:ByteArray = encoder.encode(snap);
var file:FileReference = new FileReference();
file.save(bytes);
} else {
// ...the rest of your output method...
}
How to determine the runningFromCdrom value is up to you. If the SWF is being run inside an HTML document, the best way to tell if the program is being run from a CD-ROM would be to specify it in the FlashVars.
Yes, you can save JPEG's directly from Flash. There is no need for the intermediate step to PHP.
You can use one of these JPEG encoders:
https://github.com/mikechambers/as3corelib
http://www.switchonthecode.com/tutorials/flex-tutorial-an-asynchronous-jpeg-encoder
I would recommend the second as it can work asynchronously (kind of) which means your UI shouldn't lock up while encoding the JPEG.

AS3/FLEX - how to convert Sprite graphics into bytes

I wrote application that lets people paint together via internet (using Adobe cirrus). Everything works great but when for example I run my application and paint something before my friend connects, he dont see that what I have painted. So I'm looking for the method, that would let me convert my canvas into something(object) that it is possible to send by internet (I cant send whole Sprite, it's not possible to copy its graphics on the friend's application, it's null).
So let's get this clear. The main question is: How to convert graphic's of Sprite into object, that would let me convert it back to Sprite and copy its canvas.
ANSWER:
I used DisplayConverter library from "www.Flextras.com" post with his mod to convert Sprite to BitmapData and then to ByteArray and it works. I couldn't receive BitmapData on the friend's app, but It worked with ByteArray.
Sprite -> BitmapData -> ByteArray;
ByteArray -> BitmapData -> Sprite;
//TO SEND
var bitmapdata:BitmapData = DisplayConverter.spriteToBitmapData(palette);
var bytearr:ByteArray = bitmapdata.getPixels(bitmapdata.rect);
//TO RECEIVE
var bmd:BitmapData = new BitmapData(530,430);
bmd.setPixels(bmd.rect, bytearr);
mysprite.graphics.beginBitmapFill(bmd);
mysprite.graphics.drawRect(0,0,530,430);
mysprite.graphics.endFill();
Hope this will help someone
I think you want to convert your Canvas into a BitMap or BitMapData (and back). A Flex Canvas extends Sprite, so you can use a library like this one. To copy the relevant code, this will convert a Sprite to a BitMap:
public static function spriteToBitmap(sprite:Sprite, smoothing:Boolean = false):Bitmap
{
var bitmapData:BitmapData = new BitmapData(sprite.width, sprite.height, true, 0x00FFFFFF);
bitmapData.draw(sprite);
return new Bitmap(bitmapData, "auto", smoothing);
} // END FUNCTION spriteToBitmap
This will convert a Bit Map to a Sprite:
public static function bitmapToSprite(bitmap:Bitmap, smoothing:Boolean = false):Sprite
{
var sprite:Sprite = new Sprite();
sprite.addChild( new Bitmap(bitmap.bitmapData.clone(), "auto", smoothing) );
return sprite;
} // END FUNCTION bitmapToSprite
In my own development, I have a mod to this library, which allows me to get the BitMapData instead of an actual BitMap. So, this will turn a Sprite into BitMapData:
public static function spriteToBitmapData(sprite:Sprite):BitmapData
{
var bitmapData:BitmapData = new BitmapData(sprite.width, sprite.height, true, 0x00FFFFFF);
bitmapData.draw(sprite);
return bitmapData;
} // END FUNCTION spriteToBitmapData
This will take BitMapData and turn it back into a Sprite:
public static function bitmapDataToSprite(bitmapData:BitmapData, smoothing:Boolean = false):Sprite
{
var sprite:Sprite = new Sprite();
sprite.addChild( new Bitmap(bitmapData.clone(), "auto", smoothing) );
return sprite;
} // END FUNCTION bitmapToSprite
You do want to keep in mind that when converting the BitMap or BitMapData back into a Sprite you will probably not be able to cast it as a Canvas. For information on sending BitMapData to a server; look at this question.
A better approach is, instead of going directly to pixels, have the user gestures create data, then reflect that data as a drawing on your canvas. Transmit the same data to the other user and he/she will get the same drawing.

AS3 : Setting the instance name of a loaded swf

I am running a for loop that loads swfs onto the stage. _componentData is an XMLList.
private function loadDevices():void
{
for each (var d:XML in _componentData.device)
{
var iname:String = d. # iname;
var mLoader:Loader = new Loader();
var mRequest:URLRequest = new URLRequest(d. # path);
mLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onDeviceLoadComplete);
mLoader.load(mRequest);
}
}
Inside onDeviceLoadComplete i want to be able to set the instance name of the loaded swf. Can i send extra parameters to the event handler function? Or is there a better approach?
Pretty sure you can't change an instance name on a dynamically-generated object. In any case, it would probably be easier to push them into an array for reference. You could use associative keys in the array and reference them as such:
var myArray:Object = new Object();
myArray.apple = "red";
for (var item in myArray) {
trace(item); // apple
trace(myArray[item]); // red
}
I found a nice link that pointed me in the right direction since i cannot set the instance name.
What i am doing is setting the name prop of the loader to iname and then using e.target.loader.name instead of the instance name. From there i am able to move forward in my development. Thanks!