Flash ActionScriptで複雑な傾斜のある楕円を描く
Flashは、WEBサイトに複雑な動きを加えることが出来るアニメーションムービーですが、Flash ActionScriptが書けないと複雑な表現はなかなか難しいんです。
例えば、イラストなどのオブジェクトが右から左に動いたりするモーショントゥイーンや、円が四角形に変るシェイプトゥウィーンなどのアニメーションは、最初のコマと最後のコマを結んで上げれば出来ますが、上記のような、半永久的に異なった起動を描く光などはActionScriptに限ります。
また、こうして作ったFlashムービーを見るためのFlash Playerの普及率は非常に高く、大抵のパソコンでFlashムービーを見ることが出来ますが、製作者側はそれを過信して新しいバージョンで制作すると大きな誤算が生まれ、発注した企業の担当者様からこんなクレームを言われてしまいます。
「なんで強豪他社のWEBサイトのFlashは見えて、作ってもらったウチのFlashは見えないんだ！」と…。
実はFlashには、製作側のFlashやActionScript、閲覧側のFlash Playerそれぞれにバージョンが有り、上位バージョンは下位バージョンのムービーは見れますが、その逆では動作しないことが多いのです。
そのため、古いFlash Playerしか入っていないようなセキュリティーの厳しい企業などでは新しいバージョンで制作されたFlashは見ることが出来なくなってしまいます。
今回、当社でお引き受けした案件も、複雑な動きをする光とその軌跡、クライアントは企業というActionScriptを使用しないと実現不可能な、且つ最新バージョンでもダメ（多分？）という案件でした。
そこで、今回はFlash6 + ActionScript2.0で実現する楕円の描き方（覚書）
ステージ上に光のMovieClipを配置し、そこに以下ActionScriptを記述
//----- ActionScript START
onClipEvent (load) {
center = Stage.width/2; //楕円の中心座標X軸
vartical = Stage.height/2; //楕円の中心座標Y軸
r_long = 150; //長軸
r_short = 50; //短軸
degree = 0; //傾斜度（初期値：45）
}
onClipEvent (enterFrame) {
slope = Math.PI/180*(degree); //楕円の傾斜角度をラジアンに変換
sin_slope = Math.sin(slope); //傾斜用のサイン
cos_slope = Math.cos(slope); //傾斜用のコサイン
ang += 2.5; //移動速度を追加（基本値：10）
/*
原点中心に角θだけ回転させる変換式
傾斜用x'=xcosθ-ysinθ 傾斜用y'＝xsinθ＋ycosθ
▼θ=45度にする場合
傾斜用新x＝x(cos(radian)×長軸)×cos(45)-y(sin(radian)×短軸)×sin(45)
傾斜用新y＝x(cos(radian)×長軸)×sin(45)+y(sin(radian)×短軸)×cos(45)
*/
//角度angをラジアンに変換(360度=2PI,180度=PI,90度=PI/2,1度=PI/180)
radian = Math.PI/180*ang;
x1 = Math.cos(radian)*r_long; //傾斜前のx座標→コサイン × 長軸
y1 = Math.sin(radian)*r_short;//傾斜前のy座標→サイン × 短軸
//傾斜用新ｘ ＝ 現在のｘの長さ×cos(45度)- 現在のyの長さ×sin(45度)
newx = (x1*cos_slope)-(y1*sin_slope);
//傾斜用新y ＝ 現在のｘの長さ×sin(45度)+ 現在のyの長さ×cos(45度)
newy = (x1*sin_slope)+(y1*cos_slope);
this._x = newx+center;
this._y = newy+vartical;
degree += 0.9; //回転角度を追加
}
//----- ActionScript END
最初の初期設定の「degree値」に数値を入力し、最後の「degree += 0.9;」をコメントアウトすれば、単に初期設定の「degree値」だけ傾斜した普通の楕円だけの動きになります。
栗原@R-design