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

パスワード:


パスワード紛失

新規登録
メインメニュー
メイン
   コーダーズルーム【スクリプト系】
     ScrollPaneコンポーネントでのドラッグイベントの取得方法は?
投稿するにはまず登録を

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
flashlite
Åê¹ÆNo.40601
投稿日時: 2008-10-24 2:27
常連
居住地: 東京
投稿: 69
使用環境:
WinXP Win7
Flash CS3,Flash CS5.0

FlashPlayer
FlashLite 1.1、2.0、2.1、3.1(下記)
Docomo SO903i
SH-08A
SoftBank 911T
 922SH
945SHG
au W61SA
S004
Disney DM001SH
Willcom Windows Mobile
 WX341k
ScrollPaneコンポーネントでのドラッグイベントの取得方法は?
オーサリング環境 FlashCS3
AS2.0で制作しています。

ActionScript2.0コンポーネント
ScrollPane内で地図を表示して、ドラッグなどでスクロールすると
別の子Windowの全体サムネイルも同時に動くようなものを作ろうとしてます。

スクロールバーではうまくできたのですが
ScrollPaneコンポーネントでのドラッグスクロールの場合のイベントの取得方法がわからないので
教えてもらえないでしょうか?

ヘルプやWebをしらべてるのですが
・ScrollPaneコンテンツのmouseMoveのイベント取得方法
・ActionScript 2.0 コンポーネントリファレンスガイド のScrollPaneに記述されている
ユーザーがペイン内でコンテンツをドラッグできるようにスクロールペインをセットアップするには、scrollDrag パラメータを true に設定します。すると、コンテンツ上に手の形のカーソルが表示されます。他の多くのコンポーネントと異なり、イベントはマウスボタンが押されるとブロードキャストされ、ボタンが離されるまでブロードキャストが続きます。

どちらも、具体的なやり方までは出来ずに行き詰ってます。


----------------

961832p
Åê¹ÆNo.40604
投稿日時: 2008-10-24 19:30
常連
居住地: Akiruno-shi
投稿: 155
使用環境:
 
:AS3:
- Adobe Flex SDK, Eclipse, AIR GEAR
- LB.Log AS3, Alcon2

:AS2:
- AMES(ASDT, MTASC, Eclipse, swfmill)
- Natural Entry Point Method
- LB.Log, Zeroi

Pro, Firefox, Chromium(Iron), IE

----------------
Pro,
Re: ScrollPaneコンポーネントでのドラッグイベントの取得方法は?
 
実際に自分で試していないのですが、LowLevelEventsクラスはどうでしょうか?

参考リンク:
 F-site | コンポーネントにマウスイベントを追加する


----------------
:961832p:
- だんだんAS3に慣れてきた“なんちゃって”AMES使いの日曜プログラマー

flashlite
Åê¹ÆNo.40618
投稿日時: 2008-10-27 13:16
常連
居住地: 東京
投稿: 69
使用環境:
WinXP Win7
Flash CS3,Flash CS5.0

FlashPlayer
FlashLite 1.1、2.0、2.1、3.1(下記)
Docomo SO903i
SH-08A
SoftBank 911T
 922SH
945SHG
au W61SA
S004
Disney DM001SH
Willcom Windows Mobile
 WX341k
Re: ScrollPaneコンポーネントでのドラッグイベントの取得方法は?
961832pさん
ありがとうございます。
リンク先の野中さんの記事も読み
実際に
LowLevelEvents
を試してみました。

結論からいうと具体的な解決まで至りません。
LowLevelEventsによって、
MouseUp・MouseDownイベントの通知は受け取れるのですが
MouseMoveのイベントは受けられません。
(ドラッグを検出するのにあと一歩なのですが・・・)
そこで、色々ためしたところ

ScrollPaneのコンポーネントインスペクタで
scrollDrag = true だと MouseMove が受け取れず。
scrollDrag = false だとMouseMoveを受け取れる
というところまで確認しました。

肝心のScrollPaneの中をドラッグさせてるときだけ検出しないです。

・ScrollPaneコンテンツのmouseMoveのイベント取得方法
・ActionScript 2.0 コンポーネントリファレンスガイド のScrollPaneに記述されている
ユーザーがペイン内でコンテンツをドラッグできるようにスクロールペインをセットアップするには、scrollDrag パラメータを true に設定します。
すると、コンテンツ上に手の形のカーソルが表示されます。他の多くのコンポーネントと異なり、イベントはマウスボタンが押されるとブロードキャストされ、ボタンが離されるまでブロードキャストが続きます。

どちらも、具体的なやり方までは出来ずに行き詰ってます。


----------------

961832p
Åê¹ÆNo.40619
投稿日時: 2008-10-27 21:08
常連
居住地: Akiruno-shi
投稿: 155
使用環境:
 
:AS3:
- Adobe Flex SDK, Eclipse, AIR GEAR
- LB.Log AS3, Alcon2

:AS2:
- AMES(ASDT, MTASC, Eclipse, swfmill)
- Natural Entry Point Method
- LB.Log, Zeroi

Pro, Firefox, Chromium(Iron), IE

