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

減速して止まるバージョン」など、他にもいろんなバリエーションのFlashスクロールバーを公開してますので、trick7トップページのスクロールバーの項よりご覧ください。

scrollBar.jpg

FlashPlayer7以上で動作する、簡単に設置できるスクロールバーセットを置いておきます。
インスタンス名を設定するだけで動き、デザインのカスタマイズも結構しやすいのではないでしょうか。
機能としては、

  • スクロールバーをドラッグでスクロールできます。
  • スクロールバーの背景をクリックすると、スクロールバーが所定の位置まで移動します。
  • 上下カーソルキーを押しても移動できます。(押しっぱなしOK)

詳しい設定方法などはダウンロードしたflaファイルで確認頂けますが、一応、解説させていただきます。

11/9追記:
サンプルで、コンテンツがマスクよりも短い場合の処理を忘れていたので、記事のコード末尾に書き足しました。

2/7追記:
Windowsのみのサポートとなりますが、マウスホイールのスクロールに対応させました。

ソースはこちら:scrollBar.fla(mx2004形式)

scrollBar.swf

ステージ上にコンテンツとなるインスタンス名content_mc(テキスト、グラフィック、ムービー、何を内包してもOKです)、表示領域となるマスク:インスタンス名mask_mc、スクロールバーセット:インスタンス名scrollSet(スクロールバーsBarとスクロールバーの稼動エリアsBackを内包している)、上下カーソルキーcursor_upとcursor_downを設置し、フレームスクリプトを以下のように記述します。
(サンプルflaファイルはsetというMCでくるんでいますが、上記構成さえ守れば_rootでもどこでも動きます。)

//スクロールバーの背景をクリックしたときの抵抗
var backFriction = 0.05;
//上下カーソルを押下時の移動量
var coursorMove = 3;
//マウスホイール回転時の移動係数(Windowsのみ)
var wheelMove = 1.5;
//---------------------------------------------
//マスクを設定
content_mc.setMask(mask_mc);
//相関する比率を求める
var mPc = mask_mc._height/content_mc._height;
var mPb = mask_mc._height/scrollSet.sBack._height;
//比率に応じてスライダーバーの高さを伸縮
scrollSet.sBar._height = scrollSet.sBack._height*mPc;
//スライダーの移動範囲の下限
yMax = scrollSet.sBack._height-scrollSet.sBar._height;
//---------------------------------------------
//スライダーバーの位置に応じて、コンテンツの位置を移動させる関数
function activeScroll() {
content_mc._y = -scrollSet.sBar._y/mPc*mPb;
if (sliderbackPress == true) {
if ((scrollSet.sBar._y-scrollSet.sBack._ymouse)*stepMove<0) {
scrollSet.sBar._y += stepMove;
}
}
if (pressUp == true) {
scrollSet.sBar._y -= coursorMove;
}
if (pressDown == true) {
scrollSet.sBar._y += coursorMove;
}
if (scrollSet.sBar._y<0) {
scrollSet.sBar._y = 0;
content_mc._y = 0;
}
if (scrollSet.sBar._y>yMax) {
scrollSet.sBar._y = yMax;
content_mc._y = -yMax/mPc*mPb;
}
}
//スライダーのバーをドラッグした時
scrollSet.sBar.onPress = function() {
this.onEnterFrame = activeScroll;
this.startDrag(false, this._x, 0, this._x, yMax);
};
scrollSet.sBar.onRelease = scrollSet.sBar.onReleaseOutside=function () {
this.onEnterFrame = null;
this.stopDrag();
};
//スライダーの後ろの部分をクリックした時
scrollSet.sBack.onPress = function() {
this.onEnterFrame = activeScroll;
sliderbackPress = true;
stepMove = (this._ymouse-this._parent.sBar._y)*backFriction;
};
scrollSet.sBack.onRelease = scrollSet.sBack.onReleaseOutside=function () {
this.onEnterFrame = null;
sliderbackPress = false;
};
//上カーソルをクリックした時
cursor_up.onPress = function() {
this.onEnterFrame = activeScroll;
pressUp = true;
};
cursor_up.onRelease = cursor_up.onReleaseOutside=function () {
this.onEnterFrame = null;
pressUp = false;
};
//下カーソルをクリックした時
cursor_down.onPress = function() {
this.onEnterFrame = activeScroll;
pressDown = true;
};
cursor_down.onRelease = cursor_down.onReleaseOutside=function () {
this.onEnterFrame = null;
pressDown = false;
};
//11.9追記:マスクよりコンテンツが短い場合は、スクロールバーは非表示にする
if(mPc>=1){
scrollSet._visible=false;
cursor_up._visible=false;
cursor_down._visible=false;
};
//2007.2.7追記:マウスホイールでスクロールさせる(Windowsのみ対応)
var wheelListner:Object = new Object();
wheelListner.onMouseWheel = function(delta) {
scrollSet.sBar._y -= delta*wheelMove;
activeScroll();
};
Mouse.addListener(wheelListner);

