How to enable Printing of on-screen Flash Content in Firefox Browser

Question

I am using Firefox 3.6.15 on a Windows 7 Professional, 64-bit Operating System, Intel Core i7 CPU, 3.33GHz, 10BG RAM, by Hewlett-Packard. Firefox does not print flash content, aka swf objects, nor does it show them in the print preview pane...I want to print out the entire web page with the flash content. I seem to only be able to see flash and html content together in print preview and to print in IE8. I have tried to google this issue, but could not find a solution. I was trying to print preview/print out the following site: http://www.discovertheponds.com/. Flash content will display in print preview and print in IE8, but neither print preview or print in Firefox. I have also updated the Java on my computer to the most recent update, and ran the firefox plug-in checker at http://www.mozilla.com/en-US/plugincheck/ . I do run Firebug and Web Developer, but have currently disabled them. Is this problem on my end, meaning some issue with my computer...or is this because of how the website was programmed in HTML/Flash...or is this a bug with Firefox? I am a website designer and am also concerned that others will not be able print sites I develop or have already developed that have flash content from Firefox. I used to think Firefox was better than IE at everything. What happened here? Was it some change in Firefox's version that caused this problem?

Solution

1) Put the Firefox browser window in full screen by hitting F11 so you can get as much of it in as possible and do a "print screen" screen capture, paste it into paint, and print it off there in lanscape print mode :-P

2) Download ScreenGrab plug-in for firefox off https://addons.mozilla.org/en-US/firefox/addon/screengrab/ - It will capture the entire page that you see including flash and all frames, basically it saves webpages as images - either to a file, or to the clipboard. It captures Flash too! From there, throw it into paint, and print!

3) Fixing this from a web developer perspective, 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.

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

2. Add it to folder libs of our project.

3. Make Flex to add FFPrintFix to our project. To do it we do right-button click and select properties. In Properties we go to Flex Build Path, then to Library path and click Add SWC. Set path to libs/FFPrintFix.swc 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 Flex will copy FFPrintFix in the bin folder during compilation.

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

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

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

Comments

[Brian McCarthy]

@Rochelle, did that answer your question? If so please up-vote the answer and/or mark it as accepted. thanks!

[sinni800]

Wow, awesome answer from a web developer standpoint. Upvoted :)