ActionScript: 2010年2月アーカイブ

ActionScript 2.0対応バージョンはこちら

以前、フルFlashサイトの作り方の基本まとめ(ActionScript2.0)という記事を書きました。

せっかくなので、ActionScript3.0版も書いておこうかなと思います。
(2.0バージョンを少しいじった程度です)

なんか一般的にはフルFlashとフルFlashでなんか違うものみたいな扱いがされているような気が時々してしまいますが、別にそんなことないです。
前も書きましたが、フルFlashだからといってさほど特別なことをしているわけじゃありません。

このサンプル、どなたかの役に立ちますように。

仕様

・左上、中央上、右上、左、中央、右、左下、中央下、右下の9カ所にMovieClipを配置。

・中央のMovieClipのクリックによってフルスクリーン表示と通常のブラウザ内表示の切替。

・swffit v2.3.1を使用してブラウザが一定サイズ(今回は横300px×縦300px)以下になったときにはブラウザにてスクロールバー表示。

・表示にはSWFObject v2.1を使用。

ポイント・注意点

・stage.scaleMode = StageScaleMode.NO_SCALEを設定することでswfが拡大縮小されないようにする。
stage.scaleMode = "noScale"でも同様です。

・stage.align = StageAlign.TOP_LEFT;を設定することで座標を左上基準とする。
stage.align = "TL"でも同様です。

・Event.RESIZEとFullScreenEvent.FULL_SCREENのイベントをstageに設定することで、フルスクリーンモードの切替とステージのサイズ変更を検出する。

・stage.stageWidthとstage.stageHeightに合わせて配置するMovieClipインスタンスの位置を調整する。

・cssにて親要素のheightを100%指定しないとブラウザのスペースをフル活用できません。詳しくはAdobeの「高さ 100% の Flash のバグ」を参照。

・フルスクリーン表示はflash player9以降の機能です。

・flashの表示にSWFObject v2.1を使う必要は必ずしもないですが、フルスクリーン表示のためにallowFullScreenのパラメータをtrueにすることは忘れずに。

サンプル

サンプルの表示はこちらです(同窓表示です)。

サンプルのダウンロードはこちらです(html,css,js,swf,fla,asファイル)。
flaはCS3形式で保存されています。
flaはMovieClipインスタンスの配置とFullflashsampleクラスの読込用であり、ActionScriptの記述はありません。
ActionScriptのコードはすべて外部のFullflashsample.asに記述しています。

ActionScriptのコード

