Home > Tags > tweensy

tweensy

[Adobe MAX Japan 2009]ROXIK城戸さんのアレとTweensyで観覧車やってみた

すでにたくさんのレポートが投稿されてるみたいですが、
私もAdobe MAX 2日目参加してきました！！

感想をまとめようかと思いましたが、
私と全く同じセッションを選択されているll_koba_llさんのこの記事に書いてあるまとめが、
本当に感じたこととか一緒でうまくまとめてくださってるので、

まとめるの割愛します(あんなにうまく文まとまりましぇんｗ)。

受けたセッションの中でも、
すぐやってみたいと思ったのが
ROXIK城戸さんが実際にコードを書いて
日本語変数でものすごくわかりやすかった
ムービークリップの座標を視点で制御するアレ。

そこで記憶とメモを基に、
サンプルを作ってみることにした。

まず準備

真ん中基準点のMC「box_mc」を作成。
セッションの時のを忠実に再現w
aの文字は動くとぶるぶるするので分解してシェイプに。
プロパティでクラスにbox_mcと設定。

サンプルたち

視点の横移動

view sample

PLAIN TEXT
Actionscript:
  1. var 視点={x:0,y:0,angle:0,zoom:0};</p>
  2. <p>var ボックスたち=[];<br />
  3. var ポイントたち=[];</p>
  4. <p>ボックス追加();</p>
  5. <p>function ボックス追加() {<br />
  6.     var ポイント;<br />
  7.     var ボックス;</p>
  8. <p> for (var i=0; i&lt;20; i++) {<br />
  9.         ポイント={x:Math.random()*700,y:Math.random()*400};<br />
  10.         ポイントたち[i]=ポイント;</p>
  11. <p>  ボックス=new box_mc();<br />
  12.         ボックスたち[i]=ボックス;<br />
  13.         addChild(ボックス);<br />
  14.     }<br />
  15. }</p>
  16. <p>function モーション(e:Event) {<br />
  17.     視点.x+=2;<br />
  18. }</p>
  19. <p>function レンダリング(e:Event) {<br />
  20.     for (var i=0; i<ボックスたち.length; i++) {<br />
  21.         var ポイント=ポイントたち[i];<br />
  22.         var ボックス=ボックスたち[i];</p>
  23. <p>  ボックス.x=ポイント.x-視点.x;<br />
  24.         ボックス.y=ポイント.y-視点.y;<br />
  25.     }<br />
  26. }<br />
  27. addEventListener(Event.ENTER_FRAME,モーション);<br />
  28. addEventListener(Event.ENTER_FRAME,レンダリング);

視点の回転

view sample

PLAIN TEXT
Actionscript:
  1. var 視点={x:0,y:0,angle:0,zoom:0};</p>
  2. <p>var ボックスたち=[];<br />
  3. var ポイントたち=[];</p>
  4. <p>ボックス追加();</p>
  5. <p>function ボックス追加() {<br />
  6.     var ポイント;<br />
  7.     var ボックス;</p>
  8. <p> for (var i=0; i&lt;20; i++) {<br />
  9.         ポイント={x:Math.random()*700,y:Math.random()*400};<br />
  10.         ポイントたち[i]=ポイント;</p>
  11. <p>  ボックス=new box_mc();<br />
  12.         ボックスたち[i]=ボックス;<br />
  13.         addChild(ボックス);<br />
  14.     }<br />
  15. }</p>
  16. <p>function モーション(e:Event) {<br />
  17.     //ポイント.x+=2;<br />
  18.     //視点.x+=2;<br />
  19.     視点.angle+=0.01;<br />
  20. }</p>
  21. <p>function レンダリング(e:Event) {<br />
  22.     var cos=Math.cos(視点.angle);<br />
  23.     var sin=Math.sin(視点.angle);</p>
  24. <p> for (var i=0; i<ボックスたち.length; i++) {<br />
  25.         var ポイント=ポイントたち[i];<br />
  26.         var ボックス=ボックスたち[i];</p>
  27. <p>  var 視点からの差x=ポイント.x-視点.x;<br />
  28.         var 視点からの差y=ポイント.y-視点.y;</p>
  29. <p>  ボックス.x=視点からの差x*cos-視点からの差y*sin+350;<br />
  30.         ボックス.y=視点からの差x*sin+視点からの差y*cos+200;<br />
  31.     }<br />
  32. }<br />
  33. addEventListener(Event.ENTER_FRAME,モーション);<br />
  34. addEventListener(Event.ENTER_FRAME,レンダリング);

