あまりニーズはないかと思われますが、例えばアハ体験のように対象物を数十秒かけて、ゆっくりじんわりと動かす時のtipsです。 まずはサンプルをご覧下さい。

このサンプルでは30fpsで30秒かけてちょうど30px移動しています。

ただトゥイーンさせているだけという素材そのものを活かした作りになっております。

・・・なんですが1pxごとにしか進まないような感じで、カクついた動きになってしまっているのがお分かりになりますでしょうか。 これを解消するためにはこの為だけにAS仕込むか、別途FLV化させるか、と悩んでいたのですが、とっても簡単な方法で解決することができました。

みなさんもよくご存知の「スムージング」。

ライブラリ上のビットマップを右クリック→「プロパティ」にあるコレ！

これをポチっとチェックをいれるだけでほらこの通り。

画像のジャギー解消だけに有効なのかと思ったら、こんな使い方もあったんですね。 よく使ってた機能なだけにびっくりしました。

我々コンテンツ制作屋にとっては作業ファイルというのは命の次に大事なものでして、実際今までは作業用ファイルをRaid5で構築したNAS（とにかくものすごくデータが消えにくくて家中のPCからアクセスできるネットワークディスク）で管理していたんですが、火事や地震などの際、何をおいてでもどうやってこれを運びだそうかなんて常々考えてしまうくらい、そのくらい作業ファイル消失やデータ消失に対してデリケートなわけです。

そうでなくても個人事業やフリーランス、中小企業でWEBサイト制作のお仕事をされている場合、データ管理はどうするのがベストなのかいろいろと考えさせられますね。

そこで今までのやりかたと失敗点を踏まえて、WEBサイト制作においてのデータ管理の方法を探っていきたいと思います。
究極の目標は「家が突然爆発しても仕事が続けられる」です。

ちなみに最初に念のためお断りしておきますと、この記事では長々とDropboxとjungleDiskとAmazonS3のサービスについて書かれてありますが、それぞれのサービスの説明は全然しておりません。あくまでそれぞれ3つのサービスを連携させたらこういうふうになるよ、という類の記事ですんで、個々のサービスについては今一度検索して調べてみることをおすすめします。
それぞれ有料サービスが存在しますし、特にDropboxとjungleDiskはただサインインしただけじゃなくて専用のクライアントソフトをインストールしないと全然便利に使えないものなので、その使い方については別途調べておく事をお勧めします。

WEBサイト制作においてのデータ管理の課題

とにかくいろんなタイプのデータが混在する

ただのHTMLサイトを作るだけでもHTMLファイルや各種画像ファイル、画像の元素材ファイルや指示書などファイルの種類と数は相当数になります。
さらにプログラマブルなサイトを求められる場合、ライブラリやその階層構造（多くの場合HTMLの公開フォルダとは別でプログラムを作るのでHTMLだけの時と比べると階層構造がややこしくなる）、プログラムやデータの設計書なども必要になってきます。
Flashも必要となるとさらに加えて音声データや映像データ、さらにその元素材など扱うデータは多岐にわたります。
種類も量も大量のファイルを扱う必要が出てきます。

自前管理ではRaid5と世代バックアップは必須だった

絶対壊れたらだめなときに壊れるのがHDDです。CM連動型WEB広告など、アップ直前に限ってHDDが故障したなんて事故が理由にならないくらい、たとえHDDが壊れてもファイルがすぐに取り出せる状態でないといけないので、ネットワークディスクをRaid5で組むのは必須でした。
これでデータの保存領域は堅牢になりましたが、間違った操作に対してまだ非常に弱いです。たとえばそのネットワークディスクの中のファイルを間違って全部消してしまったとか。
そこでRaid5＋定期的な世代バックアップを必要としていました。

ネットワークディスクは遅い

ネットワークディスクをいくら完璧にしたとしても、ローカルディスクの速度には勝てないので、やはり大量のファイルをスピーディーに扱えないのは困りものです。いくら定期的バックアップとってたとしても、間違えて削除したときとかもすぐに戻せないし。
そうすると作業のたびにネットワークディスクからローカルに一旦コピーしておいて、ローカルで作業して終わったらまたネットワークディスクに置く、という手間が必要になりました。
大事なそこのところを手作業に頼るというジレンマで、実際事故も多かったです。
ただでさえどこのが最新状態なのかがわかりにくくなっているのに、共同作業なんかのときは最悪で、ファイルの一部が最新のものが混在してたりと、誰もがコントロールできない状態に陥りました。
たった一文字の修正が細かく刻まれてきた場合なんかは、「ネットからローカルにコピーして 修正したものをまたネットにあげる」の繰り返しで、やればやるほどミスも多くなるしかといって直接ネットをいじったりしたらそれはそれでどれが最新版かわからなくなる元兇だったりで、ルールを厳格にしてもゆるくしても必ず何かしらの事故の要因を作ってしまうので悩みの種でした。

基本的にはDropboxがほぼすべての悩みを解決

見つけた、Dropboxちゃんのいいところ

今更説明の必要もないDropboxですが、これを導入するだけで基本的にはほぼすべての悩みが解決しました。

• 基本はローカルなので速度とか関係ない
  • Dropboxのフォルダがローカルに出来るので、このフォルダの中で作業すればいいだけなので普段全くストレスなく仕事が出来ます。
• 対象がDropboxフォルダだけなのが逆にいい
  • Dropboxのほかにも、もっと高機能なsugarsyncというサービスもありましたが、sugarsyncが同期できるフォルダを選べるのに対してDropboxは同期できるフォルダは一つだけです。もともと作業用フォルダは一つにまとめておくタイプだったので、このDropboxの制約が逆に好みに合っていました。同期できるフォルダがいろいろ散らかっていると、そっちの管理にも手を取られてしまいます。
• 勝手にオンラインに同期してくれる
  • 基本はローカルで作業しているだけですが、裏で僕の知らないうちにオンラインに同期してくれています。PC2台持ってても、どっちで作業してもきちんとファイルが同期している。これはすごい。
• 自動で世代バックアップをとってくれる
  • PC2台も持ってない人でも、この世代バックアップだけでもDropbox使う理由があります。ファイルを間違えて消してしまったとき、もうちょっと前のバージョンに戻したいとき、修正に修正を重ねたデザインをあっさり「やっぱ前のに戻して」と言われたとき、Dropboxが自動でオンラインに同期する際に世代ごとにバックアップもしてくれているので、いつでもファイルを元に戻せます。もう納品直前にファイル消失して気絶することもなくなります！
• 共同作業もばっちり
  • どのフォルダを誰と共有するかも細かく決められるので、共同作業時もオンラインストレージやネットワークドライブを介する必要がありません。

こんなに便利なDropbox、基本的にこれさえあればたとえ今突然PCが爆発しても、新しいPCにDropboxを入れさえすれば何事もなかったかのように作業を続けることが出来ます。
もしまだDropboxのアカウントが無い方いましたら、次のリンクからアカウント登録を行いますと通常2GBまで無料なのに対して20MB増えて2.25GBの状態で始められることが出来ますのでよかったらどうぞ！（僕のアカウントからの紹介になるので、僕も250MB増えます）

Dropboxのアカウントを作る

英語のサイトですが、説明に従ってアカウントを作って、専用のアプリをダウンロードしてインストールすればすぐに使い始めることが出来ます。

Dropboxだけでは解決できないところ

Dropboxに限ったことではないのですが、この手の自動ストレージサービスで問題なのは容量が少ないことでした。
無料アカウントでも2GB、年間$99.00払って50GB、年間$199.00払えば100GB まで拡張できるのですが全然足りなくなります。
結局、Dropboxに入れておくファイルを選ぶ必要があるのですが、選ばなかったファイルに限ってPCが爆発した直後に即時対応の修正を求められるかもしれません。冗談みたいですが、必要なときに限って必要なファイルがないのはよくある事です。

AmazonS3と併用で解決！

時期尚早？

いきなりですが、今AmazonS3でアカウント作るのはちょっとまずいかもしれないです。
というのも今AmazonS3でアカウント作るとUSにあるサーバーを使うことになるかと思うんですが、もしかしたらそろそろ東京にもサーバーが作られるんじゃないかという噂を聞いたんですよ。
ネットワークといえどサーバーとの物理的な距離は回線の速度に影響しますんで、もしかしたら出来るかもしれない東京サーバーまでアカウント作成は待った方がいいかもしれないです。
僕は今作りましたが。
今すぐにでもアカウント作るぞ！っていう我に続く猛者がいましたらリンク張っておきますんでどうぞ。

http://aws.amazon.com/s3/

こちらも簡単な英語ですが、僕がはまったのは郵便番号を7桁で書いたらエラーになったので、3桁に減らしたらいけました。

