第12回 マウスポインタとスクロールの連動

第12回←教材はこれ!

  • 複数行のコメントアウトは「/*」と「*/」ではさむ。CSSと一緒かな。マウス位置によってスクロールスピードを変える。

// var nNewSpeed:Number; // つぎのステートメントに変更
var nNewSpeed:Number = nStageCenter-stage.mouseX;

/* スクロール方向の判定は不要になる
if (stage.mouseX&nStageCenter) {
nNewSpeed = nSpeed;
} else {
nNewSpeed = -nSpeed;
}
*/

  • ただしこれだとスクロールスピードが速すぎたりするので制限速度をもうける。

// MovieClip: スクロールさせるインスタンス
var nSpeed:Number = 20;  ←制限速度
var nStageLeft:Number = 0;
var nStageRight:Number = stage.stageWidth;
var nStageWidth:Number = nStageRight-nStageLeft;
var nStageCenter:Number = (nStageRight+nStageLeft)/2;
var nSensitivity:Number = 0.2;  ←感度係数
addEventListener(Event.ENTER_FRAME, xScroll);
function xScroll(eventObject:Event):void {
var nNewSpeed:Number = (nStageCenter-stage.mouseX)*nSensitivity;
if (nNewSpeed>nSpeed) {  
←制限速度より大きければ
nNewSpeed = nSpeed;    ←制限速度に置き換え 
} else if (nNewSpeed<-nSpeed) {  ←マイナス方向に制限速度より大きければ
nNewSpeed = -nSpeed;    ←マイナス方向に制限速度置き換え 
}

x += nNewSpeed;

if (x>nStageRight) {
x -= nStageWidth;
} else if (x&nStageLeft) {
x += nStageWidth;
}
}

  • しかし、このやり方でも少し問題があると。
  • DisplayObject.xプロパティに小数点以下の端数がある数値を設定すると、四捨五入で小数点以下第2位までの値に丸められてしまう。
  • なので誤差の累積でインスタンスの位置がずれる可能性がある。
  • ところが変数は最大で小数点以下15桁の値を保持できるので、座標値を変数に入れて扱えば、目に見える誤差が出ない十分な精度で処理できる。なるほどー。
  • そんなわけで最終的にはこうなる。

// MovieClip: スクロールさせるインスタンス
var nSpeed:Number = 20;
var nStageLeft:Number = 0;
var nStageRight:Number = stage.stageWidth;
var nStageWidth:Number = nStageRight-nStageLeft;
var nStageCenter:Number = (nStageRight+nStageLeft)/2;
var nSensitivity:Number = 0.2;
var nX:Number = x;
addEventListener(Event.ENTER_FRAME, xScroll);
function xScroll(eventObject:Event):void {
var nNewSpeed:Number = (nStageCenter-stage.mouseX)*nSensitivity;
if (nNewSpeed>nSpeed) {
nNewSpeed = nSpeed;
} else if (nNewSpeed<-nSpeed) {
nNewSpeed = -nSpeed;
}
nX += nNewSpeed;
if (nX>nStageRight) {
nX -= nStageWidth;
} else if (nX<nStageLeft) {
nX += nStageWidth;
}
x = nX;
}

  • 実際動かしてみたらずれることない感じ。ただ3個だと寂しいね。