请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
邮件列表客服QQ 800003860切换到窄版
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步，快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服 蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › Flash与RIA设计 › [原创]Flash全站的技术应用（一）——AS+JS的Flash网站无 ...
123下一页
返回列表 发新帖
查看: 42421|回复: 60

[服务器端交互] [原创]Flash全站的技术应用（一）——AS+JS的Flash网站无刷新定位技术 [复制链接]

HBrO　楼主
帖子
7398
体力
32121
威望
241
居住地
广东省 广州市
发表于 2006-8-18 16:43:33 |显示全部楼层
前言
前段时间，我在忙着做自己的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 编辑 ]
已有 1 人评分威望 收起 理由
mirycat + 3 精品文章

总评分: 威望 + 3   查看全部评分

西部数码顶级域名注册商39元抢注！

使用道具 举报

HBrO　楼主
帖子
7398
体力
32121
威望
241
居住地
广东省 广州市
发表于 2006-8-18 16:43:56 |显示全部楼层
该技术应用的成功案例：
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 编辑 ]
租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

HBrO　楼主
帖子
7398
体力
32121
威望
241
居住地
广东省 广州市
发表于 2006-8-18 16:44:15 |显示全部楼层
下面介绍这里用到的两个技术点：
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 编辑 ]

使用道具 举报

HBrO　楼主
帖子
7398
体力
32121
威望
241
居住地
广东省 广州市
发表于 2006-8-18 16:44:38 |显示全部楼层
据此，笔者开始写简单演示文档的制作过程。
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 编辑 ]

使用道具 举报

HBrO　楼主
帖子
7398
体力
32121
威望
241
居住地
广东省 广州市
发表于 2006-8-18 16:44:52 |显示全部楼层
在我网站的调查页面显示里头，可能动画效果用得比较多，交互的东西也不少，但是，实现精确定位的核心，其实也不过是上述简单演示文稿所用到的技术而已。

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

[ 本帖最后由 HBrO 于 2006-8-18 16:55 编辑 ]

使用道具 举报

jimohuoshan　

寂寞火山

荣誉管理 手机认证 

帖子
2584
体力
10205
威望
197
发表于 2006-8-18 17:22:16 |显示全部楼层
先加入收藏，慢慢来研究：）
[寂寞火山个人门户 V5][真我闪博：51trueme.com]

使用道具 举报

wolf2999　
帖子
1912
体力
7180
威望
4
居住地
广东省 广州市
发表于 2006-8-18 17:24:08 |显示全部楼层
版主发的贴子我一般都是先顶了再看的．．
http://www.wolf2999.cn

使用道具 举报

wolf2999　
帖子
1912
体力
7180
威望
4
居住地
广东省 广州市
发表于 2006-8-18 17:40:45 |显示全部楼层
看来真要学下ＪＳ了．原来学的javascript只能小打小闹，上不了大场面．

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

ＪＳ也是强．差不多能控制ＳＷＦ里的所有东西了．．

唉．只有一点不好．．楼主干嘛要做超女啊．．．最恨那东西了！！
http://www.wolf2999.cn

使用道具 举报

HBrO　楼主
帖子
7398
体力
32121
威望
241
居住地
广东省 广州市
发表于 2006-8-18 17:53:27 |显示全部楼层
我也是做FLASH一段时间才发现应该学下JS,不过幸运的是JS跟AS的语法很相像.

PS:本来我对超女也不感兴趣的,如果当初不是申请版主,我也不会喜欢上这东西.

使用道具 举报

wolf2999　
帖子
1912
体力
7180
威望
4
居住地
广东省 广州市
发表于 2006-8-18 18:32:35 |显示全部楼层
JS学的话应该不像ＶＣ那些语言那么难的．

BS超女
http://www.wolf2999.cn

使用道具 举报

luzhugao　

朱高

银牌会员

帖子
761
体力
3372
威望
69
居住地
浙江省 杭州市
发表于 2006-8-19 11:27:28 |显示全部楼层
确实是篇技术性很强的文章，不知道和这里的应用是不是一样的道理，http://www.2advanced.com

原帖由 HBrO 于 2006-8-18 16:43 发表
... 但是恰逢luzhugao正在做商业版的播放器，其代码做法我想也是大同小异 ...


HBrO 兄只管发布，有什么事我一力承担。

说完了这段，我也想附带说说，其实我也不喜欢超女，甚至如楼上所说的 BS超女。任何事件都有两面性，可是我认为超女这种哗众取宠的选秀方式真的太低俗了。虽然确实有几个唱得不错，然而他低俗的一面远远超过了这一面，实在令人感到遗憾，说句不良心的话，超女们只不过是主办方赚钱的工具而已。商业，你可以说他是促进人类社会迅猛发展的一种行业，可以说他是让无数人从灰暗走向色彩的一种行业，也可以说他是让无数人从色彩走向灰暗的一种行业。

原帖由 HBrO 于 2006-8-18 16:43 发表
... PS:本来我对超女也不感兴趣的,如果当初不是申请版主,我也不会喜欢上这东西 ...


“申请版主”和“喜欢上这东西”看不出有什么因果关系吧 不过话说回来，你这站的技术含量真的很高，学习
停止签名

使用道具 举报

luzhugao　

朱高

银牌会员

帖子
761
体力
3372
威望
69
居住地
浙江省 杭州市
发表于 2006-8-19 11:43:22 |显示全部楼层
另外，这个标题，“无刷新定位”，我就是理解不下来。这个技术应该是“防止因为刷新导致页面变化”的，“无刷新”似乎不太好理解，还请赐教。
停止签名

