本教程需要大家有一些关于HTML, CSS, Flash, JavaScript 和ASP的基础知识
用Html文本与Flash一起来制作动画是一个很好的方式。 它非常的简单, 而且容易上手,只需要使用ActionScript中的getURL()脚本就可以了,比你能想象到的任何其他编成语言(例如JavaScript)都更方便,功能也更强大。
请看下面这个情节: 在一个特殊工程中,设计师需要Flash 动画运行于页面的顶端,然后在Flash播放后,再显示文本。你可以在Flash中做很多的事情,但是在这例子中不适合用它来在HTML的层中显示文本。
第一步:布局
首先创建一个包含层的网页(如果你对层这个概念不熟悉,可以在Google中搜索一下,你会发现有很多有用的东西,是很值得你花点时间看一下的)。在我的例子中,使用了一个导航层,一个用来显示文本内容的层和一个Flash层,如下图所示:
我在下面用到的效果是在Flash影片完成播放前隐藏文本内容层,所以第一件要做的事情就是设置层的可见属性为隐藏,其他两个层保持默认的可见属性。
第二步: JavaScript
这里我说明一下: 我是使用Dreamweaver的内置的显示/隐藏脚本,并把它插入到网页的头部。
无论是自己写的JavaScript脚本,还是从脚本库或者DreamWeaver中拖动一个,你都可以切换图层的显示和隐藏了。使用这个脚本,可以很快地写出自己想要的简单JavaScript函数。
上图中的模型实际上要比这个完成的功能更简单。 实际上,一共三个层----内容层和两个包含鼠标上下箭头图形的层,它们是用来滚动内容层的。这些都是需要隐藏直到影片播放完成的东西。这里我没有在flash的时间轴中创建四个不同的脚本,而是创建了一个JavaScript脚本来很快的显示所有层:
<script language="JavaScript" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null)
{ v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v;
}
obj.visibility=v; }
}
function showLayers() {
MM_showHideLayers('content','','show')
MM_showHideLayers('divUpControlMain','','show')
MM_showHideLayers('divDownControlMain','','show')
}
-->
</script>
非常的简单! 正如所看到的,所有我需要做的就是为每个需要显示的层创建一个脚本函数。 我不是一个很强的JavaScript程序员,肯定还有更好的方式来实现它。
第三步:在Flash中调用这个函数
在flash影片的时间轴上需要出现文本内容层的地方插入下面脚本:
getURL("javascript:showLayers()");
现在,在HTML网页中的隐藏的层,就可以通过Flash影片来控制它在适当的时候显示出来。但这仍然有个问题,用户每次打开网页,都需要耐心看完影片才能看到内容文本。下面是我的解决方案。
第四步:挽救人们的耐心
当用户第一次访问这个页面的时候,可以做个Cookie记录,当用户再次访问的时候,服务器读取Cookie就可以知道他们是否已经看过影片了。如果用户已经看过影片了,就可以用最后的一帧和一个小的播放按钮来代替影片, 用户就可以直接看到文本内容了。利用Google,花点时间你可以用Perl,PHP,JavaScript等任意一种语言来做这个功能。这里ASP是我所选择的武器。代码一共有两部分:
1)检查Cookie并显示适当的内容:
2)窗体顶端
<div id="Flash" style="position:absolute; left:0; top:0; width:760;
height:160; z-index:1; visibility: visible">
<%
If Request.Cookies("viewed")("force") = "" Then
%>
<p><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0"
width="760" height="160">
<param name="movie" value="swf/force.swf">
<param name=quality value=high>
<param name="loop" value="false">
<param name="menu" value="false">
<embed src="swf/force.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" width="760" height="160"
loop="false" menu="false">
</embed>
</object></p>
<%
Else
%>
<p><img src="img/stills/force.jpg" width="760" height="160"
border="0"></p>
<script language="JavaScript" type="text/javascript">
showLayers()
</script>
<%
End If
%>
</div>
简单点来说就一个语句---如果Cookie为空或者不存在则嵌入Flash影片(在播放完之后会显示隐藏的层),否则显示最后一帧的JPG图片来切换隐藏的层。
2) 写cookie
<% Response.Cookies("viewed")("force") = "True" Response.Cookies("viewed").Expires = Date + 90 %>
只要用户访问了本页面并且是在浏览器中第一次浏览, 就会写入Cookie,以后再浏览的时候就不会再受影片的打扰了。还剩下一件事情就是如果他们想再次观看影片怎么办?我做一个简单脚本clear.asp 和一个'重播'链接:
<a href="clear.asp?url=force.asp&cookie=force">重播</a>
如你所看到的,这个链接会清除掉Cookie,代码如下(ASP中):
<% strURL = Request.QueryString("url") strCookie = Request.QueryString("cookie") Response.Cookies("viewed")(strCookie) = "" Response.Redirect strURL %>
所有我要做的就是从query字符串中得到这个URL和Cookie的名字,删除相应的cookie并且重新定位到用户打开过的页面。为什么要这样做呢?因为简单的在同一个页面中清除cookie是不起作用的,已经太迟了。你需要重新装载一下这个页面,这就是我的解决方案,所有的已经做完了并且它运行的非常出色。
* 已经在IE5、IE 6, Mozilla 和Netscape中通过测试