結果は by.blooddy.crypto.image.PNG24Encoder が圧倒的に最速！！ エントリ内からのリンクが切れてるので、使ってみたい方は BlooDHounD’s workspace の blooddy_crypto.swc からダウンロードして下さい。

透明・不透明共に速い速い！Alchemy 使ってるのか気になるところです。

setTimeout を使わなかった場合

• JavaScript
• DefaultValueExample0.js
• Source

function _onTouchStart(e)
{
	// 初期値を設定
	_box.style.webkitTransitionProperty = '';
	_box.style.webkitTransitionDuration = '';
	_box.style.backgroundColor = 'rgba(255, 0, 0, 1)';
	
	// トランジションを設定
	_box.style.webkitTransitionProperty = 'background-color';
	_box.style.webkitTransitionDuration = '1s';
	_box.style.backgroundColor = 'rgba(0, 0, 255, 1)';
}

青色のままで何も変化しません。

setTimeout を使った場合

初期値を与えてからトランジションに入る場合、

• JavaScript
• DefaultValueExample1.js
• Source

function _onTouchStart(e)
{
	// 初期値を設定
	_box.style.webkitTransitionProperty = '';
	_box.style.webkitTransitionDuration = '';
	_box.style.backgroundColor = 'rgba(255, 0, 0, 1)';
	
	window.setTimeout(function () {
		// トランジションを設定
		_box.style.webkitTransitionProperty = 'background-color';
		_box.style.webkitTransitionDuration = '1s';
		_box.style.backgroundColor = 'rgba(0, 0, 255, 1)';
	}, 0);
}

setTimeout を使うと、初期値が反映された後トランジションが実行されます。

初期値とトランジションを同期的に実行してしまうと、プロパティに初期値を与えてすぐにトランジション用の値で上書きされてしまうので、非同期に（といっても wait は 0ms で大丈夫ぽい）実行しましょうということのようです。

ガイドではアニメーションを再実行する例が挙げられています。Safari CSS Visual Effects Guide: Animations » Listing 6 Restarting an animation

Touch オブジェクトの参照を保存した場合

• JavaScript
• TouchEventExample0.js
• Source

var TouchEventExample0 = (function()
{
	var _viewport, _prevTouch;
	
	window.addEventListener("load", _onLoadWindow);
	
	function _onLoadWindow(e)
	{
		window.removeEventListener("load", _onLoadWindow);
		
		_viewport = document.getElementById("viewport");
		_viewport.addEventListener("touchmove", _onTouchMove);
	}
	
	function _onTouchMove(e)
	{
		e.preventDefault();
		
		var touch = e.touches[0];
		if (_prevTouch)
			console.log([_prevTouch == touch, '(' + _prevTouch.pageX.toString(), _prevTouch.pageY.toString() + ')', '(' + touch.pageX.toString(), touch.pageY.toString() + ')']);
		_prevTouch = touch;
	}
})();

:::OUTPUT:::
true,(120,262),(120,262)
true,(138,244),(138,244)
true,(156,226),(156,226)
true,(176,204),(176,204)
true,(192,184),(192,184)

Touch オブジェクトのプロパティの値を保存した場合

内部的に Touch オブジェクトのプロパティを書き換えつつ使いまわしてるぽいから、 Touch オブジェクトの参照ではなく Touch オブジェクトのとっておきたいプロパティの値を変数に格納するようにします。

• JavaScript
• TouchEventExample1.js
• Source

var TouchEventExample1 = (function()
{
	var _viewport, _prevPoint;
	
	window.addEventListener("load", _onLoadWindow);
	
	function _onLoadWindow(e)
	{
		window.removeEventListener("load", _onLoadWindow);
		
		_viewport = document.getElementById("viewport");
		_viewport.addEventListener("touchmove", _onTouchMove);
	}
	
	function _onTouchMove(e)
	{
		e.preventDefault();
		
		var point = {
			x: e.touches[0].pageX,
			y: e.touches[0].pageY
		};
		if (_prevPoint)
			console.log([_prevPoint == point, '(' + _prevPoint.x.toString(), _prevPoint.y.toString() + ')', '(' + point.x.toString(), point.y.toString() + ')']);
		_prevPoint = point;
	}
})();

