でも、私もCreative Cloudにしちゃいました。理由としてはやっぱり新しいもの好きなので最新機能が使いこなせなくてもいつまでも最新版を追いかけていたいことと、あこがれのAdobe製品使い放題！なことと、実際問題としてAdobe製品はうちのソフトウェア資産なのでそれが何世代までアップデート出来るのかなど面倒な運用管理を考える暇があればそのぶん明確に常にソフトウェアを最新版に保てる今回のライセンス形態はかなり興味があったからだというのが大きいです。
何より、クリエイティブ系ツールのアップデートってワクワクするんですよね。自分の腕が上がったわけではないのに、何かこう、新しいもの生み出せそうで。

というわけで、 さくっとCreative Cloudを購入しましてですね。一番気になるのはやはりFlashCS6でもProgressionが使えるのか！？です。
結論から言いますと使えました。
全く、何も、問題なく、普通に、使えましたよ。

以下、ごくごく普通にインストールメモです。

2012/5/12追記

すいません、現時点で私の環境で少し問題が発生しました。記事の最後に追記しています。

Adobe Creative CloudのFAQページにも載っていますが、FlashCS6はCreative Cloudに入って無くても、つまり今まで通りソフトウエア単品を購入しても、他のCS製品を購入しても、どちらでも使えます。

まずは自身の使い方に合わせたいずれかの購入方法でFlashCS6が正しくインストールされているのが前提で進めていきます。

最初にProgressionのサイトにいき、メニューからダウンロードを選んでください。

ダウンロードページへの直接リンクはこちら。

この記事を執筆時点ではまだFlashCS5用のダウンロードリンクがありますが、気にせずダウンロード。
きっと近々更新があると思います！ 

Progression4 日本語版パッケージと書かれてあるリンクをクリックするとダウンロードが始まると思います。

上のようなファイルがダウンロード出来ると思います。

この時点で先にFlashCS6が正しくインストールされてあるなら、ダウンロードしてきたファイルをダブルクリックするだけでインストールが出来るんですが、念のためMacですと右クリックから「このアプリケーションで開く」を選択してちゃんとExtentionManagerCS6で開くか確認しておくことをおすすめします。
Windowsの場合はファイルの関連づけを確認してみてください。 

ExtentionManagerCS6が立ち上がると免責事項が出ますのでよく読んで、条件が合うなら承認するボタンを押して先に進んでください。

署名の警告が出ます。
Adobeが「身元不確かなファイルをインスコするけどいい？」って聞いてきています。基本的には問題ありませんので、ご自身の判断で間違いないと思ったらインストールを押して先に進みます。

インストールできたなう。
ExtentionManagerは閉じてかまいません。

FlashCS6を立ち上げます。へーFlashCS6の起動時スプラッシュウインドウはこんななんだ。 

起動が完了したら、Flashのメニューから「ウインドウ」→「その他のパネル」→「Progression プロジェクト」があれば成功です！

特に何も問題なくインストール完了＆立ち上がりました！

まずは立ち上がったのでとりあえずのところ今日の検証はお終いです。
冒頭にも書きましたがクリエイティブツールのアップデートはわくわくします。このわくわくに負けないくらい、誰もが楽しめるコンテンツをうちもよりいっそう作れるように精進します！とCS6のアップデートに誓いを立てたのでした。

2012/5/12追記

［B!］FlashCS6でProgressionが使えるか試してみた / 敢えて言うと、Flash Player 11書き出しの場合は、CastDocument (ExMovieClip)でコンフリクトのエラーが発生するのでそこだけ調整… htn.to/6RFKH1

— clockmaker_botさん (@clockmaker_bot) 5月 11, 2012

はやくも補足ありがとうございます！！！！近日中に調べてアップします。

2012/5/12追記

拡張のインストールまではできたものの、新規プロジェクトを作ることが出来ませんでした。

ちょっと様子がおかしい…。

ううう残念…。ここは今後のProgressionのアップデートに期待です。
気分を変えてCS5で新規プロジェクトを作ってCS6で立ち上げてみます。

ああ〜〜〜…。

どうもFlashPlayer11.1からMovieClipに今さらisPlayingプロパティが追加されたようで、競合しちゃうようです。今のところ解決方法としましては自分でソースを書き換えるのが一番はやいかと思います。

jp.nium.display.ExMovieClip.as

を開いて、126行目付近（見つからなければ「isPlaying():Boolean」でファイル内検索）の

public function get isPlaying():Boolean { return _isPlaying; }

となっているところを

override public function get isPlaying():Boolean { return _isPlaying; }

と書き換えてください（行の先頭に「override<半角スペース>」を書き加える）。

これでコンパイルは通りますし理屈では問題ないはずですが、コードを勝手に書き加えているので（ライセンス的にはたぶんProgression™ Library License Basicの権利3で条文に抵触しない範囲でソースコードの利用・修正・改変・複写・掲載・頒布を行うことが認められているので問題ないはずですが）今のところ僕も未検証な部分が多すぎるので、商用案件などではProgressionのアップデートを待つか、FlashPlayer10.3以下で書き出すようにしたほうがいいかと思います。

とりあえずは僕もこの新しいツールCS6でまずいろいろ遊びながら使い慣れていきたいと思います！

私が主に JavaScriptを書くときに使っているWebStormでJSDocをきちんと書くようにすると、JavaScriptの型をなかなか強力にサポートしてくれるようになりました。コードの補完機能なんかもかなり精度が上がってくるので、結果的にコーディングも速くなるのではないでしょうか。
私は特に普段はActionScript3を書く機会が多く、ご存じのとおりActionScript3は型を明示できる言語なのでFlashBuilderやFlashDevelop、FlashCS5などのIDEに備わっている補完機能に頼り切ってコーディングしているため、今まではJavaScriptで厳密に型を明示できないことで自分のスペックの低さによってコーディングが遅くスペルミスも多いという弱点となってしまっていたのですが、WebStormがJSDocをここまでサポートしてくれていると、普段からコードにドキュメントを残すことで型の整合性をチェックできつつ補完の精度も上がっていくという、まさに一石何鳥も得たりという思いです。これには野鳥愛好家も黙っていられないんではないでしょうか。

あと毎度の事ながら前置きですがこの記事ではJSDocの書き方は扱っていません。あくまでJSDocに型情報を書いていったらどこまでWebStormが補完してくれるか、だけ実験しています。 

基本形何発か

まずはこの状態。

;
var name = "utsunomiya";

この状態で1行目にカーソルを入れて、/**（半角スラッシュひとつと半角アスタリスク（肛門みたいなの）ふたつ）を入れてEnter

/**
 *
 * @type {String}
 */
var name = "utsunomiya";

あとはここまで補完してくれます。うん、便利。

プリミティブな型やクラスは当然びしびし補完してくれます。
以下、同じように半角スラッシュと肛門ふたつで自動的に補完してくれる型を紹介します。 

/**
 *
 * @type {Number}
 */
var age = 37;
/**
 *
 * @type {Date}
 */
var date = new Date();

関数なんかがかなり強力です。
実際にこんな変な関数書くことはないんですが、JSDocの実験と言うことでご勘弁ください。

function createNames(){
    return [
        "tanaka",
        "yamada",
        "suzuki"
    ];
}

function addName(name){
    var a = createNames();
    a.push(name);
    return a;
}

ここまで書くとしめたものです。

/**
 *
 * @return {Array}
 */
function createNames(){
    return [
        "tanaka",
        "yamada",
        "suzuki"
    ];
}
/**
 *
 * @param name
 * @return {Array}
 */
function addName(name){
    var a = createNames();
    a.push(name);
    return a;
}

一気にここまで補完してくれました。
特にaddNameのローカル変数aに注目して欲しいんですが、ちゃんとcreateNamesの戻り値がArrayだっていうことを参照していらっしゃる。
IDEがここまでコードの意味を理解しているようになるといろいろと安心ですね。 

もちろんユーザー定義クラスなんかも言わずもがな。

/**
 *
 * @constructor
 */
function Main(){};
/**
 *
 * @type {Main}
 */
var main = new Main();

はいはい自動自動。

ActionScript3でいうところのVectorなんかはどう？

ActionScript3でよく使うVector.<String>こういった書き方はどうでしょうか？
結論から言いますと、@type {Vector.<String>}もいけました。AS3er歓喜です。

/**
 *
 * @return {Vector.<String>}
 */
function createNames(){
    return [
        "tanaka",
        "yamada",
        "suzuki"
    ];
}
/**
 *
 * @type {Vector.<String>}
 */
var people = createNames();
/**
 *
 * @type {String}
 */
var person = createNames()[0];

ただ、僕が何とかのひとつ覚えみたいにJavaScript書くときバイブルにしているGoogleのコーディング規約によりますとArray.<String>やObject.<String>を推奨していますので、それに従って書くと問題が起こります。

/**
 *
 * @return {Array.<String>}
 */
function createNames(){
    return [
        "tanaka",
        "yamada",
        "suzuki"
    ];
}
/**
 *
 * @type {Array.<String>}
 */
var people = createNames();
/**
 *
 * @type {*}
 */
var person = createNames()[0];

Array.<String>で書くとArrayの中身がStringだということがWebStorm様がご理解いただけない…TT
もしかしたら設定などでレギュレーション出来るのかも知れませんが、情報ありましたら教えて頂くと嬉しいです。それか今後のバージョンアップに期待というところでしょうか。 

もうちょっと複雑なことはできるかな？

このへんになってくるとまだ補完が危うい感じ？ 

/**
 *
 * @return {Function}
 */
function test(){
    return function(x, y){
        return x * y;
    }
}
/**
 *
 * @type {*}
 */
var t = test();
console.log(t(2, 5));

test()を実行したときの戻り値が追いかけられてなさそうではあります。
最初のtest()の戻り値がFunctionオブジェクトなので、これだとコンストラクターなのか関数なのかがわからない、ということでしょうか？ 

/**
 *
 * @return {function():number}
 */
function test(){
    return function(x, y){
        return x * y;
    }
}
/**
 *
 * @type {function():number}
 */
var t = test();
//ここで間違う
var n = t(2, 5);

う〜ん、惜しいなあ。実に惜しい。

/**
 *
 * @return {function}
 */
function test(){
    return function(x, y){
        return x * y;
    }
}
/**
 *
 * @type {*}
 */
var t = test();
/**
 *
 * @type {*}
 */
var n = t(2, 5);

今はこれが精一杯＞＜

IDEの機能に引っ張られてコーディング規約が甘くなるのは本末転倒ですが、あまりIDEの機能に頼りすぎてるとIDEの能力を超えた書き方がバグを混ぜてしまう危険性も出てくるので（しかもその場合、コーダーが気付かないうちに自動的に混ぜてしまう場合が多いのでさらに厄介）そこらへんの線引きは難しいところと言うか、僕みたいなツール頼りすぎなんちゃってプログラマーのつらいところです。

