感谢[银河网络]提供空间
 您现在的位置:首页 综合教程 >> 动漫教程 >> 正文
 
AS+JS的Flash网站无刷新定位技术
本站永久域名:HTTP://WWW.51EPSJ.COM   加入日期:2006-11-7 9:17:02   点击数:

第1页 AS+JS的Flash网站无刷新定位技术1

前言

前段时间,我在忙着做自己的FLASH网站,其实是做来玩玩的。当初的想法是,如果能做得好,就可以考虑推广一下。但是我发现我在这方面是个绝对的白痴。然而,我当时也做了最坏的打算,就是还可以拿来给大家写点教程。今天,我算是完成了所谓的第一期工程,就开始实现我的这个写教程的想法。

目前,我要介绍的一些技术应用都在这里。今天本来打算给大家写那个FLASH+WMP播放器的制作的,觉得这个容易引起大家的兴趣。但是恰逢luzhugao正在做商业版的播放器,其代码做法我想也是大同小异,加上火山想了解我站的定位技术,就先把这个写在前面了。
废话少说,开始转入正题吧。

我们知道,在常规的HTML页面里头,点一般的链接,会实现页面的跳转,并且地址栏也跟着变化,用户想将某个页面加入收藏夹,下次打开就直接显示那个页面,而非首页。
然而,FLASH站,特别是只有一个HTML页面的那种站,它们的所谓分页可能就分布在不同的帧,或者是些LOADMOVIE之类的。为了做某些特效,不能让页面发生跳转,发生刷新,导致不管如何点分页面,刷新页面,还是会直接打开FLASH站的所谓首页,在加入收藏夹的时候,也不能定位至当前分页。如果某些时候,看到了好的文章,想直接拷贝地址发给人家,对方也不能看到相应的文章。
开始的想法:同一页面可以带有不同的参数,通过参数传递,就可以让FLASH定位至某一所谓分页。但是,问号后面的参数却不能通过FLASH的AS或者JS来修改。要修改必须重新刷新页面,以致无法实现无刷新定位。
后来在百度里搜索了“修改地址栏内容”,发现如果是"#"后面带锚点的话,是可以通过JS来修改的,并且页面也不会跳转,就连页面的位置也不移动。于是,两边的通讯都实现了,定位技术问题也就迎刃而解。

PS:发现网上说这是AJAX的应用,但是看了下关于AJAX的入门,发现跟那个核心xmlHttpRequest对象拉不上关系,只不过是无刷新而已,怎么说是AJAX的应用呢?

该技术应用的成功案例:

案例一   案例二   案例三

这三个地址里,不同的就是#后面的参数,当surveyID为空值时,页面定位至调查列表。surveyID有值的时候,就定位至对应的调查项目里头。也就是说,通过地址栏#后面的内容,可以准确定位到相应栏目。
另一方面,大家可以测试下FLASH点链接后,再刷新页面的情况,具体操作:

  •  打开 http://hbro.cincn.com/cindex.htm#contents=survey
  • 调查列表出来以后,点任意一个调查项目,此时定位在某一个调查项目了。
  • 刷新页面,你们会发现FLASH最后并没有定位到调查首页的列表,而是具体一个项目了。这正如在论坛帖子列表里点了一个帖之后,刷新后显示的是当前的帖子,而非帖子列表。
  • 在打开某个项目以后,把地址栏拷贝给别人打开,对方看到的也是具体的项目页面,而非首页。

由此看来,单一HTML的FLASH页面看起来无法实现的地址跳转和定位都可以做到了。

由于这个站里头用了别的其他效果,跟这个技术混在了一块,直接以这个为实例,讲起来不方便,没针对性,为此,笔者专门写了个简单的演示文档。大家根据页面的说明进行操作。

第2页 AS+JS的Flash网站无刷新定位技术2

下面介绍这里用到的两个技术点:

1. JS修改,读取地址栏内容

<html>
<head>
<script language="javascript">
function setPos(pos){
  td1.innerText="您现在在第"+pos+"页"
  document.location.hash=pos
}
</script>
</head>
<body onload="setPos(document.location.hash.slice(1));">
<a onclick="setPos(1);" style="cursor:hand">page1</a><br>
<a onclick="setPos(2);" style="cursor:hand">page2</a><br>
<a onclick="setPos(3);" style="cursor:hand">page3</a><br>
<table>
<tr>
<td id="td1">
</td>
<tr>
</table>
</body>
</html>