スクロールバーの高さは、コンテンツMCとマスクのMCとの比率によって自動的に伸縮します。
カーソルキーとか、背景クリックでスクロールとかの機能が不要な場合は削除できます。該当スクリプトも削除しておいて下さい。
なにぶん昔に作ったものなので、スクリプティングが甘いかもしれません。
flaファイル上で気軽に使えるスクロールバーセット、みたいなノリで使っていただければと思います。

備考:「スクロール対象のMCにテキストフィールドを内包させる時の注意点」
スクロール対象となるムービークリップ(content_mc)の中に、テキストフィールドを下端ぎりぎりに配置する場合、テキストフィールドの高さがおかしくなる症状のために、予期しない部分までスクロールしてしまう事があります。
その場合は、スクリプト9行目:
var mPc = mask_mc._height/content_mc._height;
の部分を、
var mPc = mask_mc._height/(スクロール下端にしたい数値);
というふうに、数値を直接入力してください。

Comments:42

bioplay 06-08-08 (火) 20:41

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

tera 06-08-08 (火) 20:52

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

bioplay 06-08-10 (木) 22:10

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

hiyoko 06-09-03 (日) 15:53

はじめまして。
素人の私にも分かりやすいスクリプトで参考になりました。
ところで、これを横位置にしたいと思いまして、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)*stepMovexMax) {
scrollSet.sBar._x = xMax;
}
}
//スライダーのバーをドラッグした時
scrollSet.sBar.onPress = function() {
this.onEnterFrame = activeScroll;
this.startDrag(false, this._y, 0, this._y, xMax);
};

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

hiyoko 06-09-03 (日) 16:44

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

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

tera 06-09-03 (日) 18:59

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

hiyoko 06-09-06 (水) 15:11

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

Hiroam 07-02-07 (水) 12:44

初めてコメントします。

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

すると自分で書き出した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」で確認して大丈夫との事です。

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

宜しくお願いします。

tera 07-02-07 (水) 13:11

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

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

tera 07-02-07 (水) 14:11

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

Hiroam 07-02-07 (水) 15:59

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

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

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

tera 07-02-08 (木) 0:00

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

tawawa 07-04-10 (火) 22:01

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;
}

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

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

tera 07-04-11 (水) 9:50

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

tawawa 07-04-11 (水) 11:10

tera様

こんにちは。
tawawaです。

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

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

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

ゴダル 07-05-08 (火) 16:11

teraさま

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

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

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

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

tera 07-05-11 (金) 1:06

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

ゴダル 07-05-12 (土) 1:58

teraさま

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

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

kei 07-08-23 (木) 19:09

こんにちは

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

tera 07-08-23 (木) 19:56

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

Aya 07-10-03 (水) 17:22

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

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

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

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

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

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

tera 07-10-03 (水) 18:12

>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して下されば落ち着いた頃にきちんと回答できるかと思います。

匿名 07-10-04 (木) 0:07

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;
}

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

iiyoninaru 08-02-01 (金) 13:40

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

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

tera 08-02-01 (金) 13:49

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

しか 08-03-09 (日) 2:20

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

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

tera 08-03-09 (日) 9:04

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

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

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

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

しか 08-03-16 (日) 1:59

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

nanana 08-04-25 (金) 17:18

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

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

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

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

tera 08-04-25 (金) 17:30

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

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

ではでは~。

nanana 08-04-25 (金) 20:51

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

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

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

tera 08-04-26 (土) 0:54

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

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

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

shin 09-01-19 (月) 14:54

横にコンテンツをスクロールさせて、スクロールバーも横にするのにてこずっております。
下のようなスクリプトにしたんですが、
スクロールバーを左から右へ目いっぱい移動すると、バーが下へずれて、
左へめいっぱい戻すと、元の位置に戻る、というような現象になるのはなぜでしょうか?