そもそもAmazonS3とはなんぞや？ということですが、ものすごく簡単に説明しますとAmazonが自分ところで使ってるサーバーを有料で貸してくれるので、これがまたえっらいスペックいいのにえっらい安くて済むんでみんな喜んでるサービスなんです。
AmazonEC2っていう、すっごい速いサーバーを、使った時間だけ貸してくれるサービスがありましてですね、これがまたすごくて、仮想化っていうんですけどアクセスがあったときだけ（仮想的に）サーバーの電源を入れて、計算が終わると（仮想的に）サーバーの電源を消すみたいなことを自動的にやってくれるサービスなんですね。電源を落としちゃうとデータは保存されないので、その保存用に作られたサービスがAmazonS3ということになっております。
電源入れてた時間だけお金払う貸しファミコンがEC2で、なんでも入れられる便利な貸しカセットがあって、その要領に対してお金払うのがS3ってイメージですかね。

jungleDiskでAmazonS3をネットワークドライブ化

AmazonS3を契約しただけではそんなに便利にデータを扱えないですがjungleDiskというサービスを使うことによってAmazonS3のサーバーをネットワークドライブとして扱うことが出来るようになります。
jungleDisk自体も有料サービスで、僕もどのプランでやればいいのかかなり迷ったんですが共同作業用にゆくゆくはサブアカウントを増やしたくなるかもしれないので、僕はとりあえずBusiness Classの月$4のプランで初めてみることにしました。個人でアカウントとって管理する分にはPersonalの月$3のプランでもいいかもしれませんね。

https://www.jungledisk.com/

とりあえずDropboxとjungleDisk+AmazonS3でルールを作っておく

Dropboxはローカルでの作業を全自動でクラウド化してくれるサービス。でも最大容量が少ない。
jungleDiskはクラウドの先にあるものをローカルで扱ってるように見せかけてくれるサービス。容量無限大。でもローカルに見えるその先は実はネットワークの向こうなので速度遅い。

このふたつの特徴をうまいこと使い分けて、次のように管理するようにしました。

• 現在進行中の案件はDropbox上で
  • 更新が頻繁にある状態。なのでスピードが求められる。
    世代間バックアップも必須
• 案件が閉じたらjungleDiskでAmazonS3に保管
  • またいつ使うかはわからないけど、作ったものは大事に保管。
    普段はあまり触ることのないファイルなのでネットワーク越しである程度遅くても大丈夫。それよりはどんどん貯めるので容量がたっぷり欲しい。

これでお互いのいいところを補いながらも、家が爆発しても手元にPCと回線さえあれば、爆発直後からでもどんな案件の対応も出来る環境が手に入りました。

おまけ

少し冗長かな？とも思うんですが、jungleDiskの月$4のプランだとAmazonS3とは別に10GBの容量を借りることが出来たので、試しにここにDropboxをSyncさせてみました。
まあほんと意味のない冗長性だと思いますが。

まとめ

クラウドクラウドって言うのは、なんか流行に乗っかってて嫌なんですけど、昔から出来るだけネットワーク上に作業環境をおいてしまって特定のPCや環境に依存されにくいというのは目指してきたんですが、僕みたいに個人事業主だとネットワーク環境も自分でメンテナンスしないといけないので、手段が目的化してしまうと逆効果なわけですね。

実際、僕の一番の仕事は制作作業なわけでして、その制作作業を助けるためのネットワーク構築のはずが、ネットワークに障害が起こると自分でメンテしないといけないので、それはそれで非常にリスクを増やすだけでした。

VPNサーバーやNAS、自動バックアップサーバーや世代管理サーバーなんかも自分で構築しちゃうと非常に安価にできるわけですが、これらのうちのどれかひとつでも落ちてしまうとただでさえ仕事どころではなくなるのに、ネットワークのメンテナンスもしないといけなくなる。そうするとこのサーバーはいったいどこまで信頼できるのかの見極めもしないといけないし、それによって依存度をかえないともいけなくなる。確実なファイル管理のための手段であったはずのサーバーが、堅実なネットワーク運用を目的としないと何も出来なくなるんです。

そういう意味では、小規模制作集団にとってのデータクラウド化は非常に有意義なんじゃないかと思います。Dropboxの2GB上限のプランだけでも無料ですし、かなりおすすめできますが、僕はもう少し踏み込んでクラウドでデータを運用してみようかと思います。

僕のデータ管理についての考え方を長々と書いた割には、結局は「DropboxとjungleDiskの併用まじおすすめ」しか中身のない記事ですが、僕も常日頃からデータ管理に頭を悩ませている毎日ですので、少しでもどなたかの運用のヒントになれば幸いです。

著者である大重美幸様より、2010/7/17に発売したばかりの「詳細！Progression 4 Flashフレームワーク入門ノート」（クリック先はアマゾンで買う）を献本いただきました！

俗に言う「大重本」この写真はクリックするとアマゾンへ

著者である大重様、発送いただいたソーテック社様、この場をお借りしてお礼申し上げます。

献本していただくなんていう体験、僕自身の人生の中でそうあることでもないのでものすごくうれしいです。ましてやAS3を覚えるときに相当お世話になった大重さんからとなっては、これはもう本気でレビューするしかありません！！
僕も業務フレームワークとしてProgressionをがっつり使っている人間の一人として、また実際に自分が入門の時にどこでつまづいたのかとかも思い出しながら、かなり突っ込んでレビューしたいと思います！
考えてみれば本のレビューなんてそんなにやったことがなくて、もしかしたらかなりとんちんかんなことになるかもしれませんが、少しでも皆さんのほんの購入時の参考になればと思います。がんばります。

最初の印象

基本的には、AS3入門書で有名な「詳細！ActionScript3.0入門ノート」と雰囲気が一緒で前ページ青と黒の二色刷。
チャプター1でProgression4の基礎をひととおり習った後は、Proression4をフルパワーで使うためにほぼすべてのチャプターでクラススタイルでの説明になります。
なのでメインとなる読者の対象としては「詳細！ActionScript3.0入門ノート」などでAS3をある程度入門した方、といったところでしょうか。
技術書である以上、専門用語やスクリプトもよく出てきますが同じように画面写真も豊富なので、特に難解な印象は受けません。
多くの人が入門書を手にするとき「この本は自分のレベルにみあった入門書か」を気にすると思いますが、何をもって簡単そうとか難しそうと印象するのかは人それぞれですので、このへんは先もいったようにAS3入門ノートの雰囲気と一緒なのでそちらを読まれたことがある方はそれを参考にするといいでしょう。

入門ノートの名に恥じない、細やかな操作手順。こっから先の写真はクリックすると拡大します。

目次ごとの感想

全部でチャプター７まであります。

• チャプター1：Progression4の基礎
  • Progressionとは何なのかの説明に始まり、インストールから各プロジェクトの作成方法、さらにはコンポーネントスタイル、タイムラインスタイル、クラススタイルの3つのスタイルで実際にHelloWorldを表示させるまでが説明されています。
    このチャプターでひとまず全体にわたって動かしてみて、徐々に順を追ってこれから学習を進めるという構成になっているようです。
• チャプター2：シーンツリーの基本パターン
  • Progressionの肝のひとつである「シーン」についてかなり詳細な説明がされています。
    シーンの概念は、HTMLでいう「ファイル（ページ）」と同じく場面を構成する1単位なわけです。ほとんどの場合シーン構造がそのままサイトマップになりますので、このシーンの概念にチャプターをまるまる一つ費やして説明されているのはかなりわかりやすいと思いました。
• チャプター3：シーンの移動とシーンイベント
  • シーンの構造が理解できたら、次はいよいよシーンの移動を行います。
    このへんからスクリプトの記述が多くなってきます。
    
    

    ぱっと見でくじけそうになる人も！

    
    もしかしたらスクリプトに慣れていない方はこのへんから難しく感じるかもしれません。でも、大重さんの本（というかプログラミング技術書全般）には読み方のコツがあって、長いスクリプトの中でも重要なのは1行だけだったりするので、あとのほうにその重要な1行を抜き出してちゃんと説明されてあるんです。
    
    

    ちゃんと重要なところを抜き出して説明してくれる！

    
    なので長いスクリプトが苦手な方も、そこを読み飛ばして後から書かれてある重要なところだけを注目していけばいいのでそういう読み方をすれば安心です。
    シーンの移動に関してですが、前章でわざわざシーン構造だけを一章使って学習したことが活きてきます。シーン構造さえわかってしまえばProgressionは「前のシーンへ」「次のシーンへ」「上のシーンへ」「いきなり孫のシーンへ」などという便利なシーン移動がいろいろとできるので、この章はその移動方法が書かれただけですので一見スクリプトが多くてややこしいそうに見えますが、コツさえわかってしまえば易しいと思います。
