Home > Tags > actionscript

actionscript

[progression勉強]実制作でつまづいたとこをQ&A形式でまとめてみた

最近、仕事の案件でflash案件がきた（てかflashにした）ので、
初めてprogressionを使って制作してました。

まだprogressionでの制作方法やas3のことすら、熟知していないのでいろんなところで
つまづいきました。。

ちょっとしたとこでつまづいても解決法をみつけだすのに長時間悩んだりすることが結構あったので、
実制作でprogressionを使ってみて私が躓いたとこや疑問に思ったことと、ググったりして知った答えを
書きとめていたものを、 Q&A形式でまとめてみました！

Q.Castのコンストラクタからステージを参照できない

ステージリサイズで位置とかサイズとか可変させようと思ってコンストラクタで、
リサイズ時実行させる関数をstageにaddEventListenerさせようとしたらコンパイルエラー。

stageの参照は _onCastAddedの中なら可能です。
要は表示オブジェクトコンテナに追加されたタイミングではじめて参照出来るようになるってことですね。

よく考えたらわかることなのですが、なんでエラーが返ってくるのか理解できずに躓いてました。。。

PLAIN TEXT
Actionscript:
  1. protected override function _onCastAdded():void {
  2.             stage.addEventListener( Event.RESIZE, onResizeHandler);
  3.             onResizeHandler(null);
  4.             addCommand(
  5.                 // 任意のコマンドを記述してください。
  6.                 new Trace(stage.stageWidth);               
  7.             );
  8.         }

これでOK！

Q異なるシーン間で値の受け渡しがしたい！

progressionのget~系メソッドがいいらしい！
http://www.northprint.net/2009/03/progressionget.html

私は名前つけるのめんどくさかったのでgetSceneBySceneId使いました！
http://flabaka.com/blog/?p=577

たとえばIndexSceneの_testという値を参照する。

var a:IndexScene = IndexScene(getSceneBySceneId(new SceneId("/index")));
trace(a._test);

これは表示リストに追加されてからでないと無理なので、コンストラクタではなく、_onCastAddedの中でやること！
あとIndexSceneのインポートを忘れずに！

Q.progressionのrootはどうやって参照？

trick7さんの記事を参考に！
http://www.trick7.com/blog/2008/12/09-114334.php

Q.castButtonを追加したときも何か動かしたい！

castButton用castSpriteを作ってやる方法を参考にさせてもらいました！
http://narayama.heteml.jp/2008/09/castbuttoncastsprite.html

Q.あれ？onLoadとonInitの違いは何やったっけ？

これ、初歩的ですが、何度も何度もnorthprintさんのgihyoの記事に掲載されてたこの図で確認してます。。。

Q.tweeneerのコマンドはあるけど、tweensyのコマンドは用意されてないの？

コミッターの seyself さんが、 tweensy をコマンドとして使用できる DoTweensy コマンドを作成してくださっているそうです。
http://trac.progression.jp/browser/experiments/sayself/extensions/classes/com/seyself/extras/progression

Q.castButtonでsceneIdを指定してじゃなく次のシーンに飛ばすにはどうするの？

次のシーンのsceneIdを取得するには

progression.current.next.sceneId;

前のシーンのsceneIdを取得するには

progression.current.previous.sceneId;

ということで、やってみる。

IndexSceneで関数nextSceneId,prevSceneIdを用意しといて、
子シーンオブジェクトの_onInitとかで

var a:IndexScene = IndexScene(getSceneBySceneId(new SceneId("/index")));
a.nextSceneId=progression.current.next.sceneId;
a.prevSceneId=progression.current.previous.sceneId;

と書き換えておいて

その子シーンオブジェクトの中のCastBtn(_nextBtnと_prevBtn)のsceneIdを書き換えてやる。

var a:IndexScene = IndexScene(getSceneBySceneId(new SceneId("/index")));
_nextBtn.sceneId=a.nextSceneId;
_prevBtn.sceneId=a.prevSceneId;

これが一番良い方法かわからないですが、参考程度に。

Q.castButtonでhtmlページにリンクさせるにはどうするの？

castButtonのプロパティにhrefがあるから、以下のような記述をコンストラクタにする。

href="http://kanariia.com/blog/";

sceneId プロパティと href プロパティが両方とも設定されている場合には、href プロパティの設定が優先されるそうな。

あと、windowTargetプロパティも用意されてるので、以下のように使える。いやーさすが。

href="http://kanariia.com/blog/";
windowTarget="_blank";

