I've got problem with transparent using PNGEncoder class. When I encode BitmapData to png and use it as source of my Image, it looks terrible. I attach example. There are two images - first colorful and above him white with alpha gradient.
Image before save
Image after save
I've used some other libraries like AsPngEncoder, but it didn't help. It's code I use:
var bd:BitmapData = new BitmapData(container.width, container.height, true, 0xffffff);
bd.draw(container);
var pngenc:PNGEncoder = new PNGEncoder();
var pngByteArray:ByteArray = pngenc.encode(bd);
container.source = pngByteArray;
var fl:File = File.applicationStorageDirectory.resolvePath("./images/file.png");
var fs:FileStream = new FileStream();
fs.open(fl, FileMode.WRITE);
fs.writeBytes(pngByteArray);
fs.close();
Try to use new Flash Player 11.3 feature
http://help.adobe.com/en_US/as3/dev/WS4768145595f94108-17913eb4136eaab51c7-8000.html
Related
I want to use 3 bitmaps to create 1 resulting bitmap. The first will be the background. The second shall be drawn on top of the first with the help of a mask.
The images are loaded into Bitmap/BitmapData objects.
Example:
(red-green image is the mask, red is the visible part)
back mask source result
So how can I do that? What drawing function do I use in ActionScript-3?
Thanks for any help!
Edit:
(my first working solution, works only with pure red, green or blue)
var back: BitmapData = // load the back image
var mask: BitmapData = // load the mask image
var source:BitmapData = // load the source image (32-bit)
var result:BitmapData = back.clone();
// clone source because it will be modified in next step
var source2: BitmapData = source.clone();
// red of the mask becomes the alpha channel of source2
source2.copyChannel(mask, new Rectangle(0, 0, mask.width, mask.height), new Point(0, 0), BitmapDataChannel.RED, BitmapDataChannel.ALPHA);
// draw source2 to result
result.draw(source2);
(Is there a more efficient way? In this solution I have to clone source in order to keep original source bitmap intact.)
I don't know if it's the best way (performance and logic), but you can try:
var background:BitmapData = new Background();
var bmd1:BitmapData = new Mask();
var bmd2:BitmapData = new SourceImage();
var bmDiff:Bitmap = new Bitmap(mergeMaskAndBackground(bmd2, background, bmd1));
addChild(bmDiff);
function mergeMaskAndBackground(src:BitmapData, background:BitmapData, msk:BitmapData):BitmapData
{
var diffBmpData:BitmapData = BitmapData(src.compare(msk));
diffBmpData.floodFill(0, 0, BitmapDataChannel.RED);
diffBmpData.draw(background, new Matrix(), new ColorTransform(), BlendMode.OVERLAY, background.rect, true);
return diffBmpData;
}
How do I make transparent background to imported image in flash, because now i imported it and image has white box around it.
code for adding images to stage
var imageBD = (Math.floor(Math.random()*2))? new Trees() : new Rocks;
var bitmap:Bitmap = new Bitmap();
var BD:BitmapData = new BitmapData(imageBD.width, imageBD.height);
BD.draw(imageBD);
bitmap.bitmapData = BD;
bitmap.width = mRadius * 2 * mToPx;
bitmap.height = mRadius * 2 * mToPx;
bitmap.x = pxStartX;
bitmap.y = pxStartY;
this.addChild(bitmap);
obstacleImages.push(bitmap)
Since i'm mew i cannot post images so i'm giving you a link to image:http://prntscr.com/pugdl
You need to specifically tell the BitmapData (docs) object to be transparent.
In your case, replace this line:
var BD:BitmapData = new BitmapData(imageBD.width, imageBD.height);
...with this:
var BD:BitmapData = new BitmapData(imageBD.width, imageBD.height, true, 0x00000000);
Make sure the image itself has transparency. General file types for these kinds of images are PNG or GIF.
You shouldn't have to do anything for Flash to find the transparency.
I am a new face in flash community. May I have some suggestion from you guys?
I have 2 flv files, one is a video with alpha channel (I want to show it on the top), and the recorded file from camera on mobile device (maybe on iOS device). How should I do, If I want to merge these files together by programatically?
Thanks.
I'm not sure, if I understand correctly, but I think you want to show 2 video at same position.
It's pretty easy. You should start a new project, and import the two videos:
var myVideo:Video = new Video();
addChild(myVideo);
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
myVideo.attachNetStream(ns);
ns.play("http://www.example.com/file.flv");
var myVideo2:Video = new Video();
addChild(myVideo2);
var nc2:NetConnection = new NetConnection();
nc2.connect(null);
var ns2:NetStream = new NetStream(nc2);
myVideo2.attachNetStream(ns2);
ns2.play("http://www.example.com/file2.flv");
Than you should set the alpha (opacity) to 0.5 (or anything in a 0-1 range) of the video, so it will be semi-transparent:
myVideo2.alpha = 0.5;
The child you added last with addChild() will be on top of the displaylist, so you should set the alpha of that one. (you can also set both's alpha to any value).
Hope it helped.
I have a BitmapImage and I applied a ShaderFilter to it:
var bm:BitmapImage = new BitmapImage();
bm.source = resizedBitmapData;
bm.filters = [filter];
I tried copy the bitmapImage into a bigger image as overlay:
bm.addEventListener(FlexEvent.READY, function (event:*):void {
var bmd:BitmapData = bm.bitmapData;
backgroundBitmap.bitmapData.copyPixels(bmd,
new Rectangle(0, 0, bmd.width, bmd.height),
location);
});
It worked but what "bmd" contains is the original image before the filter was applied. What I wanted is to grab the resulting image after applying the filter. Is this possible?
I was trying ImageSnapshot.captureBitmapData() but BitmapImage doesnt seem to be an IBitmapDrawable.
I would try adding it to a sprite and then render the sprite if your way is not working allready...
something like
var helper:Sprite = new Sprite();
helper.addChild(bm);
var bmd:BitmapData = new BitmapData(bm.width,bm.height);
bmd.draw(helper);
backgroundBitmap.bitmapData.copyPixels(helper,
new Rectangle(0, 0, helper.width, helper.height),location);
have you anyway checked the filter applies and is rendering with the wanted result? ;)
I am trying to export transparent PNG files using this class:
com.adobe.images.PNGEncoder;
var pngSource:BitmapData = new BitmapData (stage.stageWidth, stage.stageHeight);
pngSource.draw(stage);
var ba:ByteArray = PNGEncoder.encode(pngSource);
var file:File = File.desktopDirectory.resolvePath("test.png");
var fileStream:FileStream = new FileStream();
fileStream.open(file, FileMode.WRITE);
fileStream.writeBytes(ba);
fileStream.close();
All works fine - except the transparent issue...
If I could get Flash's stage color be transparent then it will work - but unfortunatly - there is no such option.
Are there any options I am missing?
You need to make a BitmapData instance with a transparent background. You do that through the transparent argument in the constructor and a fill color with an alpha component(ARGB in hex):
var pngSource:BitmapData = new BitmapData (stage.stageWidth, stage.stageHeight,true,0x00FFFFFF);//'transparent white'