第三步:FlexPaper呈現swf

之前做了前面的兩步:

第一步:java開發_模仿百度文庫_OpenOffice2PDF_源碼下載

第二步:java開發_模仿百度文庫_SWFTools_源碼下載

現在是最後一步了,就是把我們的swf顯示在網頁上面。

在做這個之前,也是需要做一些準備工作的。

1.下載flexpaper

下載地址:http://code.google.com/p/flexpaper/downloads/list

下載:FlexPaper_2.0.2.zip

2.然後解壓,需要的文件如下:

上面是我重新組合的,你也可以把解壓縮文件夾整個的拷貝到WebRoot下面。

不過路徑在設置的時候,就需要注意啦.....

3.新建一個jsp文件

index.jsp

複製代碼
 1 <%@ page contentType="text/html; charset=utf-8"%>
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 3 <html>
 4     <head>
 5         <title>showWenKU</title>
 6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7 
 8         <script type="text/javascript"
 9             src="${pageContext.request.contextPath}/flexpaper/swfobject/swfobject.js"></script>
10         <script type="text/javascript"
11             src="${pageContext.request.contextPath}/flexpaper/flexpaper_flash.js"></script>
12 
13         <script type="text/javascript"> 
14             <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --> 
15             var swfVersionStr = "9.0.124";
16             <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
17             var xiSwfUrlStr = "${expressInstallSwf}";
18             var flashvars = { 
19                   SwfFile : escape("${pageContext.request.contextPath}/flexpaper/swf/test_1352107155307_1352172932517.swf?v1.4.0final"),
20                   Scale : 0.8, //放大因子,是一個0以上的數(帶小數 1 = 100%) 。
21                   ZoomTransition : "easeOut",//光學變焦過渡,默認值是easeOut,可取值: easenone, easeout, linear, easeoutquad
22                   ZoomTime : 0.5, //時間過渡讓變焦達到新的放大因子,值爲0或更大的數。
23                     ZoomInterval : 0.1,//區間的滑動縮放。放大因子缺省值是0.1。如同在工具欄上使用滑動條按鈕的效果。
24                     FitPageOnLoad : true, //(布爾) 適合初始頁大小(依高度而定)的裝載頁。如同在工具欄上使用fit-page按鈕的效果。
25                     FitWidthOnLoad : true, // (布爾)適合初始頁寬度大小的裝載頁。如同在工具欄上使用fit-width按鈕的效果。
26                     PrintEnabled : true,   //是否支持打印
27                     FullScreenAsMaxWindow :false,  //是否支持全屏
28                   ProgressiveLoading : false,  //是否支持延遲加載
29                   SearchMatchAll : true,//設置爲true時,單擊搜索所有符合條件的地方高亮顯示
30                   PrintToolsVisible : false,
31                     ViewModeToolsVisible : true,//(布爾)顯示或隱藏視圖模式與工具欄
32                     ZoomToolsVisible : true,//(布爾) 從工具欄顯示或隱藏變焦工具
33                     FullScreenVisible : true,//(布爾)以最大化方式打開一個新瀏覽器窗口。
34                     NavToolsVisible : true,//(布爾)顯示或隱藏導航工具
35                     CursorToolsVisible : false,//(布爾) 顯示或隱藏光標工具
36                     SearchToolsVisible : true,
37                     localeChain: "en_US" //語言
38                   };
39              var params = {
40                 
41                 }
42             params.quality = "high";
43             params.bgcolor = "#ffffff";
44             params.allowscriptaccess = "sameDomain";
45             params.allowfullscreen = "true";
46             var attributes = {};
47             attributes.id = "FlexPaperViewer";
48             attributes.name = "FlexPaperViewer";
49             swfobject.embedSWF(
50                 "${pageContext.request.contextPath}/flexpaper/swf/FlexPaperViewer.swf", "flashContent", 
51                 "800", "532", 
52                 swfVersionStr, xiSwfUrlStr, 
53                 flashvars, params, attributes);
54             swfobject.createCSS("#flashContent", "display:block;text-align:left;");
55         </script>
56 
57     </head>
58     <body>
59         <div id="flashContent" ></div>
60     </body>
61 </html>
複製代碼

具體的參數可以參考:

官方文檔1:http://flexpaper.org/docs_api.jsp

官方文檔2:http://flexpaper.org/docs_parameters.jsp

4.運行效果 歡迎多多支持多拿網http://www.iduona.com

發佈了32 篇原創文章 · 獲贊 6 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章