仿百度文庫解決方案之六：利用FlexPaper顯示Flash
1. FlexPaper簡介
FlexPaper是一個(gè)開源輕量級的文檔瀏覽組件，被設(shè)計(jì)和比如PDF2SWF庫（包含于SWFTools）一起工作，使得在網(wǎng)頁上，Adobe Flex以及別的基于Flash的應(yīng)用程序中顯示和交互PDF文件成為可能。即，使得在沒有安裝PDF閱讀器軟件的情況下瀏覽PDF文件成為可能。FlexPaper項(xiàng)目同時(shí)提供了Flex庫和獨(dú)立的Flash版本。
2. 使用FlexPaper
2.1 下載FlexPaper
FlexPaper在google code上的項(xiàng)目地址為http://code.google.com/p/flexpaper/。目前，F(xiàn)lexPaper最新的flash版本為FlexPaper_1.5.1_flash.zip。
下載、解壓后，可以看到如圖6-1顯示的目錄：
圖6-1 FlexPaper壓縮包目錄
主要文件，文件夾說明：
examples文件夾：存放FlexPaper使用的例子
js文件夾：存放FlexPaper調(diào)用的js文件
php文件夾：存放php使用FlexPaper的例子
index.html：例子主頁
FlexPaperViewer.swf：FlexPaper的核心文件
playerProductInstall.swf：如果客戶端瀏覽器的flashplayer版本過低，將嵌入此swf文件
2.2 FlexPaper參數(shù)說明
SwfFile(String)：需要使用FlexPaper打開的文檔
Scale(Number)：初始化縮放比例，參數(shù)值應(yīng)該是大于零的整數(shù)（1=100%）
ZoomTransition(String)：FlexPaper中縮放樣式，它使用和Tweener一樣的樣式，默認(rèn)參數(shù)值為easeOut，其他可選值包括：easenone，easeout，linear，easeoutquad
ZoomTime(Number)：從一個(gè)縮放比例變?yōu)榱硗庖粋€(gè)縮放比例需要花費(fèi)的時(shí)間，該參數(shù)值應(yīng)該為0或更大
ZoomInterval(Number)：縮放比例之間間隔，默認(rèn)值為0.1，該值應(yīng)該為正數(shù)
FitPageOnLoad(Boolean)：初始化時(shí)自適應(yīng)頁面，與使用工具欄上的適應(yīng)頁面按鈕同樣的效果
FitWidthOnLoad(Boolean)：初始化時(shí)自適應(yīng)頁面寬度，與工具欄上的適應(yīng)寬度按鈕同樣的效果
localeChain(String)：設(shè)置地區(qū)（語言），目前支持一下語言：
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)：當(dāng)設(shè)置為true時(shí)，單擊全拼按鈕會(huì)打開一個(gè)FlexPaper最大化的新窗口而不是全屏，當(dāng)由于flash播放器因?yàn)榘踩谷?，而使用flexpaper作為獨(dú)立的flash播放器的時(shí)候設(shè)置為true是個(gè)優(yōu)先選擇
ProgressiveLoading(Boolean)：當(dāng)設(shè)置為true時(shí)，展示文檔時(shí)不會(huì)加載完整個(gè)文檔，而是逐步加載，但是需要將文檔中轉(zhuǎn)化為9以上的版本（使用pdf2swf的時(shí)候使用-T 9標(biāo)簽）
MaxZoomSize(Number)：設(shè)置最大的縮放比例
MinZoomSize(Number)：設(shè)置最小的縮放比例
SearchMatchAll(Boolean)：設(shè)置為true時(shí)，單擊搜索所有符合條件的地方高亮顯示
InitViewMode(String)：設(shè)置啟動(dòng)模式如“Portrait”或“TowPage”
ViewModeToolsVisible(Boolean)：工具欄上是否顯示樣式選擇框
ZoomToolsVisible(Boolean)：工具欄上時(shí)候顯示縮放工具
NavToolsVisible(Boolean)：工具欄上是否顯示導(dǎo)航工具
CursorToolsVisible(Boolean)：工具欄上是否顯示光標(biāo)工具
SearchToolsVisible(Boolean)：工具欄上是否顯示搜索工具
2.3 FlexPaper例子
創(chuàng)建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', /* 對應(yīng)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文件組織結(jié)構(gòu)如圖6-2所示：
圖6-2 test.html文件組織結(jié)構(gòu)
顯示Paper.swf文件的效果如圖6-3所示：
圖6-3 FlexPaper下顯示Paper.swf效果
原文鏈接：http://www.cnblogs.com/luckyxiaoxuan/archive/2012/06/16/2551677.html
【編輯推薦】