まとめますと、ちょっと癖はありますがかなりコードを深く理解して補完してくれるようになるみたいで、使えそうです。特に普段はActionScript3で慣れたクラス開発型をJavaScriptでも行っているので、ユーザー定義クラスとプリミティブ型オブジェクトをしっかりトラッキングしてくれるところが気に入りました。
それにJSDocでコード補完をより精度を高めていくやり方は、規約とドキュメントのクオリティも高めてくれるので積極的に使っていきたいです。

Flashのタイムラインアニメーションはなんとか触れるんだけどActionScript3は怖い、ましてやトゥイーンライブラリとかトゥイーンエンジンって何？という人向けに、ぜひとも一回Tween24というトゥイーンライブラリを使って試しに遊んでみてほしいと思って記事を書いてみました。
タイトルでノンプログラマー向けと書いていますが、ノンプログラマーとはつまりプログラムを書くことが得意でない人全般を指していますが、楽しくトゥイーンを作る話しですので特にWEBデザイナーさんに読んで欲しいと思っています。
以下トゥイーンライブラリを含むActionScriptクラスライブラリの事をライブラリと省略して書きます。Flashのライブラリウインドウのライブラリとは別ものとして読んでいってください。 

誤解を恐れずものすごく断定的な言い方をすれば、Flashを苦手と感じている人の多くはタイムラインアニメーションと比べるとActionScriptが難しいと感じていて、ましてやライブラリなんて難しすぎて使えないんじゃないかという印象を抱いている人は少なくないかと思います。
僕の個人的な考えとしては、タイムラインは直感的に使うのに非常に優れたものなのでそれと比べると確かにActionScriptは慣れないと難しいものではあると思います。少なくとも僕は慣れるまでは難しかったです。
さらにそのActionScriptを駆使するライブラリという奴は難しいものの親玉みたいに考えていました。
しかしながら実際のところはライブラリはほとんどが難しい事を簡単にする目的で作られたものであるため、ActionScriptの難しいところを簡単にしてくれます。

その中でも特に、Flashのモーションを制御する事に特化したライブラリ、Tween24は使いやすいことは言うまでもなく「使ってて楽しい」ライブラリでして、今までこういうActionScriptのライブラリと無縁だったノンプログラマーな方々にもこの楽しさは是非とも体験して貰いたい！と思って紹介記事を書いてみました。

最終的にTween24を深く知るようになるためにはActionScriptの知識が必要ですが、とりあえず動いて楽しいレベルくらいまではActionScriptがわからなくても体験できると思います。
この記事でもActionScriptについては出来るだけ「何故そうなるのか」の説明を省いてTween24を動かすことだけに特化して紹介してみたいと思います。
この春からWEB系クリエイターになった新人さんや、ほかにも今さらFlashをいちから勉強したくない人にもおすすめしてみたいです。

目次

1. この記事が対象としている人
2. 用意するもの
3. ブックマークしておきたいURL三傑
4. さっそくライブラリをダウンロードしよう
5. Tween24とは？
6. はじめてみよう
7. 動かすものを作ってみる
8. とりあえず動かしてみる
9. コピペサンプル3つ
10. 奥義、自動補完とメソッドチェーン
11. おまけ：自動補完がきかない！？

普通なら一番最初にくるはずの「Tween24とは？」「はじめてみよう」の前にいろいろと能書きがありますが、いきなりはじめる前に自分が昔ライブラリを使い始めるまでに敷居が高いと感じてたところをいっこずつ潰していきたいと思います。

この記事が対象としている人

Flashはあんまり得意じゃないな〜とは思っているけど、とりあえずタイムラインアニメーションくらいは触ったことある人。
他にも一回くらいはActionScript3を勉強しようと挑戦してみたけど挫折したことがある人。
もっと限定的に言うと、うちのデザイナーに説明する気持ちで書いています。

僕がノンプログラマーにTween24をおすすめしたい理由は主に3つあります。

1. ActionScript3ぽくないすっきりした書き方！
2. addEventListenerとおさらばできるかも！？
3. とにかく使ってて楽しい自動補完

理由についても後ほど説明を書きますが特に過去にActionScript3を難しいと思った人にTween24はおすすめしたいです。

用意するもの

Tween24を使うにあたって用意するものは次のとおりです。

1. Flash Professional CS5以降
2. Tween24

Tween24はActionScript3で書かれているので、ActionScript3が書けるFlash CS3以降であれば使えるのですが、この記事ではCS5以降をおすすめします。
この記事をかいている時点ではCS5、CS5.5、そして発売されたばかりのCS6が対象です。
理由はあとでも詳しく触れますがCS5以降にはActionScriptを書くときの自動補完という機能がついているのですが、これとTween24の組み合わせが最高に楽しくて是非ともこの体験をしてもらいたいからです。

ブックマークしておきたいURL三傑

次にブックマークしておきたいURLを紹介します。いろいろと紹介したいところですが、いきなり沢山の情報を参考にしても迷うと思うので思い切って最初に読みたいURLを三つに絞ってみました。
この3つをブックマークしておけばTween24はもう極めたも同然です（だいぶ誇張して言ってます）。

• Tween24
  • Tween24の配布サイトです。ダウンロードの他、紹介、チュートリアル、サンプルコード、ASDoc（リファレンスというTween24の説明書）など、ドキュメントが抱負なのでひととおり読むだけでなくTween24を使っている間は何度もここを訪れることになります。
• メソッドチェーンでスラスラ書ける！AS3トゥイーンライブラリ「Tween24」
  • 先ほど紹介したTween24配布サイト内の関連記事ですが、作者のa_24さんがTween24について紹介記事を書いています。作者さん本人が書いているのでこれ以上無いくらいわかりやすく紹介されてあるうえにチュートリアルは特に参考になるので是非とも個別にブックマークしておきたいところです。
• にゃあプロジェクト [AS3.0] Tween24のイージング
  • にゃあプロジェクトさんがたくさんTween24記事を書かれてあってそのどれもが大変参考になるんですが、その中でも特に１ページだけ挙げるとすればこのリンク先を真っ先にブックマークしておくことをおすすめします。記事の最後にイージングのチートシートがあるんですが、これがみやすくて何度も参考にすることになります。ちなみにイージングとは「だんだん遅くなる」とか「だんだん速くなる」とか動きの速度に変化をつけるためのものなんですが、これを使いこなすと動きがとても活き活きとしてくるので断然お勧めです。

上に挙げた3つのURL以外にも、参考にさせて頂いた記事はたくさんあるんですが今回はあえて三つに絞って紹介してみました。

さっそくライブラリをダウンロードしよう

先ほども紹介したTween24のサイトにいって、ライブラリをダウンロードします。
Tween24
この記事を書いている時点ではバージョンが1.0.1なので、ここから最新版を入手します。

ZIPファイルでダウンロード出来ると思うので解凍してください。
解凍して出来たファイルをどこかお宝フォルダに入れて大事に保存してください。

ダウンロードはこれで完了です。
いちおうダウンロードしたファイルの中身をみてみましょう。
「src」というフォルダがあってその中に「Tween24_＜バージョン番号＞.swc」というファイルがあると思います。これがTween24のライブラリです。使い方は後ほど説明します。

swcファイルの他に「a24→tween→」フォルダにいろいろな.asファイルがあります。
これらはTween24.swcライブラリのソースファイル（スクリプトが書かれたActionScriptのファイル）です。ActionScriptに興味のある方や、ソースファイルからライブラリを使用したい場合はこちらを使いますが、多くの方はあまり関係ないのでこちらは特に意識しなくても大丈夫です。

Tween24とは？

ここまで読んでもらうとわかるように、Tween24とはActionScript3でトゥイーンをするためのライブラリです。
@a_24さんが個人で開発をされていて、誰でも気軽に使えるようにMITライセンスで公開されています。
非常に使い勝手が良いのが特徴で、動作が軽いこととメソッドチェーンと呼ばれる書き方で高機能なことをバランスよく使うことが出来るため、公開直後から大人気となった日本製トゥイーンライブラリです。
「Actionscript3」の「ライブラリ」などとなにやら難しげなキーワードが出ましたが、ライブラリ本体そのものは先ほどダウンロードしてきたswcファイルが正体です。どうやって使うのかは次の項目で説明します。

はじめてみよう

はじめるまでに嫌になるくらい前置きが長かったですね。 まずはflaファイルを入れるための新しいフォルダを作ります。
 
そしてその中に実験用のflaを作ります。

フォルダ名とファイル名に若干愛が感じられないですが次に行きます。
先ほどダウンロードしてきたライブラリから、swcファイルをflaと同じフォルダにコピーします。
swcファイルはこうやってflaを作るたびにコピーして使うことになります。

これでフォルダの中はこうなっているはずです。
 
ファイルの準備が整ったら、Flashを立ち上げてそのFlashのメニューの「ファイル」から「ActionScript設定」を選びます。

何やら恐ろしげなウインドウが開きますが、中段にある「ライブラリパス」を選択後、「＋」プラスボタンを押して新しく指定するフォルダに「./」（半角でドットとスラッシュ）と入力します。

これで準備完了です！FlashでTween24を使う準備が出来ました。

動かすものを作ってみる

トゥイーンのためのライブラリなのでまずは動かすものを作ってみましょう。なんでもいいのでとりあえず丸でも書いておきます。
 
「シンボルに変換」でムービークリップにしておきます。中心点は真ん中にしておくと使い勝手が良いと思います。
さいごに、Actionscript3から呼び出せるようにするためにインスタンス名をつければ完了です。
 
名前のつけかたには規則があるんですが、とりあえずは
最初の文字が半角アルファベットか半角アンダーバーであること、
あと途中にアンダーバー以外の他の半角記号や半角スペースが混じらないこと、
この二つが守られていればまあ何でも良いです（あまのじゃくな方は「じゃあ日本語でも入れてみよう」とすると思いますが、太字で書いた決まりさえ守っていれば日本語が混じってもまあ大丈夫です。おすすめはしませんが）。
ここでは半角で「maru」 と書きました。サンプル素材とインスタンス名に若干愛が感じられないですが次に行きます。

とりあえず動かしてみる

とりあえず何も考えずにコピペでTween24を使って動かしてみます。
 ActionScript3を書く用のレイヤーを新しく作ります。
 
こうやって、ActionScriptを書くための専用のレイヤーを作っておくと、便利です。
右クリックでメニューを出して「アクション」を選んで、アクションパネルを開きます。
 
出てきたアクションパネルに次のスクリプトをコピー＆ペーストしてみてください。

import a24.tween.Tween24;
Tween24.tween(maru, 10).x(500).play();

そこでおもむろにCmmand+Enter（WindowsだとCtrl+Enter）でプレビューします。 
丸が ゆっくり右に移動するのが確認できると思います。

サンプルが微妙すぎて全然面白くないかもしれないですが、ちょっとだけ画像でTween24の説明させてください。
 
