FLASHレイヤーの可能性を考える。その１

FLASHレイヤーの可能性を考える。その１ [Edit]

投稿者：むらけん | 投稿日：2006.09.10 | [アニメ・グラフィックス]

先日発表した”レイヤーを使用したFull Flash”のスクリプトをさらに応用してマルチメディアプレーヤーにしてみました。

前回の記事を知らない方は、今回はそれの応用ですのでこちらを先にお読みください。

前回も文頭で触れましたが、僕はレイヤーの復権はPOPUPに変わるものだと考えます。
ですから、POPUPと言えば・・・と、まず考えてみます。

写真・・・音楽・・・メディアプレーヤーが立ち上がるのもそうか。。。
お、待てよ？これ全部FLASHで外部読み込み出来るじゃん！

というわけで、今回の製作物はマルチメディアプレーヤー（おまけ付き）です。

何がおまけ付かというと、せっかくFLASHなのでテキストの読み込みもつけてみました。（いらないだろ

と、いうわけでまずはこちらをご覧ください。
（今回、外観、動きなどは時間省略のため割愛気味です。最後にソース公開するので、好きなようにいじってみてください。）
http://www.muraken.biz/overlay/overlaymm.html

こちら、表示及び再生している内容は外部で読み込んでいます。
swf自体は一つでJSに直に書き込んであります。
アンカータグをこんな感じで使っています。
<a href="test.flv" rel="overLayMM" type="movie">FLV</a>
<a href="test.jpg" rel="overLayMM" type="photo">PHOTO</a>
<a href="test.mp3" rel="overLayMM" type="sound">MP3</a>
<a href="test.txt" rel="overLayMM" type="text">TEXT</a>

使い方を説明します。
●仕様
【読み込めるもの】
・.flv .jpg .png .gif .mp3 テキストファイル
●htmlへの記述
【アンカータグ内の書き方】
上記例に習って書いてください。
・hrefに"ファイルへのパス"（ファイル名）
・rel に"overLayMM"（レイヤー用のアンカーか判定）
・typeに（ファイルのタイプ）
ファイルがflvなら"movie"
ファイルがjpg,png,gifなら"photo"
ファイルがmp3なら"sound"
ファイルがテキストなら"text"
【head内の記述】
<script type="text/javascript" src="overLayMM.js"></script>
●FLASHを自分で作る場合
・FlashVarsでfileName="ファイル名"とfileType="ファイルのタイプ"が送られてきますので、分岐したりして利用してください。
・Flashを終わらせるにはgetURL("javascript:void(hideFlash());");
・今回は再生ボタンなどを押さないといけない仕様なのでonMouseDownでFlashを終わらせるわけには行かないので、全てCLOSEボタンを用意しました。
・詳しくは以下のソースファイルをご覧ください。

【サンプル】
【注意：追記】
・FireFoxにて、レイヤー表示後、マウススクロールやウィンドウの最小化などをすると、onRleaseの位置がずれます（消えます？）。
現段階の確実な対策としては前回の物のように、onMouseDownにif(hitTest表示物==false)のような条件で、hideFlash();を実行することです。
・FLVに関しては再生中だとFlashを消しても音のみ残るようです。hideFlash()の前に、FLVをstopさせる必要があります。
overLayMM.js
showMM.fla(FLASH8仕様。ノープランで製作したので無駄な部分が多々ありますがご容赦ください。）

今回は安易な発想でメディアプレーヤにしましたが、
まだまだ色々な可能性が秘められてるにおいがプンプンしますので、引き続き追求していきたいと思います。

▽免責事項▽
　このサンプルを使用した場合、または使用できなかった等のいかなる損害も、
　制作者むらけん及び F-site は、その責を負いません。
　ご自身の責任においてご使用ください。

F-site

FLASHレイヤーの可能性を考える。その１ [Edit]

この記事へのコメント