視点のズーム＆回転

view sample

PLAIN TEXT
Actionscript:
  1. var 視点={x:0,y:0,angle:0,zoom:0};</p>
  2. <p>var ボックスたち=[];<br />
  3. var ポイントたち=[];</p>
  4. <p>ボックス追加();</p>
  5. <p>function ボックス追加() {<br />
  6.     var ポイント;<br />
  7.     var ボックス;</p>
  8. <p> for (var i=0; i&lt;20; i++) {<br />
  9.         ポイント={x:Math.random()*700,y:Math.random()*400};<br />
  10.         ポイントたち[i]=ポイント;</p>
  11. <p>  ボックス=new box_mc();<br />
  12.         ボックスたち[i]=ボックス;<br />
  13.         addChild(ボックス);<br />
  14.     }<br />
  15. }</p>
  16. <p>function モーション(e:Event) {<br />
  17.     //ポイント.x+=2;<br />
  18.     視点.angle-=0.01;<br />
  19.     視点.zoom+=0.01;<br />
  20. }</p>
  21. <p>function レンダリング(e:Event) {<br />
  22.     var cos=Math.cos(-視点.angle);<br />
  23.     var sin=Math.sin(-視点.angle);</p>
  24. <p> for (var i=0; i<ボックスたち.length; i++) {<br />
  25.         var ポイント=ポイントたち[i];<br />
  26.         var ボックス=ボックスたち[i];</p>
  27. <p>  var 視点からの差x=(ポイント.x-視点.x)*視点.zoom;</p>
  28. <p>  var 視点からの差y=(ポイント.y-視点.y)*視点.zoom;</p>
  29. <p>  ボックス.scaleX=ボックス.scaleY=視点.zoom;<br />
  30.         ボックス.x=視点からの差x*cos-視点からの差y*sin+350;<br />
  31.         ボックス.y=視点からの差x*sin+視点からの差y*cos+200;<br />
  32.     }<br />
  33. }<br />
  34. addEventListener(Event.ENTER_FRAME,モーション);<br />
  35. addEventListener(Event.ENTER_FRAME,レンダリング);

 

感想

忘れないうちにってことでとりあえずアップしてみたけど、
かなりセッションでやってたやつに近いサンプルができたかな？

自分もこのソースみてまた勉強しようw

今回の城戸さんのスライド公開ならへんかなぁ(*´ω｀*)

関連する投稿

[tweensy]いろいろ試してみる：TweensyGroupで特殊プロパティをトゥイーン

訳しときながらTweensyGroupって何なのかわからなかったけど、
今日asDoc読んでてわかったような気が…。

TweensyGroupには、tweenerでいう特殊プロパティ的なもののトゥイーンのショートカットがあって、
Tweensyでやるよりコードがすっきりして、簡単。

色、輝度、マトリックス、…などなどをバラバラに指定できて、まとめて管理できるから”Group”ってことなのかな？？

それぞれの効果にTweensyTimelineを作ってグループ管理している模様。

時間、イージング、遅延とか各効果別に設定したいけど、制御系はグループ管理したいって時に使えるってことか。

とにかく今回は制御というよりかは特殊プロパティについて調べてみる。


TweensyGroupサンプル

透明度をあげつつ、ぼかしをとりつつ、ぼよんと拡大する。

view sample

Sample1.as

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import com.flashdynamix.motion.*;
  4.     import fl.motion.easing.*;
  5.     import flash.text.TextField;
  6.     import flash.display.MovieClip;
  7.     import flash.filters.BlurFilter;
  8.     import flash.geom.Matrix;
  9.  
  10.     /**
  11.     * ...
  12.     * @author DefaultUser (Tools -> Custom Arguments...)
  13.     */
  14.     public class  Sample1 extends MovieClip
  15.     {
  16.         private var tween:TweensyGroup;
  17.         private var tf:TextField;
  18.        
  19.         public function Sample1() {
  20.             tween = new TweensyGroup();
  21.             tween.onComplete = tweenComp;
  22.            
  23.             //透明度
  24.             this.alpha = 0;
  25.             tween.alphaTo(this, 1, 1,Quartic.easeOut,0.5);
  26.             //フィルター
  27.             var blur:BlurFilter = new BlurFilter(30,30,1);
  28.             tween.filterTo(this, blur, {blurX:0,blurY:0}, 1,Quartic.easeOut,0.5)
  29.             //拡大・縮小
  30.             tween.scaleTo(this, 2, 2, Elastic.easeOut, 1);
  31.            
  32.             //テキストフィールドを作成、追加
  33.             tf = new TextField();
  34.             tf.y = -(this.height/2)-20; //基準点が中央のため
  35.  
  36.             addChild(tf);
  37.            
  38.         }
  39.         public function tweenComp():void {
  40.             tf.text = "Complete!";
  41.         }
  42.        
  43.     }
  44.    
  45. }