Tween24では、何を何秒かけてどう動かすか、を指定するだけで動かせます。そして最後に

.play();

と繋げて書くことでトゥイーンが実行されます。
ActionScriptがわからなくても勘のいい人ならこれなら多少は思った通りに動かせる気がしてきませんか？

最初のimport文は、Tween24を使ってActionScript3を書くときのおまじないですが、実際に動かしているスクリプトは「Tween24.〜」から始まる下の一行になります。
スクリプトとしては呼び名が正確ではないですが、この記事では説明しやすくするためにこの1行のActionScriptをコマンドと呼んで説明していきたいと思います。 

コピペサンプル3つ

先にも書きましたがTween24は豊富な機能を簡単に使えるためのバランスがすごくよくって、最初に紹介したリンク先にもたくさんのサンプルがあります。
ここでもできれば豊富な機能の全てを紹介したいのですが、 プログラミングが出来なくてもそれなりに動かせるサンプルを3つに絞って紹介してみました。

順番に動かす

import a24.tween.Tween24;
Tween24.serial(
	Tween24.prop(maru).x(50).y(50),
	Tween24.tween(maru, 2).x(500).y(50),
	Tween24.tween(maru, 2).x(500).y(200),
	Tween24.tween(maru, 2).x(50).y(200),
	Tween24.tween(maru, 2).x(50).y(50)
).play();

順番に動かすにはコマンドをTween24.serial()で囲んでやります。最後に

.play();

で実行させる命令を繋げて書くのを忘れずに。
中のそれぞれの動きコマンドは半角カンマで区切ります。
順番に動かすやり方を本家サイトでは直列トゥイーンとしてさらにわかりやすく書かれてあります。  

Tween24.prop(maru)

と書かれてあるところは

Tween24.tween(maru, 0)

と書いてもいいです。言い方が変ですが、要は動きに時間をかけたくないとき、tweenの時間の指定をゼロにするか、tweenのかわりにpropを使うか、好みの書き方が出来ます。
厳密にはpropを使った方が良いんですがtweenでゼロ秒指定したほうがわかりやすい人はそうしても特に間違いではないです。 

.x(50).y(200)

X座標とY座標など複数のプロパティを変化させたい場合はこのように半角のドットで繋げて書きます。これがメソッドチェーンと呼ばれる書き方で、jQueryが特に有名だと思います。
他にもXY座標などよく使われる書き方にはTween24で短く書ける他の書き方もありますが興味のある方は本家特殊プロパティを参考にしてみてください。

同時に動かす

スクリーンショットのように複数のインスタンスがある場合、これを同時に動かすにはいろいろ書き方があります。
 

個別に動かす書き方

import a24.tween.Tween24;
Tween24.tween(maru0, 5).y(200).play();
Tween24.tween(maru1, 5).y(200).play();
Tween24.tween(maru2, 5).y(200).play();
Tween24.tween(maru3, 5).y(200).play();

コマンドをそのまま個別に書く書き方です。

動かす対象を配列に入れるやり方

import a24.tween.Tween24;
var a:Array = [maru0, maru1, maru2, maru3];
Tween24.tween(a, 5).y(200).play();

動きが全く一緒であれば動かす対象を配列に入れるやり方もあります。

import a24.tween.Tween24;
Tween24.tween([maru0, maru1, maru2, maru3], 5).y(200).play();

上の二つは少し書き方を変えましたが全く同じ動きになります。
配列に入れるこの方法は、ActionScriptに慣れてない人だと難しく感じてしまうかも知れないので、特に覚える必要はないかもしれませんがTween24に慣れたときにいろんな書き方があることも紹介しておきたかったのでいちおう載せておきました。

Tween24.parallel()で囲むやり方

先ほど「順番に動かす」でTween24.serial()を使ってコマンドを囲むやり方を紹介しましたが、同時に動かすときはコマンドをTween24.parallel()で囲んで書くやり方が便利です。

import a24.tween.Tween24;
Tween24.parallel(
	Tween24.tween(maru0, 2).y(100),
	Tween24.tween(maru1, 10).y(200),
	Tween24.tween(maru2, 5).y(-10),
	Tween24.tween(maru3, 20).y(300)
).play();

なんともイラつく動きをしますが許してください。スクリプトで各々のコマンドがどういう動きを指定しているのかわかりやすく書こうとしたらこうなりました。
動きはコピペしたあとぜひとも数値をいろいろいじってみなさんで楽しんでください。

これだけだと「個別に動かす」やり方と変わらないんですが、parallelで囲むやり方を使うと先に紹介した順番に動かすserial()と組み合わせて使えるようになるので非常に強力になります。

import a24.tween.Tween24;
Tween24.serial(
	Tween24.tween(maru0, 0.5).x(100),
	Tween24.tween(maru1, 1).x(250),
	Tween24.parallel(
		Tween24.tween(maru2, 1).x(500),
		Tween24.tween(maru3, 1).x(500)
	)
).play();

毎度毎度なんともイラつく動きをしますが許してください。Tween24が悪いんじゃなく、僕のサンプルがしょぼいんです。
スクリプトをコピペして、どの数字をいじったらどうなるか、わかって頂ければ幸いです。
本家サイトに並列トゥイーンとして詳しく書かれてあります。 
いろいろ組み合わせると複雑な動きもすっきり書けそうな気がしてわくわくしてきます。 

過去に一度でもActionScript3を難しいなと思った方は、ここまでサンプルを見て気付いたかも知れません。
そう、Tween24はあんまりActionScript3っぽくない書き方で使えるんです。 これが冒頭で述べた、Tween24をお勧めしたい理由のひとつです。
僕のこのブログの過去の記事でもActionScript3のコードはいろいろ載せているんですが、ActionScript3はどうしても初心者から見るとごちゃごちゃ複雑そうに見えてしまうんですが、Tween24は非常にすっきり書くことが出来るんです。

クリックされたら動かす 

僕がTween24をおすすめする理由ふたつめ、「簡単なイベント連動ならaddEventListenerとおさらばできるかも！？」がこの書き方です。
ActionScript3が苦手な方のほとんどが、ボタンを押したりマウスでロールオーバーしたときのスクリプトの書き方を複雑に感じていると思います。それがTwee24ではこんなにすっきり書けます。
 

import a24.tween.EventTween24;
import a24.tween.Tween24;
//ロールオーバーすると明るくなってちょっと拡大
EventTween24.onRollOver(maru,
	Tween24.tween(maru, 0.2).bright(2.55).scale(1.1)
);
//ロールアウトで明るさ元通り、拡大率も元通り
EventTween24.onRollOut(maru,
	Tween24.tween(maru, 0.1).bright(0).scale(1)
);
//クリックするとビヨヨンと大きくなる
EventTween24.onClick(maru,
	Tween24.tween(maru, 0.5, Tween24.ease.ElasticOut).scale(2)
);

クリックの箇所の書き方が若干今までの書き方と違いますが、これはイージングをかけているためで、イージングについてはまた後ほど説明を入れます。
このコピペサンプルのようにクリックやマウスオーバーなどの簡単なイベントと連動してトゥイーンさせる命令だけだと、ActionScript3でaddEventListenerを駆使して書くよりもかなり簡単に書くことが出来るのがおわかりいただけたでしょうか。 
本家サイトではイベント連動トゥイーンについてもっと詳しく書かれてあります。 

奥義、自動補完とメソッドチェーン

僕がTween24をお勧めしたい理由3つめ。

CS5以降の自動補完という機能と、Tween24のメソッドチェーンという書き方をあわせると、この上なく楽しいのです。

もう一度言わせてください。

CS5以降の自動補完という機能と、Tween24のメソッドチェーンという書き方をあわせると、めちゃくちゃ楽しいのです。

どのくらい楽しいかというと、こればっかりは実際に使ってみて楽しさを体験してください。
今までこの記事ではコピペだけでも動くように紹介してきましたが、ここからは実際に入力する楽しさも味わって貰うために自動補完とメソッドチェーンについて紹介してみたいと思います。

一回アクションパネルのActionScriptを全部削除して、最初から次のようにキーボードを入力してください。

tween2　と入力したところでCommand+Space（WindowsはCtrl+Space）

スクリーンキャプチャが撮れなかったのできたない写真でごめんなさい。
何か出てきたと思います。そう、これこそがCS5以降のAdobe奥義、自動補完です。スクリプトで必要なスペルを自動的に選んでくれる頼もしい機能です！
もし写真のように補完用の小窓が 開かなかった場合は、いちおうこの記事の最後にトラブルシュートを載せていますのでそれも参考にしてみてください。

この小窓からマウスか矢印キーで「Twee24」を選んでEnterを押すとほら！
 
こうやって補完してくれます。ありがたいことに、ActionScript3苦手な人だとかなり苦手意識のあるimport文もちゃんと補完してくれます。
驚くのはまだこれからです。この状態で、マウスカーソルは3行目のTween24と書かれたおしりにあると思いますが、そこで続けて半角ドットを押してください。
 
どんどん補完してくれます。

この補完小窓が開いたら、あとは矢印キーかマウスで目的のスペルを選んでも良し、途中まで続けてスペルを入力して補完候補を絞るも良し、とにかく面倒臭いコードの入力がかなりサクサク進むことになります！
さらに、自動で補完してくれるって事はスクリプトのスペルミスでエラーになる日々ともサヨウナラです！！！！ 

自動補完の技を身につけたらこんどはTween24のメソッドチェーンの奥義を試してみましょう。
次のコードをコピペじゃなく手で入力してみてください。

Tween24.tween(maru, 5).x(100).y(100).bright(1).scale(1.5).blur(32, 2).play();

長いスクリプトももう怖くない。半角ドットを入力するたびに補完小窓が出てくると思いますが、消えてしまった場合は適宜Command+Spaceを押して自分で小窓を出します。
Tween24ではメソッドチェーンといって命令をドットで繋げて書くことが出来るのですが、例えば上のスクリプトはActionScript3を知らなくてもTween24をはじめたばかりでも、読めばなんとなく命令の意味がわかると思います。インスタンス名maruを5秒かけてX座標を100、Y座標を100、明度を1、拡大率を1.5倍、ぼかしを横32縦2になるようにトゥイーンさせています。
こういう複雑な命令をドットで繋げて書けるので、非常に書きやすく、あとで読んでも読みやすい、ごちゃごちゃしない作り方ができるようになります。

最後にTween24でイージングをする方法について紹介します。
トゥイーンを活き活きとしたものにするためにイージングといって動きに緩慢をつけることが多いのですが、これがやはりTween24ではメソッドチェーンとCS5以降の自動補完と組み合わせて非常に便利なのです。

Tween24でイージングをつけるにはtweenコマンドの秒数の指定の後にイージングを指定するようにします。
言葉にすると複雑そうですが実際に書いてみます。

