I am using LoaderMax to load an external PNG and display it in many places so I use the following code to duplicate the image:
var cd:ContentDisplay = ContentDisplay(loader.getContent("name"));
var b1 = Bitmap(cd.rawContent);
var old = b1.bitmapData;
var bmp = new Bitmap(b1);
container.addChild(bmp);
The original image has a 50% on the alpha channel, but when I create the new bitmap from from the same bitmapData object, it does not preserve the alpha channel.
If I try to copy the alpha channel (see the code below; if I understand correctly, the alpha channel is copied from itself, to itself)- the transparency is on the new image , but the code throws an error...
bmp.copyChannel(old, new Rectangle(0, 0, old.width, old.height), new Point(), BitmapDataChannel.ALPHA, BitmapDataChannel.ALPHA);
Error:
ReferenceError: Error #1069: Property copyChannel not found on flash.display.Bitmap and there is no default value.
at barmask/frame1()
How can I duplicate a PNG and maintain the alpha transparency... preferably without the error?
P.s. Please forgive any obvious mistakes, I am a ActionScript Newb...
His answer was very close to complete:
new BitmapData(w, h, true, 0);
The last property ensuring that flash doesn't include a background in the new image. That should solve your issue. It has to be exactly "0", not 0x000000, either.
create your BitmapData instance, passing 3 parameters to the constructor: new BitmapData(w, h, true), Boolean value is transparency
also check the transparent property of the source BitmapData
Bitmap doesn't have a copyChannel method as the error says :)
Instead of this:
bmp.copyChannel(...
You need to do this:
bmp.bitmapData.copyChannel(...
Related
I am trying to read an image using Loader (variable name is faceimage) and trying to pass the bitmapdata of that image to a function called detect. However, it is failing in the line where I am trying to get the Bitmap.
bmpTarget = new Bitmap( new BitmapData( faceImage.width, faceImage.height, false ) )
bmpTarget.bitmapData.draw( faceImage ); // Fails, no errors shown
detector.detect( bmpTarget.bitmapData );
I narrowed down to this line by putting trace statements above and below the failing line. The faceImage contains valid data which I verified by displaying contents on screen. I also tried
bmpTarget = Bitmap(BitmapData(faceImage.content))
but in vain. Am I doing something wrong here?
It could be a sandbox/crossdomain issue. Certain crossdomain settings prohibit drawing the content of a loaded image to a bitmapData. You can get around it by loading the raw image data with URLLoader and then using loadBytes on Loader.
As noted from:
Why do Loader objects kill bitmapdata draw();?
You likely need a LoaderContext.
loader.load("http://www.example.com/myimage.jpg", new LoaderContext(true));
Otherwise, you can load images from other sites but not access the actual bitmapData, which a draw() requires.
I wonder if you're trying to access the bitmapdata before it's been loaded?
Perhaps try using a complete listener...
var _urlRequest:URLRequest = new URLRequest("urlToImage");
var faceImage:Loader = new Loader;
faceImage.load(_urlRequest);
faceImage.addEventListener(IOErrorEvent.IO_ERROR, function(e:IOErrorEvent):void{ trace(e) });
faceImage.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded, false, 0, true);
function imageLoaded(e:Event):void {
faceImage.contentLoaderInfo.removeEventListener(Event.COMPLETE, imageLoaded);
var bmpTarget:Bitmap = e.target.content;
detector.detect( bmpTarget.bitmapData );
}
objectToBeMasked.mask = maskObject;
Ok, simple... but I can SEE the maskObject unless I set its alpha to 0 and then it doesn't let clicks through to objectToBeMasked
And every single tutorial that I've seen fails to mention this and how to solve it, as if it should be obvious.
How do I mask objects through AS3 so that the masks act like masks act like the ones added in the IDE?
Here is an example :
var maskedShape : Shape = new Shape();
maskedShape.graphics.beginFill(0x0);
maskedShape.graphics.drawRect(0, 0, 100, 100);
maskedShape.graphics.endFill();
addChild(maskedShape);
var maskerShape : Shape = new Shape();
maskerShape.graphics.beginFill(0x0);
maskerShape.graphics.drawRect(0, 0, 100, 100);
maskerShape.graphics.endFill();
addChild(maskerShape);
maskerShape.x = 20;
maskerShape.y = 20;
maskedShape.mask = maskerShape;
You shouldn't see the mask. Probably the mask and the masked object are not on the stage at the time you are trying to apply the mask.
Can you pass on some code here?
The easiest way is to not render your object simply bt setting visible parameter to false :
maskObject.visible = false;
so your objectToBeMasked is still masked, but do not catch mouse event, and is not rendered anymore :)
i have a
dsgnArea----> a movieclip
dsgnArea is masked by dsgnAreaMask, which inturn is a movieclip
dsgnArea.mask=dsgnAreaMask;
the width,height and position of dsgnAreaMask and dsgnArea are same.
i dynamically added multiple movieclips and labels to dsgnArea;
like..
dsgnArea.addChild(movieClip1);
dsgnArea.addChild(movieClip2);
dsgnArea.addChild(label1);
dsgnArea.addChild(label2); and so on...
these movieclips (movieClip1,movieClip2,......) and labels(label1,label2,....) positions can be altered in runtime..
but as i masked the dsgnArea with dsgnAreaMask, only a portion of the added movieClips and labels are visible...
So, my problem is to grab that visible portion in dsgnArea into a bitmap,like a screenshot of that particular dsgnArea, and save it in my server.
please help me out in this problem.
Say s is the DisplayObject object you want to capture and m is the mask applied on it.
var maskRect:Rectangle = m.getRect(s);
var matrix:Matrix = new Matrix(1, 0, 0, 1, -maskRect.x, -maskRect.y);
var w:Number = Math.min(s.width, maskRect.right) - maskRect.x;
var h:Number = Math.min(s.height, maskRect.bottom) - maskRect.y;
var bd:BitmapData = new BitmapData(w, h);
bd.draw(s, matrix);
Does that work?
The BitmapData draw method is what you are looking for. You can use it's clipRect param to define what you would like to draw (the masked parts).
Quasimondo did a handy little method to do this (take a snapshot of the whole displayObject), it's available here: http://www.quasimondo.com/archives/000670.php
I don't know if it works with masked content though.
if it doesn't, the trick would be to translate the whole content by the size of the mask
var bounds:Rectangle = dsgnAreaMask.getBounds( dsgnAreaMask );
instead of using the content of the clip
var bounds:Rectangle = clip.getBounds( clip );
as far as saving file to server is concerned, the question was asked (answered?) here AS3 Save Media File to server
The title might be a little misleading. Look at my code and I will explain
public static function loadTile(tileDir:String = "empty"):void
{
if(tileDir != "empty")
{
tPoint = new Point(0,0);
tRect = new Rectangle(0,0,30,30);
//load in tile sheet image
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT,tilesLoadInit);
loader.load(new URLRequest(tileDir));
}
}
private static function tilesLoadInit (e:Event):void {
tileImage = Bitmap(loader.content).bitmapData;
tileReady.dispatchEvent(new Event("TileReady"));
}
var tImage:BitmapData = new BitmapData(30,30);
tileNum = tileNumber;
tPoint.x = 0;
tPoint.y = 0;
tRect.x = 0;
tRect.y = 0;
tImage.copyPixels(tileImage,tRect,tPoint);
this.graphics.beginBitmapFill(tImage);
this.graphics.drawRect(0, 0,tWidth ,tHeight );
I create a empty bitMapData called tImage. I then take a predefined variable called tileImage which is a bitMapData as well and contains a picture of an image. tRect is predefined as well its width and height is 30x30. I copy a piece of the image and I put it in tImage. problem is that AS3 throws an error saying that tImage is a incorrect type
ArgumentError: Error #2015: Invalid BitmapData.
But clearly it isnt. my question is that is there something different about the data type of bitMapData and bitMapData type that the graphic object accepts ?
I am trying to do tiling with sprites. I want my tiles to be interactive, so that is why I am using the sprite object instead of using regular bitMaps to represent my tiles. You might be wondering why I wouldnt just use graphics.beginBitmapFill(tImage); and graphics.drawRect(0, 0,tWidth ,tHeight ); to pick out the tiles I want to use. Well reason being is because it turns out that drawRect() first and second parameters actually alter the location of where the actual sprite sits at.
So if I set the x and y properties of the sprite to x = 20, and y = 20. then I set my drawRect(20,20). it actually adds an extra 20 pixels to my x and y coords of my sprite. And I know the reason why, I just need to know a better way. Sorry for so much writing and thanks for your time!
It's not saying the type is wrong, it's saying the object is invalid. I expect you'd get a TypeError if the type was wrong.
You've also not stated where exactly the error is thrown, and are assuming the problem is with tImage on the 8th line. It looks more likely that the problem is with tileImage (which you've given no details about) on line 7.
This is probably because of Flash's inbuilt limit to the size of BitmapData objects. If the total number of pixels is larger than 16,777,215, Error #2015 is thrown.
You can read up on it in the docs: BitmapData, Right above "View the examples".
Here's a trick that used to work if you want to give it a shot: BitmapData workaround
How to assign bytearray value to panel background image. If anybody have idea or experiance plz help me to overcome the problem. BRIEF EXP:
I have panel control and want to load image getting from webservice as a backgroundimage. So i used setstyle() but its not accepting that image. so how to add that image into my panel background image.Plz tel me your ideas here.
In Flex 3 or higher, you just need to do:
yourImage.source = yourByteArray;
regards!
uhm, well i presume, since it is an image, you have it in a BitmapData, let's say "myBmp" ...
then use the following to extract all the data from BitmapData:
var bytes:ByteArray = myBmp.getPixels(myBmp.rect);
and the following to write:
myBmp.setPixels(myBmp.rect, bytes);
note that only the raw 32 bit pixel data is stored in the ByteArray, without compression, nor the dimensions of the original image.
for compression, you should refer to the corelib, as ozke said ...
For AS3 you can use adobe corelib. Check this tutorial...
http://ntt.cc/2009/01/09/as3corelib-tutorialhow-to-use-jpegencoder-and-pngencoder-class-in-flex.html
I used a flash.display.Loader() to load an image in an array. It has a Complete event that is fired after the image has been loaded. I then draw the image on to a Bitmap which I set to the data of a Image that could be placed in a panel. Hope you can make since of this good luck.
public static function updateImage(img:Image, matrix:Matrix,
pageDTO:PageDTO, bitmapData:BitmapData):void {
var loader:flash.display.Loader = new flash.display.Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function (e:Event) : void {
bitmapData.draw(loader.content, matrix);
pageViewer.data = new Bitmap(bitmapData);
});
loader.loadBytes(pageDTO.thumbnail);
}
<mx:Panel>
<mx:Image id="pageViewer"/>
</mx:Panel>
Using adobe's JPGEncoder (com.adobe.images.JPGEncoder) class and ByteArray is pretty much all you need. Converting image to byte array (assuming CAPS are variables you'd need to fill in):
// -- first draw (copy) the image's bitmap data
var image:DisplayObject = YOUR_IMAGE;
var src:BitmapData = new BitmapData(image.width, image.height);
src.draw(image);
// -- encode the jpg
var quality:int = 75;
var jpg:JPGEncoder = new JPGEncoder(quality);
var byteArray:ByteArray = jpg.encode(src);
I had the same problem. As a workaround I created sub Canvas nested inside a main Canvas and added an Image to the main Canvas behind the sub Canvas. Anything drawn on the sub Canvas will appear on top of the Image.
Just load it into a Loader instance using the loadBytes function.
var ldr:Loader = new Loader();
ldr.loadBytes(myByteArray);
addChild(ldr);