:::OUTPUT:::
false,(142,428),(146,416)
false,(146,416),(154,400)
false,(154,400),(164,382)
false,(164,382),(176,356)
false,(176,356),(186,332)

このようにして、前回位置との比較とか差分とかを計算します。

サンプルの概要

Index

ナビゲーションです。QR コードを貼っておきます。（Optiscan にて動作確認済み）

Gesture

iOS Safari の表示オブジェクトは 'touchstart', 'touchmove', 'touchend', 'gesturestart', 'gesturechange', 'gestureend' というタッチスクリーンデバイス特有のイベントを発行します。 touch 系の pageX, pageY といったタッチしている位置情報を表すプロパティを利用して、画像をタッチしたままドラッグします。 gesture 系の rotation, scale といったピンチの状態を表すプロパティを利用して、画像を回転・拡大縮小します。

Rotation

スワイプして円形に配置した画像を回転させるサンプルです。 回転させる表示オブジェクトを親として、その子に10枚の画像を円形に配置します。

Cover Flow

スワイプしてカバーフローサンプル。10 枚セットでロードして次のセットをロードします。 Rotation と違い、入力イベントから変形処理行う対象の表示オブジェクトは複数で、且つ表示オブジェクトが増えていくので、全オブジェクトに変形処理を掛けると 50 枚を超えた辺りからレンダリングがついてこなくなります。 このサンプルでは、中央にあるオブジェクトの左右 10 枚のオブジェクトのみに変形処理を行い、それより外にあるオブジェクトは visibility: hidden; として表示自体を切って余計なレンダリングをしないようにしています。

Multitouch

touchstart, touchmove, touchend 時にタッチしている位置を取得・描画するサンプルです。

Singletouch Drawing

1 本の指でタッチして、動かす速度に応じて太さの異なる線を canvas に描くサンプルです。

Multitouch Drawing

複数本の指でタッチして、複数のタッチを繋ぐ多角形を canvas に描くサンプルです。

気づいたこと・注意点

• iOS Safari / Mac Safari / Win Safari はそれぞれレンダリングが微妙に違うぽいので、 対象の Safari 以外でのレンダリングは参考程度にとどめておいた方が良いかもしれません。 Chrome も WebKit を使っていますが、実装していないプロパティ満載なので確認にはおすすめしません。
• 3D 変形した子エレメントを持っている親エレメントを 3D 変形させる際、子エレメントを 3D として回転させるには、 親エレメントに -webkit-transform-style: preserve-3d; を設定しておく必要があります。
• -webkit-box-reflect: hoge; と posistion: absolute; を併用すると、 -webkit-box-reflect: hoge; がレンダリングに反映されません。
• Touch オブジェクトは内部的にプロパティを書き換えながら使いまわされているぽいので、 前回値をとっておくためには Touch オブジェクトの参照をとっておくのではなく、 とっておきたいプロパティの値自体を取得して変数等に格納しておく必要があります。（jp.ferv.blog » Blog Archive » Touch オブジェクトの注意点参照）
• 3D 変形したオブジェクトのヒットエリアがずれることがある。 （このサンプルでは、 3D 変形したオブジェクトへの click イベントや touch イベントではなく、 幅と高さが 100% なエレメントへの touch イベントを使うことで回避しています。）
• 初期値を与えてからトランジションを開始する場合は、トランジションのプロパティの書き込みは非同期に実行します。（jp.ferv.blog » Blog Archive » 初期値を与えてからトランジション参照）
• iOS4 以上の Safari は JSON のエンコード・デコードをサポートしています。 （Native JSON をサポートしているブラウザは、JSON - Wikipedia, the free encyclopedia » Native JSON を参照。 可能ならば Native JSON を使用する JS ライブラリもリストアップされています。）

雑感