import a24.tween.Tween24;
Tween24.tween(maru,2,Tween24.ease.BackOut).x(300).play();

このサンプルではTween24.ease.BackOutこの部分で、行って戻るというイージングを加えています。
イージングについては冒頭で紹介したリンク先のにゃあプロジェクトさんのサイトがかなり詳しく載ってあるので是非とも参考にしてください。
本家サイトでもイージングの設定について書かれてあります。

いかがだったでしょうか。
自分でも書いてて誰に向けた記事なのか全然わからなくなってきました。サンプルもしょぼいし。
それでも、なんかこう、僕も私もやってみようかな、って人が増えるとうれしいです。紹介した甲斐があります。 
Tween24は使えば使うほど楽しさの発見があるので、長々と書いた割にこの記事ではTween24の楽しさの1割も紹介し切れていないのが残念ですが、 興味を持つきっかけくらいになれば幸いです。
興味もった方は是非とも最初に紹介したリンクを読みまくってTween24を楽しんでみてください！ 

おまけ：自動補完がきかない！？

Command+Spaceを押してもこの記事のように自動補完小窓が開かない人、あわてずに次のことを確認してみましょう。

1. わかっているとは思いますが、Command+Spaceの「Space」とはスペースキーの事です。
2. flaを保存しているフォルダの絶対パスに「日本語フォルダ名」が含まれていませんか？flaの保存フォルダの絶対パスの途中に日本語が入るとどうも自動補完ができなくなる場合があるようです。

WebGL版です。

クリックで別ウインドウで開きます。

今回は、はじめてHTML5を触ってみた中でわかったことを書きたいと思います。

HTML5でJavascriptからグラフィックを操作するには、従来のdivの操作に加えてSVGとCanvasを使う方法が加わったらしく、とりあえず今回はCanvasを使ってみました。

3Dライブラリthree.jsについて

ご存じのとおり、SVGはベクターを扱うタグでして、Canvasはピクセルを扱う場所になります。AS3だとベクターもラスターもどっちもよく扱うのでJSでも出来るんだろうけど流石に今回ピクセル操作ばっかりプログラミングするのは面倒くさかったので何かいいライブラリはないかと思っていると、どうやら3Dのライブラリthree.jsが何やら面白そうです。
ある程度のJavascriptの知識と、3Dライブラリを使ったプログラムの経験があればすんなりと使うことが出来ました。
がんばってAPIを掘り下げれば、かなり面白いものが作れそうです。

注意すべき点は、たぶんバージョンアップのためだと思うのですがAPIの仕様が変わっていて、古い解説文書などですと動かない場合があることです。
あとどうしてもドキュメントが少ないので、特にリファレンスが無いと何も出来ない僕にとっては、慣れ親しんだASDocくらい詳しいリファレンスが無いのが地味に大変でした。

ただし、クラス名やプロパティに変な癖も無いのでリファレンスが足りて無くても何とかなりました。
一般的な3Dライブラリと似たような感じで

• シーンを作って、カメラを作って、レンダラーを作って
• シーンや表示オブジェクトは入れ子構造にできて
• ジオメトリとマテリアルを持つメッシュを作成して表示オブジェクトに追加
• シーンとカメラを指定してレンダリングを実行

という、ごくごく自然な流れでプログラミングできました。

面白いことに、WebGLでレンダリングするレンダラーと、素のCanvasにレンダリングするレンダラーがあるんですが、その二つをかなり簡単に切り替えられるんです。
ここらへんは型付けがゆるいJavascriptならではの面白みだと思いました。

制作環境について

かなり残念な英語力と記憶力、たぐいまれなるタイピングミスの持ち主の僕にとって、開発環境こそが頼みの綱です。
今回は@kotaro_tanさんに教えて頂いたWebStormというIDEを使ってみました。

なにやらかっこいいクラスを作ってるなう

Javascriptをクラスで開発していくことについて

前回の記事「Actionscript3erが覚えるJavascriptでのクラス開発まとめ」でJavascriptでクラスを作って開発するスタイルをまとめてみたわけですが、手前味噌ながらこれが非常に役に立ちました。
javascriptにはjavascriptの面白さがあるので、AS3のクラスっぽい作り方が無理矢理なのであれば何もわざわざjavascriptの面白さを消してまでクラス作りをする必要は全くないと思っていたのですが、無理矢理どころかむしろだいぶ自然にクラスが使えたので、だいぶ効率よく作ることが出来ました。
後述するjsファイルの重複ロード問題も今回はクラスを使って解決できましたし、デザインパターンが使えるのもなによりうれしいひなまつりです（こんど娘が初節句なんです。楽しみで楽しみで）。
クラスは僕も最初かなり苦手意識を持っていましたが、品質を上げるための先人の知恵の結晶なので今後ももっともっと勉強していきたいです。

Javascriptのゆるさについて

Javascript特有の「ゆるさ」は長所でもあり短所でもあるんですが、久々にまあまあの量のJavascriptをコーディングして、このゆるさもかなり楽しめました。
個人的にはガチガチの型付け言語をガチガチのIDEで扱った方が実質的なコーディング速度は速いと思うんですが、Javascriptの設計のゆるさからくる「アイデアが形になるまでの速度感」はAS3とはまた違った面白さがあります。
AS1の頃の面白さとHTML5の新鮮さの良いところどりはずるいと思います。

javascriptの楽しさをたっぷり楽しんだ上で、今後の課題も書き留めておきたいと思います。
あくまでActionscript3よりな人間が久々に遊びでJavascript触ってみて対応というか妥協した程度の記録ですので、今後かならず解決するべきだしもっといいノウハウは他にあるはずです。

変数やオブジェクトがいくらでも上書きできてしまう

定数は無理としても、prototypeに閉じ込めるなどしてprivateな空間は作るべきなのでしょうが、今回はそこまでしませんでした。変数のアクセス範囲を出来るだけ狭くすることが鉄則なのに、非常に悩みどころです。

名前空間について

いちおう最初のファイルに

if(!jp_utweb_namespace){
    var jp_utweb_namespace = {};
}

こういう事書いておくことで「俺はグローバルの名前空間をあんまり汚染しない男だぞ」アピールをしているのですが、正直気に入っていません…。
最低でもプロジェクトごとにも別けたいし、ネームスペースの変数名そのものを持ち回りたいんですが、そこらへんは今後の課題として残りました。

重複ファイルのロードについて

こういったjavascriptファイルがあったとして、
onece.js

;(function(ns){
    alert('一回しか実行を想定していない処理！');
})(jp_utweb_namespace);

HTMLで二回読み込まれてしまうと

当然二回実行されてしまいます。
実行前にDOMを調べて、src属性に自分のファイル名と同じscriptタグが２つ以上ある場合は一回しか実行しない、といった処理をすればいいのですが、うまくライブラリ化できなかったので、それは今後の課題になります。

今回とった方法では、クラスを作成する処理ばかりにしておいて、最後にrun.jsというスクリプトファイルのみ、重複チェックを行って、ActionScriptでいうドキュメントクラスに相当するクラスを一回だけ実行する、というやり方にしました。

クラスを作成する直前に

;(function(ns){
    if(!!ns.Mein){
        return;
    }
    ns.Main = function(){};
})(jp_utweb_namespace);

こんな感じでチェックを入れても良かったのですが、タイプミスなどによるデバッグがしづらくてかえって危険なのでやめました。
実際に上のコードはこんなに短いのに見つけるのが困難なバグがあります。
ここは素直に

;(function(ns){
    ns.Main = function(){};
})(jp_utweb_namespace);

こう書くことにしました。
重複ロード時にクラスが複数回生成されてしまうコストが発生しますが、プログラムの意図しない箇所でバグるよりはマシかと。

まとめ

いまのところまだちょっと触って遊んでみた程度ですので、今後案件に投入できるかどうかの判断もまだ現段階ではつきませんが、面白い技術であることには間違いないです。
少なくともWEB上でリッチなインターフェースやモーション、体験を作るということにおいてはActionScripterこそ親和性の高い技術なので、これからどんどんと横断的に開発できるノウハウを見つけ出してハイブリッドな開発者がたくさん増えると面白いかと思います。

そこでJavascriptでクラスを作ったりするときに「あれ？ASだとこうやるやり方、JSだとどうやるんだっけ」ってのを減らせるように、完全に個人的な備忘録を作ってみました。自己流なうえにオレオレ規約ばっかりで恥ずかしい限りですがせっかく作って公開したのでなんらかのお役にたてばうれしいです。

Javascriptでのクラスの作り方は本当にたくさんの方法がありますが、その中で僕が一番馴染んでいる書き方だけを勝手に選んでのせています。
さっきふと思い立ってやった方法をそのままばんばんのせている感じです。
あと、JSとの類似性を浮き上がらせるためにASにはあえて型を宣言しないで書いています。
ASやJSの綺麗なコードの書き方ではなく、あくまでもASに似せたやり方でJSを書いていく方法を探った記事ですのでご了承ください。
あと、技術書でも何でもなくあくまで個人の備忘録ですので恥ずかしながら盛大に間違えている箇所がたくさんあるかと思います。その場合間違いは常に正していきたいのでご指摘頂けると大変嬉しいです。
ほんと僕のブログ間違いもおおいんで前置きも長々となってしまってすいません。

同じ処理を最初にAS3、次にJSの順番で書いてみたいと思います。

クラスを使ってみる

クラスを使う方法はまさに全く同じです。
actionscript3

//インスタンスメンバを使う場合。
var d = new Date();
trace(d.getTime());
//クラスメンバを使う場合。
trace(Math.random());

javascript

//インスタンスメンバを使う場合。
var d = new Date();
console.log(d.getTime());
//クラスメンバを使う場合。
console.log(Math.random());

つまり作り方の違いさえうまく吸収できれば、クラスを使うぶんにおいてはほぼ全くといっていいほど同じように使えるようになるってことではあーりませんか。
こりゃいいや、さっそく作り方をまとめてみよう。

クラスを作ってみる

AS3のほうは意図的にpackageブロックを書いていません。
actionscript3

public class Human {
	public function Human() {}
}

javascript

/**
 * @constructor
 */
function Human(){};

Javascriptではfunction宣言するだけでクラスが作れます。この部分がそのままコンストラクターになります。
作ったクラスは先ほどみたいにASでもJSでも全く同じように

var John = new Human();

こういうふうに使えるようになります。

プライベートプロパティ、プライベートメソッドを作ってみる

JSでは言語としてprivateをサポートしてないっぽい？
言語がサポートしていない以上、なんとかして隠匿化するコードを書いた方が良いのかもしれませんが、個人的にはオリジナルで処理を組むよりは規約を作ってこういったチェックツールに頼る方が好みなので、JSのほうはGoogleのコーディング規約を参考にこうしてみました。
まあClosure Linterまだ使ったことないですが。
actionscript3

public class Human {
	public function Human() {}

