イベントハンドラメソッドによる記述
ボタンやムービークリップに記述するインスタンスアクションを避けることも、ActionScriptの記述方法の改善になります。
インスタンスアクションは、どこにコードが記述しているのかが分かり難いからです。インスタンスアクションの回避方法としてイベントハンドラメソッドによる記述を行います。
イベントハンドラメソッド
イベントハンドラメソッドによる記述のメリットは、インスタンスに記述するコードを全てフレームに記述することができることです。この方法によりメインタイムラインのActionレイヤーに全てのActionScriptを記述することができます。
イベントハンドラメソッドによる記述例
例えば、前章までplay_btnには次のコードが記述されていました。
これをイベントハンドラメソッドを使って記述すると、次のようになります。
重要な点はこの場合は、フレームに記述する点です。フレームからインスタンスを参照するので、各インスタンスにインスタンス名をつけることは必須になります。なおonReleaseのRは必ず大文字で記述します。
この方法で記述すれば全てのインスタンスアクションをフレームに記述することができます。メインタイムラインのActionレイヤーを見れば、全てのActionScriptを把握できるので、非常に分かりやすくシンプルになります。
スライドショーボタン用のActionScriptの記述
同様の方法で、stop_btn、skip_btn、prev_btnへのActionScriptをメインタイムラインのActionレイヤーにまとめて記述します。
actionレイヤーに追記するコード ※記述済みコードに変更はなし
関数change_pictの修正
なお、関数change_pictは現時点では次のようになっています。
前章までは、pict_mc内のフレームをgotoAndStopメソッドで、各写真のフレームに移動することで、写真を変更していました。しかしすでに外部から読み込む方法に変更していますので、この関数も、次のようにMovieClipLoaderクラスのloadClipメソッドで外部から読み込む方法に変更します。
actionレイヤーのコード ※関数change_pict以外は変更なし
カテゴリ変更ボタン用のActionScriptの記述
さらに右上のカテゴリ変更ボタン用のActionScriptも記述します。例えば一番左のcat0には次のコードが記述されていました。
これをイベントハンドラメソッドを使って記述します。ただ今回はcat0フレームにgotoAndStopメソッドに移動する代わりに、変数Categoryにcat0を代入し、関数dl_pictを実行します。具体的には、次のようになります。
関数dl_pictでは、先に作成した関数で、MovieClipLoaderクラスのインスタンスで、拡大写真とサムネイル写真の計10枚の写真を読み込む処理を行っています。この時に画像のパスとして、変数Categoryの内容を参照します。
各カテゴリ用の写真は、cat0〜cat4フォルダに入れており、変数Categoryの内容を置き換えることにより、読み込む画像のフォルダが変わることで、写真のカテゴリが変わるという仕組みになっています。
さらにcat1〜cat4までも同様に記述すると次のようになります。
for文を使ってまとめて記述する
ただ上記のコードの場合、catに続き数字が0〜4で違うだけで、それ以外は全く同じになります。このような場合は、先述の例と同様にfor文を使ってまとめて記述します。
actionレイヤーに追記するコード ※記述済みコードに変更はなし
this._nameとは
このとき変数Categoryに、this._nameを代入しています。thisとは自分自身、_nameはインスタンス名を意味します。この場合、各ボタンが押されたときの処理の中に記述していますので、各ボタンが押されたらボタンのインスタンス名を変数Categoryに代入しています。
このコードの対象となるのは、ボタンcat0～cat4で、押されたときに自分自身のインスタンス名を変数Categoryに代入してから、関数dl_pictを実行するようにしているのです。つまりボタンcat0が押された場合はcat0を、ボタンcat1ならcat1を変数Categoryに代入します。
サムネイル写真にロールオーバーしたときのActionScriptの記述
サムネイル写真にロールオーバーしたときも、関数change_pictと同様にloadClipメソッドで、外部ファイルを読み込み拡大写真を変更します。
例えば一番左のpict0にロールオーバーした時は、次のように記述します。
これも先ほどと同様に、for文を使って９つのボタンへの処理を定義します。
actionレイヤーに追記するコード ※記述済みコードに変更はなし
この時点でプレビューすると、右上のカテゴリボタン、スライドショー用の各ボタンが機能にするようになりました。
現時点でactionレイヤーのフレームアクションのコードは次のようになります。
actionレイヤーのコード
