FlashPaper Component Tutorial

I originally started working on my FlashPaper component right when FlashPaper 2 was released. It seemed like a great technology that was easy to load into your Flash project but a little awkward to customize and interact with. Before you could call any FlashPaper methods on the doc, you had to setup an interval to watch for the FlashPaper interface to exist and once it became available, kill the interval, create a variable reference to the interface within the doc, and then start calling the methods on that interface. This quickly became repetitive to include in each project that I wanted to add FlashPaper to. So I set about to create a wrapper for the FlashPaper api, and eventually this wrapper became my FlashPaper component.

When I first created this component, I wanted to obviously make it the best I could, and at the time I thought that extending the Version 2 component architecture would be the best. I quickly realized that this bloated the final swf (adding around 29k) and wasn’t even necessary for this component. Although I realized this, it took me about a year before I found the time to get back to it and completely rewrite it from the ground up to be based on MovieClip instead. This final component now adds only about 8k vs the original 29k and adds 2 new classes and more features that the original did not have. So all in all, not too bad of a rewrite.

With this tutorial I thought I would walk you through the different options that are available with my new component.

For any steps you don’t fully understand read my documentation.

Part 1:

  1. First download the component from my site and install it by doubleclicking on the mxp file in the zip.
  2. If you don’t already have a FlashPaper swf somewhere on your computer, create one using the FlashPaper 2 program or right click and save this link.
  3. Open up a new movie in Flash and drag an instance of the FlashPaper component onto the stage from the “Components” window. (Also notice the pretty new icon I added to the component 😉 ).
  4. Click on the component on stage and give it an instance name of “document_fp”.
  5. Click on the “Parameters” tab for the component and customize the FlashPaper component parameters to your liking … making sure to change the “Document Path” to the FlashPaper swf from step number 2. Make sure that you don’t add the actual link from step 2 into the path parameter because that FlashPaper 2 swf does not have AllowDomains added into it and it will lock up when you try to publish. Instead use a local FlashPaper swf on your computer.
  6. “Current Zoom” can be set to “width”, “page”, or a number from 10 to 999 (which is a percentage value).
  7. If you look closely in the “UI Elements” parameter window that opens there are 12 UI elements that you can set the visibility to but in the original FlashPaper api you can only access 10. I have added “Brand” and “Close”. The former allows you to hide the Macromedia brand logo at the top left of the FlashPaper document and the latter allows you to add a close button to the document.
  8. Test your movie and keep trying the different settings to see how it affects the FlashPaper document. Just this alone without the component would have been a little annoying to code up in Flash.

Part 2:

  1. Click on the “UI Elements” parameter and make sure to set “Close” to true.
  2. Add a movieclip or button to the stage and give it an instance name of “button01_mc”.
  3. Add an actions layer to your Flash movie.
  4. On the actions frame, add the following code:

  5. Test the movie and once the FlashPaper doc has loaded click on your button… you should see the close button disappear. You can do that with any of the elements in the “UI Elements” parameter popup.

Part 3:

With the following steps, replace the content within the “onRelease” function with the content from each step and test each one individually to see the possibilities of the component.

  1. Download or create another FlashPaper swf and save it next to the first FlashPaper swf you created. Name it “FlashPaperContent02.swf”.

  2.  

  3.  

  4.  

  5.  

  6.  

  7.  

  8.  

  9.  

  10.  

  11.  

  12.  

  13.  

  14.  

  15.  

  16.  

  17.  

  18. This will only work if your FlashPaper document has a sidebar.

  19.  

  20.  

  21.  

Part 4:

Events.

And there you go. Play around and feel free to comment with your questions. Enjoy 🙂

About the author

Mark

View all posts