	private var himitsu_ = 'わりと最近うんこをもらした';

	private function think_() {
		trace('（´-`）.｡oO（蛇口からビールが出ればいいのになあ…。');
	}
}

javascript

/**
 * @constructor
 */
function Human(){
    /** @private */ this.himitsu_ = 'わりと最近うんこをもらした';

    /** @private */ this.think_ = function() {
        console.log('（´-`）.｡oO（蛇口からビールが出ればいいのになあ…。');
    };
};

JSのほうは、コンストラクタ内で宣言することで「これはプライベートな空間なんですよ」と（自分が）強く思い込むことにしました。

2012/01/29 追記
コンストラクタ内でvar で宣言しておいて、getter/setterで操作するってやり方を今知りました。うーん、それ使うかどうしようか迷う…。

2012/01/29 さらに追記
さっそく@taikikenさんからpublic/privateをわける方法を教えて頂きました。
ツイッター
JavaScriptでOOP – Classみたいなのにprivateな関数と変数 | イナヅマtvログ
コンストラクタ内でvarでプライベート宣言しておいた上で、mainというfunctionもprivateで保持しつつそこのprototypeにpublicな変数と関数を入れておいてreturnするというやり方ですね（僕が言葉にするとかえってわかりにくいですが教えて頂いたコードはすごい明快です）。プロトタイプベースのクラス、奥が深い！

パブリックプロパティ、パブリックメソッドを作ってみる

JSがprivateをサポートしていない（未確認）以上、publicもファブリックもあったもんじゃない（最近IKEAに行きました）のですが、JSのほうではprototypeに宣言することで「これはパブリックな空間にあるんですよ」と（自分が）強く思い込むことにしました。
actionscript3

public class Human {
	public var syumi = 'プリクラ集め、水に向かって綺麗な言葉を言い続けること';

	public function work() {
		trace('|^o^|＜ひきこもりぎみなのでそとをあるくのはにがてです');
	}
}

javascript

/**
 * @constructor
 */
function Human(){};
/** @public */ Human.prototype.syumi = 'プリクラ集め、水に向かって綺麗な言葉を言い続けること';

/** @public */ Human.prototype.work = function() {
    console.log('|^o^|＜ひきこもりぎみなのでそとをあるくのはにがてです');
};

スタティックなプロパティやメソッドを作ってみる

JSではクラス（正確にはFunctionオブジェクト？）に直接定義することでstaticになりました。
actionscript3

public class Human {
	public static function help() {
		trace('困ったときはお互い様。');
	}
}

javascript

/**
 * @constructor
 */
function Human(){};
Human.help = function() {
    console.log('困ったときはお互い様。');
};

助け合いの心は人が誰もが持っている心。美しいですね（美）

継承してみる

僕の作ったクラスがだいぶ人としても完成されてきた頃なので、ここらで継承して新たなクラスを作ってみたいと思います。
actionscript3

public class Hentai extends Human{
	public function Hentai() {}

	public function zenra() {
		trace('╰⋃╯');
	}
}

javascript

/**
 * @constructor
 * @extends {Human}
 */
function Hentai() {};
Hentai.prototype = new Human();
Hentai.prototype.zenra = function() {
    console.log('╰⋃╯');
};

Javascriptでは新たなクラスのprototypeにスーパークラスをインスタンス化させると継承できました。

オーバーライドしてみる

JSはそのまま親クラスを上書きするだけとしています。
actionscript3

public class Hentai extends Human{
	public override function work() {
		//super.work();
		trace('三╰⋃╯');
	}
}

javascript

/**
 * @constructor
 * @extends {Human}
 */
function Hentai() {};
Hentai.prototype = new Human();
/** @override */ Hentai.prototype.work = function() {
    //this.constructor.prototype.work.call(this , arguments);
    console.log('三╰⋃╯');
};

インターフェースを使ってみる

JSではインターフェースもサポートされていないので、インターフェースに似たふるまいをするコードを書くか書かないか、書くとしたらどこまで書こうか、ここ一番悩んだんですが、結局コードとしては一切書かないことにしました。
だいたいこの辺の記事を参考に、規約で実現する方法を探っているところです。今のところコメントにinterfaceと書いてるだけですが。
actionscript3

public interface IBijin {
	function yasashii();
	function iinioi();
}

public interface IIsya {
	function care();
}

public class Jyoi implements IBijin, IIsya{
	public function Jyoi() {}
	public function yasashii() {}
	public function iinioi() {}
	public function care() {}
}

javascript

/**
 * @interface
 */
function IBijin() {};
IBijin.prototype.yasashii = function() {};
IBijin.prototype.iinioi = function() {};

/**
 * @interface
 */
function IIsya() {};
IIsya.prototype.care = function() {};

/**
 * @constructor
 * @implements {IBijin, IIsya}
 */
function Jyoi() {};
Jyoi.prototype.yasashii = function() {};
Jyoi.prototype.iinioi = function() {};
Jyoi.prototype.care = function() {};

こんな感じでしょうか？コードがなんかだいぶ投げやりになってきたなあ。

さいごに

僕がまとめた限りではまあだいたいこんなものではないでしょうか。
無理矢理にしてまでJSをASのクラスライクに書いていく必要はないと思いますが、わりかし自然にASっぽく書くことも出来なくはなさそうな感じはします。
今話題のArctic.jsやenchant.jsなど（ふたつとも僕はまだ残念ながら使えていないんですが）のようにASライクに書けるJSのライブラリも増えてきましたし、とりあえず横断的に開発してみたくてまとめてみました。
ASもそうですがJavascriptも独学の完全自己流なので本当は晒せるほどは自信がないですが、何かしら役に立てばなによりです。

1. ObjectタグのIDのどこかに「external」を入れる。
2. Javascriptの名前空間を出来るだけ汚染しない。
3. 初期化の実行順序を守る

2011/10/23 追記
ひろゆきさんに教えていただいたんですが（こちら）、IDに「external」を付けなくても動くそうです。

AS側でやっといて便利なのは次の点です。

1. JavaScriptとの連携は必ずシングルトンを介して行う。

順番にみてみたいと思います。

Cap1.ObjectタグのIDのどこかに「external」を入れる。

こちらの記事にあるように、IEのアホウはトンマなヤロウであるわけです。
本来ならばIEのマヌケなバグにこちらが付き合ってやるいわれはないわけですが、ObjectタグのIDのどこかしらに「external」と入れてやれば万事解決するのであれば、そうしてやろうではありませんか。
それが大人というものではないでしょうか。
なのでSWFObjectの記述はこんな感じになるかと思います。

;(function(){
	var swfDirectory = "/";
	var swfFileName = "index.swf";
	var targetId = "flashcontent";
	var width = "800";
	var height = "600";
	var version = "9.0.45";
	var expressInstall = swfDirectory+"commons/scripts/swfobject/expressInstall.swf";
	var flashvars = {};
	flashvars.jsNamespace = "jp_utweb_ExternalInterface_sample";
	var params = {};
	params.menu = "false";
	params.quality = "best";
	params.scale = "noscale";//showAll
	params.salign = "tl";
	params.wmode = "transparent";//opaque wmode
	params.swliveconnect = "true";
	params.allowfullscreen = "true";
	params.allowscriptaccess = "always";
	params.allownetworking = "all";
	var attributes = {};
	attributes.id = "external_content";
	attributes.name = "external_content";
	attributes.align = "middle";
	swfobject.embedSWF(swfDirectory+swfFileName, targetId, width, height, version, expressInstall, flashvars, params, attributes);
})();

まずは22行目、23行目、ObjectのID属性に「external」が出現していることに注目してください。
10行目の

flashvars.jsNamespace = "jp_utweb_ExternalInterface_sample";

は次のCap2で説明します。

Cap2.Javascriptの名前空間を出来るだけ汚染しない。

基本的には匿名関数とか使って、ぱっと実行された間に必要なときだけ呼び出されてあとは何事もなかったかのようにぱっと消えるのは格好良いんですが、ASからJSを呼び出そうとした場合、いろいろ試してみたんですがどうしても最低ひとつはJSの名前空間を汚染する必要があるという結論に至りました。
これに関しては結構いろいろためして、一見して無駄だと思えるような、匿名関数の中でSWFObjectを実行してその中でSWFはJS側の関数を呼ぶことで全く名前を消費しない方法を使えないかとかいろいろ試したのですが僕のスキルではどうにもならず、結果としてどうしても一個だけ名前を消費する方法しか作れませんでした。
これがそのJavaScriptのテンプレートです。

;var jp_utweb_ExternalInterface_sample;
(function(){
	this.getElementFromName = function(name){
		if (navigator.appName.indexOf("Microsoft") != -1){
			return window[name];
		}else{
			return document[name];
		}
	};
	jp_utweb_ExternalInterface_sample = function(){};
	jp_utweb_ExternalInterface_sample.ready = function(){
		//ActionScriptが実行可能状態になったら最初に呼び出される。
		//JS側からAS側に関数を呼び出すときは必ずこの関数が実行された後にしなくてはならない。
	};
	jp_utweb_ExternalInterface_sample.hoge = function(){
		//ActionScriptから適時呼び出される。
		var swf = this.getElementFromName("external_content");
		if(swf){
			//ActionScriptの関数を実行。
			swf.asFunction();
		}
	};
})();

一行目の

;var jp_utweb_ExternalInterface_sample;

これが唯一の名前空間となります。
これと全く同じ名前を、Cap1の10行目で

flashvars.jsNamespace = "jp_utweb_ExternalInterface_sample";

というふうにFlashに伝えてあることによって、Flash側ではJavaScriptへの呼び出しを可能にします。
Flash側での呼び出しはCap4で説明します。

コーヒーブレイク：ぼくのかんがえたさいきょうのJS名前空間

一旦休憩です。
非常にくだらない事を書くので、読み飛ばしてCap3まで進めることを強くおすすめします。
僕がJavaScriptを触っていて特に気を遣うのが名前空間の汚染なわけですが、大規模案件にかかわらず一人で開発しているような趣味のプログラミングでもどうしてもグローバルの名前空間の汚染が避けられない状況がよく出てきます。
僕は僕なりにいろいろ調べてはみたんですが、JavaScriptは言語仕様としてどうしてもこれは避けられないのではないかと思うようになったわけです。
名前空間を擬似的に扱うクラスを作ってみたりもしたんですが、そのクラスに一つ名前空間を使うという仕様になってしまい、これはだめだということで他のアプローチで名前空間を確保する方法を考えてみました。

1:僕を褒める言葉を使用する。

調べてみたんですが、少なくともインターネット上では僕を褒める言葉が使われている回数は皆無なのですね。
そこでこれを利用して僕を褒め称える変数名を使用すると、絶対に名前空間が保証されるというアイデアです。
こんなふうに使います。

var 正宗さんは格好いい = "ほげ";
var 正宗さんの言うことは常に正しい = "ふが";

