« クリックした位置を中心に回転する | メイン | バトン »
クリックした位置を中心に回転する（回答）
先日の「クリックした位置を中心に回転する」はどうやるかを種明かししましょう。写真をクリックするとクリックした点を中心に写真が回転します。そのままドラッグすることもできるというサンプルです。
サンプル：
ムービークリップのインスタンスを回転させるには、インスタンスの_rotationプロパティを連続的に変更します。_rotationプロパティの単位は度数なので、
this._rotation += 5;
とすれば5度ずつ回転します。このとき、回転の中心はムービークリップの座標の中心点です。ムービークリップには変形の中心点と座標の中心点がありますが、変形の中心点はあくまでもオーサリング時の[自由変形ツール]での変形の中心であって、スクリプトでは座標の中心点が回転や拡大などの中心点になるので誤解しないようにしましょう。
さてここからが種明かしです。（最後にflaファイルのダウンロードのリンクがあります）
回転させるためには写真をムービークリップシンボルにしなければならないというのは予想できると思いますが、実は回転させているのは写真のインスタンスではないのです。ステージに写真のインスタンスを作ったならば、それを選択してもう１回ムービークリップシンボルに変換します。つまり、入れ子になっているムービークリップを作ります。ステージに置いてあるのは、この写真が入れ子になっているインスタンスです。
インスタンスがクリックされたならば、クリックされた座標にインスタンスを移動します。これでマウスの位置にインスタンスの中心点が移動します。しかし、これでは写真の位置が動いてしまうので、インスタンスをマウスの位置に移動しただけ、中に入っている写真のインスタンスを逆方向に動かします。これで写真は元に位置から動いていないように見えます。後はこのままインスタンスを回転させればインスタンスはマウスの位置で回転するので、写真はマウスクリックした位置を中心点にして回転するように見えるのです。
//回転・ドラッグ開始
function onPress() {
//ドラッグ開始
this.startDrag(false);
//クリックした位置に移動
var xm:Number = this._xmouse;
var ym:Number = this._ymouse;
this._x = _root._xmouse;
this._y = _root._ymouse;
//移動した分だけmyMC（写真）の位置を補正
myMC._x -= xm;
myMC._y -= ym;
onEnterFrame = mawasu;
onMouseMove = updateStage;
}
//回転・ドラッグ終了
function onRelease() {
this.stopDrag();
delete this.onEnterFrame;
delete this.onMouseMove;
}
//回転・ドラッグ終了
function onReleaseOutside() {
this.stopDrag();
delete this.onEnterFrame;
delete this.onMouseMove;
}
//画面リフレッシュ
function updateStage() {
updateAfterEvent();
}
//インスタンスを回す
function mawasu() {
this._rotation += 5;
}
マウスクリックの位置を中心として回す方法はほかにも考えられますが、この方法がもっともお手軽なのではないかと思いますよ。発想の転換ですね。この考え方はいろいろなケースで応用できると思うので、研究してみてください。
投稿者 oshige : 2006年05月22日 09:39