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:
- First download the component from my site and install it by doubleclicking on the mxp file in the zip.
- 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.
- 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
). - Click on the component on stage and give it an instance name of “document_fp”.
- 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.
- “Current Zoom” can be set to “width”, “page”, or a number from 10 to 999 (which is a percentage value).
- 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.
- 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:
- Click on the “UI Elements” parameter and make sure to set “Close” to true.
- Add a movieclip or button to the stage and give it an instance name of “button01_mc”.
- Add an actions layer to your Flash movie.
-
On the actions frame, add the following code:
button01_mc.onRelease = function() { document_fp.showUIElement("Close", false); document_fp.traceUIElements(); } - 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.
-
Download or create another FlashPaper swf and save it next to the first FlashPaper swf you created. Name it “FlashPaperContent02.swf”.
document_fp.documentPath = "FlashPaperContent02.swf"; document_fp.load();
-
document_fp.load("FlashPaperContent02.swf"); -
trace(document_fp.borderThickness); document_fp.borderThickness = 20;
-
trace(document_fp.borderColor); document_fp.borderColor = 0xFF0000;
-
trace(document_fp.getViewerType());
-
trace(document_fp.getViewerVersion());
-
trace(document_fp.getCurrentPage()); document_fp.setCurrentPage(5);
-
trace(document_fp.getNumberOfPages());
-
trace(document_fp.getLoadedPages());
-
document_fp.printTheDocument();
-
document_fp.currentZoom = "page"; trace(document_fp.currentZoom);
-
document_fp.setSize(300, 250);
-
document_fp.goToLinkTarget("http://www.yourpalmark.com"); -
document_fp.enableScrolling(false);
-
trace(document_fp.getCurrentTool()); document_fp.setCurrentTool("select"); -
var sel:FlashPaper.SelectionRange = new FlashPaper.SelectionRange(); sel.headPageIdx = 1; sel.headCharIdx = 20; sel.tailPageIdx = 5; sel.tailCharIdx = 999999; document_fp.setTextSelectionRange(sel, true); trace(document_fp.getTextSelectionRange());
-
trace(document_fp.getSelectedText());
-
This will only work if your FlashPaper document has a sidebar.
trace(document_fp.getSidebarWidth()); document_fp.setSidebarWidth(10);
-
trace(document_fp.getFindText()); document_fp.setFindText("the"); -
document_fp.findNext();
-
trace(document_fp.getVisibleArea()); document_fp.setVisibleArea(document_fp.getVisibleArea());
Part 4:
Events.
var flashpaperListener:Object = new Object;
flashpaperListener.onLoadStart = function(evtObj) {
trace("onLoadStart: " + evtObj.target);
}
flashpaperListener.onLoadProgress = function(evtObj) {
trace("onLoadProgress: " + evtObj.target);
}
flashpaperListener.onLoadComplete = function(evtObj) {
trace("onLoadComplete: " + evtObj.target);
}
flashpaperListener.onLoadInit = function(evtObj) {
trace("onLoadInit: " + evtObj.target);
document_fp.borderThickness = 20;
document_fp.move(0,50);
}
flashpaperListener.onLoadError = function(evtObj) {
trace("onLoadError: " + evtObj.target);
}
flashpaperListener.onUnload = function(evtObj) {
trace("onUnload: " + evtObj.target);
}
flashpaperListener.onDisplay = function(evtObj) {
trace("onDisplay: " + evtObj.target);
}
flashpaperListener.onPageChanged = function(evtObj) {
trace("onPageChanged: " + evtObj.target);
}
flashpaperListener.onZoomChanged = function(evtObj) {
trace("onZoomChanged: " + evtObj.target);
}
flashpaperListener.onSelection = function(evtObj) {
trace("onSelection: " + evtObj.target);
}
flashpaperListener.onToolChanged = function(evtObj) {
trace("onToolChanged: " + evtObj.target);
}
flashpaperListener.onEnableScrolling = function(evtObj) {
trace("onEnableScrolling: " + evtObj.target);
}
flashpaperListener.onVisibleAreaChanged = function(evtObj) {
trace("onVisibleAreaChanged: " + evtObj.target);
}
document_fp.addEventListener("onLoadStart",flashpaperListener);
document_fp.addEventListener("onLoadProgress",flashpaperListener);
document_fp.addEventListener("onLoadComplete",flashpaperListener);
document_fp.addEventListener("onLoadInit",flashpaperListener);
document_fp.addEventListener("onDisplay",flashpaperListener);
document_fp.addEventListener("onLoadError",flashpaperListener);
document_fp.addEventListener("onUnload",flashpaperListener);
document_fp.addEventListener("onPageChanged",flashpaperListener);
document_fp.addEventListener("onZoomChanged",flashpaperListener);
document_fp.addEventListener("onSelection",flashpaperListener);
document_fp.addEventListener("onToolChanged",flashpaperListener);
document_fp.addEventListener("onEnableScrolling",flashpaperListener);
document_fp.addEventListener("onVisibleAreaChanged",flashpaperListener);
And there you go. Play around and feel free to comment with your questions. Enjoy
56 Comments
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
After emailing with Mark, it turns out that Flash MX is too old for this component… tested in CS4 and works like a charm!
Thnx Mark
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