Daily Archives: 2009/09/12

Tweenerで自前パラメータをtweenさせる

1
Posted by yamada on 2009/09/12 – 19:03
Filed under AS3, Flash
Tagged as , , ,

今回のエントリは、Tweenerで自前パラメータをTweenさせる方法のメモです。

tween対象のAnimTextを定義

たとえばAnimTextというTextFieldを継承したクラスを考えてみます。
このクラスはX座標を設定すると同時にその値を自分の文字に置き換えるmyParamというパラメータを持っています。
このクラスのインスタンスのmyParamをtweenさせてみたい、というようなことをやってみます。
AnimTextは以下のように定義しておきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

package {
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
 
  public class AnimText extends TextField {
    private var _myParam:Number = 0;
 
    public function AnimText()
    {
      this.text = "DEFAULT";
      this.autoSize = TextFieldAutoSize.LEFT;
    }
 
    public function get myParam():Number {
      return _myParam;
    }
    public function set myParam(value:Number):void {
      _myParam = value;
      this.text = "PARAM[" + _myParam + "]";
      this.x    = _myParam;
    }
  }
}

普通のやり方だけではNG

AnimTextのインスタンスを_animTextと定義します。
この_animTextのmyParamを1秒で300までtweenさせたい、と言う場合、以下のようなコードを書きたくなります。

1
2

var _animText:AnimText = new AnimText();
Tweener.addTween( _animText, { myParam:300, time:1 } );

しかし、これだけでは実行できません。
Tweenerが、myParamというパラメータを理解できないからです。
Tweenerでは、自前のパラメータに対してtweenさせたい場合、tween時に呼び出す関数を用意する必要があるのです。

スペシャルプロパティの登録

自前プロパティをTweenerで使用可能なパラメータに設定する際に必要なのは次の3つの値です。

  • Tweenerから呼び出すときのパラメータ名
  • そのパラメータ名で値を返す関数 .. setter
  • そのパラメータ名に値を設定したときに呼び出す関数 .. getter

これをTweener.registerSpecialPropertyというメソッドに渡します。
上記の例で言えば、以下のようなコードになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// 登録コード.
// Tweener.addTween するまえに1度だけ呼び出して設定.
Tweener.registerSpecialProperty(
  "myParam",
  get_myParam,
  set_myParam
);
 
// 以下はsetter/getter関数.
public function get_myParam(
  p_obj:AnimText,
  param:Array,
  extra:Object = null ) :Number
{
  return p_obj.myParam;
}
public function set_myParam(
  p_obj:AnimText,
  value:Number,
  param:Array,
  extra:Object=null ) :void
{
  p_obj.myParam = value;
}

これで最初に書いたコードが使えるようになります。

公式ドキュメントの不備？

なんと、公式ドキュメントっぽい以下のリンク先にあるサンプルコードでは実行時エラーになるので注意が必要です。

set, getに使う関数の引数が間違っているのです。
今はsetter/getterそれぞれの引数の最後に、params:Array, extra:Object=null という2つを付け加えておく必要があります。
ちなみにこれらの引数については、Aquiouxさんのページのサンプルコードで知りました。

サンプルコード：yoyo text

最後に、上記AnimTextをアニメーションさせるサンプルコードを載せておきます。
Read More »