- 2006-06-27 (火)
- action script
Action Scriptでムービークリップの回転といえば_rotationプロパティですが、今回紹介するのは、別の方法。
回転前のムービークリップのx,y座標と回転軸のx,y座標、回転させたい角度から、回転後のx,y座標を求める方法です。
使う式は
x1 = Math.cos(radian)*x-Math.sin(radian)*y;作例を交えて解説させていただきます。
y1 = Math.cos(radian)*y+Math.sin(radian)*x;
var degree:Number = 30;//回転させたい角度
var radian:Number = degree*Math.PI/180;//角度をラジアンに変換
function rotateBall() {//正の方向にdegree度回転させる関数
var x:Number = ball._x-point._x;
var y:Number = ball._y-point._y;
x1 = Math.cos(radian)*x-Math.sin(radian)*y;
y1 = Math.cos(radian)*y+Math.sin(radian)*x;
ball._x = point._x+x1;
ball._y = point._y+y1;
btn.label = "Reset";
}
function resetBall() {//負の方向にdegree度回転させる関数（先程の逆回転）
var x:Number = ball._x-point._x;
var y:Number = ball._y-point._y;
x1 = Math.cos(radian)*x+Math.sin(radian)*y;
y1 = Math.cos(radian)*y-Math.sin(radian)*x;
ball._x = point._x+x1;
ball._y = point._y+y1;
btn.label = "Rotate";
}
btn.onRelease = function() {//ボタンラベルの内容により、回転・逆回転を行う
if (btn.label == "Rotate") {
rotateBall();
} else {
resetBall();
}
};では、上から順に見て行きます。まず、var degree:Number = 30;//回転させたい角度回転させたい角度degreeを設定します。今回、Mathクラスのcos()とsin()を使いますが、引数には角度ではなく、ラジアンを与えないといけないので、２行目の変換の公式（重要なので丸暗記必須）で、角度（degree）をラジアン（radian）に変換します。
var radian:Number = degree*Math.PI/180;//角度をラジアンに変換
次に、回転させるための関数、rotateBallの中身を見ていきます。
var x:Number = ball._x-point._x;作例のガイドを見れば分かりますが、移動前のballのpointからの座標xとyを求めます。
var y:Number = ball._y-point._y;
x1 = Math.cos(radian)*x-Math.sin(radian)*y; y1 = Math.cos(radian)*y+Math.sin(radian)*x;ここで今回の核となる式を使います。ここでのx1,y1は、先ほど求めたx,yがradianの分だけ回転した後の座標です。
ball._x = point._x+x1; ball._y = point._y+y1;求めたx1,y1は基準点pointからの距離です。ballの移動後の座標はFlashの座標空間で考えますのでpointの_x,_yを足したものになります。
btn.label = "Reset";は、作例用のボタンのテキストを変更するためのものですので、今回は無視して下さい。
以上です。
ちなみに負の方向（反時計回り）に回転させたい時は、resetBall関数にあるように、
x1 = Math.cos(radian)*x+Math.sin(radian)*y;＋ーの符号を逆転させます。
y1 = Math.cos(radian)*y-Math.sin(radian)*x;
マウスの座標を回転軸にしたり、onEnterFrameの中に入れて回転させ続けたりして検証してみてください。
この回転のさせ方は、Flashの擬似３D空間での回転にも使えますので、覚えておいて損は無いとおもいます。
さらに深みにハマりたい時は、
Foundation Actionscript Animation: Making Things Move (Foundation)
Keith Peters 
でテンションが上がります。
- Newer: Flash Player 9 ダウンロード開始
- Older: The Vodafone Journey
Comment:3
- nk 2007-07-23 (月) 04:04
-
まだ初心者なので、参考にさせてもらっています
一つお聞きしたい事があるのですが
x1 = Math.cos(radian)*x-Math.sin(radian)*y;
y1 = Math.cos(radian)*y+Math.sin(radian)*x;
この式の意味はどういったものなのでしょうか？ただ式を覚えるのでは無く、一つ一つ式を理解していたいので
この式の意味というか何故この式なのかと考えていたのですが
どうもsin.cosなどが絡むと苦手で苦戦しています・・・お暇な時でいいのでどうかご教授願えないでしょうか・・・
- tera 2007-07-23 (月) 09:21
-
＞nk様
こんにちは。コメントありがとうございます。
上の式なのですが、残念ながら僕の脳から抜け落ちてしまいました。
洋書ですが「Making Things Move」（AS2版、AS3版どちらにも記載）の中に、そのまんまの公式（導き方）が、順をおって解説されていますので、そちらを読んでいただくのがよいかと思います。
僕も読み直しますです。 - nk 2007-07-23 (月) 21:35
-
お返事ありがとうございます
英語が駄目なので洋書は無理そうです・・・でも、なんとか頑張ってみます！
ありがとうございました！やっぱり、英語が出来ると色々と得ですね
Trackback:0
- TrackBack URL for this entry
- http://www.trick7.com/blog/mt-tb.cgi/159
- Listed below are links to weblogs that reference
- 〜度回転させた後の_xと_yを求める方法 from trick7.com blog
![FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付]](http://images.amazon.com/images/P/4881664573.01._SCTHUMBZZZ_.jpg)
