フォーラム一覧   -   トピック一覧
   ActionScript 3.0
     マウス ホイール時に，ブラウザのスクロールをさせたくない		投稿するにはまず登録を

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 トピック
midge
投稿日時: 2007-5-15 19:37
やや お馴染みさん
登録日: 2007-5-15
居住地: 金沢市
投稿: 9
マウス ホイール時に，ブラウザのスクロールをさせたくない
FlashはActionScript 3.0から入った初心者です，よろしくお願います．

質問は，次の通りです．
フラッシュアプリでマウスホイールを処理しているのですが，
ブラウザの画面も上下にスクロールしてしまいます．

フラッシュアプリにフォーカスがある場合に
このブラウザ画面のスクロールを完全に無くしたいのですが，
なにかいい方法はないでしょうか？

次のようなサンプルで考えています．

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="test()" layout="absolute" width="500" height="350">
    <mx:Script>
        <![CDATA[

   			/** 構築を完了した */
   			public function test():void {
				stage.scaleMode = flash.display.StageScaleMode.NO_SCALE;
				
				addEventListener( MouseEvent.MOUSE_WHEEL, onMouseWheel );
   			}

			protected function onMouseWheel( event:MouseEvent ):void {
				textArea.text = event.delta.toString();
				
				event.delta = 0;
				event.stopImmediatePropagation();
				event.preventDefault();
   			}

        ]]>
    </mx:Script>
    <mx:Canvas width="500" height="350" backgroundColor="#008000" horizontalCenter="0" verticalCenter="0">
        <mx:TextArea id="textArea" x="62.5" y="157" width="375" height="36" borderStyle="inset"/>
    </mx:Canvas>

</mx:Application>

よろしくお願いします．
venzou
投稿日時: 2007-5-15 21:28
ご主人様
登録日: 2007-1-25
居住地: 穴の中
投稿: 101
Re: マウス ホイール時に，ブラウザのスクロールをさせたくない
こんばんは

JavaScript と ExternalInterfaceを使う方法はいかがでしょうか？

sample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="test()" layout="absolute" width="500" height="350"
  activate="activateEvt()"
  deactivate="deactivateEvt()"
  >
  <mx:Script>
    <![CDATA[

    import flash.external.ExternalInterface;
    //JavaScriptの関数を呼び出す処理
    private function wheelEnabled(flg:Boolean):void {
      if (ExternalInterface.available) {
        try {
          ExternalInterface.call("wheelEnabled", flg);
        } catch (error:SecurityError) {
          trace("SecurityError: " + error.message);
        } catch (error:Error) {
          trace("Error: " + error.message);
        }
      }else{
        trace("External interface is not available");
      }
    }

    //アクティブ時にブラウザのホイールを無効に
    private function activateEvt():void {
      wheelEnabled(false);
    }

    //ディアクティブ時にブラウザのホイールを有効に
    private function deactivateEvt():void {
      wheelEnabled(true);
    }

    /** 構築を完了した */
    public function test():void {
      stage.scaleMode = flash.display.StageScaleMode.NO_SCALE;

      addEventListener( MouseEvent.MOUSE_WHEEL, onMouseWheel );
    }

    protected function onMouseWheel( event:MouseEvent ):void {
      textArea.text = event.delta.toString();

      event.delta = 0;
      event.stopImmediatePropagation();
      event.preventDefault();
    }

    ]]>
  </mx:Script>

  <mx:Canvas width="500" height="350" backgroundColor="#008000" horizontalCenter="0" verticalCenter="0">
    <mx:TextArea id="textArea" x="62.5" y="157" width="375" height="36" borderStyle="inset"/>
  </mx:Canvas>

</mx:Application>

sample.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sample</title>
<script language="javascript" type="text/javascript">
<!--
//ブラウザのホイールの状態（初期値有効）
var _wheelEnabled = true;

//Flashから呼ばれる関数
function wheelEnabled(flg){
  _wheelEnabled = flg;
}

//ホイールイベントの処理
function wheel(event){
  if(!_wheelEnabled){
    if(!event){
      event = window.event;
    }
    if(event.preventDefault){
      event.preventDefault();
    }
    event.returnValue = false;
  }
}

