Flash页面技术解密

前天微软更新了IE浏览器，针对IE的更新，使ActiveＸ内容不能自载入的问题引起了许多人的关注．这些改变可以在Adobe的某些软件中看到,包括flashplayer.Authorware player, shockwave Player, SVG Viewer,Help Center 和 Adobe Reader,当然还有 Sun Java, Apple QuickTime, RealNetworks,RealPlayer和其它的ActiveX .通过某些方法嵌入到html页面中的交互内容可能不能响应用户的输入(例如,键盘,鼠标)直到用户点击要么激活要么继续loading .下面我的看看它到底是怎么一回事，并怎样解决它来使用户最大限度的方便浏览．

问题

当你查看web页面时,windows下的IE浏览器会将ActiveX内容显不为一个矩形框和一个提示内容为”Click to activate and use this control”意思就是你需要激活ActiveX的内容才可以查看或交互控制,ActiveX内容可能或不能象你预想的那样载入并进行播放. 可以查看Adobe提供的演示：这里

Adobe的解决方案

有如下两种解决方法:

方法1
如果你浏览了包含ActiveX的页面.点击这个内容激活它.

方法2
如果你正在开发一个网站,移除针对ActiveX内容所需的用户激活过程.针对此Adobe提供了一份基于javascriptr 解决文档．这里
通过使用Adobe的解决文档可以解决上述问题．

那么除了上述方法之外还有没有其它更简单的方法呢，答案是肯定的．可以使用deconcept 的flashObject 相比而言会比使用Adobe的方法更简单一些．并且运行状况是良好的．这里下载Download FlashObject 1.3 (38 hits)

基本方法如下：

只需要将flashobject.js 包含在你的html页面内，然后加上一点javascript代码嵌入flash swf就ok了．
它的工作方式如下：

代码: 

<script type="text/javascript" src="flashobject.js"></script>

<div id="flashcontent">
This text is replaced by the Flash movie.
</div>

<script type="text/javascript">
var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
fo.write("flashcontent");
</script>

简单分析一下，或是你可以仔细看flashObject的文档

代码: 

<div id="flashcontent">
This text is replaced by the Flash movie.
</div>

这一段相当于我们在为放置flash文件而准备的一个holder.有些象我们常用的空的MovieClip holder.为放入内容而准备的．如果你没有装flashplayer.那么里面的那行字会显示出来如显示为”This text is replaced by the Flash movie.”
如果你装了flashplayer，那这行字是不会显示的，用户基本上是看不到的，同时它还有一个好处是你可以把这行内容变成的你搜索关键字，google会很容易搜到它的．呵呵，一举两得．
下面这段一看就知道是什么了．

代码: 

<script type="text/javascript">
var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
fo.write("flashcontent");
</script>

用来嵌入swf,比如当前的影片文件是”movie.swf”, id是”mymoive,宽是200,高是100,flashplayer版本是7,背景色是#336699.

下面我们来看一下我们嵌入一个flash的范例.
根据上面的基本工作方式,我们还要嵌入一些其它的参数.来满足我们一些其它的需要比如我们有一个文件名为ws.swf,我们想把它嵌入到页面中,又不至于受IE更新的影响.

1.在页面中包入flashobject.js文件

<script type="text/javascript" src="flashobject.js"></script>

一般这行代码可以写在body标签之前即可.

2.把下面这段代码加在它下方.

代码:

<div id="flashcontent" style="width: 300px; height: 200px"></div>
<script type="text/javascript">
   var fo = new FlashObject("ws.swf", "mymovie", "300", "200px", "7", "#336699");
   fo.addParam("quality", "low");
   fo.addParam("wmode", "transparent");
   fo.addParam("salign", "t");
   fo.addParam("scale", "noscale");
fo.addParam("loop", "false");
   fo.write("flashcontent");
</script>

从上面的代码中我们看出,我们将要把FLASH放在id为flashcontent层中,它的宽为300高为200像素,那么应是和我们的swf文件的大小是相同的.如果你想缩放也可以是不同的.下面var fo = new FlashObject("ws.swf", "mymovie", "300", "200px", "7", "#336699"); 是嵌入flash文件,在之前的内容已介绍过它里面的参数,其中的ws.swf可以是相对路径也可以是绝对路径,如你可以直接输入网站加上你的swf文件名字.
在下面的一段就是我们可以加入的参数,从上到下分别为quality质量,wmode transparent透明,salign对齐,scale缩放,loop循环等.
这样我们的嵌入过程就完成了.

