FLVのランダム再生パーツ


1.

5タイトルほどのflvをランダム再生。


2.

画面がちっこい為、映像内のタイトルが見えない。

パーツ内にダイナミックテキストで

「現時点」で流れているファイルの名前を

判断してそれに即した文字列を表記。


1.ランダム再生に関してはGoogleで


2.文字を表示させる部分を独立して作り

インスタンス名を「url_mc」とする。

そこに以下のアクションスクリプトを記述


onClipEvent (enterFrame){

if(_level0.videoName =="ファイル名1.flv"){this.loadVariables("title01.txt");}
  else if(_level0.videoName =="ファイル名2.flv"){this.loadVariables("title02.txt");}
else if(_level0.videoName =="ファイル名3.flv"){this.loadVariables("title03.txt");}
else if(_level0.videoName =="ファイル名4.flv"){this.loadVariables("title04.txt");}
else if(_level0.videoName =="ファイル名5.flv"){this.loadVariables("title05.txt");}
else if(_level0.videoName =="ファイル名6.flv"){this.loadVariables("title06.txt");}
}


↓こっから下はスクロール用

onClipEvent (data) {
theText.htmlText = message;
theText.autoSize ="left";
maxWidth = theText._width + 240;
play();
}


【解説】

上記のスクリプトを日本語でおkにすると


もし「ファイル名1.flv」を再生してるときは「title01.txt」を読み込んで

スクロール表示してちょ。

そうじゃなくて、もし「ファイル名2.flv」が再生されてたら~

以下同


という意味。


_level0.VideoNameに関しては作成しているムービー表示の深度によって変わってくると思うので

ブログパーツの仕様変更などで作り直した場合は、書き出したのちFlashPlayerのデバッグで

変数の確認などをして追いかけて見つけてください。


title●.txtはもちろんflvが格納されているのと同一フォルダに入れる事。

UTF-8で記述してください。

lightpopを利用して、別htmlを表示させる場合は、

「iframe」をかましたページを作成し、必ず「main/user_data/」内に設置、

及びリンクを貼ること。


表示先のhtmlが

http://********.co.jp/xxxxx.php


かませるhtml

http://***********.net/main/user_data/iframe.html

(htmlの名前は任意でよい)


上記の記述

<iframe src="http://********.co.jp/xxxxx.php " widht=xxx height=xxx>

</iframe>


尚、表示先の文字コードがUTF-8でない場合は

念のためiframe.htmlに文字コード指定のメタ文を入れておくと安心。


lightbox導入にあたり苦労したこと。


1

.jpg画像だけではなく、flvの自動再生も同時に行えるという希望もあり

当初はlightbox+その他のjsで何とかしようとしていたが、

インターフェイスの見た目の相違(CSSいじりなおすのめんどい)

を見てみぬフリをして実験。


インストール環境下では

lightboxとその他の動画再生用jsがバッティングしてしまい、上手く再生できなかった。


結論

jQuaryで作成された「lightpop」を使うべし。

http://dogmap.jp/2007/12/22/jquerylightpopjs/



これさえ組み込めば何でもいける。

但し、他ページをそのまま直で読み込んだ場合、

特に掲示板などcgi,phpを読み込むと、書き込みの際、

画面が「うにょ~ん」と閉じてしまう。

【解決策】

<iframe>を使いましょう。

直に読み込むのではなく、別の<iframe>を組み込んだhtmlを噛ませる事で

あら不思議。快適に使えます。


とりあえずソース


<div id="information">
<ul>
<li>
<a href="URL" id="URL" style="abc">TOP</a>
</li>
<li>
<a href="URL" style="abc" id="左と同じURL">

<div id="URL" style="abc">商品一覧</div></a>
</li>
<li>
<a href="#" style="abc" id="URL">人気シリーズ</a>
</li>
<li>
<a href="#" style="" id="URL">ランキング</a>
</li>
<li>
<a href="URL" style="" id="URL">企画会議室</a>
</li>
<li>
<a href="#" id="URL" style="">BLOGパーツ</a>
</li>
<li>
<a href="#" id="URL" style=""><font size=-3>POPダウンロード</font></a>
</li>
<li>
<a href="#" id="" style="">Link</a>
</ul>
<center>
<img src="メニューバーのURL" id="menubar">

<script type="text/javascript">
var url = location.pathname;
var elm = document.getElementById(location.pathname);
elm.setAttribute("style","background-image:url('http://ロールオーバー状態の画像URL);");
</script>
</div>


これはリンク先=idという扱いにして

javascriptのlocationを用いて無理矢理ロールオーバー状態を保持したもの。

開いているページ=メニュー上のページの時にスタイルシートにて指定した

背景画像に挿し変わるようになっている。

これでページがリフレッシュされても「開いているページ」=ロールオーバー状態が保持される。


忘れずにやらなければいけない事は・・・


1.ロールオーバーメニューの

「商品一覧」のリンク先を新しく登録したカテゴリidに振り分け直す。

いじるところ→

main/data/Smarty/templates/default/site_main.tpl


2.「商品一覧」の(管理画面→デザイン管理→商品一覧→メイン編集)

<!--{ if $category_id>1}-->
<a href="URL=<!--{ $category_id-1}-->">
前月</a>
<!--{/if}-->
<!--{ if $category_id<2}-->
<a href="URL=<!--{ $category_id+1}-->">
翌月</a>
<!--{/if}-->

このif構文の「<2」を新たに追加したカテゴリid番号に振り分けること。


上記は、商品一覧ページにおいてほぼ毎月決まった商品数を管理する上で

「○月発売分」を一つのカテゴリとして扱い、

「先月発売分」「翌月発売分」というように横の時列で移動させるにあたり便利である。

但し、存在しないidを指定するとページ移動が正しく行われなくなってしまうので

if構文を用いて、存在しないid番号を振り分けないようにしたもの。


【日本語で補足】

要は、2月発売分のカテゴリidが「1」。3月発売分のカテゴリidが「2」・・・・としていって

開いている「商品一覧ページ」のパラメータ(商品カテゴリidのカテゴリ番号)

が「1より大きい」時に限って「前月」へのナビゲーションリンクを表示してちょ。って事。

これをやらないと「カテゴリid=0」という存在しないパラメータが出てきちゃう。

翌月分も同様。