打印

[服务器端交互] [原创]Flash全站的技术应用(一)——AS+JS的Flash网站无刷新定位技术

前言
前段时间,我在忙着做自己的FLASH网站,其实是做来玩玩的。当初的想法是,如果能做得好,就可以考虑推广一下。但是我发现我在这方面是个绝对的白痴。然而,我当时也做了最坏的打算,就是还可以拿来给大家写点教程。今天,我算是完成了所谓的第一期工程,就开始实现我的这个写教程的想法。
网站地址:
http://hbro.cincn.com/index.html
http://hbro.cincn.com/cindex.htm
因为布局上的失败,两个页面间点哪里跳转大家可能会找不出来,所以,自己没信心,干脆把两个地址贴上来。
目前,我要介绍的一些技术应用都在
http://hbro.cincn.com/cindex.htm
这一页面里。今天本来打算给大家写那个FLASH+WMP播放器的制作的,觉得这个容易引起大家的兴趣。但是恰逢luzhugao正在做商业版的播放器,其代码做法我想也是大同小异,加上火山想了解我站的定位技术,就先把这个写在前面了。
废话少说,开始转入正题吧。

------------------------------------------

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

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

[ 本帖最后由 HBrO 于 2006-8-18 16:56 编辑 ]
本帖最近评分记录
  • mirycat 威望 +3 精品文章 2006-8-18 17:31
我的Blog:
http://www.asv5.cn/blog/
欢迎大家加入Flash侠客群,无论新老手,均一视同仁:25694172
该技术应用的成功案例:
http://hbro.cincn.com/cindex.htm#contents=survey
http://hbro.cincn.com/cindex.htm#contents=survey&surveyID=25
http://hbro.cincn.com/cindex.htm#contents=survey&surveyID=27
这三个地址里,不同的就是#后面的参数,当surveyID为空值时,页面定位至调查列表。surveyID有值的时候,就定位至对应的调查项目里头。也就是说,通过地址栏#后面的内容,可以准确定位到相应栏目。
另一方面,大家可以测试下FLASH点链接后,再刷新页面的情况,具体操作:
1 打开 http://hbro.cincn.com/cindex.htm#contents=survey
2 调查列表出来以后,点任意一个调查项目,此时定位在某一个调查项目了。
3 刷新页面,你们会发现FLASH最后并没有定位到调查首页的列表,而是具体一个项目了。这正如在论坛帖子列表里点了一个帖之后,刷新后显示的是当前的帖子,而非帖子列表。
4 在打开某个项目以后,把地址栏拷贝给别人打开,对方看到的也是具体的项目页面,而非首页。

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

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

[ 本帖最后由 HBrO 于 2006-8-19 18:14 编辑 ]
我的Blog:
http://www.asv5.cn/blog/
欢迎大家加入Flash侠客群,无论新老手,均一视同仁:25694172
下面介绍这里用到的两个技术点:
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>

也可以直接点这里测试:
http://hbro.cincn.com/hbro/cours ... on/js_location.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插件的其它方法,可以参考这里:
http://www.zhugao.cn/info/news_show.asp?id=214

[ 本帖最后由 HBrO 于 2006-8-18 16:53 编辑 ]
我的Blog:
http://www.asv5.cn/blog/
欢迎大家加入Flash侠客群,无论新老手,均一视同仁:25694172

TOP

认证您的手机,获得手机认证图标, 更多手机认证的好处
据此,笔者开始写简单演示文档的制作过程。
1 新建一FLASH文档,保存为main.fla
2 然后,在FLASH里创建四帧,四个均为关键帧,
第一帧为空,写入代码stop();
第二帧放入静态文本Page 1,帧标签为page1,
第三帧放入静态文本Page 2,帧标签为page2,
第四帧放入静态文本Page 3,帧标签为page3,
3 插入一图层,放在最底,里头放上三个按钮。分别写上
on(release){
       gotoAndStop("page1")//跳转到指定的帧标签
       fscommand("setAddress","page1")//这是个FSCOMMAND命令,让FLASH去调用JS函数,函数将在JS里定义。
}

on(release){
       gotoAndStop("page2")
       fscommand("setAddress","page2")
}

on(release){
       gotoAndStop("page3")
       fscommand("setAddress","page3")
}

4 文件保存后,按照刚才的方法发布一个带FSCOMMAND跟踪的HTML文件。之后,建议在格式选项卡里把HTML选项的勾去掉。为了防止大意时,以后HTML文件手动加入的代码给覆盖掉。

5 用记事本打开main.html文件,找到//place your code here(代码放在此处),在这里输入
if(command=="setAddress"){
  document.location.hash=args//获得FLASH中FSCOMMAND传出的参数,并赋值给hash值,让地址栏在无刷新的情况下发生改变
}

