Flexpaper二次开发入门教程文档格式.docx
- 文档编号:7076510
- 上传时间:2023-05-07
- 格式:DOCX
- 页数:43
- 大小:544.92KB
Flexpaper二次开发入门教程文档格式.docx
《Flexpaper二次开发入门教程文档格式.docx》由会员分享,可在线阅读,更多相关《Flexpaper二次开发入门教程文档格式.docx(43页珍藏版)》请在冰点文库上搜索。
∙PNG2SWFLikeJPEG2SWF,onlyforPNGs.
∙GIF2SWFConvertsGIFstoSWF.Alsoabletohandleanimatedgifs.
∙WAV2SWFConvertsWAVaudiofilestoSWFs,usingtheL.A.M.E.MP3encoderlibrary.
∙AVI2SWFConvertsAVIanimationfilestoSWF.ItsupportsFlashMXH.263pression.Someexamplescanbefoundat.(Notice:
thistoolisnotincludedanymoreinthelatestversion,asffmpegormencoderdoabetterjobnowadays)
∙Font2SWFConvertsfontfiles(TTF,Type1)toSWF.
∙SWFBBoxAllowstoreadout,optimizeandreadjustSWFboundingboxes.
∙SWFCAtoolforcreatingSWFfilesfromsimplescriptfiles.IncludessupportforbothActionScript2.0aswellasActionScript3.0.
∙SWFExtractAllowstoextractMovieclips,Sounds,Imagesetc.fromSWFfiles.
∙AS3pileAstandaloneActionScript3.0piler.MostlypatiblewithFlex.
gpdf2swf的工作界面:
SWFTools官方:
2.Flexpaper二次开发准备工作
Flexpaper虽然已经提供了不错的功能,但我们还是有可能需要根据自己的需要对Flexpaper进展二次开发,做什么事情都要做足准备,这样才可提高成功率,因此进展Flexpaper二次开发,这一步也是必不可少的,需要什么、怎么去做,我们会在下面慢慢介绍。
2.1获得Flexpaper源码
我们可以通过flexpaper.googlecode./svn/trunk/这个地址,获取Flexpaper的源码〔我下载的是2012-1-24日的版本〕。
在获取前,我们需要安装SVN,这里我们使用TortoiseSVN,安装后打开,选择file->
TortoiseSVN->
Repo-browser,输入上面的地址:
上后,可以看到目录结果如如下图:
我们选择trunk/FlexPaper目录,右键选择Checkout,在提示框中选择Checkout目录,确认后会开始下载,如如下图:
Checkout完毕后,可以看到相应目录下
2.3把Flexpaper源码导入AdobeFlashBuilder
2.3.1创建Flex项目
选择工具栏上的“文件〞->
新建->
Flex项目
在创建项目窗口,我们主要填写、选择下面容:
a)输入项目名称,这里我使用了ajavaflexpaper;
b)项目位置为你的存放项目文件的目录,这里我使用了F:
\ajavaflexpaper;
c)应用类型我们选择〞web(在AdobeFlashPlayer中运行)〞,因为我们要在web页面浏览,所以选择了此项;
d)选择FlexSDK版本,这里采用FlexSDK4.0;
e)应用的是那种服务器技术,可选择:
无/其他、ASP.NET、ColdeFusion、J2EE、PHP等,这里我选择了无/其他。
填写、选择完毕后,点击下一步,进入“配置输出〞提示框,选择已编译的FLEX应用程序的位置,这里我采用了默认的bin-debug目录,源码重新编译后,文件会放在bin-debug目录。
点击下一步,来到最后一步,设置源路径和库路径。
我们选择的容有组件集选择“仅MX〞,框架选择“合并到代码中〞,其他默认就可以,当然你也可以重新设置你的“主源文件夹〞和“主应用程序文件〞。
点击完成,Flex项目创建完毕,到F:
\ajavaflexpaper目录,可看到如如下图的目录结构:
2.3.2把flexpaper源码复制到Flex项目目录
我们要复制的目录有:
locale、src复制到Flex项目根目录(F:
\ajavaflexpaper)中,lib里的FlexPaper_Resources.swc复制到F:
\ajavaflexpaper\libs中。
复制完毕后,在FlashBuilder4中右击项目名选择刷新,刷新后可见项目中增加了一些文件,见如下图红色框局部:
到目前为止,准备工作已完成,为FlexPaper二次开发做好准备。
下节我们先介绍FlexPaper和SWFTools的简单使用,对使用有了了解后,再进入二次开发容。
3.SWFTools的简单使用
有了第一章的介绍,大家对SWFTools应该有了根本的认识,下面我们开始演示怎样使用SWFTools的gpdf2swf.exe、pdf2swf.exe的使用,由于本教程的容围较小,所以其他工具使用不在这里介绍。
3.1使用swftools生成第一个SWF
方式一、使用gpdf2swf可视化窗口
我们打开gpdf2swf可视化窗口后,选择OpenPDF,选择要生成SWF的PDF文件,之后保存为SWF,你可以选择把所有页面或者局部页面参加到SWF文件,操作如如下图:
〔打开PDF文件〕
〔选择PDF文件〕
〔设置参数〕
〔保存为SWF文件〕
在这里大家要注意,使用目前最新版本的SWFTools中gpdf2swf.exe生成PDF,在设置参数中,只能选择Flash7或者8版本,但目前Flash9或者10版本都大行其道,因此mark建议生成SWF时采用第二种方式,我们下面继续介绍。
我们打开CMD,进入SWFTools的安装目录,这里我的安装目录是D:
\ProgramFiles\SWFTools,pdf2swf.exe的命令形式为:
我们执行下面的命令:
由上图我们可以看到每页转换的提示,最后写入到SWF文件中,打开F:
\ajava目录,可以看到FusionCharts.swf已经生成,这个swf的版本是flash9。
这里用到了pdf2swf.exe的-t、-s、-o参数,下一节我们对pdf2swf.exe的参数作详细介绍。
注意:
pdf2swf.exe命令中的文件名、目录名,不能带空格,否如此不能生成SWF。
3.2SWFTools参数介绍
我们输入:
D:
\ProgramFiles\SWFTools>
pdf2swf.exe–h,就可以获得帮助信息,本小节的参数描述转自某朋友的文章,mark作了简单的修改,因不知道谁是原创者,特说明,表示感,假设作者见本教程,可到ajava.org联系mark,将在本节中添加原作者大名。
-h,–help打印帮助信息
-V,–version打印版本号
-o,–outputfile.swf指定输出的swf文件名
-p,–pagesrange指定转换的页面围1-20或者1,4,6,9-11,使用的页码描述方法与打印机打印文件时候的选页一样
-P,–passwordpassword指定打开pdf的密码
-v,–verbose转换时输出详细的容
-z,–zlib使用Flash6的zlib压缩机制
-i,–ignore允许程序修改pdf的绘制顺序,可能会导致结果与原来有差异
-j,–jpegqualityquality设置转换其中的jpeg图片的质量,从0到100,默认值是85。
-s,–setparam=value设置SWF转码时候的参数,具体参数可以用pdf2swf-shelp获取
-w,–samewindow设置转换后的swf打开原pdf中的连接时使用一样的窗口
-t,–stop在每页结尾添加一个stop()命令
-T,–flashversionnum设置SWF所使用的flash版本号
-F,–fontdirdirectory指定字体文件所在路径
-b,–defaultviewer指定默认的swf导航文件,用来翻页、放大缩小等等
-l,–defaultloader指定默认的swf加载文件,用来显示加载进程效果
-B,–viewerfilename指定swf导航文件,作用同-b
-L,–preloaderfilename指定swf加载文件,作用同-l
-q,–quiet不打印普通信息,用-就不打印警告信息。
-S,–shapes不使用字体,所有都转为形状。
-f,–fonts在swf中保存全部字体。
-G,–flatten在文件中尽量去除影片层,合并它们
-I,–info不做实际转换,仅显示PDF的信息。
-Q,–maxtimen如果运行时间超时如此退出。
我们可以看到-s参数的用途,设置SWF转码时候的参数,可以通过pdf2swf-shelp命令获得更多的参数:
PDF参数:
PDFdeviceglobalparameters:
fontdir=指定字体目录,与1级参数的-F相假设
font=增加额外的字体文件
pages=指定页面围,与1级参数的-p相假设
zoom=指定分辨率,默认为72dpi
languagedir=增加一个xpdf的语言目录,对非西欧字符有用
multiply=在几倍分辨率下渲染
poly2bitmap把其中的图形转成点阵
bitmap把所有容转成点阵〔包括字体〕
SWF参数:
SWFlayeroptions:
jpegsubpixels=<
pixels>
jpeg图片的分辨率
ppmsubpixels=<
无损图片的分辨率
subpixels=<
快速设置上两个参数
drawonlyshapes所有都转成图形
ignoredraworderSWFs允许执行一些小优化
linksopennewwindow打开新窗口
linktarget新窗口的名称
linkcolor=<
color)的颜色
linknameurl名称与URL一致
storeallcharacters保存所有的字符字体
enablezlib使用zlib压缩
bboxvars在as中保存swf的区域大小
dots保存单点显示
reordertags=0/1执行某些tag优化
internallinkfunction=<
name>
部函数,如果点击一个部,将调用该actionscript函数
externallinkfunction=<
外部函数,如果点击一个外部,将调用该actionscript函数
disable_polygon_conversion不要将笔画转成多边形
caplinewidth=<
width>
线条最低转换宽度,比这个细的线条将不转换
insertstop在swf的每个桢中添加stop()函数
protect增加protect标签,禁止在flash中加载该swf
flashversion=<
version>
设置最低swf版本
framerate=<
fps>
设置桢率
minlinewidth=<
将宽度少于某值的矩形转成线条
simpleviewer使用简单的导航
animateinsertashowframetagaftereachplaceobject(animatedraworderofPDFfiles)
jpegquality=<
quality>
设置jpeg的压缩质量
splinequality=<
value>
设置样条曲线的转换质量
disablelinks禁止
4.Flexpaper简单使用
通过上面三章的容,大家对Flexpaper、SWFTools应该有大概的了解了,SWF文件也已经生成了,我们开始进入Flexpaper的使用的介绍。
本章中只演示Flexpaper在WEB页面上的使用,我们要下载一个Flash版本的FlexPaper,这里我选择了FlexPaper_1.5.0_flash。
下载地址:
code.google./p/flexpaper/downloads/list
下载、解压后,可以看到包含如下文件:
主要文件、文件夹说明:
Examples存放Flexpaper使用例子
Js存放Flexpaper调用的JS文件
Php存放PHP使用的文档、JS、库、SWF文件
Index.html例子主页
FlexpaperViewerFlexpaper的核心文件,用于浏览PDF
Paper.swf官方的默认宣传文件
playerProductInstall.swf如果客户端浏览器的flashplayer版本过低,他是不会嵌入你的swf,而是嵌入这个到页面上下载flashplayer的安装文件。
4.1第一个Flexpaper例子
那我们开始完成第一个Flexpaper例子吧,一个最简单的例子,我们主要用到FlexpaperViewer.swf、JS文件夹中的flexpaper_flash.js。
创建HTML页面test.html,代码如下:
<
HTML>
<
HEAD>
TITLE>
ajava.orgFlexpaper例子<
/TITLE>
meta-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
/HEAD>
BODY>
scripttype="
text/javascript"
src="
js/flexpaper_flash.js"
>
/script>
divstyle="
position:
absolute;
left:
10px;
top:
"
pid="
viewerPlaceHolder"
style="
width:
660px;
height:
553px;
display:
block"
Documentloading..<
/p>
<
varfp=newFlexPaperViewer(
'
FlexPaperViewer'
viewerPlaceHolder'
{config:
{
SwfFile:
escape('
FusionCharts.swf'
),
Scale:
0.6,
ZoomTransition:
'
easeOut'
ZoomTime:
0.5,
ZoomInterval:
0.2,
FitPageOnLoad:
true,
FitWidthOnLoad:
false,
FullScreenAsMaxWindow:
ProgressiveLoading:
MinZoomSize:
MaxZoomSize:
5,
SearchMatchAll:
InitViewMode:
Portrait'
PrintPaperAsBitmap:
ViewModeToolsVisible:
ZoomToolsVisible:
NavToolsVisible:
CursorToolsVisible:
SearchToolsVisible:
true,
localeChain:
en_US'
}});
/div>
/BODY>
/HTML>
把第三章局部生产的FusionCharts.swf复制到FlexPaper根目录下,我这里是F:
\FlexPaper1.5.0flash,这一步是必须的,如果不是test.html怎样读取到FusionCharts.swf呢?
测试:
打开浏览器,输入test.html的本地地址,就可以看到FlexPaper的浏览效果。
这里我分别在前言中的3种测试环境,结果都没问题,效果如如下图:
如果你用FF浏览器,出现提示“SecurityError:
Error#2148:
SWF文件file:
///F:
/FlexPaper1.5.0flash/FlexPaperViewer.swf不能访问本地资源FusionCharts.swf。
只有仅限于文件系统的SWF文件和可信的本地SWF文件可以访问本地资源。
〞,或者IE一直都处于加载状态,这种情况,是由于Flexpaper还没获得AdobeFlash的信任,这时你可以请访问.macromedia./support/documentation/en/flashplayer/help/settings_manager04a.html#119065,选择始终允许,把FlexPaper1.5.0flash文件夹添加到信任列表中。
Flexpaper例子解释〔4.2节〕
在上述的例子中的几点解释:
ajava.org服务器、数据库、文件、页面编码都是是UTF-8,所以才用UTF-8编码?
其实不是,Flex就是基于unicode编码的,建议大家采用UTF-8;
js/flexpaper_flash.js"
Test.html加载是引入js/flexpaper_flash.js,flexpaper_flash.js是处理SWF嵌入的脚本,大家可以在346行增加一个alert,显示html的值,看了就比拟清楚。
设置div样式后,FlexPaperViewer的位置会有变化,如position:
absolute改成相对定位,top改成200px,大家就可以看到效果的不同。
此段代码为加载提示,如果没有调用到FlexPaperViewer,会一直显示Documentlo
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flexpaper 二次开发 入门教程