Flashスクロールバーのサンプル（flaファイル付き）

マウスのホイールスクロール対応ってできるんですかね？それあるとかなり便利！

スクロールホイール忘れてましたね。
Macには対応してない（はず）ので、忘れがちです。
また実装してアップしますわ〜。

Mightyなマウスで横スクロールなんかもできちゃうんですかね。楽しみです。

はじめまして。
素人の私にも分かりやすいスクリプトで参考になりました。
ところで、これを横位置にしたいと思いまして、yをすべてxにして、heightをwidthにするという、少々乱暴なことをしたところ、両側の▲を動かすと絵も動き、スライダーも対応するのですが、今度は、スライダーのつまみを動かすと、左右に動かず、変な動き方をして、絵もスクロールしなくなります。

関係がありそうな部分だけピックアップして貼付けてみます。これでは、だめなのでしょうか？

//スライダーの移動範囲の下限
xMax = scrollSet.sBack._width-scrollSet.sBar._width;
//---------------------------------------------
//スライダーバーの位置に応じて、コンテンツの位置を移動させる関数
function activeScroll() {
content_mc._x = -scrollSet.sBar._x/mPc*mPb;
if (sliderbackPress == true) {
if ((scrollSet.sBar._x-scrollSet.sBack._xmouse)*stepMove scrollSet.sBar._x += stepMove;
}
}
if (pressUp == true) {
scrollSet.sBar._x -= coursorMove;
}
if (pressDown == true) {
scrollSet.sBar._x += coursorMove;
}
if (scrollSet.sBar._x scrollSet.sBar._x = 0;
}
if (scrollSet.sBar._x>xMax) {
scrollSet.sBar._x = xMax;
}
}
//スライダーのバーをドラッグした時
scrollSet.sBar.onPress = function() {
this.onEnterFrame = activeScroll;
this.startDrag(false, this._y, 0, this._y, xMax);
};

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

さきほどコメントした者です。
さきほど添付したスクリプトを
this.startDrag(false, 0, this._y, xMax, this._y);
と直したところ、動きました。

お騒がせ致しました。
ありがとうございました。

気付くの遅れてすいませんです。
startDrag(ロック:Boolean, ドラッグ範囲の最小x, 最小y, 最大x, 最大y)なので、横スライドのときはy固定ということで、コメントいただいた通りのスクリプトでOKです。

いえいえ、とんでもない、補足まで頂いて、ありがとうございました。

初めてコメントします。

こちらのサンプルをＤＬさせて頂きまして、実際に自分でファイルを書き出してみました。

すると自分で書き出したswfだと、windowsでマウスホイールでスクロールしません。
（ちなみにteraさんが書き出したswfは問題なく動作します。）

友達にも確認してもらったところ、その友達は自分で書き出してもwindowsでマウスホイールでスクロールするとの事です。

ちなみに僕は「Mac OS 10.4.8、Flash MX 2004」で書き出し、「Windows XP Professional SP1、IE6.0」で確認して、正常に動作しませんでした。

友達は「Mac OS 10.4.8、Flash MX 2004」で書き出し、「Windows XP Home edtion SP2、IE6.0」で確認して大丈夫との事です。

何か特別な書き出し設定などあるのでしょうか？
もしあるようでしたら、教えて頂けますでしょうか？

宜しくお願いします。

>>Hiroam様
はじめまして。とりいそぎご回答させていただきます。
こちらでも fla ファイルをダウンロードしてみたところ、なんとマウスホイール操作に関するコードが書かれていませんでしたので、Win & Mac ともにホイールには一切反応しないはずです。
おそらく、僕の方で、こっそり swfだけ更新して、fla側を更新し忘れていたようです。そして fla ファイルは僕の Mac の HDD が壊れたときに、一緒に消えてしまってるようです。ややこしいことをしてしまい、すいません。

友達の方が何故動いたのかが不思議です。

