今回のエントリは、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をアニメーションさせるサンプルコードを載せておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | package { import caurina.transitions.Tweener; import flash.display.Sprite; import flash.events.Event; [SWF(backgroundColor="#aaaaaa", width="400", height="200")] public class Main extends Sprite { private var _animText:AnimText; // Tweenerでカスタムパラメータをtweenさせるデモ. public function Main():void { _animText = new AnimText(); _animText.y = 100; addChild( _animText ); Tweener.registerSpecialProperty( "myParam", get_myParam, set_myParam ); // start animation yoyo. tweenFunc0(); } // yoyo (go left) private function tweenFunc0() :void { Tweener.addTween( _animText, { myParam:0, time:1, onComplete:tweenFunc1 } ); } // yoyo (go right) private function tweenFunc1() :void { Tweener.addTween( _animText, { myParam:300, time:1, onComplete:tweenFunc0 } ); } // Tweenerで使用するためのアクセス関数. 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; } } } |
外部リンク
- Tweener Documentation and Language Reference .. Tweenerの公式オンラインドキュメント
- Tweening Parameters .. 上記ドキュメント内のパラメータリストページ
- Transition Types .. Tweenerのトランジション一覧
[AD]
↓様々なAS3ライブラリの使い方やライセンスに関するFAQが載っているらしい!
著者/訳者:新藤 愛大 池田 泰延 浦野 大輔 加茂 雄亮 河村 晃匡 小林 陽介 高輪 知明 タロタローグ 召田 敬 森山 篤
出版社:翔泳社( 2010-07-15 )
定価:¥ 3,990
Amazon価格:¥ 3,990
大型本 ( 360 ページ )
ISBN-10 : 4798121428
ISBN-13 : 9784798121420
↓なんか、おもしろそう!!
Foundation ActionScript 3.0 Image Effects (Foundations)
著者/訳者:Todd Yard
出版社:Apress( 2009-05-20 )
定価:¥ 3,206
Amazon価格:¥ 2,626
ペーパーバック ( 684 ページ )
ISBN-10 : 1430218711
ISBN-13 : 9781430218715







One Comment
[...] 前回のエントリでTweenerの使い方のメモを書いたのですが、個人的にはもうTweenerは積極的には使わない予定です。 Tweenerのスペックが他のtweenライブラリに比べてそんなに速くない、ということと、今年の6月にTweenerは開発終了宣言されたから、という2つの十分な理由があるからです。 ただ、同一プロジェクトで他の人が書いたコードでTweenerが使われていたとき、スペック的にそれほど高速なtween処理が求められていなければ、それを外して置き換えるとかはしない。そういう場合にTweenerの使い方は知っておいて損はないと思うのです。 Tweener開発終了のエントリを訳された下記エントリがわかりやすいのでリンクしておきます。 [...]