ボケスクロール

 

【POINT】

どこにいるのかおしえてもらおう。
きかれたほうはおしえるだけ。
どっちへいこうと距離が肝心。
ところでMath.absって……何?

1.MovieClip :MASK
スクロールするメニューの上に、半透明のカバーをかぶせます。その中央部分にメニューのひとつ分だけ穴をあけておきます。これがメインのスクロールで、マウスを追いかけます。
2.MovieClip:menu
MASKの下で逆方向にスクロールするメインメニューです。
3.MovieClip : menu/bokashi(menuの中に入っている)
ムービークリップmenuを 一度静止画像として書き出しします。 その際、pngのアルファつきで、解像度を72dpiで書き出しします。その画像をPhotoshopなどで、加工します。σ(^ ^;;の遣り方は、まず、フィルタのぼかし>移動を様子をみながらちょっとたりないかな、と思われる程度にかけます。 その後、画像をヨコにして、風フィルタを右・左それぞれ軽くかけます。そして 画像をタテにもどします。 (メニューがヨコの場合はわざわざまわさなくていいですよ)その画像をもう一度読み込んで、menuの中の、画像の上におき、ムービークリップ化します。こちらにスクリプトは書きませんが、指示を出しますので、インスタンス名をつけておきます。

1.まず、MovieClip : maskに一番基本のスクリプトをかいていきます。

onClipEvent(enterFrame){
  _y += _ymouse/5; /*スラッシュはわり算です。マウス位置とこのムービークリップの位置との差の1/5づつ、毎フレーム近づきます。マウスが止まった時、ゆっくりと減速してとまります。*/
}  

上記のコードを書いたらプレビューしてみましょう。ちゃんとマスク部分だけがマウスに良い感じで追いかけてきます。ここでスピードの感じをみて、_ymouseの後ろの数値(今は5)を変えます。 数値が増えれば増えるほど、とろとろになります。 こゆのは自分でいろいろやってみて、体感つかんでください。

2.それではもう少し、maskに性格付けをしていきます。

onClipEvent(load){ //このムービークリップが読み込まれた時の初期化(一回キリ)
  function doko(){  //だれかに、どこ?って聞かれたら、
return(_y);     //自分の居る場所だけをお答えします。
}

これで、menuはmaskの居る位置を知ることが出来ます。menuが自分で調べることもできるのですが、自分の事は自分が一番知っています(笑)から、教えてもらうのが一番いいでしょう。

3.MovieClip : menuは maskの位置を知って、その位置と自分の居た位置との差を詰めて近づいていこうとします。

onClipEvent(enterFrame){
  yN = _root.mask.doko();  //yNにmaskに教えてもらった位置を格納します。
  distance = (yP -yN);  //移動距離は自分の居る位置とmaskの居る位置との差です。
  _y += distance  //で、その移動距離分近づきます。
  yP = yN;    //新しい位置をひとつ前の位置に入れ替えます。
}

さて、これでもいちどプレビューしてみましょう。 動き、おかしくないですか? バグなんですよ…… (- -;;
セミナーでご覧になって覚えてらっしゃる方もいらっしゃるでしょうが…どうも、忙しいとマウス座標の確認なんかをさぼるらしいんです。 しょうがないので、書き出されたswfファイルをプレーヤーで見てください。そちらではちゃんと動くはずです。(それにしても 手抜きを覚えたなんて、さすが、ソフトウェアも成熟してきたってことでしょうか…)

4.MovieClip : menuに透明度の設定をいれていきます。

onClipEvent(enterFrame){
   yN = _root.mask.doko();
  distance = (yP -yN);
  _y += distance


  if(Math.abs(distance)<20){ //距離が20Px以内(あまり遠くないほうがいいですよ)
   bokashi._alpha =Math.ceil(Math.abs(distance))*5; 
/* 透明度は(距離*5)パーセントにしています。
100%を20pxで割るので1pxにつき5%ということですね。 */

   }else{  //それよりも遠い距離にあったら
   bokashi._alpha=100;  //ぼかした画像が表示されます。
  }

  yP = yN;
}

「Math.abs」は、絶対値を出します。二つのムービークリップの距離は 正の数になる場合もありますが、負の数になることもあります。また、アルファ値はプラス値しか対応できないのでマイナスの値が出てしまったときに、パニックに陥ってしまいます。アルファのための親切設計、ということで最初にアルファ値を出す時に絶対値を出して使うわけです。また、これ、セミナーのとき、ついつい「嘘」言ってしまいましたが、アルファはスクリプトで指示されたときには、整数値でなくても、適当にアルファ値をかけることが出来ます。 どうも1%づつではないようです。 というところで、監修の野中博士に教えて頂きましょう。
  
野中博士のマニアック講座
1/256=0.390625%刻みになります。 [カラー]の[高度な設定]で[アルファ]を加算するときと同じ0〜255ということです(それをパーセンテージに換算する)。
#そのため、0.3をいくら足し続けてもアルファはまったく 変化しないという現象が発生します。


ボケスクロールはヨコ向きでよくつくられてメニューになったりしていますが、動きの基本は同じで、YとXを入れ替えるだけです。

サンプルFLAファイルのダウンロード>>bokScroll_fla.zip