Adding a Print Button to a Flash Webpage [AS2] · Jan 10, 04:35 PM

Flash doesn’t provide a good, built-in way to print a web page. But then again, it doesn’t need to. By building on top of the content-managed XML model, adding a print button requires very little work.

This article works off the demo from the previous one

See the Demo here

Download the Demo Code [modified for this article]

Create Textpattern Form default_print

Create a form named default_print like this:

  1. <h3><txp:permlink><txp:title /></txp:permlink> &#183; <txp:posted /></h3>
  2. <txp:article_image align="left" thumbnail="0" />
  3. <txp:body />
  4. <p>&#8212; <txp:author /></p>
  5.  
  6. <div class="divider"><img src="<txp:site_url />images/1.gif" width="400" height="1" alt="---" title="" /></div>
  7. Download this code: /files/code4.2.txt

Create Textpattern Page default_print

Copy the default page (which is associated with the default section), using the same name with _print appended.

Modify the default_print page by removing all the flash-related txp:form tags and replace the content with one afw_getarticle tag that uses the default_print form (or just copy the code below):

  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  2.  
  3. <head>
  4. <title>AFW Demo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <txp:css format="link" />
  7. </head>
  8.  
  9. <body bgcolor="#ffffff">
  10. <div id="content">
  11. <txp:afw_getarticle form="default_print" />
  12. </div>
  13. </body>
  14. </html>
  15.  
  16. Download this code: /files/code4.1.txt

Create Textpattern Style default_print

Copy the default style, using the same name with _print appended.

Create Textpattern Section print

Create a Textpattern section named print. Chose default_print as the section and default_print as the style. Select No for all other options.

Test it Out

Before continuing, test to make sure everything looks OK. The print URL for this demo looks like this:

http://www.allflashwebsite.com/demo3/print?section=article&url_title=first-post

Creating the Print Button in Flash

In Flash, we will only have to add a few small modifications to the home.fla file. Open home.fla and add a button named print_btn to the stage. Then add the button’s event handler to the ActionScript in frame 1:

  1. print_btn.onPress = buttonClick;
  2. print_btn.linkTo = "print";
  3.  
  4. // Event handler for buttons
  5. function buttonClick() {
  6. link = this.linkTo eq "home" ? "" : this.linkTo;
  7.  
  8. if (link eq "print") {
  9. printPage();
  10. return;
  11. }
  12.  
  13. if (link ne "") {
  14. SWFAddress.setValue('/'+link+'/');
  15. } else {
  16. SWFAddress.setValue('/');
  17. }
  18. }
  19.  
  20. Download this code: /files/code4.3.txt

And finally add the function that actually opens the print page:

  1. // paths[0] is section, paths[1] is title
  2. function printPage() {
  3. var spath = SWFAddress.getPath();
  4. trace("print "+spath);
  5. var paths = spath.substr(1,spath.length-2).split("/");
  6.  
  7. // no printing homepage
  8. if (paths[0] eq "" and paths[1] eq undefined) {
  9. trace("Sorry, can't print this page.");
  10. return;
  11. }
  12.  
  13. var my_lv:LoadVars = new LoadVars();
  14. my_lv.url_title = (paths[1] eq undefined) ? "" : paths[1];
  15. my_lv.section = paths[0];
  16. my_lv.send("http://www.allflashwebsite.com/demo3/print/", "_afwprint", "GET");
  17. }
  18. Download this code: /files/code4.4.txt

The LoadVars.send() function will direct the browser to the proper, printable URL. Because we use “GET” in the third argument, LoadVars.send() will append the contents of the my_lv object to the URL in the first argument. In summary, the printPage() function allows any page except the homepage to be printed.

Until Next Time

Well that was refreshingly straightforward. Any questions?

— Pickle

---

Comment

  1. Hi , your tutorial was chosen for the main page of http://www.tutorialsroom.com and under Flash tutorials. Please feel free to submit more of your good tutorials using this link: http://www.tutorialsroom.com/tutorials/submit_tutorials.html

    Keep on the good work :)

    — Flash Tutorials Room · May 4, 09:14 AM · #

Textile Help