如果你想使用flashVars来进行html与flash之前的通讯,使用flashobject也是很容易的,但有一点使用flashobjcet时只有在swf刚一载入时传递参数.并且是以值对的形式来传递,如下:variable1=value1&variable2=value2&variable3=value3

使用方法如下:

代码:

<script type="text/javascript">
   var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   fo.addVariable("variable1", "value1");
   fo.addVariable("variable2", "value2");
   fo.addVariable("variable3", "value3");
   fo.write("flashcontent");
</script>

一旦这一步完成,那么所有的变量就已经传入到flash,你就可以灵活的在你的flash中的_root上使用了.

deconcept flashObject 还提供了可以加入其它参数的说明．你可以详细查看

除了这种简单方法之外，这还有一个与之类似的，我并没有仔细看，如果你有兴趣可以仔细看一下．这里ufo

哈哈，针对微软IE的更新改变，我们已经能轻松的去掉必须要点击一下才能看的过程了．如果你有空不要忘了去微软网站上看一下,它用的是什么,最后,不要忘了更新你网站，Cheers  :)

 

附:flashobject.js的内容

 

/**
 * FlashObject v1.3d: Flash detection and embed - http://blog.deconcept.com/flashobject/
 *
 * FlashObject is (c) 2006 Geoff Stearns and is released under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 *
 */
