时髦的Back Button

作者佚名技术来源服务器技术浏览发布时间 2012-07-12

演示地址：
本站演示:http://www.webstudio.com.cn/tutorial/tuts/backbutton/index.HTML
http://www.tm5150.com/.
成功应用的案例:
http://www.fantasy-interactive.com/

在观看演示时当你点击完Flash中的按钮后,你会发现点击浏览器中的返回按钮可以返回,当然前进按钮也同样.

介绍：

backbutton字面意思是返回按钮，一般大多数浏览者在浏览网页时都或多或少有一个习惯性的动作就不断点击返回按钮或前进按钮。可是当他们发现一旦无法返回时，可能就会产生一种不安全的感觉。然而对于一个全FLASH站点来说，点击浏览器上返回按钮是无法返回刚刚看过的内容页面的。因此使用BACKBUTTON对于FLASH 设计和开发人员来说就会显得比较重要。同时它也会体现你的页面具有更方便更友好的导航。
FLASH 和 BACKBUTTON

因为web浏览器不会自动跟踪FLASH网站上用户的操作，所以也不会记录下用户的操作历史。这是因为FLASH元素是以一个单一的影片格式嵌入在HTML中的，所有的调用操作都在FLASH中完成，表面上看一个最简单的解决方法是将你的FALSH分成多个部分分别嵌在不同的HTML页中。但是,这是不推荐使用的方法，因为FLASH会失去它的连续性同样使用FLASH也无意义可言了。

我们需要为FLASH寻找一种方法来触发页面的改变，以使浏览器可记录用户的操作历史，那么我们怎么做呢，幸运的是非常有才气的Robert Penner已经开发了一种用户工作环境可以在FLASH和JavaScript之前通讯。它工作的很好。可是只有一点就是只能在IE5+和PC上使用。虽然有一大部分用户在使用IE，但仍有大约30%的用户在使用其它的浏览器。

我们暂且先不说在其它浏览器上的情况，我们先看一下在IE上我们如何实现它。
上文说到WEB浏览器不会自动记录FLASH用户的浏览历史，所以我们要自已动手为它生成一个，在FLASH这一方的实现使用的方法实际上就是帧标签的应用。如果你还不太熟帧标签可以查一些相关的资料。

具体方法：
1．我们先建一个FLASH文件，如下图所示
点击这里用新窗口浏览图片

在图中的这些东西都非常的简易，当然我们只是为了说明问题，其中上方的f1,f2……f6都是帧标签，当播放头播到哪一个帧标签时就会切换成不同的内容。
2．要想让FLASH与IE通讯，我们必须设置一个变量，这里的名为page，也就是上图的navigator层的navigator影片剪辑，进入到navigator影片剪辑中在其第一帧中加入代码：

代码:

function checkPage(){
newPage=_root.page;
if(oldpage!=newpage){
_root.gotoAndStop(“f”+newPage);
}
oldPage=newPage;
}

这段代码是用来定义一个检测函数，page的变化是否为最新的值，
到现在为止我们还没有正式使用它。
切换到主场景中，选中navigator影片剪辑，按F9加入实例代码：

代码:

onClipEvent(enterFrame){
this.checkPage();
}

3.其次就是在你的场景布局中加入按钮代码：
比如我在的演示影片中加的“关于我们”加入代码：

代码:

on(press){
getURL(“2,html”,”historyframe”);
_root.page=2;
}
on(release,releaseOutside){
_root.gotoAndStop(“f2”);
}

其中我们注意到上面的代码，2.html其实是我们手动建立的保存我们浏览历史的页面，而historyframe则指明这个页面在historframe帧框架中打开。
其它的按钮同上，不过记得_root.page=和_root.gotoAndStop()的值是不同的。是你想让它显示的地方。最后，我们可以将影片导出至一个目录中如BACKBUTTON中。
3．打开DW，新建军一个文件名为index.html，加入框架，将其分成上下两个，这里我们只是为了看效果，

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: 用最简单的方法打造最实用最时尚的效果下一篇: FLASH截取视频图象！做不一样的游戏！

关于时髦的Back Button的所有评论

随机推荐