sampleの最近のブログ記事

Adobe EDGE newsletter第7回
『大重美幸のこれ見落としてませんか？ ActionScript 3.0』
『TextBlockクラスで多彩な文字表現』が公開されました。


テキストを自由にアニメーションさせたい、もっと美しい文字でテキストを表示したいと思ったとき、テキストフィールドでは難しい場合があります。その悩みを解決するのがFlash CS4から搭載された新テキストエンジンです。今回は新テキストエンジンを使うためのTextBlockクラスにチャレンジです！

Adobe EDGE newsletter第6回
『大重美幸のこれ見落としてませんか？ ActionScript 3.0』
『柔軟・多彩・高速な画像処理を実現するシェーダーフィルタ』が公開されました。

今回のテーマは、Flash CS4（Flash Player 10）の新機能として登場した「シェーダーフィルタ」です。シェーダーフィルタとは、Pixel Bender Toolkitで作成したシェーダープログラムを読み込んで作るフィルタです。シェーダーフィルタはビットマップ、ベクトル、FLVと表示オブジェクトに適用でき、複雑なエフェクトもリアルタイムで処理する実行速度の速さが特長です。

「Section08-01 クラス定義の構造」の「クラスメンバーを定義する」（p.245）にサンプルを追加します。このサンプルのポイントは、コンストラクタにおいてクラスプロパティfriendListにインスタンスの参照であるthisを登録することで、作ったインスタンスを管理しているところです。

[:script:]Friend4クラスの定義

package {
  public class Friend4 {
    //クラスプロパティ
    public static var seqNo:uint;
    public static var friendList:Array=new Array();
    //インスタンスプロパティ
    public var no:uint;
    public var name:String;
    public var age:uint;
    //コンストラクタ
    public function Friend4(na:String,ag:uint) {
      no= ++seqNo;
      name=na;
      age=ag;
      //インスタンスのリストに参照を保管する
      friendList.push(this);
    }
    //
    // クラスメソッド
    //
    //平均年齢を求める
    public static function getAgeAverage():Number {
      if (friendList.length==0) {
        return 0;
      } else {
        var ageSum:uint;
        //年齢の合計を出す
        for (var i:int=0; i<friendList.length; i++) {
          var friend:Friend4=friendList[i];
          ageSum+=friend.age;
        }
        //平均を計算する
        var ave:Number=ageSum/friendList.length;
        //小数点2位で四捨五入する
        ave=Math.round(ave*10)/10;
        return ave;
      }
    }
    //最年長を求める
    public static function getOldestProfile():String {
      if (friendList.length==0) {
        return null;
      } else {
        //friendListの複製
        var tmpList:Array=friendList.slice();
        //年齢でソートする
        tmpList.sortOn("age",Array.NUMERIC);
        //最後の人を取り出す
        var oldest:Friend4=tmpList[tmpList.length-1];
        //プロフィールを返す（インスタンスメソッドの実行）
        return oldest.getProfile();
      }
    }
    //
    // インスタンスメソッド
    //
    //プロフィールを返す
    public function getProfile():String {
      var info:String="no."+no+" "+name+"、"+age+"歳です。";
      return info;
    }
  }
}

→ファイル一式をダウンロードする。

Section14-01 外部イメージファイルを読み込んでフェードインで表示するスクリプト（p.406）のサンプルはLoaderクラスを継承した作りになっているために難しいかもしれません。そこでフレームアクションで実行できるシンプルな例を紹介しておきます。
このスクリプトのポイントは、画像ファイルの読み込み完了イベントEvent.COMPLETEのリスナーをLoaderのインスタンスのcontentLoaderInfoプロパティにaddEventListener()する部分です。（6行目）

[:script:]読み込み完了後にフェードインで表示する

//読み込む画像ファイルを指定する
var url:String = "image/IMG_8171.jpg";
var urlReq:URLRequest = new URLRequest(url);
//ローダーを作る
var photoLoader:Loader=new Loader();
photoLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
//画像を読み込む
photoLoader.load(urlReq);
//画像を表示する
photoLoader.x = 100;
photoLoader.y = 50;
addChild(photoLoader);
//ドロップシャドウを付ける
var dsf:DropShadowFilter=new DropShadowFilter();
dsf.alpha = 0.8;
photoLoader.filters = [dsf];

