速習Webデザイン ActionScript3.0を読む その7

速習Webデザイン ActionScript 3.0

part6　表示オブジェクトのコントロール:応用　のつづき

• 02-01 フィルタ
  • フィルタごとにそれぞれ別のクラスとして扱われる。
  • 表示オブジェクトにフィルタを関連づけるには「DisplayObjct.filters」プロパティを使うがfiltersプロパティにフィルタオブジェクトを代入という形では一つのフィルタしか適用できない。
  • そのためfilterプロパティにはフィルタオブジェクトを要素として格納したArrayオブジェクトを代入する。

表示オブジェクト.filters=[フィルタオブジェクト1,フィルタオブジェクト2]

• 02-02
  • フィルタオブジェクトの作成も今までのオブジェクトと同じ形。
  • 「_mc」にぼかしのフィルタを入れる場合は以下。

var blurObj:BlurFilter = new BlurFilter();

blurObj.blurX =128;　←値は0~255
blurObj.blurY =128;

_mc.filters =[blurObj];

• • 設定されているフィルタを解除する時はnullを代入。
• 02-03
  • 現在適用されているフィルタの設定を変更するには一度変数に取り出して、変数を変更した上で代入し直す必要がある。

• 次の操作は無効

_mc.filters.filter[0].blurX -=BLUR_STEP;

• 正しい操作

var blur.BlurFilter = _mc.filters[0];
blur.blurX -= BLUR_STEP;
_mc.filters = [blur];

• Let's TRY!!
  • 前回の課題の続きでインスタンス登場時にぼかしフィルタを入れる課題。テキストのサンプルを参照したら難なくクリア。
  • つーか前回のもpart5のポストカードサンプル*1熟読してたら結構簡単にできたかも。。。。

• 03-01　機能ごとにムービークリップにまとめる
  • 長くなったスクリプトを独立性の高い機能ごとに分散して管理する方法の学習と。
  • 上級者であればカスタムクラスを使って機能の分散をする。
  • ムービークリップ内のフレームアクションとして記述し分散させることが出来る。
  • 代表的なパターンとして以下の二つ。

そのMCの情報や動作を定義する

MC内にアニメーションの再生・停止のための関数を定義しておきそれを呼び出すようにする。

グラフィックに関係なく独立性の高い一連の機能を定義する

空のMC内に特定の機能を管理するためのカスタムメソッド・プロパティを定義する。

• Let's TRY!!
  • このpart6でやってる課題の続きでスクリプトの分割。
  • 20分くらい悩んで何とか出来た。

• メインタイムラインのスクリプト

add_btn.addEventListener(MouseEvent.CLICK, xAddClick);

　　function xAddClick(evt:MouseEvent):void {
　　　　var newCharacter:MovieClip = new Character();
　　　　addChild(newCharacter);
　　}

• MCのスクリプト

var speedX:int =xGetSpeed();
var speedY:int =xGetSpeed();
var scale:Number = Math.random() * 0.5 + 0.6;

x = Math.floor(Math.random() * 400) + 50;
y = Math.floor(Math.random() * 200) + 50;
scaleX = scale;
scaleY = scale;

this.addEventListener(Event.ENTER_FRAME, xCharaEnterFrame);

　　function xCharaEnterFrame(evt:Event):void {
　　　　　　x += speedX;
　　　　　　y += speedY;
　　　　if (x < 0 || x > 550 - width){
　　　　　　speedX *= -1;
　　　　}
　　　　if (y < 0 || y > 400 - height){
　　　　　　speedY *= -1;
　　　　}
　　}

　　function xGetSpeed():int {
　　　　　　var speed:int = Math.floor(Math.random() * 8) + 5;
　　　　if (Math.random() < 0.5){
　　　　　　speed *= -1;
　　　　}
　　　　return speed;
}

• • ポイントはEnterFrameをMC内でやってること。
  • そしてaddEventListenerのターゲットがthis。もちろん省略可。なにげに今までadd~のターゲットがボタンとかMCインスタンスだったのでthisになることが新鮮。

*1:ポストカードカタログサンプルは斜め読みしてました(´Д⊂