Home > lesson3 > Tweenクラスでムービークリップをトゥイーンさせる[3-4]

Tweenクラスでムービークリップをトゥイーンさせる[3-4]

ステージに配置したムービークリップにTweenクラスを使ってトゥイーンさせる

[3-3]でステージに配置したムービークリップにトゥイーンモーションを指定してます。

タイムライン上にあるアクションスクリプトに、まずTweenクラスとeasingクラスをインポートさせ、使えるようにします。

//クラスのインポート
import fl.transitions.Tween;
import fl.transitions.easing.*;

Tweenクラスに関しては、もっと奥が深いので今回は取り合えず簡単に使えるやり方にします。
詳しくはもっと勉強してからと言うことで…

[3-3]でカクスタムクラスを使ってステージ上にムービークリップを配置してますので、さらにTweenクラス用のアクションスクリプトを追記します。

// モーション設定
var mcTween:Tween;
mcTween = new Tween(my_mc, "y", Bounce.easeOut, 0, (stage.stageHeight - my_mc.height/2), 5, true);


変数mcTweenをTweenクラスを指定して宣言し、new演算子でTweenクラスでトゥイーンさせる処理を書きます。
順番としては
①トゥイーンさせるインスタンス名
②変化させたいプロパティ
③アニメーションの種類
④開始値
⑤終了値
⑥継続時間
⑦継続時間の単位
になります。
アニメーションの種類に関しては、あとでまとめます。

今回はムービークリップのY軸にイージング終了時にバンドさせる処理としてます。
カスタムクラスでステージ配置されたムービークリップは初期表示位置x軸はステージ幅の1/10で表示されるが、Y軸に関してはトゥイーンで0からステージの高さ(ステージいっぱい)に移動して、終了時にバウンドするせる感じになります。

//クラスのインポート
import fl.transitions.Tween;
import fl.transitions.easing.*;

// Ballクラスからインスタンスを作る
var my_mc:Ball = new Ball();
addChild(my_mc);
my_mc.x = stage.stageWidth / 10;

// モーション設定
var mcTween:Tween;
mcTween = new Tween(my_mc, "y", Bounce.easeOut, 0, (stage.stageHeight - my_mc.height/2), 5, true);

asファイルに関しては[3-3]と同じになりますので、省略します。

Tweenクラスでムービークリップをトゥイーンさせる

アニメーションの種類

イージングクラス 説明
Back 開始値や終了値をいったん超えて戻るアニメーション
Bounce バウンドするアニメーション
Elastic 開始時や終了時に慣性の働くようなアニメーション
Regular 加速・減速をするアニメーション
Strong 加速・減速をするアニメーション。Regularよりも動きが極端
None 等速のトゥイーンアニメーション

イージンの種類

イージングメソッド 説明
easeIn 最初にイージング効果
easeOut 最後にイージング効果
easeInOut 両方にイージング効果

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.addchild.net/as3-beginner/ls3/316.html/trackback
Listed below are links to weblogs that reference
Tweenクラスでムービークリップをトゥイーンさせる[3-4] from ADD CHILD = AS3

Home > lesson3 > Tweenクラスでムービークリップをトゥイーンさせる[3-4]

Feeds
Meta

Return to page top