//イベントリスナーの登録
if(window.addEventListener){
  window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;

//-->
</script>
</head>
<body>
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
    id='sample'
    codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab'
    width='500'
    height='350' 
    >
    <param name='movie' value='sample.swf' />
    <param name='bgcolor' value='#FFFFFF' />
    <param name='quality' value='high' />
    <param name='allowScriptAccess' value='sameDomain' />
    <embed pluginspage='http://www.adobe.com/go/getflashplayer'
        name='sample'
        src='sample.swf'
        width='500'
        height='350'
        bgcolor='#FFFFFF'
        play='true'
        loop='false'
        quality='high'
        allowScriptAccess='sameDomain'
        type='application/x-shockwave-flash' >
    </embed>
</object>
<div style="height:1024px"></div>
</body>
</html>


WindowsXPの IE6、Firefox2で動作確認。
Opera8はホイールイベントに対応してない。
Opera9は対応しているらしいです。（未確認）
midge
投稿日時: 2007-5-16 10:23
やや お馴染みさん
登録日: 2007-5-15
居住地: 金沢市
投稿: 9
Re: マウス ホイール時に，ブラウザのスクロールをさせたくない
ありがとうございます！

返事が遅くなりました．
ブラウザ依存になりますが，メジャーなブラウザでは大丈夫そうなので，なんとかなりそうです．

WindowsXPのOpera9でも動作を確認できました．

また，Linux (Debian GNU/Linux 3.1)では，次で動作を確認しました．
　Firefox 1.0,
　Netscape 7.1


以下は蛇足です．

mx.contorols.Listの挙動をみると，
Listのスクロールが上端(または下端)までいってから，ブラウザのスクロールが発生しているので，
Flashのみで制御する方法もあるのかも知れません．
これについては気長に探してみます．

まずは解決策をありがとうございました．
venzou
投稿日時: 2007-5-17 11:14
ご主人様
登録日: 2007-1-25
居住地: 穴の中
投稿: 101
Re: マウス ホイール時に，ブラウザのスクロールをさせたくない
引用：
mx.contorols.Listの挙動をみると，
Listのスクロールが上端(または下端)までいってから，ブラウザのスクロールが発生しているので，
Flashのみで制御する方法もあるのかも知れません．

この状態を再現しようとしてみたのですが、
私の環境では再現できませんでした・・・（＾＾；
(WindowsXP / FlexSDK2.0.1 / FlashPlayer9,0,16,0 / IE6.0, Firefox2.0)

なにか、特別な処理が必要でしょうか？
もし、よろしければ、詳しく教えて下さい。



試したサンプルを書いておきます。

samlpe.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
  <mx:List width="100%" height="100">
    <mx:dataProvider>
      <mx:Array>
        <mx:String>01</mx:String>
        <mx:String>02</mx:String>
        <mx:String>03</mx:String>
        <mx:String>04</mx:String>
        <mx:String>05</mx:String>
        <mx:String>06</mx:String>
        <mx:String>07</mx:String>
        <mx:String>08</mx:String>
        <mx:String>09</mx:String>
        <mx:String>10</mx:String>
      </mx:Array>
    </mx:dataProvider>
  </mx:List>
</mx:Application>

sample.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sample</title>
</head>
<body>
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
    id='sample'
    codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab'
    width='500'
    height='350' 
    >
    <param name='movie' value='sample.swf' />
    <param name='bgcolor' value='#FFFFFF' />
    <param name='quality' value='high' />
    <param name='allowScriptAccess' value='sameDomain' />
    <embed pluginspage='http://www.adobe.com/go/getflashplayer'
        name='sample'
        src='sample.swf'
        width='500'
        height='350'
        bgcolor='#FFFFFF'
        play='true'
        loop='false'
        quality='high'
        allowScriptAccess='sameDomain'
        type='application/x-shockwave-flash' >
    </embed>
</object>
<div style="height:1024px"></div>
</body>
</html>

リスト部分をクリックしてから、ホイールを回しましたが、
リストと同時にブラウザもスクロールしてしまいます。
dyo
投稿日時: 2007-5-17 13:13
お馴染みさん
登録日: 2006-4-3
居住地:
投稿: 15
Re: マウス ホイール時に，ブラウザのスクロールをさせたくない
解決したそうなので問題ないですが、以前同じ様な悩みを自分で解決したときもjavascriptを使用しました。
FlashエリアのonMouseOver Outを判定してアクティブにする方法です。as2ですがas3でも応用できるはずです。

http://dyo.jp/blog/2007/03/flashjsbeta.html

御参考ください。
midge
投稿日時: 2007-5-17 15:50
やや お馴染みさん
登録日: 2007-5-15
居住地: 金沢市
投稿: 9
Re: マウス ホイール時に，ブラウザのスクロールをさせたくない

失礼しました，試してみたのはTextAreaでした．

mx.contorols.TextArea
以下サンプルです．

ScroolTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	applicationComplete="init()" layout="absolute" width="67" height="317">
	<mx:Script>
			public function init():void {
				stage.scaleMode = flash.display.StageScaleMode.NO_SCALE;	// browser に合わせてリサイズしない．
				stage.quality   = flash.display.StageQuality.LOW;			// 初期の画質は「低」
				stage.align     = flash.display.StageAlign.TOP_LEFT;		// 配置の基準は上左
				stage.showDefaultContextMenu = false;						// デフォルトのメニューを表示しない
			}
			
	</mx:Script>
	<mx:Canvas x="0" y="0" width="100%" height="100%">
		<mx:TextArea width="67" height="317" text="11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111" wordWrap="true" horizontalCenter="0" verticalCenter="0" backgroundAlpha="0.46"/>
	</mx:Canvas>
</mx:Application>


ScroolTest.html

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE></TITLE>
</HEAD>
<BODY topmargin="0" leftmargin="0" rightmargin="0" bgcolor="#dddddd">

<div align="center" valign="center">

<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%">
<tr valign="center"><td align="center">

<!--ここから-->
<object
 classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
 id="ScroolTest"
 width="67" height="317">
<param name="bgcolor" value="white">
<param name="loop" value="off">
<param name="quality" value="low">
<param name="movie" value="./ScrollTest.swf">
<EMBED
 src="./ScrollTest.swf"
 quality="low"
 bgcolor="white"
 WIDTH="67" HEIGHT="317"
 align="middle"
 name="ScroolTest"
 type="application/x-shockwave-flash"
 PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</object>
<!--ここまで-->

</td></tr>
</table>

</div>

</BODY>
</HTML>
midge
投稿日時: 2007-5-17 16:01
やや お馴染みさん
登録日: 2007-5-15
居住地: 金沢市
投稿: 9
Re: マウス ホイール時に，ブラウザのスクロールをさせたくない
ご意見ありがとうございます．
実は私も同じことを考えてまして，
AS3で次のように実装しました．

以下，参考まで．

WheelTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="test()" layout="absolute" width="500" height="350"
  activate="activateEvt()"
  deactivate="deactivateEvt()"
	>
    <mx:Script>
        <![CDATA[

			import flash.external.ExternalInterface;
			//JavaScriptの関数を呼び出す処理
		    private function wheelEnabled(flg:Boolean):void {
				if (ExternalInterface.available) {
		        try {
					ExternalInterface.call("wheelEnabled", flg);
	        } catch (error:SecurityError) {
				trace("SecurityError: " + error.message);
        	} catch (error:Error) {
				trace("Error: " + error.message);
    	    }
				}else{
					trace("External interface is not available");
				}
		    }


   			/** 構築を完了した */
   			public function test():void {
				stage.scaleMode = flash.display.StageScaleMode.NO_SCALE;
				
				addEventListener( MouseEvent.MOUSE_WHEEL, onMouseWheel );
				addEventListener( MouseEvent.MOUSE_OVER, onOverFrame, true, 255 );
				addEventListener( MouseEvent.MOUSE_OUT, onOutFrame, true, 255 );
   			}

			protected function onMouseWheel( event:MouseEvent ):void {
				textArea.text = event.delta.toString();
				
				event.delta = 0;
				event.stopImmediatePropagation();
				event.preventDefault();
   			}

		    //アクティブ時にブラウザのホイールを無効に
		    private function activateEvt():void {
				wheelEnabled(false);
		    }

			//ディアクティブ時にブラウザのホイールを有効に
			private function deactivateEvt():void {
				wheelEnabled(true);
			}

		    //プレイヤー上にポインタが来たとき，ブラウザのホイールを無効に
			protected function onOverFrame(event:MouseEvent):void {
				wheelEnabled(false);
			}

		    //プレイヤー上からポインタが外れたとき，ブラウザのホイールを無効に
			protected function onOutFrame(event:MouseEvent):void {
				// 他のコンポーネントをaddChildする場合のチェック
				if ( (event.stageX < 0) || (event.stageX >= this.width) || (event.stageY < 0) || (event.stageY >= this.height) ) {
					wheelEnabled(true);
				}
			}

        ]]>
    </mx:Script>
    <mx:Canvas width="500" height="350" backgroundColor="#008000" horizontalCenter="0" verticalCenter="0">
        <mx:TextArea id="textArea" x="62.5" y="157" width="375" height="36" borderStyle="inset"/>
    </mx:Canvas>

</mx:Application>
niea
投稿日時: 2007-5-18 7:50
お馴染みさん
登録日: 2006-4-2
居住地: Christchurch, NZ
投稿: 11
Re: マウス ホイール時に，ブラウザのスクロールをさせたくない
ちょっとちがうかもしれませんが、スクロールバー自体を消すとどうでしょうか？
<style>
body{
overflow:hidden
}
</style>
IE、FireFoxでは正常に動きますが、オペラでは無理っぽいです。ネスケは未確認。たぶん動くかな？


----------------
DisDei
FLV DL Link Generator (SourceForge Project FLVDLG)
midge
投稿日時: 2007-5-18 9:13
やや お馴染みさん
登録日: 2007-5-15
居住地: 金沢市
投稿: 9
Re: マウス ホイール時に，ブラウザのスクロールをさせたくない
面白いアイデアですね！

残念ながら今回は，作成したswfをお客さまのHPへ埋め込む形で提供するため，
見た目が変化する実装は難しいですが...

私にはなかった発想なので，刺激になります．
venzou
投稿日時: 2007-5-18 13:12
ご主人様
登録日: 2007-1-25
居住地: 穴の中
投稿: 101
Re: マウス ホイール時に，ブラウザのスクロールをさせたくない
引用：
mx.contorols.TextArea
以下サンプルです．

ありがとうございます。TextAreaで現象を確認できました。

確かに、これが応用出来ればFlashレベルで、
イベントの伝播を止められそうですね。

この現象を解明すべく、ソースを追ってみましたが、
flash.text.TextFieldの内部で処理されてる様なので、
詳細は分かりませんでした。

色々調べて見ましたが、どうもFlexのイベント処理体系とは別の
イベント処理がされている感じです。

確認サンプル
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="init()" >
    <mx:Script><![CDATA[
        private function init():void
        {
            //キャプチャ段階でイベントをリッスン
            stage.addEventListener("mouseWheel", wheelEvt, true);
        }
        private function wheelEvt(e:Event):void
        {
            trace(e.target);
            e.stopPropagation();
        }
    
    ]]></mx:Script>

    <mx:VBox width="100%" height="100%">
        <mx:TextArea width="100%" height="100" fontSize="50"
            text="11111111111111111111111111111111111111111"
            mouseWheel="trace('TextArea:mouseWheel');" />

        <mx:List width="100%" height="100"
            mouseWheel="trace('List:mouseWheel');">
            <mx:dataProvider>
                <mx:Array>
                    <mx:String>01</mx:String>
                    <mx:String>02</mx:String>
                    <mx:String>03</mx:String>
                    <mx:String>04</mx:String>
                    <mx:String>05</mx:String>
                    <mx:String>06</mx:String>
                    <mx:String>07</mx:String>
                    <mx:String>08</mx:String>
                    <mx:String>09</mx:String>
                    <mx:String>10</mx:String>
                </mx:Array>
            </mx:dataProvider>
        </mx:List>
    </mx:VBox>
</mx:Application>

Stageのキャプチャ段階でイベントを止めています。

Listの方にはイベントは届かないので、Listはスクロールしませんが、
TextArea（TextField）には効果がありません。

TextAreaの方もイベントは発生し、イベントを止める処理を通っていますし、
TextAreaのmouseWheelイベントは発生しないので、イベントは止まっているはずですが、
TextAreaのスクロールを止めることは出来ません。


と、いう事で、手の届かない場所で処理されてる感じです。（＾＾；
これを利用するのは難しそうですね。orz
(1) 2 »
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ

投稿するにはまず登録を