ウェブサイトにFlash画像(SWF)を設置する方法

2023/08/09 00:44

このQ&Aのポイント

Mt4でサイトを作成中の方へ、swfobject.jsを使ってウェブサイトにFlash画像（SWF）を設置する方法を教えます。
掲載がうまくできない場合に表示されるテキストの問題についても解説します。
参考にしたサイトやコードの追加方法についても説明します。

ベストアンサー

ウェブサイトにFlash画像(SWF)を設置する方法を教えてください。（MT4, swfobject.jsを使用）

2009/07/20 13:57

こんにちは。Mt4でサイトを作成中です。 swfobject.jsを使ってメインページ（最初のページ）でFlash画像を入れたいのですが、掲載がうまくできません（Ｆｌａｓｈが対応していない場合に出すテキストが表示されている状態です）。参考にさせてもらったサイトです。 http://www.trick7.com/blog/2006/09/12-165342.php サイトにフラッシュを入れるために追加したＨＴＭLです。 Head内 <script type="text/javascript" src="http://nz-highschool.com/js/swfobject.js"></script> Body内 <div id="flashcontent"> ニュージーランド高校留学センターのトップメイン画像 </div> <script type="text/javascript"> var so = new SWFObject("http://nz-highschool.com/images/otameshi2.swf", "short", "625", "200", "7", "#fff"); so.write("shortFlash"); </script> 私のサイトのＵＲＬは下記です。（フラッシュの部分は上記からいじってないので、今の状態も確認していただけます。） http://nz-highschool.com かなり苦戦しているので、誰か助けてください。よろしくお願いします。

kazuyo915
お礼率0% (0/17)

画像・動画・音楽編集
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

BlurFiltan
ベストアンサー率91% (1611/1754)

2009/07/21 19:12 回答No.2

＃１です。参考にされたサイトは > SWFObject（現在var1.4）をダウンロードする。と書かれてあります。一方，よく見ると，サイトで使っていらっしゃる swfobject.js は var 2.2 のようですよ...。こちらの方が，まだ良いかと思います↓。八角研究所 FlashをHTMLに貼るライブラリ swfobject 2 を使う http://www.hakkaku.net/articles/20080917-269 Web は「日進月歩」，「300歩進んで200歩下がる」特に Flash 系はバージョンにご注意を。それと細かい点全てにご注意を。

質問者

補足 2009/07/22 00:42

ありがとうございます！！無事Ｆｌａｓｈが映りました。Ｖｅｒｓｉｏｎって大事なんですね。本当にありがとうございました！！

その他の回答 (1)

BlurFiltan
ベストアンサー率91% (1611/1754)

2009/07/20 15:17 回答No.1

div の id 属性（id名）と， SWFObjectクラスの write() メソッドを実行する引数とがズレているからだと思います。　　　　　　　　　↓★div の id 属性（id名) <div id="flashcontent"> ニュージーランド高校留学センターのトップメイン画像 </div> 　　<script type="text/javascript"> 　　…略… 　　so.write("shortFlash"); 　　　　　　　　　　↑★write() メソッドを実行する引数　　</script>

質問者

補足 2009/07/20 23:43

ID名とWrite()の中を「flashcontent」で統一したのですが、やっぱりFlashは見れないです。（やっぱりFlashが映らないときのテキストが表示されています。）他に、何かまずい個所があるんでしょうか？？

関連するQ&A

