How do you print all Elements on the Stage with ActionScript 3.0?

Question

I have a flex/as3 project in which I have a bitmap background, and then draw Sprites over top of that background. It creates a map and a route to locations on the map. I am implementing a print function to print that map(the flash screen) and then adding other information to the same page. The map displays with a width of 800px and a height around 480px on a computer screen.

I have looked in the PrintJob class in AS3 and found a way to print a separate bitmap or sprite but I would really just like to create a screen capture of the flash file and then save that as a png. to display separately on a new page with additional information. I know that saving the screen capture as a .png is a different problem but If I could figure out how to capture the stage in the first place the second problem would cease to be.

Answer 1

You would need to wrap everything that was on the stage in a Sprite instance and then pass that Sprite to PrintJob.addPage() method.

If you're using Flex then you can also use the FlexPrintJob class to handle some of the layout and pagination for you.

Answer 2

I was trying to print the Stage and stumbled with a lot of problems getting the stage to resize properly so I use a combination of solutions, that involved converting the stage to a bitmap.

Here my source:

function PrintStage(evt:MouseEvent) {
   var printJob:PrintJob = new PrintJob();
   var options:PrintJobOptions = new PrintJobOptions();
   options.printAsBitmap = true;
   trace("print called!");
   if (printJob.start()) {
    var printSprite = new Sprite();

    var bitmapData:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight);
    bitmapData.draw(stage);
    var screenShot:Bitmap = new Bitmap(bitmapData);

    printSprite.addChild(screenShot);

    //========== printjob bug fix - prevent blank pages: ==========
    printSprite.x = 2000; //keep it hidden to the side of the stage
    stage.addChild(printSprite); //add to stage - prevents blank pages
    //=============================================================

    trace("before printSprite width: " + printSprite.width + " printJob.pageWidth: " + printJob.pageWidth);

    //scale it to fill the page (portrait orientation):
    var myScale:Number;
    myScale = Math.min(printJob.pageWidth/printSprite.width, printJob.pageHeight/printSprite.height);
    printSprite.scaleX = printSprite.scaleY = myScale;
    var printArea:Rectangle = new Rectangle(0, 0, printJob.pageWidth/myScale, printJob.pageHeight/myScale);

    trace("after printSprite width: " + printSprite.width + " printJob.pageWidth: " + printJob.pageWidth);

    printJob.addPage(printSprite,printArea,options);
    printJob.send();

    stage.removeChild(printSprite);
    printSprite = null;
   }
  }

Hope it helps someone....

Answer 3

I had the same issue today. I am shocked (shocked!) that Adobe won't let you do such a simple thing as print the stage. I chose to simple create a bitmap image from the stage instance, add it to the application instance, and then print that. I think this is simpler than trying to wrap things in yet another component, mess with layout, etc. Since you have just one image for the entire screen, you need only bother with positioning this one image. If you use absolute layout, no positioning should even be necessary. It will just perfectly overlap your actual contents. Print the application instance. Remove the bitmap's container instance and you're done.

Now, it might be possible to use PrintJob and instead of FlexPrintJob to print the stage with fewer lines of code but I don't believe the stage instance is a Sprite, so regardless, something like the following is necessary.

This method assumes "this" is the application.

private function printScreen():void {
    var printJob:FlexPrintJob = new FlexPrintJob();
    if (printJob.start()) {
        var bitmapData:BitmapData = new BitmapData(stage.width, stage.height, false);
        bitmapData.draw(stage);
        var bitmap:FlexBitmap = new FlexBitmap(bitmapData);
        //Wrap the bitmap into a class that can be added to the framework display list.
        //I chose mx:Image arbitrarily.
        //Really, anything will do as long as it is an IVisualElement
        //Note that the application's layout is absolute so this image gets
        //temporarily added on top of the actual application's elements. 
        var image:Image = new Image();
        image.source = bitmap;
        addElement(image);

        printJob.addObject(this);

        removeElement(image);
    }
    // Send the job to the printer.
    printJob.send();
}

There is only one limitation I can think of to this approach. That is flash's maximum bitmap image size constraint. But for up to an HD monitor, I think there is no problem.