wonderfl

LocalConnectionいじくり回せばできるんじゃね？ってことで作ってみた。

仕組みは簡単。
TextFieldだけのswfを別ウインドウで開いて
LocalConnectionでテキストを送信。
別ウインドウのswfの方で表示。

コネクションIDをurlに付けてjsで受け渡しししたり、
navigateToURLでウインドウ開くまでタイムラブがあったりするので
いろいろごにょごにょしてたりするけど。

ただ、safariだと

navigateToURL(new URLRequest(_url), "newwin");

で一度開いたウインドウがリロードされずに新しくウインドウが開く。激しくウザイ。

まぁ、おとなしくdebag playerつかえってことですかね。

クライアント側のソースもwonderflにのせときます。

オンラインtraceのclient側 – wonderfl build flash online

ブラウザ上でもしくはFlashIDE以外でtraceするのは
FlashTracerを導入したり、Terminalを利用する方法がある。

でもどちらもデバックプレーヤーを入れなければいけなかったり色々面倒。

で、ExternalInterfaceを利用し直接ブラウザ上にテキストを表示するようにしてみた。

この上に表示されているのがそれ。
ブログに掲載する関係上、ページ内部に入れ込んでるがフローティングにすればそれなりに便利。

今のところStringしか、サポートしてないけど
そのうちtrace同等の機能を持たせる様にしたい。
でも肝心のtraceのコードがわかんね。

ソースはwonderflで。

ちなみにwonderfl上ではallowScriptAccessの影響でか、全く動作しません。残念。

BeTweenAS3ではeasingのBackとElasticについて
それぞれイージングの調節が出来るようになっている。

Backの場合、以下のプロパティが用意さている。

Back.easeInWith(s:Number = 1.70158)
Back.easeOutWith(s:Number = 1.70158)
Back.easeInOutWith(s:Number = 1.70158)
Back.easeOutInWith(s:Number = 1.70158)

例えば

BetweenAS3.tween(box, {x:400},  null, 10, Back.easeOutWith(3.5));

て感じで指定するとBackの振れ幅が大きくなる。
デフォルト値は1.70158。

Elasticの場合も同様。ただしこちらは引数が2つ

Elastic.easeInWith(a:Number = 0, p:Number = 0)
Elastic.easeOutWith(a:Number = 0, p:Number = 0)
Elastic.easeInOutWith(a:Number = 0, p:Number = 0)
Elastic.easeOutInWith(a:Number = 0, p:Number = 0)

aとpは amplitudeとperiodかな。
http://blog.nipx.jp/2008/04/elastic-transition-amplitude-p/

ちなみにTweenerでも同様の調整が出来るそうで。
http://saqoosha.net/2008/02/19/641/

ボタンのhitArea（座布団）として透明のオブジェクトを使う場合、
alpha=0のobjectを使った方が良いのか、
それともblendModeの方が良いのか気になったので検証してみた。
ついでにSimpleButtonも。

alpha版、blendMode版、SimpleButton版のどれで
見た目が変わらない（背景に影響を与えない）状態で
5×5pixelのボタンを一面に敷き詰めた。
約8500個。

思った以上に差は出てない。
強いていえばSimpleButtonが若干FPS落ちるくらい？
うーん・・・何とも微妙な結果に。

BeTweenAS3を使ったチョー簡単モーションタイポ。

MovieClipに対して名前付けたり、それをArray化したりするのがかなり面倒で
複数行のモーションタイポはあんまり使っていなかった。
でもBeTweenAS3のおかげで簡単にできる方法を見つけたので掲載。

• 空のMovieClip内にテキストを配置。
• 修正 > 分解
• 全部のオブジェクトが選択された状態で右クリック > レイヤーに配分
• 全部のレイヤーが選択された状態でタイムラインを右クリック > モーショントゥイーンを作成
• 念のためもう一回右クリック > トゥイーンを削除
• このMovieClipに基本クラスで以下の様な外部クラスを指定。

MovieClipに対して名前を付けたりする手間が無く、かなりの手数が省略できる。

package{
	import flash.display.Sprite;
	import flash.utils.describeType;
	import org.libspark.betweenas3.BetweenAS3;
	import org.libspark.betweenas3.easing.*;
	import org.libspark.betweenas3.tweens.ITween;
	import org.libspark.betweenas3.tweens.IObjectTween;
	import org.libspark.betweenas3.events.TweenEvent;
	public class TextMotion extends Sprite {
		public var TweenList:Array=[]
		public var i:uint=0;;
		public var allTween:ITween;
		public function TextMotion() {
			while(i!=numChildren){
				switch (String(describeType(getChildAt(i)).@name)) {
					case "flash.display::Shape":
					var obj = getChildAt(i);
					obj.alpha=0;
					var _t:ITween =  BetweenAS3.parallel(
						BetweenAS3.tween(obj, {x:obj.x,y:obj.y},  {x:obj.x-50,y:obj.y-50}, 0.5, Back.easeOut),
						BetweenAS3.tween(obj, {alpha:1},  {alpha:0}, 0.5, Sine.easeOut)
					);
					TweenList.push(BetweenAS3.delay(_t,i*.1));
					break;
					default:
					break;
				}
				i++;
			}
			allTween = BetweenAS3.parallelTweens( TweenList );
			allTween.play();
		}
	}
}

describeTypeでflash.display::Shapeだけを引き抜く様にしてるが、
@baseでクラスを指定したり、いろいろ応用可能。
トゥイーン n のグラフィックシンボルはフォルダに入れないとライブラリがカオスになる。

このMCをメインタイムラインに配置して、メインタイムラインをstop()
onCompleateでメインタイムラインを再生とかも簡単。

allTween.onComplete = _onComplete
allTween.onCompleteParams = [this]
_onComplete=function(d){
	d.parent.nextFrame();
}

こんな感じ。

すげーBeTweenAS3。
BeTweenAS3ヤバイ！

ちなみにscaleXとscaleYを変更しようとするとちょっと挙動が怪しい。

blendMode=”layer”ではまった。

表示オブジェクトに対しblendMode=”layer”とすれば表示オブジェクト内の透明度がグループされる。
はずなのだが、どうやらcacheAsBitmap=true,
「もしくはランタイムビットマップキャッシュを使用する」にチェックが入っている場合、表示オブジェクト内の透明度がグループ化されない。

どういう事かというと、

全て赤のシェイプの上に白のシェイプを重ねている。

一番上が普通のアルファトゥイーン。
アルファの途中段階でピンクが表示される。
2番目がblendMode=”layer”。
アルファの途中段階はグレーになる。
3番目がcacheAsBitmap=true。
アルファの途中段階でピンクが表示される。
ここでちょっとあれ？と思う。はず。
4番目がblendMode=”layer”とcacheAsBitmap=true。
アルファの途中段階はグレーになると思うがなぜかでピンクが表示される。

内部的な処理については下記の記事で詳しく解説されている。
cacheAsBitmapの法則

これバグじゃね？とか思いつつ
そもそもcacheAsBitmapとblendModeを同時に使う状態がおかしいのかもしれない自分の実装の甘さを嘆くことにする。