ゆっくり止まるスクロールバー

ActionScript2.0 製のゆっくり止まるスクロールバー、いわゆる「減速するスクロールバー」です。

ソースはこちら:slowDownScrollBar.fla(Flash8形式)

slowDownScrollBar.swf

今までその場対応でいろんなバリエーションのスクロールバーを作って把握しづらくなったので、ついにtrick7.comのトップをそれなりにして、多少アーカイブしました。

今回の機能としては初期の機能+減速機能な感じで:

  • 減速しながらスクロール
  • スクロールバーの後ろ(敷地?)部分を押しても減速スクロール
  • 上下三角カーソル押しても減速スクロール
  • Windowsのみマウスホイール減速スクロール。Flash の機能で実装しているのでMac対応したい人はこの部分のコードをオフにして別途 JavaScript と連携させて実装してください。(現状 MouseWheel on Mac OS って完璧になったのですかね?要調査でお願いします。)
  • ゆっくり止まる具合はフレームスクリプト1行目の friction 変数で調節可。その他設定しそうな変数も同様にフレームスクリプト上部にまとめてあるのでそこをいじってください。

あとは各自要望に応じてコードを簡略化したり追加実装するなりご自由にどうぞ。一応パートごとにコード削れるようになっているつもりです。サイズ変更や横スクロールにするといった改造の際は、trick7トップから過去のスクロールバー記事のコメントなどを参考にしてください。

補足:僕がActionScript初心者の時にActionScript初心者を意識して作ったものなので、もっと効率良くコード書いてる人は教えてください。このサンプル内にバグなどあれば各自直して各自ブログで公開していただけましたらリンク貼らせていただきます。実業務に使えるレベルなのかは自己判断でお願いしますね。

Comments:20

mash 08-05-02 (金) 16:32

どうもご無沙汰してます。

さりげにこえ部の左プレイヤーのコメント部分も減速スクロールしますよ!
それにおすすめなのは、Flashがアクティブでない時でも、マウスオーバーしてホイールスクロールすると(Flash部分クリックしないでも)動く。

tera 08-05-02 (金) 21:37

>mashさん
お世話になってます。
素敵なスクロールバーですね。たしかAS3でしたっけ?
いまHTML拝見したら、こえ部っていろんなJavaScriptのオンパレードですね~。
またいろいろ教えてください~。

tk-2 08-05-08 (木) 19:31

>ついにtrick7.comのトップをそれなりにして、

コーディングの鬼からゆわせてもらうと、0点どころかマイナス点のソースですよ!www

タグがきちんとかけてなかったり、閉じタグの位置が違ったりw
フラッシュだけでなく、htmlも愛してあげて~!!

tera 08-05-09 (金) 8:12

>tk-2
おひさしぶりー。準備できとるかい?
そのうち直すわー。

Slepp 08-05-30 (金) 21:52

はじめまして。SLEPPと申します。

減速するスクロールバーを製作しようとていたのですが、なかなかうまくいかずギブアップしていたところ、
trick7.com様を発見してテンションあがっております。

しかし当方、FlashMX2004ユーザーでして、Flash8形式の.Flaファイルが開けませんでした;_;
もしよろしければMX2004形式で.Flaファイルを再UPして頂けないでしょうか?

ハジメマシテでいきなりのお願いで誠に申し訳ございませんm(__)m

tera 08-05-30 (金) 22:53

>Slepp様
コメントありがとうございます。
当方既にCS3しかありませんので、2004形式での保存ができません。
お手数ですがFlash8をお持ちのご友人の方にお願いしていただくか、CS3体験版などでソースをご覧いただくかでご対応いただけますでしょうか?
とりいそぎすみません。

Slepp 08-05-31 (土) 0:39

tera様

ご丁寧にお返事&アドバイス下さってどうもありがとうございます。
とても嬉しく思います。
なんとかファイルを開けるよう動いてみます!
CS3へのバージョンアップ(てかもう買い替えですね。。。汗)も検討しようとおもいます。

これからもいろいろと勉強させてください!!
この度はどうもありがとうございました。

tk-2 08-06-03 (火) 15:12

どうも。ぼくです。

あのさ、これってホイールでコリコリしようと思ったら、いったんフラッシュ領域をクリックせんとあかんよね?
ほんで、ページ(html部分)をスクロールしようと思ったら、今度はフラッシュ領域以外をクリックせんとあかんやん。

これをですね。フラッシュの領域に入ったとか出たとかを判断して処理することはできますか?
用は、htmlのinlineflameみたいにできるのかなぁと思って。。。

いつも質問ばかりですんまそん。

tera 08-06-03 (火) 15:35

やるならjsで制御することになるんかと思うんやけど、
http://laszlo.jp/modules/xhnewbb/viewtopic.php?topic_id=192&forum=1
ブラウザごとに挙動とか変わってくるので難しいっぽい。