58 Comments

  • Hey very nice work with this component. I was having endless issues using the default FlashPaper API. This does everything and more!

    I have one question though. How would I go about defining the “currentZoom” settings for each page? So for example, if I have a FlashPaper document that’s 10 pages long each page is set to a unique zoom percentage (IE page 3 might be set to 33, and page four could be 60 etc).

    Any pointers on this would be much appreciated.

  • Hey Lee,

    Glad the component is helping you out.

    As for your question, what you’re talking about doing would be better suited for setting up in the original document before it is converted to a flashpaper document. The reason I say this is that what you would find happening is that as people scroll halfway between pages the zoom would shift on them (because it will register a new page when only part of it has been entered). So, using your example, the person is reading page 3 at 33% and scrolls halfway between 3 and 4 and all of a sudden not only does page 4 zoom to 60%, but page 3 does as well. You are not controlling individual page zoom, but the overall document zoom level. Therefore, as I mentioned earlier, it would be best to have the document setup properly initially.

  • Hi,

    Many thanks for all your hard work with the flash component…

    I wanted to ask, my basic goal at the moment is to produce swfs from word docs, and i though flash paper would do that. However, even with your component, i still cannot use the output becuase of the box that flash paper puts the swf file in. Do you if it is possible, with your component, just to print the actual image (i.e. the picture created from the doc) only, i.e. no boxes, borders, etc.

    Please let me know, as this would save me weeks of time!!

    Cheers

    Joe

  • Hey Joe,

    The swfs that are produced with FlashPaper come with the tools that allow you to interact with the document, much like Adobe Reader allows you to interact with pdfs.
    If you don’t need to interact with the document at all, you can use the following hack and change the size of the document to match your desired settings. I need to reiterate it is a hack:

    var flashpaperListener:Object = new Object;

    flashpaperListener.onDisplay = function(evtObj) {
    document_fp.getIFlashPaper().m_mainMC.toolbar_mc._visible=false;
    }

    document_fp.addEventListener(“onDisplay”,flashpaperListener);

  • Hi, Mark, thanks for your fantabulous component which look exactly like somewhat I need to turn my ppt into very basic swf document (with no toolbar).

    I dragged a fp component into the scene and embedded a flashpaper-generated swf in it by filling the “document path” property. A press of Ctrl+Enter shows everything goes right. However, when exporting/publishing the FLA containing the embedded Flashpaper swf, the resulted output swf turns out to be an empty file (I can see the flashpaper symbol spinning as if it were trying to load the swf, but nothing shows up in the end).

    I also tried using API loadFlashPaper function, but the problem is the same as using your component.

    Can you help me out with this? Your advice would be much appreciated.

  • Awesome component! Thanks very much.
    I really want to to link to internal functions using goToLinkTarget, however, I’m not having any joy. Do you have any idea how this may be done?
    Many thanks

  • I like to know if it is possible to add a link (a button) to the flash paper document in order to load a .swf movie to the main movie but at a different level (_level1). My original flash paper document is a PDF file.
    Thanks

    Carlos

  • Hi, awesome component.
    Are there any way to put a link or button in the original document (a pdf file) or in the swf file generated with flash paper in order to load a movie with loadmovieNum at level 1?
    Any clues will be very apreciated.

    Carlos

  • I am working on a touch-screen kiosk using flashpaper as my pdf viewer . I have already created
    buttons to control previous page and next page but i am limited to real estate in the kiosk which does not allow me to view the flashpapers full height it only shows aprox. 60% of the pdf file. I am having one heck of a time trying to scroll in increments using the button components of flash. it just doesnt work. _ I need help !!!!!!

    Thanks,
    Shadow

  • As you stated above, document_fp.getIFlashPaper().m_mainMC.toolbar_mc is the name of the movie clip for the toolbar. Does anyone know the name of the movie clip for the actual document? I would like to add a rotation feature for it.

    Thanks,
    Brandon

  • Hi,

    This component is fantastic, we are working on a prject that requires pdf’s to be embeded into a flash website and cd-rom, and flash paper seemed the way to go, your component has made it very easy to control the api.

    However we are designing our flash paper documents with inDesign and the bookmarks and hyperlinks are not appearing in the flash paper.

    Does anyone know how to preserve internal hyperlinks from inDeisgn when you publish to flash paper?

    cheers,
    matt

  • Hi Mark, sorry I have another question…

    Do you know how to get this component working in an actionscript class?

    While it works great on the timeline, I’m trying to incorporate it into a larger scale project. When i attach it dynamically from the library, instead of loading the flashpaper swf, it just shows a black screen… :o(

    cheers,
    matt

  • I am using Flash 8 and I follow your instructions in step 1 everything works fine when I test it within Flash (CTRL + Enter) but when I publish it the flashpaper document just sits at the loading screen with nothing appearing.

    Does this work with Flash 8? is there something I am missing when trying to load it?

    Gary

  • Hello,

    I am also experiencing the same problem of the published file just sitting at the loading screen with nothing appearing after completing the instructions in step 1. In Flash v8, the .fla tests fine, but the .swf file does not show. In Flash v7.2, the .fla and the .swf file just sits on the loading screen.
    What are we missing?

  • Hey Gary and Jean,

    Can you give me a few more details on what’s going on exactly for you? What are the steps you are taking, what content path you are using, what machine you are on, etc. I’m using Flash 8 here and everything works perfect for me.

  • Hi Mark,
    Thanks for your response. I almost have it working or at least now I have output.
    Here’s the code used:
    function loadFlashPaper(path_s, dest_mc, width_i, height_i, loaded_o) {
    var intervalID = 0;
    var loadFunc = function () {
    dest_mc._visible = false;
    var fp = dest_mc.getIFlashPaper();
    if (!fp) {
    return;
    }
    if (fp.setSize(width_i, height_i) == false) {
    return;
    }
    clearInterval(intervalID);
    dest_mc._visible = true;
    loaded_o.onLoaded(fp);
    };
    intervalID = setInterval(loadFunc, 100);
    dest_mc.loadMovie(path_s);
    }

    function onLoaded(fp) {
    // loading is complete, so we can now adjust the current page, zoom, etc.
    // go to page first page
    fp.setCurrentPage(1);
    // change magnification
    fp.setCurrentZoom(75);
    // disable toolbar functions…
    fp.showUIElement(“PrevNext”, true);
    fp.showUIElement(“Print”, false);
    fp.showUIElement(“Tool”, false);
    fp.showUIElement(“Zoom”, true);
    fp.showUIElement(“Find”, true);
    fp.showUIElement(“Pop”, true);
    fp.showUIElement(“Sidebar”, false);
    fp.showUIElement(“Brand”, false);
    fp.showUIElement(“_level0.dest_mc.toolbar_mc.brandClip_mc”, false);
    }
    //
    //
    var mcPaper = this.createEmptyMovieClip(“ethicalinvestor”, this.getNextHighestDepth());

    mcPaper.x = 0;
    mcPaper.y = 0;
    loadFlashPaper(“../flashpaper/ethicalinvestor_src.swf”, mcPaper, 680, 680, this);

    Now the problems are:
    1. The print & select option successfully hidden but the brand logo is still visible and active.
    2. The source .swf file contains the all toolbar options and it is used when the Pop menu option is selected to open the file in a new browser window, so all toolbar options are again visible. Is there are way to specify that the output .swf file is used on Pop option and not the source .swf file?
    3. If the length parameter is greater than a certain value (680 in this example) the toolbar is truncated off the top. I want the file to show one page view, but if I use length= 900, no content shows in the output. Is there a maximun length.

    Thanks in advance,
    Jean

  • Hi I’m using the component and have an odd problem, If I do a test movie from within flash 8 everything works fine, and if I upload the 2 files to a webserver everything works fine. And if I create a projector file that works fine as well.

    The problem is if i try and open the published SWF from the desktop, the flashpaper doc refuses to open, it just sits there and spins.

    I thought maybe it was some kind of pathing problem but i’ve ruled that out.

    Any ideas?

    -eric-

  • Hello,
    I just want to know if it exists a method for making interaction from the document flashpaper to flash.
    I ‘m working with pdf files that I print with flashpaper.
    Can I put in acrobat before to print a link which call a actionscript function?
    My test for the moment show that interactions are removed when I print..
    Any ideas?
    thanks.

  • Hi.

    Nice component! Thank you 🙂

    I have a problem though: Although I use the following code to disable the display of ALL of the toolbar items, they are still showing:

    paper.showUIElement(“Find”, false);
    paper.showUIElement(“PrevNext”, false);
    paper.showUIElement(“Print”, false);
    paper.showUIElement(“Tool” , false);
    paper.showUIElement(“Zoom”, false);
    paper.showUIElement(“Find”, false);
    paper.showUIElement(“Pop”, false);
    paper.showUIElement(“Sidebar”, false);
    paper.showUIElement(“Page”, false);
    paper.showUIElement(“Overflow”, false);
    paper.showUIElement(“ZoomKeys”, false);
    paper.showUIElement(“Brand”, false);
    paper.showUIElement(“Close”, false);

    What am I doing wrong?

    Thanks for any tips!

  • Thanks, great component. I haven’t scoured the docs, but I don’t see any capability to load a FlashPaper linked symbol into the component (as opposed to loading an external file). Is this possible? Would this be significantly faster than loading an external file?

  • For all of you having problems with flash 8 do this simply change your publish settings to flash 7 and leave as2.0 the same then place the *.swf file in the same file as the movie swf. works great!

  • Hi,

    The component makes it really easy to change the toolbar etc. wrapping the flash paper document.

    Does anyone know to address the “paper” iteself using AS?
    I would like to be able to
    1/ Overlay page(s) with graphic highlights
    2/ Trace mouseclick coordinates on a page to return page number, relative x and y coordinates on that page
    3/ Have precise control of what parts of a page (coordinates) to be visible in the fp scroll window

    Any clues on this?

    Regards / Jonas

  • Hey,

    I think I can explain what the problem is. When you use Flash 8 (even Flash 7 for that matter), the swf file works great if you view it as file:///[something], but fails if you open it as http://[somethign].

    Is there any limitation about showing it via http?

  • Fantastic. A couple questions though …

    1) Doesn’t this break/bypass the Adobe/Macromedia EULA? (See Q&A @http://aralbalkan.com/54)

    2) How about adding tooltips to the buttons? I’ve got a very inexperienced user base who could very much use them. Can another param for this be easily setup?

    Thanx

  • How could I declare a flashpaper component object in execution time with actionscript?

    I’ve tried:

    _root.createClassObject(FlashPaper, “document_fp2”, 1);
    document_fp2.setSize(958,467);
    document_fp2.move(32,215);
    document_fp2._visible=true;
    document_fp2.load(“AUDITORIA_CUENTAS/LEY.swf”);

    but it doesn´t work.
    Could you help me please? Thanks!

  • Hi – this may not be the right spot to post this question but it seems that people here know more about flash paper than other places.

    So – has anyone been able to convert pdf to flashpaper using some sort of API (from Adobe/Macromedia) so we can include that in pther applications. I know there is a command but that makes it hard to integrate it with other applications.

  • Well done!!
    This component is really helpfull! My many thanks Mark! 🙂

    And know two questions?
    How can i make the component invisible instead of destroing it or how can i recreate it with actionscript in case i destroy it?

    Is there any option to make the flashpaper window dragable?

    Once again.. THANK YOU!! And continue the great work! 🙂

  • Hi,

    Great job !
    Just one question : is it possible to always hide the scroll bar ?
    I just need to navigate using buttons.
    thanks, and cheers.

  • when i click the close button..
    i can’t reload a new document..

    does the close make the component disappear?
    how do i load it each time?

  • Hi Mark

    Need to find a way to update Flashpaper docs over the web (e.g. for doc version updates) – is this something your comp can handle ?

    thks

  • Hello! I’d like to thank you so much for this great component (I can resize Flashpaper things now!), but I’ve encountered a slight problem.

    First of all, I will warn you that I’m completely flash-retarded, so I may have missed something/not understood something, but:

    For some reason, when I upload my published document (after following this tutorial, only part 1, since the others confused me and I just wanted to resize the thing), it would perpetually stay on the loading screen. The actual document, when uploaded to the web, would not load. It would only show that spinning circle thing.

    Er, what do I do?

  • This is for Matt, who was looking for a way to make Flashpaper documents in InDesign & keep the hyperlinks. This is a hack/workaround method I’ve come up with for accomplishing that (the only thing I’ve been able to achieve success with). You’ll need MS Word, & may desire Photoshop or Illustrator, in addition to InDesign & FlashPaper:

    To create layouts in InDesign & transfer them to Flashpaper pages with hyperlinks, use this procedure:

    1. Design full page in InDesign, make styled text (or whatever) that will become hyperlinks (but don’t actually make hyperlinks), export as image file.
    * Can save as JPG, which Word can open directly.
    * Can save as PDF, open in Photoshop, & convert to a format that Word can open, such as PNG.
    * If using EPS, export as RGB, no preview; then bring it into Illustrator & export as WMF file; this can be brought into Word without screwing up the text as plain EPS does. Or export from Illustrator using Save for Microsoft Office button (next to Export), which saves a PNG file; then bring it into Word & answer ‘Encapsulated PostScript’ to the question that pops up (regarding what format it’s being converted from).
    2. Make a new MS Word document.
    3. Insert the InDesign image into it as a temporary placeholder image.
    4. Over the image make a text box, or as many text boxes as needed, one per hyperlink. Fill with placeholder text. These will be used for hyperlinks.
    5. Style the text box to have no surrounding line, & to have transparent color.
    6. Make hyperlinks out of the placeholder text in the text boxes.
    7. Line text boxes up where they need to be on the image 9wherever a hyperlink will be), size as needed.
    8. Delete the initial image.
    9. Bring your InDesign image into the Word document again. (Without this step, only using the original placeholder image, this method fails for me.)
    10. Set the image’s layout to be ‘behind text’. Text in text boxes should disappear behind image, but hyperlinks will remain there when made into a Flashpaper document.
    11. Save as Flashpaper SWF document by using menu in menu bar of Word, rather than printing to Flashpaper virtual printer: otherwise the hyperlinks will be lost.

  • Does anyone know if Flash Paper supports openning new windows? I have a Flash Paper document appearing inside of a larger Flash application and I want the links to be able to open in a new browser window, rather than replacing my application.

    Is this possible?

    I’ve tried using javascript:window.open() in Word, but Flash paper changes it to /javascript/window.open() and target=_blank doesn’t seem to work, either.

  • Hi,

    Thank you so much for that great component !

    I’d like to know if it’s possible to set a maximum zoom range for a flashpaper instance (in fact i want the user to be able to zoom in/out between 0 – 100% only).

    Thanks again,

    -J-

  • Thank you for building the flash paper component!

    I’m building a custom nav. Can I remove the toolbar background?

    I’ve found a bunch of possible MC’s but nothing seems to affect it:

    document_fp.getIFlashPaper().m_mainMC.toolbar_mc._visible=0;

    _level0.instance1.flashPaper.fp.toolbar_mc._visible=0;

    _level0.instance1.flashPaper.fp.toolbar_mc.toolbarBg_mc._visible=0;

    _level0.instance1.flashPaper.fp.divider_mc.gripper_mc._visible=0;

    Thanks in advance

  • hey man tnx for this great component.. but im trying to publish this fla project on the web, but what can i do with the path thing.. you know that i cant put the domain stuff in it ???

    Thank you for your info

  • when a swf file is opened in the flashpaper browser component, then I would like it to highlight certain text in it. This text which I would like to highlight will be dynamic and can be any text.
    how can i do this. Pls guide me..

    Thnaksin advance

  • This is awesome, thank you!

    What’s the appropriate way to change the content. For example I start with test.swf loaded into document.fp. Then I am letting the user click a link to load a different document. And I do

    document_fp.load(link);

    The problem is that sometimes the content loads bigger than the borders (So is on top of the right scrollbar). Seems to be a timing issue, because sometimes it happens and sometimes it doesn’t.

    Do I need to destroy() the old document before loading a enw one?

    Thanks again for your great work!

  • Hi, first i want greetz u for this nice component. Really usefull 🙂

    I have a small question about component.

    How can I hide the top header of flashpaper?

  • cool component; i was wondering if the contertion is possible online? for eg. if i would like to view mydomain.com/doc1.doc in mydomain.com/docview.html which has the component

  • why don’t this code be EventListenered effactively?

    flashpaperListener.onEnableScrolling = function(evtObj) {
    trace(“onEnableScrolling: ” + evtObj.target);
    }

  • I would like to know how to use this component in Flash CS4. I dont know to use Flash, so I dont know which kind of project I need to create even. However, what I do know is I have a Flash Paper SWF file, (infact many of them) in which I want to remove the print and maximise buttons and also the flash paper logo. Can you please help.
    Thank you
    Navs

  • Allo,

    I just wanted to say that I’m finding this a great component and definitely usable.

    I usually build most of my UI’s from MovieClips and not the built in Flash UI Components, so thus, I have a customizing question ofcourse…

    Can anyone tell me if they have a solution to setting the FlashPaper UI theme to anything but green? I’ve had no issues using the _global.style.setStyle method with regular components from the Components Library, but these calls don’t seem to work here. I’ve also tried using the flash debugger for object references, but I can’t seem to be able to modify the document_fp movieclips via actionscript settings. I am using AS 2.0, not 3.0 for this exercise.

    This might be one of those cases of I need to talk out loud before I find a work around, but in the meantime, any help is much appreciated.

    Cheers, and thanks again,
    J

  • Hello Mark, i just installed the component but is not showing in Flash MX…
    It appears in the Macromedia Extension Manager but not in the component panel in Flash MX

    any ideas?

    thnx in advance!

    lachof

  • Mark,
    I’ve extensively used your component you have created. I must say very impressive! I have finally found an issue I can’t seem to figure out. Basically I have a SWF container loading eternal SWF’s sequentially, (kinda like a powerpoint) first page, click next, then unloads first page, loads second page etc. Well, I have the flashpaper component in each page that loads in. I have been using this for a year now with no issues. This past week I experienced a page that the flashpaper wouldn’t load. onLoadInit is firing but it is not loading the flashpaper in. This only happens when you “click the next button quickly to load the next flashpaper file in”. Thanks for your help.
    JR

  • Hi Mark,

    Can this component be used in CS4? I tried but FlashPaper did not appear in Component window. Can anyone suggest how to make it work in CS4?
    I’ve tried CS3, it works perfectly.

    Silver

  • I just came across your flashPaper component yesterday and it has really solved some problems I was having – thank you very much. However, I can’t get setBackgroundTint and enableScrolling to work. I’m using like so:
    fspaper.load(“texts/1A1.swf”);
    fspaper.backgroundTintColor=#FF00FF;
    fspaper.enableScrolling(false);
    Any suggestions?

    Thanks

  • hello,
    i,m create a project by flash cs5
    i want load a file in project.
    so this file create by flashpaper 2
    but after load this file not set size by my main project. and i dont set size.
    please help me freand.
    please

Leave a Reply

Your email address will not be published. Required fields are marked *