---

2015-03-02 更新文章，由于需求修改，更改了flexpaper插件，故增加第9、10、11小节，下载代码时请注意。

 

 

 

先废话几句。最近用到文档在线浏览功能，之前用的是print2flash（一个工具，文档直接转flash，自带翻页搜索等一系列功能），由于无法与js进行交互，所以改用flexpaper。

由于之前没接触过Flex，了解不多，所以文章难免有不合适的地方。希望各位给予指正。

首先感谢ajava.org的mark，一系列文章有很多的帮助，少走很多弯路。

 

开发工具：1.Adobe Flash Builder 4.5。下载地址：http://trials3.adobe.com/AdobeProducts/FLBR/4_5/win32/FlashBuilder_4_5_LS10.exe (目前已失效)

　　　　　2.Flash Player Debugger 。 下载地址：http://download.macromedia.com/pub/flashplayer/updaters/11/flashplayer_11_ax_debug.exe (目前已失效)

　　　　　3.Flex项目用的是Flex SDK4.5。

 

如果你没有Flex基础或不了解FlexPaper，强烈推荐你参考mark的文章。

具体修改FlexPaper的步骤就不多说了，随便百度一下，都是一大堆，具体的可以参阅mark的文章。

提供编译后的文件下载（不带间隔时间限制）。 

修改后的FlexPaper项目文件下载（不带间隔时间限制）。 （如果没有积分可以评论留下邮箱）

FlexPaper 2.1.2版本项目的源代码，有bug。 

FlexPaper 2.1.2Demo。下载地址：

 

下面说说主要内容。

1.去关于、Logo和打印功能可以参照mark系列的文章或者文末的链接

 

2.我修改的打印按钮是可通过属性进行控制的，默认不显示

　　官网demo中要修改flexpaper.js中传递参数的地方，加入PrintEnabled和PrintVisible属性。

