所谓RIA，或者说富网络网应用，就是指可以像桌面程序一样操作的网络应用。 在RIA冒出来之前，大多数的网络应用都是静态的页面构建的。

Sumo Paint 是一个基于Flash的RIA, 具有像Photoshop一样的图形编辑功能。

跟桌面应用程序不同，任何一个网页的互动往往需要重新加载一个全新的页面。而桌面应用程序，在另一方面，有很多更好的用户交互性，因为所有处理都是在用户的机器本身，所以能给以更加无缝的用户体验。

因此，软件开发商开始问自己，“我们产品应该是一个桌面应用程序还是一个Web应用程序呢？”

这一直是一个公平的问题，因为这两种类型的应用程序都具有各自优点和缺点。

桌面应用程序具有流畅的用户交互性，但软件是售出去的，会遇到发布和更新的问题。

Web应用程序，另一方面，很容易从网上获得，摆脱相关的软件发布和更新的问题，但在用户交互性体验非常差。

因此，怎么样才能两全其美呢？

RIA就是两全其美。RIA通过网络发布，有非常丰富的用户交互。得益于Ajax的出现，一个无需刷新就可以发送服务器请求的网络应用的方法，新技术出现，加入了RIA的运动。

基于这些技术出现了一些框架，帮助开发人员构建和部署富网络应用程序，如JavaScript库，ICEfaces，Adobe Flash 4（Flex 3前身），微软Silverlight，以及HTML5的。

让我们来一个个探讨RIA的框架。

网络应用的JavaScript库

JavaScript库，例如 jQuery和MooTools 是首批技术之一，可以真正的帮助部署流畅和互动的富网络应用。它们提供通过杠杆客户端脚本来处理前端接口功能的RIA框架。它们是一些基本的 Javascript文件，由一些有用的，经过跨浏览器测试功能的集成。可以使用Ajax，以及处理普通的基于用户驱动事件的交互，如显示和隐藏内容。

目前最流行的有jQuery（尤其是使用jQuery UI），MooTools，YIU（雅虎用户界面库），以及EXTJS。这些库包括RIA组件，如网格，图表和复杂的表单元素，以及处理Ajax的工具。最引人入胜的是，大部分网络开发的JavaScript库都是开源的。

如果你不想购买一个集成开发环境（IDE），但仍希望在自己的网站绚丽而专业的RIA功能，JavaScript库是一个很不错的选择。

使用JavaScript库的网站有Google，Digg，雅虎，亚马逊，微软，Twitter，以及Best Buy。

ICEfaces

ICEfaces是标准的JavaServer Faces（JSF）的框架的扩展，旨在去除方程中的JavaScript从而简化程序员的工作流程。换句话说，ICEfaces通过Java应用接口为你处理了所有的JavaScript/Ajax。通过删除这些自定义JavaScript函数的复杂引入，大大简化了创建富网络应用的任务。

如果你的团队主要成员是Java开发人员，或者如果你的网络应用程序不需要其它ICEfaces没有的复杂组件，又或者如果你的网络应用程序是事件驱动的，那么使用ICEfaces是很好的选择。如果你的网路应用是事件驱动的，请确定你已经了解ICEfaces不提供真正的“服务器推”技术的，HTML5，Flash Builder 4和Silverlight都支持的。不过，相应地ICEfaces使用长轮询的方法来模拟服务器推技术。

使用ICEfaces的网站有波音，美国航空航天局，联合太平洋公司，T-Mobile，以及美国银行。

Adobe Flash Builder 4

Flash已经出现了很长一段时间，但是用使用Flash来构建整个网络应用十分麻烦，直到Flex的引进，这是Flash的一个扩展，提供RIA网络组 件。

Adobe Flash Builder 4最令人兴奋的是它的跨平台和跨浏览器特性，允许程序在所有的操作系统和所有的浏览器上以同样的方式运行。相比于JavaScript，浏览器有不同的 JavaScript引擎管理和处理的代码，而Adobe的Flash只有一个引擎，用户通过Adobe Flash浏览器插件来安装（通常的情况是他们有了）。

Flash Builder 4 应用之所以能如此，因为它们已经嵌入到HTML页面，这意味着浏览器本身并没有对应用程序的性能有什么影响。这意味着你如果你乐意， 你还可以在IE6上运行最复杂的网络应用程序。（这当然简单，因为Flash插件/引擎经常会更新，因此只是稍微依赖于用户插件的版本）。

这些应用通常是伴随着服务器端处理，比如一个Java后端处理，而且需要Flash Builder 4IDE做开发。

如果你的团队主要是Java开发（因为搭配Java运作良好），或者你的应用程序使用事件驱动的构架，可以选择Adobe Flash Builder 4。

使用Flash作为网络应用程序的网站有Mint.com，Flickr和Hyundai。

Silverlight

Silverlight是基本上微软版本的Adobe Flex /的Adobe Flash。现在已获得了一些吸引力，但似乎并没有达到的Adobe Flash的普及程度。

Silverlight应用程序明显约束于.NET的后端，因为它是微软的产品。这意味着，你不得不 Silverlight /.NET 和Adobe Flex / [一些服务器端脚本，如PHP] 之间整合考虑。

如果你的网络应用需要复杂的图形，或者如果你的团队主要是.NET开发人员，又或者如果你的应用程序使用事件驱动的架构，那你可以选择 Silverlight。

使用Silverlight的网站，如Netflix。

HTML5

HTML5的是RIA运动中的最新发展。 HTML5，在本质上是HTML4，JavaScript，CSS，Javascript代码库以及Falsh的最优合并，利用API模型成为一个单一规 范。 HTML5的是一个开放的技术，这意味着不会有单一的主管团体如Flash的Adobe或Silverlight的微软。

