Scaling AVM1Movie for using with BitmapData in as3 - actionscript-3

I have a actionscript 2 SWF that I am wanting to export into a PNG, however the fact that it is loaded as a AVM1Movie in as3 is proving quite troublesome.
When you load the as2 swf in just the normal standalone flash player, you can right click -> zoom in and it scales well since its redrawing the vector data at the size. But when i'm trying to make the Loader object (that contains the loaded as2 swf) scale, whenever i draw it to a BitmapData object, i just get the original size of the swf with blank space around it, rather then having the swf scale to the new dimensions.
My code looks like this:
var theFile:File = File(event.target);
var dis:DisplayObject = this.mLoader.content;
dis.width *=2;
dis.height *=2;
var bd:BitmapData = new BitmapData(dis.width, dis.height, true, 0x00000000);
trace("display object height and width is " + dis.width + " " + dis.height);
bd.draw(dis);
var stream:FileStream = new FileStream();
stream.open(theFile, FileMode.WRITE);
stream.writeBytes(PNGEncoder.encode(bd)); // needs as3corelib
stream.close();
Alert.show("saved to " + theFile.nativePath );
But when I open up the resulting PNG File, I get this (red shows the transparent background):
Is there any way to make it so that when I draw the as2 swf to BitmapData, it scales it like it would in the flash player?

I believe you should be able to simply use scaleX and scaleY properties instead of attempting to multiple the height and width values.
var dis:DisplayObject = this.mLoader.content;
//dis.width *=2;
dis.scaleX = 2;
//dis.height *=2;
dis.scaleY = 2;
EDIT
Alternatively since the above isn't working for you try to use a matrix argument for the draw call.
var mat:Matrix = new Matrix();
mat.scale(2,2);
bd.draw(dis,mat);

Related

load an external swf (FlashPaper pdf) into a flash project

I have to do a very simple swf application able to show a series of pdf files.
Actually I was able to create on a single layer the menu interface (some buttons on frame 0 which redirect the user to other frames where the pdf should be showed).
Here my question:
I need a way to read the pdf inside the flash frame.
I've found a possible solution converting the pdf into an swf with FlashPaper 2
Now I wish to know how import the swf into the frame.
Reading some actionscript 3 guides I was able to create a container movieclip (a simple rectangle) into which I have loaded the swf with this code:
var swf:MovieClip;
var loader:Loader = new Loader();
var defaultSWF:URLRequest = new URLRequest("test.swf"); //test.swf is my converted pdf
loader.load(defaultSWF);
screen_01.addChild(loader); //screen_01 is the container rectangle converted to movieclip
I've used a container movieclip to mantain the other objects (menu buttons) on the frame, and ecause it helps with the swf positioning.
I seen it is possible also using loader.x and loader.y and it works.
Unfortunately I wasn't able to control width and height of the swf/pdf file (loader.width and loader.height exists but if used cause the swf will not loaded at all)
Solution:
I've found a possible solution at this page. The idea is to change swf scale only after the load process is complete (positioning can be done even before).
Anyway I had to use Actionscript 2 for this project because FlashPaper converted pdf doesn't work properly with AS3, I don't know why...
here the code:
//insert an emplty movieclip to load the swf, I've called it screen_01
var movLoad:MovieClipLoader = new MovieClipLoader();
var myListener:Object = new Object();
myListener.onLoadInit = function(thisMc:MovieClip) {
thisMc._height = 600;
thisMc._width = 900;
thisMc._x = 50;
thisMc._y = 30;
};
movLoad.addListener(myListener);
movLoad.loadClip("folder/flashpaper_converted_pdf.swf.swf",screen_01);
You can modify the size of the loader using scaleX and scaleY properties.
Keep them equals so the swf isn't stretched.
You may also want to listen to the COMPLETE event to do such a thing :
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
function onComplete(e:Event)
{
var loader:Loader = e.currentTarget.loader;
loader.scaleX = loader.scaleY = 2; //Double the size of the loaded swf
}

AS3 Traces Bitmap as "[object Shape]" / Bug or feature, going loco

