100以上の新機能！Tween24 バージョン2.0 リリース

2012.09.24

Tween24 2.0

先日 wonderfl が対応したばかりの Tween24 ですが、バージョン2.0をリリースしました。
今回のアップデートでは100を超える新機能が追加にされ、パフォーマンスやメモリ消費も改善しています。

前のバージョンからの変更点はこの記事の下の方にまとめていますが、ほとんど変更はないので、ほぼほぼ今までと同じように使えると思います。

では新機能の中で、主なものをいくつか紹介します。

(2012.10.04 追記)
FlashDaily さんのお陰で海外からのアクセスが増えてきたので、勢いで Twitter アカウント作ってみました。
Please follow me!!
@tween24_jp

基準点を変更してのトゥイーン

以前の記事でも紹介しましたが、DisplayObject の基準点を擬似的に変更し、移動や回転、拡大縮小のトゥイーンが可能になりました。

基準点は Align24 クラスで指定しますが、イージングと同じように Tween24.aligin からでも指定できます。また座標やスケール値でも設定が可能です。

追加プロパティメソッド

align(), alignByScale(), alignByScaleX(), alignByScaleY(), alignByScaleXY(), alignX(), alignY(), alignXY()

// 基準点を変更しながら回転とスケールをトゥイーン
Tween24.loop(0,
  Tween24.tween(target, 0.3).$$rotation(110)
                            .scale(3.0).align(Align24.BOTTOM_RIGHT),
  Tween24.tween(target, 0.3).$$rotation(110)
                            .scale(1.0).align(Align24.TOP_RIGHT),
  Tween24.tween(target, 0.3).$$rotation(110)
                            .scale(3.0).align(Align24.TOP_LEFT),
  Tween24.tween(target, 0.3).$$rotation(110)
                            .scale(1.0).align(Align24.BOTTOM_LEFT)
).play();

DEMO

プラグイン機能

これも以前の記事でも紹介しましたが、プラグイン機能により従来の Tween24 にサポートされていなかったプロパティの補完と操作が可能になりました。

標準で搭載されているプラグインは、Matrix、Sound、SoundMixier、Text、MovieClipのタイムライン、おまけでソーシャル向けのプラグインをサポートしています。標準でサポートされているプラグインは Tween24.plugin 経由からでも使用できます。

追加プラグインクラス

MatrixPlugin, SocialPlugin, SoundMixerPlugin, SoundPlugin, TextPlugin, TimelinePlugin

// Matrix で斜傾とスケールをトゥイーン（Pluginクラスを使う）
Tween24.loop(0,
  MatrixPlugin.tween(target, 0.5).skewX(-0.6).d(0),
  MatrixPlugin.tween(target, 0.5).skewX(0).d(-1),
  MatrixPlugin.tween(target, 0.5).skewX(0.6).d(0),
  MatrixPlugin.tween(target, 0.5).skewX(0).d(1)
).play();

DEMO

// サウンドをを登録（ID、Soundインスタンス、デフォルトのボリューム）
//（Tween24.plugin 経由で使う）
Tween24.plugin.sound.addSound("bgm",
                     new Sound(new URLRequest("sound.mp3")), 0.5);

// 登録したサウンドを再生し、フェードインとフェードアウトを繰り返す
Tween24.serial(
  Tween24.plugin.sound.playSound("bgm"),
  Tween24.loop(0,
    Tween24.wait(1),
    Tween24.plugin.sound.tween("bgm", 4).volume(0),
    Tween24.wait(1),
    Tween24.plugin.sound.tween("bgm", 4).volume(1)
  )
).play();

DEMO

座標にランダム性を持たせるトゥイーン

座標をトゥイーンさせる場合に、ランダム性を付加するプロパティが追加されました。
ランダム値の最小値と最大値を指定し、その範囲内のランダムな値が元の目標値に加算されます。

プロパティメソッド

randomX(), randomY(), randomZ(), randomXY(), randomXYZ()