• チャプター4：コマンドとコマンドリスト
  • ここから本の厚み的に後半に向かいます。
    コマンドもProgressionの機能の中核をなす技術の一つですが（ちなみにほかには、さっきやった「シーン」と次にやる「キャスト」）、配列を用いたSerialListとParalelListの入れ子など、かなり実践的な機能の紹介まで踏み込んで説明されています。
    あと173ページの虫がかわいいです。
• チャプター5：キャストオブジェクトを利用する
  • この章は全体から見るとさらっと流されているようにも見えますが、先ほどもいいましたようにProgression三本柱のひとつ（キャスト）について学習できます。
    僕が特に重要だと感じたのが、本で言うと185ページあたりに実際のFlashのムービークリップからCastMovieClipを作るやり方でして、これを知らないと多くの人が入門できたはいいけど実際のサイト作るにはどうしたらええのん？ってなっちゃうと思うんです。なのでこの説明からもこの本がより実践向けに書かれてあるんだなあと重ね重ね感じたのでした。
• チャプター6：外部ファイルの読み込みとプリロード
  • FlashのActionScriptの中でも特に難しいと感じる人が多いのが「外部ファイルの読み込み」だと思うんですが、Progressionはそこを比較的簡単に扱うことができます。
    簡単とはいっても、Progressionなりの書き方を覚えないといけないのはそれはもう仕方がないので、この章で勉強します。
    一括読み込みやリソース管理や先読み機能など、覚えるのも難しいけど自分で作るともっと難しい、つまり是非とも覚えて使いこなしたいかなり便利な機能もあります。
    こういった機能を、じっくり読みながら学習が進められるのも本ならではですね。
• チャプター7：さらに進んだ使い方
  • フルフラッシュサイトのディープリンク機能についてのつまづきやすい点の説明やカスタムコマンドなど基本的な機能をさらに突っ込んだ使い方からSWFをそのままシーンとして読み込む、リキッドレイアウトなどの夢のような機能までひととおり学習できます。
    ここまで読めば、もうProgression4の機能はひととおり学習したと言えますし、実際にFlashサイト制作に投入してもかなりの部分で応用できるようになるでしょう。

総評

気になった点としましては、たとえば82ページなどの「contentloaderInfo.bytesTotal」と「contentloaderInfo.bytesLoaded」など、説明ページの英数字が半角全角がどちらかに統一されていないところでした。文字の間隔がそれぞれ違うので少し見づらい点でした。見づらいのは説明文だけで、見たところソースコードなどは大丈夫だったので、問題はないんですがちょっと気になるな、というところです。
※大重さんより、半角全角統一されていないんじゃなくて、半角で統一されているけど均等割り付けで文字幅が広がっているとの事でした。長い単語を途中で改行しないようにするとどうしてもこうなってしまうらしいです。
それ以外に関しては先ほどから繰り返し言ってきた言葉なんですが、この本はProgression4の機能紹介だけにとどまらず、実際に使う側の立場としてどう学習していけば本当にFlashサイトが作れるのかを突き詰めた「かなり実践的で使える参考書」だと感じました。
僕の周りでも「Progression4の機能や出来ることについてはわかったし、今までも本やネットで基本的な作り方も学べたけど具体的に自分のFlashサイトでどう適用して良いのかわからない」といった声を多く聞きました。「詳細！Progression 4 Flashフレームワーク入門ノート」は機能紹介から一歩踏み込んだ、まさに使えるようになるための入門ノートとして最適ではないでしょうか。
Flashの開発環境はCS3/CS4/CS5にまたがって対応している点もありがたいですね。
今日からでもこの本読みながら学習したことを仕事に投入していきます！

最後に、僕自身がProgressionのファンであり大重さん本のファンでもあるので、こんな僕のつたないレビューですが皆さんの購入の判断にちょっとでもお役に立てれば幸いです。

あ、あと本の中身の写真に関しては著作権を侵害しないよう最大限配慮したつもりですが、もし至らない点などありましたらお知らせください。

FlashBuilderはじめてみました。正宗です。

Progression4がFlashBuilderとの連携ができるようになっていたのがきっかけだったのと、あとFlashのコンパイル（パブリッシュ）がその都度グラフィックを書き出し直すので時間がかかるようになったのが嫌でグラフィックはあらかじめswc書き出ししておいてFlashBuilderからasだけをコンパイルできるようになったらいいなと思ったので、FlashBuilderを使いこなせるように勉強してみることにしました。

常々お伝えしているように、うちのFlash請負制作業務のほぼ100%をProgressionフレームワークを使用していますので、ProgressionとFlashBuilderがうまいこと連携できていないと困ります。いろいろ試してみてうまい感じに連携できるようになったので書いておきたいと思います。

あとFlashBuilderについての本や情報が多いですがだいたいがFlex技術者向けになっていて、MXMLとか僕もよくわからないのですが僕のやりたいFlash開発とは微妙に違う気がするので、Flash向けにFlashBuilderの設定方法なんかの情報があっても良いなーと思っていたので、今回の記事はProgressionとあわせて是非ともマスターしたい技術だと思います。

先ずはFlashを立ち上げて

最初はFlashを立ち上げてProgressionプロジェクトを作成するところからはじめます。

はじまりはいつもFlash

種類：「クラス」にするのを忘れないで！

「FlashBuilderに対応させる」のチェックも忘れるな！

プロジェクトの設定で気をつけるところはここまでです。
おもむろに「作成」ボタンを押すとしばらくしてProgressionプロジェクトが作成されるはずです。

できたできたー！

プロジェクトが出来てしまえばもうFlashには用がありません（ひどい）。
Flashはそのまま終了しましょう。

ここからFlashBuilderで作業する

ここから先はFlashBuilderで作業します。長年使い慣れたFlashを捨てて慣れないFlashBuilderを使っての作業になりますのでかなりドキドキします。

FlashBuilderのワークスペースの概念はおわかりでしょうか？
もしまだでしたら今後FlashBuilderを使っていくにあたってワークスペースはよく切り替えることになるのでこの記事を読む前に「Eclipse ワークスペース」などで調べておく事をお勧めします。それ以前にFlashBuilderとEclipse との関係についても調べておいて損はありません。
ワークスペースやEclipseについてよくはわかってないけど、手っ取り早くこの記事を読む場合、「とりあえずワークスペースとは作業フォルダを決める事なので、先ほどProgressionプロジェクトを作成したフォルダーの一階層上を選択しておけば良い」とだけ覚えておいてください。
（僕の理解度もだいたいそのへんです）

ワークスペースを決めたら、先ほど作ったProgressionプロジェクトフォルダをFlashBuilderに登録します。

ファイルメニューから開く

FlashBuilderのメニュー「ファイル」→「Flexプロジェクトを読み込み」を選びます。

プロジェクトフォルダーからさっき作ったフォルダを選ぶ

うまく読み込めた！

上手く読み込めました！

ただ、ファイル構成をよくよくみてみると、srcフォルダにあるはずのflaファイルがbin-debugフォルダにもコピーされるんですね。このままではまずいですよね。

どうしたらいいかというと解決方法は簡単で、srcフォルダにあるflaファイルを削除すればいいんです。
index.fla と preloader.fla の二つを削除します。

で、Progressionプロジェクトを作った時に自動的に「Index.as」が「bin-debug/index.swf」にパブリッシュされるようにFlashBuilderプロジェクトを設定してくれているんですが、同じように「Preloader.as」ファイルを「bin-debug/preloader.swf」として書き出すようにFlashBuilderプロジェクトを設定し直す必要があります。

他にもFlashBuilderのみでパブリッシュできるようにFlashBuilderプロジェクトの設定をいろいろ変更しておきましょう。

FlashBuilderプロジェクトの設定をいい感じに設定し直す

FlashBuilderプロジェクトの設定を変更するには、プロジェクトそのものを右クリックして「プロパティ」を選びます。

プロジェクトを右クリックで「プロパティ」

Flexコンパイラでは「HTMLラッパーファイルの生成」のチェックを消す。Hey YO!

「HTMLラッパーファイルの生成」のチェックを外すんですよ。つけるんじゃないですよ。

Flexモジュールでは追加ボタンを押す

書き出されるswfファイル名の大文字小文字に気をつけて

「モジュールの追加」画面で気をつける事と言ったら、通常「Preloader.as」からは「Preloader.swf」が書き出されようとするので、大文字小文字に気をつけることですね。index.htmlを書き換えたくないのであれば、ここで出力SWFのファイル名を「preloader.swf」と小文字に直しておきましょう。
モジュールSWFのサイズは「最適化しない」にしておきましょう。

これでFlashBuilderプロジェクトの設定は完了です。
いろいろ警告が出るとは思いますが、警告文を良く読むとほとんどの方にとっては問題ないケースかと思われますので、理解して問題ないならOK連打で元の作業画面に戻りましょう。

