イナヅマTVログ

2008.08.29
23:48
author: taikiken
0件のコメント

HydroTween.go colorプロパティtweenの仕様

HydroTween.go colorプロパティのtweenにバグ？ 
のエントリーの後、作者のdonovanさんに問い合わせてみたところ「そんなことないよ」とのお返事、ものすごく返事が早くてビックリ！しかも君のコードを見てあげるよとの親切な申し出、感謝！
色々試しているうちに、初めから色がついているものでRGBのRGのどちらかが255でないと何となくうまく行かないような気がしてきた。

インスタンスは白(0xFFFFFF)にし色はHydroTweenかHydroSequenceでつけると全てうまく行くことに気がつく。
バグではなくmatrixに由来する仕様なんだと思う。

でもでも、手作業でつける色と違ったりする色もある様子。HydroTweenが、と言うよりFlashの問題になるのかなぁ。。。

クリックすると色がtweenし最後に赤、真ん中と右端は最初の色が違うだけで同じtween。
[swfobj src=”http://www.inazumatv.com/contents/wp-content/uploads/2008/08/hydro-go-10d.swf” width=”550″ height=”200″ id=”ColorSequenceToRed” name=”ColorSequenceToRed” allowfullscreen=”false” required_player_version=”9.0.124″]

donovanさんからメール。
colorをtweenする時の輝度計算に問題があるようだ、
修正できるようにがんばってみるけど大変そうだなぁ、とのこと。

色変化にColorTransformでなくColorMatrixFilterを使っていることに原因があるのかも。
ColorMatrixFilterで色を変えるとは、ColorTransformの方が簡単そうなのに。

2008.08.28
14:58
author: taikiken
0件のコメント

HydroTween.go colorプロパティのtweenにバグ？

HydroTween.goのcolorプロパティtweenにはいくつか問題があるようだ。
–HydroTween 0.5.1 rev42 – Go Version: GoASAP 0.5.1c
rev42でバグフィックスされたとしているが期待通りに動作できないことを見つけた。

黒(0x000000)からのtweenができない。
異なるインスタンスの異なる色から同じ色へtweenしても同じ色に見えないことがある。
下記の例では二つとも0xFF0000へtween設定しているが同じ色にならない。

[swfobj src=”http://www.inazumatv.com/contents/wp-content/uploads/2008/08/hydro-go-10a.swf” width=”550″ height=”200″ id=”colorTweenBug” name=”colorTweenBug” align=”none” allowfullscreen=”false” required_player_version=”9.0.124″]

update:HydroTween, ColorMatrixFilterでcolorをtweenできる？（３）

2008.08.27
11:47
author: taikiken
0件のコメント

HydroTween.go, duration初期値

HydroTween.goの第三引数 duration。
tweenの経過時間（秒）をセットする。
引数を与えなかったりnullにするとorg.goasap.items.LinearGo.defaultDuration:1が使用される。

[swfobj src=”http://www.inazumatv.com/contents/wp-content/uploads/2008/08/hydro-go-9e.swf” width=”550″ height=”200″ id=”defaultDuration” name=”defaultDuration” allowfullscreen=”false” required_player_version=”9.0.124″]

HydroTween.go(sprite,{color:0xFF0000});
HydroTween.go(sprite2,{color:0xFF0000},0);

duration:0でも一瞬変更前の色が見えてしまうことがあるので、alpha=0にし色を付けた後にalpha=1へする。
セットアップに少し時間がかかってるように見える。

sprite2.alpha = 0;
HydroTween.go(sprite2,{color: 0xFF0000},0,0,null,function(){sprite2.alpha = 1});

update – 2008-12-01
まだ詳しく検証できているわけではないが・・・
複数インスタンスに duration:0 を使用すると、次のステップの tween が正しく動作できないことがある。
再現性が確認できていないが、Player に依存しているのではないかと思う。

フレームレート依存の場合は、少なくとも1回 ENTER_FRAME イベントを発生させると回避できる。

原因が分かるまで duration:0 の使用は控えることにする。

2008.08.26
09:38
author: taikiken
0件のコメント

HydroTween.go, GoEvent.UPDATE時のcallback+引数

HydroTween.goの第七引数へコールバック関数設定。
第七引数はGoEvent.UPDATEで実行される。
tween実行中に実行する関数を指定する。

import com.hydrotik.go.*;
import fl.motion.easing.*;
 
HydroTween.VERBOSE = false;
 
var sprite:Sprite = new Sprite();
var graphic:Graphics = sprite.graphics;
graphic.beginFill(0x00FF00);
graphic.drawRect(-30,-30,60,60);
graphic.endFill();
addChild(sprite);
sprite.x = stage.stageWidth/2
sprite.y = stage.stageHeight/2
 
HydroTween.go(sprite,{width:550},3,0,Bounce.easeOut,null,updateHandler);
 
function updateHandler(){
	// do anything
}

コールバック関数への引数は第九引数に配列で設定。

import com.hydrotik.go.*;
import fl.motion.easing.*;
 
HydroTween.VERBOSE = false;
 
var sprite:Sprite = new Sprite();
var graphic:Graphics = sprite.graphics;
graphic.beginFill(0x00FF00);
graphic.drawRect(-30,-30,60,60);
graphic.endFill();
addChild(sprite);
sprite.x = stage.stageWidth/2
sprite.y = stage.stageHeight/2
 
HydroTween.go(sprite,{width:550},3,0,Bounce.easeOut,null,updateHandler,null,["argument1"]);
 
function updateHandler(...args){
	// do anything
}

2008.08.25
04:39
author: taikiken
0件のコメント

HydroTween.go, GoEvent.COMPLETEでcallback+引数

HydroTween.goのtween完了時のコールバック関数へ引数を渡す。
第八引数へ配列で引数をセット。
tween（モーション）終了時に実行する関数へ任意の引数を渡すことができる。
配列にする必要があるので受け取る関数側はちょっと工夫をしないといけない。

import com.hydrotik.go.*;
import fl.motion.easing.*;
 
HydroTween.VERBOSE = false;
 
var sprite:Sprite = new Sprite();
var graphic:Graphics = sprite.graphics;
graphic.beginFill(0x00FF00);
graphic.drawRect(-30,-30,60,60);
graphic.endFill();
addChild(sprite);
sprite.x = stage.stageWidth/2
sprite.y = stage.stageHeight/2
 
HydroTween.go(sprite,{width:550},3,0,Bounce.easeOut,callBackHandler,null,["argument1"]);
 
function callBackHandler(...args){
	// do anything
}

2008.08.24
04:34
author: taikiken
0件のコメント

HydroTween.go, GoEvent.COMPLETEでcallback

HydroTween.goのtween完了時のコールバック関数設定。
第六引数へ関数セット。
これでtween（モーション）終了時にセットした関数を実行してくれる。お手軽。

import com.hydrotik.go.*;
import fl.motion.easing.*;
 
HydroTween.VERBOSE = false;
 
var sprite:Sprite = new Sprite();
var graphic:Graphics = sprite.graphics;
graphic.beginFill(0x00FF00);
graphic.drawRect(-30,-30,60,60);
graphic.endFill();
addChild(sprite);
sprite.x = stage.stageWidth/2
sprite.y = stage.stageHeight/2
 
HydroTween.go(sprite,{width:550},3,0,Bounce.easeOut,callBackHandler);
 
function callBackHandler(){
	// do anything
}

2008.08.23
02:29
author: taikiken
0件のコメント

HydroTween.go 複数プロパティをtween

HydroTween.goの第二引数:Objectへ複数のプロパティを指定することで同時にtweenさせることができる。
サンプルを作り試してみた。

[swfobj src=”http://www.inazumatv.com/contents/wp-content/uploads/2008/08/hydro-go-4-1.swf” alt=”HydroTween.go Sample, do tween to several properties.” width=”550″ height=”400″ id=”hydro-go-4-1″ name=”hydro_go_4_1″ class=”flash-sample-container” allowfullscreen=”false” required_player_version=”9.0.115″]

code

import com.hydrotik.go.*;
import fl.motion.easing.*;
 
HydroTween.VERBOSE = false;
 
var sprite:Sprite = new Sprite();
var graphic:Graphics = sprite.graphics;
graphic.beginFill(0x00FF00);
graphic.drawRect(-30,-30,60,60);
graphic.endFill();
addChild(sprite);
sprite.x = stage.stageWidth/2
sprite.y = stage.stageHeight/2
 
HydroTween.go(sprite,{width:550,color:0x0000FF,scaleY:0.1},3,0,Bounce.easeOut);

2008.08.22
01:36
author: taikiken
0件のコメント

HydroTween.go, propsTo:Object=null tween可能なプロパティ

HydroTween, HydroSequenceでtween可能なプロパティリスト。
ビルトインプロパティはそのまま使用、Filterなどはカスタムプロパティを使う。
tween可能なプロパティ一覧をソースから作ってみた。

HydroTween.go(target:Object, propsTo:Object=null, duration:Number=NaN, delay:Number=NaN, easing:Function=null, closure:Function=null, update:Function=null, closureArgs:Array=null, updateArgs:Array=null, extraEasingParams:Array=null, repeater:Object=null, useRelative:Boolean=false, useRounding:Boolean=false, pulseInterval:Number=-1):IPlayable

HydroTween.goの第二引数(propsTo:Object=null)。

{プロパティ:最終値,…..}
mx.transitions.Tweenと違い初期値を与えなくていいのが便利。

tween可能なプロパティ。
なぜかtintはコメントにされている。
tintはバグのため現在使用できないようになっている、Fixに期待。
addPropertyメソッドでリストにないものも追加可能な様子（調べてみなくちゃ）。
続きを読む →

2008.08.21
13:15
author: taikiken
0件のコメント

HydroTween.go, 自由に使える強力関数

HydroTween.goを使うと自動でtweenを開始する。
staticなのでインスタンスを作る必要もなく、ちょこっとモーションなんかに便利そう。

複数ターゲットを指定できたり、tweenさせるプロパティを複数同時に指定できたり…
かなり便利、その副作用は引数の指定方法が多岐にわたるのを理解するのに時間がかかる、ぐらいカナ。

HydroTween.go(target:Object, propsTo:Object=null, duration:Number=NaN, delay:Number=NaN, easing:Function=null, closure:Function=null, update:Function=null, closureArgs:Array=null, updateArgs:Array=null, extraEasingParams:Array=null, repeater:Object=null, useRelative:Boolean=false, useRounding:Boolean=false, pulseInterval:Number=-1):IPlayable

HydroTween.goの第一引数(target:Object)。

  • DisplayObject
  • [DisplayObject,…….]

単独または配列が使用できる。

import com.hydrotik.go.*;
import fl.motion.easing.*;
 
HydroTween.VERBOSE = false;
for (var i=0; i<=400; i++) {
	var sprite:Sprite = new Sprite();
	var graphic:Graphics = sprite.graphics;
	graphic.beginFill(0xffffff*Math.random());
	graphic.drawRect(0,i,1,1);
	graphic.endFill();
	addChild(sprite);
	HydroTween.go(sprite,{width:550},5,0,Bounce.easeOut);
}
import com.hydrotik.go.*;
import fl.motion.easing.*;
 
HydroTween.VERBOSE = false;
 
var group:Array = [];
for (var i=0; i<=400; i++) {
	var sprite:Sprite = new Sprite();
	var graphic:Graphics = sprite.graphics;
	graphic.beginFill(0xffffff*Math.random());
	graphic.drawRect(0,i,1,1);
	graphic.endFill();
	group.push(addChild(sprite));
}
HydroTween.go(group,{width:550},5,0,Bounce.easeOut);

2008.08.20
01:10
author: taikiken
0件のコメント

HydroTweenを使ってらくちんモーション設計

Acsionscript3モーションライブラリ。
HydroTweenはGoASAPの拡張ライブラリ、単体では使用できない。
使用にはHydroTweenとGoASAPが必要。

DisplayObjectのx,y,roatation…etcプロパティだけでなく、transform.matrix,transform.ColorTransform、フィルター関連の設定値やPapervisonプロパティなどなどもモーション可能な優れもの。

連続してモーションを行う「ステップ」機能。
同時に複数のインスタンスをモーションさせる「グループ」l機能。
モーションを何回実行させるか設定できる「サイクル」機能。
モーション完了を知らせる「コールバック」機能。

便利な機能が多数。

他にも同じようなライブラリがあるのでどれを使うかが悩みどころだけど、ベンチマークを見る限りは最強のライブラリと言えるのかなと・・・

hydrotik
goplayground
GoASAP.org
GoASAP Repository