使用道具 举报

HBrO　楼主
帖子
7398
体力
32121
威望
241
居住地
广东省 广州市
发表于 2006-8-19 14:28:51 |显示全部楼层
从它的表现来看,2AD也确实是使用这种技术,不过不同的是,2AD的比我的漂亮多了.

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

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

luzhugaoBS超女的重要原因是它的商业炒作.其实我也对这些炒作很反感.我喜欢的也只是几个会唱歌,或者长得漂亮的小孩子.至少,她们在电视上也让我感动过.至于申请版主跟喜欢超女的关系,其实很微妙,但是也很幼稚.不过在这里就不说了,再说就成灌水帖啦.

使用道具 举报

Digi　

星光

禁止访问

帖子
2237
体力
9404
威望
7
发表于 2006-8-19 18:27:29 |显示全部楼层
萝卜..心情不错啊.
很忙.有事电话.

使用道具 举报

Digi　

星光

禁止访问

帖子
2237
体力
9404
威望
7
发表于 2006-8-19 18:28:07 |显示全部楼层
不过...AS + JS无刷新这东西,咋感觉有点像FAJAX?
很忙.有事电话.

使用道具 举报

HBrO　楼主
帖子
7398
体力
32121
威望
241
居住地
广东省 广州市
发表于 2006-8-19 18:54:48 |显示全部楼层
AS+JS无刷新...没办法,谁叫那些介绍HASH的文章叫AJAX啊?
楼上的,虽然现在回帖只有两分,但你也不必要把两句话分成两个帖吧?

使用道具 举报

tenlin　
帖子
65
体力
156
威望
0
发表于 2006-8-20 10:59:35 |显示全部楼层
FLASH的SEO处理

对这个感兴趣
www.tenlin.com

使用道具 举报

zzzhuyu　
帖子
28
体力
55
威望
0
发表于 2006-8-20 11:18:48 |显示全部楼层
好复杂哟，先收藏了

使用道具 举报

Digi　

星光

禁止访问

帖子
2237
体力
9404
威望
7
发表于 2006-8-20 12:07:46 |显示全部楼层
不过..GOOGLE好象不吃这套.
很忙.有事电话.

使用道具 举报

HBrO　楼主
帖子
7398
体力
32121
威望
241
居住地
广东省 广州市
发表于 2006-8-20 14:02:10 |显示全部楼层
楼上的说对了,GOOGLE确实不吃我那套.

使用道具 举报

leobluewing　
帖子
32
体力
74
威望
1
发表于 2006-8-20 14:44:21 |显示全部楼层
JS报错?

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

使用道具 举报

leobluewing　
帖子
32
体力
74
威望
1
发表于 2006-8-20 16:00:51 |显示全部楼层
-    - !

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

使用道具 举报

leobluewing　
帖子
32
体力
74
威望
1
发表于 2006-8-20 18:24:31 |显示全部楼层
通过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>
已有 1 人评分威望 收起 理由
HBrO + 1 很用心,打分鼓励下.

总评分: 威望 + 1   查看全部评分

使用道具 举报

HBrO　楼主
帖子
7398
体力
32121
威望
241
居住地
广东省 广州市
发表于 2006-8-20 20:28:58 |显示全部楼层
很用心,打分鼓励下.
学到东西了,之前还真不知道location有search,host,pathname的,今天总算学到了.
不过这个代码可惜的是,在改变地址栏的时候,页面也发生了跳转.

使用道具 举报

wolf2999　
帖子
1912
体力
7180
威望
4
居住地
广东省 广州市
发表于 2006-8-20 20:58:22 |显示全部楼层
看到23楼的...看到JS真要学下了..
http://www.wolf2999.cn

使用道具 举报

leobluewing　
帖子
32
体力
74
威望
1
发表于 2006-8-20 22:25:59 |显示全部楼层
对了 改变地址栏这个问题下午忘记说了.

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

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

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

使用道具 举报

HBrO　楼主
帖子
7398
体力
32121
威望
241
居住地
广东省 广州市
发表于 2006-8-20 22:43:13 |显示全部楼层
我的用意不在于在地址栏里输入之后就让页面有反应.而在于在FLASH页内容变更的时候,通过地址栏保存一些当前的设置,让刷新后不要回到首页去.道理跟2AD那个一样.

使用道具 举报

cvpc　

一回

中级会员 手机认证 

帖子
163
体力
492
威望
2
发表于 2006-8-21 08:38:50 |显示全部楼层
顶一下,解决了大问题.
www.csser.com | CSSer群：36047120

使用道具 举报

heimuxiao　
帖子
270
体力
612
威望
0
居住地
河北省 承德市
发表于 2006-8-21 10:25:22 |显示全部楼层
这个是不是那个支持流览器后退按钮的方法，和这个一样吗
部落格

使用道具 举报

HBrO　楼主
帖子
7398
体力
32121
威望
241
居住地
广东省 广州市
发表于 2006-8-21 11:15:38 |显示全部楼层
......楼上的这个可以通过此原理实现,不过好像还需要加个历史记录堆栈代码,而且我的也不是要实现该功能.
......看来让很多人误解了.

17楼的
_____
FLASH的SEO处理

对这个感兴趣
_____

教程已写:
http://bbs.blueidea.com/thread-2668685-1-2.html

使用道具 举报

123下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Html Smilies
您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-13 11:01 , Processed in 0.145630 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部