用opensocial开发sns游戏 (3)

2008-12-21, 18:18

flash、javascript与OpenSocial的结合

我们先回顾一下通过之前的两个教程都完成了些什么。首先在你的GAE项目的路径里应该有三个文件（app.yaml/main.py/index.yaml）和一个static目录（里面含有一个用于定义OpenSocial应用的helloworld.xml文件）。并且这个xml文件可以通过http://yourappname.appspot.com/static/helloworld.xml能够访问。最后是你的51.com上申请的小应用所设置的回调地址指向的上面的这个xml文件。在访问这个应用的时候能够成功的显示Hello world!

在这个基础上，我们将在这个应用中嵌入一个flash文件，同时利用ExternalInterface来通过javascript与OpenSocial的api交互，得到用户及好友信息。

一、嵌入flash。
由于对应用页面的定义都存在于helloworld.xml这个文件之中，需要在这里添加对于flash的引用。首先，为了方便起见，可以利用swfobject这个小工具。swfobject可以很方便的把flash内容嵌入html页面中。下载和说明在这里。当前的版本是swfobject_2_1，在下载zip包解压后会得到一个swfobject.js文件和一些示例，看一下示例里的内容就知道大概是怎么回事了。然后将这个swfobject.js和你想要嵌入的flash的swf文件一起放入static目录。
我们先假设这个flash文件名为helloworld.swf，需要注意的是为51.com开发应用时需要将flash缺省的550*400的大小改为宽：675 高：600，这个大小能够占满整个为应用留出的空间，但又不至于出现滚动条影响使用。
现在static目录中有helloworld.xml、helloworld.swf和swfobject.js这三个文件，接下来打开helloworld.xml，将其中Hello world!这一行替换为一下内容：

<script src="http://yourappname.appspot.com/static/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
swfobject.registerObject("myFlashContent", "9.0.0");
</script>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="675" height="600" id="myFlashContent">
	<param name="movie" value="http://yourappname.appspot.com/static/helloworld.swf" />
	<param name="allowScriptAccess" value="always" />
	<param name="allowFullScreen" value="false" />
	<!--[if !IE]>-->
	<object type="application/x-shockwave-flash" data="http://yourappname.appspot.com/static/helloworld.swf" width="675" height="600">
	<!--<![endif]-->
		<a href="http://www.adobe.com/go/getflashplayer">
			<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
		</a>
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>

第0行：http://yourappname.appspot.com/static/swfobject.js这里记得把yourappname改成你自己的名字。
第2行：myFlashContent，和第4行的id一样，这个名字是任意的，用于以后在javascript中引用这个flash对象。
第4、9行：width、height为flash的宽、高
第5、9行：你的flash文件的url
实际上这段代码可以通过上面下载swfobject的页面中的SWFObject 2 HTML and JavaScript generator v1.2 (HTML version) 来生成。
然后通过appcfg.py update命令将这些改动上传，之后再次打开你在51申请的应用页面，就能够在上面看到你的flash的内容了。

二、通过OpenSocial api得到用户及好友信息
参考OpenSocial Tutorial
在OpenSocial的tutorial中，所有的代码都直接写在xml文件中，为了更加清晰，可以把javascript代码写到一个单独的文件中。在static目录中新建一个helloworld.js文件，然后在xml中添加一行：

0	<script src="http://yourappname.appspot.com/static/helloworld.js" type="text/javascript"></script>

然后我们的javascript代码写在helloworld.js中即可。
在helloworld.js中加入两个函数loadFriends和onLoadFriends：

function loadFriends() {
  var req = opensocial.newDataRequest();
 
  req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), 'viewer');
  //想要得到当前浏览用户的信息
 
  var viewerFriends = opensocial.newIdSpec({ "userId" : "VIEWER", "groupId" : "FRIENDS" });
  var opt_params = {};
  opt_params[opensocial.DataRequest.PeopleRequestFields.MAX] = 100;
  req.add(req.newFetchPeopleRequest(viewerFriends, opt_params), 'viewerFriends');
  //想要得到当前浏览用户的好友信息
 
  req.send(onLoadFriends);
  //设定回调函数
}
function onLoadFriends(data) {
  var viewer = data.get('viewer').getData();
  var viewerFriends = data.get('viewerFriends').getData();
  //将当前浏览用户及其好友分别放入viewer和viewerFriends
 
  friendsNameList = new Array();
  viewerFriends.each(function(person) {//遍历好友列表中的每一个人
    if (person.getId()) {
      friendsNameList .push(person.getDisplayName());//将每个好友的名字放入friendsNameList
    }
  });
 
 
}

其中loadFriends函数是向OpenSocial发出一个请求，请求返回当前浏览用户和好友的信息。当请求被成功处理后通过回调函数onLoadFriends中的data参数得到这些信息。然后新建一个friendsNameList的数组，将每个好友的名字存入这个数组。

三、actionscript与javascript间函数的调用及回调
这时，我们已经写好了javascript的代码，接下来完善flash的部分。
作为学习，你可以在flash中任意建立一个按钮，然后在这个按钮被点击后的函数onButtonClick中加入以下内容：

if (ExternalInterface.available) {
	ExternalInterface.call("loadFriends");
	ExternalInterface.addCallback("onJSLoadFriends", onASLoadFriends);
}

这里为了简便去掉了对于错误的检查和处理。第1行用于调用javascript中的loadFriends函数。第2行用于向javascript开放一个名为onJSLoadFriends的回调函数。addCallback函数的前一个参数是向javascript开放的函数名，第二个参数是actionscript中的一个函数。我们需要自己实现这个函数的内容。
接下来在helloworld.js中加入一些内容：
首先是一个函数，用于在不同浏览器环境下得到指定id的flash：

function thisMovie(movieName) {
	 if (navigator.appName.indexOf("Microsoft") != -1) {
		 return window[movieName];
	 } else {
		 return document[movieName];
	 }
 }

然后在onLoadFriends函数最后加入一行：

0	thisMovie('myFlashContent').onJSLoadFriends(viewer.getDisplayName, friendsNameList);

这里我们给onJSLoadFriends传递了两个参数，一个是当前浏览用户的名称，为String类型，另一个是好友名称列表，是Array类型。
这样，整个流程就完整了：
1、flash中的某个事件发生（例如某个按钮被按下——onButtonClick）后调用loadFriends，同时设定回调函数onJSLoadFriends/onASLoadFriends
2、loadFriends向OpenSocial请求得到当前用户及好友的信息，同时设定回调函数onLoadFriends
3、OpenSocial通过onLoadFriends返回用户及好友信息，然后我们调用onJSLoadFriends，并传入用户名及好友名作为参数
4、onJSLoadFriends将使得onASLoadFriends被调用，同时收到用户名及好友名，这是我们就可以将这些信息用于我们的游戏了。