由于HTML5规范还没有完成，IE9尚未发布，要建立产品级的网络应用，你还需要等待一点点时间。

目前，所有主要浏览器除了IE8都支持HTML5。由于IE8的浏览器市场占据了主要部分，在IE9发布之前，HTML5实在难以成为主流。

一旦HTML5得到广泛支持，如果你不想购买和学习的IDE（像Flex和Silverlight框架所必需的），如果你的应用程序使用事件驱动架构，或 者如果你喜欢使用内置的HTML功能和JavaScript API 功能而不是使用第三方JavaScript库，那么使用HTML是很好的选择。

尽管HTML5中可以很好地处理图形，但是使用Flash和Silverlight来处理复杂图形和动画在目前仍然容易/更快的选择。

RIA 的未来

HTML5应用程序是互联网的未来吗？不完全是。只要那些创造性和创新性的网络开发人员还在不断的去创造一些特别的东西，就会总是出现一些新技术可以造出 些HTML5或其他任何网络技术无法完成的神奇的东西。

JavaScript库，ICEfaces，Flash，Silverlight和HTML5的存在首要原因是其创造力和创新性。未来的网络将会由许多 共存的技术组成，就像现在。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 页面输出时一些常用的小技巧
• 使用Adobe Flex 3开发(MMO)大型多人在线游戏
• XmlHttpRequest的串行异步
• RIA特别专题和Flash开发平台工具下载资源发布
• Ajax跨域访问解决方案
• 24 个漂亮的个性化 HTML 表单技术
• 10个绝妙的HTML5，CSS和Javascript示例
• 10个基于 JavaScript 的 WYSIWYG 编辑器
• 10个关于Ajax的IT人需要知道的事情
• 10个Google 推动的 AJAX 库 API

Feed enhanced by Better Feed from Ozh

第一重 初级程序员
Flex初级程序员是指经过一周到一个月的间歇性学习(自学)和模仿而形成的上手级开发者。这个定义主要从投入精力和学习路线来规定的，这个层次 的程序员往往是出于一时的爱好或者项目的需要而进入改领域的学习。其特点是能做一些简单的应用，能搞清楚flex应用的开发过程，使用 flexbuilder能拖拽出一个界面来，并能写简单的AS脚本，从而完成一个基本的Flex应用。这类程序员从此就再没有深入研究，而且没有完整的看 过官方的所有开发文档，也没有体会到Flex/RIA开发的思想，基本上就在该领域停滞不前了。