2行目のように、僕を恒常的に肯定する言葉を用いるとより強固になります。

2:自作ポエムを変数名にする。

変数名などを自作のポエムにすることで著作権によってプログラマーの死語50年間まで担保される非常に強固な名前空間を仕様することができます。
この場合の名前空間の強度はディズニー法の強度に依存します。

var かにをたべ　るとくちのなか　かゆくなる = "hoge";

プログラムが一気に風流になるという副次的効果付きでとてもおすすめです。
仕方のない話しはここまでにして、本題に戻ります。
今まではSWFを表示させるためにブラウザ側やHTML側、JavaScript側の問題でしたが、次はActionScript側の問題になります。

Cap3.初期化の実行順序を守る

よっぽどの理由がない限り、JS側からAS側に働きかける場合、AS側が準備完了かどうかを待ってJSは働きかけたほうがより安全だと思います。
つまりAS側が準備完了になった時点ではじめてJSに通知して、JSはその通知を待ってASに働きかけるようにするのが定石と言えます。
Cap2の11行目から14行目

jp_utweb_ExternalInterface_sample.ready = function(){
 //ActionScriptが実行可能状態になったら最初に呼び出される。
 //JS側からAS側に関数を呼び出すときは必ずこの関数が実行された後にしなくてはならない。
};

を用意しておき、必ずActionScript側から最初に呼び出されてJSの初期化をここで行うようにします。
ここまでが僕が作った必ず守るべきルールになります。
次からはActionScript側からJSと連携するのに便利な方法をまとめたものになります。

Cap4.JavaScriptとの連携は必ずシングルトンを介して行う。

この記事の最初に提示したgithubのサンプルソースを見ていただくとわかりやすいんじゃないかと思うんですが、Javascriptとの連携はそれを専門にしたシングルトンクラスにまかせることにします。
ちょっと簡単に書いてみます。
ActionScript3です。

package
{
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.external.ExternalInterface;

	public class JavascriptTool extends EventDispatcher
	{
		public static const DO_HOGEHOGE:String = "doHogehoge";
		public static const DO_FUGAFUGA:String = "doFugafuga";

		private static var _instance:JavascriptTool;

		private var _jsNamespace:String;

		public static function getInstance(jsNamespace:String = null):JavascriptTool
		{
			if(!JavascriptTool._instance){
				JavascriptTool._instance = new JavascriptTool(new Enforcer());
				if(!jsNamespace){
					throw new JsNamespaceError("Javascriptと連携する名前空間を指定してください。");
				}else{
					JavascriptTool._instance._jsNamespace = jsNamespace;
				}
				try{
					ExternalInterface.addCallback("jsHoge", JavascriptTool._instance.hogehoge);
					ExternalInterface.addCallback("jsFuga", JavascriptTool._instance.fugafuga);
				}catch(error:Error){

				}
			}
			return JavascriptTool._instance;
		}

		public function ready():void
		{
			try{
				ExternalInterface.call(_jsNamespace + ".ready");
			}catch (error:Error){

			}
		}

		public function hogehoge():void
		{
			dispatchEvent(new Event(DO_HOGEHOGE));
		}

		public function fugafuga():void
		{
			dispatchEvent(new Event(DO_FUGAFUGA));
		}

		function JavascriptTool(enforcer:Enforcer):void{}
	}
}
class Enforcer{}
class JsNamespaceError extends Error{
	public function JsNamespaceError(message:String):void
	{
		super(message);
	}
}

シングルトンの説明は省いたとして、これ。
ExternalInterface.addCallback
第一引数がJavascript側から見える関数。
第二引数が実際のActionScriptの関数。
APIとして多言語に対しての接続部分が隠匿化できるので非常に優れてるといえますけど作業する本人達にとってはややこしいことこの上ないです。
この部分を埋めるデバッグツールは存在しないわけですし。
そうは言ってもわざわざJS側とAS側で呼び出す関数名を指定できるってことはJS側とAS側で違う名前にしておいたほうがいいって事ですかね？
僕はそう解釈して実行していますが、このへんの名前の命名規則になにか良い方法があったら教えていただきたいです。

あと21行目、他はイレギュラーな使われ方をしたときにわざわざコンパイルエラーを出すように作ってあるのに対して、この部分だけはランタイムエラーになるようにしか作れませんでした。
シングルトンの生成される最初だけ値を渡して初期化したいときに、初期化のタイミングで値が渡されたときとそれ以外で値が渡されたときの両方でコンパイルエラーを出す何か上手い方法があればどなたか教えてください。

というわけでまだまだ未完成ながらもこのシングルトンクラスをいきなりドキュメントクラスで使ってみたのがこちら。
ActionScript3です。

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;

	public class externalinterfaceSample extends Sprite
	{
		private static const _DEFAULT_JS_NAMESPACE:String = "hogehoge_msturi";
		public function externalinterfaceSample()
		{
			if(stage){
				_init();
			}else{
				addEventListener(Event.ADDED_TO_STAGE, _init);
			}
		}

		private function _init(e:Event = null):void
		{
			if(!(!e)){
				removeEventListener(Event.ADDED_TO_STAGE, _init);
			}

			var tf:TextField = new TextField();
			tf.border = true;
			tf.autoSize = TextFieldAutoSize.LEFT;
			addChild(tf);

			var jsNamespace:String = _DEFAULT_JS_NAMESPACE;
			var flashVars:Object = stage.loaderInfo.parameters;
			if(!(!flashVars.jsNamespace) && flashVars.jsNamespace.length > 0){
				jsNamespace = flashVars.jsNamespace;
			}
			var jsTool:JavascriptTool = JavascriptTool.getInstance(jsNamespace);
			jsTool.ready();

			tf.text = "Javascriptからの呼び出しが実行可能になった。";

			jsTool.addEventListener(JavascriptTool.DO_HOGEHOGE, function(e:Event):void{
				tf.text = "JavascriptからjsHogeが呼び出された。";
			});
			jsTool.addEventListener(JavascriptTool.DO_FUGAFUGA, function(e:Event):void{
				tf.text = "JavascriptからjsFugaが呼び出された。";
			});
		}
	}
}

こんな感じでどこでもシングルトンクラスからJSを実行できるし、逆にJSからの呼び出しもいつでもどこでもEventを受け取る形でキャッチできるようになるんだよ〜、というサンプルでした。
ActionScript、スマートすぎる。

このCap4は全てgithubのままですが、最後にいちおうgithubのindex.htmlのソースも載せておきます！

ちょっと実験用に名前のスコープをいじっております。
特にjp_utweb_ExternalInterface_sampleを返す48行目は、明示的にpublicな関数を指定してやるとJavaScript側からも実行できるようになります。

まとめ

やっと最近コードスニペットというのを覚えたので、コードの再生産がだいぶマシになりました。
毎回毎回こんだけ再発明するのしんどいですもんね。
まだまだ未完成な部分も多いですが、もっと上手い方法を随時見つけていきたいと思います！

ではFlashで呼び出してみよう！

ここまでの道のりが長かったですね。安心してください。それまでのほとんどが僕のゴタクです。
僕がはじめるにあたって先ず理解しておかないといけないことが多すぎただけで、ほとんどの人は実際にはここまですいすいと来られたはずです。

PixelBenderのpbjファイルをFlashのActionScriptで使うには二種類の方法があります。
実行時に外部ファイルとして読み込むか、Embedであらかじめ埋め込んでおくかです。

前者はXMLや外部JPEGファイルと同じく、URLLoaderを使って読み込む方法です。
Progressionだとこんな感じで

addCommand(
	new LoadURL(new URLRequest(Directory.PBJ_DIR + "myPixelBender.pbj"), {dataFormat:URLLoaderDataFormat.BINARY}),
	function():void{
		var t:Command = this as Command;
		_shader = new Shader(t.latestData);
	}
);

Progressionを介さずに普通にAS3で書く場合も、URLLoaderのdataFormatをちゃんとURLLoaderDataFormat.BINARYにしておけばうまくいくと思います。
こんな感じ。

var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.BINARY;
loader.addEventListener(Event.COMPLETE, _onCompleteHandler);
loader.load(new URLRequest(Directory.PBJ_DIR + "myPixelBender.pbj"));
private function _onCompleteHandler(e:Event):void
{
	var shader:Shader = new Shader(loader.data);
}

実際にはエラーハンドリングなんかも行う必要ありますがそれはまた別の話なのでここではあえて触れないでおきます。

Embedであらかじめ埋め込んでおく方法は、こんな感じで

[Embed(source="/../shaders/myPixelBender.pbj", mimeType="application/octet-stream")]
private var _myPixelBenderKernel : Class;
private var _myPixelBenderShader : Shader;

クラスのインスタンス変数として埋め込んでおいて、適切な場所で

_myPixelBenderShader = new Shader(new _myPixelBenderKernel());

として呼び出してやるやり方です。

実行時に外部ファイルとして読み込むか、Embedであらかじめ埋め込んでおくか、どちらのやり方もメリットデメリットあるので自分で適切だと思う方法で呼び出せばいいのですが、もしその判断が出来ない・迷うようであれば後者のEmbedで埋め込む方法をおすすめしておきます。
シェーダーを外部読み込みにするメリットが思いつかないのであればほとんどの場合外部読み込みのデメリットのほうがEmbedする方法のデメリットを上回るからです。

呼び出したのでどうやって使おう？

2種類の呼び出しの方法のどちらを使っても、ActionScriptではShaderクラスとして読み込まれることがわかりました。
ここでActionScriptリファレンスのShaderクラスとそれに付随するShader何々クラスを一読しておくとだいたい何すればいいかわかるかと思います。
僕みたいにクラスの動作が全て頭に入っているわけではないひよここそ、リファレンスの存在は欠かせません（いまだにArrayにさえ、こんなメソッド無いかな〜とリファレンス引きながら作業してるくらいです）。

FlashがPixelBenderをShaderで読み込んだら、いろいろ出来ることがあるんですが、いまのところ僕はShaderJobを使うことをおすすめします。
理由としてはShaderJobが圧倒的に速いからです。
ブレンドモードとして使ったり、塗りに使ったり、フィルタとして使ったり、も確かに面白いのですがそれらがどうしても最終的にFlashの処理を挟む必要があるのにたいして、ShaderJobは同じ事が出来てしかも完全にFlashと処理が切り離せるので「Flashの処理速度という概念を無かったことに出来る」という冒頭の売り文句が発揮できるからです。
しかもFlashとの同期処理・非同期処理のどちらで処理するかを実行時に選べるのです。
これのおかげでShaderJobを使うことによってFlashの描画処理を徹底的にチューニングすることが出来るようになると思います。僕もまだそこまでには達していませんが、少なくともその入り口には立てた気がします。

ShaderJobを使うには、まず入力側のBitmapDataと出力先のBitmapDataが必要になります。
入力の指定については、PixelBenderのKernelの書き方によって違うのですが、

