FLASHでオリジナルのスクロールバーをつけたい、という時。
メインのコンテンツの位置、スクロールバーの位置の関係で、何がなんだか解らなくなってしまうことがありませんか?
スクロールバーだけでなく、バーの位置で状態(数値)を変化させるようなもの(拡大縮小であったり、透明度であったり)を作りたいなら、一次関数をきちんと理解することが必須です。

一次関数1
さて、一次関数とはどんなものでしょう?
どなたも中学校で習っています。

y = ax + b
(aは傾き、bは切片)

というかたちの式です。

グラフにするとこのような感じです。



数学では、公式は知っているけれども、その使い方が解らない。
言い方を変えれば、文章題で数学の公式の使い方が解らない、という方が多いです。
それは、その式の意味を理解していないからだと思います。

きちんと理解して、いろんな所に応用して下さい。


■xとyの理解
y=ax+b という式で、実際に変化するのはxのみです。
a(傾き)とb(切片)は定数ですから、xに値が入ればyは自動的に決まります。

スクロールバーでいえば、スクロールバーのつまみの位置がx(ドラッグして位置を変化させますね)、スクロールされるコンテンツの位置がyとなります(つまみの位置で自動的に決まりますね)

横スクロールバーを考える時、コンテンツの「x」座標が式でいう「y」に当たるということに、混乱をしてしまうことがあるので、その辺りは、落ち着いて考えて下さい。
数値を変化させる方が「x」で、それによって決まる値が「y」です。

xやyは便宜上のものなので、z = aw + b でも良いのです。


■b(切片)についての理解
一次関数2切片、という言葉はなじみが薄いかもしれません。
これは、x に 0 を代入すると簡単に理解できます。
x が 0 のとき、y = b になりますね。
つまり、x が 0 のときの y の初期値ということです。

スクロールバーで考えると、つまみを端っこにしている時のコンテンツの位置です。
bはマイナスもあり得ます。その場合、グラフとy軸が交わるbの位置が、x軸より下になります。



■a(傾き)についての理解
一次関数3傾きは、グラフからしたら、感覚的に理解できるでしょう。
滑り台と同じで、グラフが急な方が傾きが大きいです。

傾きが大きいとどうなるか?
x がちょっと変わっただけでy がぐんと動きますね。
この a に入ってくる傾きという値は、言い方を変えると「x が 1 動いた時に、y が何倍動くか」です。

傾きが 2、つまりy = 2x という式の場合を考えましょう。
x が 0 の時 y は 0 。
x が 1 の時 y は 2 になります。
x が 1 動くと、y が 2 動くということですね。2倍動くのです。

スクロールバーを10ピクセル動かすと、コンテンツは20ピクセル動く、ということになります。
a はマイナスもあり得ます。
その場合、右下がりのグラフになります。
スクロールバーのつまみを右に動かした時に、コンテンツが左に動くのならば、傾きはマイナスになります。




さて、一次関数についての理解は深まったでしょうか?
それではスクロールバーに応用してみましょう。

次のような状態を考えます。
スクロール

グレーの表示エリアが幅300px、虹色の表示コンテンツが400px
実際にはマスクなどで表示エリア外のコンテンツは隠すことになるでしょう。
オレンジのスクロールバーのつまみは、左端のときに x座標が 0 右端の時に x座標が 285 のとなります。

まずは、傾きを考えます。
スクロールバーの位置が 0 から 285 に移動する間、表示コンテンツはどのように動くでしょうか?
スクロールバーが左端のとき、表示コンテンツの x座標は「0」
スクロールバーが右端のとき、表示コンテンツのx座標は「-100」ですね。

スクロールバーが「285」増えた時に、表示コンテンツは「-100」増えるのです。
ではスクロールバーが「1」増えた時に表示コンテンツがいくつ増えるか?

-100 ÷ 285 ですね。

a = -20/57
となります。

公式的に書くと
(y2-y1)/(x2-x1)
という書き方になります。
x1 が x(スクロールバーのx座標)y1 が x1 のときの y の値(表示コンテンツのy座標)です。

両方 x座標で考えます。くれぐれも、 y や x という文字に惑わされないで下さい。


次に切片を考えます。
切片は、xが0のときの値、と書きました。
x(スクロールバーのx座標)が0のとき、y(表示コンテンツのx座標)も0ですね。
つまり、切片は0です。

表示コンテンツのx座標は「スクロールバーのx座標」×「-20/57」で求めることができるのです。


ActionScript的にかくと

contents_mc.x = (-20/57) * scroll_mc.x;

です。
なんだ、意外と簡単、でしょ?

【応用編】
上記の例では、表示コンテンツの幅が 400px と決まっていました。
ただ、実際にFLASHコンテンツをつくると、表示コンテンツが写真や文章量によって様々変化することが多いんですね。
その場合も同様の考え方です。

傾きは、(表示コンテンツの移動量)/(スクロールバーの移動量)なので、

( 0 - (表示コンテンツの幅-表示エリアの幅))/(スクロールエリアの幅-スクロールつまみの幅)

で出すことができますね。

ActionScript的に書くと

contents_mc.x = (viewarea_mc.width - contents_mc.width)/(scrollarea_mc.width - scroll_mc.width) * scroll_mc.x;

式で書く前に、言葉で書くと、間違いにくいカモしれませんね。


もし、表示エリアの左端が0でないとき、は、切片も考えなければならないので、

contents_mc.x = (viewarea_mc.width - contents_mc.width)/(scrollarea_mc.width - scroll_mc.width) * scroll_mc.x + b; ……(1)

として、
b = contents_mc.x - (viewarea_mc.width - contents_mc.width)/(scrollarea_mc.width - scroll_mc.width) * scroll_mc.x;
と考えます。この式にどこかのポイントでのcontents_mc.x、scroll_mc.xの値を代入するとbを得ることができます。
この b の値を (1) の式にいれたら、完成です。

ちょっとややこしくなるので、切片は0になるように「スクロールバーのx座標が0のとき表示エリアのx座標も0」になるように作るようにしましょう。




スクロールバーによって拡大縮小、や、透明度変化、というのも同様の考え方でできます。
是非チャレンジして、一次関数に慣れて下さい。

ブログランキング このエントリーをはてなブックマークに追加

カテゴリ:FLASH/FLEX/AIR