Home > study | tweensy > [tweensy]いろいろ試してみる：onComplete、YOYO、TweensySquence

[tweensy]いろいろ試してみる：onComplete、YOYO、TweensySquence

前の記事でwikiの日本語訳（微妙かも？）もしたことなので、
それとこのASDocを見ながらよく使いそうな事例をもとに
TweensyOriginalを使ってサンプルを作ってみまーす！

Tweensyを使う準備

Tweensy0.2.zipをダウンロード

解凍したファイルの
releases/source/cs3 or cs4/originalフォルダを適当なところに保存。

flashを開いて環境設定でTweensyOriginalのクラスパスを通す。

Tweensyのイージングの感じをシュミレーションするのには
SCRATCHBRAINさん作のこのツール使いました。あーたす！


作った３つのサンプル

三つのサンプルに共通するところ

  • mcをクリックしたら一時停止、再クリックで再開する。
  • 完了イベントを取得、完了したらマウスイベント削除。
  • ムービークリップのサブクラスである。


TweensyOriginalサンプル1

view sample

mcが右から左に 移動して、2秒後に完了。

  • TweensyTimeline使う
  • イージング使用
  • トゥイーンの遅延
  • プロパティpausedで条件判定して、トゥイーンの一時停止・再開
  • トゥイーン完了イベント取得

Sample1.as

PLAIN TEXT
Actionscript:
  1. package {
  2.     import com.flashdynamix.motion.*;
  3.     import fl.motion.easing.*;
  4.     import flash.display.MovieClip;
  5.     import flash.text.TextField;
  6.     import flash.events.MouseEvent;
  7.     import flash.events.Event;
  8.  
  9.     /**
  10.      * ...
  11.      * @author kanariia
  12.      */
  13.     public class sample1 extends MovieClip {
  14.         private var tween:TweensyTimeline;
  15.         private var tf:TextField;
  16.         public function sample1() {
  17.  
  18.             //テキストフィールドを作成、追加
  19.             tf = new TextField();
  20.             tf.x = 0;
  21.             tf.y = this.height;
  22.  
  23.             addChild(tf);
  24.            
  25.             //x軸0から450まで5.0秒かけてQuartic.easeOutで動かす
  26.             tween = Tweensy.fromTo(this, { x:0 }, { x:450 }, 5.0, Quartic.easeOut);
  27.            
  28.             //目的地についたら一秒待つ
  29.             tween.delayEnd = 2.0;
  30.  
  31.             //トゥイーンが完了したら、completeTween関数を実行
  32.             tween.onComplete =completeTween;
  33.  
  34.             //イベントリスナー登録
  35.             addEventListener(MouseEvent.CLICK,pauseTween);
  36.             //オーバー時のマウスカーソルの形状人差し指に
  37.             buttonMode=true;
  38.  
  39.         }
  40.         public function pauseTween(e:Event) {
  41.             if (tween.paused) {//一時停止してたら再開
  42.                 tween.resume();
  43.                 tf.text="再開したよ";
  44.             } else {//そうでなければ一時停止
  45.                 tween.pause();
  46.                 tf.text="一時停止したよ";
  47.             }
  48.         }
  49.         public function completeTween():void {
  50.             tf.text = "完了したよ";
  51.             //イベントリスナー削除
  52.             removeEventListener(MouseEvent.CLICK, pauseTween);
  53.             //オーバー時のマウスカーソルの形状デフォルトに
  54.             buttonMode = false;
  55.         }
  56.     }
  57. }


TweensyOriginalサンプル2

view sample

mcが左右に移動するのを3往復する。

  • TweensyTimeline使う
  • イージング使用
  • トゥイーンの繰り返し(3往復)
  • プロパティpausedで条件判定して、トゥイーンの一時停止・再開
  • トゥイーン完了イベント取得

Sample2.as

PLAIN TEXT
Actionscript:
  1. package {
  2.     import com.flashdynamix.motion.*;
  3.     import fl.motion.easing.*;
  4.     import flash.display.MovieClip;
  5.     import flash.text.TextField;
  6.     import flash.events.MouseEvent;
  7.     import flash.events.Event;
  8.  
  9.     /**
  10.      * ...
  11.      * @author kanariia
  12.      */
  13.     public class sample2 extends MovieClip {
  14.         private var tween:TweensyTimeline;
  15.         private var tf:TextField;
  16.         public function sample2() {
  17.  
  18.             //テキストフィールドを作成、追加
  19.             tf = new TextField();
  20.             tf.x = 0;
  21.             tf.y = this.height;
  22.  
  23.             addChild(tf);
  24.            
  25.             //x軸0から450まで1.5秒かけてQuartic.easeInOutで動かす
  26.             tween = Tweensy.fromTo(this, { x:0 }, { x:450 }, 1.5, Quartic.easeInOut);         
  27.        
  28.            
  29.             //トゥイーンの繰り返し
  30.             tween.repeatType = TweensyTimeline.YOYO;
  31.             tween.repeats = 3;
  32.  
  33.             //トゥイーンが完了したら、completeTween関数を実行
  34.             tween.onComplete =completeTween;
  35.  
  36.             //イベントリスナー登録
  37.             addEventListener(MouseEvent.CLICK,pauseTween);
  38.             //オーバー時のマウスカーソルの形状人差し指に
  39.             buttonMode=true;
  40.  
  41.         }
  42.         public function pauseTween(e:Event) {
  43.             if (tween.paused) {//一時停止してたら再開
  44.                 tween.resume();
  45.                 tf.text="再開したよ";
  46.             } else {//そうでなければ一時停止
  47.                 tween.pause();
  48.                 tf.text="一時停止したよ";
  49.             }
  50.         }
  51.         public function completeTween():void {
  52.             tf.text = "完了したよ";
  53.             //イベントリスナー削除
  54.             removeEventListener(MouseEvent.CLICK, pauseTween);
  55.             //オーバー時のマウスカーソルの形状デフォルトに
  56.             buttonMode = false;
  57.         }
  58.     }
  59. }


