トップへ戻るニュースフォーラムFLASH-ML 過去ログBak@Flaダウンロードよくある質問と答
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
メインメニュー
メイン
   迷える子羊の部屋【初心者専用】
     全画面swfの下にあるHTML上のリンクを押せるようにしたい
投稿するにはまず登録を

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
ktribe
Åê¹ÆNo.46807
投稿日時: 2011-1-13 13:02
新米
居住地:
投稿: 3
使用環境:
全画面swfの下にあるHTML上のリンクを押せるようにしたい
お世話になります、初めて投稿します。

縦横100%で全画面表示しているswfを背景透過し、その下のHTMLが見えるページを編集しています。

いろいろ試行錯誤してみるものの、swfより下にあるHTML上のリンクボタンが押せず、困っています。

もともと押せるようなものではないと認識はしていますが、もし可能ならとてもありがたいのですが、、、

ちなみにflexならできる、みたいな記事を見つけたのですが、
これは通常Flashとはやはりベクトルが違うんですよね?


【swf(Flex)の下にあるHTMLリンクをクリックできるようにしたい】
http://www.fxug.net/modules/xhnewbb/viewtopic.php?topic_id=1816&forum=16&post_id=7582


ちなみ現在のソースは以下のようになっています。


■XHTML

<div id="mp3">
<!--url's used in the movie-->
<!--text used in the movie-->
<script language="JavaScript" type="text/javascript">
<!--
if (AC_FL_RunContent == 0 || DetectFlashVer == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if(hasRightVersion) { // if we've detected an acceptable version
// embed the flash movie
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,45,0',
'width', '100%',
'height', '100%',
'src', 'preview',
'quality', 'best',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'top',
'play', 'true',
'loop', 'true',
'scale', 'noscale',
'wmode', 'transparent',
'devicefont', 'false',
'id', 'main',
'bgcolor', '#ffffff',
'name', 'main',
'menu', 'true',
'allowScriptAccess','sameDomain',
'allowFullScreen','true',
'movie', 'preview',
'salign', ''
); //end AC code
} else { // flash is too old or we can't detect the plugin
var alternateContent = 'This content requires the Adobe Flash Player.'
+ '<a href=http://www.macromedia.com/go/getflash/>Get Flash</a>';
document.write(alternateContent); // insert non-flash content
}
}
// -->
</script>


■CSS

/*MP3プレイヤー画面下部固定==============================================*/

#mp3 {
width:100%;
height:100%;
position:fixed;
bottom:0;
left:0;
z-index:0;
}


ちょっと縦に広がるMP3プレイヤーを、画面の下部、フッダーに固定しようとしています。

どうぞ、よろしくお願いいたします。
永井勝則
Åê¹ÆNo.46816
投稿日時: 2011-1-13 23:33
職人
居住地: 白馬村
投稿: 796
使用環境:
Windows 7 :Flash CS4:
10.6.8 :Flash CS5.5
Re: 全画面swfの下にあるHTML上のリンクを押せるようにしたい
リンク先に書かれているアドビページのリンク先が切れているので、Adobeが取り上げている方法が判然としないのですが、
Adobeページのタイトルが「Create a transparent background in Flash movie」となっているので、たぶん以下のような方法かと思います。

なおActionScriptのバージョンが示されていないので、以下では3を使っています。

方法はHTMLで、SWFとリンクを同じ位置に作成し、CSSのzインデックスを変更するJavaScript関数を作成して、それをActionScriptから使用する、という方法です。

以下はHTMLコードの抜粋です。swfobjectを使っています。


<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript">

function setTransparent(str) {
	var flashvars = {};
	var params = {};
	params.wmode = str;
	var attributes = {};
	swfobject.embedSWF("test.swf", "flash", "550", "400", "10.0.0", false, flashvars, params, attributes);
}
</script>

<style type="text/css">

#flash {
	position:absolute;
	width:550px;
	height:400px;
	top:20px;
	border: solid 3px #FF0000;
	z-index:0;
}

#myContent {
	position:absolute;
	width:550px;
	height:400px;
	top:20px;
	border: solid 3px #FF0000;
	z-index:1;
}

#form {
	position:absolute;
	top:450px;
}
</style>
</head>
<body onload="setTransparent('')">
	<div id="flash">
		<p>ここはSWF</p>
	</div>

	<div id="myContent">
		<p>ここはHTML</p>
		 <p><a href="http://www.himco.jp/">ここをクリック</a></>
	</div>

	<div id="form">
		<form>
			<input type="button" value="通常" onClick="setTransparent('')">
			<input type="button" value="透明化" onClick="setTransparent('transparent')">
		</form>
	</div>


FLAファイルのActionScriptでは、ステージのクリックでJavaScript関数に引数をわたして呼び出しています。


if (ExternalInterface.available) 
{ 
    stage.addEventListener(MouseEvent.CLICK, onStageClick);
}

function onStageClick(evt:MouseEvent):void {
	ExternalInterface.call("setTransparent", "transparent");
}


ご希望にかなうかどうか分かりませんが、参考にしてみてください。ただしOSやブラウザ別のテストが必要になると思います。


----------------
永井勝則:
himco.jp :

ktribe
Åê¹ÆNo.46817
投稿日時: 2011-1-13 23:49
新米
居住地:
投稿: 3
使用環境:
Re: 全画面swfの下にあるHTML上のリンクを押せるようにしたい
knagai様、ありがとうございます!!
びっくりです@@;ActionScriptのほうもかかわってくるのですね、、、。うっかり、書き忘れておりました。

せっかく手間暇かけて書いていただいたのに申し訳ございません、実はActionScript2.0を使用しておりました。

まったくわからないわけではないので、まずはしっかり試してみたいと思いますが、もしよろしければ、、、2度手間をかけてしまって大変申し訳ないのですが、2.0の場合はどうなるのか、ご都合さえよろしければご教授いただけないでしょうか。
何卒よろしくお願いいたします。
永井勝則
Åê¹ÆNo.46818
投稿日時: 2011-1-13 23:57
職人
居住地: 白馬村
投稿: 796
使用環境:
Windows 7 :Flash CS4:
10.6.8 :Flash CS5.5
Re: 全画面swfの下にあるHTML上のリンクを押せるようにしたい
ExternalInterfaceの使い方はAS3.0も2.0も変わりません。

call (ExternalInterface.call メソッド)External API を使用したインタラクティブ機能の作成が参考になります。

ActionScriptが関わるかどうかはそのページの仕様次第です。
前の例は、同じ位置にあるSWFとHTMLリンクのzインデックスを変えて重ならせ、それを透過、非透過させる方法の例です。


----------------
永井勝則:
himco.jp :

ktribe
Åê¹ÆNo.46825
投稿日時: 2011-1-15 4:14
新米
居住地:
投稿: 3
使用環境:
Re: 全画面swfの下にあるHTML上のリンクを押せるようにしたい
遅くなってしまい申し訳ございません。
ご教授いただきました情報をもとに編集を行い、無事動作成功することができました。
ありがとうございます!
これで、FlashとJavaScriptの連携でもっといろいろなことができるんじゃないかと、視野が広がった気がします。

大変丁寧にご対応いただきまして、感謝しております!
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ

投稿するにはまず登録を
 
Copyright (C) 2003 FLASH-japan. All rights reserved.
Powered by Xoops