Solving problem with printing Flash content in Firefox browser

I will let out a secret: we have solved a problem with printing Flash/Flex applications in Firefox :)

Here is the article how you can use it. ;-)

UPD1: http://www.anychart.com/blog/2007/10/27/ac-print-manager/
UPD2: http://www.anychart.com/blog/projects/acprintmanager/
UPD3: LGPL license

Intro

Everybody knows that when you’re trying to get “Print preview” in Firefox some “strange” things happen: all Flash content disappears. But Internet Explorer displays everything correctly (it surprises me actually :) )

It is not good at all, because sometimes you want to print content of some web page, but you have to do some tricks with screenshots and so far and so on. Really boring…

Existing solutions

The thing is that no any solutions at all. Yes - you can print Flash only (by adding context menu item “Print”, by adding buttons into your flash movie, etc…). But there are no any ways to print whole web page.

Why should you carry about Firefox at all?

Answer is very simple - check out statistical numbers:
http://www.w3schools.com/browsers/browsers_stats.asp
Numbers say more than words :)

So - how can we solve this issue?

We’ll use URI scheme data: http://en.wikipedia.org/wiki/Data:_URI_scheme

What we want to do is to create a style for printing. This style will change Flash to image for Firefox browser. And you can use images in Firefox as img src=”data:image… “. Actually all these actions are automated already and all you need to do is to add JavaScript file, add swc library to the project and say, what you want to print.

Important note: it works only with Adobe Flash player 9 and higher.

Solution for Flex 2 (or later) Application

Let’s make your Flex application to print correctly in Firefox browser.

For example, we have simple application with text and image, like that:

simpleApp

Code of this application is very simple:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:Image source=”@Embed(source=’./../assets/logo_anychart.png’)” id=”anyChartLogo” x=”23″ y=”24″ width=”61″ height=”93″ />
<mx:Text x=”92″ y=”24″ height=”106″ width=”630″><mx:text>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi ut justo a ipsum pellentesque auctor. Donec est.
Mauris porttitor elit a tellus. Nullam lorem tortor, luctus vitae,
dictum quis, pulvinar quis, ipsum. Vivamus at nunc non tortor imperdiet elementum.
Donec semper sagittis tortor. Nam luctus accumsan sapien. Proin pharetra mattis leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis sit amet magna nec diam ornare consequat. Curabitur odio enim, faucibus fringilla, accumsan id,
ultricies sit amet, est. Vivamus nec mauris vitae mi porta auctor. Curabitur eget lorem sit amet elit
accumsan iaculis. Sed blandit, leo eget sollicitudin bibendum, turpis metus sagittis urna, ut
nonummy justo mi vel nisi.
</mx:text>
</mx:Text>
</mx:Application>

Let’s run it in Firefox and click Print Preview.

What do we see? Nothing:
preview

For sure, nobody will like it.

So, we’ll try to fix it:

1. Download FFPrintFix.swc from: http://www.anychart.com/tips_and_tricks/ffprintfix/FFPrintFix.swc

2. Add it to folder libs of our project:
libs folder

3. Make Flex to add FFPrintFix to our project. To do it we do right-button click and select properties:

props

In Properties we go to Flex Build Path, then to Library path and click Add SWC.
Set path to libs/FFPrintFix.swc:
swc adding

Click ??, Then in properties OK again and wait while everything will be updated and recompile the project.

4. Now we will modify a template. Usually it is located in the folder html-templates with name index.template.html.
Then we download FFPrintFix.js here: http://www.anychart.com/tips_and_tricks/ffprintfix/FFPrintFix.js and add it to the same folder html-template. Then wmodify template by adding import script:

script

Flex will copy FFPrintFix in the bin folder during compilation.

We’re almost done!

5. Initialization code.
Open our application and add initialization for printing:

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” applicationComplete=”updateImage()”> <mx:Script>
<![CDATA[

import com.anychart.utils.PrintManager;
public function updateImage():void {
PrintManager.setImage(stage);
}

]]>

</mx:Script>

PrintManager.setImage sets current state of scene as a view for printing in FireFox.

Now we run it, Click Print Preview and …

results

We’ve done it!

You can see screenshot of flash movie instead of empty space.

You can download the sample here: http://www.anychart.com/tips_and_tricks/ffprintfix/sample.zip

swc: http://www.anychart.com/tips_and_tricks/ffprintfix/FFPrintFix.swc
js: http://anychart.com/tips_and_tricks/ffprintfix/FFPrintFix.js

PS: I will publish solution for Flash 9 and FDT a little bit later.
PPS: With FFPrintFix.swc source code for sure