—————————————————————————–
//なめらかに止まるための抵抗。値が小さいほど減速大。
var friction = 0.2;
//スクロールバーの背景をクリックしたときの抵抗
var backFriction = 0.05;
//上下カーソルを押下時の移動量
var coursorMove = 3;
//マウスホイール回転時の移動係数(Windowsのみ)
var wheelMove = 1.5;
//———————————————
//マスクを設定
content_mc.setMask(mask_mc);
//初期化
init();

function init():Void{
//相関する比率を求める
mPc = mask_mc._width/content_mc._width;
mPb = mask_mc._width/scrollSet.sBack._width;
//比率に応じてスライダーバーの高さを伸縮
scrollSet.sBar._width = scrollSet.sBack._width*mPc;
//スライダーの移動範囲の下限
xMax = scrollSet.sBack._width-scrollSet.sBar._width;
}
//スライダーバーの位置に応じて、コンテンツの位置を移動させる関数
function activeScroll() {
content_mc.goalX = -scrollSet.sBar._x/mPc*mPb;
if (sliderbackPress == true) {
if ((scrollSet.sBar._x – scrollSet.sBack._xmouse)*stepMove < 0) {
scrollSet.sBar._x += stepMove;
}
}
if (pressUp == true) {
scrollSet.sBar._x -= coursorMove;
}
if (pressDown == true) {
scrollSet.sBar._x += coursorMove;
}
if (scrollSet.sBar._xxMax) {
scrollSet.sBar._x = xMax;

}
}
//2008.4.30追記:減速スクロールのための関数
function contentsEnterFrame () {
content_mc.flg = true;
content_mc.onEnterFrame = function () {
var dis:Number = this.goalX – this._x
if(this.flg || Math.abs(dis)>1){
this._x += dis*friction
}else{
delete this.onEnterFrame;
}
}
}
//スライダーのバーをドラッグした時
scrollSet.sBar.onPress = function() {
contentsEnterFrame();
this.onEnterFrame = activeScroll;
this.startDrag(false, 0, this._x, xMax, this._x);
};
scrollSet.sBar.onRelease = scrollSet.sBar.onReleaseOutside=function () {
content_mc.flg = false;
delete this.onEnterFrame;
this.stopDrag();
};
//スライダーの後ろの部分をクリックした時
scrollSet.sBack.onPress = function() {
contentsEnterFrame();
this.onEnterFrame = activeScroll;
sliderbackPress = true;
stepMove = (this._xmouse-this._parent.sBar._x)*backFriction;
};
scrollSet.sBack.onRelease = scrollSet.sBack.onReleaseOutside=function () {
content_mc.flg = false;
delete this.onEnterFrame;
sliderbackPress = false;
};
//上カーソルをクリックした時
cursor_up.onPress = function() {
contentsEnterFrame();
this.onEnterFrame = activeScroll;
pressUp = true;
};
cursor_up.onRelease = cursor_up.onReleaseOutside=function () {
content_mc.flg = false;
delete this.onEnterFrame;
pressUp = false;
};
//下カーソルをクリックした時
cursor_down.onPress = function() {
contentsEnterFrame();
this.onEnterFrame = activeScroll;
pressDown = true;
};
cursor_down.onRelease = cursor_down.onReleaseOutside=function () {
content_mc.flg = false;
delete this.onEnterFrame;
pressDown = false;
};
//11.9追記:マスクよりコンテンツが短い場合は、スクロールバーは非表示にする
if (mPc>=1) {
scrollSet._visible = false;
cursor_up._visible = false;
cursor_down._visible = false;
}
//2007.2.7追記:マウスホイールでスクロールさせる(Windowsのみ対応)
var wheelListner:Object = new Object();
wheelListner.onMouseWheel = function(delta) {
var goal = scrollSet.sBar._x- delta*wheelMove
if(goal =xMax){
scrollSet.sBar._x = xMax;
}else{
scrollSet.sBar._x = goal;
}
contentsEnterFrame();
activeScroll();
};
Mouse.addListener(wheelListner);

mutumi 09-01-19 (月) 15:05

よく使わせていただいております。
今回はサイトのトップで使ってみたいと思って、チャレンジしてるんですが、
「横にコンテンツをスクロールさせて、スクロールバーも横にさせる」
という作り変えでつまづいています。
下に掲載したスクリプトだと
「スクロールバーの高さが、行きと帰りで変わってしまう」
という現象に陥ってしまいます。
なにが原因なのでしょうか?