if(typeof com=="undefined"){var com=new Object();}
if(typeof com.deconcept=="undefined"){com.deconcept=new Object();}
if(typeof com.deconcept.util=="undefined"){com.deconcept.util=new Object();}
if(typeof com.deconcept.FlashObjectUtil=="undefined"){com.deconcept.FlashObjectUtil=new Object();}
com.deconcept.FlashObject=function(_1,id,w,h,_5,c,_7,_8,_9,_a,_b){
if(!document.createElement||!document.getElementById){return;}
this.DETECT_KEY=_b?_b:"detectflash";
this.skipDetect=com.deconcept.util.getRequestParameter(this.DETECT_KEY);
this.params=new Object();
this.variables=new Object();
this.attributes=new Array();
this.useExpressInstall=_7;
if(_1){this.setAttribute("swf",_1);}
if(id){this.setAttribute("id",id);}
if(w){this.setAttribute("width",w);}
if(h){this.setAttribute("height",h);}
if(_5){this.setAttribute("version",new com.deconcept.PlayerVersion(_5.toString().split(".")));}
this.installedVer=com.deconcept.FlashObjectUtil.getPlayerVersion(this.getAttribute("version"),_7);
if(c){this.addParam("bgcolor",c);}
var q=_8?_8:"high";
this.addParam("quality",q);
var _d=(_9)?_9:window.location;
this.setAttribute("xiRedirectUrl",_d);
this.setAttribute("redirectUrl","");
if(_a){this.setAttribute("redirectUrl",_a);}
};
com.deconcept.FlashObject.prototype={setAttribute:function(_e,_f){
this.attributes[_e]=_f;
},getAttribute:function(_10){
return this.attributes[_10];
},addParam:function(_11,_12){
this.params[_11]=_12;
},getParams:function(){
return this.params;
},addVariable:function(_13,_14){
this.variables[_13]=_14;
},getVariable:function(_15){
return this.variables[_15];
},getVariables:function(){
return this.variables;
},createParamTag:function(n,v){
var p=document.createElement("param");
p.setAttribute("name",n);
p.setAttribute("value",v);
return p;
},getVariablePairs:function(){
var _19=new Array();
var key;
var _1b=this.getVariables();
for(key in _1b){_19.push(key+"="+_1b[key]);}
return _19;
},getFlashHTML:function(){
var _1c="";
if(navigator.plugins&&navigator.mimeTypes&&navigator.mimeTypes.length){
if(this.getAttribute("doExpressInstall")){
this.addVariable("MMplayerType","PlugIn");
}
_1c="<embed type=\"application/x-shockwave-flash\" src=\""+this.getAttribute("swf")+"\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\"";
_1c+=" id=\""+this.getAttribute("id")+"\" name=\""+this.getAttribute("id")+"\" ";
var _1d=this.getParams();
for(var key in _1d){_1c+=[key]+"=\""+_1d[key]+"\" ";}
var _1f=this.getVariablePairs().join("&");
if(_1f.length>0){_1c+="flashvars=\""+_1f+"\"";}
_1c+="/>";
}else{
if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","ActiveX");}
_1c="<object id=\""+this.getAttribute("id")+"\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\">";
_1c+="<param name=\"movie\" value=\""+this.getAttribute("swf")+"\" />";
var _20=this.getParams();
for(var key in _20){_1c+="<param name=\""+key+"\" value=\""+_20[key]+"\" />";}
var _22=this.getVariablePairs().join("&");
if(_22.length>0){_1c+="<param name=\"flashvars\" value=\""+_22+"\" />";
}_1c+="</object>";}
return _1c;
},write:function(_23){
if(this.useExpressInstall){
var _24=new com.deconcept.PlayerVersion([6,0,65]);
if(this.installedVer.versionIsValid(_24)&&!this.installedVer.versionIsValid(this.getAttribute("version"))){
this.setAttribute("doExpressInstall",true);
this.addVariable("MMredirectURL",escape(this.getAttribute("xiRedirectUrl")));
document.title=document.title.slice(0,47)+" - Flash Player Installation";
this.addVariable("MMdoctitle",document.title);}
}else{this.setAttribute("doExpressInstall",false);}
if(this.skipDetect||this.getAttribute("doExpressInstall")||this.installedVer.versionIsValid(this.getAttribute("version"))){
var n=(typeof _23=="string")?document.getElementById(_23):_23;
n.innerHTML=this.getFlashHTML();
}else{if(this.getAttribute("redirectUrl")!=""){document.location.replace(this.getAttribute("redirectUrl"));}}}};
com.deconcept.FlashObjectUtil.getPlayerVersion=function(_26,_27){
var _28=new com.deconcept.PlayerVersion(0,0,0);
if(navigator.plugins&&navigator.mimeTypes.length){
var x=navigator.plugins["Shockwave Flash"];
if(x&&x.description){_28=new com.deconcept.PlayerVersion(x.description.replace(/([a-z]|[A-Z]|\s)+/,"").replace(/(\s+r|\s+b[0-9]+)/,".").split("."));}
}else{
try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
for(var i=3;axo!=null;i++){
axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+i);
_28=new com.deconcept.PlayerVersion([i,0,0]);}}
catch(e){}
if(_26&&_28.major>_26.major){return _28;}
if(!_26||((_26.minor!=0||_26.rev!=0)&&_28.major==_26.major)||_28.major!=6||_27){
try{
_28=new com.deconcept.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","));
}catch(e){}}}
return _28;
};
com.deconcept.PlayerVersion=function(_2c){
this.major=parseInt(_2c[0])||0;
this.minor=parseInt(_2c[1])||0;
this.rev=parseInt(_2c[2])||0;
};
com.deconcept.PlayerVersion.prototype.versionIsValid=function(fv){
if(this.major<fv.major){return false;}
if(this.major>fv.major){return true;}
if(this.minor<fv.minor){return false;}
if(this.minor>fv.minor){return true;}
if(this.rev<fv.rev){return false;}
return true;
};
com.deconcept.util={getRequestParameter:function(_2e){
var q=document.location.search||document.location.hash;
if(q){var _30=q.indexOf(_2e+"=");
var _31=(q.indexOf("&",_30)>-1)?q.indexOf("&",_30):q.length;
if(q.length>1&&_30>-1){
return q.substring(q.indexOf("=",_30)+1,_31);}}return "";
},removeChildren:function(n){
while(n.hasChildNodes()){
n.removeChild(n.firstChild);}}};
if(Array.prototype.push==null){
Array.prototype.push=function(_33){
this[this.length]=_33;
return this.length;};}
var getQueryParamValue=com.deconcept.util.getRequestParameter;
var FlashObject=com.deconcept.FlashObject;

另外提供了:Flash版本检测

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FlashObject embed by Geoff Stearns (show player version) @ deconcept</title>
<!-- FlashObject embed by Geoff Stearns [e-mail] http://blog.deconcept.com/ -->
<script type="text/javascript" src="flashobject.js"></script>
<style type="text/css">
 
 body {
  background-color: #eeeeee;
  font: .8em/1em verdana,arial,helvetica,sans-serif;
 }

 #info {
  width: 600px;
  overflow: auto;
 }

</style>
</head>
<body>

 <div id="flashversion">
  You do not have the Flash plugin installed, or your browser does not support Javascript (you should enable it, perhaps?)
 </div>
  <script type="text/javascript">
   // <![CDATA[
    
    var version = com.deconcept.FlashObjectUtil.getPlayerVersion();
    if (document.getElementById && (version['major'] > 0)) {
     document.getElementById('flashversion').innerHTML = "You have Flash player "+ version['major'] +"."+ version['minor'] +"."+ version['rev'] +" installed.";
    }

   // ]]>
  </script>

 <div id="info">
  <p>
  This page displays your current Flash player version using Javascript.
  </p>
 </div> 
</body>
</html>