// ランダムな座標にトゥイーン
Tween24.serial(
  Tween24.prop(b).xy(232, 232).scale(0),
  Tween24.tween(b, 0.6).$$xy(0, 0).randomXY(-232, 232).scale(1).andRemoveChild()
).play();

DEMO

別のオブジェクトを基準にしたローカル座標トゥイーン

座標をトゥイーンさせる場合に、別のオブジェクトを基準にした座標を指定できる機能が追加されました。

プロパティメソッド

localX(), localY(), localXY()

// それぞれを入れ子にする
addChild(box1);
box1.addChild(box2);
box2.addChild(box3);

// それぞれのboxに重なるようにトゥイーン
Tween24.loop(0,
  Tween24.tween(target, 0.5).localXY(box1, 0, 0),
  Tween24.tween(target, 0.5).localXY(box2, 0, 0),
  Tween24.tween(target, 0.5).localXY(box3, 0, 0)
).play();

DEMO

速度トゥイーン

通常のトゥイーンは時間を指定しますが、代わりに速度を指定するトゥイーンが追加されました。距離が短い場合はトゥイーン時間も短く、距離が長い場合はそれに合わせてトゥイーン時間も長くなります。

// ランダムな場所に等速トゥイーンを繰り返す
//（速度は1秒で移動するpx量を指定します）
Tween24.loop(0,
  Tween24.tweenVelocity(target, 400).xy(0, 0).randomXY(0, 400)
).play();

DEMO

トゥイーンのマニュアル操作

トゥイーンを再生する際に play() の代わりに manualPlay() を実行することで、トゥイーンをマニュアル制御できるようになります。通常なら Tween24 内部の EnterFrame で自動的にアップデートされますが、代わりに manualUpdate() を呼び出すことで任意のタイミングでアップデートできます。

例えば Timer を使って manualUpdate() を実行することで、任意のトゥイーンだけFPSを変更して再生するなどの制御が可能になります。

// 通常のトゥイーン
Tween24.loop(0,
  Tween24.tween(target1, 1).$$rotation(90)
).play();

// マニュアル操作のトゥイーン	
var tween:Tween24 = Tween24.loop(0,
  Tween24.tween(target2, 1).$$rotation(90)
);
tween.manualPlay();

// タイマーを使ってFPS10でアップデートする
var timer:Timer = new Timer(200);
timer.addEventListener(TimerEvent.TIMER, function():void {
  tween.manualUpdate();
});
timer.start();

DEMO

フレーム駆動のトゥイーン

time（時間）の代わりに count（アップデート回数）を指定するトゥイーンが追加されました。上記の通り、内部では EnterFrame が呼ばれているため、例えば10カウントと指定すると10フレームでトゥイーンします。

フレーム駆動にすることで、FPSに左右されず毎回同じアップデート回数でトゥイーンが再生されます。逆にトゥイーンの再生時間はFPSに依存します。

また、manualPlay() を併用することでより高度な制御が可能になります。

追加メソッド

Tween24.countTween(), countFunc(), waitCount()

// 通常のトゥイーン
Tween24.loop(0,
  Tween24.tween(target1, 1).$$rotation(90)
).play();

// カウント式のトゥイーン
Tween24.loop(0,
  Tween24.tweenCount(target2, 60).$$rotation(90)
).play();

DEMO

デバッグ向けのスピードコントローラー

トゥイーンのスピードをコントロールするデバッグ向けのクラスが追加されました。
デフォルトだと0.5～24倍速のパネルが設定されており、クリックでスピードを変更でき、自動的にキーボードの1～9キーにも割り当てられています。
またコンストラクタの引数でパネルは変更でき、任意のキーボードキーに追加する事も可能です。

// コントローラーを追加し、スペースキーに100倍速を設定
addChild(new Tween24Controller(10, 10).addKey(100, Keyboard.SPACE));

DEMO

Tween24 に追加された新プロパティ

座標/変形系

