12月 4, 2008
Tweenerの活用 – 円形移動
Tweenerを使って円形移動の関数を作ってみる。
以前の記事でも使ってた計算式、
rad = 角度 * Math.PI / 180;
円形の_x = 中心点+ Math.cos( rad ) * 半径;
円形の_y = 中心点 + Math.sin( rad ) * 半径;
「角度」を0から、10,20,30って360まで足していくと、
対象物(ターケット)が円の形に沿って移動していく。
onEnterFrameで角度を足せば、別にTweenerを使わなくていいが、
Tweenerのイージングと速度とかのプロバディを使えば、グン〜っと動きが面白くなる。
というわけで、
1.円形移動を司る「角度」を【rot】という変数にして
2.空MCを作って、_x:0〜360に動かす
3.【rot】は空MCの_xを参照
4. (゚д゚)ウマー
This movie requires Flash Player 9.0.0
とりあえず完成。
って欲張って、開始角度(どの角度から回転し始めるか)も自由に設定したいから、
もうちょい頑張ってみる。
This movie requires Flash Player 9.0.0
完成!
出来上がった関数はこれ(要Tweener)
function MovieEn( Target:MovieClip , Radius:Number , Time:Number , StartAng:Number , Ang:Number , Trans:String ){
//リセット
this.Checker.removeMovieClip();
this.mc_box._x = 252;
this.mc_box._y = 238;
//=================================================
//回転の開始角度によって、回転する中心点を計算し直す
//=================================================
var Temrad:Number = (StartAng + 180) * Math.PI / 180;
var StartX = Target._x + Math.cos(Temrad) * Radius;
var StartY = Target._y + Math.sin(Temrad) * Radius;
//=================================================
//目標とする回転量の計算
var EndAng:Number = StartAng + Ang;
//Tweenerを掛けるためのカラーMCを作成
this.createEmptyMovieClip("Checker", this.getNextHighestDepth());
//スタート位置セット
Checker._x = StartAng;
//回転する量や移動スピードなど、すべての要素をTweenerにセット
Tweener.addTween( Checker , { _x:EndAng, time:Time , transition:Trans , onComplete:function() { this.removeMovieClip(); }});
Checker.onEnterFrame = function(){
//円形移動に必要な現在角度を
//カラーのMCのX座標を参照するように
var rot = this._x;
var rad = rot * Math.PI / 180;
Target._x = StartX + Math.cos(rad) * Radius;
Target._y = StartY + Math.sin(rad) * Radius;
}
}
//=============================================================
■実行は必要な情報を引数で渡す
MovieEn( mc_box , 130 , 4 , 45 , 315 , "easeOutCubic" );
//引数は左から:ターケット , 半径 , 移動スピード , 開始角度 , 回転度数 , イージング
This movie requires Flash Player 9.0.0