Flash Archive

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

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

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

ただ、safariだと

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

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

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

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

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

備忘録がてら。

Windowでアンインストール実行後、古いバージョンのFlash Playerをインストールしようとすると以下の警告が出てインストールできない。

「インストールしようとしているバージョンの Adobe Flash Player は、最新バージョンではありません。http://www.adobe.com/go/getflashplayer にアクセスして、安全性が高い最新バージョンを入手してください。」

回避方法はAdobeのサイトに掲載されている。

Flash Player インストール時におけるバージョンのセキュリティ制限
http://kb2.adobe.com/jp/cps/233/233087.html

以下、その手順。

1.アンインストーラーのダウンロード
Adobe Flash Player アンインストーラー
http://kb2.adobe.com/jp/cps/230/230810.html

2.コマンドプロンプトの起動
Windows Vista
[スタート] メニューの [検索の開始] テキストボックスに「cmd」と入力し、Enter キーを押します。
Windows XP
a. [スタート] メニューから [ファイル名を指定して実行] を選択します。
b. [名前] テキストボックスに「cmd」と入力して Enter キーを押します。

3.デスクトップに移動

cd デスクトップ

3.uninstall_flash_player.exeの実行

uninstall_flash_player.exe /clean

4.任意のバージョンの Flash Player をインストール
テスト用のアーカイブ版 Flash Player の提供について
http://kb2.adobe.com/jp/cps/228/228683.html

特定の環境下でflashが正常に表示されない現象に遭遇。

イロイロしらべた結果、
どうもEvent.COMPLETEとキャッシュっぽい。

参考
LoaderInfoでキャッシュがある時の動作について

※ちなみに上記記事にはifの分岐に誤りがあって正しくは

if(info.bytesLoaded == info.bytesTotal){
	init();
}else{
	info.addEventListener(Event.COMPLETE,onCompleteFunc);
}

バグが発生する条件は確認できた限りで

• IE7/6
• Flash Player9.045
• Objectタグを直接htmlに記述
• IEの設定でキャッシュを有効にする

以上の組み合わせの時。

SwfObjectを使えば発生しないのでオーサリング/テスト時に全く気付かなかった罠。

自作で便利だったので公開。
タイムラインでアニメーションするMovieClipを再生。
停止を待つThread（そうめん）用のスクリプト。

package {
    import flash.display.DisplayObject;
    import flash.events.Event;

    import org.libspark.thread.IMonitor;
    import org.libspark.thread.Thread;

    public class TimelineThread extends Thread {

        private var _mc:DisplayObject;
        private var _frame:*;

        public function TimelineThread(mc:DisplayObject,frame:*=1) {
            _mc = mc;
            _frame = frame;
        }

        public function cancel():void {
            interrupt();
        }

        override protected function run():void {
            interrupted(interruptedHandler);
            _mc.gotoAndPlay(_flame);
            event(_mc, Event.COMPLETE, completeHandler);
        }

        private function completeHandler(e:Event = null):void {

        }

        private function interruptedHandler():void {
            _mc.stop();
        }
    }
}

親のThread内で

var _timelineThread:TimelineThread=new TimelineThread(button_mc, 2)
_timelineThread.start();
_timelineThread.join();

としてムービークリップへの参照と、再生したいフレーム（数値 or フレームラベル）を渡す。

ムービークリップ内で次の処理に移行したいフレームにEvent.COMPLETEを記述。

this.stop();
dispatchEvent(new Event(Event.COMPLETE));

アニメーションを止める必要が無ければthis.stop();はいらない。

ブラウザ上でもしくは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を変更しようとするとちょっと挙動が怪しい。

PSDのデザインデータをデザイナーさんから頂き、
Flash化した際にPhotoShop上のデザインとFlashとで色が違うと言う事がたまにある。

Bitmapのデータだけでなく、色を16進数で指定しても微妙に色が違う。
こうなるとWeb用に保存しても、FireWorksで開いてもPhotoShopの色は再現されない。

色々と試して何とか回避方法が見つかったのでメモ。
バットノウハウかもしれないし、Mac、シネマディスプレイ、CS3の方法しかしらない。
できればデザイナーさんと一緒に見て色の整合性を取るのが安全だと思う。

1. ビュー > 校正設定 > モニタRGB
2. 編集 > プロファイルの変換 > 変換後のカラースペース　にCinemaを選択（多分、使っているモニタのプロファイルを選択すれば良いのだと思う）
3. 編集 > プロファイルの指定 > 作業用RGB：sRGB IEC61966-2.1 にチェックしてOK
4. ビュー > 校正設定 > モニタRGB

以上。

以下にPhotoShopのキャプチャとそのまま書き出したgif、上記の手順を加えた後書き出したgifを掲載する。
見比べてみると後者の方がPhotoShopの状態に近い。

PhotoShopのスクリーンショット

そのままgifで書き出し

上の手順を試してからgifで書き出し

blendMode=”layer”ではまった。

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

どういう事かというと、

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

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

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

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