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

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

ただ、safariだと

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

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

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

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

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

指定できるのは
・shadowColor （色）
・shadowOffsetX （横位置）
・shadowOffsetY （縦位置）
・shadowBlur （ぼかしのサイズ）
の4つ。

html（別ウインドウ）

html（別ウインドウ）

キャンパスに対して一律の指定しかできないので、
同一キャンパス内これは影付きでこっちは影無しとかはできない。
さらに処理負荷もかかる。

参考
http://www.html5.jp/canvas/ref/property/shadowBlur.html
http://www.w3.org/TR/2009/WD-html5-20090825/the-canvas-element.html#shadows

html（別ウインドウ）

ポイントは

context.globalCompositeOperation = "lighter";

の箇所。
これで上書き部分が加算で描画される。

参考
http://wonderfl.net/c/aFNd
http://www.html5.jp/canvas/ref/property/globalCompositeOperation.html

html（別ウインドウ）
マウスに追随するオブジェクトとパーティクルオブジェクトの
クラスはばっさりと簡略化した。

毎描画毎に表示オブジェクトを格納した配列を更新している。
この辺はaddChild/removeChildライクに出来るようなライブラリ作ったら
ActionScripterは幸せになれるかな。
visibleとかscaleとかをASライクに使える疑似Spriteクラスとか。

ちなみに今日は破の発売日らしいのでこんなのも作った。

html（別ウインドウ）

CSS3ではhslで直接色を指定できる！ので
上記の実装は超簡単。

h+=10;
var col='hsla('+h+',100%, 50%,1)';
context.strokeStyle  =col ;
if(h == 360){
	h = 0;
}

こんな感じ。

あー破が見てぇ。けどオレは劇場版BOXセット var.3Dが出るまで我慢するんだｗ

参考
http://wonderfl.net/c/ybeh

html（別ウインドウ）

10000はさすがにムリがあるが1000程度ならまぁ何とか。
オリジナル版との違いは大きく以下の通り。

PerlinNoiseの描画

• オリジナル版
  ノイズ用のビットマップをperlinNoiseで生成。
• Canvas版
  予め外部ファイルを用意。

ビットマップからRとGの値を抽出しxy軸の加速度に変換

• オリジナル版
  getPixelでRとGの値を抽出しxy軸の加速度に変換する。
• Canvas版
  外部ファイルの色情報をgetImageDataで配列化。

残像処理

• オリジナル版
  ColorTransformで着色しながら暗くする。
• Canvas版
  全領域に半透明(alpha0.1)の黒を重ね塗りする。

やってみてわかったがCanvasのアニメーションはwonderflのパーティクル系と
非常に相性が良い。
というより、他に向いていないというべきか。

参考
http://wonderfl.net/c/4yyT

その際用いるのがsetInterval と setTimeout 関数と言うことだが
setTimeoutは設定した時間後に1回しか実行されないので
基本的にはsetIntervalを使用することになる。

setInterval('animateShape()',500);
setTimeout('animateShape()',500);

参考
https://developer.mozilla.org/ja/Canvas_tutorial/Basic_animations

ライブラリもいくつか公開されている。

jcotton
http://jcotton.sourceforge.net/
メソッドチェーンで記述。

tutorialCanvas.add(
  jcotton.rect(0, 0, 50, 50)
    .animate({xposition: 100}, 500)
)

cakejs
http://code.google.com/p/cakejs/
関数で記述？

 circle.animateTo('scale', 2, 1000, 'sine', true, true)

Processing.js
http://processingjs.org/
おなじみProcessingのjs版

本当はfile apiも使って任意のデータを編集できるようにしたかったが
それはsafariが対応してからにしよう。

html（別ウインドウ）

感想

HTML5 vs Flashって？

だれが言い出したんだろうか。
何から何まで（でもないが）クライアントサイドで出来てしまうFlashは優秀だ。
確かに、今回の”TiltShift Generatorもどき”作りながら
「ブラー処理ひとつ出来ぬモノにFlashの代わりが務まろうなど片腹痛いわ！」
とか自分の技術力を棚に上げて思ったりもしたが
別にブラー処理なんてクライアントサイドで実装する必要も無い。
負荷のかかる処理なんかは、それこそ雲の向こうで処理してもらって
その結果が満足に表示できれば何ら問題ないわけで。

単純なHTML5 vs Flashって事で比較すると機能面でFlashのコールド勝ちだけど
そもそもそんな単純な話じゃないので比較自体意味を成さない。

で、HTML5っていつ普及するの？

単純な疑問がここ。
Flashの最も優れた所はクロスブラウザであるところだと思っている。
個人的な意見だがFlashが爆発的に普及したのは
・ネスケとIEで同じように見える
・金額（利幅）が大きい
っていう制作側に対する恩恵が大きかったからで
ユーザーが望んだ結果と言うよりは送り手側の都合の方が大きかったからだと思っている。

僕が2000年代初めに働いていた会社では
全部のブラウザで同じ見え方にするっていう事が何よりも優先されていて
Win、Mac間のテキストの大きさとかマージンの調整とか何かと面倒が多かった（cssが普及する前だったし）。
でもFlashだったらpluginさえ入っていれば見え方も同じ、さらにレイアウトも自由自在。
「じゃFlashにしましょうよ」は魔法の言葉ｗ。
それにFlashだと一人、もしくは少人数で制作が可能なうえ、
大量のHTMLをコーディングするより金額が大きいと言う状況だった。
今考えるとベクターベースで容量が軽いとかはどちらかというと外向けの理由の様な気がする。

なのでHTML5の実装状況が各ブラウザでまちまちってのはホントいただけない。
将来的にはマシになるかと言えばどうだろう？
未だにIE6がーとかだしなー。

とは言っても

今後Flashだけで家が建てられるとか言う状況でもない。
広告費は減っているし、スペシャルコンテンツでウン百万とかいう時代は多分終わりつつある。
というかFlashはスキップされるためのオープニングとかじゃなくて
もっとFlashの機能が最大限活かされるイカした場所で使われるべきだと思う（具体例は出てこないけど）。

というわけで

まぁ色々書いては見たけど
そんなことより
次はCanvasのアニメーションを試してみたいと思う。

だってほら
「動いてる、動いてる、いいなーーわっくわくするなーー♪」
とか言いたいじゃん。

createLinearGradientでアルファチャンネルマスク

html（別ウインドウ）

drawImageにはCanvasも指定可能。

なので元画像をCanvasに一度縮小。
ブラー処理。
別Canvasへ元のサイズへ拡大して表示。

という処理で比較的短い処理時間でそれなりのブラーを得られるようにした。

html（別ウインドウ）

さらにぼかし画像に対してアルファチャンネルマスクを追加。

html（別ウインドウ）

なお、マウスの座標取得に関しては
以下のサイトを参考にさせていただいた。

参考
http://serennz.sakura.ne.jp/sb/log/eid108.html

今回はブラーをかける。

まずは周囲の8pxと自身の色の平均値を計算してブラーをかけてみる。
ボケが弱い。

とりあえず試行錯誤。サンプルhtmlにリンクしてますが
処理が激重の為、閲覧周囲。

・色の平均を取るマスを増やしてみた。

html（別ウインドウ）

・処理を複数回連続させてみた。

html（別ウインドウ）

どっちも適度なボケ味を出そうとするとレインボーカーソル回りっぱなしで
とてもじゃないが実用に耐えるような処理速度じゃない。

ちょっと他の方法も探ってみよう。

参考
http://rest-term.com/archives/2566/