Asairo Design

デザイン制作チーム 浅色デザインオフィシャルサイト。web関連やメモの置き場所。熊本県出身のweb制作者。たまに小説。

WEB

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

投稿日:2012年3月30日 更新日:

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でも確認してもらいましたよ?)

-WEB
-, , , ,

執筆者:


  1. […] そこで必要になったのでやり方をメモっておきます(2013年10月25日改訂) […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

投稿テスト

no image

エクセルで方向キーを押すとセルじゃなくて画面が動いちゃうヨーっていう話。

エクセルで困ったときの備忘録

no image

Google ChromeのFacebookツール

Facebookのイイネボタンはほんとに気軽に行えて良いですね。なんとなく「イイ」って思ったらポチっとするだけ。他の人にもこの良さが分かるといいなーと小さな願いを込めたり込めなかったり。  ソーシャル …

CSSハック – IEを退治するには、1行書き加えるだけ。【2013年度版】

CSSハックって色々ありました。 えぇありました。 たくさん泣きましたとも。 泣かせていただきましたとも! IE6がほぼ消滅して(といっても数%で残ってるようですが) IEもデフォルトで10。 6~8 …

sublime text3の設定

自宅だけ、会社だけ、で仕事をする方は一度設定してしまえばそのままってことも多いですが、 色んな会社で仕事をすることが多かった自分の都合上、 だいたい年1くらいで環境設定しているような気がします。 その …

名古屋AC

※虐待防止講演会2017 記事一覧

おススメ書籍(AD)

(AD)