『 ActionScript3.0製のスクロールバー JPPScrollbar 公開 』

2009 年 5 月 28 日

簡単に使えるActionScript3.0製のスクロールバー「JPPScrollbar」をSpark Projectでリリースしました。はい、名前はエアロスミスのJust Push Playにあやかっています、すいません。以下説明。

JPPScrollbar

Just(ただ) Put(置けば) Play(動く) Scrollbar(スクロールバー)
サンプルファイルのライブラリからステージに置けば動いてくれるActionScript3.0製のスクロールバーです。個人的に作っていましたが、割と高機能になったので公開します。

主な機能

  • 任意のSpriteやMovieClipをスクロールバーのパーツとしてバインド可能です
  • 滑らかな減速スクロールを使用可能です
  • コンテンツ量に合わせて縮むスクロールバーを使用可能です
  • スライダーの高さを0ピクセルとして扱うことが可能です
  • iPhoneのような、スクロールが行き過ぎて戻る演出が使用可能です
  • エンドロールのような自動スクロールを実行可能です
  • 外部からメソッド呼び出しでスクロールさせることが可能です
  • スクロール量など、こと細かく決められます
  • スライダーやスクロール対象コンテンツを整数値に吸着できます
  • y座標でなくても、任意のプロパティをスクロール可能です
  • ライブラリからコピペしなくてもnewして使えます
  • SWFWheelを使用しているので大抵の環境でマウスホイールを使えます

などなど色々ありますが、とりあえず目的にかなったサンプルのフォルダからごそっとコピペすれば動くようになっています。もう少し詳しい使い方はSpark Projectのほうに書いてあります。

サンプル

  • samples/01 ・・・ コンテンツ量に合わせて伸縮するスライダーを使用した減速スクロールバー(デフォルト)
  • samples/02 ・・・ 減速スクロールを使わないスクロールバー
  • samples/03 ・・・ iPhoneっぽいスクロールとイベントの使用例 (matsumosさんに作成していただきました)
  • samples/04 ・・・ リキッドレイアウトに対応したスクロールバー
  • samples/05 ・・・ useIgnoreSliderHeight = true (スライダーの高さを0として扱う)の使いどころ → スライダーの基準点をスクロールエリアの上から下までめいっぱい動かしたいとき
  • samples/06 ・・・ 水平スクロールバーのサンプル
  • samples/07 ・・・ ASファイルだけで作ったサンプル (matsumosさんに作成していただきました)
  • samples/08 ・・・ Papervision3Dのテクスチャに組み込んだサンプル (matsumosさんに作成していただきました)
  • サンプルどしどし受付中です!

つーわけでこのJPPScrollbar、ガンガン使ってもらえると嬉しいです。
めんどくさい部分はちゃちゃっと済ませちゃいましょー。

追記 10.05.12 バージョン1.03への移行について
バージョン1.03へのアップデートに伴い、これまでの使い方ではエラーが出るようになりました。詳しくはSparkProjectに追記していますのでそちらをご覧ください。バージョン1.02もダウンロード可能です。

追記 10.07.04 バージョン1.04をリリースしました
MagicMouse使用時の不具合に対処しました。詳しくはSparkProjectに追記しています。

« 
» 