$width(), $height(), $$width(), $$height()
scaleXY(), $scaleXY(), $$scaleXY(), scaleXYZ(), $scaleXYZ(), $$scaleXYZ()
rotationXY(), $rotationXY(), $$rotationXY(), rotationXYZ(), $rotationXYZ(), $$rotationXYZ()
$$bezier()
globalXY()
localX(), localY(), localXY()

フィルタ系

blurXY()
glowBlurXY()
dropShadowBlurXY(), dropShadowInner(), dropShadowKnockout()
glowInner(), glowKnockout()
colorReversal()
sharp()

その他

align(), alignX(), alignY(), alignXY(), alignByScaleX(), alignByScaleY(), alignByScaleXY(), alignByScale()
mouseEnabled(), mouseChildren(), buttonEnabled()
manualPlay(), manualUpdate()
onSkip(), skip()

Tween24 に追加された新メソッド

トゥイーン系

Tween24.random()
Tween24.countFunc(), Tween24.countTween(), Tween24.waitCount()
Tween24.tweenVelocity()

トゥイーン操作系

Tween24.skipById(), Tween24.skipByGroup(), Tween24.skipAllTweens()
Tween24.playByArray(), Tween24.pauseByArray(), Tween24.skipByArray(), Tween24.stopByArray()
Tween24.pauseAllTweens(), Tween24.resumeAllTweens()
Tween24.getTweenArrayById(), Tween24.getTweenArrayByGroup(), Tween24.getPlayingTweenArrayByTarget(), Tween24.getPausingTweenArrayByTarget()

その他

Tween24.removeChildByName(), Tween24.removeChildAt()
Tween24.blendMode(), Tween24.buttonMode()
Tween24.setGlobalTimeScaleById(), Tween24.setGlobalTimeScaleByGroup(), Tween24.setGlobalTimeScaleByArray()

Tween24 に追加された新プラグイン

MatrixPlugin
SocialPlugin
SoundMixerPlugin
SoundPlugin
TextPlugin
TimelinePlugin

Tween24 の変更箇所

プロパティ

andRemove() の名称を andRemoveChild() に変更しました。
fadeIn(), fadeOut() の引数に、トゥイーン中にブレンドモードがレイヤーに設定されるオプションを追加しました。
play() の引数にデバッグログを表示するオプションを追加しました。

メソッド

Tween24Event クラスのパッケージを変更しました。
Tween24.skip() の名称を Tween24.jump() に変更しました。
Tween24.setTimeScale() の名称を changeGlobalTimeScale() に変更しました。
Tween24.getTweensByGroup() の名称を getTweenArrayByGroup() に変更しました。
Tween24.addChildFront() の引数から container の指定を削除しました。
Tween24.addChildBack () の引数から container の指定を削除しました。
Tween24.parallel() のコンプリートするタイミングが、一番時間指定の長いトゥイーンが完了したタイミングから、全ての子の tween が終わるタイミングに変更しました。
Tween24.serial() / parallel() にトゥイーンの配列を渡すと、それぞれのトゥイーンとして展開されるよう変更しました。
Tween24.setFocus() TextField を指定した場合、フォーカスした際にキャレットが一番最後に設定されるよう変更しました。
Tween24.gotoRandomAndPlay() / gotoRandomAndStop() は TimelinePlugin に移行しました。
再生中にトゥイーンの timeScale を変更した場合、即時 timeScale が反映されるよう変更しました。

EventTween24 に追加された新メソッド

EventTween24.onAddedToStage(), EventTween24.onRemoveFromStage()
EventTweeen.syncAddChild(), EventTweeen.syncAddChild()
EventTweeen.setMouseEventTweenType()

EventTween24 の変更箇所

EventTween24.stopPairEnabled() / serialPlayPairEnabled() を廃止しました。（EventTweeen.setMouseEventTweenType() に統合）

Download

http://code.google.com/p/tween24/downloads/list

ASDoc

http://package.a24.cat/libs/tween24/asdoc/2.0/

There is 1 comment in this article:

10/4/2012SAbi Sin says:

rAdical -|m|
lOve iT

package a24