POPSブログ

FLASH表示テスト/3

6

  Category:  flash2011/12/23 pops 

jQueryを利用して、「スタートボタン」を付け「ボタン」を押したらFLASHを読み込むようにした。


swfobject.jsを使用したFLASH表示 3

私の場合は一般的な swfobject 実行命令をその場で埋め込み使用しています。swfobject.js (v1.5)は常駐しています。画像も大きい し必ずFLASHをみなければならないと言う人は少ないでしょう。省エネをかねて「スタートボタン」を付けてみた。「スタートボタン」が 押されてからFLASHを読み込む
jqueryも常時読み込んでいる事だし、メチャにならない程度、大いに利用するのが良いと思う。


「スタートボタン」を付けたサンプル

内部FLASHを表示する

/main/flash/CF_SlideShow3b.swf

FLASH表示テスト 専用のSWF CF_SlideShow3b.swf (画像などはXMLに記載)

 

注意、画像を全て読み込んでから実行しますので少し時間がかかります。


JS CSS などの解説

HTML 側の記載例、swfobject 実行命令は書かない、JSが実行する。


flashboxクラスをあたえて、rel に CF_SlideShow3b.swf を記載する

<div class="flashbox" id="sample4" rel="CF_SlideShow3b.swf" style="background-color: #000000; width: 465px; height: 

465px;"> </div>

JS 側の記載例

常時読み込む common.js の中に書いた


flashboxクラスを判定して、swfobject.js を実行するスクリプトを作りアペンドする
FLASH swf は BaserCMS webroot の /main/flash/ にあるものとする
base_urlにパスをかく

//common.js
//共通処理

(function($){
	$(function(){

		//flash-start
		var item_boxs=[];
		var base_url="/main/flash/";
		var i=0;

		$('.flashbox').each(function(i){

			item_boxs[i]=$(this);

			item_boxs[i].bind("click",function(e) {

				var id=$(this).attr('id');
				var url=base_url+$(this).attr('rel');
				var w=$(this).width();
				var h=$(this).height();

				$('<script type="text/javascript"> \
				var so = new SWFObject("'+ url +'", "my-flash", "'+ w +'", "'+ h +'", "10", "#000000"); \
				so.addParam("quality", "high"); \
				so.addParam("allowFullScreen", "true"); \
				so.addParam("wmode", "transparent"); \
				so.addParam("salign", "LT"); \
				so.write("'+ id +'"); \
				</script>').prependTo($(this));

				//background-image
				$(this).css({'background-image':'none'});

				//function-unbind
				$(this).unbind("click");

			});
			i ++;
		});

	});
})(jQuery);

ボタンが押されたら swfobject が実行できるようにしているだけ。\ は小さいYEN記号です。


CSS 側の記載例


ボタンは CSS にかく
/*flashbox*/
.flashbox {
background:#000000 url('/main/images/start_btn.gif') no-repeat center center;
}

ボタン画像 30x30 :

swfobject.js(バージョン1.5の記載です、わたしは古いのを前から使用しています。ここで読み込んでいるのはバージョン1.5)

上の記載例はswfobject.js バージョン1.5です。バージョン2.0の場合、記載が少しだけ違います。文法に従ってください 。


画像URL記載のXML


XML 記載例 一部分だけです
XML は/main/xml/に保存する

<?xml version="1.0" encoding="UTF-8"?>
<data>
	<item>
		<subject>PHOTO題目1</subject>
		<memo>PHOTO説明1</memo>
		<photo>/main/images/testImage10.jpg</photo>
	</item>
	<item>
		<subject>PHOTO題目2</subject>
		<memo>PHOTO説明2</memo>
		<photo>/main/images/testImage11.jpg</photo>
	</item>
	<item>
		<subject>PHOTO題目3</subject>
		<memo>PHOTO説明3</memo>
		<photo>/main/images/testImage12.jpg</photo>
	</item>
</data>


内部FLASHを表示する注意点など

このサイトの場合 webroot は /main になりますから、これを例に表示すると仮定します。
ここに保存用の flash images js xml のフォルダを作り使用しています。マトメテおけば何かと便利です。


swf は /main/flash/ にあるわけです。
xml は /main/xml/ にあるわけです。
image は /main/images/ にあるわけです。


FLASH(swf)内部の XML までのパスをBaserCMS用に変更する


	通常は
		xml/xxxxx.xml
	等と書くところを
		/main/xml/xxxxx.xml
	と記載した


flash表示するにはどうしたらよいのかではなく、表示させるためflashをどのように作るかが問題のようです。
どんな場合でも使用できるように PARAM でパスを受け渡す方法も必要かも知れません。面倒だ。



[ この記事のURL ]


タグ:series , memo , basercms , flash , jquery

[ FLASH表示テスト シリーズ記事 ]

FLASH表示テスト/42012.01.31
FLASH表示テスト/32011.12.23
FLASH表示テスト/22011.12.20
FLASH表示テスト/12011.12.15

 

ブログ記事一覧

年別アーカイブ一覧



[1]