import fl.transitions.Tween;
import fl.transitions.easing.*;
var tw:Tween;
//フェードインで表示する
function onLoaded(eventObj:Event):void {
	tw = new Tween(photoLoader,"alpha",Regular.easeInOut,0,1,1,true);
}

→swfを試す

→ファイル一式をダウンロードする。

（section04-02 イベントとイベントリスナーから抜粋）

　入れ子のムービークリップのロールオーバー／ロールアウトのイベントは、クリックイベントと同じではありません。クリックイベントの場合は親ムービーにイベントリスナーを登録すれば子ムービーのインスタンスのクリックをイベントのtargetとして処理できますが、ロールオーバー／ロールアウトのイベントの場合はtargetとして処理できません。
　これに対処するために、次のサンプルで示すようにaddEventListener()の第3引数（useCaptureプロパティ）をtrueにします。すると親ムービーに設定したリスナー関数でロールオーバー／ロールアウトをした子ムービーのインスタンスをtargetとして処理できるようになり、子ムービーのインスタンスごとにイベントリスナーを登録する手間がなくなります。

[:script:]ロールオーバーした入れ子のインスタンスを拡大する

//イベントリスナーの追加
box_mc.addEventListener(MouseEvent.ROLL_OVER, onRollover, true);
box_mc.addEventListener(MouseEvent.ROLL_OUT, onRollout, true);

//ロールオーバーのリスナー関数
function onRollover(eventObj:MouseEvent):void {
	var target_mc:MovieClip=eventObj.target as MovieClip;
	target_mc.scaleX=target_mc.scaleY=3.0;
}

//ロールアウトのリスナー関数
function onRollout(eventObj:MouseEvent):void {
	var target_mc:MovieClip=eventObj.target as MovieClip;
	target_mc.scaleX=target_mc.scaleY=1.0;
}

イベントリスナーは親ムービーに設定してありますが、ロールオーバーした子ムービーのインスタンスが拡大します。
→swfを試す

[:note:] ROLL_OVER ／ ROLL_OUT のイベントオブジェクトのbubblesプロパティがfalseだからです。CLICKのbubblesプロパティはtrueです。
詳しくはヘルプのイベントフローを参照してください。

（section04-02 イベントとイベントリスナーから抜粋）

　ムービークリップの中にさらにムービークリップが含まれているという入れ子のムービークリップのインスタンスの場合には、マウスイベントを受け取ったターゲットの処理に注意が必要です。
　たとえば、次のカエルの顔のムービークリップは顔の中の目が入れ子のインスタンスになっています。このムービークリップのインスタンスface_mcにクリックすると回転するイベントリスナーを追加します。


顔のムービークリップの中に目のムービークリップが入れ子で入っています。

[:script:]クリックしたtargetを回転させる

//イベントリスナーの追加
face_mc.addEventListener(MouseEvent.CLICK, onClick);

//クリックのリスナー関数
function onClick(eventObj:MouseEvent):void {
	var target_mc:MovieClip=eventObj.target as MovieClip;
	target_mc.rotation+=30;
}

　カエルの顔すなわちface_mcをクリックすると顔全体が回転します。つまり、targetはface_mcということになります。


顔をクリックすると顔全体が回転します。

　ところが、目をクリックすると目だけが回転します。目のインスタンスにはイベントリスナーを登録していないのに、クリックのtargetはface_mcではなく目のインスタンスになっています。


目をクリックすると目だけが回転します。
→swfを試す

　目をクリックしても顔全体を回転させるには、targetプロパティではなくcurrentTargetプロパティを利用します。

[:script:]リスナーを追加したインスタンスを回転させる

//イベントリスナーの追加
face_mc.addEventListener(MouseEvent.CLICK, onClick);

//クリックのリスナー関数
function onClick(eventObj:MouseEvent):void {
	var target_mc:MovieClip=eventObj.currentTarget as MovieClip;
	target_mc.rotation+=30;
}

→swfを試す

　シンボルにもカスタムクラスを関連付けることができます。この手法は先に出版したAS3入門ノートでは解説していましたが、今回の完全改訂版では割愛した内容です。その内容をここで補足したいと思います。