32 Responses to “Solving problem with printing Flash content in Firefox browser”

  1. OrangeFlash » Blog Archive » Kinda Advertisment =) Says:

    […] you can find some interesting stuff like “Solving Problem with Printing Flash content in Mozilla Firefox browser” […]

  2. Grow A Blog » Flash Printing Problems In Firefox (CSS, Style, and Positioning) Says:

    […] http://www.anychart.com/blog/2007/09/23/solving-problem-with-printing-flash-content-in-firefox-browser/ September 24th 2007 Posted to Uncategorized […]

  3. BiMaWa Says:

    It is impossible, its reality Fix the Bug with printing!! I love you Alex. You make my life is easier. This pae added in my favorites :) thx for you!

  4. judah Says:

    This is great! Thank you! :)
    I would say this is really a bug in the Flash Player so I reported it as a bug here https://bugs.adobe.com/jira/browse/SDK-12871

  5. Ryan Knight Says:

    Alex,

    This is a great solution! Any chance you would be willing to share the source code (or email it to me)?

    Thanks again!
    Ryan

  6. Alex Batsuev Says:

    Yes, sure.
    I’ll publish source code in 2 or 3 days.

  7. David Maude Says:

    Hi, I was wondering if there is a non flex way of applying this solution for printing flash objects in mozilla? Cheers.

  8. Alex Batsuev Says:

    see http://www.anychart.com/blog/2007/10/27/ac-print-manager/

  9. Sandy Says:

    I’m not sure what I’m doing wrong but when I run this from within flex it shows my charts but then after the chart is displayed it displays a copy of those charts but with no data…I think that is my image that it is creating. If I hit print preview I only see one and its the copy with no data.

    Has anyone encountered this?

  10. Alex Batsuev Says:

    Sandy, you should call PrintManager.setPrintableContent in each changes in visualisation.
    It sets current state as printable.
    As I understand, you should call it after chart was drawed.

    see
    http://www.anychart.com/blog/projects/acprintmanager/
    Step 2: set content to be printed in a browser

  11. Alex Batsuev Says:

    PS: And the first question in FAQ on the same page ;-)

  12. jm Says:

    Any chance you could do a quick tutorial with Flash CS 3? I’m kinda stumped with even basic stuff like how to import from action script. Just where it fits into a project would be great, the use of it looks really easy (good job!). Flash has such a baffling number of possible elements like twains, sprite twains, many versions of actionscript and javascript, stages; it makes it hard to know where to things belong.

    Thanks!

  13. Alex Batsuev Says:

    I’ll do it when i have enough free time

  14. Alex Batsuev Says:

    In 2 or 3 weeks. I think.

  15. Alex Batsuev Says:

    Also you can download AcPrintManager from here:
    http://www.anychart.com/blog/projects/acprintmanager/

    It contains usage sample for Adobe Flash 9

  16. Shameer Salim Says:

    tHANKS mAN,….
    iTS rEALLY cOOOLLL,……..

  17. Chris Says:

    I downloaded the package and your samples don’t work. Is there something that needs to be updated?

  18. Ayoo Says:

    first of all this is an excellent piece of code for firefox, i am trying to make this code usable for all flash player versions!
    i’ve managed to succesfully use this code to print preview flash made from flash 6+
    the ideas simple, in flex i’ve used the SWFLoader component to load an old flash file flash6.swf, and you can succesfully print preview it in firefox.
    the only problem i have is that if flash6.swf is a large file with many frame, then flash6.swf will show up properly in firefox browser, but you can only see the first frame of flash6.swf in print preview!
    How do i go about telling flex, to wait for the flash6.swf to be fully loaded in SWFLoader, and then call PrintManager??

    if this problem gets solved then i’m sure ANY flash made before flash9 can be print prviewed in firefox!

    here’s the flex code:

  19. Ayoo Says:

    Here’s the code for the above comment:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="updateImage()">
    <mx:Script>
    <![CDATA[
    import com.anychart.utils.PrintManager;

    public function updateImage():void {
    PrintManager.setImage(stage);

    }
    ]]>
    </mx:Script>
    <mx:SWFLoader x="10" y="10" width="381" height="313" source="assets/flash6.swf" id="swlod"/>
    </mx:Application>

    anyone know to call PrintManager after SWFLoader has fully loaded the movie???

  20. Alex Batsuev Says:

    mx:SWFLoader complete=”updateImage();”

  21. Ayoo Says:

    thanx for your reply Alex,

    I tried your code:

    mx:SWFLoader complete=”updateImage();”

    but it did not work,

    it simply shows the first frame of the swf file that is being loaded into the SWFLoader, it does not show the entire complete swf file, once it’s been loaded in SWFLoader.

    Firefox is print previewing the file too quickly, its not wiating for the swf file to be loaded up.

  22. Ayoo Says:

    going back to the comments made earlier, i think i know were the problem lies. SWFLoader calls the PrintManager when the file flash6.swf has been loaded, however flash6.swf might be carrying out some processes, before it is ready for print preview.
    So the only work around is that once flash6.swf is fully loaded and ready, it should call the printmanger throught flex.
    So my question now is, how does flash (made in from flash 8 or earlier) call the updateImage(); function in flex???

  23. Ayoo Says:

    now you can print preview with flash players 8 and bellow! there are 2 step.
    1st we embed our old flash movie into a flex app.
    2nd we send a msg from flash to flex, when ever we want to print.

    this is the code we add to flash (flash6.swf) when ever we want to print:

    outgoing_lc = new LocalConnection();
    outgoing_lc.send("lc_name", "helloFlex")
    delete outgoing_lc;

    this is the code we add to flex when ever flash calls the printmanager throught flex:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    initialize="initApp()">
    <mx:Script>
    <![CDATA[
    import com.anychart.utils.PrintManager;
    private var fromSWF:LocalConnection;

    private function initApp() : void{
    fromSWF = new LocalConnection();
    fromSWF.client = this;
    fromSWF.connect("lc_name");
    }
    public function helloFlex() : void{
    PrintManager.setImage(stage);
    }
    ]]>
    </mx:Script>
    <mx:SWFLoader x="10" y="60" width="381" height="263" source="flash6.swf" id="mySwfTest"/>
    </mx:Application>

    Theres only 1 problem with this code, that is you can only call the printmanager once, i can’t get the property PrintManager.setPrintableContent(stage) to work, no such property exist????

  24. Alex Batsuev Says:

    It is static method.
    It accepts only BitmapData instance

    /**
    * Sets content to be printed in browser
    * @pararm content
    */
    public static function setPrintableContent(content:BitmapData):void

    http://www.anychart.com/blog/projects/acprintmanager/#download

  25. Eric Says:

    Is it me or the sample flash 9 for acprintmanager doesn’t work with firefox 3?.. I extracted the files and opened index.html from the flash9 folder found in the sample folder. When I try to do a print preview I still get a blank page.

    Can you help me sort this out?

    Thanks you!

  26. John Says:

    Should this work for Firefox 3 on Mac OSX? I tried the Flash 9 sample on a mac with flash 10 (10 is newer, but it should still work, right?), and it does not print properly. Do you know of any workarounds for Mac Flash printing in FF3?

  27. » links for 2009-04-10 - Life, it is a Travesty… Says:

    […] Solving problem with printing Flash content in Firefox browser | AnyChart team blog (tags: flex printing browser firefox) […]

  28. Adrian Says:

    Hey great work Alex!

    I do have a problem though, I got the latest version of ACPrintManager, but I cannot get it to work when rendering flash to the page using SWFObject 2.2 (the .embedSwf() method). I need to know what I am doing wrong. To help pinpoint the problem, I copied the flash9 sample, and used SwfOject to render rather than AC_RunActiveContent.js. First thing i get is this error from the sample.swf:

    Error: Can’t set content: External interface is not available
    at com.anychart.utils::PrintManager$/setPrintableContent()
    at sample_fla::MainTimeline/frame1()

    After I click Skip/Dismiss, the swf is displayed. In the print preview of FF3, I get a blank page.
    My entire html looks like:

    sample

    swfobject.embedSWF(”sample.swf”, “HeadlinePhoto”, “468″, “680″, “10.0.0.0″, “false”, {}, {}, {});

    Can you please please please help me out as soon as you get a chance? This is my second day trying to get ACPrintManager to work.

  29. Adrian Says:

    aww HTML code didnt show. Basically though, I simply took out the Object tag, and replaced it with a div that had an ID of “HeadlinePhoto”. I then took out all references to AC_RunActiveContent.js, and used swfobject.js instead.

  30. FlexPrintJob and Firefox = BLANK + BLANK -> Flex, you [still] suck part 2 Says:

    […] it again. Anyway, i spent the next 5 hours banging my head against the wall, reading about crazy hacks that could fight firefox, and wondering if my weekend just went to hell. In the back of my head, […]

  31. FlexPrintJob and Firefox = BLANK + BLANK ->Flex, you [still] suck part 2 Says:

    […] it again. Anyway, i spent the next 5 hours banging my head against the wall, reading about crazy hacks that could fight firefox, and wondering if my weekend just went to hell. In the back of my head, […]

  32. Printing Flex components in FireFox 3 « « Programmers Goodies Programmers Goodies Says:

    […] found a potential workaround, but unfortunately it doesn’t work in FireFox 3 (in FX2 it sort-of works, but not well […]

Leave a Reply