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

第31回 マウスのロールオーバー

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

サムネイルへのロールオーバーで表示画像を切替える

ロールオーバーを使う練習として,サンプルムービーをひとつつくってみよう。ステージの端にサムネイル画像を並べて,それらにロールオーバーしたとき,対応する大きい画像の表示を切替える(図6)。サムネイルと表示画像とをどう結びつけるかが,ひとつのポイントだ。

サムネイルは3つMovieClipインスタンスで並べ,インスタンス名はbutton0_mcからbutton2_mcとした。大きい表示画像も予めタイムラインに重ねて置いておき,DisplayObject.visibleプロパティにより表示を切替えることにする。MovieClipインスタンス名は,サムネイルと番号を対応させて,my0_mcからmy2_mcとしておこう。

図6 サムネイルと表示画像をステージに配置する

図6 サムネイルと表示画像をステージに配置する

以下のフレームアクションは,サムネイルのインスタンスにロールオーバーすると,対応する大きい画像の表示を切替える(スクリプト2)。サムネイルのインスタンス(button0_mc~button2_mc)には,それぞれのInteractiveObject.rollOverイベント(定数MouseEvent.ROLL_OVER)に同じリスナー関数xShow()を登録した。

サムネイルと表示画像を結びつけるために,すべてのサムネイルのインスタンス(button0_mc~button2_mc)に同じ名前の変数(show_mc)を設定し,そこに対応する表示画像のインスタンスを納めた。リスナー関数xShow()は,引数に受取ったイベントオブジェクトのEvent.currentTargetプロパティからロールオーバーしたサムネイルのインスタンスを取出し,その変数に納められた対応する画像のインスタンスを表示するという仕組みだ。

スクリプト2 サムネイルにロールオーバーすると対応する画像の表示を切替える

// タイムライン: メイン
// MovieClipインスタンス
// サムネイル: thum0_mc~thum2_mc
// 表示画像: my0_mc~my2_mc
// フレームアクション
var glow:GlowFilter = new GlowFilter(0x000033);
var dropShadow:DropShadowFilter = new DropShadowFilter();
var filters_array:Array = [glow, dropShadow];
button0_mc.addEventListener(MouseEvent.ROLL_OVER, xShow);
button1_mc.addEventListener(MouseEvent.ROLL_OVER, xShow);
button2_mc.addEventListener(MouseEvent.ROLL_OVER, xShow);
// 対応する画像のインスタンスを変数に設定する
button0_mc.show_mc = my0_mc;
button1_mc.show_mc = my1_mc;
button2_mc.show_mc = my2_mc;
xClearAll();
function xShow(eventObject):void {
  var my_mc:MovieClip = eventObject.currentTarget as MovieClip;
  var show_mc:MovieClip = my_mc.show_mc;   // 対応する画像のインスタンスを取得
  xClearAll();   // 一旦すべての画像を非表示
  // 改めて表示画像を設定
  show_mc.visible = true;
  show_mc.filters = filters_array;
}
function xClearAll():void {
  my0_mc.visible = false;
  my1_mc.visible = false;
  my2_mc.visible = false;
  my0_mc.filters = [];
  my1_mc.filters = [];
  my2_mc.filters = [];
}

もうひとつちょっとしたテクニックは,トグルボタンのようにひとつをオンにしたら他はすべてオフにするという処理だ。このサンプルでひとつの画像を表示したら,他はすべて非表示にしなければならない。そういうとき,一旦すべてをオフつまり非表示にしてから,改めて対象のものだけオンつまり表示すればよい。こうすると,今どれがオンになっているのかということも気にしなくて済む。

関数xClearAll()は,すべての画像を非表示にする。リスナー関数xShow()はこの関数を呼出したうえで,変数から取得した対応画像の表示を行っている。なお,画像のアウトラインがわかりにくいものもあるので,グローとドロップシャドウのフィルタもかけた。このサンプルであれば,フィルタはオーサリング時に予め設定しておいても構わない。ダイナミックなフィルタの適用と破棄は,いわば練習として加えてみた。

[ムービープレビュー]を確かめると,ロールオーバーしたサムネイルに応じて,左側の大きい表示画像が切替わる(図7)。

図7 サムネイルにロールオーバーすると画像が対応して切替わる

図7 サムネイルにロールオーバーすると画像が対応して切替わる

画像

ActionScript 1.0や2.0では,異なるインスタンスを結びつけるためにインスタンス名がよく使われた(※2)。ActionScript 3.0でも,その手法は一応使える。しかし,DisplayObject.nameプロパティは,trace()関数で[出力]してインスタンス名を確かめる以外には,あまり使い勝手はよくない。

ActionScript 3.0では,できるだけインスタンスの参照を使う仕組みにする方がよいだろう。このサンプルでは,MovieClipインスタンスの変数に参照を加えた。マウスイベントのお題は今回で終える。しかし,次回も同じサンプルをネタに,インスタンスの参照の扱いについて考えてみたい。つぎのお題は, Dictionaryクラスだ。

※2
本稿のサンプルでも,サムネイルと画像のインスタンス名の番号は揃えた。しかし,それはわかりやすさのためで,インスタンス名により互いを結びつける処理は行っていない。

今回解説した次のサンプルファイルがダウンロードできます。

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書