时髦的Back Button

本文出处:http://xodus31.com/index.php?categoryid=11
            http://www.robertpenner.com/experiments/backbutton/backbutton.html
            http://www.flash99good.com/

演示地址：
本站演示: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，加入框架，将其分成上下两个，这里我们只是为了看效果，可以将下面的框架缩的很小，分别命名为flashfram,和historyframe, 在flashfram中链接flashpage,在historyframe中链接第一个历史页面１.html，当然你可能要建多个空白的历史页面。本例中使用的6段内容，所以有6个页面。分别为1.html,2.html…….6.html.在flashpage.html中嵌入你的ＦＬＡＳＨ影片。
4．加入javascript代码：在dw中打开flashpage.html加入js代码：

代码:

<script language="javascript"> function setPage(newPage) {     //检查ＦＬＡＳＨ对象是否存在     if (window.document.mymovie) {         //设置page变量给ＦＬＡＳＨ影片时间轴_root.page         window.document.mymovie.SetVariable("page", newPage);     } } </script>

找到嵌入ＦＬＡＳＨ影片的那一段代码：

代码:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" WIDTH=550 HEIGHT=623 id="mymovie">     <PARAM NAME=movie VALUE="webstudio.swf">     <PARAM NAME=quality VALUE=high>     <PARAM NAME=menu VALUE=false>     <PARAM NAME=bgcolor VALUE=#0099FF>     <EMBED src="webstudio.swf" quality=high bgcolor=#999999  width=550 height=623 NAME=mymovie swLiveConnect=true TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"> </EMBED>

我们注意到在<object标签的最后有一行加入了id=”mymovie,这是我们为ＦＬＡＳＨ起的一个唯一名称，以使ＪＡＶＡＳＣＲＩＰＴ可以找到它，但现在还不能通讯，在<embed的标签height=623后面我们发现增加了NAME=mymovie，注意这个名字必须和id的名称相同，到现在为止，javascript可以和flash通讯了。

５．我们还有最后一步，上面我们只是设置了javascript的一个函数，并没有调用它。我们需要打开你自已创建的历史页面。加入javascript代码：
如我打开的是1.html则加入如下代码：

代码:

<script language="javascript">     parent.flashframe.setPage(1);   </script>

如果你打开的是2.html则要加入：

代码:

<script language="javascript">     parent.flashframe.setPage(2);   </script>

依次类推。把所有的历史页面都加上。
Ok，现在就可以测试了。

如果你不想要下面的帧框架可以将它隐藏起来.


最后:
到目前为止它只能在IE中运行,不能在MAC机上运行,如果你正在使用mac机型,请你参考以下教程.
    http://xodus31.com/index.php?categoryid=11
    可以在所有浏览器上运行的教程

    http://www.skaggivara.com/code/view_thing.php?thingID=7
    使用localconnection方式运行的backbutton.


讨论和源文件下载在这里:
http://www.webstudio.com.cn/forum/showthread.php?t=37