//なめらかに止まるための抵抗。値が小さいほど減速大。
var friction = 0.2;
//スクロールバーの背景をクリックしたときの抵抗
var backFriction = 0.05;
//上下カーソルを押下時の移動量
var coursorMove = 3;
//マウスホイール回転時の移動係数(Windowsのみ)
var wheelMove = 1.5;
//———————————————
//マスクを設定
content_mc.setMask(mask_mc);
//初期化
init();

function init():Void{
//相関する比率を求める
mPc = mask_mc._width/content_mc._width;
mPb = mask_mc._width/scrollSet.sBack._width;
//比率に応じてスライダーバーの高さを伸縮
scrollSet.sBar._width = scrollSet.sBack._width*mPc;
//スライダーの移動範囲の下限
xMax = scrollSet.sBack._width-scrollSet.sBar._width;
}
//スライダーバーの位置に応じて、コンテンツの位置を移動させる関数
function activeScroll() {
content_mc.goalX = -scrollSet.sBar._x/mPc*mPb;
if (sliderbackPress == true) {
if ((scrollSet.sBar._x – scrollSet.sBack._xmouse)*stepMove < 0) {
scrollSet.sBar._x += stepMove;
}
}
if (pressUp == true) {
scrollSet.sBar._x -= coursorMove;
}
if (pressDown == true) {
scrollSet.sBar._x += coursorMove;
}
if (scrollSet.sBar._xxMax) {
scrollSet.sBar._x = xMax;

}
}
//2008.4.30追記:減速スクロールのための関数
function contentsEnterFrame () {
content_mc.flg = true;
content_mc.onEnterFrame = function () {
var dis:Number = this.goalX – this._x
if(this.flg || Math.abs(dis)>1){
this._x += dis*friction
}else{
delete this.onEnterFrame;
}
}
}
//スライダーのバーをドラッグした時
scrollSet.sBar.onPress = function() {
contentsEnterFrame();
this.onEnterFrame = activeScroll;
this.startDrag(false, 0, this._x, xMax, this._x);
};
scrollSet.sBar.onRelease = scrollSet.sBar.onReleaseOutside=function () {
content_mc.flg = false;
delete this.onEnterFrame;
this.stopDrag();
};
//スライダーの後ろの部分をクリックした時
scrollSet.sBack.onPress = function() {
contentsEnterFrame();
this.onEnterFrame = activeScroll;
sliderbackPress = true;
stepMove = (this._xmouse-this._parent.sBar._x)*backFriction;
};
scrollSet.sBack.onRelease = scrollSet.sBack.onReleaseOutside=function () {
content_mc.flg = false;
delete this.onEnterFrame;
sliderbackPress = false;
};
//上カーソルをクリックした時
cursor_up.onPress = function() {
contentsEnterFrame();
this.onEnterFrame = activeScroll;
pressUp = true;
};
cursor_up.onRelease = cursor_up.onReleaseOutside=function () {
content_mc.flg = false;
delete this.onEnterFrame;
pressUp = false;
};
//下カーソルをクリックした時
cursor_down.onPress = function() {
contentsEnterFrame();
this.onEnterFrame = activeScroll;
pressDown = true;
};
cursor_down.onRelease = cursor_down.onReleaseOutside=function () {
content_mc.flg = false;
delete this.onEnterFrame;
pressDown = false;
};
//11.9追記:マスクよりコンテンツが短い場合は、スクロールバーは非表示にする
if (mPc>=1) {
scrollSet._visible = false;
cursor_up._visible = false;
cursor_down._visible = false;
}
//2007.2.7追記:マウスホイールでスクロールさせる(Windowsのみ対応)
var wheelListner:Object = new Object();
wheelListner.onMouseWheel = function(delta) {
var goal = scrollSet.sBar._x- delta*wheelMove
if(goal =xMax){
scrollSet.sBar._x = xMax;
}else{
scrollSet.sBar._x = goal;
}
contentsEnterFrame();
activeScroll();
};
Mouse.addListener(wheelListner);

tera 09-01-19 (月) 15:45

