Flash代替画像をjavascriptで表示させる方法と、非iOS環境での確認方法


SyntaxHighlighter が適応されないので追加修正しました。 ついでに補足も足しています。 新しい記事はこちら 「自社サイトさぁ、iPadでフラッシュみれないじゃん!」 って言われて、帰り際に作業をすることになりました。 そこで必要になったのでやり方をメモっておきます

元々のタグ

<script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','745','height','374','src','main','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','main' ); //end AC code </script> <noscript> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="745" height="374"> <param name="movie" value="main.swf" /> <param name="quality" value="high" /> <embed src="main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="745" height="374"></embed> </object> </noscript> これではiPhoneやiPadでは見れないため、コードの書き換えが必要。画像も。 そこで<parm>下にimgタグをいれるだけ、みたいな手法を発見したので試してみる。

  example

<object> <param ....../> <param ....../> <param ....../> <img src="画像パス"> </object> 残念。 FLASHは見れるものの、ipad(3と呼ばれないアレ)で確認したところ、だめでした。 画像表示されない。 次に、javascriptでの表示に変更。

  記述例 example

<head> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/swfobject.js" charset="utf-8"></script> </head> <body> <!-- Flash Area [ --> <div id="flashArea"> <h2><a href="campaign.php" target="_blank"><img src="img/images.jpg" alt="Adobe Flash Playerインストール" width="740" height="535" /></a></h2> <script type="text/javascript"> var so = new SWFObject("main.swf", "flash", "100%", "535", "8", "#fff"); so.write("flashArea"); </script> </div> <!-- ] Flash Area --> </body> 代替画像の設置方法 参照 やったやった!代替画像表示さーれた!

私みたいにjsよくわかってないデザイナーさんのために、<script>の解説

var so = new SWFObject("main.swf"(swfファイルの相対パス), "flash"(任意のタグ), "100%"(横幅), "535"(縦幅), "8"(flashのバージョン), "#fff"(カラー)); 最初あるぇー、表示されぬぇー?って思ったらswfobject.jsを読み込んでなかったという初歩的みす! ちなみにタグ中の「Flashのバージョン」については、 上記のようにバージョンを 8 とした場合、 「バージョン8以上のプレイヤーが入っている場合のみ再生させることが可能」という意味です。 バージョン7以下のプレイヤーで閲覧した場合は再生されません。 iPhoneもiPadも持ってない私は、どうにかしてFLASH環境を再現できる表示確認方法ないかと…。 ありました。 表示確認ツール何かないか探って、Firefoxのアドオンでフラッシュのon/off切り替えできるものをいくつか発見しました。 私的にはこちらで紹介されているPrefBarがよかった。 非表示時に代替画像も確認。(もちろんiPadでも確認してもらいましたよ?)
2012.03.30(金)