Case Study:04(AS3.0 Ver.) ズームイン・ズームアウトによる画面遷移

「ActionScript3.0を駆使したプロフェッショナルテクニック」を謳っていながら肝心のサンプルにActionScript2.0が混在しているという困った学習本の修正版を作る企画第4弾。
さすがにこの辺まで来ると小手先でちょいちょいという感じにはいかなくなってきました。コンパイルエラーも意味不明なものが増えてきて、Google先生のお世話になりっぱなしです。
さて、今回使った主なテクニックは、クラスの継承とムービークリップインスタンスの動的配置です。元のサンプルファイルには同じソースコードをコピペで何箇所にも貼り付けてあったので、クラスの継承を使って冗長な記述を減らしました。また、AS2.0でいう識別子を使ってムービークリップを動的に配置する箇所は、AS3.0ではちょっと独特の書き方に変わります。

基本的な手順

以下、「ソフトバンククリエイティブの本：Flashデザインラボ－プロに学ぶ、一生枯れない永久不滅テクニック」のページで配布されているサンプルをベースに修正します。

新規 ActionScript 3.0 Flashファイルを作成する
もとのサンプルファイルを開き、ライブラリから必要なものを新しいFlashファイルへコピーする
新しいファイルのステージ上にオブジェクトを配置して、もとのサンプルファイルと同様の状態にする
ムービークリップシンボルに記述されたAS2.0のコードを削除する(一部を除く、後述)
サンプルファイルと同じディレクトリにASクラスファイルを配置する
ムービークリップにリンケージを設定する
パブリッシュ設定で、ステージのインスタンスを自動宣言しないようにする

以下のリンクから、今回作成したActionScript 3.0ドキュメントクラスファイルをダウンロードできます。
Zip形式で圧縮されていますので、Flashファイルと同じフォルダに解凍してください。
解凍すると8つのASファイルができあがります。

CaseStudy04用ASファイル

補足説明

新しいファイルにオブジェクトを配置するとき、元のActionScript2.0サンプルファイルのタイムライン上で「フレームをコピー」して新しいファイルに「フレームをペースト」すると、レイヤー構造とライブラリをそのままコピーできるので楽です。ただし「point01」～「point05」のムービークリップシンボルは初期状態ではステージ上に存在しませんので、忘れずにライブラリパネル上でコピーしてください。

今回もActionScriptをできるだけ外部ファイル化しましたが、ムービークリップシンボル「btn_mark_mc」に記述された「stop();」と「gotoAndPlay(“myloop”)」のコードだけはそのまま利用しますので削除しないでください。

リンケージを設定するムービークリップシンボルと、入力するクラス名の対応は以下のとおりです。

btn_close <- BtnClose
btn_point:01 <- BtnPoint01
btn_point:02 <- BtnPoint02
btn_point:03 <- BtnPoint03
btn_point:04 <- BtnPoint04
btn_point:05 <- BtnPoint05
centerPhoto_mc <- CenterPhoto

なお、ムービークリップシンボル「point01」～「point05」に設定されていた識別子は、AS3.0ファイルにコピーした時点で自動的にクラス名として設定されるようなので、あらためて設定する必要はありません。

その他注意点。
AS2.0の「_xscale」は100が最大値だったのに対して、AS3.0の「scaleX」は1が最大値になっていますね。より数学っぽくなったというかなんというか。
ムービークリップにボタン的なギミック(マウスカーソルが手の形になる、等)を加えるには、buttonMode プロパティの値を true にします。

なにげに今回は少し複雑だったかもしれません。
一応、元のサンプルが持っているレイヤー構造やオブジェクトの親子関係に手を入れない前提で作っていますが、設計から根本的に手を入れたらもっとシンプルに作れるのかもしれません。

参考

また、書籍では「FLASH OOP for ActionScript 3.0」の2章4節「マウスイベントの扱い」が参考になりました。

このブログで関連すると思われる他の投稿