レイヤーを使用したFull Flash [Edit]

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

最近PopUpに変わって需要の出てきたレイヤー。写真を載せるのはよくありますが、そのFlash版を誰でも簡単に使用できるスクリプトを組んでみました。

060909.jpg

最近写真をレイヤーで見せるのが流行ってますよね。（POPUPブロックの影響によるPOPUP代わりみたいなものでしょうが。）
そういうものはJavaScriptが結構公開されているのですが、FLASHはないですよね。（使用したもの自体、見ることもまだあまりないですね。）
そういうわけで組んでみました。

まずは下記URLをご覧ください。
http://www.muraken.biz/overlay/overlayflash.html（”ここをクリック"のところをクリックしてみると、実行されます。）

今回、これを簡単に作れるスクリプトを組みました。

JavaScriptに関しては文末にてソースを置いておきますが、説明するとかなり長くなるので割愛いたします。
今回のスクリプトは作ったFlashをhtml内のaタグ内を仕様通りに記述、及びJavaScriptを呼び出しするだけで、簡単にレイヤーFull Flashが出来てしまうというものです。
かなりブラウザ互換の点で苦労しましたが、とりあえず現在、IE FireFox Safariで動作確認済みです。

●htmlの記述
このhtmlの”ここをクリック1”の部分には以下のタグが書かれています。
<a href="test2.swf" rel="overLayFlash" ver="8,0,0,0">ここをクリック1</a>

これに習い、記述していきます。
【aタグ内への記述】
・hrefにはswfへのパスを記述してください。
・relには"overLayFlash"を記述してください。
・verには呼び出したいFlashPlayerを記述してください。
【head内への記述】
<script type="text/javascript" src="overLayFlash.js"></script>

●Flashの製作について。
【仕様】
・Stage.scaleMode = "noScale";等については、JavaScriptで設定していませんので、Flash側でご自由に設定ください。
・getURL("javascript:void(hideFlash());");により、レイヤーを消すことが出来ます。
・今回僕が製作したサンプルswfは両方とも、onMouseDownイベントに、上記、getURLを設定してあります（強制ではないです。）。
・FireFoxの場合、ステージの縦幅が、広く取られます。
【IEの注意】
IEの場合、インスタンスのない部分にカーソルを持っていくとFlash外に出たと判断されます。
それによりIEの場合に限り以下の現象が起こります。
・インスタンスのない部分では、_xmouse等が参照ません。
・インスタンスのない部分にカーソルがある場合onMouseDown等、マウスイベントが一切取れません。
【IE対策】
・FlashVarsにより、変数_root.br　に　IEの場合"ie"　その他の場合"other"が渡される仕様にしてあります。
・今回用意した”ここをクリック２”のように、IEの場合だけCLOSEボタンを用意する（IE以外では出ません）。
・背景にonResizeイベントを利用してステージと同サイズのインスタンスを置けば、マウスイベントはいつでも受け取れます（デメリットは描画が重くなることです。）今回の”ここをクリック１”はこの方法です。

次回は、今回の製作物を応用したWebコンテンツを紹介したいと思います。

【サンプル】
・overLayFlash.js
・ここをクリック１のFlaファイル(Flash8用)

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

コメント

