グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

最近思わぬところで、Tween クラスというモノの存在を知りました。

クラスに関してはあまり使うことがなく、便利らしいと知りつつもスルーしていたのですが・・
MC の移動が簡単にできると知って、少し気になってきました。

この Tween クラスの何が便利なのかというと、たとえば、
通常 onEnterFrame を使って座標を変化させるところを、開始座標と終了座標を入れるだけで動かせたりします。
しかも、パラメーターで動作時間やイージングの設定などもできます。


■使い方

まずは準備として、フレームに以下の2行を記入します。

import mx.transitions.Tween;
import mx.transitions.easing.*;

これで Tween クラスが使えるようになりました。


次に実際に MC を動かしてみます。
Tween クラスを使用する場合、以下のように書きます。

var 変数名:Tween = new Tween(インスタンス名, "プロパティ名", 動作の種類, 開始値, 終了値, 動作時間, 時間の単位);

ちょっとわかりづらいですが、実際に当てはめてみるとこうなります。

（例）var tween1:Tween = new Tween(mc1, "_x", Regular.easeOut, 0, 200, 2, true);

これで、「mc1というムービークリップのX座標を、徐々に減速させながら、座標0から200まで、2秒間で変化させる」という動きを付けることができます。


たった3行でできてますね・・
2行は最初に読み込むためのものなので、動かすためのスクリプトは実質1行です。


少し長くなってしまったので、パラメーターについては後日追加することにします。



※09/7/22 追記

■インスタンス名
説明するまでもないと思いますが‥
動かしたいムービークリップのインスタンス名を入れます。


■プロパティ名
変化させたいプロパティを " " で囲んで入れます。
横に移動させたかったら "_x" 、縦だったら "_y" 、
透明度を変えたかったら "_alpha" という感じです。


■動作の種類
3つ目のパラメーター、動作の種類についてです。

もともと用意されている6種類の動きの中から選ぶことができます。

・Back
開始値や終了値を越えた後、戻ってきます。
どちらを越えるかは後述のイージングによって変わります。

・Bounce
3回バウンドします。

・Elastic
開始時か終了時に慣性が働いたような動きになります。

・Regular
加速か減速をします。

・Strong
Regularよりも強い加速・減速をします。

・None
特殊な動作はせず、等速で移動します。


以上、6種類です。
この中から1つを選んだ後、さらにイージングの種類を3種類の中から選びます。


○イージングの種類

・easeIn
始めにイージングの効果がつきます。
徐々に加速するような動きになります。

・easeOut
終わりにイージングの効果がつきます。
徐々に減速するような動きになります。

・easeInOut
上記両方の効果が付きます。


文章ばかりでわかりにくくなってしまったので、
簡単なものですがサンプルを作ってみました～。

こんな感じです


■開始値、終了値
開始時と終了時のプロパティの値を入力します。
例えばプロパティを "_x" にしたとき、開始値0、終了値100とすれば、
X座標を0から100まで移動することになります。


■動作時間、時間の単位
開始から終了までの時間を入力します。
時間の単位を「true」にしたときは秒で、
「false」にしたときはフレーム数で入力します。


これでひとまずTweenクラスを使うことができます。
疲れた‥＾＾；