選択したファイルを削除だ！

あとはsrcのindex.fla 、preloader.fla、bin-debufのindex.swfとindex.fla、preloader.swfとpreloader.flaを削除してみましょう。

そしてFlashBuilderメニューの「プロジェクト」→「クリーン」で一回プロジェクトをやり直して、bin-debugフォルダにflaファイルが出来なくなって、さらにindex.swfとpreloader.swfが作られていればOKです！

あとはがんがん開発するのみ！よいProgression+FlashBuilderライフを！

おまけ

MacではFinderからswfを右クリックして「情報を見る」で

「このアプリケーションで開く」を設定

「このアプリケーションで開く」で Flash Player Debuggerを選んでおいてね。

flaファイルは死んでしもうたん？

このやり方ではindex.flaとpreloader.flaを大胆にも削除してしまうので、今後一切をasファイルで行わなければならなくなります。flaファイルは果たして使えないのでしょうか？

いいえ違います。

flaファイルはswc書き出しをするようにして、プロジェクトフォルダのlibsフォルダに突っ込むようにしましょう。
InOutMovieコンポーネントなどを使ったMCをリンケージ書き出ししておけば、「タイムラインを上手く使いつつ爆速コーディング可能な」Progression4+FlashBuilderというなかなか厨房臭いほど最強なコーディング環境が整うかと思います。

これはかなり万人向けな便利スタイルですので、また今後是非とも掘り下げて紹介したいとおもいますが、swcを駆使してうまいことFlashBulderとFlashとの両立スタイルも研究していきましょう！

いつもあなたに寄り添います―― utweb

2枚1セットタイプです

UTWEB、2010年度の新作名刺のお知らせです。
今回は湿布型名刺、正しくは湿布型というより湿布そのものです。

他人様の肩をお借りして、勝手に広告媒体にしてしまうという画期的なアイテム。
そして、激務な方の多いこの業界、少しでもその大事な身体を労ってほしい―、utwebからのささやかで押しつけがましい想いが込められています。

※一部の方から、鞄にしまっておくと鞄全体が湿布臭くなる、これから手渡す予定の資料が全部湿布臭くなった、という有難いご意見をいただき、この度微香性に生まれ変わりました。

ところで、この湿布型○○。
デザインバーコードのように、この先未来があるんではないかと思っています。

例えば、

金属系のテクスチャを印刷

貼ればたちまちサイボーグ。

ざっくりと縫った、つぎはぎ風湿布

貼ればたちまち昔ながらの貧乏人。
などなど夢は膨らむばかり。
プロダクト関係でのご相談もUTWEBはお待ちしております。

子供時代は痩せてたので口の悪い上級生から「ホネホネロック」とからかわれていましたが、その呼ばれ方、けっこう気に入ってました。正宗です。

JavaScriptでもActionScriptでも、関数を登録する場面ってけっこうよくあって、ActionScriptでいえば特にaddEventListenerですね。そんなときに引数を渡したい事もあると思うんです。
その方法を書いておきたいと思います。

jQuery（JavaScript）の場合

jQuery( '#hogehoge' ).load( 'nanika.html', myFunc );
function myFunc() {
	alert( 'こんにちは' );
}

こういうやつのmyFuncに引数を渡したいとき。

jQuery( '#hogehoge' ).load( 'nanika.html', myFunc( 'こんにちは' ) );
function myFunc( argment ) {
	return function(){
		alert(argment);
	}
}

渡され先でreturn functionするのがコツです。コツなのです！

ActionScriptの場合

どんどんいきましょう

_mc.addEventListener( MouseEvent.CLICK, __click__( 'クリックされたよ' ) );
functioin __click__( argment ):Function {
	return function( e:MouseEvent ):void {
		trace( argment );
	}
}

Progressionの場合

こういう書き方が出来るってことはProgressionのaddCommand内でも使えるはず！

 new SerialList( null,
	myFunc( 'コマンドにFunctionを登録するときにも引数がわたせる' ),
	myFunc( 'どんどん渡そう' )
);
function myFunc( argment ):Function {
	return function():void{
		trace( argment );
	}
}

何故こうなるの？

書き方だけわかっても、理屈がわからないと気持ち悪いですよね。一見意味不明な書き方にも見えるし、まる覚えしないと次もういちど書けないようでは身につけたとは言えません。
僕なりに解釈した考え方を書いていこうと思います。
ちなみに型が明記できるActionScriptで書いていきます。

function は（）で実行される

function myFunc( ) {
	trace( 'hogehoge' );
}
//関数を実行
myFunc( );

当たり前のルールなんですが、一度作った関数は、その関数の名前のお尻に() 「括弧」を付ける事で実行されます。
ということは逆に言うと括弧を付けないと実行されないという事です。

関数を実行せずとりあえず登録だけしておく

function myFunc( e:MouseEvent ) :void {
	trace( 'クリックされました' );
}
_mc.addEventListener( MouseEvent.CLICK, myFunc );

こういう書き方をしている場合、ようは「マウスクリックされたときにmyFuncっていう関数を実行してね」と書いている訳です。

_mc.addEventListener( MouseEvent.CLICK, myFunc() ); //まちがい

こう書いちゃうと、マウスクリックの時に実行してほしい関数なのに今実行してしまいます。
つまり、「あとで実行したい関数は、名前だけ登録しておく」のが正解なわけで、通常はそう書いている訳ですね。

関数の「戻り値」をおさらいしよう

本来関数を登録だけしておくはずの場所で、あえて実行する訳ですから通常だとエラーなわけです。間違いです。そこをあえて実行してみた場合、スクリプトの世界ではどのような事が行われるでしょうか。
その謎を考える前に関数の「戻り値」というやつをもう一回おさらいしてみます。

function myFunc1( ) :int {
	return 100;
}
var a:int = myFunc1( ); //変数aには数字の100が入る
 
function myFunc2( ) :String {
	return "こんにちは";
}
var b:String = myFunc2( ); //変数bには文字の「こんにちは」が入る
 
function myFunc2( ) :Object {
	return { test:"ごはんおいしいです" };
}
var c:Object myFunc3( ); //変数cにはObjectが入る

関数が関数を返す

結論から言うと、イベントリスナーやコールバック関数など、「関数を今実行せず登録だけしておく」場所で「あえて実行させてみる」わけですから、そこで実行された関数が関数を返してしまえばいい、とある頭のいい誰かが考えた訳ですね。

function myFunc( ) :Function {
	return function( ) { trace( 1+1 ); };
}
var f:Function = myFunc( ); //変数fに関数が入る
f( ); //関数が実行され1+1の計算結果が表示される

たとえばイベントリスナーの第二引数には

function ( e:Event) :void { }

この形が入れば言い訳ですから、

function myFunc( ) :Functioin {
	return function ( e:Event) :void { };
}

こういう形を返す関数を作っておいて

_mc.addEventListener( Event.ENTER_FRAME, myFunc( ) );

こういうふうにイベントリスナーの登録時にはmyFuncを実行してしまえば、関数が返ってくるので、その返ってきた関数のほうをイベントリスナーは登録してくれる、というのがこの書き方の謎の正体です。

はじめに発見した人はそうとう頭良いと思います。ぼくはこの理屈を発見したとき芸術性すら感じました。
実用性もさることながら、こういった動作の合理性を考えていくのもかなり楽しいです。昔中学校の技術の時間にエンジンの仕組みを勉強して以来、その動作の合理性に魅せられて車オタクバイクオタクというよりはエンジンオタクになったのを思い出します。

小ネタの備忘録なんですが、Progressionをインストールしたときに自動的にリファレンスもローカルに保存されます。リファレンスは読み方さえわかれば、非常に有用な情報源なのでブックマークしておくと何かと便利です。
ちなみにアドレスの「Flash%20CS5」と なっている部分はFlashCSのバージョンです。この場合はCS5の例です。

Windowsの場合（vista）
file:///C:/Users/＜ユーザー名＞/AppData/Local/Adobe/Flash%20CS5/ja/Configuration/Progression/Help/ASDoc/index.html

Macの場合（Snow Leopard）
file:///Users/＜ユーザー名＞/Library/Application%20Support/Adobe/Flash%20CS5/ja_JP/Configuration/Progression/Help/ASDoc/index.html

あわせてActionScriptそのもののリファレンスのローカルの場所を探す場合には次の記事も参考にしてみてください。
ActionScriptリファレンスをダウンロードする

「いまさら他人に聞けないFlashの基礎的な何かを勉強する」という名目ではじまった勉強会、「大阪ひよこの会」の第一回ミーティングを開催しました。
場所は株式会社オノフ様のミーティングスペースをお借りしました。
今回は第一回という事で勉強会の方向性なんかを話し合った訳ですが、その模様を書いておきたいと思います。

