[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される4×5配列マトリックスを作成するのを支援します。

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]いろいろ試してみる：TweensyGroupで特殊プロパティをトゥイーン (1)
• [tweensy]いろいろ試してみる：onComplete、YOYO、TweensySquence (3)
• [tweensy]tweensyについてググる、tweensyについて知る (3)
• [progression勉強]実制作でつまづいたとこをQ&A形式でまとめてみた (1)
• [Flash Lite 1.1]制作前に知っておきたいことをQ&A形式でまとめてみた (0)