55 Responses to “ActionScript3.0製のスクロールバー JPPScrollbar 公開”

  1. 1 tom
    8月 26th, 2009 at 9:07 PM

    テキストを外部読み込みに改変して、使わせてもらいました!
    とてもわかりやすくて、扱いやすかったです。
    ありがとうございます!

    ソースコードもわかりやすくてびっくらしました:-)

  2. 2 alumican
    8月 26th, 2009 at 9:54 PM

    >tomさん

    使っていただいてありがとうございます!
    ソースコードわかりやすかったですか!よかったー。
    是非、外部テキスト読み込みのサンプルをSparkProjectの方へ投稿してください(笑)

  3. 3 5+
    9月 1st, 2009 at 9:57 PM

    すごい詳細に設定出来るスクロールバーのライブラリでしたので、まずサンプルから勉強も兼ねて使わせて頂いてます!

    そこで質問なのですが、spark projectからダウンロードさせて頂いたファイル一式そのままですと何の問題もなく動作するのですが、そのswfを他のswfでloadして表示させると、
    ——————————————————
    TypeError: Error #1009: null のオブジェクト参照のプロパティまたはメソッドにアクセスすることはできません。
    at JPPScrollbarSample01/frame1()
    ——————————————————
    というエラーが出てしまい、ブラウザで確認することが出来ませんでした(プレビューですとエラーは出ますがスクロールバーは問題無く動作します)。

    JPPScrollbarSample01.asというドキュメントクラスファイルをサンプルを参考に作成したのですが、状況は変わりませんでした、、、
    不慣れなもので稚拙な質問だとは思いますが、ご返答頂けたらと思います。
    長々とすいません!

  4. 4 alumican
    9月 2nd, 2009 at 7:06 PM

    >5+さん

    ご利用ありがとうございます!

    エラーの件ですがおそらく、サンプルのflaファイルの1フレーム目にstageを参照している性だと思われます。読み込まれるflaのrootタイムラインの1フレームに記述してある

    import flash.display.StageScaleMode;
    stage.scaleMode = StageScaleMode.NO_SCALE;

    というコードを消してみてください。

    これはLoaderの読み込み完了イベント内でaddChildする場合などに起こるのですが、処理の流れが以下のようになってエラーが出ます。

    1.loader.loadなどで読み込み開始
    2.読み込み完了
    3.子swfの1フレーム目を実行(しかしstageが無いのでエラー)
    4.addChild(やっとstageを参照できるけどもう遅い)

    サンプルでは、スクロールバーに関係無い処理はJPPScrollbarKit.asの中に含めたくなかった&ごちゃごちゃ書いて難しそうになるのが嫌だったので1フレーム目に書いたのですが、本来はEvent.ADDED_TO_STAGEイベントで全部初期化処理をするべきだと思います。すみません。

    別の対処法としては、loadする前にloaderをaddeChildしておく、などがあります。

    1.loaderをaddChildしておく
    2.loader.loadなどで読み込み開始
    3.読み込み完了
    4.子swfの1フレーム目を実行(すでにaddChildされておりstageを参照できる)

    それと、flaファイルに記述してあるご指摘のJPPScrollbarSample01というドキュメントクラスですが、完全に僕の消し忘れです。消したってくださいm(_ _)m

    これでも駄目なようでしたらまた教えてください。よろしく御願いします!

  5. 5 5+
    9月 8th, 2009 at 10:09 AM

    ご回答ありがとうございます!
    教えて頂いた方法で問題無く動作しました!
    ありがとうございます。

    同年代ということもあり、これからも影ながら応援しております!

  6. 6 alumican
    9月 9th, 2009 at 6:44 PM

    >5+さん

    無事動作されたようでなによりです^^
    これからもちょこちょことアップしていくのでこちらこそよろしく御願いします。

  7. 7 ken
    10月 15th, 2009 at 8:23 PM

    JPPScrollbarを早速使わせていただいています。とってもシンプルにつくられているので、言われているように置くだけで、うまくいっちゃったので、驚いています。
    それで、1点だけわからなかったのが、マウスホイール部分でコメントアウトをはずし、tureにしてパブリッシュすると、うまく作動してくれなく、「1120: 未定義のプロパティ useMouseWheel へのアクセスです。

  8. 8 alumican
    10月 15th, 2009 at 10:51 PM

    >kenさん

    ご使用ありがとうございます!
    あ゛・・・ そ、それは僕の記述ミスですね。正しくは

    _scrollbar.useMouseWheel = true;

    となります。お手数お掛けしてすみませんm(_ _)m
    サンプルの方もあとで直しておきます。

  9. 9 nplusone
    10月 16th, 2009 at 10:47 PM

    すてきなスクロールバークラスをありがとうございます。
    この前制作したサイトで使わせていただきました。
    http://www.non-standardworld.com
    本当にドラッグアンドドロップするだけで使えてビックリしました。
    お陰様で演出に集中することが出来ました。
    ありがとうございます!!

  10. 10 alumican
    10月 17th, 2009 at 7:40 PM

    >nplusoneさん

    ありがとうございます!
    “演出に集中するために、簡単な割にそこそこのクオリティを出せるスクロールバー”というのが開発のコンセプトだったので、そう言ってくださると嬉しいです^^

  11. 11 ken
    10月 28th, 2009 at 2:39 PM

    >alumicanさん

    無事動くようになりました。
    本当に素敵ものをつくっていただき、感謝します。
    とても、楽に設置出来るようになったので、助かりました。

  12. 12 kumagai
    10月 28th, 2009 at 4:11 PM

    ActionScript素人です。
    このスクロールバーを使わせていただこうと思ったのですが、
    以下のエラーが出て使用できません。。

    1046:型が見つからないか、コンパイル時定数ではありません:JPPScrollbar。
    1180:未定義である可能性が高いメソッドJPPScrollbarの呼び出しです。
    1172:定義net.alumican.as3.justputplay.scrollbars:JPPScrollbarが見つかりません。
    1172:定義 net.alumican.as3.justputplay.scrollbars:JPPScrollbarEventがみつかりません。

    いったいどのようにすれば使用できるのか教えていただけませんでしょうか。よろしくお願いいたします。

  13. 13 alumican
    10月 28th, 2009 at 7:29 PM

    > kenさん

    無事動いたようで何よりです。
    これからもよろしく御願いします。

  14. 14 alumican
    10月 28th, 2009 at 7:37 PM

    >kumagaiさん

    こんにちは。
    それはクラスパスが通ってない場合に出るエラーです。つまり、flaファイルが必要なasファイルを見つけられていない状態です。

    その必要なasファイルがsrcフォルダの中の「netフォルダとorgフォルダ」に入っているのですが、試しにその2つのフォルダごとflaファイルと同じ階層においてみてください。多分パブリッシュできると思います。

    別階層に置く場合は、クラスパスの設定をします。Flashのパブリッシュ設定→Flashタブ→「ActionScriptのバージョン」の横の設定ボタン→クラスパスの「+」を押して、netフォルダとorgフォルダが置いてあるフォルダまでのパスを記述してみてください。仮にsrcフォルダとすると、../../src や ./src のような感じで環境に応じて指定してください。

  15. 15 kumagai
    10月 29th, 2009 at 7:23 AM

    >alumicanさん

    お早うございます!
    レスありがとうございます!

    初歩的な質問に丁寧に答えてくださりありがとうございました!

    おかげさまで無事にパブリッシュできました。
    素敵なものを作ってくださり、本当にありがとうございました!

  16. 16 kumagai
    10月 29th, 2009 at 9:53 AM

    度々すみません。

    同一のFLASH内で2つ以上使用するには、どのようにすれば良いのでしょうか。。

    もしよろしければご教授ください。

  17. 17 alumican
    10月 29th, 2009 at 12:32 PM

    >kumagaiさん

    同一のFlashに2つ置く場合は、ライブラリのシンボルを複製する必要があります。ライブラリからシンボルを右クリック→複製ですね。例えばJPPScrollbarKitシンボルを複製してJPPScrollbarKit2シンボルを作ったとします。

    複製されたシンボルはJPPScrollbarKit.asへの関連付けが外れてしまいますので、リンケージしなおす必要があります。ライブラリのJPPScrollbarKit2シンボルを右クリック→リンケージから「ActionScriptに書き出し」、「基本クラス」を「JPPScrollbarKit」と指定します。そうすればJPPScrollbarKit2シンボルは複製元のJPPScrollbarKitシンボルと全く同じように動きます。AS3では、同じリンケージ「クラス」を複数のシンボルに設定できないので、ここでは「基本クラス」に設定していますが、気持ち悪ければJPPScrollbarKit.asをコピーして新しくJPPScrollbarKit2.asなどを作り、それを「クラス」へリンケージしてあげても良いです。

    新しくクラスを作ってシンボルごとに固有のリンケージ「クラス」を設定すると、スクロール速度などをスクロールバーごとに設定できるメリットがあります。逆に、一つのクラスを複数シンボルの「基本クラス」として共有すると、一つのクラスを変えるだけで複数のスクロールバーの挙動を一括操作することができます。状況によってどちらを使うかは選んでください。

    あとは、JPPScrollbar2シンボルの中身を好きなコンテンツに入れ替えてあげてください。このとき、シンボルの階層構造やインスタンス名が、複製元のJPPScrollbarシンボルと同じになるようにしてください。これで、それぞれ別のコンテンツをスクロールするスクロールバーが2つ設置できます。

    JPPScrollbarKit.asはあくまでスクロールバーの初期設定の一例をまとめているだけなので、JPPScrollbarKit.asをちょっといじればシンボル構造を変えても動くようにできます。色々カスタマイズしてみてくださればと思います。それでは。

  18. 18 kumagai
    10月 29th, 2009 at 1:45 PM

    >alumicanさん

    できましたー!

    基本クラスって所を変更すればよかったのですね。
    ご丁寧に教えてくださり本当にありがとうございました!

    いろいろ試して覚えていきたいと思います。

  19. 19 alumican
    10月 29th, 2009 at 8:02 PM

    >kumagaiさん

    無事にできたようで何よりです。
    どこまで説明して良いのか分からずに、冗長な説明になってしまってすみません。
    また何かありましたらよろしく御願いします。

  20. 20 monkeypod
    12月 3rd, 2009 at 8:03 PM

    こんにちわ!

    素晴らしいライブラリですね!
    さっそくダウンロードして使ってみました!

    質問があるのですが、
    コンテンツ量に合わせてスライダーが自動で伸縮するのですが、

    これを固定サイズにしたいです。

    画像を使用したいため、伸縮してしまうと
    どうしても間延びして変な風になってしまうのです。
    何か方法はありますでしょうか?!

  21. 21 alumican
    12月 4th, 2009 at 1:38 AM

    >monkeypodさん

    ありがとうございます。
    JPPScrollbarKitの

    //コンテンツ量に応じて伸縮するスライダーを使用するかどうかを設定します.
    //_scrollbar.useFlexibleSlider = false;

    の部分をコメント解除すれば固定長のスクロールバーになると思います。
    よろしくお願いします。

  22. 22 monkeypod
    12月 4th, 2009 at 11:14 AM

    >alumicanさん

    useFlexibleSliderの設定で解決しました!

    本当に素敵なライブラリですね。感動しました!
    ありがとうございます。

  23. 23 mrfunkredible
    12月 8th, 2009 at 9:15 PM

    はじめまして。ライブラリ使わせていただいてます。
    質問させてください。サンプルflaファイルのパブリッシュ設定の「ActionScript3.0設定」にて「ステージのインスタンスを自動宣言」を意図的にチェックはずしていたりしますか?何か理由があるのでしょうか。

    デフォルトだとチェックが入っているかと思うのですが、今回サンプルのflaファイルを使うに当たり見たことのないエラーが出たので?となった次第です。

    どうぞよろしくお願いいたします!

  24. 24 alumican
    12月 8th, 2009 at 10:37 PM

    akaryさんのコメントがなぜか承認できなかったので代わりに書きます。
    —————————————-
    素敵なライブラリありがとうございます!

    とっても使いやすくて感激しています◎

    ひとつだけお聞きしたい事があるのですが、
    マウスホイールをスクロールさせたいコンテンツの中でだけ
    有効にさせるにはどうしたらいいですか?

    今はステージのどこでマウスホイールを使ってもスクロールしてしまうのですが、content以外ではスクロールを効かせないようにしたいです。

    お手数ですがご教授いただけると嬉しいです。

    よろしくお願いします!

  25. 25 alumican
    12月 8th, 2009 at 10:40 PM

    >mrfunkredibleさん

    それは特に意図はないです。
    ただ僕の普段の設定が残っていただけです。。。
    チェックが入っている状態でパブリッシュすると出るエラーの解決法はSpark Projectの「JustPutしてもPlayしない場合の対処法」をご覧ください。

    お手数おかけしてすみません。

  26. 26 alumican
    12月 8th, 2009 at 10:47 PM

    >akaryさん

    どうもありがとうございます。

    特定のエリア内でのみホイールに反応させる方法はデフォルトでは付いていないので、自分でスクリプトを書く必要があります。ホイールの反応エリアを作ってロールオーバー、ロールアウトで
    _scrollbar.useMouseWheel
    を切り替えるなどすれば可能です。

    よろしくです。

  27. 27 alumican
    12月 11th, 2009 at 6:51 PM

    akaryさんからのコメントです
    —————————————-

    >alumicanさん
    ありがとうございます!
    スクロールさせることができました◎
    とってもありがとうございました!

  28. 28 taka
    1月 12th, 2010 at 12:55 AM

    JPPScrollbar素敵なライブラリですね。

    Progression(クラスベース)で利用するにはどうすればよろしいでしょうか?

    例えばシーンIndexScene.as内でコンテンツIndexPage(width:800px; height:2400px)を表示しているページで
    スクロールバーを設置したいのです。

    new JPPScrollbarKit()
    して、そのままaddchild()すると、画面に表示はされるのですが、まったく動きません。(マウスイベントへの反応なし)

    JPPScrollbarKitFolderをライブラリからコピペして使う場合ですと、オリジナルのコンテンツに対してスクロールが有効になるだけで、
    IndexPageのコンテンツに対してはまったく動きません。

    Progressionで使用するにはどうすればよろしいでしょうか?
    ご教示いただければ幸いです。よろしくお願いします。

  29. 29 alumican
    1月 12th, 2010 at 11:28 AM

    >takaさん

    ご使用ありがとうございます。

    僕はProgressionをそんなに深く触ってないので確証はもてませんが、下記の方はクラスベースでJPPScrollbarを使っておられるのでできるはずです(笑)

    http://www.non-standardworld.com/

    IndexPageが表示されるときにJPPScrollbarKitをnewするのではなく、JPPScrollbarをnewして、パーツとなるMovieClipをバインド、setupしてみてはどうでしょうか。

    JPPScrollbarをnewして初期化する流れは、JPPScrollbarKit.asの88~140行目をtakaさんのケースに合わせて適宜書き換えてみるとうまくいくと思います。

    なお、一度JPPScrollbarを設定すれば、その後はシーン移動の際にJPPScrollbarのbuttonEnabled、useMouseWheelプロパティを切り替えればスクロールを簡単に有効化および無効化することができます。

  30. 30 お役立ちメモ | test blog
    1月 14th, 2010 at 5:42 PM

    [...] 『 ActionScript3.0製のスクロールバー JPPScrollbar 公開 』 http://blog.alumican.net/2009/05/28_040338 [...]

  31. 31 ratty
    3月 7th, 2010 at 3:06 AM

    こんばんは。

    素敵なライブラリで、かつ簡単に導入できるということで使用させて頂きました。
    素晴らしいの一言に尽きます。

    使用していて不明な点と言いますか、ご質問があります。

    このライブラリを外部テキストで読み込んだときに使用したいと思い
    ダイナミックテキストに変更しました。
    ※このとき、何故かダイナミックテキストに読み込まれたテキストが表示されなかったのですが、フィルタをかけると表示できました…バグでしょうか

    動的にテキストを読み込んだ際に、contentsの高さが読み込むテキストによって変わってくるのでその高さをホイールに読み込ませたいのですが、どこで変更出来るかご教授いただけないでしょうか。
    asを解読すると、content.contentBodyの高さを読み取っているとおもうのですが、これをテキストごとに任意の数値で高さを変更できればと思っています。

    お手数ですが、ご教授いただけると助かります。
    長文失礼致しました。

  32. 32 saya
    3月 10th, 2010 at 6:42 AM

    はじめまして、最近FlashCS4を購入したのですが、全然分からなくて初歩的な質問ですみません。
    どうしてもスクロールバーが必要なので教えていただきたくメールさせていただきました。
    サンプル01のスクロールバーを設置したいです。
    「sample01.fla」をFlashで開いて、ムービープレビューをしても、全くスクロールしません。
    以下の手順が必要なのでしょうか?

    「srcフォルダにクラスパスを通しておきます」これが分からないです。
    「http://www.libspark.org/svn/as3/JPPScrollbar/trunk/src」をクリックすると、「net」「org」があり、
    「net」をクリックしていくと、「JPPScrollbar.as」と「JPPScrollEvent.as」があります。
    「org」をクリックしていくと、「SWFWeel.as」があります。
    この3つの「as」をFlash CS4でどのようにして良いのかわかりません。
    「sample01.fla」をFlashで開くと、既にレイヤーに、「AS」と「scrollbarkit」がフレーム1にあります。
    上記の3つの「as」と、「JPPScrollbarKit.as」の計4つの「as」をどのようにコピペすれば良いのでしょうか?
    レイヤー1に既にある「AS」のアクションフレームに、4つ全部をコピーして、順番にペーストするのですか?
    それとも、別々のレイヤーを4つ用意して、「AS」にそれぞれコピペすれば良いのですか?
    また、「as」の中に日本語で色々と説明が書かれていますが、それはこのままで問題ないのですか?

    どうかよろしくお願いします。

  33. 33 saya
    3月 10th, 2010 at 7:04 AM

    30番のsayaです。
    「sample01.fla」に既にあった「AS」を削除し、(4番の人のスレッドを読みました。)
    レイヤーを4つ追加し、それぞれに、「JPPScrollbar.as」「JPPScrollEvent.as」「SWFWeel.as」「JPPScrollbarKit.as」をそれぞれのレイヤーに記入しました。全て「1」フレーム目です。
    なので、「AS」のレイヤーが4つ出来ました。
    そこでパブリッシュしてみたら、以下のコンパイルエラーが2つ出てしまいます。
    1071;シンタックスエラー;属性multの後には、SWFWeelではなく定義キーワード(関数など)が必要です。
    1093;シンタックスエラー

    やはり間違っているのでしょうか?
    よろしくおねがいします。

  34. 34 stam
    3月 10th, 2010 at 12:03 PM

    初めまして。
    自力でスクロールバーを作ろうと思っていたのですが上手く行かず、JPPScrollbarを使って作業を行わせて頂いています。

    一つ質問があるのですが、例えばあるボタンをクリックするとコンテンツを任意の位置まで移動させるという処理を行う場合、どの様な記述を追加したら良いでしょうか?
    現状ではボタンクリック時にスクリプトでその位置まで移動させているのですが、それだとそこからスクロールを再開した際に移動前の位置まで画面が戻ってからスクロールが開始するようになってしまいます。
    原因はコンテンツの位置情報等を更新していないからだと思うのですが、どこを直したら良いのかわかり兼ねているので、もし可能であれば、お手数ですがその解決策の一端でも教えて頂けると有り難いです。

  35. 35 alumican
    3月 10th, 2010 at 4:34 PM

    >rattyさん

    こんにちは。
    ご利用ありがとうございます。

    ・ダイナミックテキストが表示されない件について
    ダイナミックテキストにマスクをかけていませんか?
    Flashでは、フォント埋め込み情報のないダイナミックテキストにマスクをかけると表示されません。これはAS2時代からの仕様ですね。回避方法として以下の方法があります。
    1. 表示させたい文字を埋め込む
    2. ダイナミックテキストを一度BitmapDataにしてからマスクをかける
    3. ダイナミックテキストに何でもいいので強さ0のフィルタをかける
    他にもあるかもですが、3が手軽でオススメです。

    ・コンテンツサイズを動的に変化させる件について
    _scrollbar.lowerBoundプロパティ、つまり「一番下までスクロールさせたときの、スクロール対象物の座標」の操作がそれにあたります。この値を内容に合わせて変化させると自動的に調整されると思います。

  36. 36 alumican
    3月 10th, 2010 at 4:45 PM

    >sayaさん

    クラスパスを通すというのは要は「ここにASファイル置いといたからクラスを読み込むときに参考にしてね」という風にflaファイルにASファイルの置き場を教えることです。なのでASクラスをflaファイルにコピペする必要は全くないです。この辺りは以下のサイトが役に立ちます。

    http://www.trick7.com/blog/2006/08/31-222857.php

    サンプルをそのままムービープレビューしても動かなかった原因として、ASファイルが置かれているフォルダ構成を変えてしまった可能性があります。今回の例だと、netとorg以下のファイル構成には手を加えず、netとorgがあるフォルダへクラスパスを通す必要があります。これを変えると、flaがASクラスまでたどり着けなくなってエラーが起きます。

    以下のリポジトリからSVNを使ってもう一度一式落として、そのまま何も手を加えずに trunk\samples\01\sample01.fla をムービープレビューしてみてください。

    http://www.libspark.org/svn/as3/JPPScrollbar/

  37. 37 alumican
    3月 10th, 2010 at 4:50 PM

    >stamさん

    はじめまして。
    JPPScrollbarには外部からスクロールさせるメソッドが用意されているので、そちらを使ってみてください。

    _scrollbar.scrollByRelativeRatio();
    _scrollbar.scrollByAbsoluteRatio();
    _scrollbar.scrollByRelativePixel();
    _scrollbar.scrollByAbsolutePixel();

    詳しい使い方はsample01の場合ですとJPPScrollbarkit.asの303行目あたりに書いてあります。sample03のiPhoneっぽいUIも、これらのメソッドを使ってドラッグからのスクロールを実現しています。

  38. 38 alumican
    3月 10th, 2010 at 4:52 PM

    というわけで現在本業のFlashのほうが大変忙しく、返信が遅れがちで申し訳ありませんが、どうぞよろしくお願いしますm(_ _)m

  39. 39 ratty
    3月 10th, 2010 at 9:02 PM

    alumicanさん

    お忙しい中、返信有難うございます。
    ダイナミックテキストの件、すいませんでした。
    仕様だとは知らずに…

    教えて頂いた通り試したら、変更できました!
    有難うございました!

  40. 40 saya
    3月 10th, 2010 at 9:12 PM

    ご丁寧にご教授いただきましてありがとうございました。
    とても勉強になりました。
    教えていただいたページを読みましたら私でも理解できました。
    根本的な所が間違ってました。
    そしてスクロールバーも無事に出来ました!!
    とても嬉しいです!
    本当にありがとうございました。

  41. 41 stam
    3月 11th, 2010 at 6:56 PM

    >alumicanさん

    お忙しい中、返信有難う御座います!
    まだ他にも調整中の部分があるのですが、上記関数の中身やサンプルを確認しつつ、作業を進めて行ければと思います:-)

  42. 42 tori
    3月 13th, 2010 at 11:20 PM

    はじめまして、こんばんは。

    素敵なライブラリで、簡単に導入できるということで使用させて頂きました。
    スクロールが動いたときは感動ものでした。

    この 「JPPScrollbar」の samples/01 を使って
    本文部分を外部テキストにしてリンク付きのニュースリリース項目にしたいと思っています。

    そこで rattyさん(30個めのQ)と同じように初めにテキストが入っている部分を
    ダイナミックテキスト化しエフェクト0にして表示をするところまでは出来ました。

    その後、外部テキストを参照するスクリプトをどこに記載すればよいかわからず調べています。

    ◆”シーン1/JPPScrollbarKit/JPPScrollbarKirContent/JPPScrollbarKitContentBody”
    というムービークリップ内の「text」レイヤーの上に新規レイヤーを作り、
    そこに外部テキスト参照のスクリプトを記載すれば動作するのでしょうか?

    ◆それともASフレームの”import flash.display.StageScaleMode;
    stage.scaleMode = StageScaleMode.NO_SCALE;”
    以降に記載すればいいのでしょうか?

    初歩的な質問で申し訳ございませんが、
    ご指導いただけないでしょうか?よろしくお願いいたします。

  43. 43 alumican
    3月 15th, 2010 at 12:32 AM

    >toriさん

    はじめまして。
    外部テキストを読み込むスクリプトをどこに書くかということですよね?

    基本的にはスクロールバーとダイナミックテキストフィールドを参照できればどこに書いてもかまいません。ただ、メンテナンスの面から考えると、わかりやすい場所(この場合だとrootのASフレームか、JPPScrollbarKit.asの中)に書くのが良いかと思います。

  44. 44 tori
    3月 16th, 2010 at 2:51 PM

    alumican さま

    お忙しいところ、ご解答いただきありがとうございます。

    記載場所はとくに決まりがないのですね。
    わかりやすくトップのasフレームに記載したら表示できました。
    簡潔に説明いただき助かりました。
    ありがとうございます。

  45. 45 saya
    4月 9th, 2010 at 6:46 PM

    スクロールバー1つの設置ならば上手く行くのですが、
    同じ「2010.fla」ファイルにスクロールバーを2つ設置しようとするとエラーがでてしまいできません。
    以前にも同じような質問の人がいたのでそちらを参照したのですができませんでした。
    スクロールする文章(JPPScrollbarKitContent)だけを変えてスクロールバーを表示したいと思います。
    まず「Scrollbar.fla」を複製し、「Scrollbar1.fla」、「Scrollbar2.fla」という「fla」ファイルを2つ作りたいと思います。

    1.「JPPScrollbarKit」(書き出し) から「JPPScrollbarKitContentMask」まで各シンボル全部で9つ
    全てに「1」をつけました。
    例「JPPScrollbarKit1」「JPPScrollbarKitArrowDown1」「JPPScrollbarKitArrowUp1」・・・

    2.「JPPScrollbarKit.as」も複製し、「JPPScrollbarKit1.as」をつくりました。

    3.「JPPScrollbarKit1」(書き出し) を右クリックし、プロパティーを開き、リンゲージの「クラス」の欄に「JPPScrollbarKit1」
    と記述しました。

    4.ムービーの書き出しをすると、以下のコンパイルエラーが表示されてスクロールが動きません。

    JPPScrollbarKit1.as、行1    5008:定義 ‘JPPScrollbarKit’ の名前にこのファイルの場所が反映されていません。
    このファイル内の定義の名前を変更するか、ファイルを移動してください

    質問1
    「JPPScrollbarKit1.as」の中の1行目には、 package { とあります。
    このファイル内のどこかを編集しなければいけないのでしょうか?
    ターゲットは、「Scrollbar1.fla」にしました。

    質問2
    18行目には public class JPPScrollbarKit extends MovieClip {
    とありますが、ここも JPPScrollbarKit1 と編集する必要があるのでしょうか?

    質問3
    各シンボルの名前を全て最後に1を付けて変更したので
    各シンボルのプロパティーを開き、リンゲージの「クラス」の欄に「JPPScrollbarKit1」としなければいけないのでしょうか?

    質問4
    「JPPScrollbarKit」(書き出し)だけを「JPPScrollbarKit1」と変更し、
    各シンボル名は変更してはいけないのでしょうか?
    でもその場合、複数のスクロールバーを設置するときに、同じ名前のシンボルは上書きされてしまいますよね?

    予定では、この「Scrollbar1.fla」、「Scrollbar2.fla」の中の「JPPScrollbarKit1」と「「JPPScrollbarKit2」
    の(書き出し)をコピーし、「2010.fla」ファイルに2つ設置したいです。

    文章だけを変えて複数設置する良い方法は
    どうすればよいのでしょうか?
    ご教授よろしくお願いいたします。

  46. 46 kimucha
    4月 21st, 2010 at 6:34 PM

    はじめまして。
    非常に利用わかりやすいライブラリでさっそく使わせていただいております。

    一点質問なのですが、スクロールバーの初期配置をスクロールの下限にしたい場合、どのように書けばよいでしょうか?

    _scrollBar.scrollByAbsoluteRatio(1);
    で一番下まではスクロールできたのですが、スクロールの動きを見せることなく実現したいのです。

    お忙しいところ恐縮ですが、ご教示いただけますと幸いです。

  47. 47 alumican
    4月 21st, 2010 at 6:47 PM

    > kimuchaさん

    はじめまして。
    その辺は実は追加実装してサッとできるようにしないといけないと思いつつ、現状としては

    _scrollBar.useSmoothScroll = false;
    _scrollBar.scrollByAbsoluteRatio(1);
    _scrollBar.useSmoothScroll = true;

    で代替できます。
    お手数をおかけしますが、よろしくお願いします。

  48. 48 kimucha
    4月 21st, 2010 at 6:52 PM

    さっそくのお返事いただきありがとうございます!
    アドバイスしていただいた方法にて実装をすすめたいと思います。

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

  49. 49 saya
    4月 24th, 2010 at 4:14 AM

    同一のFlashに2つ置く場合ですが、
    JPPScrollbarKitシンボルを複製してJPPScrollbarKit2シンボルを作りました。
    ライブラリのJPPScrollbarKit2シンボルを右クリック→リンケージから「ActionScriptに書き出し」、
    「クラス」は無記入にし、「基本クラス」を「JPPScrollbarKit」と指定しました。

    すると、「他のライブラリシンボルと関連付けられていない一意のクラス名を入力してください」
    とメッセージが出て設定できません。

    どのようにしたら良いのでしょうか?
    お忙しいところ申し訳ございません
    御指導よろしくお願いいたします。

  50. 50 saya
    4月 29th, 2010 at 6:08 AM

    alumicanさま

    初歩的な質問過ぎてご指導していただけないのでしょうか?

    どうしても、JPPScrollbarを使用させていただきたいので

    2つ設置する方法をご指導していただければ大変ありがたいです。

    よろしくお願いいたします。

  51. 51 alumican
    4月 30th, 2010 at 1:52 AM

    >saya さま

    すみません、大量のスパムにまぎれていたようでお返事できてませんでした。

    > 「クラス」は無記入にし、「基本クラス」を「JPPScrollbarKit」と指定しました。

    これはJPPScrollberに限った話ではないですが、クラス名は必ず入力する必要があります。さらに、他のシンボルのクラス名と重複してはダメです。

    今回はJPPScrollbar.asとJPPScrollbar2.asの2つのクラスファイルを作られているようなので、基本クラスのことは考えずに空白にして、JPPScrollbar1シンボルにJPPScrollbarクラスを、JPPScrollbar2シンボルにJPPScrollbar2クラスを関連付ければいいと思いますよ。

    なお、基本クラスの使いどころは、同じクラス(たとえばJPPScrollbar.asクラス)を複数のシンボル(たとえばJPPScrollbar1シンボル, JPPScrollbar2シンボル)に割り当てたいときです。クラス名は各シンボルで重複しないのであれば何でも良くて、基本クラスの欄で実際に存在するクラスファイルと関連付けます。

    このあたりは野中さんの記事が正確です。
    http://f-site.org/articles/2008/01/17053315.html

    もし2つのスクロールバーの機能に差が無いのであれば、2つのシンボルに同じ基本クラス(JPPScrollbar)を設定したほうが簡単かもしれません。自分でASファイルを複製する手間が要らないですから。

  52. 52 saya
    4月 30th, 2010 at 5:22 AM

    alumican様

    ご回答ありがとうございます。何かお気に触ってしまったのかと心配しておりました。
    そのように設定してみたのですが、なぜかできません。

    もっと基本的な所が違うのだと思い、最初から見直してみました。
    まず、スクロールバーを2つ設置するという以前に、単に、JPPScrollbarKit を編集し、
    JPPScrollbarKit2 を作り、パブリッシュし、JPPScrollbarKit2 単体で動くか試してみました。

    1.JPPScrollbarKit(書き出し)の名前をJPPScrollbarKit2 に変更
    2.スクロールする文章を変更
    3.JPPScrollbarKit.asを複製し、JPPScrollbarKit2.as を作成
    4.シンボルプロパティーの「名前」JPPScrollbarKit2
      「クラス」JPPScrollbarKit2 に設定

    パブリッシュすると、以下のエラーが表示されスクロールはしません。

    JPPScrollbarKit2.as、行1
    5008:定義’JPPScrollbarKit’の名前にこのファイルの場所が反映されていません。
    このファイル内の定義の名前を変更するか、ファイルを移動してください。

    もしかして、JPPScrollbarKit2.as の中身を何か編集するのでしょうか?
    また、文章を変更したときには、
    JPPScrollbarKitContent2、JPPScrollbarKitContentBody2
    に名前を変更するのでしょうか?

    本当に初歩的な質問ですみません。
    ご指導よろしくお願いいたします。

  53. 53 alumican
    4月 30th, 2010 at 2:36 PM

    >sayaさま

    > もしかして、JPPScrollbarKit2.as の中身を何か編集するのでしょうか?
    その通りです。JPPScrollbarKit.asの18行目と68行目をそれぞれ以下のように直してみてください。

    18行目(クラス宣言)

    public class JPPScrollbarKit2 extends MovieClip {

    68行目(コンストラクタ定義)

    public function JPPScrollbarKit2():void {

    > また、文章を変更したときには、
    > JPPScrollbarKitContent2、JPPScrollbarKitContentBody2
    > に名前を変更するのでしょうか?
    2つめのスクロールバーを設置する場合に、別の文章をスクロール対象としたいのであればシンボルを複製する必要があると思います。

    シンボルとリンケージの関係やクラスの設定ははじめは分かりにくいのですが、一度ご自身でAS3の簡単なクラスを作ってみると慣れると思いますよ。
    よろしくです。

  54. 54 saya
    4月 30th, 2010 at 3:56 PM

    alumican様

    本当にありがとうございます!!
    出来ました!
    感激です!

    分かりやすいご説明で感謝しております。
    根本的な所が間違っていたのですね。
    とても勉強になりました。

    ありがとうございました!
    今後ともよろしくお願いいたします。

  55. 55 alumican
    4月 30th, 2010 at 4:19 PM

    > sayaさま

    よかったです!
    長い間返信できずにすみませんでした。
    こちらこそ今後ともよろしくお願いします。

Leave a Reply