まずはひよこの会の発足に至った経緯なんかは、こちらにスライドをアップしておきました。
スライド(PDF)

そしてひろゆきさんの記事はこちら！

Flashに限らずものごとには基礎が必要なんですが、この基礎の学習という奴がえらく退屈でわけわからんものが多いんですよね。晴子さんにイイカッコ見せたくてバスケ部に入ったのに最初はドリブルの練習ばっかりみたいな。
この基礎を通り越してしまえば、あとは楽しい世界が開ける訳でして、絵が思った通りグリグリ動かせて楽しいとか、思った通りいかなくてもそれがちょっとしたパズルみたいで楽しいとか、何をやっても楽しくなる訳ですが、いかんせん基礎を通り越すまでが恐ろしくわけわからないつまらない部分が続きます。

なのでこのFlashの初歩的な部分をみんなで集まって楽しく勉強したらいいんじゃないっていう集まりがひよこの会になります。

ちなみにいつも形から入る僕のスキルはというと自称上級者といううさんくさいやつでして、基礎的な初歩的な事はわかってなかったりするのでこの機会に皆さんと一緒に勉強していけたらと思います！お手柔らかによろしくおねがいします！

先ずは結論から

いきなりですがミーティングで決まった事から書いていきます。ざくざくっと。

• マニアックに走りすぎない。あくまで初心者のひよこの会なのでテーマをマニアックなことに持っていかないよう心がける。「隣の人に聞ける」とかそういう場。
• かといって初心者こそ「この質問がどのレベルなのか」判断できないもの。とりあえずはひよこの会では初心者の全ての質問を受け付けておいて今後「たまごの会」とか「にわとりの会」とか分科会が出来れば良いなあ。
• 目標は月一回だがまずは年六回の開催を。
• 場所はなるべく無料でお借りできるところを持ち回りで。
• 今のところTwitterで運営してATNDで募集する形。今後必要になってくれば掲示板などのツールを増やしても良いかな？
• 誰かに負担が集中する事を極力避ける。
• 会の報告なども、いまのところ各自のブログにまとめるなど参加者の自主性に全面的に頼る事にする。

運営に関してはこんなところですか。まあまだ実際に勉強会を一回もやった事が無い会なので、ツールや受け皿については追々きめていけばいいかと思います。
基本的に僕があんまり何もやらない派だし、ひろゆきさんはものすごく几帳面な方ですので、誰かに負担がかかるとするとそれは絶対ひろゆきさんにかかると思います（苦笑）！そうならないためにも、ひよこの会は皆さん の自主性で成り立っていますので是非積極的な参加をよろしくお願いします！！

いちおう次回からは早速勉強会をはじめるわけですが、次回のテーマは「みんなが明かす勉強法公開！」となっています。開催日時はまだ未定。

初心者勉強会の意義とか

ここから先は僕のゴタクになります…。

僕はFlashを触り始めて10年ですがActionScript3を触り始めてまだ3年目です。Flashではベテランのほうだと思いますしAS3では初心者です。もともと建築作業員でして工事現場で働きながら家で独学でFlashを勉強してきたのでもとからプログラムが得意だった訳でもないですし、初心者の苦労や基礎の難しさを現在進行形で味わっている一人でもありますし、10年やってきてFlashの楽しさを少しでも多くの人に伝えたい人間でもあります。

僕自身が「誰とでも声をかけたらすぐ仲良くなる」ような社交的なタイプでもないので、誰に対しても気後れしてしまって人と全然仲良くなれなかったりするほうでして、常々「こんな自分でもFlasherと仲良くなるにはFlashの話題をする場を作るしか無い！」と考えていました。名刺交換してもうまく仲良くなれませんが、目の前でPCを開いて一緒にFlashを見たりするのはたまらなく嬉しい訳です。

正直にいうと初心者勉強会と言っても、学校でしっかり管理されたカリキュラムとかそういうのではないので、どこまで効果的な学習が出来るかと言うと疑問が残ります。でも、Flashが楽しくなる前段階に必要な基礎の部分をみんなで持ち寄ってなるべく楽しく勉強して交流を深める事にはとても意義があると思います。

どうしても僕がうだうだと意見を書いていくとなんか変なテンションになっちゃうので、ひよこの会の意義なんかについては是非ともATNDやTwitter上の皆さんの意見を参考にしていただくとして、今後もみなさんの積極的な参加をお待ちしておりますよ！

先日書きました、Progressionのコンポーネントとクラスを混在させるやり方の記事を、コンポーネントスタイルからの視点で書きました。いちおうProgressionのコンポーネントでの作成スタイルを一回でもやった方を対象に書いています。もしまだProgressionのコンポーネントスタイルを試されてない方は最初はそっちをやってみないと意味が分からないと思うし、このスタイルが何故必要なのかもわかりにくいかと思います。
それでも一般に誤解されているようにコンポーネントは初心者だけがやるものではなく、こういった工夫一つで非常に表現力の高いサイトを作ることもできるので、ぜひ参考にしてもらってみなさんのProgressonライフに役立てば幸いです。

第一章：index.flaをクラスでもコンポーネントでも使えるようにしておく

最初はクラススタイルでプロジェクトを作成

メニューの「コマンド」→「プロジェクトを作成する」を選ぶ！

最初、プロジェクトの種類は「クラス」を選んでおく。 プロジェクト名、書き出し先のチェックも忘れずに。

プロジェクトの設定はもう少し続きます。

パッケージパスには最初何も書かれていないのでここでは 「classes」と書いておく。 メインクラス名がちゃんと「Index」となっているかも 確認しておく。

デフォルトではパッケージパスに何も書かれてないので、ここにとりあえず「classes」と追加。メインクラス名ってところはデフォルトで「Index」ってなってるはずなので、それを確認しておきます。
「FlashBuildefに対応させる」「FlashDevelopに対応させる」も、今は必要ないかもしれませんがとりあえずチェック入れておけば後々便利になります。

以上の設定をチェックしたら「作成する」ボタンを押してプロジェクトを作成してください。
しばらく待った後、書き出し先のディレクトリに自動的にこんな感じのディレクトリ構造が出来上がるはずです。

ここまでひとりで出来てはじめておとな。

クラススタイルで作成されたindex.flaをコンポーネントにしなおす

プロジェクトを書き出すことは出来ましたが、このままではただのクラススタイルの開発になってしまいます。これをコンポーネントで扱えるように少し手を入れます。

先ずはドキュメントクラスを削除します

ステージのプロパティに、ドキュメントクラスを設定するところがあって、Progressionでクラススタイルを選択してプロジェクトを作成すると自動的にここが設定されています。コンポーネントスタイルで動かす場合にはこのドキュメントクラスは必要ないので削除しておきます。

ドキュメントクラスを探して！

男なら消すときはためらわず！でもためらって消しても結果は同じ！

ステージにコンポーネントを置いていきます

メニューの「ウインドウ」→「コンポーネント」からコンポーネントパネルを開きます

使うのはProgressionConfigのWebConfigとProgressionLoaderのEasyCastingLoaderのふたつです

置きましょう

コンポーネントパネルからWebConfigコンポーネントとEasyCastingLoaderコンポーネントの二つをステージ上にドラッグ＆ドロップして置きます。これらはステージ上のどこに置いてもいいです。SWF時には表示されません。

コンポーネントを設定する

いよいよ大詰めです。

コンポーネントインスペクタからコンポーネントの設定を行いましょう。

コンポーネントインスペクタを呼び出す鍵はここらへんにあります

コンポーネントインスペクタとやらの出し方がわからない方は、コンポーネントを選択したときのポロパティウインドウのここらへんのボタンを押してみてください。

先ずはWebConfigコンポーネントから

とりあえずこうなっていればよし

EasyCastingLoaderは次のような感じです

urlのところには恥ずかしがらずに「easycasting.xml」と書こー！

syncのところは「true」urlのところは「easycasting.xml」と書いておきます。
ここらへんのEasyCastingLoaderコンポーネントの詳しい設定は是非Progression公式サイトのコンポーネントリファレンスをお読みください。

あとはシーンエディタでシーンを作るのみ

どんな優れた技術でも、残念なサイトを作るのが得意な正宗の手にかかっては形無しだ！

あとはシーンエディタで自由にシーンを作ってください。ここらへんからは通常のコンポーネントスタイルと全く変わりません。

最後にbin-debugディレクトリにeasycasting.xmlとして保存すればOK

これで最初はクラススタイルとして書き出したプロジェクトをコンポーネントスタイルで開発するように準備ができました。
手順を細かく説明したのでステップ数が多く複雑に見えますが、実際にはちょっとした手間だけで済みます。

第二章：同じ事をpreloader.flaでもできる

