1、Flexpaper 二次开发入门教程1. Flexpaper 介绍1.1 Flexpaper 是什么？Flexpaper 是由一家新西兰的 Devaldi 公司开发的在线浏览各种文件的组件，它采用的是 GPL开源的协议，即源代码开放并可以最其进行修改使用，这一切都是免费得，但不能对Flexpaper 源码修改后封装成商业软件进行发布和销售。Flexpaper 官方主页：http:/1.2 Flexpaper 可以做什么？如果你有一些 DOC、PPT 、PDF 等格式的文档，想在网站里提供给大家在线阅读，那怎样做好呢？现在 Flexpaper 可以为你做到，当然 Flexpaper 还有一个搭档
2、，那就是 SWFTools，通过 SWFTools生产 SWF，再通过 Flexpaper 组件显示，这对黄金搭档可以为你实现的在线文档功能。使用 Flexpaper 浏览 PDF，那需要 PDF 软件环境的支持吗？答案是不需要的， Flexpaper 还可以被当做 Flex 的库来使用，这些都使开发、使用变得更简单。1.3 Flexpaper 版本Flexpaper 的初始版本 1.0 发布于 2009 年，到现在已经有 42 个版本。swc 版本为组件包，使用swc 组件包需要导入到工程中再调用，flash 版本为可以单独执行的，里面有例子、JS 文件、SWF 文件，我们采用 flash
3、版本很容易就可以使用 Flexpaper 显示在线文档。SWFTools 介绍1.5 SWFTools 介绍SWFTools 是一个 SWF 处理、转换的开源工具，它的功能主要体现在：1. SWF 的抽取、合并、解析、读写；2. PDF/JPEG/PNG/AVI/TTF/WAV 等格式转换成 SWF。SWFTools 是采用 GPL 开源协议，永久免费，现在 SWFTools 已经支持 Solaris, Linux (32 bit 和 64 bit), FreeBSD, OpenBSD, HP-UX, Solaris, MacOS X and Windows 98/ME/2000/XP/Vis
4、ta 等多个系统。，下载后安装后可以看到它的工具官方对各个工具的描述： PDF2SWF A PDF to SWF Converter. Generates one frame per page. Enables you to have fully formatted text, including tables, formulas, graphics etc. inside your Flash Movie. Its based on the xpdf PDF parser from Derek B. Noonburg. SWFCombine A multi-function tool for
5、 inserting SWFs into Wrapper SWFs, contatenating SWFs, stacking SWFs or for basic parameter manipulation (e.g. changing size). SWFStrings Scans SWFs for text data. SWFDump Prints out various informations about SWFs, like contained images/fonts/sounds, disassembly of contained code as well as cross-r
6、eference and bounding box data. JPEG2SWF Takes one or more JPEG pictures and generates a SWF slideshow from them. Supports motion estimation compression (h.263) for better compression of video sequences. PNG2SWF Like JPEG2SWF, only for PNGs. GIF2SWF Converts GIFs to SWF. Also able to handle animated
7、 gifs. WAV2SWF Converts WAV audio files to SWFs, using the L.A.M.E. MP3 encoder library. AVI2SWF Converts AVI animation files to SWF. It supports Flash MX H.263 compression. Some examples can be found at examples.html. (Notice: this tool is not included anymore in the latest version, as ffmpeg or me
8、ncoder do a better job nowadays) Font2SWF Converts font files (TTF, Type1) to SWF. SWFBBox Allows to read out, optimize and readjust SWF bounding boxes. SWFC A tool for creating SWF files from simple script files. Includes support for both ActionScript 2.0 as well as ActionScript 3.0. SWFExtract All
9、ows to extract Movieclips, Sounds, Images etc. from SWF files. AS3Compile A standalone ActionScript 3.0 compiler. Mostly compatible with Flex. gpdf2swf 的工作界面：SWFTools 官方网站：http:/www.swftools.org/2. Flexpaper 二次开发准备工作Flexpaper 虽然已经提供了不错的功能，但我们还是有可能需要根据自己的需要对 Flexpaper 进行二次开发，做什么事情都要做足准备，这样才可提高成功率，因此进
10、行 Flexpaper 二次开发，这一步也是必不可少的，需要什么、怎么去做，我们会在下面慢慢介绍。2.1 获得 Flexpaper 源码我们可以通过 http:/ Flexpaper 的源码（我下载的是 2012-1-24 日的版本） 。在获取前，我们需要安装 SVN，这里我们使用 TortoiseSVN，安装后打开，选择 file-TortoiseSVN-Repo-browser，输入上面的地址：链接上后，可以看到目录结果如下图：我们选择 trunk/FlexPaper 目录，右键选择 Checkout，在提示框中选择 Checkout 目录，确认后会开始下载，如下图：Checkout 完毕
11、后，可以看到相应目录下2.3 把 Flexpaper 源码导入 Adobe Flash Builder2.3.1 创建 Flex 项目选择工具栏上的“文件”-新建 - Flex 项目在创建项目窗口，我们主要填写、选择下面内容：a)输入项目名称，这里我使用了 ajavaflexpaper；b)项目位置为你的存放项目文件的目录，这里我使用了 F:ajavaflexpaper；c)应用类型我们选择” web(在 Adobe Flash Player 中运行)”，因为我们要在 web 页面浏览，所以选择了此项；d)选择 Flex SDK 版本，这里采用 Flex SDK 4.0；e)应用的是那种服务器
12、技术，可选择：无/其他、ASP.NET、 ColdeFusion、J2EE 、PHP 等，这里我选择了无/其他。填写、选择完毕后，点击下一步，进入“配置输出”提示框，选择已编译的 FLEX 应用程序的位置，这里我采用了默认的 bin-debug 目录，源码重新编译后，文件会放在 bin-debug 目录。点击下一步，来到最后一步，设置源路径和库路径。我们选择的内容有组件集选择“仅 MX”，框架链接选择“合并到代码中” ，其他默认就可以，当然你也可以重新设置你的“主源文件夹”和“主应用程序文件” 。点击完成，Flex 项目创建完毕，到 F:ajavaflexpaper 目录，可看到如下图的目录结
13、构：2.3.2 把 flexpaper 源码复制到 Flex 项目目录我们要复制的目录有：locale、src 复制到 Flex 项目根目录(F:ajavaflexpaper)中，lib 里的FlexPaper_Resources.swc 复制到 F:ajavaflexpaperlibs 中。复制完毕后，在 Flash Builder 4 中右击项目名选择刷新，刷新后可见项目中增加了一些文件，见下图红色框部分：到目前为止，准备工作已完成，为 FlexPaper 二次开发做好准备。下节我们先介绍FlexPaper 和 SWFTools 的简单使用，对使用有了了解后，再进入二次开发内容。3. SW
14、FTools 的简单使用有了第一章的介绍，大家对 SWFTools 应该有了基本的认识，下面我们开始演示怎样使用SWFTools 的 gpdf2swf.exe、pdf2swf.exe 的使用，由于本教程的内容范围较小，所以其他工具使用不在这里介绍。3.1 使用 swftools 生成第一个 SWF方式一、使用 gpdf2swf 可视化窗口我们打开 gpdf2swf 可视化窗口后，选择 Open PDF，选择要生成 SWF 的 PDF 文件,之后保存为SWF，你可以选择把所有页面或者部分页面加入到 SWF 文件，操作如下图：（打开 PDF 文件）（选择 PDF 文件）（设置参数）（保存为 SWF
15、 文件）在这里大家要注意，使用目前最新版本的 SWFTools 中 gpdf2swf.exe 生成 PDF，在设置参数中，只能选择 Flash 7 或者 8 版本，但目前 Flash 9 或者 10 版本都大行其道，因此 mark 建议生成SWF 时采用第二种方式，我们下面继续介绍。方式二、使用 pdf2swf.exe 命令我们打开 CMD，进入 SWFTools 的安装目录，这里我的安装目录是 D:Program FilesSWFTools， pdf2swf.exe 的命令形式为：pdf2swf.exe -options file.pdf -o file.swf我们执行下面的命令：pdf2s
16、wf.exe -t F:ajavaFusionCharts.pdf -s flashversion=9 -o F:ajavaFusionCharts.swf由上图我们可以看到每页转换的提示，最后写入到 SWF 文件中，打开 F:ajava 目录，可以看到FusionCharts.swf 已经生成，这个 swf 的版本是 flash 9。这里用到了 pdf2swf.exe 的-t、-s 、-o 参数，下一节我们对 pdf2swf.exe 的参数作详细介绍。注意：pdf2swf.exe 命令中的文件名、目录名，不能带空格，否则不能生成 SWF。3.2 SWFTools 参数介绍我们输入：D:Pro
17、gram FilesSWFToolspdf2swf.exe h，就可以获得帮助信息，本小节的参数描述转自某朋友的文章，mark 作了简单的修改，因不知道谁是原创者，特说明，表示感谢，若作者见本教程，可到 ajava.org 网站联系 mark，将在本节中添加原作者大名。-h , help 打印帮助信息-V , version 打印版本号-o , output file.swf 指定输出的 swf 文件名-p , pages range 指定转换的页面范围 1-20 或者 1,4,6,9-11，使用的页码描述方法与打印机打印文件时候的选页一样-P , password password 指定打开
18、 pdf 的密码-v , verbose 转换时输出详细的内容-z , zlib 使用 Flash 6 的 zlib 压缩机制-i , ignore 允许程序修改 pdf 的绘制顺序，可能会导致结果与原来有差异-j , jpegquality quality 设置转换其中的 jpeg 图片的质量，从 0 到 100，默认值是 85。-s , set param=value 设置 SWF 转码时候的参数，具体参数可以用 pdf2swf -s help 获取-w , samewindow 设置转换后的 swf 打开原 pdf 中的连接时使用相同的窗口-t , stop 在每页结尾添加一个 stop
19、()命令-T , flashversion num 设置 SWF 所使用的 flash 版本号-F , fontdir directory 指定字体文件所在路径-b , defaultviewer 指定默认的 swf 导航文件，用来翻页、放大缩小等等-l , defaultloader 指定默认的 swf 加载文件，用来显示加载进程效果-B , viewer filename 指定 swf 导航文件，作用同-b-L , preloader filename 指定 swf 加载文件，作用同-l-q , quiet 不打印普通信息，用-qq 就不打印警告信息。-S , shapes 不使用字体，所
20、有都转为形状。-f , fonts 在 swf 中保存全部字体。-G , flatten 在文件中尽量去除影片层，合并它们-I , info 不做实际转换，仅显示 PDF 的信息。-Q , maxtime n 如果运行时间超时则退出。我们可以看到-s 参数的用途，设置 SWF 转码时候的参数，可以通过 pdf2swf -s help 命令获得更多的参数：PDF 参数 :PDF device global parameters:fontdir= 指定字体目录, 与 1 级参数的-F 相若font= 增加额外的字体文件pages= 指定页面范围，与 1 级参数的-p 相若zoom= 指定分辨率，默
21、认为 72dpilanguagedir= 增加一个 xpdf 的语言目录，对非西欧字符有用multiply= 在几倍分辨率下渲染poly2bitmap 把其中的图形转成点阵bitmap 把所有内容转成点阵（包括字体）SWF 参数:SWF layer options:jpegsubpixels= jpeg 图片的分辨率ppmsubpixels= 无损图片的分辨率subpixels= 快速设置上两个参数drawonlyshapes 所有都转成图形ignoredraworder SWFs 允许执行一些小优化linksopennewwindow 链接打开新窗口linktarget 新链接窗口的名称li
22、nkcolor= 内部链接函数，如果点击一个内部链接，将调用该 actionscript 函数externallinkfunction= 外部链接函数，如果点击一个外部链接，将调用该 actionscript 函数disable_polygon_conversion 不要将笔画转成多边形caplinewidth= 线条最低转换宽度，比这个细的线条将不转换insertstop 在 swf 的每个桢中添加 stop()函数protect 增加 protect 标签，禁止在 flash 中加载该 swfflashversion= 设置最低 swf 版本framerate= 设置桢率minlinewi
23、dth= 将宽度少于某值的矩形转成线条simpleviewer 使用简单的导航animate insert a showframe tag after each placeobject (animate draw order of PDF files)jpegquality= 设置 jpeg 的压缩质量splinequality= 设置样条曲线的转换质量disablelinks 禁止链接4. Flexpaper 简单使用通过上面三章的内容，大家对 Flexpaper、SWFTools 应该有大概的了解了，SWF 文件也已经生成了，我们开始进入 Flexpaper 的使用的介绍。本章中只演示 F
24、lexpaper 在 WEB 页面上的使用，我们要下载一个 Flash 版本的 FlexPaper，这里我选择了 FlexPaper_1.5.0_flash。下载地址：http:/ 存放 Flexpaper 使用例子Js 存放 Flexpaper 调用的 JS 文件Php 存放 PHP 使用的文档、JS、库、SWF 文件Index.html 例子主页FlexpaperViewer Flexpaper 的核心文件，用于浏览 PDFPaper.swf 官方的默认宣传文件playerProductInstall.swf 如果客户端浏览器的 flashplayer 版本过低，他是不会嵌入你的 swf,
25、而是嵌入这个 playerProductInstall.swf 到页面上下载 flashplayer 的安装文件。4.1 第一个 Flexpaper 例子那我们开始完成第一个 Flexpaper 例子吧，一个最简单的例子，我们主要用到FlexpaperViewer.swf、JS 文件夹中的 flexpaper_flash.js。创建 HTML 页面 test.html，代码如下：ajava.org Flexpaper 例子Document loadingvar fp = new FlexPaperViewer(FlexPaperViewer,viewerPlaceHolder, config
26、: SwfFile : escape(FusionCharts.swf),Scale : 0.6, ZoomTransition : easeOut,ZoomTime : 0.5,ZoomInterval : 0.2,FitPageOnLoad : true,FitWidthOnLoad : false,FullScreenAsMaxWindow : false,ProgressiveLoading : false,MinZoomSize : 0.2,MaxZoomSize : 5,SearchMatchAll : false,InitViewMode : Portrait,PrintPape
27、rAsBitmap : false,ViewModeToolsVisible : true,ZoomToolsVisible : true,NavToolsVisible : true,CursorToolsVisible : true,SearchToolsVisible : true, localeChain: en_US);把第三章部分生产的 FusionCharts.swf 复制到 FlexPaper 根目录下，我这里是 F:FlexPaper1.5.0flash，这一步是必须的，如果不是 test.html 怎样读取到 FusionCharts.swf 呢？测试：打开浏览器，输入 t
28、est.html 的本地地址，就可以看到 FlexPaper 的浏览效果。这里我分别在前言中的 3 种测试环境，结果都没问题，效果如下图：如果你用 FF 浏览器，出现提示“SecurityError: Error #2148: SWF 文件 file:/ F:/FlexPaper1.5.0flash /FlexPaperViewer.swf 不能访问本地资源 FusionCharts.swf。只有仅限于文件系统的 SWF 文件和可信的本地 SWF 文件可以访问本地资源。 ”，或者 IE 一直都处于加载状态，这种情况，是由于 Flexpaper 还没获得 Adobe Flash 的信任，这时你可
29、以请访问 http:/ FlexPaper1.5.0flash 文件夹添加到信任列表中。Flexpaper 例子解释（4.2 节）在上述的例子中的几点解释：ajava.org 网站服务器、数据库、文件、页面编码都是是 UTF-8，所以才用 UTF-8 编码？其实不是，Flex 就是基于 unicode 编码的，建议大家采用 UTF-8；Test.html 加载是引入 js/flexpaper_flash.js，flexpaper_flash.js 是处理 SWF 嵌入的脚本，大家可以在 346 行增加一个 alert，显示 html 的值，看了就比较清楚。设置 div 样式后，FlexPape
30、rViewer 的位置会有变化，如 position:absolute 改成相对定位，top 改成 200px，大家就可以看到效果的不同。Document loading此段代码为加载提示，如果没有调用到 FlexPaperViewer，会一直显示 Document loadingvar fp = new FlexPaperViewer(FlexPaperViewer,viewerPlaceHolder, config : )此段代码是创建一个 FlexPaperViewer,它在 flexpaper_flash.js 中有定义，共三个参数config : SwfFile : escape(F
31、usionCharts.swf),此段代码里包含对 FlexPaper 参数的设置，详细请看下一节。4.3 Flexpaper 参数说明SwfFile (String) 需要使用 Flexpaper 打开的文档 Scale (Number) 初始化缩放比例，参数值应该是大于零的整数 ZoomTransition (String) Flexpaper 中缩放样式，它使用和 Tweener 一样的样式，默认参数值为 easeOut.其他可选值包括: easenone, easeout, linear, easeoutquad ZoomTime (Number) 从一个缩放比例变为另外一个缩放比例需
32、要花费的时间，该参数值应该为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 (
33、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 (Finnish) hu_HU (Hungarian) FullScreenAsMaxWindow (Boolean) 当设置为 true 的时候，单击全屏按钮会打
34、开一个flexpaper 最大化的新窗口而不是全屏，当由于 flash 播放器因为安全而禁止全屏，而使用flexpaper 作为独立的 flash 播放器的时候设置为 true 是个优先选择。 ProgressiveLoading (Boolean) 当设置为 true 的时候，展示文档时不会加载完整个文档，而是逐步加载，但是需要将文档转化为 9 以上的 flash 版本（使用 pdf2swf 的时候使用-T 9 标签）。 MaxZoomSize (Number) 设置最大的缩放比例。 MinZoomSize (Number) 最小的缩放比例。 SearchMatchAll (Boolean)
35、 设置为 true 的时候，单击搜索所有符合条件的地方高亮显示。 InitViewMode (String) 设置启动模式如“Portrait“ or “TwoPage“. ViewModeToolsVisible (Boolean) 工具栏上是否显示样式选择框。 ZoomToolsVisible (Boolean) 工具栏上是否显示缩放工具。 NavToolsVisible (Boolean) 工具栏上是否显示导航工具。 CursorToolsVisible (Boolean) 工具栏上是否显示光标工具。 SearchToolsVisible (Boolean) 工具栏上是否显示搜索。对比本
36、例子中的参数设置：SwfFile : escape(FusionCharts.swf),/加载的 SWF 文件为 FusionCharts.swfScale : 0.6, /初始化缩放比例为 0.6，即 60%ZoomTransition : easeOut,ZoomTime : 0.5,ZoomInterval : 0.2,FitPageOnLoad : true,/加载时自动适应页面FitWidthOnLoad : false, /加载时自动适应页面宽度FullScreenAsMaxWindow : false,ProgressiveLoading : false,MinZoomSize
37、: 0.2, /页面最小可缩小成 20%MaxZoomSize : 5, /页面最大可放大成 500%SearchMatchAll : false,InitViewMode : Portrait,PrintPaperAsBitmap : false,ViewModeToolsVisible : true,ZoomToolsVisible : true,NavToolsVisible : true,CursorToolsVisible : true,SearchToolsVisible : true, localeChain: en_US /设置地区（语言）为 en_US上面带注解的参数为我们经
38、常设置的参数，下面我们来简单演示一下几个参数改变的效果：FitWidthOnLoad : false 改成 trueMaxZoomSize : 5 改成 1localeChain: en_US改成zh_CN通过本章的介绍，大家应该可以简单的使用 Flexpaper 了，下一章我们将介绍 Flexpaper 二次开发。大家通过前几章内容已经基本可以简单的使用 Flexpaper 了，但某些时候，我们会觉得FlexPaperViewer 的某些内容不适合显示出来，如 Flexpaper 的打印、官方介绍、logo 等，这时候我们就需要对 Flexpaper 进行二次开发，修改 Flexpaper
39、的源码来达到效果。5.1 Flexpaper 重点类包介绍通过第二章中介绍的二次开发准备工作，我们可以看到 Flexpaper 的源码了，1）caurina.transitions 为 actionscript 类包2）com.devaldi 为 devaldi 公司开发的 Flexpaper 核心类包，如上图红色框部分。其中：controls 为主控部分，events 为事件处理部分，skinning 为 UI 设置部分，streaming为文件流处理部分。3）FlexPaper_Resources.swc 为 com.devaldi 调用的资源库，我们可以看到一些abc（ActionScr
40、ipt bytecode（字节码）文件，编译过看不到源代码，ABC 文件不可以单独运行，必须放入 SWF（.swf）文件中才可以被 Flash Player 执行。我们下面的例子中只涉及到 com.devaldi.controls 包文件的修改，其他文件的修改未涉及，各位高手可以研究一下源码，看可否写出自己的插件，呵呵。Mark 连 Flex 菜鸟也不算，还没入门，所以上述功能只是猜测，大家眼睛是雪亮的，欢迎指正。5.2 增加( 修改)自己的 mxml 应用程序做完二次开发准备工作后，大家可以测试：a) 重新编译后会发现 bin-debug 有 ajavaflexpaper.swf，改名成Fl
41、exPaperViewer.swf 后使用，刷新页面后发现空白页面，无任何效果。b)把原有的 FlexPaperViewer.mxml 右键设置为默认应用程序，重新编译后，会发现空白页面，无任何效果。针对 a 点，我们先看看 ajavaflexpaper.mxml里面没有作任何处理，所以显示空白页面是很正常的。针对 b 点，我们看看 FlexPaperViewer.mxml我们查找 bindStageEvents(e:Event)方法，发现没有获取 web 页面传递的FlexPaper 参数处理方法，FlexPaperViewer_base.mxml 里有getUrlParamaters()方
42、法，但发现 fullUrl 是 web 页面页面 URL 地址，不包含FlexPaper 参数，具体用法没研究。通过几位朋友的文章介绍，mark 修改 ajavaflexpaper.mxml 如下代码解释：applicationComplete=“initApp();“ - 为初始化时调用 initApp()方法initApp() - 为获取 web 页面传递过来的 FlexPaper 参数、注册监听器_xxxx:xxx - 存储 web 页面传递过来的 FlexPaper 参数把上面代码的 st:GradientImageButton 部分代码注释掉就可以了效果如下图：这里的 st:Grad
43、ientImageButton 调用的是 xmlns:st=“com.devaldi.skinning.*包中的GradientImageButton.as 文件，再调用其他文件的 printPaper(event)处理。的代码： mx:Canvas width=“100%“ id=“cnv_info“ horizontalScrollPolicy=“off“ verticalScrollPo .5.4 删除、修改 Flexpaper 浏览器的 FP 关于我们按钮a)删除 FP 关于我们按钮我们可以在 FlexPaperViewer.mxml 中找到关于 FP 的代码：10“ /st:GradientLabel id=“lblProgress“ left=“cnv_info.width-26“
