Flash 是目前十分普及随处可见的网页动画格式,但不知从何时开始,Flash 在IE中出现了恼人的大问题,当你想要按下Flash选单中的按钮或广告时,按第一下没反应,再按一次才会有效果。这是这个Flash动画制作者不留心的 Bug 吗?No No No…,快回去检查你以前做过的 Flash 网页,是不是也会如此。
这是什么怪问题?
首先用 IE 来浏览一个很久以前制作、包含 Flash 的页面,当你用鼠标滑过某个 Flash 动画上面,Flash 动画的四周会出现一圈黑色斜线的外框,咦…以前并没有这样,而且这是很难看又丑陋的,尤其是当你的 Flash 动画需要和网页背景融合为一的时候。接着,鼠标旁边马上就出现一串类似这样的提示文字:点按已启用并使用这个控件。
然后当你用鼠标滑过 Flash 中的按钮或选单,按钮不会有任何 Roll Over 的效果,选单也不会出现,只会出现那段黄底黑字的小提示,真是糟糕啊!你必须要先在Flash动画上面用鼠标点一下,代表启用了这个 Flash 控件,按钮和选单才会开始有作用。
为什么会这样?
现在是床边故事的时间…缘起于1999年的时候,Eolas Technologies公司指控,微软使用了Eolas的专利Web浏览器技术让IE浏览器得以加入add-on与applet软件,也就是所谓的外挂(plug-in)。Eolas声称该技术使得微软的IE浏览器得以Netscape和浏览器一较高下,并且逼得Netscape在90年代末期终于被微软击败。Eolas曾经为此起诉微软支付12亿美元。
2003年8月,美国芝加哥法院在认定微软在IE浏览器中侵犯plug-in技术,并判决微软必需向Eolas公司及加州大学赔偿5.21亿美元。(其中加州大学是该专利拥有人但于1994年将该技术授权给Eolas公司。)尽管Eolas公司只建议微软向他们给付相关技术的授权费用,但微软决定继续上诉的同时顺便修改浏览器。
于是在2004年的年初,微软发布了ActiveX相关的更新,让这些使用plug-in技术而内嵌(embedded)到网页里面的内容与媒体,无法主动与浏览者互动,包括了鼠标滑过、按下等等的互动效果都被阻挡住了,浏览者必须先点一下内嵌的内容来启动它,才能够与之互动。不只有Flash,所有内嵌在网页里面媒体内容都被这个更新影响,也包括了Quick Time、Real以及Media Player。但请特别注意一点,这些内嵌的内容媒体仍旧会自动播放;网页中的Flash动画、视讯影片仍然看得见而且会跑,只是无法立即和浏览者互动,也就是说在没有启用它之前,是不会有任何鼠标互动效果的。
※资料来源 cnet.com
该如何解决?
微软所发布的这个ActiveX更新的确让许多浏览者觉得很困扰,对于Flash的网页提供者更是影响甚巨。不过上有政策下有对策,Flash开发厂商Adobe(以前叫Macromedia)就提供十分简单而且良好的解决方案,如果你使用的是最新版的工具软件(Flash 8 或Dremaweaver 8),可能在你还搞不清楚状况前就已经会自动解决掉了这个问题。
要解决这个问题可以说是非常简单,也可以说有点复杂。简单的部份是,既然这个ActiveX更新的限制是针对”内嵌”媒体,那么只要让媒体内容不是内嵌在网页中,而是外部的档案,就不会受到这样的限制啦!是不是很简单啊!
不过…Flash动画都是在网页里面播放,和其它文字图片排列在一起的,该如何不内嵌在网页里面而又能够在网页中播放呢?解决方法就是由JavaScript程序(使用document.write或innerHTML)来输出Flash动画相关的HTML标签(<object>与<embed>),而且重点是:这段JavaScript程序必须是外部独立分离的档案,不能直接写在网页里面,例如使用<script src=”xxxxx.js”>的方式将外部的JavaScript程序加载进来。如此一来这段JavaScript程序就不是内嵌的东西,而由JavaScript程序所输出的Flash卷标当然也就不算是内嵌的东西,自然不会受到IE浏览器新的限制啦!
聪明的你可以能会问说:如果浏览器不支持JavaScript或把JavaScript关闭了怎么办?这是个好问题!(没想到这个问题的人并不代表你不聪明哦…)如果没法使用JavaScript输出Flash的HTML标签,那么就…不要用JavaScript输出啊!使用最原始的方法,让Flash动画保持为原有的内嵌对象就好了,Flash动画仍旧可以播放,只是需要浏览者多点一下鼠标来启用而已,但有总比没有好吧!
动动手吧!
我不会JavaScript怎么办?先别恐慌!先前有提过,如果你已经在使用新版本(8.0)以上的Flash或Dreamweaver,就已经自动解决了这个问题,如果你有旧的网页需要更新,使用Dreamweaver也很简单。如果你没有Dreamweaver,可以将JavaScript程序代码copy过去,做简单的修改便能使用。
使用Dreamweaver(8.0.2版以上)
1. 启动Dreamweaver,请务必将版本更新到8.0.2以上。到Adobe的网站即可下载免费的Update。
2. 开启新的HTML檔,插入Flash内容(SWF档案),这时Dreamweaver就会自动帮你产生所需的JavaScript与HTML Code,而且这段Code是已经修正过ActiveX的限制。
※关于在页面中插入Flash内容的方法,应该不用再提了吧!
3. 如果是既有的旧页面,其中包含Flash内容的,用Dreamweaver开启时会询问您是否要自动转换标签,以避免ActiveX的限制(如右图),这时只要按下「是」,万事就搞定了。
4. 这时Dreamweaver会在网站根目录下自动产生一个叫做 Scripts 的数据夹,里面有一个 JavaScript 档案 AC_RunActiveContent.js。这就是解决 Flash 问题所需要的档案,发布网站时请记得一定要将这个数据夹和档案一起上传到服务器上去哦!
自行套用Javascript – 使用 document.write 或 DOM
如果你会JavaScript,也可以直不用需要加载Adobe所提供的AC_RunActiveContent.js档案,自己写一个外部的JavaScript档案来使用,比较有弹性。原理很简单,只要在外部的JavaScript中使用document.write或DOM的innerHTML来输出Flah所需的HTML code即可!
1. 例如在JavaScript档案中写:
document.write(flash_code);
※请特别注意的是,显示出Flash的HTML code必须在同一列之中,不可以断行。
2. 将这个JavaScript档案存盘(例如檔名叫做show_flash.js),然后加载到要显示Flash的网页里面,例如在HTML页面中这样写:
3. 当然也可以加上<noscript>的部份,让无法使用JavaScript的浏览器一样可以看到Flash:
聪明的你会发现,用来显示Flash内容的HTML code完全都是一模一样的,都是<object>和<embed>,不同的地方只是在于,要把这段HTML code写在哪里而已。