package{ /*配置MovieClip(基準点はすべて中央) lt_mc：左上 mt_mc：中央上 rt_mc：右上 lm_mc：左 mm_mc：中央(全画面表示の切替に使用) rm_mc：右 lb_mc：左下 mb_mc：中央下 rb_mc：右下 */ //使用しているクラス import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.events.FullScreenEvent; import flash.display.StageScaleMode; import flash.display.StageAlign; import flash.display.StageDisplayState; //クラス定義 //MovieClipインスタンスを操作するため、MovieClipクラスを継承 public class Fullflashsample extends MovieClip{ //コンストラクタ function Fullflashsample(){ //ステージサイズ変更に伴う拡大縮小無しと基準を左上固定の設定 stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; //ステージサイズ変更時イベント設定 stage.addEventListener(Event.RESIZE , resizeStage); //スクリーンモード切替時イベント設定 stage.addEventListener(FullScreenEvent.FULL_SCREEN , changeScreen); //中央のMovieClipクリック時イベント設定 mm_mc.addEventListener(MouseEvent.CLICK , clickMc); //初期表示のため、最初に一回位置調整 changeLocation(); } //ステージサイズ変更時関数 private function resizeStage(event:Event):void { //MovieClipの位置調整以外にステージサイズ変更時の処理があればここに記述 changeLocation();//MovieClip位置調整 } //MovieClip位置調整関数 private function changeLocation(){ //MovieClip毎の位置調整 //本来まとめられる部分もあるが、わかりやすさ優先で各MovieClip毎に記述 //左上 lt_mc.x = lt_mc.width / 2 lt_mc.y = lt_mc.height / 2; //中央上 mt_mc.x = stage.stageWidth / 2; mt_mc.y = mt_mc.height / 2; //右上 rt_mc.x = stage.stageWidth - rt_mc.width / 2; rt_mc.y = rt_mc.height / 2; //左 lm_mc.x = lm_mc.width / 2 lm_mc.y = stage.stageHeight / 2; //中央 mm_mc.x = stage.stageWidth / 2; mm_mc.y = stage.stageHeight / 2; //右 rm_mc.x = stage.stageWidth - rm_mc.width / 2; rm_mc.y = stage.stageHeight / 2; //左下 lb_mc.x = lb_mc.width / 2; lb_mc.y = stage.stageHeight - lb_mc.height / 2; //中央下 mb_mc.x = stage.stageWidth / 2; mb_mc.y = stage.stageHeight - mb_mc.height / 2; //右下 rb_mc.x = stage.stageWidth - rb_mc.width / 2; rb_mc.y = stage.stageHeight - rb_mc.height / 2; } //スクリーンモード切替時関数 //引数がtrue：フルスクリーン　false：ブラウザ内表示(通常) private function changeScreen(event:FullScreenEvent):void{ if(event.fullScreen != true){//ブラウザ内表示へ //ブラウザ内表示への切替時の処理記述 } else{//フルスクリーン表示へ //フルスクリーン表示への切替時の処理記述 } } //中央のMovieClipクリック時関数 private function clickMc(event:MouseEvent):void{ if(stage.displayState != StageDisplayState.NORMAL){//現在フルスクリーン stage.displayState = StageDisplayState.NORMAL; } else{//現在ブラウザ内表示(通常) stage.displayState = StageDisplayState.FULL_SCREEN; } } } }

ActionScript3.0基本学習シリーズの目次はこちらです。
外部ライブラリ学習シリーズの目次はこちらです。

今回は前回制作した内容にイベントの設定を付け加えてみます。
イベントはActionScript3.0で制作する場合に避けては通れないものです(単純なアニメーションぐらいなら必要ないかもしれないですが)。
また、ActionScript2.0との違いの一つとしてよく取り上げられます。ActionScript2.0から3.0に移行する際に引っかかるポイントのようです。

イベントとは

イベントとは特定の事象が発生した際の通知ぐらいに考えてください。

たとえば、マウスをクリックした際に絵を切り替えるなら、マウスをクリックしたというイベント通知を取得して絵の切替処理を行うことになります。

ActionScript2.0の場合にはインスタンス上に
on(press)
と書くだけでマウスプレスのイベントを取得できましたが、ActionScript3.0では異なります。

今回加える処理

まず、前回は画像のロードが完了してもしなくても表示リストに追加しましたが、今回は画像のロード完了を待って表示リストへの追加を行います。
今後画像ビューアの制作を進めていくに当たって、ロードしたものをただ順番に表示するだけではなく、ロード完了した画像の表示切替等を制御する必要がありますので。

また、マウスクリックした際に画像を回転する処理を加えています。
画像ビューアとして画像回転は特に必要ないのですが、クリックされたことを判断するための仮処理です。

スクリプト

まず、スクリプトはこちら。

package { //必要クラスのimport import flash.display.Sprite; import flash.net.URLRequest; import flash.display.Loader; import flash.events.Event; import flash.events.MouseEvent; //クラス定義 public class ImageViewer extends Sprite { //メンバプロパティ private var loader:Loader; //コンストラクタ public function ImageViewer() { loader = new Loader();//インスタンス生成 var url_req:URLRequest = new URLRequest("http://www.aoharu-b.com/cgi/sk/img/as3/img/test1.jpg");//インスタンス生成 loader.contentLoaderInfo.addEventListener(Event.COMPLETE, finishLoad);//ロード完了イベント設定 loader.addEventListener(MouseEvent.CLICK , clickImage);//クリックイベント設定 loader.load(url_req);//画像ロード } //ロード完了メソッド private function finishLoad(event:Event):void{ addChild(loader);//表示リストへの追加 } //クリックメソッド private function clickImage(event:MouseEvent):void{ event.target.rotation++;//loaderを一度ずつ回転 } } }

以下は実行結果です。
(クリックすると画像が回ります)

イベント処理の設定

今回追加や変更を加えた箇所について一つずつ解説していきます。

-----------7〜8行目-----------
import flash.events.Event;
import flash.events.MouseEvent;

イベント取得に必要なクラスのインポートを行っています。
import flash.events.Event;はロード完了取得用です。
import flash.events.MouseEvent;はマウスクリック取得用です。

Eventクラスについては公式サイトのEventに、MouseEventクラスについては公式サイトのMouseEventに詳しい解説が載っています。

-----------20〜21行目-----------
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, finishLoad);
loader.addEventListener(MouseEvent.CLICK , clickImage);

20行目がロード完了イベントの設定です。loaderがロード完了した際にfinishLoadというメソッドを呼び出すように設定しています。
21行目はマウス完了イベントの設定です。loaderがマウスクリックされた際にclickImageというメソッドを呼び出すように設定しています。

addEventListenerがイベント取得を設定するためのメソッドです。
ロード完了した際にはloader.contentLoaderInfo、マウスクリックした際にはloaderとaddEventListenerの呼び出しが異なることに注意してください。

-----------26〜28行目-----------
private function finishLoad(event:Event):void{
addChild(loader);//表示リストへの追加
}

ロード完了時に呼び出されるメソッドです。
loaderを表示ツリーに追加しています。

メソッドの定義は
メソッド属性 function メソッド名(引数):戻り値の型
という書き方をします。
引数はそのメソッドが受け取る値、戻り値はそのメソッドが呼び出し元に返す値です。
戻り値についてはまだ使用していないため、現時点では気にしないで大丈夫です。
Voidは戻り値がないという意味です。

他のクラスからアクセスすることがないため、属性はprivate(同クラス内でのみアクセス可能)にしてあります。
もちろん、public(どこからでもアクセス可能)にしても動作します。

引数のevent:EventはEventクラスのデータを、インスタンスeventにて受け取ることを意味します。
今回は使用していませんが、Eventクラスのイベントを受け取る場合はこのように記述します(インスタンス名は変更して平気です)。

-----------31〜33行目-----------
private function clickImage(event:MouseEvent):void{
event.target.rotation++;
}

こちらはマウスクリック時に呼び出されるメソッドです。

引数のevent:MouseEventはMouseEventクラスのデータを、インスタンスeventにて受け取ることを意味します。

event.targetはイベント通知元を意味します。つまり、今回の場合はloaderと同意となります。

rotationはloaderのプロパティです。
プロパティとは性質を表すデータのことです。
rotationは回転角度を示すプロパティです。

各クラス毎にx座標を示すx、y座標を示すy、透過度を示すalpha等、様々なプロパティが用意されています。
ActionScript2.0のように_はつきませんので注意してください。

event.target.rotation++;はevent通知元(loader)の回転角度を1増やすことを意味します。
++を--に変えると1減ります。
5増やしたいならevent.target.rotation = event.target.rotation + 5あるいはevent.target.rotation += 5と書きましょう。

「ここで定義したどちらのメソッドも同じ名前のeventというインスタンスを使っているけれど大丈夫なのか」
そう考えるかもしれません。
まったく問題ありません。
この二つは同じ名前ですが、変数のスコープのルールによって、異なるものとして処理されています。
これについては後述いたします。

変数のスコープ

-----------14行目-----------
private var loader:Loader;

-----------18行目-----------
loader = new Loader();

前回のスクリプトでは、この2行は1行にまとまってコンストラクタの中に記述していました。
var loader:Loader = new Loader();
といった風に。

なぜ今回、二つに分けて前半をコンストラクタ外に書いたかと言うと、ActionScript3.0ではメソッド内にて定義した変数がそのメソッド内でのみ有効だからです。
つまり、コンストラクタ内で定義した変数はコンストラクタ内でしかアクセスできません。
今回はloaderインスタンスをロード完了後に表示ツリーに追加するため、コンストラクタ内だけで完結しません。
そのため、コンストラクタ外からもアクセスできるよう、クラスの最初に書きました。

この変数の有効範囲のことを変数のスコープと呼びます。
変数のスコープについて

さきほど、eventという名前のインスタンスを各メソッドで用意しても問題ないと書いたのは、変数のスコープというものが存在するからです。
finishLoadの中で定義した変数はfinishLoadの中でのみ有効であり、clickImageの中で定義した変数はclickImageでのみ有効となります。

メソッドの外にて定義した変数はプロパティの扱いになり、属性指定によっては他のクラスからアクセスできます。
今回はprivateとして定義したため、他のクラスからはアクセスできません。

変数、定数の属性については以下のものが用意されています(定数については別記事にて説明いたします)。

• public：どこからでも参照可能
• private：同じクラス内でのみ参照可能
• protected：同じクラスあるいは派生クラスにて参照可能
• internal：同じパッケージ内で参照可能
• static：インスタンスではなくクラスに属するように指定

最初の4つの同時指定はできません。省略した場合のデフォルト値はinternalです。
詳しくは公式サイトのクラスプロパティの属性及びステートメント、キーワード、ディレクティブをご覧下さい。

まとめ

イベントは今後ずっと使っていく知識です。
import、addEventListener、そして対応するメソッドの定義がイベント使用のためのセットですので、お忘れなく!!

今回使用したファイルはまとめてサーバにアップしてあります。

前の記事"AS 3.0 基本学習1-1 画像ビューア制作-画像のロード"はこちらです。
ActionScript3.0基本学習シリーズの目次はこちらです。