Q.castImageLoaderで読み込んだ画像をスムージングしたい

ExImageLoaderのプロパティにsmoothingというのがあるので、
コンストラクタで

smoothing=true;

でOK。
castImageLoaderはExImageLoaderのサブクラスなので。

ちなみにリサイズの際、縦横比を維持したい場合は

ratio=true;

でOK。

Q.castButtonの_onCastRollOverと_onCastRollOutにDoTweenerを設定したが、超速でのせたりはずしたりするとエラーがかえってくる。

こんなエラーがよくでて困ったことありませんか。

[ERROR] <DoTweener : command_2031> コマンドで CommandTimeOutError エラーが発生。


原因はコマンドが実行中なのに同じインスタンスに他のコマンドが上書きされるからだと思われる。
実行中のコマンドを中断してやることが必要。

コマンドを中断するためにどうすればよいか、でみつけたのがinterrupt()メソッド。
これを使うためにはexecute()メソッドでコマンドを実行する必要があるらしい。

じゃあaddCommand使わないでやってみよーてことで、こんな感じ。


PLAIN TEXT
Actionscript:
  1. package myproject.btn {
  2.     import jp.progression.casts.*;
  3.     import jp.progression.commands.*;
  4.     import jp.progression.events.*;
  5.     import jp.progression.loader.*;
  6.     import jp.progression.*;
  7.     import jp.progression.scenes.*;
  8.    
  9.     /**
  10.      * ...
  11.      * @author kanariia
  12.      */
  13.     public class TestBtn extends CastButton {
  14.        
  15.         private var _rollOver:SerialList;
  16.         private var _rollOut:SerialList;
  17.        
  18.         /*======================================================================*//**
  19.          * コンストラクタ
  20.          */
  21.         public function TestBtn( initObject:Object = null ) {
  22.             super( initObject );
  23.         }   
  24.        
  25.         /*======================================================================*//**
  26.          * ユーザーが CastButton インスタンスにポインティングデバイスを合わせたときに送出されます。
  27.          * このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
  28.          */
  29.         protected override function _onCastRollOver():void {
  30.             if (_rollOut) {
  31.                 //_rollOutのコマンドをすべて解除する
  32.                 _rollOut.interrupt();
  33.             }
  34.            
  35.             _rollOver = new SerialList();
  36.             _rollOver.addCommand(
  37.             new DoTweener(this, { alpha:0.5, time:0.5, transition:"easeOutExpo" } )
  38.             );
  39.             //コマンド実行
  40.             _rollOver.execute();           
  41.            
  42.         }
  43.        
  44.         /*======================================================================*//**
  45.          * ユーザーが CastButton インスタンスからポインティングデバイスを離したときに送出されます。
  46.          * このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
  47.          */
  48.         protected override function _onCastRollOut():void {
  49.             if (_rollOver) {
  50.                 //_rollOverのコマンドをすべて解除する
  51.                 _rollOver.interrupt();
  52.             }
  53.            
  54.             _rollOut = new SerialList();
  55.             _rollOut.addCommand(
  56.             new DoTweener(this, { alpha:1, time:0.5, transition:"easeOutExpo" } )
  57.             );
  58.             //コマンド実行
  59.             _rollOut.execute();   
  60.         }
  61.     }
  62. }

スマートじゃないかもしれないけど、こうすればエラーはとまります！

Q.CastButtonの無効化はどうするの？

いつものようにenabled=false;にしても、無理だったので調べました。

ボタン有効・無効を設定する
buttonEnabledプロパティが用意されていたので、

buttonEnabled=false;

でいけるみたい！

Q.ページタイトルはどうやって変えるの？

http://blog.img8.com/archives/2008/11/004207.html

SceneObjectにはtitleというプロパティがあります。
prog.sync=true;じゃないと作動しないらしい。
あと、index.htmlのタイトルがIndexSceneにたどりつくまで
表示されるので、直しておくべし。

sceneObjectのコンストラクタとかに

title="テストサイト"

みたいな感じで書けばOK。

indexSceneでほかのシーンも作ってる場合は

aboutScene.title="about｜テストサイト";

て感じでOK。

IndexSceneで子・孫シーンをonLoadで一気に追加しておけば、
こんな設定も超簡単にすむｗ

ひとこと

自分用のメモみたいな感じなんで、きれいにまとまってるわけじゃないけど、
同じことで躓いてる人がこのエントリで救われるといいなー

関連する投稿

[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 > actionscript

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

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

Return to page top