1     window[instance] = flashembed(id, { 2         src                            : _jsDirectory+"../FlexPaperViewer.swf", 3         version                        : [10, 0], 4         expressInstall                : "js/expressinstall.swf", 5         wmode                        : _WMode 6     },{ 7         ElementId               : id, 8         SwfFile                  : _SWFFile, 9         PdfFile                  : _PDFFile,10         IMGFiles                  : _IMGFiles,11         JSONFile                 : _JSONFile,12         useCustomJSONFormat     : config.useCustomJSONFormat,13         JSONPageDataFormat         : config.JSONPageDataFormat,14         JSONDataType             : _JSONDataType,15         Scale                     : (config.Scale!=null)?config.Scale:0.8,16         ZoomTransition             : (config.ZoomTransition!=null)?config.ZoomTransition:'easeOut',17         ZoomTime                 : (config.ZoomTime!=null)?config.ZoomTime:0.5,18         ZoomInterval             : (config.ZoomInterval)?config.ZoomInterval:0.2,19         FitPageOnLoad             : (config.FitPageOnLoad!=null)?config.FitPageOnLoad:false,20         FitWidthOnLoad             : (config.FitWidthOnLoad!=null)?config.FitWidthOnLoad:false,21         FullScreenAsMaxWindow     : (config.FullScreenAsMaxWindow!=null)?config.FullScreenAsMaxWindow:false,22         ProgressiveLoading         : (config.ProgressiveLoading!=null)?config.ProgressiveLoading:false,23         MinZoomSize             : (config.MinZoomSize!=null)?config.MinZoomSize:0.2,24         MaxZoomSize             : (config.MaxZoomSize!=null)?config.MaxZoomSize:5,25         SearchMatchAll             : (config.SearchMatchAll!=null)?config.SearchMatchAll:false,26 //        PrintEnabled             : (config.PrintEnabled!=null)?config.PrintEnabled:false,27 //        PrintVisible             : (config.PrintVisible!=null)?config.PrintVisible:false,28         SearchServiceUrl         : config.SearchServiceUrl,29         InitViewMode             : config.InitViewMode,30         BitmapBasedRendering     : (config.BitmapBasedRendering!=null)?config.BitmapBasedRendering:false,31         StartAtPage             : config.StartAtPage,32         PrintPaperAsBitmap        : (config.PrintPaperAsBitmap!=null)?config.PrintPaperAsBitmap:false,33         AutoAdjustPrintSize        : (config.AutoAdjustPrintSize!=null)?config.AutoAdjustPrintSize:false,34 35         EnableCornerDragging     : ((config.EnableCornerDragging!=null)?config.EnableCornerDragging:true), // FlexPaper Zine parameter36         BackgroundColor         : config.BackgroundColor, // FlexPaper Zine parameter37         PanelColor                 : config.PanelColor, // FlexPaper Zine parameter38         BackgroundAlpha         : config.BackgroundAlpha, // FlexPaper Zine parameter39         UIConfig                : config.UIConfig,  // FlexPaper Zine parameter40 41         ViewModeToolsVisible     : ((config.ViewModeToolsVisible!=null)?config.ViewModeToolsVisible:true),42         ZoomToolsVisible         : ((config.ZoomToolsVisible!=null)?config.ZoomToolsVisible:true),43         NavToolsVisible         : ((config.NavToolsVisible!=null)?config.NavToolsVisible:true),44         CursorToolsVisible         : ((config.SearchToolsVisible!=null)?config.CursorToolsVisible:true),45         SearchToolsVisible         : ((config.SearchToolsVisible!=null)?config.SearchToolsVisible:true),46         StickyTools                : config.StickyTools,47         Toolbar                 : config.Toolbar,48         DocSizeQueryService     : config.DocSizeQueryService,49 50         RenderingOrder             : config.RenderingOrder,51 52         localeChain             : (config.localeChain!=null)?config.localeChain:"en_US",53         jsDirectory             : _jsDirectory,54         cssDirectory             : _cssDirectory,55         localeDirectory            : _localeDirectory,56         key                     : config.key57     });

　　调用的地方：

1 $('#documentViewer').FlexPaperViewer( 2                   { config : { 3                          DOC : escape(getDocumentUrl(startDocument)), 4                          Scale : 2, 5                          ZoomTransition : 'easeOut', 6                          ZoomTime : 0.5, 7                          ZoomInterval : 0.2, 8                          FitPageOnLoad : true, 9                          FitWidthOnLoad : false,10                          FullScreenAsMaxWindow : false,11                          ProgressiveLoading : false,12                          MinZoomSize : 0.2,13                          MaxZoomSize : 5,14                          SearchMatchAll : false,15 //                         PrintEnabled:false,16 //                         PrintVisible:true,17                          InitViewMode : 'Portrait',18                          RenderingOrder : '<%=(configManager.getConfig("renderingorder.primary") + ',' + configManager.getConfig("renderingorder.secondary")) %>',19 20                          ViewModeToolsVisible : true,21                          ZoomToolsVisible : true,22                          NavToolsVisible : true,23                          CursorToolsVisible : true,24                          SearchToolsVisible : true,25 26                            DocSizeQueryService : 'services/swfsize.ashx?doc=' + startDocument,27                            jsDirectory : 'js/',28 29                          JSONDataType : 'jsonp',30                          key : '<%=configManager.getConfig("licensekey") %>',31 32                            localeChain: 'zh_CN'33 34                          }}35                 );

3.修改搜索bug

　　2.1.2版本的源码搜索中有Bug.第一次和第二次搜索的结果并存。修改后的版本修复整个文件搜索。

　　但是分页加载时搜索只能搜索当前页，官网Demo也是这样，Flex一窍不通，不知如何修改。囧。。。

　　修改View.as中searchText函数中for循环部分。改为：

1 if(clearmarklist){ 2                         if(_markList!=null){ 3                             for(var i:int=0;i<_markList.length;i++){ 4                                 if(_markList[i]!=null && _markList[i].parent !=null){ 5 //                                    for(var ic:int=0;ic<_markList[i].numChildren;ic++){ 6 //                                        if(_markList[i].getChildAt(ic) is SearchShapeMarker){ 7 //                                            _markList[i].removeChildAt(ic); 8 //                                        } 9 //                                    }10                                     _markList[i].parent.removeChild(_markList[i]);11                                 }                        12                             }13                         }14                         15                         _markList = new Array(numPages);16                     }

4.修改缩略图bug

　　当时遇到这问题的时候，百度了一下，说替换googlecode中的SDK3.5的swc就可以。但是失败。

　　自己尝试修改，发现把Flex项目属性>Flex编译器>Flex SDK版本>”使用兼容Flex 3兼容模式“，然后会报错，再将FlexPaperViewer_Base.mxml中第9行的borderThickness="1"更改为如下四个属性即可：

paddingBottom="0"paddingLeft="0"paddingRight="0"paddingTop="0"

5.添加按钮

　　修改FlexPaperViewer.mxml中<mx:HBox>节点代码。例如我加的一个书签按钮。

6.javascript与Flex交互

　　javascript交互分两种情况，1是Flex调js，2是js调用Flex。

　　可以参考：

　　　　　　　

　　　　　　　  这里js调用Flex的时候，javascript可能会报错。即window.FlexPaperViewer_Instance.getApi()中FlexPaperViewer_Instance会是undefined。我没找到什么原因。可参照上面两种，记得引入swfobject.js。

7.去右键菜单

　　注释掉FlexPaperViewer_Base.mxml中所有contextMenu.customItems.push()的代码。contextMenu.clipboardMenu三行属性都改为false.

1 contextMenu.clipboardMenu = false;//是否使用剪贴板菜单2                     contextMenu.clipboardItems.copy = false;3                     contextMenu.clipboardItems.selectAll = false;

 8.书签功能

　　书签功能原理是点击按钮，获取当前页数，然后需要和Js进行交互，Js保存当前页数。

      按钮添加在FlexPaperViewer.mxml中<mx:HBox> 节点中：

public function bookMarks():void{            var m:String = ExternalInterface.call("ShowCurrentPage",_currPage);            trace(m);        }

     通过js和按钮进行交互。

 

---

以下内容为更新内容，更新时间：2015-03-02，文中所指行数为修改代码的行数。

 

9.去掉右侧滚动条和工具栏文本框

    由于需要增加现有需求，需要增加翻页时间间隔功能，所以添加9和10 两小节内容。

    屏蔽右侧滚动条，修改内容Viewer.as文件中createDisplayContainer 方法（1508行，_paperContainer 变量实例化之后），添加：

//屏蔽右侧滚动条_paperContainer.verticalScrollPolicy="off";

   替换工具栏文本框防止翻页，修改FlexPaperViewer.mxml中<mx:HBox/> 节点中：

 

10.增加翻页间隔

 

    增加翻页间隔，用到计时器，而且开放给外部js传参，固定间隔时间。

1. 首先在默认包中FlexPaperViewer.mxml文件中定义外部调用参数(62行)
   [Bindable]public var _IntervalSecond:Number = 0;

   在InitApp方法中获取Js传的值，默认值为5（116行）.

   _IntervalSecond = getNumber(params,"IntervalSecond",5);

   在FlexPaperViewer_Base.mxml文件中定义变量，供传值（141行）

   [Bindable]public var IntervalSecond:Number=0;

   在FlexPaperViewer.mxml文件末尾的<fp:FlexPaperViewer />中传参给FlexPaperViewer_Base。

   IntervalSecond="{_IntervalSecond}"
2. 在FlexPaperViewer_Base.mxml同级目录中的FlexPaperViewer.mxml文件中添加如下变量和方法（207行）：
   //计时器参数            public var pstartTime:Number = 0;            public var pstarttimer:Timer;                        //上次阅读到的页数            public  var lastPageNumber:Number=0;            /**             * 开始计时             */            public function funTimer(event:TimerEvent):void{                pstartTime++;            }                        /**             * 停止计时 并归0             */            public function PageTimerReset():void{                pstarttimer.reset();                pstartTime = 0;                pstarttimer.start();            }                        //上次阅读页数            private var _oldpage:Number=1;                        //是否已显示alert            private var isShowAlert:Boolean=false;            // 关闭后触发的事件              private function alertClickFirst(event:CloseEvent):void {                  isShowAlert=false;                //跳转指定页                paper1.gotoPage(_oldpage);            }

   在initApp方法中添加计时器启动代码（64行）：

   public function initApp():void {                  //去除LOGO                paper1.removeElementAt(2);                                 //初始化，计时器操作                pstarttimer=new Timer(1000);//1000是指1秒                pstarttimer.addEventListener(TimerEvent.TIMER, funTimer);                pstarttimer.start();            }

   修改formatPageNumber方法（243行）：

   protected function formatPageNumber(n:Number):String            {                //如果已弹窗，不继续执行                if(isShowAlert) return _oldpage.toString();                                //如果当前页面不等于上次打开的页面，并且当前页面大于上次打开页面，并且时间小于设定间隔，开始提醒                if(n!=1 && n!=_oldpage && n>lastPageNumber && pstartTime
           
            lastPageNumber)                        lastPageNumber=n;                    if(viewer.ViewMode == ViewModeEnum.TWOPAGE)                            return viewer.currPage.toString() + "-" + (viewer.currPage+1).toString();                    else                        return n.toString();                }            }
           

 11.增加上次阅读到xx功能

      由于添加此功能，所以带翻页间隔的代码中就屏蔽掉了书签按钮。

      这里的记录页数，是通过Js和FlexPaper进行交互获取，需要你自己处理保存在服务器中。

      在默认包中FlexPaperViewer.mxml中定义_StartPage 变量，并在initApp方法中进行获取Js传的值，最后传递给FlexPaperViewer_Base中，同第10节定义变量。

[Bindable]public var _StartPage:Number;..._StartPage=getNumber(params,"StartPage",1);...StartAtPage="{_StartPage}"

    在FlexPaperViewer_Base.mxml中修改viewercreationCompleteHandler（205行） 和documentLoadedHandler（426行）方法：

private function viewercreationCompleteHandler(e:FlexEvent):void{                if(_documentLoadedFirst && !_stageinitialized){                    dispatchEvent(new DocumentLoadedEvent(DocumentLoadedEvent.DOCUMENT_LOADED,viewer.numPages));                    if(StartAtPage!=1&&!isNaN(StartAtPage)&&StartAtPage>0){                        viewer.gotoPage(StartAtPage);                    }                    //flash.utils.setTimeout(function():void{
                             if(StartAtPage!=1&&!isNaN(StartAtPage)&&StartAtPage>0){viewer.gotoPage(StartAtPage);StartAtPage=-1;}                    //},1000);                }                                _stageinitialized = true;            }

protected function documentLoadedHandler(event:Event):void{                if(_stageinitialized){                    dispatchEvent(event);                                        if(StartAtPage!=1&&!isNaN(StartAtPage)&&StartAtPage>0){viewer.gotoPage(StartAtPage);}                    flash.utils.setTimeout(function():void{                        if(StartAtPage!=1&&!isNaN(StartAtPage)&&StartAtPage>0){viewer.gotoPage(StartAtPage);StartAtPage=-1;}                    },1000);                }else{                    _documentLoadedFirst = true;                }            }

    在FlexPaperViewer_Base.mxml同级目录下FlexPaperViewer.mxml中<mx:HBox />节点下增加（用于显示提示信息）：

   在FlexPaperViewer.mxml中 定义跳转和关闭方法（282行）：

protected function lblCloseMsg_clickHandler():void            {                TitileBox.removeAllElements();            }                        protected function lblTitleMsg_clickHandler():void            {                paper1.gotoPage(1);            }

    修改documentLoadedHandler 方法（114行）：

protected override function documentLoadedHandler(event:Event):void{                spin1.visible = false;                lblProgress.visible = false;                spin1.stop();                bttnInfo.visible =false;                super.documentLoadedHandler(event);                                if(StartAtPage==1 || isNaN(StartAtPage) || StartAtPage==0)                    TitileBox.removeAllElements();                else                {                    _oldpage=StartAtPage;                    lblTitleMsg.text="您上次阅读到第 "+StartAtPage+" 页，点击这里返回第 1 页";                }            }

 

带翻页间隔二次开发源代码：

 

编译过版本：

2015-03-02 更新内容完

---

 

 

另外推荐几篇关于FlexPaper的博客：

flexPaper简单二次开发：

FlexPaper阅读器开发手册(原创) ：

FlexPaper二次开发问题及搜索高亮显示：

FlexPaper初步使用时遇到的问题解决：

 

 

转载请注明出处：