----------------
Pro,
Re: ScrollPaneコンポーネントでのドラッグイベントの取得方法は?
 
flashlite さん、応答ありがとうございます。

実際に自分もLowLevelEventsを試そうとしましたが、「mx.events.LowLevelEvents;」をコード中に入れると、なぜか「parse error Invalid Expression」とでてコンパイルが通りませんでした。
同じ階層のUIEventDispatcherは使ってもでないのでパスは問題なさそうです。「こんな書式見たこと無い」的なことだと思うのですが、たぶん環境のせいなのかもしれません…。[※1]

気を取り直して検索していると、同じScrollPaneのイベントで奮闘されているかたの記事がありました。

 ・AS2.0でUIコンポーネントのイベント取得に一苦労。 - jamblog
 ・AS2.0でUIコンポーネントのイベント取得に一苦労。その2 - jamblog

自分もライブラリのScrollPane.asを見ましたが、中のspContentHolder(ScrollPane.contentプロパティ)にドラッグ処理などのイベントがセットされていたので、LowLevelEventsとあわせて、ScrollPaneではなくspContentHolderにマウスイベントをセットすると上手くいくようです。

それから、同じくScrollPane.asを見ていて、ドラッグ時のonMouseMoveイベントをセットしているstartDragLoop関数に
(ScrollPane.as: 406-407行目)

// emit scroll event in case of Dragging as well
super.dispatchEvent({type:"scroll"});
とあって、ドラッグ中はscrollイベントをどこか(親クラスのScrollView?)に投げているようなので、これはなにかの手がかりなのかなと思いました。

あとこれは逃げかもしれず、すみませんが(苦笑)、全体サムネイルのMCからonEnterFrameなどで、定期的にScrollPaneのh(v)Positionプロパティを取得するのもありなのかなと思いました。

[※1 2008-10-28追記]
調べてみると、LowLevelEventsはstaticイニシャライザというものらしく、「mx.events.LowLevelEvents.classConstruct();」とやることで何とか使えるようになりました。
でも今日、新しいクラスパスを追加してからだと思うのですが、いつの間にか「mx.events.LowLevelEvents;」でも大丈夫になっていました。


----------------
:961832p:
- だんだんAS3に慣れてきた“なんちゃって”AMES使いの日曜プログラマー

961832p
Åê¹ÆNo.40627
投稿日時: 2008-10-30 21:56
常連
居住地: Akiruno-shi
投稿: 155
使用環境:
 
:AS3:
- Adobe Flex SDK, Eclipse, AIR GEAR
- LB.Log AS3, Alcon2

:AS2:
- AMES(ASDT, MTASC, Eclipse, swfmill)
- Natural Entry Point Method
- LB.Log, Zeroi

Pro, Firefox, Chromium(Iron), IE

----------------
Pro,
Re: ScrollPaneコンポーネントでのドラッグイベントの取得方法は?
 
[2008-10-31: わかりにくかったのでソースを追加しました(一部省略)]

先日使えなかったLowLevelEventsが、なぜか大丈夫になったので自分も試してみました。
確かに投稿されてあるように、mouseMoveイベントがScrollPaneのドラッグ時に呼ばれなくなることを確認。
原因を確かめるためにライブラリのLowLevelEvents.asとScrollPane.asの処理の流れを追ってみると、

 ・LowLevelEventsはonRollOver時に、onMouseMoveへフック処理(mouseMoveイベントを発行したあと、オリジナルのonMouseMoveを実行)をセットしている
 ・ScrollPaneは、onPress時にstartDragLoop関数を呼んでonMouseMoveへドラッグ処理をセットしている
 ・onPress時におこなう処理(startDragLoop関数を呼ぶ)は、scrollDragプロパティをtrueへ変更した時にセットしている

こんな感じだったので、ScrollPaneにマウスカーソルが入ってくる→onRollOver発生→onMouseMoveへフック処理をセット→ドラッグするためクリック→onPress発生→onMouseMoveが上書きされる、このような流れのため、ドラッグ時はmouseMoveイベントが発生しなくなるようです。

なんとかできないかなと思い、ScrollPaneのonPressを上書きして、startDragLoopを実行後onRollOverを直接呼出し、再度フック処理を有効にするという無茶苦茶なことをしてしまいました(苦笑)。

a_event.target.content.onPress = function () {
    this._parent.startDragLoop();
    this.onRollOver();
};

これだとドラッグ時でもmouseMoveイベントを受け取れるようになりましたが、ドラッグしたままScrollPaneの外でマウスボタンを離すと、以降ドラッグできなくなる等といった問題も発生しました。

LowLevelEventsを使った、まともな実現方法はあるのかもしれませんが自分は結局、LowLevelEventsを使うことは諦め、ScrollPaneを継承したクラスを作って、startDragLoop関数内にあるonMouseMove処理の最後に、追加の関数を呼び出すよう少し変更することで実現できました。

自分でふったLowLevelEventsでしたが、自分で試していなかったのがダメでした…お騒がせしてすみません。
もっとスマートな実現方法があるといいのですが…。

 ・テストページ

(Main.as)

