1.搭建Flexbuilder环境,网上很多,不在赘述。(FlexPaper要求的是Flex4,因为Flex3有的代码不支持)。
2.通过http://flexpaper.googlecode.com/svn/trunk/这个地址,获取Flexpaper的源码(我下载的是2012-1-24日的版本)。在获取前,我们需要安装SVN,这里我们使用TortoiseSVN,安装后打开,选择file->TortoiseSVN->Repo-browser,输入上面的地址即可。(文件见附件,FlexPaper.rar 文件)。
3.新建一个Flex项目,将FlexPaper源码下的src目录和local目录覆盖到你新建的Flex项目的src目录,以及lib下的FlexPaper_Resources.swc文件拷贝到项目的libs目录下。如附件所示:项目结构.jpg。
4.在默认包下打开和你项目名称同名的一个mxml文件,加入如下代码:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:fp="com.devaldi.controls.flexpaper.*" width="100%" height="100%" applicationComplete="initApp();" layout="absolute" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import mx.controls.Alert; public var _aid = 0;//文档ID [Bindable] public var _Scale:Number = 1;//缩放比例 [Bindable] public var _SwfFile:String = "";//SWF文件路径 [Bindable] public var _ZoomTransition:String = "easeOut"; [Bindable] public var _ZoomTime:Number = 0.6; [Bindable] public var _ZoomInterval:Number = 0.1; [Bindable] public var _FitPageOnLoad:Boolean = true;//加载后适合高度 [Bindable] public var _FitWidthOnLoad:Boolean = true;//加载后适合宽度 [Bindable] public var _PrintEnabled:Boolean = true;//是否支持打印 [Bindable] public var _FullScreenAsMaxWindow:Boolean = false;//是否支持全屏 [Bindable] public var _ProgressiveLoading:Boolean = false;//是否延迟加载 [Bindable] public var _localeChain:String = "zh_CN";//语言 private var isFocus:Boolean = false; //初始化参数 private function initApp():void{ var params:Object = Application.application.parameters; _Scale = getNumber(params, "Scale", 1); _SwfFile = getString(params, "SwfFile", "Paper.swf"); _ZoomTransition = getString(params, "ZoomTransition", "easeOut"); _ZoomTime = getNumber(params, "ZoomTime", 0.6); _ZoomInterval = getNumber(params, "ZoomInterval", 0.1); _FitPageOnLoad = getBoolean(params, "FitPageOnLoad", false); _FitWidthOnLoad = getBoolean(params, "FitWidthOnLoad", false); _PrintEnabled = getBoolean(params, "PrintEnabled", true); _FullScreenAsMaxWindow = getBoolean(params, "FullScreenAsMaxWindow", false); _ProgressiveLoading = getBoolean(params, "ProgressiveLoading", true); _localeChain = params["localeChain"]; //注册事件监听 this.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver); this.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut); //开放给外部(javascript)调用 ExternalInterface.addCallback("hasFocus", hasFocus); //ExternalInterface.addCallback("focus", focus); ExternalInterface.addCallback("setViewerFocus", setViewerFocus); } private function onMouseOver(event:MouseEvent):void{ this.isFocus = true; } private function onMouseOut(event:MouseEvent):void{ this.isFocus = false; } public function hasFocus():Boolean{ //Alert.show("hasFocus"); return isFocus; } public function setViewerFocus(isFocus:Boolean):void{ //Alert.show("setViewerFocus"); this.paperViewer.setViewerFocus(); } /** * * 获取String类型参数 * 如果没有,则返回默认值 **/ private function getString(params:Object, name:String, def:String):String{ if(params[name] != null){ return params[name]; } return def; } private function getNumber(params:Object, name:String, def:Number):Number{ if(params[name] != null){ return params[name]; } return def; } private function getBoolean(params:Object, name:String, def:Boolean):Boolean{ //Alert.show("比较:"+name); if(params[name] != null){ return params[name] == "true"; } return def; } ]]> </mx:Script> <!--mx:Panel x="165" y="76" width="250" height="200" layout="absolute" title="一个人"> <mx:Label x="59" y="37" text="{Scale}" width="88"/> </mx:Panel--> <fp:FlexPaperViewer id="paperViewer" width="100%" height="100%" Scale="{_Scale}" SwfFile="{_SwfFile}" ZoomTransition="{_ZoomTransition}" ZoomTime="{_ZoomTime}" ZoomInterval="{_ZoomInterval}" FitPageOnLoad="{_FitPageOnLoad}" FitWidthOnLoad="{_FitWidthOnLoad}" FullScreenAsMaxWindow="{_FullScreenAsMaxWindow}" ProgressiveLoading="{_ProgressiveLoading}" /> </mx:Application>
5.去掉工具栏最右边[关于...]对话框的显示的按钮
源文件:FlexPaperViewer.mxml
将源码中查找所有的bttnInfo,共如下三处:
1)bttnInfo.visible = (new MenuIcons.SMALL_TRANSPARENT().width > 10);用"//"注释掉 2)bttnInfo.visible = (new MenuIcons.SMALL_TRANSPARENT().width > 10);用"//"注释掉 3)bttnInfo.visible = true;改为bttnInfo.visible = false; //spin1.visible = true;注释掉 spin1.visible = false;
6.去掉底部的logo图片:
源文件: FlexPaperViewer.mxml
将<fp:FlexPaperViewer_Base ...>的属性最后行加入creationComplete处理:
<fp:FlexPaperViewer_Base xmlns:mx="http://www.adobe.com/2006/mxml" addedToStage="bindStageEvents(event)" xmlns:fp="com.devaldi.controls.flexpaper.*" xmlns:ct="com.devaldi.controls.*" xmlns:st="com.devaldi.skinning.*" creationComplete="initApp()">
然后加入处理initApp()函数到<mx:Script>中
public function initApp():void { paper1.removeElementAt(2); }
最后将源码中的函数papersLoadingHandler(event:Event)最后一行加上:paper1.removeElementAt(2);修改后如下所示:
protected override function papersLoadingHandler(event:Event):void{ //spin1.start(); //spin1.visible = true; spin1.visible = false; super.papersLoadingHandler(event); paper1.removeElementAt(2); }
7.菜单栏中文显示:
右键项目--->属性---->Flex编译器--->在附加的编译器参数框里加入下面一句:-locale zh_CN -source-path=locale/{locale} -keep-all-type-selectors=true即可。
8.点击菜单后,logo又出现的问题:
源文件: FlexPaperViewer.mxml修改如下代码:
<st:GradientImageButton icon="{MenuIcons.SINGLE_PAGE}" styleName="toolbttn" width="20" click="paper1.switchMode(Viewer.InitViewMode);paper1.removeElementAt(2);" toolTip="@Resource(key='SinglePage', bundle='FlexPaper')" selected="{paper1.ViewMode == Viewer.InitViewMode}" tabIndex="2" visible="{ViewModeToolsVisible}" includeInLayout="{ViewModeToolsVisible}"/> <st:GradientImageButton icon="{MenuIcons.TWO_PAGE}" styleName="toolbttn" width="20" click="paper1.switchMode('TwoPage');paper1.removeElementAt(2);" toolTip="@Resource(key='TwoPage', bundle='FlexPaper')" selected="{paper1.ViewMode == ViewModeEnum.TWOPAGE}" tabIndex="3" visible="{ViewModeToolsVisible}" includeInLayout="{ViewModeToolsVisible}"/> <st:GradientImageButton icon="{MenuIcons.THUMBS}" styleName="toolbttn" width="20" click="paper1.switchMode('Tile');paper1.removeElementAt(2);" toolTip="@Resource(key='ThumbView', bundle='FlexPaper')" selected="{paper1.ViewMode == ViewModeEnum.TILE}" tabIndex="4" visible="{ViewModeToolsVisible}" includeInLayout="{ViewModeToolsVisible}"/>
protected override function onViewModeChanged(event:ViewModeChangedEvent):void{ txtPage.text = formatPageNumber(viewer.currPage); super.onViewModeChanged(event); paper1.removeElementAt(2); }到此源码就改好了。