_shader.data.src.input = _inputBitmapData;

こんな感じで指定してやります。
「src」っていう変数名が、ここがKernelで使ってる変数名によって違うので注意が必要です。
PixelBenderで
input image4 src;
と書かれてあれば

_shader.data.src.input = _inputBitmapData;

と書きますし、もし
input image4 sauce;
だと

_shader.data.sauce.input = _inputBitmapData;

こういう感じでActionScriptを書くようになるかと思います。

あとはShaderJobの処理のさせ方ですが、
ShaderJobのリファレンスを読むとコンストラクタの第二引数に出力先のBitmapDataを指定しないといけないことになっているのがわかります。
そこでこんなふうに

var _shaderJob:ShaderJob = new ShaderJob(_shader, _outputBitmapData);

ShaderJobクラスのインスタンスを生成します。
そのあとおもむろに

_shaderJob.start();

してやってもいいんですが、面白いことにShaderJobはstartする際に処理を非同期で実行するか同期して実行するかを選べます。

//_shaderJob.start();
_shaderJob.start(false);

このいずれの場合も非同期で実行します。
なので

_shaderJob.addEventListener(ShaderEvent.COMPLETE, _onShaderJobCompleteHandler);
//_shaderJob.start();
_shaderJob.start(false);

こんな感じでイベントリスナーを登録しておくとシェーダーの処理が完了したタイミングを捕捉できるようになります。
画面の処理のために入力や画面の更新などFlashの他の処理を遅らせたくない場合に、完全に処理を分離できるので非常に効果を発揮します。

_shaderJob.start(true);

こうした場合には同期して実行します。
どのみち同期しててもPixelBenderのShaderJobの処理はほとんどの場合は一瞬で終わるので誤差は一瞬ですが、画面更新のタイミングと処理を完全に同期させておきたい場合に効果的です。

さいごに

書いててほんと自分でもびっくりするくらい長い記事になったのですがどうでしょうか。
ほとんどがPixelBenderの技術の話しではなくてPixelBenderとはどういう動作をするものなのかの概念の話しばかりだったと思います。
それだけ僕にとってPixelBenderは概念的な障壁が高く、でも一旦概念を理解してしまえば技術的にそんなにハードルの高いものではない、むしろとっつきやすく奥の深いとても楽しいものだと言うことが解りました。
それに一旦こうして記事にして書いてしまえば、次からPixelBenderの技術的な記事書くときに「概念についてはこちらを参考にしてください」と言えるので、むしろ今後PixelBenderを研究していく布石になったと思います。

僕がPixelBenderを学びはじめるに当たって参考にしたAS3アニメーションのオライリー本にも書かれてあることですが、PixelBenderはOpenGLのシェーダー言語GLSLに非常によく似た言語で、そのノウハウがだいぶ参考になるかと思います。

僕個人の考えとしては、ブラウザ上での描画に限って言えば並列処理を実現するための方法はさまざまに企画が立ち上がっていますが、3年以上も前から提供されていてしかもFlashさえ走ればブラウザを問わず納品レベルできちんと動くPixelBenderには一日の長があるかと思います。
PixelBenderそのものが意外にもとっつきやすくて奥が深く、それでいてFlashが何十倍も楽しくなる面白い技術なのも今回学ぶに当たって新鮮な驚きでした。

この技術がもっと普及して研究がされたら、もっと面白い使いどころが増えると思いますし今までFlashの処理速度が枷だったことがいろいろと解決する可能性が高いかもしれません。
今回の記事ではあえて書かなかったのですが、僕はPixelBenderをByteArrayとかVectorで処理する方法にも非常に興味を持っています。
この記事がきっかけになって、少しでもPixelBenderの使いどころの上手い人が増えて今まで処理速度がネックになっていた問題が解決できれば、WEBの表現はもう一段階自由になるのではないでしょうか。

そこまでは夢見すぎだとしても、少しでも処理速度による表現の限界を解決するヒントになれば幸いです。

さてさて、今さらながらPixelBenderについて勉強してみました。PixelBenderって登場したの確か3年以上も前ですよねえ。
普段から情報共有が 盛んなFlashにおいて、僕が今まで3年もPixelBenderを使っていなかった理由はひとえに「PixelBenderが何をするものなのかわかりにくい！」からでした。
PixelBenderを使うとどうなるのか、Flashのどんな場面で使えるのか、どうやって使うのか、いやいやそれ以前の問題でただひたすら「PixelBenderが何をするものなのかわかりにくい！」のでした。
もちろん、Adobeの告知不足とかそういった事が言いたいわけではなくて、僕のスペックではPixelBenderはわかりにくいからとっつきにくかった。というお話です。

で、勉強してみてわかった結果は、「PixelBender、かなり使える」ということです。
簡単に言うとFlashの処理能力が別次元で向上します。
おおげさですがおおげさでない表現として「Flashの処理速度という概念を無かったことに出来る」ほどのパフォーマンスです。
「別次元」とか「処理速度という考え方を無かったことに」というのは、太字にしたのは煽りでもなんでもなく実際に本当に処理方法が違うからです。これに関しても出来るだけ簡単に説明します。
いったんサンプルを見てください。

ウエブカメラがあれば接続の許可を求められると思いますので許可してください。
ウエブカメラがない、あっても許可しなかった場合は、僕が今年の夏にバラ園にいったときの思い出の写真がかわりに表示されることになると思うので、そういった悲しい事故がないよう、是非ともウエブカメラを使って遊んで頂くことを強くおすすめします。

マウスをうごかしてもらうとわかると思うんですが、昔からよくある、水面の波紋のような画像処理を効果に加えたサンプルです。
DisplacementMapFilterとかで手垢がつきまくっているので、アンテナの高い人には今さらなサンプルです。
ここで見て貰いたいのは、処理のほとんどをPixelBenderにまかせたことによる処理速度の安定です。

サンプルのソースコードはこちら。
https://github.com/masamunet/blog_samples_pixelbender_practice

ソースコードをみてもらってもわかるように、基本的に僕はなにもしていません。処理のほとんどを外部のPixelBenderファイルに頼っています。
具体的にはこちらのソースをほとんどの部分で使用しています。
僕がやったことと言えば、もともとDisplacementMapFilterで処理していた部分もShaderJobを用いてPixelBenderで行うように変更したくらいですが、そのPixelBenderもこちらの記事を参考にしてあります。
このように、PixelBenderの概念を一旦理解したら、あとは自分でオリジナルなPixelBender処理を書くもよし、海外にあるいろいろなPixelBenderのファイルを（ライセンスに従って）使いこなすも良し、いずれにせよ処理速度という表現の枷からかなり自由に解き放たれるPixelBenderは是非是非習得すべき楽しい技術だと思います。

ちなみにPixelBenderの習得にあたって参考にした本はこちら。

この本の第9章にPixelBenderについて書かれています。
だからこの本以上のことはこのブログに書かれていないのでこの本を読んだ方はあんまり期待できる記事ではないと思いますが、PixelBenderについて僕なりに理解したことをまとめてみました。

PixelBenderはそんなに敷居の高い技術ではないです。
実験レベルならすぐにはじめられて、効果は非常に高い（なにせ処理速度が別次元になるので）技術なので、ぜひともわかりやすく説明出来るようにまとめられたらと思います！

とはいえさて何から書こう。
やっぱり初心者にとってはそもそもまずPixelBenderが何かを知らないですよね。並列処理というちょっと特殊な処理の流れもあって、非常にとっつきにくい印象を受けるので、先ずはPixelBenderについて少し細かく説明してみたいと思います。
なお、僕という初心者が理解した程度の説明を初心者を対象に説明するので情報の正確性については基本的に自信がないです。
しかもピクセルシェーダーとかプログラマブルシェーダーと呼ばれる技術を意図的に全て「PixelBender」という名称を用いて説明しています。
並列処理についても仮想化の話しとかまで説明し出すと僕が混乱するので、すべてハードウェアとして、つまり「並列処理を行う、そういう機械があるものとして」書いています。
つまりここに書かれてあることをそのまま人に話すと笑われるかもしれないということです。

はじめよう。先ず最初に、PixelBenderって何なん？

PixelBenderとは、Adobeが開発したピクセルシェーダーを記述する言語のことです。その言語の記述やテスト、ビルドコンパイルするソフトのことをPixelBenderツールキットと呼びます。

画像はCS5についてきてたPixelBenderツールキット2

なるほど、わからん。もっと簡単に説明して？

そのためにはまず最初に「パソコンはどうやって画面が表示されるのかな？」について考えないといけません。
PixelBenderは凄く簡単に言うと「ピクセルを処理する言語」、もっと限定的に言うと「画像を処理するための言語」だからです。

ではパソコンはどうやって画面が表示されるのかな？

パソコンの画面の最小単位は1pxからできていることは説明の必要がないと思います。
では仮に1pxだけ表示するディスプレイがあるとして、その1pxに赤を表示させてみましょう。

1ピクセルの画面に赤を描く

CPUは1ピクセルずつ処理している

620×480の画面に表示する

こればっかりはCPUが進化して速くなっても、画面の表示処理だけはまともにやると解像度の処理回数がかかってしまうのはかつては避けられない問題でした。
この問題を面白い方法で解決したのが次の考え方です。

1ピクセルずつに専用のCPUを割り当ててしまう

全ては同時に行われる

実際には本当に297600個も並べているのかというと半分本当で半分嘘になります。本当のところはもうちょっとソフトウェアやハードウェアレベルで仮想化なども行われているのですが、画像処理の並列処理についての考え方は基本的にこれまで説明したような処理で行われていることになります。
しかもここまでの説明を「GPU」と説明すればわかるひとには一発でわかるものを、なぜ「仮想化とかそういう処理は置いておいて、「画像を表示させるための機械」というものがあることにしておく」などとまわりくどい説明を行ったかというと、PixelBenderはGPUが無くても動くからです。

では改めて問う。PixelBenderとは何ぞや。

PixelBenderとは、
「つーかその1ピクセルごとに専用のCPUがあるならさ、そのCPUにプログラム走らせれば良いんじゃない？」という発想の元に生まれた、ピクセルを描画するためだけのプログラムです。

先ほど説明した「画像を表示させるための機械」が行っている1ピクセルの描画処理の流れはこんな感じです。

1ピクセルの描画処理の流れ

PixelBenderの処理の流れ

なんとなくPixelBenderというものがわかってきたでしょうか。
冒頭（といっても記事の中盤）で説明した言葉をもう一回書いてみます。
PixelBenderとはある一つのピクセルを計算して描画するプログラムの事です。

正体が分かればそんなに怖くない

つまりPixelBenderが行う処理は、言ってしまえばRGBの値（正確にはあとアルファ値も）だけが入力されることと、出力もRGBの値（と正確にはあとアルファ値と）を出力するためだけのプログラムです。
一個のプログラムは1ピクセルの色だけを出力するためのものです。
そしてそれが何万個（場合によっては何千万個）も同時に実行されます。
ActionScriptやJavaScriptなどのように、順番に実行される言語でプログラムしていると最初ちょっと戸惑いますが、PixelBenderは