AS3ならswfにフォーカスが乗ってるか乗ってないかが取得できるようになったから、
http://mtl.recruit.co.jp/blog/2007/10/actionscript_3_50.html
の27番
こいつとやっぱりjsを併用することになるかと思うけどやっぱりブラウザごとの挙動に苦労するかも。

僕は力技で事前にクリックさせて始まるようなswfにしちゃうようにしてる。swf出るときは知らんぷりする。

あ!上のコメントにある「こえ部」ではその辺うまいことやってるっぽいので、そっちのjsで勉強させてもらったら?製作者のかたがjsのエキスパートなのでたぶん僕にはすぐに理解できんのやけど。

tk-2 08-06-03 (火) 15:53

おお!すばやい返事ありがとう。
jsとの連携ってゆうのは、想像ついてたんやけど、、、
ブラウザごとの挙動か、、、、なるほど。

知らんぷりって、、、w
「ぷり」このあたりがかわいらしいやん~ww!

「こえ部」参考にさしてもらいま。
ありがとう!!!

tk-2 08-06-03 (火) 16:04

ってか、mashサンのコメント見たけど、まさにこれですやん。もちろんサイトも見せてもらった。
コメント読まずして投稿してしまった。。。。ごめん。

AS3からフォーカスを取得できるようになったのね。サンクス!!

tks 08-06-19 (木) 14:37

これのスクロールバーFIX版を作ろうと思ったんですが、むずい・・・

tera 08-06-20 (金) 16:44

>tksさま
コメントありがとうございます。
なにせコード書いた本人もまとめきれておりませんのでw

Tach 08-09-22 (月) 21:22

いつも参考にさせて頂いています。
サンプルも豊富で独学の僕にはほんと助かります。

で、ですね、こちらの「減速するスクロール」のAS3版を自分で作ろうと頑張っているのですが、なかなか・・・・。
AS3番を是非アップして頂きたく書き込みしました。
突然失礼かと承知しておりますが、是非ともお願いいたします。

tera 08-09-22 (月) 22:51

>tachさま
コメントありがとうございます。
AS3版をとのことですが、
http://www.trick7.com/blog/2008/06/29-112614.php
のエントリの後半部分で紹介している「gotoAndLearn」というサイトで解説されているスクロールバーがすでに完成度高いので、僕ならそっちを使うかなぁと思っております。Tweenerライブラリを使うというハードルはあるものの、効率がよさそうなのでおすすめですー。

Tach 08-09-22 (月) 23:13

迅速なご対応ありがとうございます。
でわ早速!と思いきや、リンクが切れている様子です。
苦・・・。
ちなみにですね、こちらの
http://flashrevolution.net/actionscript-3-scrollbar/
サンプルを利用しようと思ったのですが、
僕の場合、外部SWFにテキストエリア(スクロール部分)を作ってメインに読み込む、と言う事がしたかったのですが上記のサンプルにはスクロール部分のMCがリンケージ(クラス)になっていて、カスタマイズが困難です。
やはりAS2でお世話になっていた、trick7さんのこのスクロールがお気に入りな訳でして・・・・。
長々とすみません。

Tach 08-09-22 (月) 23:18

何度もすみません。
チュートリアル発見しました。一度チャレンジしてみます。
少し見た所やはりリンケージを利用しているようですが、
やってみます。

Tach 08-09-22 (月) 23:24

何度もすみません。
チュートリアル&File発見しました。一度チャレンジしてみます。
ほんと、助かりました。
僕は大阪なのですが、今度セミナーなどがあれば必ず参加します。
応援してます!
いつもありがとう!

tera 08-09-22 (月) 23:34

>Tachさま
リンク貼りなおしておきました。
僕のスクロールバーのAS3版、暇ができたらやってみますー。
今年は結構いそがしいので、期待しないでくださいw。

Yu-ki 09-11-12 (木) 18:40

tk-2さんから素敵なスクリプトがあるよ!って紹介されました。
使わせていただきます。ありがとう!

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.trick7.com/blog/2008/05/01-093132.php/trackback
Listed below are links to weblogs that reference
ゆっくり止まるスクロールバー from trick7
AS3習得本
AS3の全容を学習できる本。この中でどれか1冊自分に合ったものを。
Adobe Flash CS4 詳細!ActionScript3.0入門ノート ActionScript3.0 プロフェッショナルガイド 初めてのActionScript 3.0 Flashユーザーのためのステップアップガイド 詳説 ActionScript 3.0 Actionscript 3.0 Cookbook
AS3発展本
ASでアニメーションさせる面白さを知るための本。
Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編] ActionScript 3.0 アニメーション AdvancED ActionScript 3.0 Animation (Advanced)
AS2
"Flash"ではなく"ActionScript2.0"学習のための良著。他にもいろいろ読んだけど、この4冊を読んだ後、自分が成長できた感じがしました。
FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付] Essential Actionscript 2.0 Flash 8 Essentials Foundation Actionscript Animation: Making Things Move (Foundation)

あわせて読みたいブログパーツ

Return to page top