"HTML5(video, audio, canvas) + CSS3(transform, transition, animation) + JavaScript" が主要ブラウザで動く未来があるなら、 今回のサンプルの様なコンテンツなら Flash から置き換わっていくかもしれないなと。 でも未来すぎるかもしれん・・・今のところ使えるとしたら iOS 専用コンテンツくらいだし。

ガイドやリファレンス

• Safari Visual Effects Guide : グラデーション・マスク・リフレクション・トランジション・アニメーション・タッチイベント・ジェスチャイベントとかの使い方
• Safari DOM Extensions Reference : Safari の拡張 DOM リファレンス
• Safari CSS Reference: Supported CSS Properties : Safari の CSS リファレンスのプロパティのページ

PDF を FlashPlayer 内で作成する為のライブラリです。 Java の iText ライブラリを AS3 移植とのことです。 チャプタ・セクション・パラグラフ・フレーズ・イメージなどの基本要素と、カラム・リスト・テーブル・セルなどのレイアウト要素を用い自由にレイアウトした PDF を作成することができます。 また、 AS の GraphicsAPI のようなベクターグラフィックスやグラデーション塗りにも対応した多機能なライブラリです。

purePDF についての情報は下記リンクをご覧下さい。

• purePDF, a complete actionscript PDF library - sephiroth.it - flash world
• purepdf - Project Hosting on Google Code
• purepdfを使って日本語フォントを指定したpdfを作る - nod::ぶろぐ:RIA::Flex/AIR/Flash

問題点

日本語などの 2 バイト文字が特定の環境下で正常に出力できません。 これはライブラリのバグではなく、 FlashPlayer 10.0 のバグです。 FlashPlayer 10.1 (10/05/10 時点では RC4) だとバグフィックスされているので、バグ対応することなく日本語の使用が可能です。（nod さんからTwitter で教えて頂きました。ありがとうございます。） Windows FlashPlayer 10.0 では日本語が全て文字化けして出力されます。 Macintosh FlashPlayer 10.0 では 2 バイト文字中に 1 バイト文字が入ると同要素内の以降の文字が出力されません。 Linux FlashPlayer 10.0 では何も出力されません。

原因

環境によって問題の現象が異なりますが、原因は同じ関数のバグによるものです。 ByteArray.writeMultiByte(hoge, 'unicodeFFFE')が FlashPlayer10.0 で 正常に動作していないことが直接の原因です。

対処法

FlashPlayer10.0 で encoding が 'UnicodeBigUnmarked' の場合、文字列を走査し、キャラクタコードを書き込みます。 jp.ferv.blog » Blog Archive » ByteArray に ‘unicodeFFFE’ を書き込む際のバグ に諸環境下でのバグの症状と対応策の詳細を書きましたので、合わせてご覧下さい。

バグFIX済み purePDF によるプレビュー

ローマ字・半角カナ・第一水準漢字・第二水準漢字を書き込んだ PDF を FlashPlayer 内で作成します。

• Windows FlashPlayer 10.0.45.2 plug-in
• Windows FlashPlayer 10.0.45.2 activeX
• Macintosh FlashPlayer 10.0.45.2 plug-in
• Linux FlashPlayer 10.0.45.2 plug-in

対応済み purePDF のソース・swc と Expample 用の as ファイルのダウンロード

purePDF_jp.zip

purePDF のライセンスは LGPL なので、継承して LGPL ライセンスでの配布となります。

変更箇所

バグのある関数をコールしている箇所を、 ByteArrayUtils クラス内のバグ対応用の関数をコールするように変更します。

• ActionScript
• PdfEncodings.as
• Source

//byte.buffer.writeMultiByte( text, ByteArrayUtils.getEncoding( encoding ) );
ByteArrayUtils.writeMultiByte( byte.buffer, text, ByteArrayUtils.getEncoding( encoding ) ); // modified by dsk(http://ferv.jp)