　シンボルからインスタンスを作る方法は「Section07-01 表示オブジェクトの追加」に説明してあるので、ここが補足箇所の候補になりますが（p.211）、この時点ではクラス定義や継承について学んでいません。
　シンボルとカスタムクラスを関連付ける方法はドキュメントクラスと同じ考え方なので、「Section08-06 ドキュメントクラス」の最後のp.486が適当でしょう。ここに以下の原稿を追加します。

シンボルが継承するクラス （追加原稿 p.486）
　ドキュメントクラスと同じようにシンボルにもカスタムクラスを関連付けることができます。シンボルにカスタムクラスを関連付けるには、シンボルのプロパティパネルでリンケージ書き出しの設定を行い、クラスフィールドにカスタムクラスを指定します。


シンボルのリンケージ書き出し設定で関連付けるクラスを指定します。

　たとえば、次のFlowerAクラスをシンボルに関連付けると、このシンボルから作ったインスタンスをステージに追加するだけで回転するようになります。このとき、ムービークリップシンボルに関連付けるカスタムクラスは、必ずMovieClipクラスを継承しなければなりません。
　インスタンスはnew FlowerA()で作ることができますが、普通にライブラリからステージにドロップして作ってもかまいません。

[:script:]シンボルに関連付けるFlowerAクラス

package {
	import flash.display.MovieClip;
	import flash.events.Event;

	public class FlowerA extends MovieClip {
		public function FlowerA() {
			addEventListener(Event.ENTER_FRAME, enterFrameHandler );
		}
		protected function enterFrameHandler(eventObj:Event):void {
			rotation += 3;
		}
	}
}

インスタンスを作ってステージに追加するだけで回転します。→swfを試す
ファイルをダウンロードする→extendSymbol.zip

（section04-01 イベントとイベントリスナーから抜粋）

　今度は同じイベントに同じリスナー関数を重ねて追加した場合を見てみましょう。次のサンプルではa_mcのフレーム再生イベントに対してstepRotationA()を４回重ねてリスナー関数として追加しています。この場合にはフレーム再生でstepRotationA()が４回実行されることになり、同じ機能のstepRotationB()を１回しか追加していない場合にb_mcに比べて４倍の速度で回転するでしょうか。
　その結果はa_mcもb_mcと同じくstepRotationA()を１回しか追加していない場合と同じ速度で回転します。すなわち、同じイベントに同じリスナー関数を重ねて追加しても、リスナー関数は重複して登録されないわけです。

[:script:]同じイベントに同じリスナー関数を重ねて追加した場合

//同じイベントに同じリスナー関数を重ねて追加する
a_mc.addEventListener(Event.ENTER_FRAME, stepRotationA);
a_mc.addEventListener(Event.ENTER_FRAME, stepRotationA);
a_mc.addEventListener(Event.ENTER_FRAME, stepRotationA);
a_mc.addEventListener(Event.ENTER_FRAME, stepRotationA);
//b_mcには１度しか追加しない
b_mc.addEventListener(Event.ENTER_FRAME, stepRotationB);

//回転させる
function stepRotationA(eventObj:Event):void {
	a_mc.rotation+=2;
}

function stepRotationB(eventObj:Event):void {
	b_mc.rotation+=2;
}

a_mcもb_mcと同じ速度で回転します。→swfを試す

（section04-01 イベントとイベントリスナーから抜粋）

　同じターゲットの同じイベントに対して複数のリスナーを追加するとどうなるでしょうか。次のスクリプトでは5行目でインスタンスf_mcのEvent.ENTER_FRAMEイベントにstepRotation()をリスナー関数として追加し、次の6行目でも同じくf_mcのEvent.ENTER_FRAMEイベントに今度はstepZoom()をリスナー関数として追加しています。この結果がどうなるかを予想すると、後から実行した6行目のaddEventListener()の設定が5行目のaddEventListener()の設定を上書きしていまい、Event.ENTER_FRAMEイベントではstepZoom()だけが実行されるようになるのではないかと思われます。
　しかし、実際にはEvent.ENTER_FRAMEイベントではstepRotation()とstepZoom()の両方のリスナー関数が実行され、両者の動作が組み合わさったアニメーションになります。すなわち、stepRotation()によって回転し、stepZoom()によって伸縮とアルファ変更を繰り返すアニメーションになります。