このテクニックはpreloaderでも使えるので、たとえばindex.flaは普通にクラススタイルで作るけどpreloader.flaはコンポーネントでさくっと作りたい、またはその逆でindex.flaはコンポーネントで作ったけど、いろいろpreloaderのほうであらかじめ処理しておきたいことがあるのでpreloader.flaだけはクラスで作りたい、といったスタイルにも便利に使えます。

やることはindex.flaと同じ考え方です。

ドキュメントクラスを消して！

preloader.flaのドキュメントクラスを消しておいて

こんどはPreloaderコンポーネントをドラッグ＆ドロップします

ステージにPreloaderコンポーネントをドラッグ＆ドロップしておきます。
コンポーネントインスペクタのurlは「index.swf」としておきます。

これで完了です。逆にコンポーネントからクラスにしたい場合は逆の手順でOKです。

第三章：コンポーネントで作ったキャストに何か処理を加える

preloader.flaのほうはコンポーネントとクラスを行ったり来たりできると便利だという方が多いのですが、index.flaのほうはこんなややこしいことしておいて何が便利なのかがイマイチわからない、という方も多く居ます。

ただコンポーネントで作っていても何かしらActionScriptの処理が必要になってくるときがあるので、その方法を紹介しておきます。

基本はInOutMovieコンポーネントを活用する

キャストには、簡単に扱えてしっかりした画面効果を得られるコンポーネントがたくさんありますが、Flashのタイムラインで実際にアニメーションを味付け出来るInOutMovieコンポーネントを基本にしていくといいでしょう。

InOutMovieも、in点からstop点、stop点からout点の挙動など、今までのgotoAndPlayとはちょっと違った動きをするので最初のうちは戸惑いますが、すぐに慣れてきます。慣れてさえくれば、そのあとはstopひとつ書かなくてもいいInOutMovieでのタイムライン作業が非常に効率がいいものになります。

やり方１：タイムラインにActionScriptを直接書く

これはもう、従来のようにタイムラインにActionScriptを書くやり方です。本当に文字通り従来通りのやり方になります。

例）

いままでどおり普通にタイムラインにActionScript書いてもいいじゃない。変態だもの。

よく誤解されがちですが、コンポーネントを使ったからと言ってActionScriptを一切書いてないけないなんて制約はないですし（同じようにクラススタイルだからタイムラインを使ってはいけないという事も無い）、そこはもう、今まで通りやればいいんですよ。変態だもの。みつヲ

やり方２：せっかくなのでクラスを使ってみる

AS3のクラスがどうしても苦手な方は、無理してクラスを覚えなくても今まで書いたやり方でもなんとかなるかと思いますが、無理してまでクラスを覚えたらメリットが多いのも事実です。

というかここが醍醐味なので、紹介しておきます。いちおう「カスタムクラスくらいは書ける」方を対象に書きますが、クラスをばりばりかける方も是非ともチャレンジしてほしいテクニックです。

Progressionシーンエディタのメニューから「ツール」→「シンボルを書き出す」で書き出されたキャストには、全て自動的にキャスト名がリンケージとして設定されています。

「ツール」→「シンボルに書き出す」

IndexPageというキャストは自動的にIndexPageというクラスにしてもらってる

Progression以前に、まずFlashの仕様の話なのですが、AS3からのリンケージというのはムービークリップをクラスとして扱うので、Progressionでもキャストというのはクラスで管理していた訳なんです。

つまり、コンポーネントスタイルを使っていて、キャストを使ったことがあるなら、知らず知らずのうちに自動的にクラスを扱っていたということになります。

なので考え方としては今まで自動で使われていたクラスに手を加えてみる、という考え方になります。

試しにflaファイルと同じディレクトリに「IndexPage.as」というASファイルを作って、次のようにクラスを書いてみましょう。

package{
	import flash.display.MovieClip;
	public class IndexPage extends MovieClip{
		function IndexPage():void
		{
			trace("やっほー");
		}
	}
}

リンケージの設定でクラス名をIndexPageとしておくと、IndexPageクラスを作ると自動的に連動するようになります。
正確には「連動」というのは間違いなんですが、この記事では詳細の説明を省かせてください。flaファイルを置いたディレクトリにクラスファイルだらけになるのがイヤな方は「クラスパス」とか「パッケージ」というキーワードでAS3について調べてみるといいと思います。

とりあえずここではリンケージの設定とカスタムクラスの連動を実験してみました。この実験をさらにすすめて、IndexPage.asを次のように書き直してみましょう。

package{
	import jp.progression.casts.animation.InOutMovie;
	public class IndexPage extends InOutMovie{
		function IndexPage():void
		{
			trace("やっほー");
		}
	}
}

さっきと比べてどこが変わったかは探してみてください。こんな感じでInOutMovieクラスを継承する形でキャストをカスタムクラス化すると、コンポーネントを使ったときと全く同じ効果が得られます。

まだAS3のクラスに慣れてなくて何を言っているのかわからない方は、今のところはとにかく「コンポーネントで作っていたとしても、あとからクラスを覚えてクラスとして使いたくなったときや、クラスを使えるプログラマーが見つかってその人に引き継ぐときでも、簡単に移行出来るんだ」とだけ覚えておいても結構です。
クラスをばりばりに書ける方も、とりあえずコンポーネントとクラスはかなりシームレスに相互で行き来できるというのがわかっていただけたかと思います。

RollOverButtonなんかも、特にマウスオーバーなんかの状態はコンポーネントで作っておいて、クリックしたときの挙動だけスクリプトで書く、なんていうのも簡単に出来てしまうので非常におすすめです。

まとめ

説明が下手なので、長々と冗長な記事で本当すいません。Progressionが非常に柔軟で誰にでもすぐに実践で扱えるくらい簡単に自分の仕事を拡張してくれる名アシスタントであることが伝われば幸いです。
今回この記事ではコンポーネントスタイルから、キャストを部分的にでも（もちろんキャスト全部でも良いですが）クラス化する方法を紹介しました。
もし、シーン管理もクラスとコンポーネントでシームレスに管理したいと興味を持たれたら、以前の記事「Progression4：SceneObjectでシーンの構造管理はしない」を併せてお読みください。

この記事がみなさんのFlashサイト制作ライフにお役に立てば幸いです！

みなさんはもう手に入れましたか？ProgressionによるFlashコンテンツ開発ガイドブック
なんでも発売から二週間足らずで重版決定だそうで。おめでとうございます！

僕はと言うと、先週行われたProgression本を朗読する会に参加してきました。せっかく買った本なんだから読まなきゃね！
で、この朗読会、スーパー肩パッドさんとシナチクさんがTwitterで音頭をとって開催された企画でして、非常に面白くてためになりました。

まず14時から開始して19時半まで5時間半、ぶっとおしでProgression談義。その後居酒屋に移動して3時間またぶっとおしでFlash談義。
僕自身も大阪てら子でProgressionを勉強したのが2年前。出会って以来この2年間で覚えてるだけで15案件、実際には20案件以上は実践投入してきたほどハマりまくってるProgressionについて、ここまでディープに語り合える場と仲間がいなかったので（個人事業なので家内以外仕事のパートナーが居ないので孤独）ここまで時間を忘れて、ほぼ初対面の方々たちと語らいだのは生まれて初めての経験でした。

本当にいい刺激になりました。

で、いちおう自分がとってたノートもあるんだけど、皆さんの喋った内容がまとめきれていないので、せめて自分のネタだけでもまとめておこうと思ったわけです。

21日の僕の勉強会でもこれやります。
不思議なことに全く同じ記事を「クラススタイル向け」と「コンポーネント向け」で2回書きます。今回はその第一回目です。
第一回目は、「クラススタイル向け」に書いてみようと思います。

目的：SceneObjectでシーンの構造管理をしない

この記事の目的はこれにつきます。ちょっと何を言っているのかわからないと思いますが、大まじめです。
本やネット上のサンプルなどにも、SceneObjectを使ってaddSceneとかで子シーンを管理したりしていますし、クラススタイルに慣れてくると、シーンのloadやinit、gotoやunloadを駆使していろいろと複雑なシーン管理を行えるようになってくるのですが、あえてシーンの管理をほとんどしない方法を探るというやり方です。この方法が何故いいのかは勉強会でお話ししたいと思います。

シーンの構造はXMLで

具体的にどうシーン管理をSceneObjectではさせないかというと、シーンの構造はほぼ全てXMLで管理するようにします。
「な～んだ。SceneObjectのaddSceneFromXMLだろ。知ってるよ」という方も沢山いらっしゃると思いますが、ここではさらに踏み込んでEasyCastingだけでシーンを管理することを目指します。

普段クラススタイルで作られてる方は「えーEasyCastingってコンポーネントスタイルで扱う簡単シーン管理でしょ。うちの案件はもうちょっと複雑なの。いろいろと出来ないと困る」と思うはずです。大丈夫です。