バグ対応用の関数です。 まず Capabilities.version から FlashPlayer のバージョンを判定します。 問題のないバージョンの場合は文字列を走査せず、 そのまま writeMultiByte() で書き込みます。 問題のあるバージョンの場合は文字列を走査しつつキャラクタコードを取得し、 2 バイトに収まるキャラクタコードの場合は writeShort() で書き込み、 収まらない場合は 4 バイトとして writeUnsignedInt() で書き込みます。

• ActionScript
• ByteArrayUtils.as
• Source

import flash.system.Capabilities;

• ActionScript
• ByteArrayUtils.as
• Source

/**
 * @author dsk (http://ferv.jp)
 */
private static var _specifiedVersion:Boolean = false;

/**
 * @author dsk (http://ferv.jp)
 */
private static var _isUnder10_1:Boolean;

• ActionScript
• ByteArrayUtils.as
• Source

/**
 * bug fix : fail to work "buffer.writeMultiByte( value, 'unicodeFFFE' )" at FP10.0;
 * @author dsk (http://ferv.jp)
 */
public static function writeMultiByte( buffer: ByteArray, value: String, charSet: String ):void
{
	if (!_specifiedVersion)
		_specifyVersion();
	
	if (!(_isUnder10_1 && charSet = 'unicodeFFFE'))
		buffer.writeMultiByte( value, charSet );
	else
		_writeUnicodeFFFEByte( buffer, value );
	
	buffer.position = 0;
}

/**
 * emulate writing utf-16 BE
 * bug fix : fail to work "buffer.writeMultiByte( value, 'unicodeFFFE' )" at FP10.0
 * @author dsk (http://ferv.jp)
 */
private static function _writeUnicodeFFFEByte( buffer: ByteArray, value: String ):void
{
	var len:int = value.length;
	var i:int, code:uint;
	for (i = 0; i < len; i ++)
	{
		code = value.charCodeAt(i);
		if (code < 0x10000)
			buffer.writeShort(code);
		else
			buffer.writeUnsignedInt(code);
	}
}

/**
 * specify the Flash Player platform and version
 * @author dsk (http://ferv.jp)
 */
private static function _specifyVersion():void
{
	var info:Array = Capabilities.version.split(' ');
	var versions:Array = info[1].split(',');
	var majorMinor:Number = parseFloat(versions[0] + '.' + versions[1]);
	_isUnder10_1 = (majorMinor < 10.1);
	trace('ByteArrayUtils.specifyVersion. to be implemented :', 'isUnder10_1 =', _isUnder10_1);
	
	_specifiedVersion = true;
}

ByteArray.writeMultiByte() メソッドには 2 バイト文字の 処理に不具合があります。 utf-16 BE (BigEndian) を書き込んだ際の諸環境で起こるバグの症状の確認の為の サンプルを wonderfl で書いてみました。 また、バグ対応のコードも合わせて確認します。

Windows FlashPlayer 10.0.45.2 plug-in/activeX

unicodeFFFE を指定したにもかかわらず shif_jis のキャラクタコードで書き込まれます。

Macintosh FlashPlayer 10.0.45.2 plug-in

2 バイト文字のみの間は utf-16 BE のキャラクタコードが正常に書き込まれますが、 1 バイト文字が混在すると以降のキャラクタコードが書き込まれません。

Linux FlashPlayer 10.0.45.2 plug-in

何も書き込まれません。

バグの対処法の解説

unicodeFFFE とは、utf-16 BE (BigEndian) なので String.charCodeAt(index);で一文字ずつですが取得可能です。 utf-16 では 1 文字を 2 バイトもしくは 4 バイトで定義しています。 つまり、文字列を一文字ずつ走査し、 charCodeAt() メソッドでキャラクタコードを取得し、 0x0000 〜 0xFFFF の範囲なら writeShort() メソッドで 2 バイトとして書き込み、 0x00010000 〜 0xFFFFFFFF の範囲なら writeUnsignedInt() メソッドで 4 バイトとして ByteArray に書き込めばよいことになります。
// ただし、日本語の場合は第二水準漢字まで含めても 2 バイト内に収まります。