从中可见,当你点了某个链接之后,document.location.hash修改的时候,地址栏#后面的内容会修改,并且页面的文字“在第几页”也发生了变化,但是页面却没有发生刷新。
人为刷新之后,页面显示的并非你最初打开所显示的内容,而是显示你设置过的内容。因此,只要把hash值传给FLASH,FLASH就可以根据此变量进行定位了。另一方面,FLASH也可以通过FSCOMMAND调用JS设置hash的值,为人为刷新的准确定位打下基础。

2. FLASH与JS的通讯

首先,FLASH可以通过FSCOMMAND调用JS。或者getURL("javascript:func()"),但是后者有些缺点。具体是哪些,有兴趣的可以向我了解。

测试办法

首先,新建一个FLASH文档,在第一帧里写代码

var flashvar=1
fscommand("msgbox",flashvar)

然后,把文件保存一下,文件名为test.fla

接下来,“文件”-“发布设置”,在HTML选项卡里,看到模板的下拉菜单,选择“带FSCOMMAND跟踪的FLASH”接着点“发布按钮”

此时,在FLA文件所在目录下,你可以看到有一个SWF文件和一个HTML文件。用记事本打开HTML文件,找到//place your code here(代码放在此处),写入代码:

if(command=="msgbox"){
  alert(args)
}

测试HTML文件,你会看到一个显示1的提示框出来了。
把flashvar变量改成2,就显示2。
可见,通过此办法,FLASH中的flashvar的值就传给了JS。如果把alert(args)改成document.location.hash=args的话,地址栏就给改了,但是页面没跳转。

接着,就是JS调用FLASH了。测试办法如下:
在该FLASH文档中创建一个动态文本框,变量为jsvar,接着在alert(args)后面加上test.setVariable("jsvar",document.location)
可见,动态文本显示出地址栏的内容了,这是JS传给FLASH的结果。
至于这个FLASH插件的其它方法,可以参考这里

此文章共有21 2

 
编辑:E品视觉 作者:佚名 来源:闪吧
欢迎企业及个人投稿,投稿请Email至:jx_hcs@163.com
打印 关闭
沸城《五感》系列地产广告
[栏目所属:平面艺术]
[加入时间:2008-3-14 9:22:48]
个性超现实人体摄影
[栏目所属:时尚摄影]
[加入时间:2008-3-3 10:03:51]
邱添 logo设计欣赏
[栏目所属:平面艺术]
[加入时间:2008-2-29 12:57:58]
Enel更新能源的领导品牌
[栏目所属:平面艺术]
[加入时间:2008-2-21 17:28:31]
那些男孩教我的事
[栏目所属:时尚摄影]
[加入时间:2008-2-21 17:16:48]
toyoto 导航UI设计
[栏目所属:界面设计]
[加入时间:2008-2-20 19:56:06]
南非网页设计师bl4ckzero作品欣赏
[栏目所属:界面设计]
[加入时间:2008-2-20 19:45:50]
《长江7号》千千静听播放器界面设计
[栏目所属:界面设计]
[加入时间:2008-2-20 19:42:07]
当人体艺术变了颜色 - 银色人体畅想
[栏目所属:时尚摄影]
[加入时间:2008-2-20 19:27:45]
鸟巢----北京2008年奥运会主体育场
[栏目所属:三维设计]
[加入时间:2008-2-20 19:24:57]
相关联接
在线评论
共有评论篇 查看评论
昵称:
* 请各位网友遵纪守法并注意语言文明。
 
免责声明:
站内会员言论仅代表个人观点,并不代表本站同意其说法或描述,本站不承担由此引起的法律责任。所有资料源于作者发布或网友推荐收集整理而来,仅供学习使用,版权归原作者所有,如有侵权,请您联系我们,我们将尽快更正!
转载要求:
作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。
 
站长简介 | 在线留言 | 广告投放 | 网站地图 | 友情链接
我要一品视觉
QQ:7360144[设计自我→新] QQ:272876225[舌ヒ闪] 本站带宽与空间支持:银河网络 视觉设计师交流群:5770736(群1) 43857887(群2)