ActionScript 3.0で始めるオブジェクト指向スクリプティング

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

この記事を読むのに必要な時間:およそ 3 分

前回は,MovieClipインスタンスを水平スクロールさせ,その移動方向をマウスポインタの位置に対応させた。今回はさらに,スクロールスピードも,マウスポインタの位置に連動させよう。

前回作成したスクリプト4図1に修正を加えていく(サンプルファイルは第11回「MovieClipをスクロールさせる―条件判定」2ページ目からダウンロードできる)。

図1 インスタンスをマウスポインタの位置に応じて水平方スクロールさせるフレームアクション

図1 インスタンスをマウスポインタの位置に応じて水平方スクロールさせるフレームアクション

マウスポインタの中央からの水平位置にスピードを比例させる

まず,マウスポインタのステージ中央からの水平位置に,インスタンスがスクロールするスピードを比例させたい。その場合,ステージ中央とマウスポインタとの水平座標の差を取ればよい。その結果の数値は,マウスポインタの水平位置がステージの左側か右側かによって,正負の符号が変わる。そのため,前回のスクリプト4に加えられている,スクロール方向を判定するif条件の処理は,もはや要らなくなる。

したがって,水平スクロールするピクセル数nNewSpeedを決める処理は,元のスクリプト4を以下のように修正する。なお,修正の経過がわかるように,元のステートメントはコメント化して残した※1)。また,ブロックコメント区切り記号を使うと,開始の演算子/*から終了の演算子*/まで,複数の行をまとめてコメントにすることができる。

// var nNewSpeed:Number;   // つぎのステートメントに変更
var nNewSpeed:Number = nStageCenter-stage.mouseX;
/* スクロール方向の判定は不要になる
if (stage.mouseX&nStageCenter) {
  nNewSpeed = nSpeed;
} else {
  nNewSpeed = -nSpeed;
}
*/

もっともスピードを,ステージ中央からのマウスポインタの水平位置に単純に比例させたのでは,少し問題がある。マウスポインタをステージ中央付近で動かしていればよいものの,ステージの端にポインタを移動すると1フレーム当たりの移動距離がステージ幅の約半分のピクセル数になってしまうからだ。2フレームでステージ外に飛出してしまったのでは,左右どちらに移動しているのかももはやわからない。

そこで,スピード制限が必要になる。最高速度は,毎フレーム±20ピクセルとしよう。つまり,ステージ中央とマウスポインタとの水平座標の差が±20を超えたら(20より大きいか,-20より小さかったら),移動ピクセル数を±20に設定し直すということだ。これは,if条件を使う処理の復習問題として丁度よいだろう。上述の修正で変数nSpeedが使われなくなったので,改めて最高速度の正の値20を納めることにする。

以上の修正を加えたMovieClipインスタンスのフレームアクションが,以下のスクリプト001である。[ムービープレビュー]で確かめると,マウスポインタの水平位置が中央から遠くなるほど,インスタンスのスクロールスピードが増す図2)。

スクリプト1 マウスポインタの中央からの水平位置にスクロールスピードを比例させる

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

図2 インスタンスのスクロールスピードがマウスポインタの中央からの水平位置に比例する

図2 インスタンスのスクロールスピードがマウスポインタの中央からの水平位置に比例する

なお,上記スクリプト1には,新たに変数 nSensitivityが追加された。そして,ステージ中央とマウスポインタとの水平座標の差に,この値が掛合わされて,水平移動するピクセル数 nNewSpeedに代入されている。この変数nSensitivityは,マウスポインタの水平位置にスクロールスピードが比例する度合いを調整する係数だ。

この係数がない場合,スクロールするピクセル数そのものは,変数nSpeedを用いたif条件のステートメントによって±20の範囲内に抑えられている。しかし,移動ピクセル数を単純にステージ中央とマウスポインタとの水平座標の差に比例させれば,ポインタをステージ中央から左右各20ピクセル動かしただけで最高速度に達してしまう。

比例係数として変数nSensitivityの値0.2を掛け合わせることによって,ステージ中央からマウスポインタを左右100ピクセル(= 20/0.2)動かさないと,最高速度にはならなくなる。つまり,スピードの微調整がしやすくなるということだ。

※1)
スクリプトの記述は残しつつ,コメント化して無効にすることを「コメントアウト」という。

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入