仿百度文庫解決方案之六：利用FlexPaper顯示Flash
1. FlexPaper簡介
FlexPaper是一個開源輕量級的文檔瀏覽組件，被設計和比如PDF2SWF庫（包含于SWFTools）一起工作，使得在網頁上，Adobe Flex以及別的基于Flash的應用程序中顯示和交互PDF文件成為可能。即，使得在沒有安裝PDF閱讀器軟件的情況下瀏覽PDF文件成為可能。FlexPaper項目同時提供了Flex庫和獨立的Flash版本。
2. 使用FlexPaper
2.1 下載FlexPaper
FlexPaper在google code上的項目地址為http://code.google.com/p/flexpaper/。目前，FlexPaper最新的flash版本為FlexPaper_1.5.1_flash.zip。
下載、解壓后，可以看到如圖6-1顯示的目錄：
圖6-1 FlexPaper壓縮包目錄
主要文件，文件夾說明：
examples文件夾：存放FlexPaper使用的例子
js文件夾：存放FlexPaper調用的js文件
php文件夾：存放php使用FlexPaper的例子
index.html：例子主頁
FlexPaperViewer.swf：FlexPaper的核心文件
playerProductInstall.swf：如果客戶端瀏覽器的flashplayer版本過低，將嵌入此swf文件
2.2 FlexPaper參數說明
SwfFile(String)：需要使用FlexPaper打開的文檔
Scale(Number)：初始化縮放比例，參數值應該是大于零的整數（1=100%）
ZoomTransition(String)：FlexPaper中縮放樣式，它使用和Tweener一樣的樣式，默認參數值為easeOut，其他可選值包括：easenone，easeout，linear，easeoutquad
ZoomTime(Number)：從一個縮放比例變為另外一個縮放比例需要花費的時間，該參數值應該為0或更大
ZoomInterval(Number)：縮放比例之間間隔，默認值為0.1，該值應該為正數
FitPageOnLoad(Boolean)：初始化時自適應頁面，與使用工具欄上的適應頁面按鈕同樣的效果
FitWidthOnLoad(Boolean)：初始化時自適應頁面寬度，與工具欄上的適應寬度按鈕同樣的效果
localeChain(String)：設置地區（語言），目前支持一下語言：
en_US (English)；fr_FR (French)；zh_CN (Chinese,Simple)；es_ES (Spanish)；pt_BR (Brazilian Portugese)；ru_RU (Russian)；fi_FN (FInnish)；de_DE (German)；nl_NL (Netherlands)；tr_TR (Turkish)；se_SE (Swedish)；pt_PT (Portugese)；el_EL (Greek)；da_DN (Danish)；cz_CS (Czech)；it_IT (Italian)；pl_PL (Polish)；pv_FN (Finish)；hu_HU (Hungarian)。
FullScreenAsMaxWindow(Boolean)：當設置為true時，單擊全拼按鈕會打開一個FlexPaper最大化的新窗口而不是全屏，當由于flash播放器因為安全而禁止全屏，而使用flexpaper作為獨立的flash播放器的時候設置為true是個優先選擇
ProgressiveLoading(Boolean)：當設置為true時，展示文檔時不會加載完整個文檔，而是逐步加載，但是需要將文檔中轉化為9以上的版本（使用pdf2swf的時候使用-T 9標簽）
MaxZoomSize(Number)：設置最大的縮放比例
MinZoomSize(Number)：設置最小的縮放比例
SearchMatchAll(Boolean)：設置為true時，單擊搜索所有符合條件的地方高亮顯示
InitViewMode(String)：設置啟動模式如“Portrait”或“TowPage”
ViewModeToolsVisible(Boolean)：工具欄上是否顯示樣式選擇框
ZoomToolsVisible(Boolean)：工具欄上時候顯示縮放工具
NavToolsVisible(Boolean)：工具欄上是否顯示導航工具
CursorToolsVisible(Boolean)：工具欄上是否顯示光標工具
SearchToolsVisible(Boolean)：工具欄上是否顯示搜索工具
2.3 FlexPaper例子
創建html頁面test.html，代碼如下：
- <html>
- <head>
- <title>Flexpaper例子</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script type="text/javascript" src="js/flexpaper_flash.js"></script>
- </head>
- <body>
- <div style="position:absolute;left:10px;top:10px;">
- <a id="viewerPlaceHolder" style="width:680px;height:480px;display:block"></a>
- <script type="text/javascript">
- var fp = new FlexPaperViewer(
- 'FlexPaperViewer', /* 對應FlexPaperViewer.swf文件*/
- 'viewerPlaceHolder', { config : {
- SwfFile : 'Paper.swf',
- Scale : 0.6,
- ZoomTransition : 'easeOut',
- ZoomTime : 0.5,
- ZoomInterval : 0.2,
- FitPageOnLoad : true,
- FitWidthOnLoad : true,
- FullScreenAsMaxWindow : false,
- ProgressiveLoading : false,
- MinZoomSize : 0.2,
- MaxZoomSize : 5,
- SearchMatchAll : false,
- InitViewMode : 'Portrait',
- ViewModeToolsVisible : true,
- ZoomToolsVisible : true,
- NavToolsVisible : true,
- CursorToolsVisible : true,
- SearchToolsVisible : true,
- localeChain: 'zh_CN'
- }});
- </script>
- </div>
- </body>
- </html>
test.html文件以及需要的js，swf文件組織結構如圖6-2所示：
圖6-2 test.html文件組織結構
顯示Paper.swf文件的效果如圖6-3所示：
圖6-3 FlexPaper下顯示Paper.swf效果
原文鏈接：http://www.cnblogs.com/luckyxiaoxuan/archive/2012/06/16/2551677.html
【編輯推薦】