プロジェクトの種類は「クラス」でOK

クラススタイル派にとってEasyCastingを使う心配事は「こんな簡単機能使ってて、俺がしたいあれとかこれとかちゃんと出来るんだろうか」というところにあると思います。少なくとも僕はそうでした。

基本的にはプロジェクト設定のとき、種類は「クラス」でOKです。FlashDevelopやFlashBuilderの対応など、いつもどおりのプロジェクトで書き出せば先ずは準備はOKです。

サンプルを見てみる

先ずはこちらのサンプル（Prog4MimeticEasyCasting.zip）をダウンロードして解凍してみてください。

解凍して出来るファイル構成は

• classes
  • casts
    • AbstractCast.as
  • common
    • AbstractSceneManager.as
  • display
    • AbstractSceneContainer.as
  • scenes
    • AbstractScene.as
  • Index.as

こうなっていると思います。
この中で大事なのはcasts.AbstractCasts.asと、scenes.AbstractScene.asと、Index.asの3つだけです。

ちなみに、プロジェクトがこういった構造になっている前提で話を進めます。

Index.as

Index.asを見てみましょう。これ以降、ソースがよく出てきますがソースの興味のある方は読んでもいいし、読まなくてもいいです。なぜなら、僕は自分のソースに全く自信が持てないので、嘘を書いてる可能性もあるし何より大事なのは考え方の説明のほうだと思っているからです。

package classes {
	import flash.net.URLRequest;
	import jp.progression.casts.*;
	import jp.progression.commands.display.*;
	import jp.progression.commands.lists.*;
	import jp.progression.commands.managers.*;
	import jp.progression.commands.media.*;
	import jp.progression.commands.net.*;
	import jp.progression.commands.tweens.*;
	import jp.progression.commands.*;
	import jp.progression.config.*;
	import jp.progression.data.*;
	import jp.progression.debug.*;
	import jp.progression.events.*;
	import jp.progression.loader.PRMLLoader;
	import jp.progression.scenes.*;
	import flash.events.*;
	import classes.common.*;
	import classes.scenes.*;
 
	/**
	 * ...
	 * @author ...
	 */
	public class Index extends CastDocument {
		AbstractScene;
		/**
		 * 新しい Index インスタンスを作成します。
		 */
		public function Index() {
			// 自動的に作成される Progression インスタンスの初期設定を行います。
			// 生成されたインスタンスにアクセスする場合には manager プロパティを参照してください。
			//super( "index", IndexScene, new WebConfig() );
			//PRMLLoaderにまかせるのでここではnullを入れておく
			super(null, null, new WebConfig);
		}
 
		/**
		 * SWF ファイルの読み込みが完了し、stage 及び loaderInfo にアクセス可能になった場合に送出されます。
		 */
		override protected function atReady():void {
			var prmlLoader:PRMLLoader = new PRMLLoader(stage);
 
			prmlLoader.addEventListener(Event.COMPLETE, function(e:Event):void {
				prmlLoader.removeEventListener(Event.COMPLETE, arguments.callee);
				// 開発者用に Progression の動作状況を出力します。
				Debugger.addTarget( manager );
				// 外部同期機能を有効化します。
				manager.sync = true;
 
				//違うところにナビゲーションしたらトップページに
				manager.addEventListener(ProcessEvent.PROCESS_ERROR, function(e:ProcessEvent):void {
					manager.goto(manager.syncedSceneId);
				});
 
				// 最初のシーンに移動します。
				manager.goto( manager.syncedSceneId );
			});
 
			prmlLoader.load(new URLRequest("casting.xml"));
		}
	}
}

基本的に大事なのは、コンストラクタ内では初期化を行わずに、atReadyの中でPRMLLoaderを使ってcasting.xmlを読み込んでいることだけです。

EasyCastingSceneもどきを作る

次にscenes.AvstractScene.asのほうです。こちらは潔いくらいEasyCastingSceneのパクリです。
ヘッダの記載に迷ったのが、ほとんど手を付けてないのでEasyCastingの表記を守りましたが、逆に「へぼくなってる。手を加えたのなら自分の表記にするべき」なのであれば、ヘッダーの部分は僕自身の名前に変えます。興味ある方はオリジナルのEasyCastingと読み比べて見てください。

※2010.05.21 公式の4.0.2bパッチに対応しました

/**
 * Progression 4
 *
 * @author Copyright (C) 2007-2010 taka:nium.jp, All Rights Reserved.
 * @version 4.0.2b
 * @see http://progression.jp/
 *
 * Progression Libraries is dual licensed under the "Progression Library License" and "GPL".
 * http://progression.jp/license
 */