6 测试HTML文件,可以看到点按钮之后,地址栏发生了改变。但是刷新页面后,FLASH显示的还是第一帧,因为在刷新页面的时候,没有一个命令让FLASH的页面发生跳转

7 为此,在main_DoFSCommand函数下面定义一个控制跳转的函数:
function setFlashPos(){
  main.TGotoLabel("_root",document.location.hash.slice(1))//让Flash跳转到地址栏#后面内容的标签名,之所以用slice(1),是因为JS读取出来的值是包含#的。所以要用slice(1)把#去掉。http://www.zhugao.cn/info/news_show.asp?id=214 有介绍TGotoLabel的用法。
}

8 让刷新页面或者打开页面时调用该代码,就在body标签里加入onload=setFlashPos()
此时测试,就可以实现全FLASH站的无刷新地址跳转,达到FLASH站定位的目的了。

[ 本帖最后由 HBrO 于 2006-8-18 16:54 编辑 ]
我的Blog:
http://www.asv5.cn/blog/
欢迎大家加入Flash侠客群,无论新老手,均一视同仁:25694172
在我网站的调查页面显示里头,可能动画效果用得比较多,交互的东西也不少,但是,实现精确定位的核心,其实也不过是上述简单演示文稿所用到的技术而已。

该技术在我的站里,是实现其它某些效果的基础,比如页面流量统计,FLASH的SEO处理,等等。如果有时间的话,接下来会继续给大家写。

[ 本帖最后由 HBrO 于 2006-8-18 16:55 编辑 ]
我的Blog:
http://www.asv5.cn/blog/
欢迎大家加入Flash侠客群,无论新老手,均一视同仁:25694172

TOP

先加入收藏,慢慢来研究:)

TOP

版主发的贴子我一般都是先顶了再看的..

TOP

看来真要学下JS了.原来学的javascript只能小打小闹,上不了大场面.

修改地址栏确实好的.到少共用性要强一些.

JS也是强.差不多能控制SWF里的所有东西了..

唉.只有一点不好..楼主干嘛要做超女啊...最恨那东西了!!

TOP

我也是做FLASH一段时间才发现应该学下JS,不过幸运的是JS跟AS的语法很相像.

PS:本来我对超女也不感兴趣的,如果当初不是申请版主,我也不会喜欢上这东西.
我的Blog:
http://www.asv5.cn/blog/
欢迎大家加入Flash侠客群,无论新老手,均一视同仁:25694172

TOP

JS学的话应该不像VC那些语言那么难的.

BS超女

TOP

确实是篇技术性很强的文章,不知道和这里的应用是不是一样的道理,http://www.2advanced.com
引用:
原帖由 HBrO 于 2006-8-18 16:43 发表
... 但是恰逢luzhugao正在做商业版的播放器,其代码做法我想也是大同小异 ...
HBrO 兄只管发布,有什么事我一力承担。

说完了这段,我也想附带说说,其实我也不喜欢超女,甚至如楼上所说的 BS超女。任何事件都有两面性,可是我认为超女这种哗众取宠的选秀方式真的太低俗了。虽然确实有几个唱得不错,然而他低俗的一面远远超过了这一面,实在令人感到遗憾,说句不良心的话,超女们只不过是主办方赚钱的工具而已。商业,你可以说他是促进人类社会迅猛发展的一种行业,可以说他是让无数人从灰暗走向色彩的一种行业,也可以说他是让无数人从色彩走向灰暗的一种行业。
引用:
原帖由 HBrO 于 2006-8-18 16:43 发表
... PS:本来我对超女也不感兴趣的,如果当初不是申请版主,我也不会喜欢上这东西 ...
“申请版主”和“喜欢上这东西”看不出有什么因果关系吧 不过话说回来,你这站的技术含量真的很高,学习
停止签名

TOP

另外,这个标题,“无刷新定位”,我就是理解不下来。这个技术应该是“防止因为刷新导致页面变化”的,“无刷新”似乎不太好理解,还请赐教。
停止签名

TOP

从它的表现来看,2AD也确实是使用这种技术,不过不同的是,2AD的比我的漂亮多了.

这种技术我现在叫"无刷新",其实的确是不恰当的.因为我想不到用什么词替代会更好.这里我是指地址变化了,但是页面没有发生跳转(所以这里的"刷新"其实有点跳转的意思).另外,当我在网上找到这种改地址栏方法的时候,也看到说这是AJAX的一个内容,而AJAX又跟无刷新拉上关系,所以就说成无刷新了.

播放器的教程......晚一点吧,因为跟这个相关的还有其他方面的应用,打算先收好这个尾巴.

luzhugaoBS超女的重要原因是它的商业炒作.其实我也对这些炒作很反感.我喜欢的也只是几个会唱歌,或者长得漂亮的小孩子.至少,她们在电视上也让我感动过.至于申请版主跟喜欢超女的关系,其实很微妙,但是也很幼稚.不过在这里就不说了,再说就成灌水帖啦.
我的Blog:
http://www.asv5.cn/blog/
欢迎大家加入Flash侠客群,无论新老手,均一视同仁:25694172

