レイヤー上でswfを表示させるには。

質問

既にある特定のページ（html）上にレイヤーを作り
そこでswfのアニメーションを動かせないかという依頼が来ました。
http://www.dac.co.jp/service/eyeblaster.asp
ここの画面中程のサンプルサイト画面をクリックして出てくるようなものです。

どなたか、このようなものを作成する具体的な方法・サンプルなどが記載してあるサイトなどご存じないでしょうか？

（上記のようなことができれば、レイヤー機能以外の方法でも構いません。）

よろしくお願いします。

回答No.2

HapHands · ベストアンサー

参考URLのご質問と同様のものかと思います。

Flashで、パブリッシュ設定の「HTML」タブで「ウィンドウモード」を「透明表示」に設定して書き出したタグを使えばよいと思います。
ただし、環境依存度が高い（対応しているブラウザの種類やバージョンが限られる）ので、その点の対応を考える必要があります。

「質問：HTMLページにFLASHのレイヤー？」http://oshiete1.goo.ne.jp/kotaeru.php3?q=833072

参考URL：

http://oshiete1.goo.ne.jp/kotaeru.php3?q=833072

お礼

お礼が遅くなってしまい申し訳ありません。

参考URLありがとうございました。
#1さんのお礼欄にもかいたのですが、無事レイヤー上にswfを配置することはできたのですが、
おっしゃるとおり、swfの透明表示対応問題が発生し、今回のプロジェクトでは見送ることになってしまいした。

ですが、大変参考になりました。
ありがとうございました。

回答No.3

pingu98

普通にスタイルシートでレイヤを作り、JavaScriptでレイヤの表示を制御すればいいのでは？思うのですが。。
今ひとつ何が問題のポイントとなっているのかはっきりしません。
また私自身、swfの使用経験がなく、DreamWeaver等も使ったことが無いので具体的にお答えできないのが申し訳ないところですが、、SVGを使ったページ(http://1st.sunnyday.jp)をテキストエディタで作成中なので、その経験から何かの参考程度になればという事で以下に申し上げます。

・既存のページにレイヤを追加し表示する。
HTMLのdiv要素等でBOX(いわゆるレイヤ)をつくり、スタイルシート(CSS)で位置指定をする。
CSSではpositionやz-index、visibilityの指定がポイントになると思います。
これでswfに限らず、あらゆるテキストや画像を既存ページの上に重ねて表示する事ができます。

・レイヤを移動させたり表示／非表示を切り替える。
JavaScriptでCSSのpositionやvisibilityを書き換える事で可能になります。
例：
document.getElementById(レイヤのID).getStyle().setProperty('visibility','hidden');

・swfをレイヤ上に配置する。
ここについて私はあまり詳しくないのですが、例えばSVGの場合は、
<object type="image/svg+xml" data="url" width="xx" height="yy">
<param name="src" value="url" /> /* SVGのソースurl */
<param name="wmode" value="transparent"/> /* SVGの透過指定 */
</object>
色々なwebのソースを見ると、swfの場合もこれと似た記述の様ですが…いかんせん経験がないのでスミマセン。。

と、概ねこの３つの手順で作成できる、、と思いサンプルになるサイトを探したところ、exciteのトップページが(投稿日現在)これですね。

具体的な作成方法についての解説ページは、ばっちりあてはまる物をみつけるのが難しいかと思いますが、上記手順毎に絞って検索するとヒットしやすいかと思われます。

お礼

詳しい説明をありがとうございました。

無事レイヤー上でswfを表示させることはできたのですが、Macのクラシック環境ではswfの背景を透明表示させることができないことが判明し、今回のプロジェクトでは見送ることになってしまいました。

ですが、今後の為にも大変参考になりました。
ありがとうございました。

回答No.1

noname#222916

サンプルにあるサイトの場合、ポップアップで出てきたウインドウ全体をFlashで作っているようですが…。
HP作成ソフトが何か書かれていないので、お持ちのソフトでも同じかどうかはわかりませんが。
とりあえず、ドリームウィーバーでの話。
ローカルで試しただけですが、既存のページにレイヤーを作って、既存の適当なswfを放り込んで見たところ、サンプルのように、既存HTMLの上でswfが動作しました。
特に設定とかは何もしていません。

お礼

お礼が遅くなってしまい申し訳ありません。

質問させていただく前にこちらでもDreamweaverを使用しテストしてみたのですが、何故かうまくいかず、何か参考になるものがないかと思った次第でした。
しかし、chunx2さんのご回答を読み、再度チェレンジしましたところ、うまくレイヤー上にswfを配置することができました。
ありがとうございました。

ただし、swfの背景の透明化はMacのクラシック環境では対応していないことがわかり、クライアントとの相談で今回は見送ることになってしいまいました。
せっかく回答をいただいておきながら
結果的には使用しないことになってしまいましたが、
大変参考になりました。
ありがとうございました。