この記事へのコメント

  1. ●1.ako（2006年09月09日 12:56）

    やばい。これ、やばい。
    私最近コラージュ系デザインにはまってるから、
    レイヤーとか助かるよー

  2. ●2.kousuke（2006年09月09日 20:28）

    まじですごいっす！感動しました。
    使わせていただきます！
    ありがとうございます！

  3. ●3.むらけん（2006年09月09日 22:52）

    >>akoさん
    使えそうだったら使ってみてくださーい。
    >>kousukeさん
    どうぞどうぞー。
    応用して面白いの作っちゃってください。

  4. ●4.blue（2006年09月11日 17:17）

    感動しました。
    ありがとうございます。

    さっそく、使わせていただきます。

  5. ●5.むらけん（2006年09月11日 22:58）

    >>blueさん
    それは何よりです。面白いのできたら見せてくださーい。

  6. ●6.ヘルベチカ（2007年02月28日 12:07）

    lightboxを入れようと思った矢先！！
    すごいもの発見！！

    さっそくテストしてみましたが、、、、
    ページが切り替わり、flashだけの表示に。。。
    さらに、flash自体、左上揃えではなく、
    中央に寄ってしまってます。。。

    むむむ・・・何がおかしいんだろうか＞_＜

  7. ●7.ebi（2007年03月09日 05:47）

    なんじゃこりゃー（優作風）
    ドかっこええがね！
    徹夜明けにええもん見せてもろた...
    使わせていただきます。（＾〜＾）

  8. ●8.むらけん（2007年03月09日 15:27）

    >>ヘルベチカさん
    はじめまして。むらけんです。
    http://www.flash-jp.com/modules/newbb/viewtopic.php?topic_id=6307&forum=11
    こちらにて、似たようなケースのご相談があり、解決しておりますのでご確認ください。

    >>ebiさん
    はじめまして。むらけんです。
    ありがとうございます。是非使ってください。

  9. ●9.UAZ（2007年04月24日 20:09）

    はじめまして。
    どうやってやるんだろう？って試行錯誤してました！
    スバラシイ！
    使わせていただきます。

  10. ●10.ＹＯ（2007年09月12日 05:59）

    初めまして！
    これはすごすぎる！！いただきます！！

  11. ●11.R/A/D（2007年12月07日 17:16）

    Orbitなどのダウンローダー使ってるとレイヤーFlashのリンクをクリックするたびにFlashファイルのダウンロードが実行されてしまいますね。

  12. ●12.ｌｋｙ（2008年06月04日 04:03）

    すごいですね、わたしも使ってみましたhttp://lky1.hp.infoseek.co.jp/

    しかしＨＴＭＬで別のＳＷＦがある場合、クリックして飛び出したＳＷＦは何故か元々ｈｔｍｌにあるｓｗｆに被られちゃいました。。その後私はもう一ページを作ってｓｗｆが乗せてないので全部みられるようになったが。それでは根本的問題には解決してないようなんですか。。。

  13. ●13.ボー（2008年07月09日 13:40）

    むらけんさま＞
    ありがとうございます。使わせていただきます！！

  14. ●14.maa（2009年02月05日 18:14）

    すみません。
    どうも、僕のPCからは「ここをクリック」をクリックすると、別ページにとんでしまって、FLASHのみがみえる状態になり、レイヤー効果を得ることができませんでした。
    これはいったいなぜなのでしょうか？

    仕様
    windows XP
    internet Explorer

  15. ●15.あかねこ★（2009年06月08日 00:09）

    むらけん様＞
    とても勉強になりました！
    使わせていただきます。
    ありがとうございます。

この記事にコメントを書く

記事に対するテクニカルな質問はご遠慮ください（利用規約）。

トラックバック

この記事へのトラックバック

  1. ● レイヤーを使用したFull Flash（2007年07月30日 23:13）

    ここをクリック1 F-site | レイヤーを使用したFull Flash http://f-site.org/articles/2006/09/090...
    from SHOWTIME:WEB STUDY: とあるweb制作者のサイト

  1. ● WEB/Flash（2008年02月21日 18:01）

    先月？のFlash のセミナーであったような、HTMLにレイヤーをかぶせて Flashを表示するという（あのときはブログパーツ）スクリプトがありました。 ...
    from TECH Matari (PukiWiki/TrackBack 0.4)

  1. ● [javascript][Flash]overlayFlash2.jsを作ってみた（2008年08月13日 14:24）

    HTML表示領域をうまくカバーしつつ、全画面をFlash表示で覆う、という仕組みをjavascriptで実現しているスクリプトが公開されています。 ov...
    from octech

  1. ● ALFEE-EGGSのUFOキャッチャー（2008年11月21日 14:42）

    F-siteさんのプログラムを使ってALFEE-EGGSのUFOキャッチャーもど...
    from SWEET HOME TOWN ALFEE-EGGS BLOG

その他の記事