TOP

萝卜..心情不错啊.
很忙.有事电话.

TOP

不过...AS + JS无刷新这东西,咋感觉有点像FAJAX?
很忙.有事电话.

TOP

AS+JS无刷新...没办法,谁叫那些介绍HASH的文章叫AJAX啊?
楼上的,虽然现在回帖只有两分,但你也不必要把两句话分成两个帖吧?
我的Blog:
http://www.asv5.cn/blog/
欢迎大家加入Flash侠客群,无论新老手,均一视同仁:25694172

TOP

FLASH的SEO处理

对这个感兴趣
www.tenlin.com

TOP

好复杂哟,先收藏了

TOP

不过..GOOGLE好象不吃这套.
很忙.有事电话.

TOP

楼上的说对了,GOOGLE确实不吃我那套.
我的Blog:
http://www.asv5.cn/blog/
欢迎大家加入Flash侠客群,无论新老手,均一视同仁:25694172

TOP

JS报错?

报的是main未定义 我的IDE是flash8,请问是什么问题?

TOP

-    - !

汗死..原来是名字...

TOP

通过JS应该是可以改变url中的参数的

因为有document.location.search对象,这个对象的值就是获得一个URL后面的参数,比如一个URL是XXXX?g=1,那么document.location.search的值就是?g=1
然后就可以自己拼URL了.

我底下写了一段例子,不过只是在自己的机子上调了下,LZ随便看看吧.应该是没错的 参数名是g

<html>
       <body onload="setSearch()">
       <input type="text" id="show">
       <input type="button" onclick="pre()" value="pre">
       <input type="button" onclick="next()" value="next">
       <script>
              var s;
              function setSearch()
              {
                     //alert(document.location.href);
                //alert(document.location.pathname);
                //alert(document.location.host);
                     s = document.location.search;
                     if(s=="")
                     {
                            document.all.show.value="The "+0+" page";
                     }
                     else document.all.show.value="The "+s.substring(3)+" page";
              }
              
              function pre()
              {
                     var temp = s.substring(3);
                temp = parseInt(temp)-1;
                if(temp<=0) temp=0;
                     s = "?g="+temp;
                     document.location.href = "http://"+document.location.host+document.location.pathname+s;
                     
                     }
              
              function next()
              {
                     var temp;
                     if(s=="") {
                            temp=1;
                            }
                     else temp = parseInt(s.substring(3))+1;
                     s = "?g="+temp;
                     document.location.href = "http://"+document.location.host+document.location.pathname+s;
                                   
              }
       </script>
       </body>
</html>
本帖最近评分记录
  • HBrO 威望 +1 很用心,打分鼓励下. 2006-8-20 20:27

TOP

很用心,打分鼓励下.
学到东西了,之前还真不知道location有search,host,pathname的,今天总算学到了.
不过这个代码可惜的是,在改变地址栏的时候,页面也发生了跳转.
我的Blog:
http://www.asv5.cn/blog/
欢迎大家加入Flash侠客群,无论新老手,均一视同仁:25694172

TOP

看到23楼的...看到JS真要学下了..

TOP

对了 改变地址栏这个问题下午忘记说了.

改变地址栏页面应该是要变化的啊,为什么不变呢?   看楼主例子的时候我就很奇怪,直接在地址栏里敲url没有反映的,很奇怪,作为web应用,url变化的时候页面怎么会不变呢?

还有,楼上的,JS绝对是有意思的东东,嘿嘿,俺是做j2ee的,flash是业余爱好,嘿嘿 共同提高,共同提高.

另外,下午学楼主例子的时候,顺便把flash和容器通信全部看了一遍~,发现在flash8以后官方都是推荐使用ExternalInterface类的,貌似效率更高

TOP

我的用意不在于在地址栏里输入之后就让页面有反应.而在于在FLASH页内容变更的时候,通过地址栏保存一些当前的设置,让刷新后不要回到首页去.道理跟2AD那个一样.
我的Blog:
http://www.asv5.cn/blog/
欢迎大家加入Flash侠客群,无论新老手,均一视同仁:25694172

TOP

顶一下,解决了大问题.
www.csser.com | CSSer群:36047120

TOP

这个是不是那个支持流览器后退按钮的方法,和这个一样吗

TOP

......楼上的这个可以通过此原理实现,不过好像还需要加个历史记录堆栈代码,而且我的也不是要实现该功能.
......看来让很多人误解了.

17楼的
_____
FLASH的SEO处理

对这个感兴趣
_____

教程已写:
http://bbs.blueidea.com/thread-2668685-1-2.html
我的Blog:
http://www.asv5.cn/blog/
欢迎大家加入Flash侠客群,无论新老手,均一视同仁:25694172

TOP