Flashの表示について
FlashをSWFオブジェクトで表示しています。回線が遅い場合、Flashが読み込まれる前に一瞬、Flashの表示領域の高さ(CSS)が反映されていない?のか、Flashの下に表示すべき領域がFlashの部分に表示されレイアウトが崩れます。下記にFlashを表示させる部分に関係のあるHTMLとCSSを記載いたします。 ---------- HTML ---------- ・・・・・・・・・・・・・ <head> <script type='text/javascript' src='js/jquery-1.2.6.min.js'></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript" src="js/swfobject.js"></script> </head> <body> ・・・・・・・・・・・・・・・・・・・・・・・・・・ <div id="top">・・・・・</div> <div id="flash"></div> <script type="text/javascript"> var flashvars = null; var params = { bgcolor: "#●●●"}; swfobject.embedSWF("movie.swf", "movie", "840", "250", "9.0.0","expressInstall.swf", flashvars, params); </script> <div id="buttom">・・・・</div> ---------- CSS ---------- #flash { width: 840px; height: 250px; } CSSの250pxが効いていないのかFlash領域の高さがない状態で、上のコンテンツ(div id="top">・・・・</div>)のすぐ下にコンテンツ(<div id="buttom">・・・・</div>)が表示されてしまいます。解決策に関してどのようなことでも良いので教えてください。よろしくお願いいたします。
- ベストアンサー
- その他([技術者向] コンピューター)
slidr.jsの設置方法について教えてください
slidr.js（　http://www.bchanx.com/slidr　）をオフィシャルサイト、下記ページを参考に設置しようとしているのですが、スライドが自動再生しません。ー参考にしたページー https://github.com/bchanx/slidr/blob/master/README.md 原因として考えられることがあれば教えてください。タグは以下のように作りました。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>タイトル</title> <link rel="stylesheet" type="text/css" href="PATH" > </head> <body> <header>ヘッダー</header> <div id="container"> <div id="slidr-img" style="display: inline-block"> <img data-slidr="one" src="PATH/image1.png"> <img data-slidr="two" src="PATH/image2.png"> <img data-slidr="three" src="PATH/image2.png"> </div> </div> <footer>フッター</footer> <script type="text/javascript" src="PATH/js/slidr.min.js"></script> <script> slidr.create('slidr-img', { 　controls:'none', timing: { 'fade': '3s ease-in' }, transition: 'fade' }).start(); </script> </body> </html> よろしくお願いします。
- ベストアンサー
- JavaScript
JW Playerの"file"にURLに付けた引数を代入したいです。
JW Playerの"file"にURLに付けた引数を代入したいです。たとえば http://example.com/example.html?abcd.mp4 とした場合、example.html内のhtmlコードが <script type='text/javascript' src='swfobject.js'></script> <div id='mediaspace'>This text will be replaced</div> <script type='text/javascript'> var so = new SWFObject('player.swf','mpl','800','600','9'); so.addParam('allowfullscreen','true'); so.addParam('allowscriptaccess','always'); so.addParam('wmode','opaque'); so.addVariable("type", "lighttpd"); so.addVariable('file','abcd.mp4'); so.addVariable('controlbar','over'); so.write('mediaspace'); </script> となるようにしたいです。お力添えお願い申し上げます。
- ベストアンサー
- JavaScript
jqueryプラグインの設置方法
すみません、超初心者です。コチラのサイト（http://laquu.com/plugin/innerslide/demo）の「インナースライド」プラグインを導入したいのですが、カーソルを載せてもピクリとも反応しません。自分で書いたソースはこんな感じです.↓ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../jquery.laquu.custom-65049.js"></script> <script> jQuery(function(){ laquu("#innerslide1").innerSlide(); }); </script> <body> <div class="innerslide-panel"> <div id="innerslide1"> <p>カーソル載せる</p> <div class="laquu-innerslide"> スライドする内容 </div> </div> </div> </body> ちなみに今はサーバーにはアップロードしておらず、完全にローカルでプレビューしています。もしかして.jsファイルをサーバーにアップロードしなくては動かないのでしょうか？？？無知で申し訳ありません、ご回答宜しくお願い致します。
- 締切済み
- JavaScript
SWFObjectでFlexに変数を渡す方法
SWFObjectでFlexに変数を渡す方法がわからず悩んでいます。簡単なサンプルとして、SWFObjectで渡した変数をAlertで表示するFlexを書こうとしています。FlexもSWFObjectも勉強を始めて間もないので根本的に間違っているところがあると思いますが、自分で考えてうまくいかなかったプログラムを下に書きます。まず、htmlファイルです。 <html><body> <script type="text/javascript" src="/js/swfobject.js"></script> <div id="flashcontent"></div> <script type="text/javascript"> var so = new SWFObject("foo.swf", "hogemovie", "200", "100", "7", "#336699"); so.addVariable("message", "hogehoge"); so.write("flashcontent"); </script> </body></html> so.addVariable("message", "huguhugu")で、Flexプログラム内の変数messageに"hogehoge"を代入できると思ったので、Flexプログラムを以下のようにしました。 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="oninit()"> <mx:Script> <![CDATA[ import mx.controls.Alert; public var message:String; private function saySomething(arg:String):void { Alert.show(arg); } private function oninit():void { saySomething(message); } ]]> </mx:Script> </mx:Application> しかし、これではAlertのポップアップは出るものの、"hogehoge"は表示されませんでした。
- ベストアンサー
- Flash
QRcode.jsで生成したQRコードを画像で取得
QRcode.jsを使い下記の下記のコードでQRコードを生成することが出来ます。しかし、そのコードをcanvasを使って画像として取得することは可能みたいですが、そのための方法が分かりません。検索してもjqueryを使用したのが多く占めただせさえjavascriptの素人には無理筋です。 <!DOCTYPE html> <html> <body> <div id="qrcode"></div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> <script type="text/javascript"> var qrcode = new QRCode(document.getElementById("qrcode"), { text: "https://github.com", width: 128, height: 128, colorDark : "#ffffff", colorLight : "#000000", correctLevel : QRCode.CorrectLevel.H }); </script> </body> </html> 最終的には、var image = canvas.toDataURL()の形にして渡したいと思っています。どうかよろしくお願いいたします。
- ベストアンサー
- JavaScript
リンク（img）をクリックできません
互換モードのhtmlに swfobject.jsを使用してflash（swf）を埋め込みました。代替え画像（jpg）を用意してflashの見れないブラウザでは画像が表示されるようになっています。このflashはリンクボタンの役目をするものなので以下のようなタグにしていますが Opera(mac)とIE6(win)にてクリックできず困っています。（OperaではswfがIEではjpgが表示されています） <div class="main"> <a href="http://www.xxxxx.xxx/"><div id="flash1"><img src="image/image.jpg" alt="○○○"width="150" height="100" ></div></a> <script type="text/javascript">swfobject.embedSWF("image/flash.swf", "flash1", "150", "100", "9.0.0");so.write("flash1");</script> なおsafari(mac)やIE(mac）では問題なく動いていますがどうにもこうにも・・・今回はかなり困って途方に暮れています。どなたかお解りの方がおりましたらどうぞよろしくお願いいたします。
- ベストアンサー
- HTML
SWFObject2.2　再生不具合
以下のコードでFLASHの埋め込みを行っています。その際、SWFObjectがバージョン1.7だと問題なくFLASH再生が行われるのですが、バージョンを最新版の2.2に変えるとFLASHに置き換えられず「<a href="http://get.adobe.com/flashplayer">Get Flash</a> to see this player.」こちらのリンクが表示されてしまいます。何か記述方法や環境に問題があるのでしょうか？詳しい方おられましたらよろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <script type="text/javascript" src="swfobject.js"></script> </head> <body> <div id="flvplayer"> <a href="http://get.adobe.com/flashplayer">Get Flash</a> to see this player. </div> <script type="text/javascript"> //<![CDATA[ var flv = new SWFObject("flvplayer.swf", "flvplayer", "480", "384", "9"); flv.addParam("flashvars", "file=test.flv&mute=true"); flv.addParam("allowfullscreen","true"); flv.write("flvplayer"); //]]> </script> </body> </html>
- ベストアンサー
- Flash
フォト蔵の写真をヤフーのブログに載せる方法
フォト蔵(http://photozou.jp/)の写真をヤフーのブログに載せる方法はありますか？前、どこかのブログでフォト蔵のスライドショーをそのままブログの記事に載せてる方を見ました。写真を直接リンクするのではなくこの様な方法をヤフーのブログでもできるのでしょうか？フォト蔵のアルバムページには『この写真を外部のブログにはりつける』という項目があり、それをクリックしますと以下のようなテキストをブログに貼り付けろと出ます。 <div id="photozou_blog120x450_3384_426856">本コンテンツをご覧になるには、Flash Playerプラグインが必要です。<a href="http://www.adobe.com/go/gntray_dl_getflashplayer_jp">FlashのWebサイト</a>よりインストールしてください。</div> <script type="text/javascript" src="http://photozou.jp/player/swfobject.js"></script> <script type="text/javascript" src="http://photozou.jp/player/PhotoBlog.js"></script> <script type="text/javascript"></script> (****には私の写真を特定する数字が入っています) ヤフーのブログにはWikiとHTMLが使えるとありますが、HTMLでも一部のタグしか使えないようなのですが。よろしくお願いいたします。
- 締切済み
- ブログ
SWFObject使用時のリキッドデザイン
SWFObjectを使用してフラッシュのプラグインがない場合は他のソースを読み込み、ある場合はフラッシュをリキッドデザインで表示するように作っています。しかし、リキッドデザインのフラッシュが表示される時に高さを100%にしているのもかかわらず、180pxくらいで表示が切れてしまいます。この現象はIEで起きてしまい、GoogleChromeでは正常に動作しました。他のブラウザでは試していません。自分ではこれ以上どこを修正すればいいか分かりません。どなたかお知恵を貸してください。よろしくお願いします。ブラウザIE8、GoogleChrome4.1.249.1045 スクリプトSWFObject2_2を使用しています。以下、HTMLのソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="main" lang="en" xml:lang="en"> <head> <title>SWFObject 2 static publishing example page</title> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; var params = { quality:'high', scale:'showall', salign:'lt', bgcolor:'#eeeeee', allowScriptAccess:'sameDomain'}; var attributes = {}; swfobject.embedSWF("test.swf", "id", "100%", "100%", "9.0.0", "expressInstall.swf",flashvars,params,attributes);</script> </head> <body> <div id="id"> <p>プラグインが入っていません。</p> </div> </body> </html>
- ベストアンサー
- JavaScript