从零开始学习Flash+AS3游戏开发 (4)

从零开始学习Flash+AS3游戏开发 (4) 一、选型经验浅谈Jackson为什么选择Flex, 关键词(Keyword):Flex,Flex3.0,RIA,富互联网应用 现在大家都开始重视起客户体验了，随着带宽的不断增容，电脑配置的不断升级，承载着丰富友好的RIA(Rich InternetApplications)富互联网应用在提高用户交互体验上变得越来越重要。现在用于开发RIA(Rich InternetApplications)富互联网应用的技术比较多，比较流行的有JAVAFX、基于J2EE的AJAX框架(JSF，AJAX，Ajax4jsf,gwt)、基于javascript的EXT框架、Adobe公司推出基于actionscript和MXML的FLEX框架等等。 图, flex,ext,javafx,google-gwt...你选择哪一个? JavaFX是SUN公司推出的RIA(Rich InternetApplications)富互联网应用技术，但是JavaFX发展的状况相对比较尴尬，首先JavaFX这种全新的语言接受的人群不多，其次JavaFX的IDE处于初级阶段，支持不丰富，相信现在大家都处于观望的阶段。 基于J2EE的AJAX框架也已经出现比较多了，Jackson所在的百洋医药集团之前的一些系统就是使用JSF框架开发，以Jackson使用JSF镶嵌页面和开发客户体验的经验来说，维护难度大、调试方法繁琐、编写页面代码出错率高等，至少对于开发客户体验的 工程 路基工程安全技术交底工程项目施工成本控制工程量增项单年度零星工程技术标正投影法基本原理 师来说是一个非常大的挑战，呵呵。而且Jsf的体验效果是有限的，现在Jsf的版本更新非常缓慢。现在很多网站还是非常推崇用Ajax，因为其页面零刷新、局部数据异步更新等特性，深受高级编程者的心仪。如果编程底子深厚的达人们还是可以选择Ajax开发RIA(Rich Internet Applications)富互联网应用的。 基于javascript的EXT框架，相信用的人不少。因为EXT有一套相对完善的客户体验页面组件，各种客户体验效果也相对丰富。Jackson所在团队开发的百洋软件研究试验室(大家可以经常到这里来与Jackson讨论Flex相关的问题。^-^)就是用Ext + Struts2 +FreeMarker 开发的，Ext主要用在平台的后台系统上。可能是因为Jackson与组员们对Ext的开发经验不足的缘故吧，觉得Ext在代码维护上就是一个恶梦，当要进行某些面板效果的调用时，就像发生以前的表格嵌套一样，一层一层的往里加，导致最后嵌套太多了，页面代码臃肿不堪，调试更是难上加难，一个效果的调试有时要用上老半天呢。听听Jackson组员yongtree说:“现在都不原意去看那一片的Ext代码了，看到就觉得闹心”(呵呵，这个小子有点怠工的苗头)。从以上这些方面看来，Ext至少不能让你很简单地就接受并熟练应用，也就是说掌握难度还是比较大的。 Adobe公司推出基于Actionscript和MXML的FLEX框架，这个当然是Jackson极力推荐的(本来在这里分享的就是有关Flex经验，不支持Flex的话Jackson就没啥好说的了，嘎嘎)。可能Jackson过去对Flash有好感的缘故，因为Flash开发的网站交互性非常好，界面交互过渡非常自然，只要你有足够的想象力，你的网站绝对可以吸引浏览者的眼球。远在05年，Jackson就想过使用Flash来开发一些系统(那时Adobe还没有与Macromedia合并呢，自然就没有Flex了)，但是碍于当时的Actionscript开发难度大、相关的动画文件维护难度大和生成文件也比较大等等缘故也就浅尝辄止了。 现在好了，Actionscript升级到3.0(彻彻底底地变了，贴上了面向对象编程的标签)而Flex也经历到3.0(不再为swf的难以维护而烦恼，生成swf体积也相对小了很多，组件非常丰富，调用很简单。可以很负 责任 安全质量包保责任状安全管理目标责任状8安全事故责任追究制幼儿园安全责任状占有损害赔偿请求权 地告诉你，Flex3.0很帅～)现在都出Flex4.0了，现在可谓是学Flex的大好时机(我还是推荐从Flex3.0学起，因为现在Flex3.0的网络资源比较丰富，而且Flex3.0相对稳定)。因此，Jackson最后也就决定选择Flex来开发系统登陆界面。 Jackson可能话比较多，Jackson也是尽量从一个界面工程师的方向来分享Flex(主要是Flex3.0)开发经验，不足的地方希望大家指正。Jackson非常愿意与大家一起探讨与Flex相关的问题，并与大家分享经验。 Jackson在使用Flex3.0开发前，也经过了一段时间的学习。买了一些关于Flex3.0开发丛书同时也在网络上查阅了大量的 资料 新概念英语资料下载李居明饿命改运学pdf成本会计期末资料社会工作导论资料工程结算所需资料清单 ，看书可以系统了解Flex3.0的开发流程与方法，而在网络上查阅资料可以针对某个自己需要的功能细节获得别人一些好经验。 图1 Jackson推荐Flex开发丛书 Jackson在此推荐几本对于入门者比较容易学习的Flex书籍，大家可以上当当或者卓越搜索订购。邱彦林写的《Flex第一步》、人民邮电出版社翻译的《Adobe Flex高级编程》和孙颖写的《Flash ActionScript 3殿堂之路》(主要在ActionScript方面的教程)，Jackson个人觉得这三本Flex书籍对于Flex学习入门者来说，已经足够详细地描述Flex3.0的开发流程与方法了。其实很多时候书本的内容还是比较枯燥的，对于界面设计者来说都喜欢看着演示的例子，选择自己认为可用的效果代码。因此网络资料就非常适合这些界面设计者了。 图2 Jackson推荐Flex资料网站 Jackson在这里再推荐几个网络个人感觉比较好的关于Flex开发资料网站，如: 中文Flex例子 blog.minidx.com/category/flex AIRIA艾睿网 www.airia.cn/index.php 中国RIA开发者论坛 www.riachina.com 另外，Jackson认为很多时候交互体验的设计并不完全依赖于你的页面代码有多严谨多有效率或者是你的界面设计得有多惊艳多好看，交互很多时候需要的是一点创意。只有将代码质量和界面设计与交互创意达到平衡，这样的交互才会打动你的体验者。交互设计者不单要注重界面设计，交互设计也是非常重要的。因此，我们需要大量地去体验别人的交互设计，将好的体验经过自己的二次创意设计用到自己的设计中去。 图3 FLEXShowcase网站主页部分一 图4 FLEXShowcase网站主页部分二 Jackson在这里推荐以上几个关于Flex体验的网站地址，供大家获得灵感与良好的经验。需要看看外国牛人现在都用Flex在做些什么，那就上这个FLEXShowcase flex.org/showcase，FLEXShowcase应该称之为一个平台，该平台本身就是用Flex开发的(这个平台让我想起早在几年前，由一帮闪客志愿者组成中国闪客联合发展组织，原来的域名是www.flashk.org，现在已经解散了。原来这个组织的网站提供非常多价值很高的教程与项目代码，而且也像这个FLEXShowcase平台一样介绍Flash网站或系统，相信很多闪客都对这个组织有印象，国内就是缺少这样的组织，可惜啊～)，上面聚集了很多同样用Flex开发的系统或者网站，在这里你可以大开眼界，看完后你会觉得自己的交互水平提高的空间非常大，让我们一起努力加快Flex学习吧，呵呵～ 在最后Jackson想说一句，希望那些期待Jackson经验分享的XDJM们可以给一点耐心，同时也是给Jackson一个写文章的时间。Jackson本来没有写经验分享的文章的义务，Jackson只是出于对Flex的热爱希望更多人认识Flex并加入到Flex学习和开发中来，从而认识更多志同道合的朋友。所以，请一些情绪比较偏激的朋友尊重彼此、彼此认可才会获得更多资料分享，希望各位能明白，谢谢～ 上一篇关于Flex登陆开发经验分享前的学习资料分享，相信大家都应该有所学习，对Flex有了个基本的了解，特别是对Jackson上篇提到的一个外国网站平台，大家从中应该大概的知道Flex能实现怎样的客户体验，究竟Flex能开发怎样的网站或者系统有了一个直观的感受。应该已经激起大家学习Flex的热情了，呵呵。 接下来，Jackson将开始分享实际的Flex登陆开发经验。Jackson将从自己设计过程中想法与创意的变化为主线来进行经验的分享。会从起初简陋的Flex登陆界面草图开发讲起，到最后的Flex登陆界面成品。中间将讲到Flex登陆界面的一些创意意图，也会讲到一些用Phoshop进行简单的界面设计方法与技巧(这对于一些没有进行过界面设计的程序员又想通过简单的设计达到有自己风格的系统界面或许能起到点作用)，最后Jackson也将共享一些Flex3.0源代码供大家学习使用。在此先将最终成品Show一下，如图1(百洋医药集团网络办公自动化系统Flex登陆界面成品截图) 所示: 图1 百洋医药集团网络办公自动化系统Flex登陆界面成品截图 题外话，非常欢迎各位朋友转载所有Jackson的经验分享的文章内容，但是希望转载文章内容的朋友们能够体现网络道德，标明出处并给Jackson博客 一个链接，您的链接就是对Jackson的肯定，将会是Jackson继续分享经验的动力，在此先感谢各位朋友～ 我们继续,首先大家还是需要先搭建好自己的Flex3.0开发环境(后面提及到的Flex都是指Flex3.0版本)，Jackson所在团队没有直接使用FlexBuilder作为开发环境，而是安装了Flex BuilderEclipse插件版，这是因为Jackson开发的这个Flex登陆界面是用于以Java开发的系统中使用，整个团队使用的开发环境是Eclipse，所以选择Flex BuilderEclipse插件版。关于环境配置不是Jackson经验分享的重点，如果各位朋友对Flex+Java的环境配置感兴趣，可以访问Jackson所在团队组员yongtree的博客，查阅“整合Flex和Java—配置篇”，文章中有环境配置的详细介绍。其实对于界面设计工程师来说，哪种版本的Flex IDE都没有太大问题。 好了，Jackson默认大家已经安装好了开发环境，现在建一个项目名为JcksonLogin。建立项目的菜单点击步骤为:File ? New ? Flex Project ，如 图2(新建一个Flex项目) 所示: 图2 新建一个Flex项目 在弹出的Flex配置窗口中将你的项目名称填写好，这里Jackson建立了一个名为"JacksonLogin"的项目名称，其他选项基本使用默认项就OK了。在配置窗口中有"Application type"一项，其中"Webapplication"指的是生成在浏览器下运行的网页形式项目;"Desktopapplication"则指的是生成可在桌面**运行的可执行文件项目(当然这个可执行项目需要用户在本机安装了Adobe的AIR运行环境才可以正常运行)。Jackson所在项目是web项目，所以使用默认的"Web application"。如图3(在Flex项目配置窗口中建立项目JacksonLogin) 所示: 图3 在Flex项目配置窗口中建立项目JacksonLogin 图4 Eclipse自动生成Flex项目JacksonLogin的文件目录 Flex项目建立好以后Eclipse自动生成目录结构，可以参见 图4(Eclipse自动生成Flex项目JacksonLogin的文件目录)中左边文件目录中的目录结构，自动生成并打开了一个 JacksonLogin.mxml，这个就是一个默认的主应用场景页面。 在Eclipse中的Flex代码编辑器中可以看见自动生成的代码行，其中有个"Application"标签对，这个标签对就是标志该页面是应用主场景(这个概念相信使用过Flash设计动画或者网站的界面设计师不会陌生。)，而且这个"Application"标签对在整个系统中只能有一个，这个与大家一直设计的Html代码形式web页面有很大区别，Html代码形式web页面没有应用主场景的概念，页面间都是相对**的，页面间的表单数据传递都是通过页面间的跳转实现。而Flex系统中则基本不会用到页面跳转，Flex是在一个应用场景页面中通过不同的"Moudle(组件)"过渡切换以实现功能逻辑，所有表单数据传递都是在一个页面中完成，也就是现在很多人说的"页面零刷新"。用户在使用Flex开发的系统时，只要第一次下载的主场景页面完整，在不同的功能组件间进行表单数据传递时，组件的切换会在主场景中通过"Loading"提示自然过渡到下一逻辑组件或者结果组件，不会看见浏览器的页面刷新现象。 回到我们的Flex登陆界面开发进程，其实无论对于编程人员或者界面设计人员，可视化的开发视图可以减少我们的开发时间和提高页面效果开发的效率，我们可以通过"Source/Design"功能按钮切换开发视图。现在Jackson将视图切换到"Design",如 图5(Eclipse中的可视化开发视图窗口) 所示: 图5 Eclipse中的可视化开发视图窗口 在这个视图中，我们可以通过拖拉一些常用组件到场景中来完成页面开发。现在开发的是登陆界面，所以得有录入框组件和提交按钮组件。我们从左下角的"Components(组件)"功能标签页中，首先在"Layout(布局)"中要找到"Panel(面板)"并拖拉到右边的主场景编辑窗口。具体如图6(在Components中寻找到Panel添加到场景)所示。一个"Panel(面板)"从某种意义上说相当于一个Html代码形式的web页面，我们将录入组件和提交按钮组件"装"到"Panel(面板)"中，就可以对"Panel"内的所有组件进行整体操作。 图6 在Components中寻找到Panel添加到场景 我们看见可视化视图中，右边有一个Flex Properties的功能标签页，具体如 图7(Flex Properties中设置组件属性)所示。在这里可以对"Panel"的相关属性进行设置，比如对"Panel"窗口标题(Title)进行设置;对"Panel"窗口样式(Style)进行设置;对"Panel"窗口布局(Layout)进行设置等。 图7 Flex Properties中设置组件属性 在组件功能标签也中找到"Controls(控制)"，拖拉两个"Label(标签)"、两个"TextInput(文本输入)"和两个"Button(按钮)"到主场景的"Panel(面板)"中并更改"Label(标签)"和"Button(按钮)"的文本内容。组件放置的位置如图8(在主应用场景中添加”Label、TextInput、Button”组 件) 所示: 图8 在主应用场景中添加”Label、TextInput、Button”组件 这样一个Flex3.0基础登陆界面的设计草图就出来了。 在“Flex登陆界面开发经验分享三”中Jackson已经介绍了简单的Flex登陆界面布局的简单流程,Jackson已经将Flex登陆布局的草图设计出来了，Flex登陆界面代码如图1(Flex登陆界面草图代码)演示如例1(Flex登陆框草图列子演示)。相信大家应该从草图出来的那一刻开始，脑子就开始有想法了，^-^因为这个Flex登陆框实在是没有太多的操作体验和 美感呈现，我们需要进一步地设计优化它。 图1 Flex登陆界面草图代码 例1 Flex登陆框草图例子演示 Jackson首先想到的是要让登陆框能根据浏览窗口的伸缩自适应居中，因为对于系统的登陆页面的视觉重点应该是在页面中心。我们可以直接在Application标签对中增加几个布局属性，layout="vertical"和verticalAlign="middle"。前一个属性作用是垂直布局，可以让登陆框的Panel在垂直方向上默认居中;后一个属性作用是水平布局，可以让登陆框的 Panel在水平方向上居中。现在看来登陆框的Panel已经可以自适应居中了。按(Alt+Shift+x,f)测试一下代码吧，现在无论你怎样改变IE窗口的大小，登陆框的Panel总是相对IE窗口居中。另外，即使你现在在Panel中加坐标(x或y)值，也不会起作用，登陆框的Panel还是会自使用居中。代码如图2(Flex登陆界面自动居中代码) 。 图2 Flex登陆界面自动居中代码 现在继续研究代码内容，这些标签当中的布局属性与我们在传统web页面中的布局属性基本一致。我们这个时候会想了，web页面可以使用CSS层叠样式表，那么Flex的MXML页面是否可以使用CSS层叠样式表呢, 答案 八年级地理上册填图题岩土工程勘察试题省略号的作用及举例应急救援安全知识车间5s试题及答案 是肯定的，Flex页面中一样可以使用CSS层叠样式表。现在Jackson在Flex项目的src目录中创建了一个新的文件夹"css"。你可以在src文件夹上右点击 ? New ? Css File，如 图3(CSS目录创建图解)，然后起一个CSS文 件名称(这里取名为Jackson_css)就OK了。 图3 CSS目录创建图解 好了，我们首先将Flex的application中自适应居中的相关属性加入到CSS中。想对主场景中的组件(这里主要是Flex登陆框的Panel)进行样式控制，可以对保留关键词Application加入到CSS样式表中，代码如图4(CSS代码内容和代码链接方式)。CSS文件完成后，就要在主场景页面将CSS层叠样式表链接到application主场景代码中，只要用“”就可以将CSS层叠样式表链接进来。现在将原来在Application标签对中的布局属性去掉。按(Alt+Shift+x,f)测试一下代码吧，CSS 样式已经在Flex编译文件中发生效果了，呵呵。 图4 CSS代码内容和代码链接方式 主场景看上去单调丑陋，我们先来改一改背景。Jackson以前在一些web设计中经常会使用循环背景，只要选取好循环背景还是会有好的效果。所以Jackson想尝试一下用循环背景，这里选择了一个斜纹背景图片。但是经过Jackson多次尝试，发现在Flex的CSS层叠样式表中并不能直接使用简单的属性设置让这个斜纹背景循环平铺到整个Application场景中。后来在一个外国朋友的博客中找到了解决方法，这个外国朋友共享了他的解决方法源代码,大家可以到他的博客(www.degrafa.org)看看。对于该外国朋友的as代码就不作深究了，有兴趣的朋友可以下载下来自己研究。这里只对如何使用该代码进行经验分享。只要将源代码中的as文件放到根目录，更改一下文件中的背景图片路径，另外在CSS层叠样式表中加上两个属性值就OK了。As文档中图片路径更改和CSS层叠样式表属性增加如图5(图片路径更改和CSS属性增加) 。 图5 As文档图片路径更改和CSS属性增加 将修改好的Flex登陆界面源代码编译test一下，你就会看到Flex登陆界面如演示如 例子2(Flex登陆主场景背景平铺列子演示)的效果了。如果大家对源码有兴趣可以到文章下面的文件下载区域获得该文的Flex源代码包。 例2 Flex登陆主场景背景平铺列子演示 Flex登陆界面开发经验分享五将分享Flex登陆框的美化工作经验，Jackson将会发布简单的图形设计方法内容的同时共享一些photoshop的源文件和源代码供大家学习，敬请期待。 本文Flex中CSS层叠样式表的应用方法学习文章中不足的地方希望大家指正。Jackson非常愿意与大家一起探讨Flex开发相关的问题，并与大家分享经验。希望Jackson的博客上能看到您宝贵的留言，谢谢～ 在上一篇Flex登陆界面开发经验分享四中，Jackson已经将登陆界面的一些布局方法和简单的CSS应用方法进行了分享，而且还增加了背景平铺的代码供大家学习。这次Jackson继续改变这个Flex登录框，让它更具美感。可能对于没有设计经验的编程人员，处理图片哪怕是一个小图标也是困难的。所以Jackson在这里尽量将简单地介绍一些Photoshop处理图片的方法，希望能给编程的朋友一些学习参考。 我们继续来改造这个Flex登录框，现在的Flex登陆框还是比较单调，Jackson在改造的 时候就想，如果可以在登陆框panel的title中增加一个公司logo图片应该会让title更醒目。另外，登陆框上的帐号与密码输入框末端如果能增加相关形象的图片，让客户输入引导更明确同时也会使客户体验更好。但是要让图标可以精确显示，而不会因为比例不调而出现图片锯齿，最好还是先在Photoshop(以下简称Ps)上处理出与需要展示位置尺寸一致的图片。为了相对精确，Jackson会经常使用这样的方法，将现在的Flex登陆窗口先Print下来(每个人的键盘功能上都有这个功能哦，点击"PrintScreen"功能键就OK了)，在这个例子Print之前先在Flex登陆框的title文本和按钮文本中，用全角中文空格空出图标需要放置的位置，如图1Flex登陆框文本修改 所示。 图1 Flex登陆框文本修改 然后当然是打开Photoshop软件。新建一个Ps文件，如果你之前Print成功了，那功能面板上的预设应该会自动选择了剪贴板，直接确定就行，然后"Ctrl"+"v"将你Print的Flex登陆框粘贴进来。好了，这个Ps文件就成为你的"草稿"页了。将你想要表达的图片元素都放到这里来，调整好各图片的大小后再单独处理每个需要用到的图片。这样的好处就好比你在完成一幅图画作品中的时候需要先来个草稿勾勒好大概的轮廓和布局，尽量精确表达你的设计(Jackson话啰嗦了^-^)。 首先将公司logo放到这个”草稿”上(一般公司的logo图会是白底或者是分层的源文件，抠图Jackson就不详说了)，通过缩放功能将图片调整到你需要的大小。Jackson这里例子中，logo与背景的色差比较小对比不明显，因此可以给logo设置一个发光效果让logo明显一点。 (本例中使用的Photoshop软件版本是CS2，请注意不同版本功能的使用方法。)在logo图层中右点击出现的选择菜单中选择"混合选项"，选择" 外发光"如 图2 Photoshop的混合选项 所示,然后将参数如 图3 Photoshop外发光选项卡参数设置 (其他参数朋友们可以自己尝试，直到达到你想要的效果)。接着将代表帐号的小人和代表密码的小锁也拖拽到你的"草稿"文件中并调整尺寸到合适大小(在Ps 中打开你要的图标文件，然后直接将该打开的图片文件拖拽到你的草稿文件上，如果你打开的图片 格式 pdf格式笔记格式下载页码格式下载公文格式下载简报格式下载 是gif，那就应先将该图片的索引颜色模式改变成RGB颜色模式才可以拖动，设置图4 Photoshop索引颜色模式转换成RGB颜色模式 所示)，最后调整效果如 图5 Ps草稿文件中的效果图所示。可以看见效果图中，小人图标和小锁图标都有从右向左的阴影，这个设置与设置外发光的方法一样，在"混合选项"中选择"投影"，各位朋友自己设置看看吧，Jackson就不详说了^-^。同样，登陆与取消(重置)按钮也 设计上了图标。 图2 Photoshop的混合选项 图3 Photoshop外发光选项参数设置 图4 Photoshop索引颜色模式转换成RGB颜色模式 图5 Ps草稿文件中的效果图 接下来将图标给**出来，形成不同尺寸的图标文件。观察除了logo图标较大外，其他图标的尺寸应该在14*14-18*18px之间(如果你不清楚，可以使用Ps的测量工具进行度量)，这个例子的图标基本都在16*16px之内，因此我们新建一个Ps文件，名称为iocn_pic，高度和宽度都设置为16*16px后点击确认。OK，现在将除了logo的图标外的其他图标都拖到这个Ps文件中，让图标的中心相互重叠。你在Ps中的图层标签页中关闭各个图层中的"眼睛",只留下你想输出生成的那个图标。如 图6 Photoshop图标输出处理文件 所示。 图6 Photoshop图标输出处理文件 好了，现在需要将这些图标一个一个输出为Flex登陆框中使用的图标文件，点击顶部菜单栏的"文件"选择"存储为Web所用格式"如 图7Photoshop中”存储为Web所用格式”功能，在弹出选项卡中预设区域选择"PNG-24",然后点击存储按钮保存到你的项目文件放置图片的文件夹中待用。对于有阴影的图标想在Flex中可以透明背景并且令边缘自然，就一定要输出为"PNG-24"格式的图片文件，Flex对该图片格式支持得非常好。其他图片和图标也按照以上的方法，一个一个输出，这里不再详谈。Jackson假设各位朋友已经处理好了这些图标。我们回到Eclipse的Flex开发界面，将刚才处理好的图标复制到项目中的"assets"中待用。 图7 Photoshop中”存储为Web所用格式”功能 如果大家对Photoshop源文件感兴趣，可以到文章下面的文件下载区域获得该文的Photoshop源文件和输出图标文件的压缩包。 下期将分享图标嵌入到Flex登陆框和关于增加输入框对内容的验证方面的编码设计， 敬请各位朋友期待。该Flex3.0开发学习文章中不足的地方希望大家指正。Jackson非常愿意 与大家一起探讨与Flex3.0开发与美化的相关问题，并与大家分享经验。