ちょっと今忙しくて詳しいコードレビューはできないのですが、一か所
if (scrollSet.sBar._xxMax) {
という記述がありますけど、そこは関係ありますでしょうか?
yをxにしていれば高さが変わるという現象はあまり起こらないとは思うんですが、ちょっとコードみただけでは分かりませんでしたー。

mutumi 09-01-20 (火) 13:04

すばやい御回答、ありがとうございます。

if (scrollSet.sBar._xxMax) {

if (scrollSet.sBar._xMax) {
と直してみたんですが、変わりませんでした…。

どうやらOnRelease後の挙動がおかしいようなんです…。
バーがOnRelease後に上下にいったり来たりで…

お手すきのときでもよろしいので、もしなにかわかったりしたら是非どなたか教えてくださいませ~。

mutumi 09-01-20 (火) 13:11

メールアドレス間違って記入してました。すみません…

追送ですみませんが、横スクロールのスクリプトは基本的に_heightと_yを、_widthと_xに変え、this.startDrag(false, 0, this._x, xMax, this._x);に変更すればいいんじゃないかなあ、とか思ってたんですけど、ちがうんですかね、なにかが。
もしくはインスタンスを横にしたときに問題が起こってたりするんでしょうか…。横用にシンボル作ってみたんですけど、うまく改善できず…でした…。

tera 09-01-20 (火) 13:37

startDrag(false, 0, this._x, xMax, this._x);
のxMaxを実際のコンテンツの幅に置き換えるとか(上記コメント中にもあったかと思いますが、ダイナミックに中身作ってるとxMaxがおかしくなるケースがあったかも)、全般に変数をなるたけ実数値に置き換えたり、コードを部分的に削るなりで、デバッグしていただくしかないかと思います。
たしか上のコメントか、関連コメントのどこかに横スクロールバー化した人がいたと思うので、できることはできそうな気がします。

mutumi 09-02-27 (金) 12:40

ありがとうございます。
がんばってみます。

もし実現しましたらレポートしたいと思います。

u-suke 09-03-17 (火) 16:24

はじめまして、いつも参考にさせて頂いており、大変助かっています。
試行錯誤しながら、設置に励んでおりますが、一つ問題がありまして質問させて頂きます。
現在アップ中の縦スクロールの下に、横スクロールのマスクも設けたいと考えております。イメージとしては縦にテキスト、横に写真。同じMC上に配置してみた時は、変数名やインスタンス名を微妙にずらして2つのスクロールスクリプトを設置しましたが誤作動を起こします。また、新しいMCに横スクロールを作り、縦スクロールのMCに設置すると、各変数やインスタンスが絶対パスでないと反応しない所や、そうでない所などがあり、困難しております。
この場合どのような方法が望ましいのでしょう?

現在以下の様に置いています。

縦スクロールMC   スクリプト
          マスク
          カーソル
          バー等々
          横スクロールMC スクリプト
                   マスク
                   カーソル
                   バー等々

tera 09-03-17 (火) 17:42

u-sukeさま
こんにちは。コメントありがとうございます。
すみませんが、僕自身入れ子にした経験がないのと、ちょっと作られようとしているflaの構造が理解しきれませんで、スマートなご回答は出せないのですが、インスタンス名・変数名を絶対に重複しないようにすれば並列で登場させることもできるはずだとしか、コメントできない感じです。
すいません。
(最近AS3ばかり書いていたので、こないだAS2でリンケージをaddする方法すら忘れていたレベルです僕。)

u-suke 09-03-21 (土) 14:03

tera様

お返事有り難うございます。
いろいろと試した結果、並列でできる様になりました。が、横スクロールの方が、
function contentsEnterFrame() {
content_mc2.flg = true;
content_mc2.onEnterFrame = function() {
var dis:Number = this.goalX-this._x;
if (this.flg || Math.abs(dis)>1) {
this._x += dis*friction;
} else {
delete this.onEnterFrame;
}
};
}
の部分の機能をしません。

//左カーソルをクリックした時
cursor_up2.onPress = function() {
contentsEnterFrame();
this.onEnterFrame = activeScroll;
pressUp2 = true;
};

左右各ボタンでactiveScrollは機能する(つまり左右に移動する)のですがcontentsEnterFrameの働き(減速スクロール)をしません。[function cntentsEnterFrame]関数名を変えてみたりもしましたが結果は同じでした。考えられる原因は何でしょう?また、お時間あるときにご教授下さい。

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.trick7.com/blog/2006/08/08-112615.php/trackback
Listed below are links to weblogs that reference
Flashスクロールバーのサンプル(flaファイル付き) 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)

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

相互リンク

hi-posiさん
携帯Flashといえばhi-posiの岡田昇三さん。FlashLiteの有益な記事もたくさん書かれていていつもお世話になってます。ついにご挨拶させていただきました。面白すぎる人でしたw。

Return to page top