i need to use the GetPixel32 on an Object in a movieclip.
in order to get to that object i use:
var bitmap=clip.getChildAt(0);
//and then
bitmap.bitmapData.getPixel32(x, y);
however, even though the childobject is a png i get an error and using
trace(clip.getChildAt(0));
traces "[object Shape]"
so does Flash convert certain bitmaps into shapes?
please see the this fla ( http://www.sendspace.com/file/uycmm5 ) to test it yourself.
Any ideas?
Bitmaps placed in Flash's timeline are converted to shapes (with bitmapfill) on compilation,
(UPDATE)
unless the image in the library has a linkage name, in which case it works as expected and compiles to a Bitmap object.
You can however draw a new bitmap with that shape:
var shape:DisplayObject = clip.getChildAt(0);
var bmp:BitmapData = new BitmapData(shape.width, shape.height, true, 0);
bmp.draw(shape);
bmp.getPixel32(x, y);

How can I load a Papervision/Flex application (SWF) as a material on a Papervision plane?

I am trying to build a portfolio application similar to the used by Whitevoid. I am using Flex 4 and Papervision3D 2. I have everything working except for one issue. When I try to load an external SWF as a material on one of the planes, I can see any native Flex or Flash components in their correct positions, but the papervision objects are not being rendered properly. It looks like the viewport is not being set in the nested swf. I have posted my code for loading the swf below.
private function loadMovie(path:String=""):void
{
loader = new Loader();
request = new URLRequest(path);
loader.contentLoaderInfo.addEventListener(Event.INIT, addMaterial);
loader.load(request);
}
private function addMaterial(e:Event):void
{
movie = new MovieClip();
movie.addChild(e.target.content);
var width:Number = 0;
var height:Number = 0;
width = loader.contentLoaderInfo.width;
height = loader.contentLoaderInfo.height;
//calculate the aspect ratio of the swf
var matAR:Number = width/height;
if (matAR > aspectRatio)
{
plane.scaleY = aspectRatio / matAR;
}
else if (matAR < aspectRatio)
{
plane.scaleX = matAR / aspectRatio;
}
var mat:MovieMaterial = new MovieMaterial(movie, false, true, false, new Rectangle(0, 0, width, height));
mat.interactive = true;
mat.smooth = true;
plane.material = mat;
}
Below I have posted two pictures. The first is a shot of the application running by itself. The second is the application as a MovieMaterial on a Plane. You can see how the button created as a spark object in the mxml stays in the correct position, but papervision sphere (which is rotating) is in the wrong location. Is there something I am missing here?
Man. I haven't seen that site in a while. Still one of the cooler PV projects...
What do you mean by:
I cannot properly see the scene rendered in Papervision
You say you can see the components in their appropriate positions, as in: you have a plane with what looks like the intended file loading up? But I'm guessing that you can't interact with it.
As far as I know, and I've spent a reasonable amount of time trying to make something similar work, the MovieMaterial (which I assume you're using) draws a Bitmap of whatever contents exist in your MovieClip, and if you set it to animated=true, then it will render out a series of bitmaps - equating animation. What it's not doing, is displaying an actual MovieClip (or SWF) on the plane. So you may see your components, but this is how:
MovieMaterial.as line 137
// ______________________________________________________________________ CREATE BITMAP
/**
*
* #param asset
* #return
*/
protected function createBitmapFromSprite( asset:DisplayObject ):BitmapData
{
// Set the new movie reference
movie = asset;
// initialize the bitmap since it's new
initBitmap( movie );
// Draw
drawBitmap();
// Call super.createBitmap to centralize the bitmap specific code.
// Here only MovieClip specific code, all bitmap code (maxUVs, AUTO_MIP_MAP, correctBitmap) in BitmapMaterial.
bitmap = super.createBitmap( bitmap );
return bitmap;
}
Note in the WhiteVoid you never actually interact with a movie until it "lands" = he's very likely swapping in a Movie on top of the bitmap textured plane.
The part that you are interacting with is probably another plane that holds the "button" that simply becomes visible on mouseover.
I think PV1.0 had access to real swfs as a material but this changed in 2.0. Sadly. Hopefully Molehill will.
cheers

convert masked movieclip into bitmap and save it on server

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

How to convert bytearray to image or image to bytearray ?

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);