今や廃れた技術となりつつあるFLASHですが、PCブラウザではまだまだ健在のようですね。
もちろんスマホではAndroidにも見捨てられ、残念な技術となっている様子もありますが、
ゲーム業界にはまだまだ必要な技術かもしれません。
swfファイルのzindex
FLASHにwmodeという属性がセットされていない場合、CSSのz-indexをセットしてもSWFのエレメントよりも手前にオブジェクトが表示できなくなる。
これはもうFLASHの仕様としか言いようがなく、HTMLのルールを無視していることは間違いないです。
でも、解決法は簡単でwmode="transparent"という属性をセットするだけなんですね。
でも、いちいちHTMLソースコードを書き直すのが面倒くさいという場合の為にjavascriptで強制的にwmodeをセットするライブラリを作ってみました。
ソースコード
swf.js
var $lib = {
//swf-hack（wmode=transparent）;
swf:{
set:function(wmode){
//IE;
if(navigator.userAgent.indexOf("MSIE")!=-1){
this.proc.ie(wmode);
}
else if(navigator.userAgent.indexOf("Opera")!=-1){
this.proc.op(wmode);
}
else if(navigator.userAgent.indexOf("Firefox")!=-1||navigator.userAgent.indexOf("Safari")!=-1||navigator.userAgent.indexOf("Chrome")!=-1){
this.proc.ff(wmode);
}
},
//除外判定;
exclude:{
jogai:[],
chk:function(jogaiId){
for(var i=0;i<this .jogai.length;i++){
if(jogaiId == this.jogai[i]){return true;}
}
return false;
}
},
proc:{
ie:function(wmode){
var object=document.getElementsByTagName("object");
for(var obj in object){
if(typeof(object[obj])!='object'){continue}
// if(!object[obj].src){continue}
// if(!object[obj].getElementsByTagName("param").length){continue}
var ch = object[obj].childNodes;
var flg=0;
for(var i=0;i<ch.length;i++){
if(ch[i].tagName=='PARAM'){
flg++;
break;
}
}
if(!flg){continue}
var html = object[obj].outerHTML;
if(!html){continue;}
if(wmode){
var wmode2 = "<PARAM NAME='WMODE' VALUE='OPAQUE'>";
}
else{
var wmode2 = "<param NAME='WMODE' VALUE='TRANSPARENT'/>";
}
if(html.match(/<object (.*?)>(.*?)$/im)){
html = "<object "+RegExp.$1+">"+wmode2+RegExp.$2;
}
var div = document.createElement("div");
div.style.display="inline";
div.innerHTML = html;
object[obj].parentNode.replaceChild(div,object[obj]);
}
var embed=document.getElementsByTagName("embed");
for(var emb in embed){
if(typeof(embed[emb])!='object'){continue;}
var html2 = embed[emb].outerHTML;
if(!html2){continue;}
if(wmode){
var wmode2 = " WMODE='OPAQUE' ";
}
else{
var wmode2 = " WMODE='TRANSPARENT' ";
}
if(html2.match(/<embed (.*?)/>$/im)){
html2 = "<embed "+RegExp.$1+wmode2+"/>";
}
var div2 = document.createElement("div");
div2.style.display="inline";
div2.innerHTML = html2;
embed[emb].parentNode.replaceChild(div2,embed[emb]);
}
},
ff:function(wmode){
var object=document.getElementsByTagName("object");
for(var obj in object){
if(typeof(object[obj])!='function' || object[obj].innerHTML == undefined){continue;}
pa = document.createElement('param');
pa.name='wmode';
if(wmode){
pa.value='opaque';
}
else{
pa.value='transparent';
}
object[obj].appendChild(pa);
}
var embed=document.getElementsByTagName("embed");
if(embed.length){
for(var i=0;i<embed .length;i++){
if(typeof(embed[i])!='function'){continue;}
//object-embed記述;
if(embed[i].parentNode.tagName == 'OBJECT'){
var html = embed[i].parentNode.innerHTML;
if(html.match(/(.*?)<EMBED(.*?)/>/im)){
if(wmode){
html = RegExp.$1+"<embed wmode='opaque'"+RegExp.$2+"/>";
}
else{
html = RegExp.$1+"<embed wmode='transparent'"+RegExp.$2+"/>";
}
}
embed[i].parentNode.innerHTML = html;
}
//embedのみ記述;
else{
var str="<embed ";
for(var e in embed[i]){
if(typeof(embed[i][e])!='string'){continue}
str+= e + "='"+embed[i][e]+"' ";
}
if(wmode){
str+="wmode='opaque'/>";
}
else{
str+="wmode='transparent'>";
}
var div = document.createElement("div");
div.style.display="inline";
div.innerHTML = str;
embed[i].parentNode.replaceChild(div,embed[i]);
}
}
}
},
op:function(wmode){
var embed=document.getElementsByTagName("embed");
if(embed.length){
for(var i=0;i<embed .length;i++){
if(typeof(embed[i])!='object'){continue;}
//object-embed記述;
if(embed[i].parentNode.tagName == 'OBJECT'){
var html = embed[i].parentNode.innerHTML;
if(html.match(/(.*?)<EMBED(.*?)/>/im)){
if(wmode){
html = RegExp.$1+"<embed wmode='opaque'"+RegExp.$2+"/>";
}
else{
html = RegExp.$1+"<embed wmode='transparent'"+RegExp.$2+"/>";
}
}
embed[i].parentNode.innerHTML = html;
}
//embedのみ記述;
else{
var str="<embed ";
for(var e in embed[i]){
if(typeof(embed[i][e])!='string'){continue}
str+= e + "='"+embed[i][e]+"' ";
}
if(wmode){
str+="wmode='opaque'/>";
}
else{
str+="wmode='transparent'>";
}
var div = document.createElement("div");
div.style.display="inline";
div.innerHTML = str;
embed[i].parentNode.replaceChild(div,embed[i]);
}
}
}
}
}
}:
};
実行
swf.jsを事前に読み込んでおいて、FLASH記述の後ろに下記scriptタグを挿入するだけでOK。
<script type="text/javascript" src="swf.js"></script>
<script type="text/javascript">$lib.swf.set();</script>
0 件のコメント:
コメントを投稿