Stratus2 で、どんなコードで何ができるのかを調べる（特に NetStatusEvent 周り）ついでにチャットアプリ作ってみた。 ソースは右クリックの「ソースを表示」から。重要な部分だけコメント付き。
要 Flash Player 10.1 - Adobe Labs - Downloads: Flash Player 10.1

Stratus って何？な人と Stratus1 は触ったけど Stratus2 って何？な人は Flash Player 10.1 と RTMFP （ピアアシストネットワーク） - akihiro kamijo に分かりやすく機能説明してある。 要するに、 FlashPlayer10.0 から 1Peer to 1Peer できるようになったけど、 10.1 ではさらに nPeer のグループを作ってその中で Peer to Peer できるってことみたい。

Stratus2 には、

• マルチキャスト (Application-Level Multicast)
• オブジェクト複製 (Object Replication)
• ポスト (Posting)
• ダイレクトルーティング (Direct Routing)

• Say 機能 → 「大量の送り手が時々ポストする」 → ポスト！
• Tell 機能 → 「誰にメッセージを送るかを指定する」 → ダイレクトルーティング！
• 過去ログ取得 → 「どのオブジェクトを持っているか或いは欲しいかという情報をグループ内に通知」 → オブジェクト複製！

Stratus2 関連のリンク

• Flash Player 10.1 と RTMFP （ピアアシストネットワーク） - akihiro kamijo : 上条さんによる Stratus2 の説明。
• Simple chat with P2P NetGroup in FP 10.1 — FlashRealtime.com : 開発環境のセットアップとサンプルコード。
• Adobe Labs - Stratus : AdobeLabs の Stratus トップ。"Signup for a Stratus beta developer key" からディベロッパキーを取得。
• Peer-assisted networking using RTMFP groups in Flash Player 10.1 | Adobe Developer Connection : コードと解説。
• NetGroup - BETA ActionScript 3.0 Reference for the Adobe Flash Platform : NetGroup クラスの ASDoc。
• Flash Player 10.1 と RTMFP - akihiro kamijo : RTMFP とは。
• Flash Player 10.1 と RTMFP （Stratus と接続性について） - akihiro kamijo : RTMFP の仕組みとできないこと。

同期処理でエンコード

zlib 圧縮率を 1 で、不透明な画像と透明な画像に対してフィルタの種類を変えてエンコードしてみる。

非同期処理でエンコード

非同期処理の注目点は、この例だと 12 回一気にコールしてるんだけど最後にコールしたところから順々に実行され、一個処理が終わると次の処理って感じにお行儀よく処理されていく。 これは Alchemy の機能だと思うんだけどコールしたのと逆順なのはなんか理由があるのかな・・・

あと、こっちはエンコード終了時に toXML() メソッドでちょっとだけデコードして情報を抜き出した XML を trace() してるから Firefox で FlashTracer 入れてる人は開いてみるといいかも。

拾った理由は、こんな感じ。 AS3 では ByteArray.compress() メソッドを叩くと、 deflate 圧縮して zlib 形式にフォーマットしてくれるんだけど、 冗長性のない ByteArray の圧縮は高速に処理できるけど、 PNG フォーマットに定義されているフィルタ処理で冗長化してから compress() すると処理にやたらと時間がかかる。 フィルタリングする前提だと、 zlib 圧縮率を低めにすれば十分高速に処理でき、 zlib 圧縮率よりもフィルタリングの有無の方がファイルサイズ縮小のメリットが大きいけど、 compress() メソッドでは zlib 圧縮率を設定できない。 あとは、 Alchemy だと非同期に処理するコードも簡単に書けるから、大きなサイズの BitmapData をエンコードする場合などもメリットありそうだし。

Alchemy の非同期処理は進捗とかを関数の参照渡しで C から AS の関数をコールして通知するんだけど、これって AS3 ライクじゃないんでイベントを発行する形にラップしてある。 あと、デバッグ用にちょっとだけデコードしてチャンクの情報とかを XML にして返す関数も実装。