import mx.managers.DepthManager;
import flash.display.BitmapData;
//====================================================================//
class Main extends MovieClip{
    //----------------------------------------------------------------//
    function Main() {
        var self : MovieClip = this;
        trace("i Main");
    }
    //----------------------------------------------------------------//
    function onLoad() {
        var self : MovieClip = this;
        trace("i Main.onLoad");
        //----------------------------------
        // MyScrollPane
        var sp : MyScrollPane = self.createChildAtDepth("MyScrollPane", DepthManager.kTop, {
            scrollDrag : true, hScrollPolicy : "on", vScrollPolicy : "on"
        });
        sp.setStyle("borderStyle", "none");
        //completeイベント
        var spListener : Object = new Object();
        spListener.complete = function (a_event : Object) {
            trace("i ScrollPane.complete");
            //サムネイル作成
            …省略…
            …self.thumb_mc にサムネイル用MCを作成…
            …self.thumb_mc.frame_mc にサムネイルに表示する現在領域用MCを作成…
            …省略…
            //ドラッグ時の追加イベント
            a_event.target.addExtEvent({
                mouseDrag : function (a_event2 : Object) : Void{
                    trace("i mouseDrag");
                    //現在領域用MCを移動
                    self.thumb_mc.frame_mc._x = a_event2.target.hPosition;
                    self.thumb_mc.frame_mc._y = a_event2.target.vPosition;
                }
            });
        };
        sp.addEventListener("complete", spListener);
        //scrollイベント
        spListener.scroll = function (a_event : Object) {
            trace("i ScrollPane.scroll");
            //現在領域用MCを移動
            self.thumb_mc.frame_mc._x = a_event.target.hPosition;
            self.thumb_mc.frame_mc._y = a_event.target.vPosition;
        };
        sp.addEventListener("scroll", spListener);
        //画像を読み込む
        sp.contentPath = "test.jpg";
    }
}

(MyScrollPane.as)

import mx.containers.ScrollPane;
//====================================================================//
class MyScrollPane extends ScrollPane{
    private var m_extEvent : Object; //追加イベント用
    //----------------------------------------------------------------//
    function MyScrollPane() {
        trace("i MyScrollPane");
        //
        m_extEvent = new Object();
    }
    //----------------------------------------------------------------//
    function startDragLoop(Void) : Void{
        …省略…
        spContentHolder.onMouseMove = function () {
            …省略…
            //追加イベント mouseDrag を呼ぶ
            if (this._parent.m_extEvent.mouseDrag != undefined) {
                this._parent.m_extEvent.mouseDrag({
                    target : this._parent
                });
            }
        };
    }
    //----------------------------------------------------------------//
    // 追加イベント登録
    function addExtEvent(a_obj : Object) {
        for (var i in a_obj) {
            m_extEvent[i] = a_obj[i];
        }
    }
}


----------------
:961832p:
- だんだんAS3に慣れてきた“なんちゃって”AMES使いの日曜プログラマー

flashlite
Åê¹ÆNo.40629
投稿日時: 2008-10-31 0:54
常連
居住地: 東京
投稿: 69
使用環境:
WinXP Win7
Flash CS3,Flash CS5.0

FlashPlayer
FlashLite 1.1、2.0、2.1、3.1(下記)
Docomo SO903i
SH-08A
SoftBank 911T
 922SH
945SHG
au W61SA
S004
Disney DM001SH
Willcom Windows Mobile
 WX341k
Re: ScrollPaneコンポーネントでのドラッグイベントの取得方法は?
961832pさん。

実際に試してもらって、どうもありがとうございます。
ScrollPaneコンポーネントについては、紹介してもらったBlog以外にも
苦労している方が多い気がするのですが、実際に応用した使い方(の紹介)をしているサイトや
使い方がわからないという質問する人も少なく、情報を探すのもなかなか難しいです。

ScrollPaneイベントをソースを追って調べないととは思っていたのですが
開拓してもらって助かりました。
おそらく、スマートな方法は無いのでしょうね。

今回は、クライアントに提出しないといけないので
1.逃げ のonEnterFrameでvScrollを見る。
2.今回作っていただいたようにScrollPaneを継承したイベントを出すクラスを追加。
3.ScrollPane機能そのものを自作してしまう。

のどれかで実現するしかないですね。
まだ、しっかり理解してないですが、公開していただいた手法を参考にさせていただきたいと思います。

mouseMoveは難しいにしても
おそらく本来の最もスマートな手法であろう
ActionScript 2.0 コンポーネントリファレンスガイド のScrollPaneに記述されている

ユーザーがペイン内でコンテンツをドラッグできるようにスクロールペインをセットアップするには、scrollDrag パラメータを true に設定します。
すると、コンテンツ上に手の形のカーソルが表示されます。他の多くのコンポーネントと異なり、イベントはマウスボタンが押されるとブロードキャストされ、ボタンが離されるまでブロードキャストが続きます。

は、いったい誰が何てワードをブロードキャストしてるのよ!? という感じです。
これに関しては、LowLevelEventsと違うアプローチでしょうから
今回の制作には間に合わなくても、探求を続けようと思ってます。


----------------

スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ

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