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? ;)
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;
}
I am trying to load an image from an url in as3, as follows:
var myImageLoader:Loader = new Loader();
private var mcImage: MovieClip = new MovieClip();
var myImageLocation:URLRequest = new URLRequest("http://example.com/xyz.jpg");
myImageLoader.load(myImageLocation);
mcImage.addChild(myImageLoader);
mcImage.x = 100;
mcImage.y = 100;
//mcImage.width = 50;
//mcImage.height = 50;
addChild(mcImage);
The code above works fine, but since my desire image has a different size comparing to the original image, changing its size is necessary here. So after using the lines, which are commented in the code above, the mcImage disappear.
I tried to use mcImage.scaleX =myImageLoader.width/50 , but since myImageLoader is not loaded at the beginning, we cannot get the width of myImageLoader which is null.
It's the often error with setting sizes, you can't set size of empty display object (object that width and height are zero). To set size of display object you need first to draw something on it's graphics (for example 1*1 px rectangle), but you should understand that after it you will just scale your display object relatively to it's original size, for example if you draw 1*1 px rectangle and set with=height=50, scaleX and scaleY for it will be 50, so your loaded image if we say about loader will be giant size :) It's all about sizing in flash.
What about your task: there is one common rule - don't resize loader, resize loaded image. As I said above resizing of loader will only scale your image rather than set it sizes. Add complete handler and resize loader.content as you want.
Example:
public function astest()
{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplte);
addChild(loader);
loader.load(new URLRequest("https://www.google.ru/images/srpr/logo3w.png"));
}
protected function onComplte(event:Event):void
{
EventDispatcher(event.target).removeEventListener(event.type, arguments.callee);
var image:DisplayObject = (event.target as LoaderInfo).content;
image.width = 50;
image.height = 50;
}
You need to get loadComplete event on your loader before playing with your MC
var myImageLoader:Loader = new Loader();
private var mcImage: MovieClip = new MovieClip();
var myImageLocation:URLRequest = new URLRequest("http://example.com/xyz.jpg");
myImageLoader.addEventListener(Event.COMPLETE, completeHandler);
myImageLoader.load(myImageLocation);
function completeHandler(e:Event){
mcImage.x = 100;
mcImage.y = 100;
mcImage.width = 50;
mcImage.height = 50;
addChild(mcImage);
mcImage.addChild(myImageLoader);
}
try this:
var myImageLoader:Loader = new Loader();
//hide until loaded
myImageLoader.visible = false;
//listen for load completed
myImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
//...rest of your code (without setting width/height)
Then add this to resize and make visible when loaded:
function completeHandler(event:Event):void
{
myImageLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, completeHandler);
myImageLoader.content.width = 50;
myImageLoader.content.height = 50;
myImageLoader.visible = true;
}
i have multiple images that are created dynamically, and i want in some cases to change the image. i can save them in an array, but how can i change the image (load another image) by getting it from the array.
let's say that i have an array:
var ImagesArray:Array = [];
and i push to it loader objects, and want to change (load new) image of ImagesArray[0] or ImagesArray[1]... like:
var loaderNew:Loader = new Loader();
loaderNew = ImagesArray[i];
loaderNew.load(new URLRequest("../lib/NewImg.png"));
Thanks,
You dont need to create new loader if you only want to change its image, here's an example of function to update image url:
private function changeImageByIndex(i:int, url:String):void
{
var loader:Loader = ImagesArray[i] as Loader;
if (!loader)
{
loader = new Loader();
addChild(loader);
ImagesArray[i] = loader;
}
loader.load(new URLRequest(url));
}
If you have bitmap, use loadBytes() method instead load(), here's example:
var bitmap:Bitmap = new Bitmap(new BitmapData(100, 100, true, 0xff0000));
var encoder:JPEGEncoder = new JPEGEncoder();
loader.loadBytes(encoder.encode(bitmap.bitmapData));
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'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