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