[:script:]同じイベントに別のリスナー関数を重ねて追加する

//stepZoomで比率を変化させるための角度
var degree:int;

//同じイベントに別のリスナー関数を重ねて追加する
f_mc.addEventListener(Event.ENTER_FRAME, stepRotation);
f_mc.addEventListener(Event.ENTER_FRAME, stepZoom);

//回転させる
function stepRotation(eventObj:Event):void {
	f_mc.rotation+=2;
}

//伸縮とアルファ変更
function stepZoom(eventObj:Event):void {
	degree=(degree+2)%360;
	//回転角度で比率を変える
	var ratio:Number=Math.abs(Math.sin(degree*Math.PI/180));
	//伸縮
	f_mc.scaleX=f_mc.scaleY=1+9*ratio;
	//アルファ変更
	f_mc.alpha=Math.max(0.02,1-ratio);
}

回転と伸縮の複数のリスナー関数の動作が組み合わさったアニメーションになります。→swfを試す

　stepZoom()では17行目で比率ratioの値を作っています。sinの値は繰り返しでdegreeに2度ずつ加算され-1〜1のサイン波になり、Math.abs()によって絶対値0〜1で変化する値になります。
　19行目のscaleX、scaleYはインスタンスの横方向、縦方向のスケールを示すプロパティで、1のときが等倍です。この設定値を1+9*ratioで計算しているので、スケールは1倍〜10倍で変化します。21行目のalphaはインスタンスのアルファ値を示すプロパティで、0が透明、1が不透明の0〜1の範囲の値です。この設定値を1-ratioの計算で設定値を変化させ、完全な透明にならないようにMath.max()を使って最低値を0.02に制限しています。

（section04-01 イベントとイベントリスナーから抜粋）

　「インスタンスbox_mcをクリックしたらtest()を実行する」といったインタラクティブな処理を考えたとき、この中には「1.どこで、2.何が起きたら、3.どうする」の３つの要素が含まれています。

　1.どこで　
　2.何が起きたら
　3.どうする　

　これをイベント処理の用語で言い換えると次のようになります。

　1.イベントターゲット ・・・・　イベントが発生するオブジェクト
　2.イベントタイプ ・・・・　発生するイベントの種類
　3.リスナー関数 ・・・・　イベント発生で実行する関数

　さきほどの「インスタンスbox_mcをクリックしたらtest()を実行する」をこれに当てはめると次のようになります。

　1.イベントターゲット ・・・・　box_mc
　2.イベントタイプ ・・・・　クリック
　3.リスナー関数 ・・・・　test()

　このイベント処理をスクリプトではaddEventListener()というメソッドを使って設定します。書式は次のようになります。イベントが発生するオブジェクトに対して、イベントタイプとリスナー関数をペアにしてイベントリスナーとして追加します。

書式：イベントリスナーを追加する

イベントターゲット.addEventListener(イベントタイプ, リスナー関数);

[:note:] addEventListener()には引数がまだありますが、ここでは省略しています。

　実際のスクリプトは次のようになります。クリックというイベントタイプはMouseEvent.CLICKで指定します。リスナー関数はtestのように()を付けずに指定します。
　実行するtest()も定義しておきます。リスナー関数にはイベントタイプと同じデータ型のイベントオブジェクトが引数として送られてくるので、コンパイルエラーにならないようにtest(eventObj:MouseEvent)のようにイベントオブジェクトを受け取る引数が必要です。

[:script:]box_mcをクリックしたらtest()を実行する

box_mc.addEventListener(MouseEvent.CLICK, test);

//クリックで実行されるリスナー関数
function test(eventObj:MouseEvent):void {
	trace("test OK");
}

　そこで、test()でbox_mcの現在の回転角度つまりbox_mc.rotationに45度を加算すれば、box_mcをクリックするたびにbox_mcが45度回転するようになります。

[:script:]box_mcをクリックすると45度回転する

box_mc.addEventListener(MouseEvent.CLICK, test);

//クリックで実行されるリスナー関数
function test(eventObj:MouseEvent):void {
	//box_mcを45度回転させる
	box_mc.rotation += 45;
}

→swfを試す