【ActionScript】【Flex】【Tweener】Flexで動きを付ける
Tweenerを使ってみました。
一枚の画像をすっごく簡単に演出をつけるActionScriptのアニメーション用オープンソースのライブラリです。
- ダウンロードします
http://code.google.com/p/tweener/downloads/list
私は下から3番目の
tweener_1_33_74_as3.zip
をダウンロードしました。
- Flexプロジェクト内のsrcにcaurinaフォルダをインポートします
- スクリプトタグ内に
import caurina.transitions.Tweener;
を記述します。
- 後は、Tweenerを追加するだけです！
例：questionはmxmlタグで作成されているTextです。
Tweener.addTween(question, {x:89.5, y:70, time:0.3, transition:"easeOutBounce"});どのような構成になっているかというと、
Tweener.addTween(インスタンス, {変化させたいプロパティ});
変化させたい(させることができる)大体のプロパティ一覧は以下のサイトの、「Tweenerの書き方」のところのソースコードの書かれているもののようです。
http://creator.cotapon.org/articles/flash/actionscript%E3%81%AE%E3%83%88%E3%82%A5%E3%82%A4%E3%83%BC%E3%83%B3%E5%88%B6%E5%BE%A1%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AAtweener%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9
上の例で、transitionと書かれているところがあるのですが、その部分にはどのような動きをつけるのかという事を記述します。
まとめは以下のサイトです
http://www.tonpoo.com/tweener/index2.html
transitionは動きをつけますが、上の例のように座標を指定することで、動きをつける方向も制御できます。そのため、まとめサイトの一覧表は、左上から右下に動かす場合だけだと考えておいたほうがよさそうです。
上のサイトはリファレンスにもなっているのでとても使えそうです！！！
Tweenerにどのように記述すればどのような動きをするか、すぐ分かるような、GUIのツールがこちらです
http://www.scratchbrain.net/blog/ver2/tweener/tweener12662.html
割と分かりやすいと思うので、使いこなしたいです！
