『 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さんに作成していただきました)
  • samples/09 ・・・ 外部テキストを読み込んでスクロールする(読み込みに失敗する場合はSVNからダウンロードしてお試しください)
  • サンプルどしどし受付中です!

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

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

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

追記 10.08.02 バージョン1.05 Previewをリリースしました
詳しくはSparkProjectに追記しています。

追記 10.09.17 バージョン1.06Preview, 1.06をリリースしました
詳しくはSparkProjectに追記しています。

追記 11.10.14 バージョン1.07をリリースしました
詳しくはSparkProjectに追記しています。

« 
» 

111 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さま

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

  56. 56 fdl
    7月 31st, 2010 at 5:27 PM

    はじめまして。
    非常にすばらしいライブラリなので使わせていただきたいと思っています。
    そこでひとつ教えていただきいたいのですが、progressionでクラスファイルとして new して使用しているのですが、progressionで一度JPPscrollbarをセットした画面を表示したあと、他のページに遷移し、再度JPPscrollbarをセットした画面に戻ってくるとどうもマウススクロールイベントが2重にカウントされているようなのですがJPPscrollbarをうまく破棄できていないのでしょうか?

    クラスを使って表示リストに追加したり、削除したりして使用する場合の利用方法を教えていただければと思います。
    初歩的な質問で申し訳ございませんが、ご指導よろしくお願いいたします。

  57. 57 alumican
    8月 2nd, 2010 at 12:38 AM

    > fdlさん

    こんにちは。
    仰るとおりJPPScrollbarが破棄されていないのが原因のようですね。以下のバージョン1.05 Previewを使ってみてください。JPPScrollbarインスタンスが不要になったタイミングでdestroyメソッドを呼んでもらえればインスタンスが破棄されます。

    JPPScrollbar 1.05 Preview

    ページを戻ってきた場合は、再び new JPPScrollbar() していただければ大丈夫だと思います。これでダメな場合はもう一度報告していただけますか。

  58. 58 fdl
    8月 2nd, 2010 at 1:56 PM

    > alumican様

    fdlです。ご回答ありがとうございました。うまく破棄できました!

    これで思うような動作になりました。
    ありがとうございました!
    すばらしいライブラリなのでこれからもどんどん使わせていただきたいと思います。

    開発頑張ってください。今後ともよろしくお願いいたします。

  59. 59 alumican
    8月 3rd, 2010 at 12:34 AM

    >fdlさん

    よかったです。これからもよろしくお願いします。

  60. 60 hi5sk8
    8月 11th, 2010 at 10:23 PM

    はじめまして。最近progressionを利用してflashサイトを構築しておりまして、
    こちらのJPPScrollbarと出会い、利用させて頂いております。
    通常の静止テキストでの表示は出来るのですが、外部テキストを読み込む方法が分からず困っております。
    ぜひ外部テキストの表示の仕方を簡単でも良いので、こちらでアップして頂けないでしょうか?
    お手数ではございますが、どうぞよろしくお願い致します。

  61. 61 alumican
    8月 11th, 2010 at 11:59 PM

    > hi5sk8さん

    はじめまして
    ご利用ありがとうございます。

    外部テキスト読み込みのサンプルを作ってみました。SVN上のsample09として追加したのでご覧ください。flaファイルのバージョンですが、今手元にCS5しかないのでCS4形式でアップしていますがご容赦ください。

  62. 62 hi5sk8
    8月 12th, 2010 at 1:29 AM

    alumican様

    迅速な対応誠にありがとうございます。
    すぐに試してみましたが、すんなりと実行出来ました!
    本当に助かりました。
    JPPScrollbarが無かったらどれだけの時間をスクロールバーに費やす事になったかと思うとゾッとします。
    本当に素晴らしい作品だと思います!
    本当にありがとうございました。今後の活躍も期待しています。

  63. 63 alumican
    8月 12th, 2010 at 12:28 PM

    > hi5sk8さん

    無事できたようでよかったです。
    今後ともよろしくお願いします。

  64. 64 nayuki
    11月 1st, 2010 at 5:06 PM

    はじめまして。
    そのまま使用したところ,とても素晴らしいものでしたので私のコンテンツにも使用させていただきたいと考えております。

    作成したムービークリップにJPPScrollbarを取り付けたいのですがどのようにコードを書けばよいのでしょうか;
    それともコードを記述しなくとも可能なのでしょうか?

    初歩すぎる質問で申し訳ありません。

  65. 65 alumican
    11月 1st, 2010 at 5:16 PM

    >nayukiさん

    はじめまして。
    作成したMovieClipとはどういったものでしょうか。
    new MovieClip() したものにスクロールバーを配置するのであれば、スライダーなどの一通りのパーツを作成したMovieClipにaddChildし、
    JPPScrollbarKitクラス初期化時に渡しているパーツやスクロールコンテンツなどを、先程addChildしたものに切り替えて初期化すればいけると思います。

  66. 66 nayuki
    11月 1st, 2010 at 5:55 PM

    お返事ありがとうございます。

    MovieClipはステージと同程度のただの矩形でして,
    その上に他のフレームラベルに移動するボタンなどが配置してあります。
    JPPScrollbarKitContentBodyのbaseのようなイメージです。

    >パーツやスクロールコンテンツなどを、先程addChildしたものに切り替えて初期化すれば

    すいません,やはり勉強不足でわからいので今は諦めようかと思います;

  67. 67 neko
    11月 11th, 2010 at 6:33 PM

    こんばんは。

    動画を見て来ました。
    スマートフォンのタッチスクロールを使ってflashコンテンツを動かしていたのですが,やはりASでそういった記述をしないと(縦長のコンテンツなどで)タッチスクロールは不可能なのでしょうか?

    また,sample03ではそのような動作が可能になっていますが,それはasファイルのどの部分に当たるのですか?

    突然ですがよろしくお願いします。

  68. 68 alumican
    11月 11th, 2010 at 7:42 PM

    >nekoさん

    こんばんは。
    Clockmakerさんのところの動画でしょうか。
    仰るとおりデフォルトではタッチに対応していないので
    そういった記述をする必要があります。

    sample03で言うと、307行目(slider.alpha = 0)の辺りから最後までが、タッチスクロールのための記述になっています。

    マウスドラッグを検出して、_scrollbar.scrollByRelativePixel でドラッグ移動量分だけスクリプトからスクロールを実行しています。

  69. 69 neko
    11月 12th, 2010 at 3:11 PM

    >alumicanさん
    お返事ありがとうございます。
    なるほど!わかりました!

    それと,同一flash内に2つスクロールバーを設置したいのですが,
    書いてあった通り
    JPPScrollbarKitシンボルを複製してJPPScrollbarKit2シンボルを作りました。

    そこで,複製されたシンボルのJPPScrollbarKit.asへのリンケージをしなおすのですが,

    「基本クラス」は「JPPScrollbarKit」と指定しました。
    その時,「クラス」の部分は「JPPScrollbarKit2」と入力されたままでよろしいのでしょうか?

    OKを押すと「このクラスの定義がクラスパス内に見つからなかったため,定義は書き出し時にSWF内に自動生成されます」という警告が出たので心配になってしまいました。。

    度々すいません。
    よろしくお願いいたします。

  70. 70 alumican
    11月 12th, 2010 at 4:37 PM

    >nekoさん

    その警告は、「本来はJPPScrollbarKit2.asっていうクラスファイルが必要なんだけど、見つからないから適当に空のクラスを作っておくよ」、というFlashのお節介なので放っておいて大丈夫です。

    ※蛇足です
    片方のスクロールバーは基本クラス、もう片方のスクロールバーは派生クラスにJPPScrollbar.asが結びついており気持ち悪いので(少なくとも僕は)、両方とも基本クラスをJPPScrollbarにして、それぞれのクラスをJPPScrollbarKit1、JPPScrollbarKit2にした方がデバッグしやすいし精神衛生上オススメです。

  71. 71 neko
    11月 18th, 2010 at 3:58 PM

    何度もすみません(;;)

    JPPScrollbarKit2の中身を元のJPPScrollbarKitとは別のものに変えたいのですが(画像を配置したり,テキストを変えたり),JPPScrollbarKitの中身まで同じように変更されてしまいます。

    二つとも基本クラスをJPPScrollbarにすると同期して変更されてしまうと考え,別にJPPScrollbarKit.asをコピーしてJPPScrollbarKit2.asを作成しました。

    JPPScrollbarKit2のコード内の“JPPScrollbar”の部分も書き直しました。

    それから,複製をし,基本クラスは空欄でクラスだけそれぞれJPPScrollbarKit1、JPPScrollbarKit2としたのですが,やはり中身を変えると同期して変更させてしまいます。。

    JPPScrollbarKitContentBodyの中身を書き換えているのですが,それが良くないのでしょうか??

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

  72. 72 alumican
    11月 18th, 2010 at 5:25 PM

    >nekoさん

    そうですね。
    2つのスクロールバーから同じJPPScrollbarKitContentBodyを編集使用としているためだと思われます。

    JPPScrollbarKitシンボルを複製してJPPScrollbarKit2シンボルを作った時と同じようにして、JPPScrollbarKit2シンボルに含まれるJPPScrollbarKitContentとJPPScrollbarKitContentBodyも複製してください。

    複製後のシンボルの階層構造が外側から順に
    JPPScrollbarKit2 -> JPPScrollbarKitContent2 -> JPPScrollbarKitContentBody2
    となっていることを確認してください。

    これで同期しなくなるはずです。

  73. 73 neko
    11月 18th, 2010 at 5:35 PM

    お返事ありがとうございます。

    PPScrollbarKitContentBodyを編集してしまうとダメなのですね。
    やはりそれも複製を作るしかないですか(;;)

    ありがとうございました。
    すっきりしました!

  74. 74 neko
    11月 29th, 2010 at 7:26 PM

    申し訳ありませんまた行き詰ってしまったので質問させていただきます。。

    別のコンテンツをスクロールするスクロールバーを2つ設置したいと考えています。
    しかし,別のコンテンツをスクロールさせるには中身を変える必要があるのだと思い,前回質問したようにJPPScrollbarKitContentBody2を作成していました。

    階層構造を
    JPPScrollbarKit2 -> JPPScrollbarKitContent2 -> JPPScrollbarKitContentBody2

    にしたところ,

    ##
    Cannot access a property or method of a null object reference.
    at JPPScrollbarKit2/_initialize()[C:\~\JPPScrollbarKit2.as:82]

    ##

    というエラーが出てしまいました。

    JPPScrollbarKit2.asの中身を書き換える必要があると考え,
    contentBodyをcontentBody2に変えてみたり,
    contentをcontent2に変えてみたりしましたがやはりエラーが出てしまいます。
    (sample03を使用していますが,そちらの書き換えも必要なんでしょうか?)

    どのように書き換えれば良いのか教えていただきたいです。

    また,スクロールする中身のコンテンツが違うものをJPPScrollbarKitContentBodyなどのシンボルを複製せずに2種類作ることは可能なのでしょうか?

    本当に申し訳ないのですが
    よろしくお願いいたします。

  75. 75 alumican
    11月 30th, 2010 at 2:20 AM

    >nekoさん

    こんばんは。

    Cannot access a property or method of a null object reference.
    at JPPScrollbarKit2/_initialize()[C:\~\JPPScrollbarKit2.as:82]

    これは実体のない変数にアクセスしようとしたときに出ますね。nullが出ているスクリプトを特定できますか?

    もし、JPPScrollbarKitを書き換えていないのであれば82行目でcontent.contentBodyへアクセスします。しかし、contentがステージ上に見つからないため(nullのため)、その子供であるcontentBodyにアクセスしようとしたときにエラーが出ている可能性があります。シンボルの階層構造は正しいようなので、インスタンス名がどうなっているのか確認してみてください。

    JPPScrollbarKit2をリンケージしたシンボルにcontentというインスタンス名のMovieClipが置かれていることと、その子供にcontentBodyという名前のMovieClipがあればうまくいくと思います。

    あと、Sample03は本来のスクロールバーの動作以外にタッチスクロールのためのスクリプトが書いてあるので、まずはシンプルなSample01で実験されるのがいいと思います。

    また,スクロールする中身のコンテンツが違うものをJPPScrollbarKitContentBodyなどのシンボルを複製せずに2種類作ることは可能なのでしょうか?

    contentBody(JPPScrollbarKitContentBodyのインスタンス)に別々のコンテンツをスクリプトで動的にaddChildすれば可能ですよ。

  76. 76 neko
    11月 30th, 2010 at 5:57 PM

    >>alumicanさん

    毎回ご丁寧に教えていただきありがとうございます。
    初心者過ぎてすみません;

    複製したもののインスタンス名をまったく見ていませんでした。。
    そこを直すことでSample03でも使うことができました!

    なるほどコンテンツを別で作るということですか,
    そちらも作ってみようと思います。

    本当にありがとうございました!

  77. 77 alumican
    11月 30th, 2010 at 8:30 PM

    >nekoさん

    無事うまくいったようでよかったです。

    AS3はエラーが起こったときの原因の切り分けがキモとなるので、
    いきなり洗練されたものに取りかかるよりも、最初は初歩的なサンプルから手を出していけば割とすんなりいくと思います。

    是非素敵なコンテンツを作ってください。

  78. 78 yasuhiroichikawa.jp » Archive » scroll bar
    1月 17th, 2011 at 11:23 AM

    [...] as3.0のスクロールバー。 blog.alumican.netとゆうサイトからライブラリを頂いた。 [...]

  79. 79 hagi
    2月 13th, 2011 at 6:04 PM

    初めまして。
    自分はProgressionを使用していてそこにJPPScrollbarを導入させていただきたいのですが現在「SceneA」ページ内にxmlで複数画像を読み込んでるPageというMovieClipを表示させています。
    そのPageをスクロールバーで可変させたいのですがその場合の手順はどのようになるのでしょうか?
    JPPScrollbarKit.as内から一部改変コピペしてSceneA.as内に記述したりしてるのですが上手く出来ません。

    何分ASの知識が乏しいので大変お手数ですが細かく教えていただけると助かります。

  80. 80 alumican
    2月 20th, 2011 at 11:43 AM

    > hagiさん

    こんにちは。
    返信が遅れてすみません。

    あまりProgressionに詳しくないのと、現在多忙につきサンプルを作れないのですが、おそらくPageが画像を全て読み込み終わるか、もしくはスクロールさせたいMovieCipのheightが確定した時点でJPPScrollbarを初期化すればいいと思います。

  81. 81 renzo
    3月 2nd, 2011 at 6:24 PM

    はじめまして、サンプルの09をダウンロードし使用させて頂こうと思っております。

    そこでご質問なのですが、XMLによる更新部分に使用したいと考えておりまして、試行錯誤はしているのですが、下記のようなエラーが出ます。

    TypeError: Error #1034: 強制型変換に失敗しました。XMLList@3105c709 を XML に変換できません。

    初心者で本当に申し訳ないのですが、いくつかの参考書を読んでも全く解決できず、直接質問させて頂きました。

    ■下記が弄った周辺のソースです。

    private function _initialize(e:Event):void {
    removeEventListener(Event.ADDED_TO_STAGE, _initialize);

    //外部テキストの読み込みを開始する
    var loader:URLLoader = new URLLoader();
    loader.addEventListener(Event.COMPLETE, _loadCompelteHandler);
    loader.load( new URLRequest(“http://www.サンプルアドレス/atom.xml”) );
    }

    private function _loadCompelteHandler(e:Event):void {
    e.target.removeEventListener(e.type, arguments.callee);

    //======================================================================
    //外部テキストのセット
    var loader:URLLoader = new URLLoader();//URLLoaderインスタンスを生成してURLを読み込み
    var myXML:XML = new XML();//XMLインスタンスの生成

    var tf:TextField = content.contentBody.tf;
    tf.text = URLLoader(e.target).data;

    myXML = XML(e.target).data;//XMLインスタンスにXMLを突っ込む
    trace(“XMLの読み込み完了!”);
    for (var i = 0; i < myXML.channel.length(); i++) {
    tf.text = myXML.channel.item[0].description;
    trace(myXML.channel.item[0].img.@src);
    }
    //AutoSizeを設定すると複数行テキストフィールドの高さがおかしくなる問題対策
    tf.autoSize = TextFieldAutoSize.LEFT;
    var h:Number = tf.height;
    tf.autoSize = TextFieldAutoSize.NONE;
    tf.height = h + tf.defaultTextFormat.leading;

    コピペがうまくいっているか不安な感じですが、ご教授頂ければ幸いです。

    何卒よろしくお願い致します。

  82. 82 alumican
    3月 3rd, 2011 at 1:28 AM

    >renzoさん

    こんばんは。
    まず1行毎にtraceを挟むなどしてどの部分がエラーをはいているのか突き止めてください。
    XML型にXMLList型を入れようとしているとエラーが言っているので、どこかで

    xml = xmlList[0];

    としなければならないところを

    xml = xmlList;

    としているのかもしれません。

    あと、読み込んでいるxmlがatomのようですが、channel>item>descriptionはRSSのフォーマットだったと思います。パースしようとしている要素が、読み込んでいるxml構造にちゃんと含まれているのか確認してみてください。

  83. 83 renzo
    3月 3rd, 2011 at 8:44 PM

    ご返信に心から感謝い致します。

    勉強不足で本当にお恥ずかしいのですが、

    xml = xmlList[0];

    上記の意味がまったくつかめておらず、意味がわかりません・・・。

    パースの方は大丈夫でした。

    traceにてエラーを探し、ご報告差し上げたいと思います。

    貴重なお時間大変ありがとうございました。

  84. 84 alumican
    3月 4th, 2011 at 4:54 PM

    >renzoさん

    XMLList型はXML型の配列みたいなものですから、XML型にXMLList型をそのまま代入できないのです。少なくともそのエラーメッセージはそういうことを言っています。

    しかしXMLList型に含まれる各要素はXML型なので、XML型にXMLList型のn番目(xmlList[0]のようにしてアクセス)を代入することは可能です。

    ということです。

  85. 85 renzo
    3月 5th, 2011 at 5:14 PM

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

    弄くり過ぎていただけでした・・・・。

    もっと構えすぎずにシンプルに考えればよかった。。。

    var myXML=XML (loader.data);
    trace(myXML.contact[0].web.toString());
    tf.text = myXML.contact[0].web.toString();

    こうするだけで表示しました。

    大変参考になりました。

    とても感謝しております。

    本当にありがとうございました!!

  86. 86 alumican
    3月 7th, 2011 at 2:32 AM

    >renzoさん

    無事表示できましたか。
    よかったです。

  87. 87 nosy
    3月 16th, 2011 at 8:51 PM

    素晴らしいスクロールバーで、早速使わせていただこうと思い
    自身のflaファイルへ導入したのですが、スクロールバーが
    動きません・・・。

    皆さんとのQ&Aも熟読してみましたが、どうしても動かず
    質問させていただきました。

    現在の状況として
    ・Publish settingは“/src”で設定
    ・自身のflaファイルと同じ階層に「src」フォルダ、
     「JPPScrollbarKit」ASファイルを格納
    ・サンプルflaファイルのライブラリからフォルダごと
     自身のflaファイルのライブラリへコピー
    ・「JPPScrollbarKit」MCをステージに配置
    ・パブリッシュは可能(エラーなし)

    初心者なもので、初歩的なミスがあると思いますが
    アドバイスをいただければ幸いです。

  88. 88 nosy
    3月 16th, 2011 at 10:25 PM

    度々申し訳ございません。
    Publish settingをデフォルトに戻し、再度同じ手順で試したところ
    無事使うことができました。

    これから、同じflaファイルの中で多用したいと考えてますが
    分からないことがありましたら、ご相談させてください。

  89. 89 fish
    6月 20th, 2011 at 7:09 PM

    素晴らしいスクロールバーなので、早速使わせていただいています。

    質問なのですが、
    このJPPScrollbarにmy_mcという名前を付けてステージに配置しています。
    その他にreset_btnというボタンをステージに配置しています。

    スライドさせてこのreset_btnが押されるとまた最上部に戻したいのですが(スライドされていない状態にする)、どの値をいじれば良いのでしょうか?

    removeしてaddしてもやはり同じスライド後の状態でした。。

    突然の質問申し訳ありません。
    よろしくお願いいたします。

  90. 90 alumican
    6月 22nd, 2011 at 12:56 AM

    >fishさん

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

    さて、最上部へスクロールさせるには、
    JPPScrollbarのインスタンス(仮にscrollbarとします)に対して、

    scrollbar.scrollByAbsolutePixel(scrollbar.upperBound);

    を実行すれば実現できます。

  91. 91 fish
    6月 22nd, 2011 at 2:42 PM

    >alumicanさん

    お返事ありがとうございます。

    使用してみたところ,

    「未定義である可能性のあるメソッド scrollByAbsolutePixel を、静的型 JPPScrollbarKit の参照を使用して呼び出しました。」

    「未定義である可能性が高いプロパティ upperBound に静的型 JPPScrollbarKit の参照を使用してアクセスしています。」

    JPPScrollbarKit.asファイルの_scrollbar.scrollByAbsolutePixel();部分のコメントアウトを直したのですが,他にどこをいじれば良いのかわかりません;

    よろしくお願いします。

  92. 92 alumican
    6月 23rd, 2011 at 12:17 AM

    >fishさん

    scrollByAbsolutePixelやupperBoundが実装されているのはJPPScrollbarKitクラスではなくJPPScrollbarクラスです。おそらくステージに置いているmy_mc、つまりJPPScrollbarKitクラスのインスタンスに対してそれらを呼び出したため未定義エラーが出ています。

    JPPScrollbarKit.asファイルの_scrollbar.scrollByAbsolutePixel();部分のコメントアウトを直したのですが

    この部分は関係ないのでコメントアウトしたままにしておいて下さい。

    まず、reset_btnからmy_mcを経由して上記のメソッドやプロパティにアクセスできるようにします。JPPScrollbarKitクラスに(どこでもいいですが、_scrollbarを定義している辺り)以下の記述を加えて下さい。いわゆるgetterと呼ばれるものです。

    public function get scrollbar():JPPScrollbar { return _scrollbar; }

    詳しくはKaedeさんのエントリーをご覧下さい。こうすることで

    my_mc.scrollbar

    のようにしてmy_mc経由でJPPScrollbarクラスにアクセスできるようになりました。あとは、reset_btnのハンドラ内に以下の記述をすれば、ボタンアクションでスクロールバーをトップに戻せます。

    my_mc.scrollbar.scrollByAbsolutePixel(0);

    もしスムーズスクロールを使用している場合、上記だとトップに戻るときにアニメーション付きでスクロールします。0秒で戻したいときは以下のようにして下さい。

    my_mc.scrollbar.useSmoothScroll = false;
    my_mc.scrollbar.scrollByAbsolutePixel(0);
    my_mc.scrollbar.useSmoothScroll = true;

    これで解決できるはずです。

  93. 93 akary
    6月 24th, 2011 at 4:32 PM

    前に一度ご質問させていただいたものです。
    あれからもとってもお世話になっています!
    感謝感謝です!!

    たびたび申し訳ございませんが、
    一つお聞きしたいことがございます。

    サンプルのflaファイルを開いてHTMLを書き出すと、JSの警告がでてしまいます。
    「getElementById()に空文字が渡されました。」
    という内容なのですが、原因わかりますでしょうか?

    swfobjectでFlashをembedしても同じ警告がでます。。。
    ものすごい勢い(毎フレーム?)なので、弱いPCだと長い間開いておくと落ちてしまいます。。。

    何かご教授いただけると幸いです。

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

  94. 94 alumican
    6月 24th, 2011 at 4:55 PM

    >akaryさん

    おそらくSWFWheelとJSの通信がらみだと思います。

    HTMLでswfを埋め込むときに、idとnameを明示的に指定してみてください。その際、IEでの動作用に”external”を接頭語として付けておくと良いです。

    もしくはnew JPPScrollbar()の第2引数をfalseとすることでSWFWheelを使わないオプションがありますので、こちらでも対処可能かと思われます。

  95. 95 nakamura
    6月 24th, 2011 at 7:43 PM

    JPPScrollbar を使わせていただいております。
    flashサイト制作は初心者でして、大変!!、助かっております。
    ありがとうございます。

    「samples/06 ・・・ 水平スクロールバーのサンプル」を主に使わせていただいておりまして、横スクロールのサイトを制作しております。

    おかげさまで、なんとか形にはなってきたのですが、あと一歩のところでつまずいております…

    Flash Playerでは、横のマウスホイールに正常に反応するのですが。
    完成したFlashをHTMLに埋め込むと、横のマウスホイールに全く反応しません。縦のマウスホイールには反応して、contents が横に動いてくれるのですが、、なんとか横のマウスホイールに反応するようにできないものでしょうか?

    お忙しいところ、申し訳ありませんが、ご享受いただけば幸いです。
    よろしくお願いいたします。

  96. 96 fish
    6月 25th, 2011 at 2:46 PM

    >alumicanさん

    無事解決することができました!
    また、リンク先も読み勉強させていただきます。

    これからもJPPScrollbarを使わせていただきます。
    何から何まで細かく説明いただき本当にありがとうございました。

  97. 97 yamamoto
    6月 28th, 2011 at 2:10 AM

    はじめまして。
    いつも使用させていただいております。
    突然の質問失礼します。

    コンテンツ量にあわせて縮むスクロールバーを作成可能とあったのですが、
    今回ちょうど入れたいコンテンツの量がばらばらなのでAS3.0で自動的に変わるように書きたいと考えています。

    どのように書いていいのかわからなかったため、

    scrollbar(仮) -> JPPScrollbarKit -> JPPScrollbarContent -> JPPScrollbarContentBody

    のbase部分をMCに変更し、baseというインスタンス名を付けbase.height = hoge;
    としたところ、当たり前かもしれませんがbaseより下までスクロールされてしまいました。

    うまく入れるコンテンツ量にあわせて縮めるにはどのように記述したら言いのでしょうか。
    勉強不足で申し訳ありませんが、ご教授頂ければ幸いです。

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

  98. 98 yamamoto
    7月 2nd, 2011 at 12:48 AM

    失礼します。
    先日質問させていただいた部分ですが、今まで質問された方への回答を参考に試行錯誤したところ
    解決することができました。

    お忙しいところ申し訳ありませんでした。

  99. 99 alumican
    7月 3rd, 2011 at 1:01 AM

    >nakamuraさん

    遅くなってすみません。
    横のマウスホイール、というのがよく分からないのですが、ホイールを横に倒せるタイプのマウスのことでしょうか。手元にそういった物が無いので試せていないのですが、FlashPlayerもしくはSWFWheelに依存する部分であるため、本ライブラリの範疇では対応できないと思います。

    >yamamotoさん

    遅くなってすみません。
    無事解決されたようでよかったです。

  100. 100 kakudon
    7月 5th, 2011 at 3:51 PM

    JPPScrollbar とても便利に使わせていただいております。

    コンテンツ量の変化に合わせてスクロール量を変えたいのですが、
    resizeSlider();メソッドの使い方が分かりません……

    JPPScrollbarKitContentBody内のタイムラインに記述する方法で、どうやればリサイズ出来るのか教えていただけませんか?

  101. 101 ホウジョウ
    7月 19th, 2011 at 3:03 AM

    はじめまして。
    スクロールバーの作成に頭を悩ましているactionscript超初心者です。
    本当に基礎的な質問なのですが、お答えいただけたら幸いです。

    現在、Papervision3dを使って作成中のコンテンツに公開いただいているスクロールバーを表示させたいと考えています。
    オブジェクトをクリックすると、スクロールバーのついたテキストボックスが表示されるという仕様にしたいのですが、どうすれば公開いただいているスクロールバーを利用できるかがわかりません。
    自分としてはリンケージしたインスタンス名を呼び出しステージにaddChildしてインスタンスを表示させています。同じようにこのスクロールバーを定義してaddChildし表示させる事はできませんでしょうか?
    もし良い方法があればご回答いたあだけたらうれしいです。
    よろしくお願いいたします。

  102. 102 ホウジョウ
    7月 25th, 2011 at 2:54 PM

    たびたびすみません!いろいろ試しているうちに簡単にできました!自分の初歩的な間違いでした。。。。活用させていただきます!

  103. 103 alumican
    10月 14th, 2011 at 5:32 PM

    >kakudonさん

    コンテンツ量が可変な場合は、resizeSliderを直接呼び出すのでは無く、コンテンツ量に合わせて適宜lowerBoundを変化させてあげれば自動的に調整されると思います。

    >ホウジョウさん

    解決して良かったです。
    これからもよろしくお願いします。

  104. 104 ackeee
    11月 24th, 2011 at 6:53 PM

    はじめまして。
    JPPScrollbarを楽しく使わせていただいています。

    Progressionで1.06のバージョンを使っていますが、
    マウススクロール時のスクロール量の調整はできますでしょうか?
    (特にmacのトラックパッド系(magicmouseなども)が実際速いです。)

    SWFWheelの設定だとは思うのですが、実装の方法などご教授頂ければ幸いです。

  105. 105 alumican
    11月 24th, 2011 at 10:36 PM

    >ackeeeさん

    はじめまして。

    マウスホイールのスクロール量を調整するとのであれば、JPPScrollbar.arrowScrollAmountプロパティを変更すれば可能です。

    ただ、矢印ボタンを押したときのスクロール量も連動して変わってしまうため、ホイールだけ個別に調整するにはJPPScrollbar.asの2299,2300,2303,2304行目にある_arrowScrollAmountを任意の数値に直接置き換えます。

    マウスホイールとmagicmouseを違う値にすることはできないと思います。

  106. 106 ackeee
    11月 25th, 2011 at 12:30 PM

    >alumicanさま

    ありがとうございました!!!!
    矢印を使用していなかったので、コメントアウトしたままでした。
    一撃でした!!!

    感謝です。

  107. 107 alumican
    11月 25th, 2011 at 9:01 PM

    >ackeeeさん

    うまくいったようで良かったです。
    これからもよろしくお願いします。

  108. [...] ■JPPScrollbar [...]

  109. 109 蜜柑
    12月 20th, 2011 at 2:55 AM

    こんにちわ。
    JPPScrollbarを使用させて頂いているのですがマウスホイールを無効にするにはどうすればよいでしょうか?

  110. 110 alumican
    1月 13th, 2012 at 7:43 PM

    >蜜柑さん

    お返事が遅くなってすみません。
    マウスホイールをオフにするには以下のようにします。

    _scrollbar.useMouseWheel = false;
  111. 111 Takkie
    1月 13th, 2012 at 10:58 PM

    はじめまして。

    AS初心者ですが、JPPScrollbar(sample/04)を使わせていただきながら、本や辞書を片手に、
    リキッドレイアウトでのスクロールに挑戦しております。

    スクロールさせることで、ムービークリップのタイムラインを動かすことはできないでしょうか。
    contentやcontentBodyのY座標を取得して、タイムラインを再生、停止できないか?など試してみているのですが、なかなかうまくいかないのです・・・。

    今、contentBody上に、外部XML(ニュース)を読み込むムービークリップを複数配置しており、
    それをイメージとしては、twitterなどオートページャライズのようにスクロールすると、ステージに現れる様にしたいのです。

    素人質問ですみません。
    お力を貸していただけませんでしょうか。

    宜しくお願いします。

Leave a Reply