1. 一個のピクセルを描画するためだけの言語
   • そしてそれだけしかできないのでたいして難しいわけではない
   • そもそも言語的にそれ以上の難しい事を出来るようにはなっていない
2. 全てが同時に実行される

という二点のミソを理解すれば最初感じていた取っつきにくさは消え去りました。

PixelBenderをFlashで使うことのメリット・デメリット

そしてこのPixelBenderはFlashでもノーコストで使用できます。
FlashのActionScriptにおいて、
保守管理しやすい綺麗なコードを白魔法
高速化のために全てを犠牲にするような過激なチューニングが為されたコードが黒魔法
とするなら、PixelBenderはさしずめ召喚魔法です。
全く異世界の力を借りることになり、威力は絶大。しかもノーコストです。

メリット

• 同時に実行しなければならない処理がノーコストで一瞬にして終わる。
• FlashのFPSを落とさない。

実際にはFlashPlayerの実行環境の構成によりますが、理論上はFlashのFPSを落とすことはありません。

デメリット

ByteArrayについてはまた別途書きます。

2011/09/08追記
ByteArrayと同じくVector.型も使えると教えて頂きました。

ピクセルを描画するというPixelBenderの仕組み上、扱える描画オブジェクトがBitmapDataに限られます。
BitmapData型を保持していない描画オブジェクトの場合、処理の前に常にbitmapData.draw()を発生させなければいけないので、このコストがいちばんの悩みどころになります。
逆に言えば、BitmapData型を保持していればどんどん積極的にPixelBenderを使っていきたいところです。

さっそく使ってみよう！PixelBender！

とここまで書いておいてなんですが、悩んだんですがこの記事ではPixelBenderの言語については解説は書かないことにしました。
理由は僕もまだはじめたばかりなので説明出来るほど言語にたいして理解が深くないためです。
みなさんと同じく僕も目下勉強中なので、いずれ記事に出来るくらいには理解を深められたらと思います。

ただし、PixelBenderについては「PixelBender お目当ての処理」で検索するとけっこうな数で海外のPixelBenderのソースがヒットします。
それらを参考にするも良し、ライセンス的に問題がないのであればそのままFlashに使用するもよしなので、およそ汎用的な処理であればPixelBender初心者でもかなりなことができてこの技術を手っ取り早く楽しむことは出来ます。

PixelBenderというプログラム言語についての解説は今回は省きますが、PixelBenderツールキットの使い方について、おおまかに説明してみたいと思います。
ちなみに冒頭（といってもこの記事の中盤頃）でも書きましたがPixelBenderツールキットとはPixelBenderというプログラムを書いたり実行したりテストしたりコンパイルしたりするアプリツールのことです。Flashを作るあのソフトのことをFlashIDEと呼んだりするのと同じです。

PixelBenderツールキットは、AdobeCS4かAdobeCS5を買ってインストールしていれば標準で入っていると思います。CS5.5ではどうかわかりませんし、CS以外の他の方法で手に入れるやり方はわかりませんが、とにかくCSでインストールされているものとして話しをすすめてみます。
ちなみにCS5ではPixelBenderツールキット2が入っていました。1と比べてどこか新しくなったんですかね？
Macだと
/アプリケーション/ユーティリティ/Adobe ユーティリティ
/アプリケーション/ユーティリティ/Adobe ユーティリティCS5
あたりに入ってると思います。

New Kernelで新規作成

画面は大きく3つにわかれています。

Export For Flash Player...

後半へ続きます。

DisplacementMapFilterのマップ作りに手こずった。
ソースコードはこちら。 

一度でもお会いした方には、求められれば今まで制作した実績を、秘密保持の契約に問題ない範囲でお知らせしていますのでご存じの方も多いですが、ウエブサイト制作という目的に沿うためのありとあらゆる技術を駆使して業務に携わっており、その中でもとりわけFlashが大好きな、いわゆる業界の一部のみで使われるスラングであるところのFlasherという肩書きを好んで自称しております。

ここ数年でよく目にするようになった「HTML5 v.s. Flash」という言葉。
別に個人の話しレベルでは何も思うことはなかったのですが、特にここ最近は大手技術系ニュースブログでもたぶんアクセス数欲しさからやってることなのだとは思いますが釣りタイトルで使われるようになり、ちょっと個人的に看過できないのではないかと考えるようになってきました。

ニュースブログのやってることは、記事という名の広告掲載場所を作るためのいわゆる看板板の作成のお仕事なので、釣りタイトルで人目を引くことに関しては何も異論はありません。
何ズモードとか何デア何デアとか、けっこうかなりな大手ニュースブログで勝手に「もうFlashはいらない？」と煽られたFlashを、こよなく愛するいちユーザーが感じた、ちょっとした違和感を書きたいと思います。

大前提としてFlashとHTML5は対立関係に無い。排他的関係はもっと無い。

「もうFlashはいらない？」

これわざとなんですかねえ。わざとなんですよねえ。何イデアアイデアさんとか何ズモードジャパンさんとか大手でもやってますが。

もしわざとでないんであれば、後述するようにもうニュースサイトの記事書くのやめたほうがいいですし、わざとなんであれば、アクセス数をすこしでも稼ぎたいお気持ちはすごくよくわかります。

もしかしたらFlashを触ったこともないような人とか、HTMLに全く理解の無い人からはあたかも対立関係があるように見えるのかもしれませんが、僕程度の半可通からみても対立するような技術ではないことはよくわかります。
少なくとも僕の知ってるHTML5を研究してる人やFlashの凄い人や、誰に聞いても「むしろどこがどう対立するのかこっちが知りたい」という意見しか聞こえてこないです。
何故「HTML5 v.s. Flash」という図式が外野で作られたのか。
それには三つの本当とたった一つの勘違いがあるからだと僕は考えています。

[本当.1]AppleとAdobeは対立しているように見える。

これは本当だと思います。
MacのOSアップデートLionのときにAdobeのアプリがことごとく動かなかった事から見ても、相当根が深いのかなと心配しています。

[本当.2]AppleはiOSにFlashを搭載する予定はないし、その代わり「HTML5が動くよ」と言う。

これも本当です。
iOSではFlashのリッチな体験が出来ない問題に対してHTML5がその役割を代替することをアップルは期待しています。

[本当.3]AdobeはiOSにFlashPlayerが走らないと困る。

本当そうですよね。
ただ、これが次の勘違いを生むことになります。

[勘違い.1]AdobeはHTML5が普及すると困る。

完全に勘違いです。
Adobeが困るのはFlashPlayerが走らない環境が少なくなるのが困るのであって、つまりiOSでFlashPlayerが走らないことについては非常に困っています。
2番目の本当でAppleがiOSのFlashの代替にHTML5を提示したこともあって、FlashとHTML5を同等に並べられて勘違いされやすいですが、iOSでFlashが動かないのはAdobeにとって大問題ですが、HTML5の普及とAdobeは何の関係もないんです。
むしろ、クリエイターに制作ツールを売って生計を立てているAdobeにとって、クリエイターに支持されるHTML5のツールを作ることは至上命題なのです。
ちょっとややこしいですが、

1. iOS => HTML5好き　Flash無理
2. Adobe => Flashが動かないのは嫌！iOSでも動かして！
3. Apple => 嫌。Flashの代わりにHTML5動くし。

というなりゆきと

• Adobe => クリエイターが使うツールを作って売ってる会社

とはわけて考える必要があります。
Adobeの顧客であるクリエイター、そのクリエイターの最近の出力先として無視できないのがWEB。
WEBの出力先として無視できないのがiOS。
iOSのWEBでFlashが動かない事は、Adobeのプラットフォーム戦略としては問題です。
が、AdobeがHTML5のツールを出すことについてAdobeにとって特に何も問題になることはありません。

ということでAdobeがiOSでFlashPlayerが動かないのは困りものです。

でもそれ以外が全然的外れな感じがしないですか？
問題がややこしいから普通に会話で「HTML5 v.s. Flash」とか言っちゃうのはわかるんだけれど、少なくとも大手といわれる技術系記事を書いて広告掲載場所を少しでも多く稼いでる看板板屋としては、素で勘違いしていたのであれば技術系の話題を書く素質無しだし、わざとやってたのだとしたらそうとうにあざといとは思います。
わざとだとすれば、僕は大手のブログの記者に、アクセス数欲しさに「Flashはもう必要なし？」とまで煽られたので、少しは文句も言っていいでしょうか？

大手の知名度の割にはアクセス数が厳しいのか多少でも過激なタイトルをつけないといけない事情はわかります。
「もうFlashはいらない？？？？？Adobeが作ったHTML5でFlash終了pgr」
と煽って記事を書かないといけない心中はお察ししますが、僕がいちばん腑に落ちないのは
いったいぜんたい何を持ってして、HTML5の表現力を引き出すツールができたからといってFlashがいらないと判断したかです。
少なくともFlashを煽れば、記事にアクセスがつくと思ったのでしょうか？

「もうFlashはいらない？？」

もうFlashはいらないんでしょうか？

ナニを持ってしてそう感じたかは、僕が聞きたいくらいでが、ナニアイデアだったかナニギズモードだったかの記事では、彼らは「もうFlashはいらない」と感じたようです。

しかしながら僕はそう考えていません。
今までFlashにしか出来なかった表現が（CSS3と組み合わせることで）HTML5でも出来るようになった。
素晴らしいことです。
Flashで培った表現が、より多くの人に見てもらえるプラットフォームが広がったのです。
HTMLでできたサイトが動くようになったのです。

ねんがんの、動くサイトがやっと陽の目を浴びることになったのです。
動くサイトは魅力的です。
ユーザーにとって凄くわかりやすいです。
「WEBサイトとはこういうものだから」という技術者の言い訳を超えた、
「ページが切り替わるなら（うっとうしいと感じない範囲で）切り替わりのアニメーションをする、
ボタンを押したら切り替わる、
フリックしたら画面が指についてくる、
といったように、ユーザーにとってわかりやすい制作物を作るためにアニメーションは絶対に欠かせません！

何デアアイデアとかいう超有名ブログとか何モードジャパンとか国際的に凄いか知らないですが彼らが言うには、なんかどうもFlashはいらないらしいです。ですが僕には納得できません。

僕が納得できないことと言うのは、つまり僕が知らないいろいろな事を相手は知っているという事で、もの凄く勉強のチャンスを得たと喜んでいます。

是非ともお話をお伺い存じたく奉りござ候でございますが、まあどうでもいいので、もしアクセス欲しさに「Flashはもういらない？」とかタイトルを 書いたのであればちょっとでも恥ずかしいと思ってくれたらそれでいいわけです。