Introducing FlexPaper – PDF viewing for Adobe Flex
Posted by Erik in Flex, PDFNov 22nd, 2009 | 32 responses| FlexPaper updated! Project now has its own page. Read about it here. |
The swell on the west coast which I usually surf on has been really messy the past week so as a consequence of getting bored from not surfing I decided to build something for the community. I have been fiddling around with PDF2SWF from SwfTools.org the past week but got kinda frustrated on the way the viewers were created and some quite relevant missing features like being able to print the converted PDF (without getting a bunch of other stuff in the print), proper zooming/navigation,etc.. so I decided to create my own. Considering that Flashpaper is not longer moving forward and that the Flex community seemed to lack a good viewer, I thought that I might be able to add some value here. Special thanks to Igor Costa for providing a good example on loading the swf’s efficiently.
Short background & motivation: SwfTools is a bunch of open source tools that can be used to convert PDFs, PNGs etc to SWF. So the basic idea is that by converting your PDF’s to SWF, your visitors wont have to have Acrobat Reader installed in order to see your PDF documents plus all the benefits of being in control over the viewer such as skinning, etc. What I have built is a component in Flex which can be used together with tools like PDF2SWF to view these files in your favorite Adobe Flash enabled browser. I will release the source code next week at Google Code I just need to do some cleaning up, fixing some minor bugs and write some documentation, but you can use a preview from today as I have published a swc for you to use. Right, so how do you use it? Here goes:
1) Download and install SwfTools. I used their latest development snapshot but version 0.9 should be ok too.
2) Convert your PDF to SWF. This can be done from command prompt (so you can automate it if needed) or from the PDF2SWF UI. This is how I converted mine from the command prompt:
C:\SWFTools\pdf2swf Paper3.pdf -o Paper3.swf
3) Download the FlexPaper SWC from Google Code and add the FlexPaper library to your Flex project.
4) Copy the SWF you created with PDF2SWF to your bin-debug directory and add the FlexPaper component to your flex app like I have done in this example (update the SwfFile property on the component to point to your SWF file):
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" xmlns:fp="com.devaldi.FlexPaper.*" > <fp:FlexPaperViewer width="520" height="450" Scale="0.6" SwfFile="Paper3.swf" /> </mx:Application>
Done! The result (non-embedded version here in case your browser doesn’t like wordpress & iframes):
Looking forward to hopefully getting some feedback! Will publish source code & documentation in the near future.
I hope you’ll enjoy it. Have a good end on your weekend and awesome next week.
32 Responses to “Introducing FlexPaper – PDF viewing for Adobe Flex”
Leave a Reply
About
Great! Anxious to see the source code and hopefully a tutorial.
This looks absolutely great!
Do you create a bitmap image of every frame in the swf file on the fly?
Hey Joseph,
Nope, its cloning the frames in the swf to create the viewer. I was experimenting with Bitmaps too but wanted to be able to zoom above the SWF’s page size (>100%) and the bitmap approach (obviously) gave poor quality when I did that.
Hello Erik,
Thank you for your response.
In AS2, that was possible using duplicateMovieClip, in AS3, there is no equivalent function, did you write your own?
I resorted to one swf file per page in the end. I’m an AS3 novice!
I wish you the best of luck.
@Joseph: I did write my own but it wasn’t complicated. Don’t worry I’ll post the source later this week so you can check it out
nice,neat stuff.
Fantastic resource, thanks for your hard work!
This is great work . I love it
Hi Erik,
This stuff is really cool.
However I ran into some issues when I used the FlexPaper.swc. I have my swf inside the bin-debug folder and use the exact same code as you have mentioned in your post. But, I never get to see the PDF. The flex applications fails to initialize and the application hangs. Could you help me out with this?
The example in your blog looks very neat. Would love it try it out. Hoping to see the code soon!
Hey Sudha
Add your .swf as trusted if you are getting a permission exception
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04a.html#119065
If its not a permission problem, you probably converted your PDF to SWF with one of their built in viewers. You can change this in edit->options if you are using the gui version of SWF2PDF. Set it to ‘No viewer’ before exporting.
The surf was really good last weekend so I didn’t get much time to spend on Flexpaper but sunday looks quite poor weather wise so I will hopefully release everything by then. I have corrected a bunch of bugs and I am also implementing a lazy loading mechanism to be able to load very large pdf/swfs.
Have a good one
Erik
Hi Erik,
I’m working on a similar project, I’m not able to find a way to show more pages than one. I see you list all pages.
I think the problem is how I manage Movieclip I’m using gotoandstop(n).
Please can you suggest me a way to list all pages as in your project?
Thank you very much
Luca
please guide me i am facing this problem when
i run my applicaiton . i have copy the file
on bin-debug folder and Globally allow the swif file as well. but when i run my applcation.
this error shown and i am not able to see the pdf file
Unhandled IOErrorEvent:. text=Error #2124: Loaded file is an unknown type.
thankx alot i got the solution . now its working.Set it to ‘No viewer’ setting now its working
nice work
thankx alot
This is very good. I like.
how to disable print button? like flashpaper
Hey Erik!, this is excellent man.
I couldn’t get it working with dynamic indexes though. They work perfectly in the generated swf, but sadly they are useless in the Flex app.
Keep up the great work!
@Matt
Happy that you like it, will take a look at dynamic indexes next time I get a chance
@ythic
Can’t disable it in the current version. I’ll add that in next version
Hi Erik.
I have problem From FlexPaper, it don’t load some file swf. Example file: http://rapidshare.com/files/327774788/CA.zip.html.
Can you help me.
Thank you
Hi Nguyen
Took a look at your PDF file but I was not even able to convert it using PDF2SWF.
Possibly something wrong with your PDF? How have you created your PDF? Try recreating it using a different library if you can
This is an absolutely amazing tool. Simple interface, but infinitely better than many other offerings, including paid ones. I can’t wait to get started with this. My only concern is the need to disable the print button on some documents. Could I recompile the SWF with a demo version of Adobe Flex to allow for hiding of the print button?
Thanks again for all your work and sharing this with the community.
Hi Will,
Glad you like the viewer. A lot of people are asking me for the ability to disable the print button so I’ll include that in next release.
Might be able to put a pre-release out there for you in a week or so. Something to be aware of is that disabling print will protect it from the average user but won’t protect the document for anyone who has decent programming skills. They could still access the document and print it programatically.
Anything that gets displayed in the browser can be downloaded and manipulated by someone with the right skills. Just so you are aware.
Hi Erik,
The FelPaper viever is absolutely amazing utility. I have thought of using this in our project. One feature which I am eagerly waiting is the cutomising the button pannel. Like disabling the print option and so on… If you could share some light on how could it be done by me.
Thanks a ton!!!
Great stuff.
When you are planning to implement “Lazy loading mechanism to be able to load very large pdf/swfs”
Thanks
What about scale variable?
Such as;
var params = {
SwfFile : “01h-test-7_2.swf?v=1.1b1″,
Scale : ‘fit-width’
}
Is it possible for now? Or next release?
@needim good idea
I’ll try to fit it into the upcoming release
Thanks Erik. This is great work.
I also would like to see a way to get the print button disabled.
Erick said: >>Anything that gets displayed in the browser can be downloaded and manipulated by someone with the right skills. Just so you are aware.
I was researching this issue a few days ago. There are ways around it. If you are running apache, you can prevent access in the htaccess file. There are ways to test for the referer (or for direct access URL), and if it is not from the same site, redirect the request. That way, you can never get the direct file.
@Roy, yeah I’ve also visited that idea, the problem is that it is quite easy to fake a referrer. Http calls are in the end plain text and can be manipulated quite easy.
On top of that, the swf file in this case which gets loaded up inside the viewer will probably also end up in the users cache and it would be easy to extract it from there.
Erik writes:
>>Roy, yeah I’ve also visited that idea, the problem is that it is quite easy to fake a referrer. Http calls are in the end plain text and can be manipulated quite easy.
>> On top of that, the swf file in this case which gets loaded up inside the viewer will probably also end up in the users cache and it would be easy to extract it from there.
I wonder if the same is then valid also for the files displayed by the scibd or similar sites? I think they have a database handle for the file, so it does not sit in some directory, but if it is in the cache, then it may be the same problem? In that case, there really is no 100% safe solution.
However, being able to disable download and printing, plus turning file access off in the htaccess, will probably prevent 90+ % of the regular users from accessing the file in another way than intended.
For that last 1-10% of users (who know to program), the content of the file would have to be of such high value to make it worth their while.
That problem resolved but getting
Unhandled IOErrorEvent:. text=Error #2124: Loaded file is an unknown type.
Trying Ahmad’s solution but don’t know how to set it to ‘No viewer’ setting.
@kanu
try using the command line instead of the user interface when converting your document.
you can see the latest recommended parameters to use here:
http://code.google.com/p/flexpaper/wiki/Converting_Documents
Hi Eric,
Good to see the print options and like wise many of the parameters for customization. I have one suggestion as I am loading TIFF images the search would not work for me. So It would be good if even this could be optional. ie Parameterised.
Keep up the great work.
Thanks in advance.