ショートカットの詳細

alphaToメソッド　-透明度の変更

public function alphaTo(instance:Object, alpha:Number, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

//mcのアルファを3秒かけて0.5にする
tween.alphaTo(mc, 0, 5,3);

brightnessToメソッド -輝度の変更

public function brightnessTo(instance:Object, amount:Number, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

//mcの輝度を3秒かけて0.5にする
tween.alphaTo(mc, 1, 5,3);

ColorToメソッド -色を変更

public function colorTo(instance:Object, color:uint, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

//mcの色を3秒かけて0x000000(黒)にする
tween.colorTo(mc, 0x000000, 3);

ColorTransformToメソッド -ColorTranceformの適用

public function colorTransformTo(instance:Object, color:ColorTransform, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

import flash.geom.ColorTransform;

//mcの色をColorTransform オブジェクトctに5秒かけて適用
var ct:ColorTransform=new ColorTransform(-1, -1, -1, 1, 255, 255, 255, 0)
tween.colorTransformTo(mc, ct, 5)

contrastToメソッド -コントラストの変更

public function contrastTo(instance:Object, amount:Number, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

//mcのコントラストを3秒かけて1(最大)に変更
tween.contrastTo(mc 1,2);

filterToメソッド -フィルタ効果の適用

public function filterTo(instance:Object, filter:BitmapFilter, to:Object, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

import flash.filters.BlurFilter;

//ぼかしフィルターのblurX、blurYを10に5秒かけて適用
var blur:BlurFilter = new BlurFilter(0,0,1);
tween.filterTo(this, blur, {blurX:10,blurY:10}, 5);

matrixToメソッド -マトリックス変形の適用

public function matrixTo(instance:Object, mtx:Matrix, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

import flash.geom.Matrix;

//mcにMatrixオブジェクトmtxを3秒かけて適用
var mtx:Matrix = new Matrix(-1,2,1,2,1,2);
tween.matrixTo(this, mtx, 3);

rotateToメソッド -回転

public function rotateTo(instance:Object, rotation:Number, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

//mcの角度を3秒かけて180度に変更
tween.rotateTo(mc, 180, 3);

scaleToメソッド -拡大・縮小

public function scaleTo(instance:Object, scale:Number, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

//mcを1秒かけて50%に縮小
tween.scaleTo(mc,0.5,1)；

soundTransformTo -SoundTransformの適用

public function soundTransformTo(instance:Object, trans:SoundTransform, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

import flash.media.SoundTransform;

////mcにSoundTranceformオブジェクトstを3秒かけて適用
var st:SoundTransform = new SoundTransform(1, 0);
tween.soundTransformTo(this, st, 3);



関連する投稿

[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使った理由は特にないけど、
なんかプロパティとメソッドが充実してたから、こっち使ったほうがいいのかなと。。

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


関連する投稿

[tweensy]TweensyOriginalの使い方：和訳してみる

前回に引き続き、
今回はTweenOriginalのwikiを基に
tweenOriginalの使い方をまとめてみまーす。

翻訳エンジンで訳して自分なりにわかるところは修正したりして
意外に時間がかかり、 tweensygroupらへんから訳が翻訳エンジンかけたまんまの文とか
グダグダになってしまった。。。

それでも、なんとなくわかる内容なんで、ぜひ参考程度にどーぞ。

tweenの方法

終了時の値を設定：Twennsy.to

import com.flashdynamix.motion.Tweensy;
Tweensy.to(myInstance, {x:500});

myInstanceのxを現在の位置から500までアニメーションします。

 

開始時の値を設定：Tweensy.from

import com.flashdynamix.motion.Tweensy;
Tweensy.from(myInstance, {x:500});

myInstanceのxを500から現在の位置までアニメーションします。

 

開始時・終了時両方の値を設定：Tweensy.fromTo

import com.flashdynamix.motion.Tweensy;
Tweensy.fromTo(myInstance, {x:0}, {x:500});

myInstanceのxを0から500までアニメーションします。

 

tweenの制御方法

トゥイーンを停止

オブジェクトのインスタンス、またはプロパティの名前を介して運動でトゥイーンを停止することができます。

myInstance1の全てのトゥイーンが停止、myInstance2はトゥイーンを継続する。

import com.flashdynamix.motion.Tweensy;

Tweensy.to(myInstance1, {x:500, y:500});
Tweensy.to(myInstance2, {x:500, y:500});
Tweensy.stop(myInstance1);

 

myInstance1のxプロパティを停止。

Tweensy.stop(myInstance1, "x");

 

現在行われているトゥイーンのXプロパティをすべてを停止。

Tweensy.stop(null, "x");

 

myInstance1とmyInstance2のすべてのtweensを停止。

Tweensy.stop([myInstance1, myInstance2]);

 

myInstance1とmyInstance2のxプロパティを停止。

Tweensy.stop([myInstance1, myInstance2], "x");

 

トゥイーンの一時停止と再開

Tweensy.pause ( ) ;
Tweensy.resume( ） ;

 

時間ベースとフレームベース

デフォルトではTweensyは時間ベースのアニメーションを使用して、設定したトゥイーンを正確に終了させます。 Movieclipアニメーションは、 FlashベースのIDEで作成され、フレームベースでのTweensyも、このモードを使用するためのオプションを提供しています。 フレームアニメーションを使用するとき、1秒あたりの何フレーム動かすかをENTER_FRAMEに適用させることができます。もしFlaファイルのFPSが30の場合はSPFを1/30に設定します。

Tweensy.refreshType = Tweensy.FRAME;
Tweensy.secondsPerFrame = 1/30;

 

トゥイーンを更新

トゥイーン作動中には残っているアニメーション時間内にそこにシームレスに位置を更新することができます。

Tweensy.updateTo(myInstance, {x:250});

 

トゥイーンの繰り返し

トゥイーンはヨーヨー、ループおよびやり直しでのタイプをセットすることができます、1回のみ、有限のループ回数、無限ループもセットできます。アニメーションの繰り返しに関するより多くの情報はドキュメンテーションで見つけることができます。

以下はmyInstanceをXを現在の位置から500の位置にし、往復3回アニメーションを繰り返す例。

import com.flashdynamix.motion.;

var timeline:TweensyTimeline = Tweensy.to(myInstance, {x:500});
timeline.repeatType = Tweensy.YOYO;
timeline.repeats = 3;

 

他のことを知る

to,from,fromToで定義され、あなたがtweensアニメーションの間に変更できるパラメータを含むトゥイーンをTweensyTimelineの実例を基に説明します

 

タイムラインを使用する

to,from,fromTotweenが定義されるとき、それはTweensyTImelineのインスタンスを返すでしょう。TweensyTImelineは、to,from,fromToメソッドの中だけでなく、そうでていないtweensアニメーションudating中のパラメータを定義するプロパティを使用することができます。

import com.flashdynamix.motion.;

var timeline:TweensyTimeline = Tweensy.to(myInstance, {x:500}, 2.0);
timeline.duration = 3.5;

3.5秒後にmyInstanceのXの位置を現在の位置から500の位置に2秒かけて移動させる。

 

相対位置とランダムな範囲

to,fromオブジェクトのプロパティには、相対位置か範囲を指定した中でのランダムな位置を定義することが可能です。

{x:"500"}　現在のX位置に+500した位置を定義します。
{x:"-500"} 　現在のX位置に-500した位置を定義します。
{x:"250,500"} +250から＋500までの間でランダムな位置を定義します。

 

イーズ式の使用

ease equationsはA点からB点への移動のスタイルを変更します。
tweensyがサポートする全てのease equationsは
アドビを経由してfl.motion.easingをTweensyライブラリの一部として提供されています。
もしnullもしくはパラメータを入力していない場合、
デフォルトではease equationはQuintic.easeOutで提供されます。

import com.flashdynamix.motion.Tweensy;
import fl.motion.easing.Sine.easeOut;

Tweensy.to(myInstance, {x:500}, 2.0, Sine.easeOut);

myInstanceがSine.easeOutの方程式を使用して2秒かけてx座標500の位置に移動します。

 

イーズ式のための追加パラメータ

Back、Elasticのease equationsは追加のパラメータを定義できる特別なease equationsです。 TweensyTimelineは、あなたがクラスBackEaseParamsおよびElasticEaseParamsによってこれをコントロールするパラメーターを定義することを可能にします。

import com.flashdynamix.motion.;
import fl.motion.easing.Back.easeOut;
import com.flashdynamix.motion.easing.BackEaseParams;

var timeline:TweensyTimeline = Tweensy.to(myInstance, {x:500}, 2.0, Back.easeOut);
timeline.easeParams = new BackEaseParams(0.7);

myInstanceがBack.easeOutの方程式を使用して2秒かけてx座標500の位置に移動し、超過を0.7倍弱める。

 

トゥイーンの遅延

デフォルトでは設定がありませんが、すべてのトゥイーンで開始と終了を遅らせることができます。

import com.flashdynamix.motion.;

var timeline:TweensyTimeline = Tweensy.to(myInstance, {x:500}, 2.0, null, 1.0);
timeline.delayEnd = 1.5;

一秒後にmyInstanceのxを現在の位置から500まで移動させ、その後1.5秒たったら完了。

 

高度なトゥイーン

Actionscriptの中のあるオブジェクトの特性をトゥイーンすることはより複雑かもしれません。 これらのオブジェクトは数名にBitmapFilters 、 ColorTransforms 、MatricesとSoundTransformsを含んでいます。 Tweensyかかわらず、オブジェクトには、更新することを定義するために余分なパラメータを定義する必要があります。

 

myInstanceに2秒かけてドロップシャドウを適用させてblurXとblurYを10にする。

Tweensy.to(new DropShadowFilter(), {blurX:10, blurY:10}, 2.0, null, 0, myInstance);

 

myInstanceのマトリックスのtxとtyの特性、またmyInstanceの上にマトリックス変形を適用します。

var mtx:Matrix = myInstance.transform.matrix;
mtx.tx = 200;
mtx.ty = 200;
Tweensy.to(myInstance.transform.matrix, mtx, 2.0, null, 0, myInstance);

 

myInstanceのColorTransformをTweensのredOffsetプロパティと色に変換myInstanceに適用されます。

var ct:ColorTransform = myInstance.transform.colorTransform;
ct.redOffset = 80;
Tweensy.to(myInstance.transform.colorTransform, ct, 2.0, null, 0, myInstance);

 

SoundChannelのSoundTransformのボリューム特性、また音を適用する、myChannelの上に変形します。

var st:SoundTransform = myChannel.soundTransform;
st.volume = 0;
Tweensy.to(myChannel.soundTransform, st, 2.0, null, 0, myChannel);

トゥイーンのイベントの追加と削除

 

Tweensyイベント

onUpdate -Event.ENTER_FRAMEのレンダリングするごとに発生します。
onComplete -全てのアニメーションが終了後に発生します。

import com.flashdynamix.motion.;
Tweensy.to(myInstance, {x:500}, 2.0);
Tweensy.onComplete = allAnimationsComplete;

 

TweensyTimelineイベント

onUpdate -タイムラインの更新が行われるたびに発生します。
onComplete -全てのアニメーションが終了後に発生します。
onRepeat - タイムラインのアニメーションを繰り返すときに発生します。

import com.flashdynamix.motion.;

var timeline:TweensyTimeline = Tweensy.to(myInstance, {x:500}, 2.0);
timeline.onComplete = animationComplete;
timeline.onCompleteParams = myInstance;

 

onCompleteまたはonUpdateイベントを削除するには単にそれをnullに設定すればよい。

timeline.onComplete = null;

 

Tweensyは、それがあらかじめ定められたパラメーターのためにEventDispatcherを最初に使用するすべてのあくどさのないトゥイーンを連れ去る自己を考慮に入れることを可能にするとともにAdobeEventDispatcherではなくEventListenerを適用するこの方法を使用します、つまり。 （↑ちょっとうまく訳すことできてない。。）

import com.flashdynamix.motion.;

var timeline:TweensyTimeline = Tweensy.to(myInstance, {x:500}, 2.0);
timeline.onComplete = myInstance.parent.removeChild;
timeline.onCompleteParams = myInstance;

 

TweensyGroupを使用する

TweensyGroup tweeningの推奨実装され、 Tweensyのすべての機能（やそれ以上を提供しています）は、静的メソッドとプロパティではの機能を提供していません。 として、アニメーションのTweensyGroupのインスタンスに含まれる唯一のものは、アニメーションを制御の高いレベルを提供していますこのインスタンスによって定義されます。 このTweensyGroup停止、一時停止することができますし、唯一の効果は、このTweensyGroupインスタンスrefreshTypes特定の設定を意味します。

弱参照されているTweensyGroupの場合は、インスタンスを維持して処分するのは、もはや使用することが重要ですが参照されているとして注意ください。
（↑意味不明）

var tween:TweensyGroup = new TweensyGroup();
tween.to(myInstance, {x:500});

 

TweensyGroupを使用してその他の利点

TweenGroup以外のショートカットTweensyエンジンのコンセプトは、高度な機能の集合を含んでいます。これらのいくつかは含まれます：

  • matrixTo
  • colorTransformTo
  • soundTransformTo
  • filterTo
  • functionTo
  • slideTo
  • scaleTo

TweensyGroupを処分する

TweensGroupが構築されるとともに、それをやめる場合、クラスを処分することは重要です。

import com.flashdynamix.motion.;

var tween:TweensyGroup = new TweensyGroup();
tween.dispose(); tween = null;

 

TweenGroupとレイジーモード

Tweensyデフォルトで自動的にかかわらず、これはパフォーマンスを犠牲になるtweening紛争を解決します。
この機能は全体のパフォーマンスを向上させることができるのTweensyオフになっている。
そのため、オフ時には、開発者には、停止の方法で特定のインスタンスを停止するこのモードは怠惰tweensトゥイーン紛争解決とみなされます。
(↑翻訳うまくできず。。)

var tween:TweensyGroup = new TweensyGroup(false);

自動tweening紛争の解決を無効にします。

 

TweensyGroupと分かち合う目的

Tweensyがそのようである理由の一部、効率的なメモリはそれです、このオプションがあるデフォルトによって共同出資するオブジェクトを使用するオプションを持っています。これは、オブジェクト共同出資の使用が初心者開発者に適しないやや拡張機能であるからです。より経験を積んだ開発者のために、それがこの特徴を使用するために推奨されます。しかしそれ、そのTweensyGroupに注意するのに重要なes、TweensyTimeline、およびこれが持つかもしれない意味合いのプール実例。TweensyTimelineの実例が一定に言及される場合、これはあなたのコードに論理的問題を作成するかもしれません。これはTweensyTImelineの後、実例があなたのアニメーションに最初に使用されるからです、それは、別のもののために再び使用されてもよい。
(↑翻訳うまくできず。。)

var tween:TweensyGroup = new TweensyGroup(false, true);

TweensyがObjectプーリングを使用するのを可能にするでしょう。

 

トゥイーン運動ガイド

Tweensyには、モーショントゥイーンで使用されるために方向、軌道またはbezier経路を定義すると考慮するガイドと呼ばれるパッケージがあります。

 

方向tweensガイド

方向ガイドは方向と距離を持っています。Direction2Dクラスに対する立場をTweeningすることは、パスにおいては、アイテムがどこで最初に置かれるか定義します、パスは立場0および立場1の終わりにあります。

import com.flashdynamix.motion.;
import com.flashdynamix.motion.guides.Direction2D;

var tween:TweensyGroup = new TweensyGroup();
tween.to(new Direction2D(myInstance, 45, 100), {position:1});

myInstance を現在の角度から45度、現在の位置から100ピクセルの距離に移動する。

 

軌道tweensガイド

Orbit2Dクラス上の程度で角度をTweeningすることは、パスにおいては、アイテムがどこで最初に置かれるか定義します、パスは角度0にあります。

import com.flashdynamix.motion.;
import com.flashdynamix.motion.guides.Orbit2D;

var tween:TweensyGroup = new TweensyGroup();
tween.to(new Orbit2D(myInstance, 100, 100, 250, 250), {degree:360});

x/y中心点250からのx/y半径100上で360度myInstanceの周囲を軌道を描いて回る。

 

ベジエtweensガイド

bezierガイドは、bezierパスを定義するポイントのコレクションを持っています。Bezier2Dクラスに対する立場をTweeningすることは、パスにおいては、アイテムがどこで最初に置かれるか定義します、パスは立場0および立場1の終わりにあります。

import com.flashdynamix.motion.;
import com.flashdynamix.motion.guides.Bezier2D;

var tween:TweensyGroup = new TweensyGroup();
var bezier:Bezier2D = new Bezier2D(myInstance, true, false, false);
bezier.push(new Point(100, 100); bezier.push(new Point(200, 150);
bezier.push(new Point(300, 100); bezier.push(new Point(400, 300);
tween.to(bezier, {position:1});

開始ポジションから定義されたbezierパスに沿ってmyInstanceをアニメーション化します。

 

高度なMatrixおよびColorMatrixFilterトゥイーン

tweensyのパッケージでは、あなたは非常に簡単な方法で複雑なアニメーションを追加できるようにクラスが含まれています。 これらのトゥイーンは、登録ポイントのまわりのマトリックス変形を含みます。明るさ、コントラスト、ColorMatrixFilter効果、色としきいなども。

 

高度なMatrixトゥイーン

高度なMatrixトゥイーンは定義された登録ポイントのまわりのマトリックス変形を適用することができます。
これらの変形は回転、skewX、skewY、scaleX、scaleY、translationXおよびtranslationYを含んでいます。

import com.flashdynamix.motion.;
import com.flashdynamix.motion.extras.MatrixTransform;

var tween:TweensyGroup = new TweensyGroup();
var mtx:MatrixTransform = new MatrixTransform(myInstance);
mtx.registrationX = myInstance.x + myInstance.width/2;
mtx.registrationY = myInstance.y + myInstance.height/2;
tween.to(mtx, {degree:45});

 

ColorMatrixFilterトゥイーン

ColorMatrixFilterは明るさのような複雑な色変更を適用することができます。
差異(飽和)、色付けする、またしきい値。ColorMatrixクラスは、その後、ColorMatrixFilterの上にtweenedされる4x5配列マトリックスを作成するのを支援します。

import flash.filters.ColorMatrixFilter;
import com.flashdynamix.motion.;
import com.flashdynamix.motion.extras.ColorMatrix;

var tween:TweensyGroup = new TweensyGroup();
tween.to(new ColorMatrixFilter(), new ColorMatrix(0, 0, 3), 2, null, 0, myInstance);

単位行列からColorMatrixによって定義されたArrayマトリクスまでColorMatrixFilterをtweenして、ColorMatrixFilterをmyInstanceに適用する。

 

TweensySequenceを使用する

TweensySequenceは、一続きのトゥイーンが次々に生じることを可能にします。
TweensyGroupと同様に、 TweensySequenceを構築する必要があります。 一旦、シーケンスが作成されたならば、その後、いつでもシーケンスを始めるか、止めるか、休止するか、再開することができます。 同様にモードやり直しおよびヨーヨーによって繰り返してください。

import com.flashdynamix.motion.TweensySequence;

var sequence:TweensySequence = new TweensySequence();
sequence.push(myInstance1, {x:200, y:200}, 1);
sequence.push(myInstance1, {x:500, y:250}, 1);
sequence.push(myInstance1, {x:0, y:0}, 1);
sequence.start();

シーケンスに追加された位置の各々間に移動するために1秒を要するmyInstanceのTweenSequenceを作成します。

 

 

ふぅ～。。終了！！
おかげでなんとなく理解したようなかんじ！

今度は実際にやってみよー

関連する投稿

[tweensy]tweensyについてググる、tweensyについて知る

trick7さんのこの記事を見て、

tweenerよりも高性能で軽量なトゥイーンライブラリ「tweensy」が

最近リリースされたことを知り、

ちょっとググってみる。

見た関連記事

処理が軽量なことはTweenMaxとの比較で一目瞭然!!

これからはtweenerよりtweensyかなと思ったので、

まずはプロジェクトホームのwikiを和訳(google翻訳に頼りまくりなので参考程度に)しつつ、

tweensyについてまとめていきます。

まずはGettingStarted を基にtweensyについて紹介。

tweensyの種類

Tweensyを取得する方法

Tweensyの最新バージョンは以下アドレスよりダウンロードする。

プロジェクトホーム： http://code.google.com/p/tweensy/

SVN： http://tweensy.googlecode.com/svn/trunk/

Tweensyをダウンロードすると、フォルダ内に下記のTweensy製品を含みます。

  • zero
  • original
  • fx

あらかじめコンパイルされたSWCか、それぞれのこれらの製品フォルダーに含まれている

ActionscriptソースコードのどちらかでTweensyを使用できます。

次回はTweenOriginalのwikiを基に

tweenOriginalの使い方をまとめてみまーす。

関連する投稿

Home > Tags > tweensy

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

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

Return to page top