>>Hiroam様
更新しましたのでアップしておきました。なんかキャッシュの都合上か、サーバー上のファイルが更新されないので、「scrollBar2.fla」として別に置いておきます。
何かおかしな挙動があれば報告くだされば助かります。

早速の返信、ありがとうございます！
こんなに速く対応して頂きまして、ビックリです！

早速、自分で試してみたら問題なく動作しました！
本当に助かりました。
ありがとうございます。

>友達の方が何故動いたのかが不思議です。
はい、僕も不思議です。笑

こちらこそ、記事の不備を修正できたので助かりました。
このスクロールバー、結構皆さんにダウンロードしていただいているみたいなので、新規エントリーにてお知らせさせていただきました。

tera様

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

スクロールバーのサンプルを利用させていただいています。

スクロールバーの機能そのものもさることながら
私のようにScriptに疎いものでもわかりやすく、
作例としても大変よく出来ていると思います。

ただ1点だけどうしても私には解決できないことがありますので質問させていただきます。

実はデザインの都合上、スライダーバーの伸縮機能を停止したいのです。

//比率に応じてスライダーバーの高さを伸縮
scrollSet.sBar._height = scrollSet.sBack._height*mPc;

この部分をコメントアウトすればスライダーバーの伸縮機能が停止するのはわかりますが、
今度は伸縮機能を停止したスライダーバーとコンテンツのスクロールの相関関係が崩れてしまうようです。

