アド企画 制作部
アド企画 制作部
 

Flash:ActionScript3.0でTweenerのテスト

Flash:ActionScript3.0でTweenerのテスト

先日、AcrionScript3.0のテストで作成した動物ルーレットのサンプルは、高速に各インスタンスのX座標の位置を変えているだけで、スロー再生した場合は当然コマ送りの様な仕上がりになってしまいます。
今度はアニメーションライブラリ「Tweener」を使用してみようと思い、Tweenerの導入・テストをしてみました。

準備

まず、Tweenerテスト用にフォルダを作成して、ActionScript3.0のファイルを作成しておきます。

20160122c


前回と同じ要領でムービークリップのインスタンスを適当に配置して、ファイルを保存します。
とりあえず、「inu」と「ushi」の2つを配置してみました。

20160122d


ムービークリップのインスタンスの作成については、前回記事を参考にしてください。

Tweenerのダウンロード

Tweenerは、次のURLからダウンロードできます。

https://code.google.com/p/tweener/
Downloadsを選びます。

20160122a


AcrionScript3.0で開発をしていますので、ファイル名の末尾が「_as3.zip」のものを選んでダウンロードします。

20160122b


ダウンロードしたファイルの中には「caurina」という名前のフォルダがありますので、先ほど作成・保存したTweenerテスト用のflaファイルと同じフォルダにコピーします。

20160122e


※ 同じフォルダにコピーしない場合、Flashの環境設定でパスを通すなどの作業が必要になりますが、今回は紹介しません。

Tweenerのテスト

とりあえず、Tweenerを使ってみます。
タイムラインの最初のフレームのアクションに、次の様なスクリプトを記述してみます。

20160122f

 
 import caurina.transitions.Tweener;

var idou_px:int = 100; // 移動させる距離(px)
var idou_time:int = 3; // 移動完了までの時間(秒)

Tweener.addTween(inu,{
	x:inu.x - idou_px,
	time:idou_time
});

Tweener.addTween(ushi,{
	x:ushi.x - idou_px,
	time:idou_time
});


これをデバッグしてみると、とりあえず左に100px ピョイーンと3秒かけて動きます。
eventListenerなど仕掛けていませんので、1回動くだけです。

ちゃんと動作する事が確認できました。

参考にしたサイト

今回は動かしてみるだけのテストをしました。
トゥイーンの種類や、大きさ・透明度など、色々設定でるので、今後、色々テストしていこうと思います。

設定項目など、次のURLに詳しく紹介されています。

creator note
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


Tweenerリファレンス
http://hosted.zeh.com.br/tweener/docs/en-us/