Platform: All
Viersion: 8.0 and 9.0
サンプルソースファイル (zip圧縮/Flash 8およびFlash 9形式/約28KB)
□01 イベントとイベントハンドラ[*1]
Flashムービー内のスクリプトは、フレームかインスタンスに書ける。MovieClipインスタンスに記述するMovieClipアクションには、必ずイベントとイベントハンドラの指定が必要(図001)。
イベントハンドラ (イベント) {
ステートメント(命令文);
}
イベントハンドラは、「こんなとき」を意味する。イベントが、具体的な「アクションを起こすとき」を指定。
図001■MovieClipインスタンスにMovieClipアクションを設定
MovieClipインスタンスを、ステージ左端(x座標0)に表示する。イベントハンドラは、イベントで決まる。
イベントハンドラ (インスタンスが初めて登場するとき) {
インスタンスのx座標を0に設定;
}
初期設定のイベントはload、イベントハンドラはonClipEvent()を用いる。x座標のプロパティは、_x。プロパティの設定は、値を代入する。
onClipEventのショートカット: [esc] o, c
スクリプト001■MovieClipインスタンスをx座標0の位置に表示
|
// MovieClip: 表示するインスタンス
// MovieClipアクション
onClipEvent (load) {
_x = 0;
}
|
アニメーションの処理は、描画を更新するたびに実行されるonClipEvent (enterFrame)に記述。プロパティの現在値に加算するには、加算後代入演算子+=を用いる。
スクリプト002■MovieClipインスタンスを毎フレーム右に10ピクセル移動
|
// MovieClip: アニメーションするインスタンス
// MovieClipアクション
onClipEvent (enterFrame) {
_x += 10;
}
|
□02 プロパティの天動説と地動説[*2]
同じMovieClipのプロパティでも、座標系の基準にふたつある。
表001■天動説プロパティと地動説プロパティ
| _x |
配置されたタイムライン上の座標 |
地動説プロパティ |
| _xmouse |
インスタンスから見たマウス座標 |
天動説プロパティ |
図002■親タイムラインから見た座標とインスタンスから見た座標
*上図をクリックすると、サンプルSWFが開く。
イーズアウトは、「差を割引いて足し込む」。
プロパティ設定値 += インスタンスから見た相対的な目標値 * 減速率
または、
プロパティ設定値 += (プロパティの目標値 - 現在のプロパティ値) * 減速率
ただし、0 < 減速率 < 1
スクリプト003■MovieClipインスタンスを水平方向にマウスポインタに追随させる(slide8.fla)[*3]
|
// MovieClip: アニメーションするインスタンス
// MovieClipアクション
onClipEvent (enterFrame) {
_x += _xmouse*0.2;
}
|
□03 三角関数を使う[*4]
Math.cos()またはMath.sin()メソッド(関数)で、単振動のアニメーションができる。それぞれを水平、垂直のアニメーションに設定して同期させれば、円運動になる。
図003■円運動の式
*上図をクリックすると、サンプルSWFが開く。
変数は、名前で管理するメモリ。初めて変数を定義するときは、var宣言を使うとよい(必須ではない)。変数には、値を代入できる。
スクリプト003■MovieClipインスタンスを円運動させる
|
// MovieClip: アニメーションするインスタンス
// MovieClipアクション
onClipEvent (load) {
var nTheta = 0;
}
onClipEvent (enterFrame) {
nTheta += 0.2;
_x = 40*Math.cos(nTheta)+240/2;
_y = 40*Math.sin(nTheta)+180/2;
}
|
xy座標で半径を変えると、楕円運動になる。_xscaleは水平方向の伸縮(マイナス値で反転)、_alphaは不透明度を、百分率(%)で指定する。ステージの幅と高さは、それぞれStage.widthとStage.height。
スクリプト004■MovieClipインスタンスを3D風に楕円運動させる
|
// MovieClip: アニメーションするインスタンス
// MovieClipアクション
onClipEvent (load) {
var nTheta = 0;
}
onClipEvent (enterFrame) {
nTheta += 0.2;
_x = 80*Math.cos(nTheta)+Stage.width/2;
_y = 40*Math.sin(nTheta)+Stage.height/2;
_xscale = Math.sin(nTheta)*100;
_alpha = (Math.sin(nTheta)+1)/2*50+50;
}
|
スクリプトでぼかしフィルタを適用するには、(1)BlurFilterインスタンスを作成し、(2)filterプロパティに配列に格納したうえで設定する。
// (1)BlurFilterインスタンス作成
var ぼかしフィルタインスタンス = flash.filters.BlurFilter(水平方向のぼけ幅, 垂直方向ぼけ幅);
// (2)配列に格納したうえでfiltersプロパティに設定
MovieClipインスタンス.filters = [ぼかしフィルタインスタンス];
スクリプト005■遠近感のぼかしを加えた3D風楕円運動(round8.fla)
|
// MovieClip: アニメーションするインスタンス
// MovieClipアクション
onClipEvent (load) {
var nTheta = 0;
}
onClipEvent (enterFrame) {
nTheta += 0.2;
_x = 80*Math.cos(nTheta)+Stage.width/2;
_y = 40*Math.sin(nTheta)+Stage.height/2;
_xscale = Math.sin(nTheta)*100;
var myBlur = new flash.filters.BlurFilter(-(Math.sin(nTheta)-1)*4, 0);
filters = [myBlur];
}
|
|
[*4] 三角関数の基礎とラジアンの概念については、Flash TechNote「角度と座標の計算」参照。
|
□04 ActionScript 3.0で書く[*5]
ActionScript 3.0は、インスタンスに書けない。したがって、フレームに記述する。
表002■ActionScript 1.0/2.0から3.0へのおもな変更
| 厳密な型指定 |
| var 変数名:データ型 |
| イベントハンドラはイベントリスナーへ |
addEventListener(イベント, 関数名);
function 関数名(イベントオブジェクト:データ型):void {
ステートメント;
} |
| プロパティの変更 |
| Stage.width、Stage.height、_x、_y、_xscale |
stage.stageWidth、stage.stageHeight、x、y、scaleX
|
スクリプト006■3D風楕円運動をActionScript 3.0に書替え(round9.fla)
|
// MovieClip: アニメーションするインスタンス
// 第1フレームアクション
var nTheta:Number = 0;
addEventListener("enterFrame", enterFrame);
function enterFrame(eventObject:Event):void {
nTheta += 0.2;
x = 80*Math.cos(nTheta)+stage.stageWidth/2;
y = 40*Math.sin(nTheta)+stage.stageHeight/2;
scaleX = Math.sin(nTheta);
var myBlur:flash.filters.BlurFilter
= new flash.filters.BlurFilter(-(Math.sin(nTheta)-1)*4, 0);
filters = [myBlur];
}
|
作成者: 野中文雄
作成日: 2006年10月6日