TweensyOriginalサンプル3

view sample

mcがステージを一周する数珠繋ぎトゥイーン。

  • TweensySquenceを使う
  • イージング使用
  • プロパティpausedで条件判定して、トゥイーンの一時停止・再開
  • トゥイーン完了イベント取得

Sample3.as

PLAIN TEXT
Actionscript:
  1. package {
  2.     import com.flashdynamix.motion.*;
  3.     import fl.motion.easing.*;
  4.     import flash.display.MovieClip;
  5.     import flash.text.TextField;
  6.     import flash.events.MouseEvent;
  7.     import flash.events.Event;
  8.  
  9.     /**
  10.      * ...
  11.      * @author kanariia
  12.      */
  13.     public class sample3 extends MovieClip {
  14.         private var sequence:TweensySequence;
  15.         private var tf:TextField;
  16.         public function sample3() {
  17.  
  18.             //テキストフィールドを作成、追加
  19.             tf = new TextField();
  20.             tf.x = 0;
  21.             tf.y = this.height;
  22.  
  23.             addChild(tf);
  24.  
  25.  
  26.             //トゥイーンシーケンスを定義
  27.             sequence= new TweensySequence();
  28.             sequence.push(this, {x:0, y:0}, 1,Quartic.easeInOut);
  29.             sequence.push(this, {x:500, y:0}, 1,Quartic.easeInOut);
  30.             sequence.push(this, { x:500, y:350 }, 1,Quartic.easeInOut);
  31.             sequence.push(this, { x:0, y:350 }, 1, Quartic.easeInOut);
  32.             sequence.push(this, {x:0, y:150}, 1,Quartic.easeInOut);
  33.             sequence.start();
  34.            
  35.  
  36.  
  37.             //トゥイーンが完了したら、completeTween関数を実行
  38.             sequence.onComplete =completeTween;
  39.  
  40.             //イベントリスナー登録
  41.             addEventListener(MouseEvent.CLICK,pauseTween);
  42.             //オーバー時のマウスカーソルの形状人差し指に
  43.             buttonMode=true;
  44.  
  45.         }
  46.         public function pauseTween(e:Event) {
  47.             if (sequence.paused) {//一時停止してたら再開
  48.                 sequence.resume();
  49.                 tf.text="再開したよ";
  50.             } else {//そうでなければ一時停止
  51.                 sequence.pause();
  52.                 tf.text="一時停止したよ";
  53.             }
  54.         }
  55.         public function completeTween():void {
  56.             tf.text = "完了したよ";
  57.             //イベントリスナー削除
  58.             removeEventListener(MouseEvent.CLICK, pauseTween);
  59.             //オーバー時のマウスカーソルの形状デフォルトに
  60.             buttonMode = false;
  61.         }
  62.     }
  63. }


試す前にちょっとFlaファイルをいじる

Flashで適当なMCを作成。
ライブラリのリンケージ設定で、作ったmcにのサブクラスを定義。
ステージ上にmcを配置。
パブリッシュ、でOK。


つまづいたとこ

トゥイーンの繰り返しをしようと思って、
自分のブログのトゥイーンの繰り返しの説明のとこから、
Tweensy.YOYO; をコピって
コードにコピーしたら未定義とかいってエラー。。。

なんでなんでと調べるが、しばらく意味わからず。

じゃあ、しょーもないことやった。。

Tweensy使ってるとき→Tweensy.YOYO
TweensyTimeline使ってるとき→TweensyTimeline.YOYO

そらTweensyTimelineやのにTweensy.YOYOって書いたら怒られるよなぁ。。

みなさまコピペには注意ですｗ(あ、自分だけかｗ)


感想

Tweensyいい！繰り返しトゥイーンが二行で簡単！
数珠繋ぎトゥイーンもすんなりできました！

今回TweensyじゃなくてTweensyTimeline使った理由は特にないけど、
なんかプロパティとメソッドが充実してたから、こっち使ったほうがいいのかなと。。

あと、呼び名は「トゥイーンジー」に一票ヾ(ﾟ∀ﾟ)ﾉ


関連する投稿

Comments:2

scratchbrain 09-02-27 (金) 9:56

ツール使って頂いたみたいで、うれしいです！
僕もいろいろ参考にさせて頂いています。

kanariia 09-02-27 (金) 15:07

ツールすごく助かりました！
これからもどんどん使わせていただきますっ★
躓いてばかりのブログですが、
参考にしていただいてるなんて、ありがたいです！

Comment Form
Remember personal info

Trackbacks:1

Trackback URL for this entry
http://kanariia.com/blog/archives/389/trackback
Listed below are links to weblogs that reference
[tweensy]いろいろ試してみる：onComplete、YOYO、TweensySquence from kanariia.com blog
pingback from [AS3.0] Tweensyを少し試す。 - blog.ao-design 09-02-01 (日) 12:52

[...] ・[tweensy]tweensyについてググる、tweensyについて知る ・[tweensy]いろいろ試してみる：onComplete、YOYO、TweensySquence ・[tweensy]いろいろ試してみる：TweensyGroupで特殊プロパティをトゥイーン [...]

Home > study | tweensy > [tweensy]いろいろ試してみる：onComplete、YOYO、TweensySquence

Twitter
Follow @kanariia (254 followers)
recent article
arcive
category
bookmark
nakanohito

あわせて読みたい
あわせて読みたいブログパーツ

Return to page top