//スライダーバーの位置に応じて、コンテンツの位置を移動させる関数
function activeScroll() {
content_mc._y = -scrollSet.sBar._y/mPc*mPb;
if (sliderbackPress == true) {
if ((scrollSet.sBar._y-scrollSet.sBack._ymouse)*stepMove scrollSet.sBar._y += stepMove;
}

このあたりを変更すればよいであろうことはなんとなくわかるのですが
具体的には、どこをどう変更すればよいのかわかりません。

お手数とは思いますがアドバイスをいただけないでしょうか？
よろしくお願いいたします。

＞tawawa様
こんにちは。
いじってみたら、それなりにできたっぽいのでエントリしておきました。
http://www.trick7.com/blog/2007/04/11-010329.php
試してみてください。よろしくです。

tera様

こんにちは。
tawawaです。

すばやいご回答ありがとうございます。
昨夜遅い時間に質問させていただいて
今朝一番でご回答いただけるとは思っていませんでした。
（いつ睡眠をとられているんでしょうか？）

お体にお気をつけてこれからもよいサンプルを公開してください。
（そうしていただけると私も助かります）

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

teraさま

大変勉強になるサイトですね。

さっそくスクロールのflaサンプルをダウンロードさせていただきたいのですが、当方の環境がMX(+mac OSX)なので、サンプルを開くことができませんでした。
MX2004をMXにヴァージョンダウンしたものをいただけないでしょうか？
それともMX2004のみの対応でしょうか？

お手数をお掛けいたします。

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

ゴダル様
お返事遅れてすいませんです。昨日のtwitterフィーバーで、記憶が飛んでしまいました。
当方はFlash8のため、MX形式ができませんでした。
お手数ですが、環境を作ってソースをペーストしてくださいませ。すいませんです。
スクロールホイールは対応してなかったかな？

teraさま

ご返事いただきありがとうございました。
なんとか環境を作ってぜひスクリプトのお勉強をさせていただきたいと思います。

今後ともどうぞよろしくお願いいたします。

こんにちは

flash横スクロールバーのflaファイルはありますか？

＞kei様
こんにちは。
すいません。ソースとしては用意していないので、上記コードの縦っぽいところを横に直して自作して下さいませ。よろしくです。

tera様
いつも本当にためになるサンプルありがとうございます。
初めて質問させていただきました。

このスクロールバーを利用させていただいたのですが、別の場所にあるボタンからも、content_mcの_yを制御したいのです。

on(release){
this._parent.set.content_mc._y = -500;
}
と書いています。

content_mcの位置指定は、上記で出来たのですが、スライダーに触るとcontent_mcの位置が元の状態に戻ってしまいます。

scrollSet.sBar._yの値を取得し直せばいいというのは分かるのですが、勉強不足で指定の仕方が分かりませんでした。
スクロールのスライダーの位置をcontent_mcの位置に同期させるには、どのように変更すれば宜しいでしょうか？

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

＞Aya様
こんにちは。ちょっと今週は忙しくて、きちんとご回答できないのですが、仰る通り、スライダーの位置を動かせばいいと思いますが、仕組みとして「スライダーの位置に content_mc が追従する」イメージの方が正しいので；
on(release){
this._parent.set.content_mc._y = -500;
}
ではなく、
on(release){
this._parent.set.scrollSet.sBar._y = 数値
}
という感じで、バーだけを動かしてやればいいと思います。
ただ、バーの移動量はコンテンツとマスクの高さから算出しないといけないので、
・自力で近似値を探し出す
・僕のコード中のmPb、mPcみたいな比率を算出して、希望の位置を（掛けたり割ったりして）求める。
どちらかのアプローチになります。

今熱があって頭が働かないのですが、
on(release){
var dest = 500 //コンテンツ移動目的座標
var mPc = this._parent.set.mask_mc._height/content_mc._height;
var mPb = this._parent.set.mask_mc._height/scrollSet.sBack._height;
var 数値 = （mPc, mPb, *-1とか使ってdest をいろいろいじってcontent_mc が 500動化したい時には sBar をどれだけ動かせばいいかを求める。）
this._parent.set.scrollSet.sBar._y = 数値
}
みたいな感じで一応どうにかなるかと思います。
コードは適当なのでmPbとかtraceして確認して下さい。パスとか間違えてたらすいません。頑張って下さい。

説明下手ですいません。サンプルzipして下されば落ち着いた頃にきちんと回答できるかと思います。

tera様

お忙しいところ、早速ご返答いただきましてありがとうございました。
その上、熱を出されてるとは…。
本当に申し訳ないです。

教えていただいたことを基にして、
以下のスクリプトを書いたところ、見た目ではちゃんと動いているようです。

on(release){
var pageTo = -180;
this._parent.set.content_mc._y = pageTo;
var mPc = this._parent.set.mask_mc._height/this.set.content_mc._height;
var mPb = this._parent.set.mask_mc._height/this.set.scrollSet.sBack._height;
var scrollTo = pageTo*mPc/mPb*-1;
this._parent.set.scrollSet.sBar._y = scrollTo;
}

合ってるかどうか、自信が無いのですが…。
ともかく、お大事にしてください。
ありがとうございました。

content_mcの長さをころころと変えるｆｌａｓｈを製作したのですが、それでもスクロールバーが作動するように改造しました。
その際に作ったサンプルをＵＰしたいと思います。
長いので、コメントではなくtextでＵＰします。

http://sakuratan.ddo.jp/uploader/source/date68841.txt

＞iiyoninaru様
ありがとうございます！改善していただいて感激です。
今後ともよろしくお願いいたします。とりいそぎ。

初めまして。
簡単にスクロールバーを作れないかと調べていたらたどり着きました。
初心者ながら何とかカスタマイズして出来たのですが
スクロールバーの■の部分をクリックすると
マスクしているMC内が少しずれてしまいます
ASがよく分からないもので、数値の部分を変えてみたりしましたが直らず・・。

作ろうと思っているものは、MC内にボタンを置いて
クリックしたら音楽が流れるというものを考えているので
中にはボタンを入れています。
作ったものはURLに入れています。
改善方法がありましたらお教え頂ければ幸いです・・。
色々と他のスクロールバーの作り方を探したり教わったりしたのですが
関数や変数が難しすぎて無理でした・・（泣

＞しか様
こんにちは。
ソースが見れないのではっきりとは言えませんが、どうも見たところスライダーをクリックした瞬間に中身の位置がずれてますね。ということは：
・ムービークリップのどれか（多分マスクされるMCかな）の基準点が左上(0,0)からずれている可能性があります。もしくはマスクする方のMCの"中身"のy座標を0以外に移動したかとか。スクリプトとしては「スクロールバーのつまみ部分が一番上の時、マスクされるMCのy座標をマスクするMCのy座標0の位置にする」ように設定してあるはずなので、そこがおかしくなってますね。

駄目なようなら、一旦全MCのy座標0にしてみてそこから一つずつ確認しながら移動させてみてください。コツは「ムービークリップの中身を移動させず、考えられる限り外側を移動するようにする」です。

あと「スライダーバーを変形ツールで変形しないようにする」とかですね。

あとは過去のコメント回答にヒントがあるかもしれません。

お返事が遅れましてすいません！
座標をあわせたらちゃんとなりました！
有難う御座いました＾＾

こんにちは、はじめまして。
いつも拝見してましたが、わからないことが出来たので質問させていただきます。
お時間がある時で宜しいので、目を通していただけると嬉しいです。

こちらのスライドバーのASに手を加えて、ウィンドウサイズ（setを包んだmc）を変更（y軸方向のみ）できるようにしました。
ウィンドウ（mc）の角を持ってドラッグすることで表示領域が縦に伸縮し、スライドバーも表示されている領域に比例して伸縮します。
上手くいったかな～と思ったのですが、デフォルトの大きさ以外の状態でスライドバーをクリックすると、スライドバーのｙ座標が０に戻されてしまいます。
それと同時にcontent_mcも移動してしまい、ぐちゃぐちゃになってしまいました。

上の方の質問のように
「スライダーをクリックした瞬間に中身の位置がずれてますね。ということは：
・ムービークリップのどれか（多分マスクされるMCかな）の基準点が左上(0,0)からずれている可能性があります。もしくはマスクする方のMCの"中身"のy座標を0以外に移動したかとか。スクリプトとしては「スクロールバーのつまみ部分が一番上の時、マスクされるMCのy座標をマスクするMCのy座標0の位置にする」ように設定してあるはずなので、そこがおかしくなってますね。」
この辺りが関係していると思うのですが…。
サイズを変更して、スライドバーもそれにくっついていくようにするにはどこをどういじったら良いのでしょうか？

お手すきの時にでもアドバイスを頂けると嬉しいです。

＞nanana様
はじめまして。こんにちは。
すみません。ちょっとすぐにはとりかかれないのですが、ちょっと状況が掴みづらいのですが、Stage自体をドラッグ変形しているイメージでしょうか？onResizeイベントで再計算みたいな？

「ほほうなるほど！キラーン！」ってな感じで検証サンプルを作り上げるスキルを僕はあいにく持っていないので、もし可能であれば途中サンプルとかソースをアップしていただけたりすると助かりますですー。

ではでは～。

こんばんわ、とても早い返事に驚いてます。
ありがとうございます。

こちらにflaファイルをアップいたしました。
http://www11.axfc.net/uploader/20/so/He_94899.zip.html
passは　flash　です。

試作品なので、素材などそのまま使用しております。
恐らくそのままムービープレビューして頂ければ、現状が把握できると思います。
お手数かけますが、どうか宜しくお願いします。

＞nanana様
サンプル拝見しましたー。gotoAndPlay(1); とかがちょっと効率悪いかもしれまれん。重要になるのは「比率を再計算する部分」なので、そこをひとくくりにして関数化させたりしてちょっとずつ改造していくとよいかと思います。

オリジナルのソースから作り直したものをアップしたので参考にしてみてくださいー。
http://www.trick7.com/blog/2008/04/26-001806.php
このエントリのソースから変更した箇所もあるので（まとめて関数化した部分）、上記URLのソースの方をベースにして作業していただくといいかと思います。

※コメント内iiyoninaru様のコメントも同じ事例っぽいですね。今リンク切れのようですが。確認漏れすいません。＞iiyoninaru様