package classes.scenes {
	import flash.display.Sprite;
	import flash.utils.Dictionary;
	import flash.utils.getDefinitionByName;
	import jp.nium.core.debug.Logger;
	import jp.nium.core.L10N.L10NNiumMsg;
	import jp.nium.utils.ObjectUtil;
	import jp.nium.utils.StringUtil;
	import jp.progression.commands.display.AddChild;
	import jp.progression.commands.display.AddChildAt;
	import jp.progression.commands.display.RemoveChild;
	import jp.progression.commands.lists.ParallelList;
	import jp.progression.core.L10N.L10NProgressionMsg;
	import jp.progression.core.PackageInfo;
	import jp.progression.events.DataProvideEvent;
	import jp.progression.events.SceneEvent;
	import jp.progression.executors.CommandExecutor;
	import jp.progression.Progression;
	import jp.progression.scenes.*;
	import classes.display.AbstractSceneContainer;
	import classes.common.AbstractSceneManager;
	import classes.casts.*;
 
	/**
	 * <span lang="ja">EasyCastingScene クラスは、拡張された PRML 形式の XML データを使用して ActionScript を使用しないコンポーネントベースの開発スタイルを提供するクラスです。</span>
	 * <span lang="en"></span>
	 *
	 * @example
<listing version="3.0">
	 * // EasyCastingScene インスタンスを作成する
	 * var scene:EasyCastingScene = new EasyCastingScene();
	 * </listing>
	 */
	public class AbstractScene extends SceneObject {
		AbstractCast;
		/**
		 * すべてのインスタンスを保持した Dictionary インスタンスを取得します。
		 */
		private static var _instances:Dictionary = AbstractSceneManager.getInstance().contentInstance;
 
		/**
		 * 現在表示しているインスタンスを保持した Dictionary インスタンスを取得します。
		 */
		private static var _displayingList:Dictionary = AbstractSceneManager.getInstance().displayingList;
 
		/**
		 * コンテナインスタンスを保持した Dictionary インスタンスを取得します。
		 */
		private static var _containers:Dictionary = AbstractSceneManager.getInstance().containers;
 
		/**
		 * <span lang="ja">自身に移動した際に表示させる表示オブジェクトを保持した配列を取得します。</span>
		 * <span lang="en"></span>
		 */
		public function get casts():Array { return _casts.slice(); }
		private var _casts:Array;
 
		/**
		 * キャストオブジェクトのクラス名をキーとして、パラメータを保持した Dictionary インスタンスを取得します。
		 */
		private var _castParameters:Dictionary;
 
		/**
		 * <span lang="ja">新しい EasyCastingScene インスタンスを作成します。</span>
		 * <span lang="en">Creates a new EasyCastingScene object.</span>
		 *
		 * @param name
		 * <span lang="ja">シーンの名前です。</span>
		 * <span lang="en"></span>
		 * @param initObject
		 * <span lang="ja">設定したいプロパティを含んだオブジェクトです。</span>
		 * <span lang="en"></span>
		 */
		public function AbstractScene( name:String = null, initObject:Object = null ) {
			// 初期化する
			_casts = [];
			_castParameters = new Dictionary();
 
			// 親クラスを初期化する
			super( name, initObject );
 
			// Progression が CommandExecutor を実装していなければ例外をスローする
			if ( Progression.config.executor != CommandExecutor ) { throw new Error( Logger.getLog( L10NNiumMsg.getInstance().ERROR_017 ).toString( className, "CommandExecutor" ) ); }
 
			// イベントリスナーを登録する
			super.addEventListener( SceneEvent.SCENE_UNLOAD, _sceneUnload, false, 0, true );
			super.addEventListener( SceneEvent.SCENE_INIT, _sceneInit, false, 0, true );
			super.addEventListener( SceneEvent.SCENE_ADDED_TO_ROOT, _sceneAddedToRoot, false, 0, true );
			super.addEventListener( SceneEvent.SCENE_REMOVED_FROM_ROOT, _sceneRemovedFromRoot, false, 0, true );
		}
 
		/**
		 * <span lang="ja">XML データが EasyCasting 拡張 PRML フォーマットに準拠しているかどうかを返します。</span>
		 * <span lang="en"></span>
		 *
		 * @param prml
		 * <span lang="ja">フォーマットを検査したい XML データです。</span>
		 * <span lang="en"></span>
		 * @return
		 * <span lang="ja">フォーマットが合致すれば true を、合致しなければ false となります。</span>
		 * <span lang="en"></span>
		 *
		 * @example
<listing version="3.0">
		 * </listing>
		 */
		public static function validate( prml:XML ):Boolean {
			prml = new XML( prml.toXMLString() );
 
			// コンテンツタイプを確認する
			switch ( String( prml.attribute( "type" ) ) ) {
				case "text/easycasting"			:
				case "text/prml.easycasting"	: { break; }
				case "text/prml.plain"			: { break; }
				default							: { return false; }
			}
 
			// 必須プロパティを精査する
			for each ( var cast:XML in prml..cast ) {
				if ( !String( cast.attribute( "cls" ) ) ) { return false; }
			}
 
			// PRML として評価する
			prml.@type = "text/prml.plain";
 
			return SceneObject.validate( prml );
		}
 
		/**
		 * <span lang="ja">この SceneObject インスタンスの子を PRML 形式の XML データから追加します。</span>
		 * <span lang="en"></span>
		 *
		 * @param prml
		 * <span lang="en">PRML 形式の XML データです。</span>
		 * <span lang="en"></span>
		 */
		override public function addSceneFromXML( prml:XML ):void {
			// <scene> の cls を上書きする
			/*
			for each ( var scene:XML in prml..scene ) {
				scene.@cls = "jp.progression.scenes.EasyCastingScene";
			}
			*/
 
			// PRML のフォーマットが正しくなければ例外をスローする
			if ( !validate( prml ) ) { throw new Error( Logger.getLog( L10NNiumMsg.getInstance().ERROR_005 ).toString( "PRML" ) ); }
 
			// 親のメソッドを実行する
			super.addSceneFromXML( prml );
		}
 
		/**
		 * <span lang="ja">保持しているデータを解放します。</span>
		 * <span lang="en"></span>
		 */
		override public function dispose():void {
			_casts = [];
			_castParameters = new Dictionary();
 
			// 親のメソッドを実行する
			super.dispose();
		}
 
		/**
		 * シーン移動時に目的地がシーンオブジェクト自身もしくは親階層だった場合に、階層が変更される直前に送出されます。
		 */
		private function _sceneUnload( e:SceneEvent ):void {
			// 対象がルートでなければ終了する
			if ( this != super.root ) { return; }
 
			// コンテナを取得する
			_containers[super.container] ||= new AbstractSceneContainer( this );
			var container:AbstractSceneContainer = _containers[super.container];
 
			// コマンドリストを作成する
			var removeChildList:ParallelList = new ParallelList();
 
			// すでに表示されている対象を検索する
			for ( var cls:String in _displayingList ) {
				// コマンドを追加する
				removeChildList.addCommand( new RemoveChild( container, _displayingList[cls] ) );
 
				// 登録から削除する
				delete _displayingList[cls];
			}
 
			// コマンドを追加する
			super.addCommand( removeChildList );
		}
 
		/**
		 * シーンオブジェクト自身が目的地だった場合に、到達した瞬間に送出されます。
		 */
		private function _sceneInit( e:SceneEvent ):void {
			// コンテナを取得する
			_containers[super.container] ||= new AbstractSceneContainer( this );
			var container:AbstractSceneContainer = _containers[super.container];
 
			// コンテナが登録されていなければ登録する
			if ( !super.container.contains( container ) ) {
				super.container.addChild( container );
			}
 
			// コマンドリストを作成する
			var addChildList:ParallelList = new ParallelList();
			var removeChildList:ParallelList = new ParallelList();
 
			// すでに表示されている対象を検索する
			for ( var cls:String in _displayingList ) {
				// 登録されていれば次へ
				if ( _castParameters[cls] ) { continue; }
 
				// コマンドを追加する
				removeChildList.addCommand( new RemoveChild( container, _displayingList[cls] ) );
 
				// 登録から削除する
				delete _displayingList[cls];
			}
 
			// 現在のシーンで必要な対象を追加する
			for ( var cast:String in _castParameters ) {
				// インスタンスを取得する
				var instance:Sprite = _displayingList[cast];
 
				// すでに表示されていれば次へ
				if ( instance ) { continue; }
 
				// インスタンスを取得する
				instance = _instances[cast];
 
				// プロパティを設定する
				ObjectUtil.setProperties( instance, _castParameters[cast] );
 
				// インデックスを取得する
				var index:String = _castParameters[cast].index;
 
				// コマンドを追加する
				if ( index ) {
					addChildList.addCommand( new AddChildAt( container, instance, parseInt( index ) ) );
				}
				else {
					addChildList.addCommand( new AddChild( container, instance ) );
				}
 
				// 表示中リストに登録する
				_displayingList[cast] = instance;
			}
 
			// コマンドを追加する
			super.addCommand( removeChildList, addChildList );
		}
 
		/**
		 * シーンオブジェクトが直接、またはシーンオブジェクトを含むサブツリーの追加により、ルートシーン上のシーンリストに追加されたときに送出されます。
		 */
		private function _sceneAddedToRoot( e:SceneEvent ):void {
			if ( super.dataHolder ) {
				super.dataHolder.addEventListener( DataProvideEvent.DATA_UPDATE, _update, false, 0, true );
			}
		}
 
		/**
		 * シーンオブジェクトが直接、またはシーンオブジェクトを含むサブツリーの削除により、ルートシーン上のシーンリストから削除されようとしているときに送出されます。
		 */
		private function _sceneRemovedFromRoot( e:SceneEvent ):void {
			if ( super.dataHolder ) {
				super.dataHolder.removeEventListener( DataProvideEvent.DATA_UPDATE, _update );
			}
		}
 
		/**
		 * 管理するデータが更新された場合に送出されます。
		 */
		private function _update( e:DataProvideEvent ):void {
			// データを取得する
			var xml:XML = new XML( super.toXMLString() );
 
			// cast を取得する
			_castParameters = new Dictionary();
			for each ( var cast:XML in xml.cast ) {
				var o:Object = {};
 
				// アトリビュートを取得する
				for each ( var attribute:XML in cast.attributes() ) {
					o[String( attribute.name() )] = StringUtil.toProperType( attribute );
				}
 
				_castParameters[String( cast.@cls )] = o;
			}
 
			// インスタンスを作成する
			_casts = [];
			for ( var clsPath:String in _castParameters ) {
				try {
					// クラスの参照を取得する
					var cls:Class = getDefinitionByName( clsPath ) as Class;
 
					// インスタンスを生成する
					_instances[clsPath] ||= new cls();
 
					// リストに追加する
					_casts.push( clsPath );
				}
				catch ( e:Error ) {
					if ( PackageInfo.hasDebugger ) {
						// 警告を表示する
						Logger.error( Logger.getLog( L10NProgressionMsg.getInstance().ERROR_018 ).toString( clsPath ) );
					}
 
					// 登録を破棄する
					delete _castParameters[clsPath];
				}
			}
		}
	}
}

あとはガンガンXMLを書いていく

ほかのクラスはどうでもいいです。
とりあえずバグが出なくなるように調整したクラスだったりしますから。

あとはProgressionシーンエディタでもいいですし、XMLを直接でもいいですし、PRMLをがっつり書いていきます。
がっつり書き終えたら、次の二つのことをしておきます。

1. PRMLの属性を type="text/prml.plain" にしておく
2. sceneのcls属性を全部"classes.scenes.AbstractScene"にしておく

あとは動かすだけ！

たったこれだけでクラススタイルの自由な環境を維持したままシーンの構造をXMLにまるなげ出来る環境が整いました。
PRMLのtypeは"text/prml.plain"ですので、XMLでも個別に動かしたいシーンはclasses.scenes.AbstractSceneをオーバーライドしたカスタムSceneObjectでいつもどおりの開発も行えます。
もう少しコンポーネントとハイブリッドな開発を行いたければ、僕の一番のおすすめはPRMLをEasyCastingと同じようにcastタグを追加するスタイルです。

castタグのcls属性もクラスの指定なので、ここで独自のCastObjectを指定しておけば、クラススタイルの開発と変わることなくキャストによる開発を行えます。むしろSceneObjectをXML以外で触ることがほとんど無くなるので従来のクラススタイルより一歩進んでスマートに開発が行えるようになりました。

castタグ以外にも、ほかにも自由にXMLにタグを追加してdataHolderから値をとるなど、かなり柔軟で強力な開発を行えるスタイルなので、ばりばりクラスを使いこなす人ほど「コンポーネントスタイルとの連携なんて」と思わず是非とも実践して欲しい技の一つです。

ご意見ご質問は随時受け付けております。みんなでオレオレProgression開発スタイルを語り合おう！