第二重 中级程序员
该阶段的程序员是指超过2个月的学习(在正规的培训中心参加过flex培训，比如国内的http://www.flexedu.com)并完成至少一个项目的进阶级开发 者。位于此阶段的Flex开发者通过扎实系统的文档学习并通过实战的演练，对 Flex整个框架有很全面的认识，能够熟练使用IDE进行MXML/AS开发RIA应用，对程序结构、程序运行流程、对于flex应用与传统web应用的 区别都有很好的理解，能独立的实现flex为前端技术的web应用。这类程序员注重基础、细节，尤其是flex应用与web应用与桌面应用的差别与联系， 而且善于钻研技术，非常具有软件开发的潜力，而且只需加以时日便可进一步上升成为高手。

第三重 高级程序员
Flex高级程序员是指连续从事一年以上企业级Flash/Flex应用开发并在项目中承担主要角色的高手级开发者。这个层次的修炼很不容易，首 先需要自己不断的努力，而且最难办到的是能在一个长期使用Flex技术的公司(team)中持续锻炼。处于这个层次的Flex程序员往往对企业级RIA架 构比如 cairngorm非常熟悉，而且能对各种RIA架构做出自己的评价。对新项目的功能和模块、组件的划分都有清晰的认识，对于Flex应用的方方面面例如 幕后的运行过程、显示结构的模式、事件流顺序、组件的制作手法、程序规模和性能的控制都有深刻的理解。对于这个层次的flex程序员来说，自定义一个通用 的组件是很容易的事情，因为他对于Flex的组件体系甚至组件的源码他都了如指掌。夸张的来说，他们写flex应用很少看语法参考，写代码甚至可以在记事 本里完成。这样的flex开发者在全球都很少，属于高手中的高手，是大公司争强的对象，也是广大flex开发者努力的目标。

第四重 资深程序员
资深Flex程序员是指有着多年的RIA开发经验(超过10年的软件行业从业时间)并有广泛的软件开发相关技术背景的大牛级人物。这样的人物，只 要是你接触Flex这一领域就能听到他的大名，他们的博客是众多Flex开发者的圣殿，他们的声音就是整个社区的福音和号角，他们的著作是我们的圣经，这 样的人物常常会在大型活动比如360Flex或者adobe MAX大会上经常出现，他们代表着这个领域的前沿和潮流。这样的程序员往往是Flex技术进步和发展的原动力，是我们Flex开发者努力一生的目标，甚至 是我们的偶像，比如Ted Patric以及他的博客上的Disruptive Evangelism(突破性的传道者)，总共才11个人(都是Adobe公司的)。

作为一个普通的Flex开发者，您是那一级呢，离最高境界还有多远呢?

作者: jian9min9

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 使用Adobe Flex 3开发(MMO)大型多人在线游戏
• 从程序员的角度切入Flex
• RIA特别专题和Flash开发平台工具下载资源发布
• 12条有用的Flex代码

Feed enhanced by Better Feed from Ozh

• 虚拟座谈会：RIA和Ajax技术的现状与展望
  
• 争论又起，RIA的未来在哪里？
  
• Silverlight、JavaFX、Flex/Flash技术比较
  
• Java程序员学习Flex和BlazeDS的十三个理由
  
• RIA框架大调查
  
• InfoQ案例研究：纳斯达克市场回放
  
• 选择你的Ajax框架
  
• 纽约时报放弃WPF/Silverlight，转向Adobe AIR
  
• RichClient/RIA原则与实践（上）（下）
• 构建Flex应用的10大误区
  

本专题所提供的Flash开发平台部分工具下载资源包括：

• Flash Catalyst：一个无需编码即可快速创建用户界面的新型专业交互设计工具。（高速下载）
• Flash Builder：包含了三个主要主题：开发人员生产率，设计人员-开发人员工作流和以数据为中心的应用开发等。以及Flex 4框架等。（高速下载）
• Flex 4 SDK：支持开发人员创建Flex应用，还支持设计人员使用Adobe Flash Catalyst创建交互式设计。（高速下载）
• Adobe AIR：使您能够始终拥有您喜爱的 Web 应用程序（高速下载）

© 我想网 Akon 所有 , 2009. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 使用Adobe Flex 3开发(MMO)大型多人在线游戏
• 使用框架建立富联网应用
• 从程序员的角度切入Flex
• 页面插入Flash Object完全攻略
• 乔布斯:关于Flash的几点思考
• 为设计师和开发者准备的16款Adobe AIR程序
• WordPress 的 Flash 时钟插件
• Flex程序员的四重境界
• Flash游戏引擎列表
• 4个轻量级的Adobe阅读器替代软件

Feed enhanced by Better Feed from Ozh

大型多人在线游戏(MMO)技术已经涉足到各种软件形式中了.当我们还在思考MMO时,多人游戏已经使很多玩家能够实时连接进行合作与竞争。(见图表1). 魔兽世界在通过DVD-ROM 订阅的MMO游戏行业中处在黄金标准的位置，但是，通过Abobe-flash平台，我们可以利用魔兽的一小部分时间和预算来发展一个自由来玩的通过浏览器的类似于WAKFU和 Small world 的MMO游戏。

Figure 1. Some leading MMO games.

在这篇文章中,我旨在比你想象的少的时间内告诉你制作一个完整的(并且简单的)大型在线游戏的经验。同样，我会给你一些示例代码以使你能掌握这种高水平的思想。这些例子仅限于FLEX3的浏览器版，但是其中好多的信息都是与其他技术的应用程序开发者相关的。包括Adobe Flash CS4以及Flex 3 AIR桌面应用程序。

我希望这些能给大型在线游戏的入门者做一个介绍，同时，也让高手们获得一些知识。

什么是MMO?

在超过十年的时间里，大型多人在线技术已经成为了桌面PC游戏发展中的主流。 在最近几年中，我们发现它在浏览器端也很流行。一个MMO应用程序是一种这样的软件，它能实时连接很多人，同时，一个人的操作动作会马上影响到其他的人。就像在聊天窒里，当你打出一则消息时，接受者会马上看到这则消息一样。当你攻击一个敌人的时候，这个敌人会被打，或者挡住攻击并且反攻。在MMO最普通的形式中，一个MMO应用程序是基于团队，同时看重个人体验与人机交互的应用程序。MMO有好多种：角色扮演游戏 (MMORPGs), 实时战略游戏(MMORTS), 第一人称射击游戏 (MMOFPS), 基于浏览器的大型在线游戏 (BBMMOGs)以及其他更多。

MMORPG是非常流行的，或者仿真游戏。一个仿真实世界的游戏是通过互联网接口联接很多人制作出仿真世界的游戏。仿真游戏通常具有六个特点:

• 共享空间:这是个可以允许多人同时参加的世界。
• 图形用户界面:这个世界描绘出真实的空间距离, 从二维的图片转变成三维的环境。
• 实时:相互操作都是实时发生的。
• 相互影响:这个世界允许用户更改、发展、建造、或者提交自定义的内容。
• 一直运行:无论单个用户是否登录，都不会影响到整个程序的运行。
• 社会化的/团体化的:这个世界允许并且鼓励各种社团形式，如团队、行会、俱乐部、集团、同居、邻居等等。

随着计算机硬件性能与技术的快速发展，MMO游戏已从桌面程序发展到网络程序。这篇文章的重点在后者。

MMO游戏是商业性的

MMO游戏非常流行。随着越来越多的游戏玩家通过宽带来上网，越来越来的因特网用户开始尝试MMO游戏，使用人数正快速的增加。吸引人的WEB2。0以及RIA特性使这些游戏在游戏玩家中快速的流行起来。用户在空闲时间中都沉浸在这些游戏中，哪里有用户，哪里就有商机。但是传统的商业游戏沉浸于在购买时加入一系列的费用。MMO游戏则是要交付不断增加的用于发展与维护的费用，并且由于在线玩的原因会带来其他的商业机会。游戏开发者与发行者将通过多种方式从成功的MMO游戏中获利。发行者通常会选择以下几条:

• 订阅:用户每月资付一定钱以能够继续玩，这是桌面发展中的获利方式，并且曾经一度成为最流行的获利方式。
• 广告:在基于浏览器的游戏中，我们可以发现，游戏发行商会在游戏场景上方放置一个banner广 告，这些广告链接到普通网页，有些广告会被融入到游戏场景中。举个例子，你在游戏中的角色会被一个高速公路广告牌指引，而这个广告牌上显示的将会是真实的 广告信息。除了这种方式，也可能是下面的两种方式：用户游戏是不需要预选支付费用的。这使观众面得到最大化。由于因特网与Mmo游戏固有的连通性，新广告可以在游戏体验中轮换（出现），而且韵律可以决定每一个广告可以吸引多少眼球。
• 虚拟物品的销售:虽然玩游戏可能不要钱，但是用户可以通过付现金购买虚拟装备来增加角色的属性或者提高游戏的优势。
• 虚拟货币的销售: While game play may be free, users pay real-world cash to credit their account with virtual currency. The currency is then used to perform game transactions for things like advancing their character growth or purchasing virtual items.
• Sponsorships: Real-world companies who wish to have their brands integrated into the game pay the publishers. An example is a clothing company who wishes to include virtual clothes in the virtual world.

Surely, as the audience for MMO gaming expands, advertisers will become increasingly creative with how they monetize the games in this industry.

策划制作一个MMO游戏

在规划的互动项目时，重要的是要有令人信服的创造性以及使用匹配的适当技术实现您的想法以及满足您的目标受众。在下面的章节中,我将提供整体的MMO制作的意见以及可用技术的讨论。

图 2. RIP 游戏LOGO.

举个例子,让我们假设我们的目标市场是8-10岁大的男孩与女孩，次目标市场是具有童心的成年人。我制作一个叫做RIP的简单的，完整的FLEX游戏以供我们来讨论一下。它根本不是一个完整的工程，但它的用处是为了让我们交流一下MMO游戏策划与开发的思想。

角色与故事

除了挑战与美丽的画面来吸引用户，增加角色的难度是保持MMO游戏长期有人玩的一个关键。人物和故事是留住你的用户群的两个关键因素。

这里有一些提示关于设计MMO游戏时要考虑的:

• 独一无二:你认为伤害你的市场可能会节省您的品牌差异。如果您选择以超人的主题，因为流行的市场调研告诉您，您的用户群喜欢这样的主题，你同时要做好有半打竞争对手也想到了同样的方式的准备。
• 让你的角色成长:想想RPG游戏。里面的角色有许多特性（如强度，健康，速度和情报） ，这些都随着经验的增加以及学习新的能力而增加。
• 让你的游戏情节成长:请记住，如果您希望您的MMO游戏产生持久的寿命。就要把您的内容设计的更像是正在进行的电视节目而不是一个孤独的卖座电影情节。您的开始部分一定要设置很多的铺垫，一定要打下好的基础。

对于RIP协议，我使用一个友好的鬼主题（见图3 ） 。当我创建的，我无法找到一个友好的以鬼为主题的MMO游 戏。所以这是独一无二的。鬼魂可以有许多人的特性以及也可能产生一些超能力。这就使角色的特性可以增长。当我想到一个鬼的世界，我想几件事情：新的鬼会定 时出现，一个梦幻般的世界上任何事都是可能的，天堂与地狱的主题中角色可以死一遍又一遍。这些想法应该促进一个长期，丰富的故事情节。

Figure 3.角色样子.

随着人物和故事情节的确定，您可以让作家和艺术家开始调查所需要的技术。

客户端与服务器端技术

MMO游戏技术，主要有两个方面要考虑：客户端和服务器端。您已完成的项目结合了这两种技术。客户端技术（即Adobe Flash Player，AIR，等等）将做一切工作量大的事情-它负责前台表现以及鼠标和键盘的输入。服务器端的技术负责在每个客户端之间进行通信。

从大处到细节，技术上有许多问题都要考虑。例如，什么类型的计算机不能使用您的产品？ Mac或PC或两者都可以？它是桌面应用程序还是运行在Web浏览器？它将是一个三维的或二维的？它要运行在怎样的软件平台上?

If you are interested in creating casual online multi-player games without the headache of hosting your own servers, consider checking out the Adobe Flash Collaboration Service. 对于这项工作，并与经济的考虑，我们使用的Adobe Flash平台开发并使用2D技术将此游戏部署在网络浏览器。我们使用了Adobe FlexBuilder作为我们的开发环境。我们结合客户端和服务器的技术，在客户端使用Flash Player和在服务器端使用ElectroServer 4。与我们的客户端选择的Flash Player ，我选择使用了一个现成的服务器技术，其中包括一个ActionScript 3特定的辅助性文件，因为这将有助于加快发展的速度。除了ElectroServer 4 ，一些重要的服务器端的选择，支持ActionScript 3还包括Adobe Flash Media Interactive Server 3.5和SmartFoxServer 1.6。如果你有兴趣创造休闲多玩家游戏并不用为托管自己的服务器头痛时，可以考虑Adobe Flash Collaboration Service。

我选择ElectroServer 4 ，主要是因为它是稳定，易于开发，免费（最多20个用户） 。这意味着你可以开始一个新项目或测试而不用付费。此外， ElectroServer 4具有可扩展性，帮助文档丰富，并得到广泛支持。

您可能还问我为什么选择二维而不是三维。虽然最新的Flash Player 10中有一些令人兴奋的3D能力，这是仅限于移动二维物体在三维空间或使用软件提供的解决方案（其中提供比硬件提供的解决方案还慢的动画） ，如Papervision3D 。我很期待Flash Player中3D的未来 ，但是据我的经验， Flash平台目前不是强大的3D需求的最好的选择。

开发

现在，我已决定好了友好鬼主题故事和人物，Flash Player作为客户端，并且ElectroServer 4作为服务器端，我准备开始开Flex Builder中进行开发。对于用户界面，我们将界面分块，以满足特定用户的需求（见图4 ） 。每个地区获取用户输入，并作出对应反应：

• 连接:允许用户登录和登出程序.
• 用户列表:显示目前在线的所有用户。
• 聊天记录:显示游戏的聊天记录.
• 聊天输入口:允许用户向游戏中的当前用户发送一则消息.
• 游戏界面:显示了游戏世界，由背景艺术和用户角色组成。用户通过控件角色的位置来控制角色进行移动。

Figure 4.粗略布局的组成部分。

创建组件

我们将按照图4来创造Flex组件。对于每一个组成部分，我们必须考虑到用户的需要，来决定UI元素，以满足这些需要，并充分利用Flex中的MXML来轻松地创建布局。在Flex开发过程中,这是最基本的，所以让我们来看看一个简单的例子。

如同任何短信应用，聊天输入在应用程序的布局的底部（见图5 ） ，用户可以输入文字信息，并将其提交到聊天记录中以供其他用户看到。在参与者之间这是主要的通信方式。

Figure 5.聊天输入部分

TextInput与Button组件放在一个Panel组件中, ID属性是用来给主程序中相关功能控件进行编号，当用户点击chatSend_button实例，在chat_textinput实例中的任何文字，将传递给其他玩家。在下一节中，我们将看到这个信息是如何传递给服务器。

Figure 6.聊天输入口的MXML.

客户端-服务器端 代码

我们继续建立我们的组成部分放下一些客户端与服务器之间的通讯。开发多人游戏与开发单机游戏的根本差别在，当用户交互而产生的任何东西都不应该在屏幕上进行修改。所有的游戏客户端（游戏运行的某个特定的玩家） ，包括提供了输入口的玩家，应当等待回信当服务器说“玩家1已经发出了一个聊天信息” ，例如,当玩家1的客户端发送请求到服务器，服务器发送响应给每一位客户。只有到那时，屏幕才作出更新。当然，玩家1的客户端必须随时准备处理回应，并且当客户端发送请求时,其可以随时随刻的更新。玩家1使用Client (A)发出一个聊天信息请求和处理响应（见图7 ） 。发出的信息包含足够的信息以供所有客户作出适当的反应。在这种情况作出的反应很简单地放入到聊天记录中以供所有用户可见。

Figure 7.客户端-服务器端-客户端信息流

在这个游戏中，有5个类型的请求/响应配对（见图8 ） 。所有与服务器端的交互是通过一个叫作称为ElectroServer的ActionScript 3对象来实现的。当程序加载连接服务器与加入到房间中时，该组合被显示。所有文字聊天和所有玩家的操作动作（如位置的变化，进攻，防守，等等）用这种方式进行发送。

当PublicMessageRequest仅发送文字，它通常是作为一个聊天信息。但不仅仅是文字是可能的。一个消息也可以发送一个EsObject对象。这是一个通用的ActionScript 3对象。开发包装EsObject的有用特性-例如，玩家在游戏中移动的新的X和Y的位置。更复杂的游戏功能较重使用EsObjects并且封装更多的数据。创造复杂的游戏而不通过EsObjects传送太多的数据是一种艺术。发送较小的信息将有助于游戏反应速度。最后配对显示如何断开客户端从服务器室当用户结束他或她的游戏。

Figure 8. RIP的请求/响应对.

技能, 皮肤以及样式

因为Adobe的Creative Suite 4产品之间的合作，整合写好的控件到Flex项目是很简单。这是使用FLEX一个主要好处。如果仔细规划高效率的工作流程，开发人员和设计人员，可以对项目以最少的冲突。

对于RIP，我开始铺设应用程序的MXML而平面设计师编写CSS来定义颜色和字体。我继续编写角色的移动和交互而艺术设计师用Flash制作背景和角色。我们三人几乎没有中断工作，因为RIP参考可见的元素进行开发。

在Flex Builder中主要有两种类型的视觉效果：造型和外观。在程序中，造型决定基本色泽和文本显示属性。出色的（但还远远没有完成）的CSS兼容性的Flex允许一个CSS文本文件来定义样式属性。艺术团队编辑和保存每个样式的变化。一个例子是panels的背景颜色梯度和各种字体的处理（见图9 ） 。

应用程序中包括皮肤制定与动画的设计。在RIP中，应用程序中嵌入一个包含资源的SWF文件。界面小组利用Adobe Flash CS4专业版重新发布此SWF以更新每个皮肤。每一次的Flex项目是重新编译，发布的游戏以程序上与创造性上作出修改。一个皮肤制作的例子就是RIP LOGO或鬼魂的动画角色设计（见图9 ） 。

Figure 9.完成游戏的风格和完整的皮肤。

现在我们有了一个坚实的，抛光建立的游戏， 我们都愿意尝试一下。虽然尚未针对许多用户优化，游戏应处理几十个屏幕。加入有趣的是容易的。单击连接并且一个独特的彩色鬼魂显示在屏幕上。输入文字信息 进行交流，然后点击游戏中的任何地方，来控件你的游戏角色。更大的游戏可以扩大到包括化身属性，如经验和速度，以完成任务，库存物品收集，和更多的世界来 探索。

下一步

除了发展自己的游戏，有两个重要的辅助因素：在线整合您的应用程序并规划项目的维护工作。

整合

你的开发周期即将走到尽头时，您需要在线整合您的应用程序。在开发过程中，你可以在您的桌面上运行的一个ElectroServer实例，并直接与出版的SWF文件交互。只需打开两个或两个以上的游戏SWF文件在您的桌面上，以测试多个用户。这个工作流程可以快速发展。

一旦你已经准备好您的应用程序的在线测试，请执行下列步骤：

1. 在Web服务器上安装和运行的一个ElectroServer实例。
2. 您的游戏配置要求在线实例，而非您的桌面实例。
3. 浏览网页，其中包含您的SWF文件，并开始播放。打开两个或两个以上的窗口，以该网页来自同一台式电脑或台式机，以测试不同的多个用户。

请记住，对大多数商业应用，你还需要某种玩家匹配系统-通常称为lobby， 这样，用户就可以找到朋友，并开始游戏。您可以建立一个lobby到您的游戏或使用外部的。您可以使用一个精心设计的外部lobby作为入口成多个MMO游戏，所以当你部署多人游戏你不需要重新发明车轮。

维护

除了典型的应用系统维修，包括错误修正和功能要求， MMO游戏需要更多的行动，不断推出服务后。重要的是要考虑推出网络游戏项目作为一个完整的游戏所需要的。许多商业模式的网络游戏应用受益于前面提到的长期用户。

用户全神贯注维持数月或数年，需要坚实的社会管理和定期的内容更新。大部分用户将享受来自与其他玩家互动。新玩家加入后引起的社会动态与戏剧性发展将捕获用户的注意力。这是网络游戏类型的游戏开发商一个最大的优势。然而，有很大的竞争来自其他的MMO游戏，以及用户与用户共享，可享受其他许多游戏。为了使您的游戏令人兴奋并保持新鲜，并确保您的用户继续参与，建立一个维持战略去产生更多的角色，游戏关卡，和情节随着时间的推移。由于开发商往往不充分认识维护要求，因此没有和预算范围内保持均衡，保养不善是导致MMO游戏死亡的最大原因。

结尾

MMO游戏结合最好的Web 2.0和RIA方法为用户提供经验。它们可以成为令人兴奋的项目开发和有利可图的事业的游戏出版商。

建立成功的MMO游戏需要认真规划，包括开发角色和故事应该是独一无二的，并允许发展，建设一个有吸引力的视觉设计，并选择适当的客户端和服务器的技术力量去实现构想。

开发包括用户界面设计，客户端服务器通信，游戏逻辑，艺术和皮肤。我们相信的Flex Builder是一个理想的客户端的技术的选择，因为它灵活的开发环境。再加上Adobe公司的Creative Suite 4 ，Flex Builder将使你从一开始就顺利地构建您的团队协作。

如果您计划真正特别的东西，制定严密，并保持您的项目启动后运行很久，你就会使用Flex 3创造一个成功的MMO游戏。

致谢

我特别感谢作出贡献的艺术家。Warren Lee创造了风格和游戏艺术和Bill Coons的BillCoons.com制作了皮肤与界面图形设计。

© 我想网 Akon 所有 , 2009. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• RIA特别专题和Flash开发平台工具下载资源发布
• 使用框架建立富联网应用
• 从程序员的角度切入Flex
• 页面插入Flash Object完全攻略
• 乔布斯:关于Flash的几点思考
• 为设计师和开发者准备的16款Adobe AIR程序
• WordPress 的 Flash 时钟插件
• Flex程序员的四重境界
• Flash游戏引擎列表
• 4个轻量级的Adobe阅读器替代软件

Feed enhanced by Better Feed from Ozh

代码结构：

<ul><li>菜单一</li><li>菜单二</li><li>菜单三</li></ul>

通常我们会li加css

border-right:1px solid #000

这样最后一个li也有右边框，是多余的，只能为最后一个li添加一个class来区分(左边框的情况类似)

而demo1中我们为li加css

ul{overflow:hidden;}
ul li{float:left;list-style-type:none;border-left:1px solid #000;padding:0 20px;margin-left:-1px;}

ul的overflow:hidden和li的margin-left:-1px是为了让最左边li的左边框隐藏起来，这样每个li都可以用一样的样式，便于给li循环

2 .压缩图片

通常web页面中从后台传的图片和设计师设计的图片大小不一样，这个时候需要按照原图长宽的比例进行压缩，不能超过设计师设定的图片大小。

initial是原始图片大小;goal是压缩后的图片大小;max是最大值

当原始图片长宽有任意一个大于对应的最大值或者两个都小于最大值时对图片大小进行压缩

其它情况不压缩

function imgSize(element,maxWidth,maxHeight){
    $(element).each(function() {
        var initialWidth = $(this).attr("width");
        var initialHeight = $(this).attr("height");
        var goalWidth = initialWidth;
        var goalHeight = initialHeight;
        if (initialWidth > maxWidth || initialHeight > maxHeight) {
            if (initialWidth / maxWidth >= initialHeight / maxHeight) {
                var goalWidth = maxWidth;
                var goalHeight = (initialHeight * maxWidth) / initialWidth;
            }
            else {
                var goalWidth = (initialWidth * maxHeight) / initialHeight;
                var goalHeight = maxHeight;
            }
        }
        else if (initialWidth < maxWidth && initialHeight < maxHeight) {
            if (initialWidth / maxWidth >= initialHeight / maxHeight) {
                var goalWidth = maxWidth;
                var goalHeight = (initialHeight * maxWidth) / initialWidth;

            }
            else {
                var goalWidth = (initialWidth * maxHeight) / initialHeight;
                var goalHeight = maxHeight;
            }
        }
        $(this).attr("width", goalWidth);
        $(this).attr("height", goalHeight);
    });
}

3 .布局

（图一） （图二） （图三）

要实现如图的这种布局，可以用三个并列关系的div加上样式就可以实现

代码结构：

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>

这种代码结构非常灵活，可以仅仅通过样式达到多种布局效果

图一(demo3.1.zip)的css：

<style type="text/css">
	body{margin:10px;padding:0;}
	div{background:#ccc;}
	#first{float:left;width:100px; height:150px}
	#second{clear:left;float:left;margin-top:10px;width:100px;height:150px}
	#third{margin-left:110px;_margin-left:107px; height:310px}
</style>
/*_margin-left:107px;为了ie6多出的3像素而写的hack*/

图二(demo3.2.zip)的css

<style type="text/css">
	body{margin:10px;padding:0;}
	div{background:#ccc;}
	#first{float:left;width:100px; height:300px}
	#second{float:right;width:100px;height:300px}
	#third{margin:0 110px;_margin:0 107px; height:300px}
</style>
/*_margin:0 107px; 为了ie6多出的3像素而写的hack*/

图三(demo3.3.zip)的css和js，鼠标hover时当前模块放大比例

<style type="text/css">
	body{margin:0;padding:0;}
	div{background:#ccc;position:absolute;}
	#first{width:100px; height:150px;top:10px;left:10px;}
	#second{width:100px;height:150px;top:170px;left:10px;}
	#third{height:310px;top:10px;left:120px;width:200px;}
</style>
<script type="text/javascript" language="text/javascript">
	function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）
		var obj=document.getElementById(id); // 获取元素对象值
		var dW=obj.clientWidth; // 获取元素宽度
		var dH=obj.clientHeight; // 获取元素高度
		obj.onmouseover=function(){ // 鼠标移入
			this.style.width=dW*x+"px"; // 横向缩放
			this.style.height=dH*y+"px"; // 纵向缩放
			this.style.backgroundColor="#f00"; // 设置调试背景
			this.style.zIndex=1; // 设置z轴优先
		}
		obj.onmouseout=function(){ // 鼠标移出，设回默认值
			this.style.width="";
			this.style.height="";
			this.style.padding="";
			this.style.backgroundColor="";
			this.style.zIndex="";
		}
	}
zoom("first",1.25,1.25);
zoom("second",1.25,1.25);
zoom("third",1.25,1.25);
</script>

4 .获取浏览器可见区域的宽高，通用方法：

//以下的方法对于很多浏览器都适用
function windowHeight() {
    var windowHeight;//最后传出的值
    if (self.innerHeight) { // 除了IE以外的浏览器
        windowHeight = self.innerHeight;
    }
	else if (document.documentElement && document.documentElement.clientHeight) { /* IE6 浏览器 */
        windowHeight = document.documentElement.clientHeight;
    }
	else if (document.body) { //其他版本的IE浏览器
        windowHeight = document.body.clientHeight;
    }
    return windowHeight;
}

function windowWidth() {
    var windowWidth;//最后传出的值
    if (self.innerWidth) { // 除了IE以外的浏览器
        windowWidth = self.innerWidth;
    }
	else if (document.documentElement && document.documentElement.clientWidth) { /* IE6 浏览器 */
        windowWidth = document.documentElement.clientWidth;
    }
	else if (document.body) { // 其他版本的IE浏览器
        windowWidth = document.body.clientWidth;
    }
    return windowWidth;
}

5 .淘宝的简易框架(demo5.zip)

偶然的机会看到了淘宝的这个框架，写得很不错，玉伯的css也非常工整

圆角的切图也挺有意思的，值得我去学习效仿。

6 .滚动消息(demo6.zip)

上下往返滚动的消息一般常出现在公告栏或者新闻栏，以前比较喜欢用Marquee标签来实现，不过Marquee实现的滚动会有头尾不能连接起来而导致消息栏出现短暂的空白的缺陷，而且w3c也不支持Marquee标签。所以用js来实现更完美一些。

function scroll(element, delay, speed, lineHeight) {
	var numpergroup = 5;
	var slideBox = (typeof element == 'string')?document.getElementById(element):element;
	var delay = delay||1000;
	var speed=speed||20;
	var lineHeight = lineHeight||20;
	var tid = null, pause = false;
	var liLength = slideBox.getElementsByTagName('li').length;
	var lack = numpergroup-liLength%numpergroup;
	for(i=0;i<lack;i++){
	slideBox.appendChild(document.createElement("li"));
	}
	var start = function() {
		 tid=setInterval(slide, speed);
	}
	var slide = function() {
		 if (pause) return;
		 slideBox.scrollTop += 2;
		 if ( slideBox.scrollTop % lineHeight == 0 ) {
				clearInterval(tid);
				for(i=0;i<numpergroup;i++){
					slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);
				}
				slideBox.scrollTop = 0;
				setTimeout(start, delay);
		 }
	}
	slideBox.onmouseover=function(){pause=true;}
	slideBox.onmouseout=function(){pause=false;}
	setTimeout(start, delay);
}
四个参数分别是:操作对象， 停留时间，相对速度（越小越快）,每次滚动多少(最好和Li的Line-height一致)。

© 我想网 Akon 所有 , 2009. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 24 个漂亮的个性化 HTML 表单技术
• 10个绝妙的HTML5，CSS和Javascript示例
• 解密CSS Sprites：技巧、工具和教程
• 表单元素：40个CSS/JS风格和功能技术处理
• 相见恨晚的一些 JavaScript 技巧
• 用css+js控制图片大小的方法
• 前端开发常见图片格式详解
• 八种布局方案改善你的设计
• 使用框架建立富联网应用
• TBCompressor 2.4.2

Feed enhanced by Better Feed from Ozh

System.setClipboard(strContent);

2.复制一个ArrayCollection

//dummy solution( well, it works )

var bar:ArrayCollection = new ArrayCollection();

for each ( var i:Object in ac ){

bar.addItem( i );

}

// fantastic ! //

var bar:ListCollectionView = new ListCollectionView( ListCollectionView( ac ).list );

3.打开一个新浏览器窗口

navigateToURL(new URLRequest(‘http://ntt.cc’), ‘_blank’);

4.刷新浏览器

navigateToURL(new URLRequest(“javascript:location.reload();”),”_self”)

5.关闭浏览器

navigateToURL(new URLRequest(“javascript:window.close()”),”_self”);

6.设置Alert 窗口的背景为透明

Alert

{

modalTransparency:0.0;

modalTransparencyBlur:0;

}

7.取随机颜色

lbl.setStyle(‘color’, 0xffffff*Math.random());

8.清除子串左侧空格

public function LTrim(s : String):String

{

var i : Number = 0;

while(s.charCodeAt(i) == 32 || s.charCodeAt(i) == 13 || s.charCodeAt(i) == 10 || s.charCodeAt(i) == 9)

{

i++;

}

return s.substring(i,s.length);

}

9.清除字串右侧空格

public function RTrim(s : String):String

{

var i : Number = s.length – 1;

while(s.charCodeAt(i) == 32 || s.charCodeAt(i) == 13 || s.charCodeAt(i) == 10 ||s.charCodeAt(i) == 9)

{

i–;

}

return s.substring(0,i+1);

}

10.清除字串左右的空格

public function Trim(s : String):String

{

return LTrim(RTrim(s));

}

11.获取数据类型

getQualifiedClassName(data)

12.生成随机字符串.

private function GenerateCheckCode():String

{

//init

var ran:Number;

var number:Number;

var code:String;

var checkCode:String =”";

//get 4 radom

for(var i:int=0; i<4; i++)

{

ran=Math.random();

number =Math.round(ran*10000);            //get result like 0.1234

if(number % 2 == 0)

code = String.fromCharCode(48+(number % 10));        //0’s ASCII code is 48

else

code = String.fromCharCode(65+(number % 26)) ;        // A’s ASCII code is 65

checkCode += code;

}

return checkCode;

}

© 我想网 Akon 所有 , 2009. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 使用Adobe Flex 3开发(MMO)大型多人在线游戏
• 从程序员的角度切入Flex
• RIA特别专题和Flash开发平台工具下载资源发布
• Flex程序员的四重境界

Feed enhanced by Better Feed from Ozh

程序员关注Flash，不在动画设计方面，而在于应用交互。技术上来说Flex的发明功不可没，什么是Flex呢？

说这个问题之前必须谈谈Flash的，大家通常听说的Flash文件扩展名都是.swf，道理和java的.class是一样的。这个.swf的源文件则是.as(ActionScript)。
而通常设计者所说的Flash制作却是制作.fla文件，这是为什么呢？因为这完全依赖于Macromedia Flash软件，该软件通过可视化地制作动画的帧存储成.fla,然后底层本质上还是转换成ActionScript最后再联编成.swf. 如果愿意，所有Macromeida Flash制作的.fla都可以用actionscript来手写。因此高级flash动画设计师都以会写ActionScript为荣。所以我们说 fla制作工具是actionscript的开发框架，是面向设计者的。

回说Flex，Flex其实是ActionScript的另一个框架，只不过它是面向开发者的，它的出现让Flash与后台数据交互更加简单、开发网络应用更加容易。

Flex之于ActionScript犹如Jsp之于Java

就像学习Java一样，大多数程序员都接受从命令行入门的学习方法，此法让程序员对一门语言知表知里，心如明镜。学习Flex/Flash同样可以采用此思路

I. 安装Flex/Flash编译运行环境：Flex3 SDK
去http://www.adobe.com/products/flex/flexdownloads/下载所有平台下的Flex3 SDK。是一个zip包，下载后简单解压缩到你的硬盘目录，如d:flex，目录结构如下：

%flex_homebin有基本的编译工具amxmlc.bat(类似jdk中的javac)
%flex_homeruntimesplayer 有flash文件的运行工具,本人用的win32平台，理所当然使用上图所述子目录win下的FlashPlayer.exe(类似jdk中的java)
小提示：建议大家把 %flex_homebin和%flex_homeruntimesplayerwin加入到系统path中去！

II. ActionScript文件编译运行

1.编写一个最简单的ActionScript程序，存盘为d:HelloWorld.as，内容如下：

package {
  import flash.display.*;
  import flash.text.*;

  public class HelloWorld extends Sprite{
    public function HelloWorld(){
      var t:TextField = new TextField();
      t.text = "Hello World";
      t.x = 50;
      t.y = 20;
      addChild(t);
    }
  }
}

2. 编译
cmd进入命令行D盘，运行
amxmlc d:HelloWorld.as
在当前目录下生成目标文件HelloWorld.swf

3. 运行
cmd进入命令行D盘，运行
FlashPlayer HelloWorld.swf

运行结果如下：

III. ActionScript文件编译运行
1. 写一个最简单的flex程序，flex程序扩展名.mxml，内容如下

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Button x="30" y="100" label="我们要相信党说的:瓮安事件是黑势力胁迫群众上访" fontSize="12" height="62" width="345"/>
</mx:Application>

存盘为d:hello.mxml
2. 编译
cmd进入命令行D盘，运行
amxmlc d:hello.mxml
在当前目录下生成目标文件hello.swf

3. 运行
cmd进入命令行D盘，运行
FlashPlayer hello.swf

结果如下：

简单乎？另外我告诉大家，HelloWorld.as和hello.mxml我完全是在EditPlus中开发和完成编译运行的。最后如果大家都入了门，开始大的Flash工程项目合作开发，请使用Flex Builder吧

© 我想网 Akon 所有 , 2009. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 使用Adobe Flex 3开发(MMO)大型多人在线游戏
• RIA特别专题和Flash开发平台工具下载资源发布
• 页面插入Flash Object完全攻略
• 使用框架建立富联网应用
• 乔布斯:关于Flash的几点思考
• WordPress 的 Flash 时钟插件
• Flex程序员的四重境界
• Flash游戏引擎列表
• 33个flash载入页面设计分享
• 28个Flash页面进度效果载入(Loading)欣赏

Feed enhanced by Better Feed from Ozh