Katapad Design

1. Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編] ★★★☆☆

enterFrameでモーションを作るのに慣れていない人向け

「入門編」とあるので、かなり初心者向けに書いてあります。初心者向けなので、コードの美しさよりも動くことが重視されています。最後のほうのサンプルは応用できそう？ちょっと偏ってる気もしますね。

すべてのサンプルが公開されているので、確認してから買うかどうか決めるのがいいと思います。
http://furukata.com/fmpd/

2. ビジュアライジング・データ ―Processingによる情報視覚化手法 ★★★★☆

情報の整理や正規化など、その道の手法が学べる。

「データ収集」「解析」「フィルタリング」「マイニング」「表現」「精緻化」「インタラクション」というビジュアライズの7つのステップに沿って解説されています。

ビジュアライズは散布図、折れ線グラフ、ツリーマップ、ネットワークグラフ、などなどです。

情報の取り扱い方に対する姿勢が学べます。これを読んだ直後に案件に活かせることがあって、とても重宝しました。何はともあれ「正規化」して「マッピング」するようになりました。

この本ではツールとしてProseccingを用いていますが、Flashでも十分書ける内容だと思います。

3. アジャイルプラクティス 達人プログラマに学ぶ現場開発者の習慣 ★★★★★

悪魔と天使のささやきを対比させ、アジャイルな開発の心構えを教えてくれる

達人プログラマー―システム開発の職人から名匠への道

と同じような本。200ページほどの薄い本。すぐに読めました。

「正しい軌道に乗せるために、変化を起こし続ける」ということがアジャイルの本質なのでしょうか。

「いつでもリリース可能に」「インクリメンタルな開発」「フィードバック」「テストファースト」「ソリューションログをつける」「あらゆる例外を報告する」など、プラクティスが45個も掲載されています。どれもすぐに実践できる内容で、アジャイルな開発の心構えを教えてくれる1冊です。

4. Foundation Actionscript 3.0 Image Effects ★★★★★ オススメ！

Bitmapの操作を掘り下げまくった洋書

FlashPlayer10のPixelBender、ネイティブな3D、高度なBitmap操作などなど、Flashでできる画像処理をメインにした本です。はやく和訳本が欲しいくらいの出来です。

PixelBenderに関しては、50ページも書いてあります。これだけのことが書いてある本は他にないと思うので、それだけでも大きな価値があると思います。

他にはBlendMode、BitmapFilterの基礎から、テキストやビデオエフェクト、エフェクトのアニメーションなど応用の範囲も広く扱われています。

洋書なので読むのが億劫になることもありますが、サンプルコードと結果がわかればいいんです！読んだ気になって実践実践！

5. 初めてのFlash Video ★★★★★ オススメ！

FLVの本というより、映像入門書。「FLV？なんとなく知ってます」程度なら絶対読んどけ！

扱っている内容がFMS2、AS2というのが難点ではありますが、FLVの技術的なことだけでなく、構図やビデオの撮影方法、編集まで書かれています。

その他にもFMSで録画、ストリーミング、PHPとDBとの連携、FlvPlayBackの基礎など、非常に多岐に渡る内容です。

また、オライリーにしては珍しく和訳本ではなく、日本人による執筆なので、とても読みやすくなっています。

あやふやな知識しかない映像初心者ならば、読んで絶対得をする内容です。

6. よくわかるJava ★★★☆☆

プログラムをあんまり知らない初心者向け

Red5というFMSクローンアプリがjavaで書かれており、必要にかられて買いました。「if文とは」「forとは」から始まる、よくある初心者向けの本です。

この手の本は店頭で適当に眺めて買うほうがいいですね。「Eclipseで始めるjava」みたいな本でもいいかもしれません。

7. About Face 3 インタラクションデザインの極意 ★★★★★ オススメ！

それは本当にユーザーのことを考えているのか

ユーザーのゴールを知ること。「ツールによって便利になったが、それによりユーザーが仕事を失う」ことはゴールではない。

冒頭付近でこのくだりがあって、ハッとさせられました。「使いやすい」というのは表層的なものでしかなく、ユーザーが真に何を求めているのかを知ろうとしなければなりません。

本の内容は、ユーザー調査・ペルソナなどの概念的なことから、アンドゥやダイアログボックスなどUIまで、非常に多岐にわたります。

550ページもある上に、どれも濃くって難しい用語もたくさんでてきます。それでもオススメできるいい本です。きっと今までよりもユーザーのことを考えたモノづくりができるはずです。

8. AIRアプリケーションレシピブック ★★★★☆

WebDesigningのAIR記事をまとめた本。AIR初心者向け。いい編集されています。

AIR1.5対応。「ブラウザについてはこの記事」「ドラドロはこの記事」というように1記事1テーマなので、とても読みやすくとっつきやすいです。実際にリリースされているAIRアプリの紹介もたくさんある親切設計。これ1冊でだいぶカバーできると思います。

9. 禁煙セラピー―読むだけで絶対やめられる ★★★★★ オススメ！

「タバコ吸いたい洗脳」を解いて、「タバコ吸わんでええやん洗脳」をしてくれ、めったにできない洗脳体験できる！

喫煙とは洗脳であり、麻薬中毒です。タバコがなければ落ち着きがなくなるし、お金がかかるし、肩身の狭い思いもたくさんしますね。これだけデメリットがあるのに、なぜ冷静に考えられないのか。

それは「タバコがあると落ち着き、活力がもらえる」と洗脳されているからです。

この洗脳を簡単にといてくれるのがこの本です。
様々な言葉で洗脳を解いてくれるのですが、僕は「喫煙者は口が臭い」という言葉に一番圧倒されてしまいました。その瞬間、「タバコが必要」という洗脳が解けた気がします。いままで臭い口をして生きてきて、本当にごめんなさい。

禁煙して最初の1週間は、ちょっと辛い時もありましたが、いま思うと微々たるものでした。周りのひとからも「なんでそんなに簡単にやめられるの？」って不思議がられました。「これで勝ち組になれたんだ！」という新たな洗脳が役に立ちましたね。

禁煙できたことよりも、

• 「本質を見抜かず、洗脳されていることを知り」
• 「自分に有利な洗脳をかけること」

という、洗脳体験、他では得られませんでした。洗脳サイコー！！

10. Papervision3Dではじめる Flash3Dアニメーション ★★★☆☆

まったく3Dを知らずにPV3Dから触る人向け

PaperVisioin3Dを触って初めて3Dの世界に飛び込んだひとも多いと思います。僕もそうでした。あやふやな単語の意味を知れるだけで有意義ではあります。

ただ、至る所にギャグが織りまぜられていて、合う合わないが分かれます。これは閾値を超えていて、気になるひとは大いに気になると思います。

後述するclockmakerの池田さんのPV3D本の方がよいのでそちらにしましょう。書評はこっち

11. ActionScript 3.0 エラーアーカイブス コンパイルエラー・コンパイラ警告・ランタイムエラーの解法 ★★★★★

「初心者」「AS2からの移行する人」に救いの手を差し伸べてくれる本

AS2→AS3への移行時に苦労したのが訳のわからないエラーの山。また、非プログラマでAS3から入った人もエラーには悩まされるはずです。そういったターゲットにはドンピシャです。

何よりこういうマニアックな本が出版されたことが喜ばしいことですね！Flashが盛り上がる！

12. 写真の撮り方手帖 ~たいせつなもの、撮ろう~ ★★★★☆

初心者向け。小さくてすぐ読めて、マニュアルモードで撮れるようになる。

デジタル一眼を買って1年。ちゃんと勉強しようと思って、買いました。知識があるなしでは全然違いますね。

こういう初心者向けの本は他にもあるので、1冊は読んだ方がいいですね。これを読んでマニュアルモードで撮れるようになりました。

あと、シグマ の単焦点も買ったのですが、この本とあわせて読むことで、少しは上達できたかと思います。光や構図など意識することが増えました。

13. ディジタル画像処理 ★★★★★

超難しいけど、絶対役に立つ日がくるはず

以下のサイトさんでされている画像処理など書いてあります。
主にコーディング
http://mainly-coding.blogspot.com/search/label/Image%20processing

撮像素子などの入力、3次元空間から2次元への変換など基礎的なことから、最終的にはナンバープレートの文字を認識するところまでいっちゃいます。

僕にはあまりにも難しすぎて、まだ半分くらいしか読めていません。フーリエ変換とか全然わかりません。それでもいくつか理解できるところもあり、大変勉強になりました。ConvolutionFilterやBlurなどのFilter系がきちんと理解できただけでも、それはもうかなりの前進です。

この本を制圧すればARToolkitの中にいる小人さんが、何をしているのかわかるようになるはずです。

14. ActionScript3.0辞典 [FlashPlayer10/9対応] ★★★★★ オススメ！

必須というより、必読！ヘルプの丸写しじゃない！

800ページもある逆引き辞書。FlashPlayer10の機能を網羅し、FLVPlayBackなどUIComponentまでもカバーしています。

この手の辞書ってヘルプ丸写しが多いのですが、サンプルがしっかり作ってあり、1周読むだけでだいぶ世界が変わります。

僕は50ヵ所以上の付箋を貼りました。まだまだこんなに知らないことがあるなんて。。。ちょっと賢くなった気分も味わえてお得です。

15. ビデオカメラでいこう ★★★★☆

ドキュメンタリーは誰でも撮れる

ビデオカメラを買ったので、適当に選んだ1冊。でしたが、なかなかおもしろかったです。企画書から撮影テク、編集までの流れをさらっと解説してあります。薄くてすぐ読めます。

ドキュメンタリーはプロのものでなく、一般市民にも撮れる、あるいは市民目線の方がおもしろい、というようなスタンスで書いてあります。勉強する気になれますし、心強いです。

著者はOurPlanet-TVという独立放送局の人で、市民のドキュメンタリー制作などもサポートしているようです。OurPlanet-TVには素人とは思えないような骨太作品もあり、映像制作がとても身近に感じれる本でした。

16. .fla2 ★★★★★ オススメ！

偉人の思考回路をのぞき見できる

いわずと知れた.fla2。前作もすばらしい内容でしたが、今作もすごく濃い。

著者のみなさんは、やりたいこと、実現したいことを明確に持ち、困難に見えることを実にポジティブな姿勢でやってのけています。前作同様「どうすれば実現できるのか」というような過程を見せてくれます。

毎日グチっているリーマンFlasherにはうってつけの治療薬となるかもですね。

公式サイトでは出版イベントのYoutubeなどの情報もあります。みなさん濃い話してますね。http://dotfla.net/

17. After Effects Illusionist ★★★☆☆

AfterEffectsの標準搭載されているプラグインエフェクトを網羅したサンプル本。サンプルはCS4のみ対応。

189種類もの標準搭載エフェクトのカタログとなっています。すべてカラーページで画像も豊富でわかりやすいです。辞書よりもちょっと詳しく解説されています。

僕はayato@webさんで表現の勉強をしながら、この本でエフェクトの意味を確認する、という使い方をしました。「ああーコロラマってこういうことなんだー」っていう確認がすぐできると理解も深まります。

また、「これは使えないエフェクトです」と、きちんと教えてくれるのも独学する人間にとってありがたいですね。

ただ、サンプルがCS4だけってのはちょっと…。

18. Adobe After Effects トレーニングブック サンプルデータを触りながら学べるハンズオン形式の解説書 ★★★★★ オススメ！

超大量の図版でめっちゃくちゃわかりやすい

AE始めるなら、まさにこれ！とってもわかりやすい。いきなりショートカットキーの一覧から始まるのも超イイ！

ルミナンス、マスク、トラッキング、タイムリマップなど、初心者がつまづくことをきちんと書かれていて、操作やできることが全部覚えられるんじゃないかと思います。

僕はこの冬、こいつを制覇します！

19. Flash3Dコンテンツ制作のためのPapervision3D入門 ★★★★★

PV3Dの基礎を網羅した良書。ネットに散らばったPV3Dの情報が集まっている

clockmakerこと池田さんの本。まさにあのBlogの通り、ものすごく丁寧な内容です。政治的な意味で★5つしてるワケではなくって、ほんとによくできてる本だと思います。

オブジェクト同士のhitTestやカリング、3D内部でのマウス取得、頂点操作など、Flasherなら必ず1度はググったことのある内容が網羅されています。なのでリファレンスとしても優良。最後にはAS3Dmodまで！

逆に何が書かれていないのかを確認した方が早いかもですね。AR、jiglib、被写界深度の実現などは書かれていません。本のタイトルが「入門」とのことなので、出るかもしれない「応用編」にも期待しましょう！

20. フリーランスを代表して 申告と節税について教わってきました。 ★★★★★

おちゃらけながら、楽しく税のことがわかる本

きたみりゅうじさんというフリーのライター・イラストレーターさんが、税理士と対話形式で、節税について語ってくれます。

著者はとってもおもしろい文章を書く方で、すいすい読めちゃいます。あと、青色には2種類あって、簡単なやつと細かいやつがあり、白色申告するくらいなら簡単な方の青色申告すればいいことが、よ～くわかりました。

あと僕、今はまだサラリーマンなんですけど、この本を紹介するってことは…、そういうことなんです！何かあればお願いしますネ！ゲヘゲヘ！！

21. コミュニケーションをデザインするための本 ★★★☆☆

話題を集めてGood コミュニケイシャーン！

ティーティーティリッティーリー　ティッティーティリッティーリー！！！
wow wow wow wow wow wow wow ！
バッド カミュニケイシャ～～ ン！

ぅWebを中心にぃー、ぃひとつのキャンペーンを掘り下げて解説してありますぅわふぅー。ぅ著者が言ってるけど、ぉこれだけ深く掘り下げる本はあまり例がないですねぃぇぃ。
んんそぉの多くが「話題にのぼるよう」に設定しぃひぃーん、ぅーバイラルやメディアに取り上げてもらって拡散するように計算されていますぅっぅー。 （Yeah） 話題性があれば、それ以上の広告効果が期待できるようですぅぅ （Oh） 。

AISASモデルを使って立体的に捉え、人や情報が流通するような緻密な計画、やり手のプランナーはすごいですね。

ぅぃいずれの事例も消費者に対し「共有したい」「共感する」「発見する」といったポジティブな気持ちにさせるようにやっていて、愛のままにわがままに 僕は君だけを傷つけない。

そしてぇー 羽ばたく ウルトラソウル (Hi)

weightってこんな感じで動いてる

• ロードするItemが10個あって
• それぞれのItemにweightが設定されていない

というケースでは、各Itemに割り当てられるパーセントは1/10、つまり10％ずつです。

このうち1つのItemがFLVなどで他のファイルより重いときにweightを設定します。この重いItemをweight=11と設定しましょう。あと、Itemのデフォルトのweightは1ということを覚えておいてください。

_bulkloader.add("hoge.flv", { type: BulkLoader.TYPE_VIDEO, weight: 11 } );

すると、

こんな感じであがります。元の分母はItem数なので10。それに、増えた重みを足して10+10で分母が20になります。たぶん！これで、FLVのパーセントが55%分を占めるようになり、期待している値に近づきました。

このweightが設定されたパーセントを取得するにはweightPercentを使用します。

weightPercentでもうすこし正確なパーセント表示

BulkProgressEvent.weightPercentにweightを考慮したパーセントが入っています。

(item._bytesLoaded / item._bytesTotal) * item.weight;

いたってシンプルですね。こういった形で加算されていくので、かなり実際と近いパーセントが取得できそうです。

weightの設定にひと手間かける分、ratioLoadedやbytesLoadedよりもわりと正確な値を取得できます。

マルチプログレスマネージャーは、パーセント表示のMVCのM（モデル）部分

マルチプログレスマネージャーはモデルに徹します。大きな流れとしては以下の3点！

1. MultiProgressManagerのインスタンスを作って
2. それぞれのプログレスを見張るをモデルを突っ込むと、
3. 全部をまとめて0～1までに変換された進捗率が吐き出されます

//マルチプログレスマネージャーのインスタンス生成
_progressManager = new MultiProgressManager();
//ローダーのプログレスを70%に設定して突っ込む
var loader:Loader = new Loader();
var model:AbstractProgressModel = new ProgressEventModel(loader.contentLoaderInfo, 0.7);
_progressManager.addProgress(model);

//他の素材読み込みを残り30%に割り当てて突っ込む
var urlLoader:URLLoader = new URLLoader();
_progressManager.addProgress(new ProgressEventModel(urlLoader, 0.3);

//読み込み開始
_progressManager.start();
loader.load(new URLRequest("main.swf"));
urlLoader.load(new URLRequest("config.xml"));

パーセント表示はMultiProgressManagerのイベントを監視するだけ。それもプログレスとコンプリートの2つだけ！

MultiProgressManagerを稼動させるとプログレスのイベントが通知されるのでそれをリスンします。

//このイベントにまとめられたパーセントのプログレスが入っています。
_progressManager.addEventListener(ProgressPercentEvent.PERCENT_PROGRESS, progressHandler);
//パーセントの完了イベント
_progressManager.addEventListener(ProgressPercentEvent.PERCENT_COMPLETE, completeHandler);

//プログレスのイベントハンドラ
private function progressHandler(event:ProgressPercentEvent):void
{
	//パーセント表示を更新
	loadingBar_mc.scaleX = event.percent; //event.percentは0～1までのNumber
}
private function completeHandler(event:ProgressPercentEvent):void
{
	trace("終了");
}

さっきのわかりにくい図が驚くほど簡単に！

担当すべきクラスを分けることで、みるみるあっさりしました！これこそ宇宙の波動！

UMLっぽくするとこうなります（でっちあげのUMLです）

モデルの拡張も簡単！いろんなプログレスに対応できる！

AbstractProgressModelを継承すれば、標準のプログレス以外にも対応できます。しかも、考えるのは2点だけ！

1. progressイベントをリスンすることを書く
2. 完了したときの処理を書く

を書くだけで簡単に拡張できます。同梱しているBulkLoader用のBulkLoaderProgressModelがまさにこれです。

「main.swfは全体の50%くらい、config.xmlは10%くらいで」といった、割り当てもサクっとできる！！

個別にプログレスを監視するクラス（AbstractProgressModel）にはpercentRangeというプロパティがあります。こいつが「main.swfは全体の50%にしよう」といったプロパティになります。

//50%で読み込む
var model:AbstractProgressModel = new ProgressEventModel(loader.contentLoaderInfo, 0.5);

下図のような割合でやるときも、引数を割り当てるだけで実現できちゃいます。

さらに、今回は「パーセントが上昇するときのスムージング（線形補完）」もお付けします！

new MultiProgressManagerするときの第二引数をtrueにするだけで、スムージングします。
いちいちView側で操作する必要がありません。

//引数は EnterFrameの監視にStage
//スムージングをtrue
//スムージングのfrictionを0.3
//パーセントがいっきに上がりすぎないための、最大の上昇幅
new MultiProgressManager(stage, true, 0.3, 0.05)

1.preloader.swf起動（Preloader.as)

2.preloaderがmain.swf読み込み（Preloader.as)

reloader.as 66行目付近から

1. インスタンスの生成（シングルトンバージョンを使用します）

   SiMultiProgressManager.getInstance(stage, true, 0.3, 0.05);

2. イベントハンドラの設定
3. 読み込み開始

3.main.swfを読み終えたら、設定xmlの読み込み

1. Preloader.as 95行目付近 mainLoadCompleteHandler内部で
2. Main.as の86行目 start()を呼び、Mainの構築用のスレッドを開始します
3. LoadConfigThread.as内部でxmlを読み込みます。

4.設定xmlに指定された複数画像の読み込み

AssetsLoadThread.as内部で複数画像の読み込みを行います。
ここではBulkLoaderを使って複数読み込みをまとめています。

5.読み込んだ素材を配置していきます

複数読み込みが終われば BuilderThread.asで配置します。

6.パーセント表示の終了処理

1. すべての読み込みが終了し、パーセントが100%になったら、パーセント表示をフェードアウトさせて消します。
2. Main側ではOpenContentsThread.asでパーセント表示が消えるまで待機状態になります。
3. Preloader.as の116行目付近 completeHandler()が呼ばれるので、そこでパーセント表示をフェードさせます。

7.main.swfの表示開始

パーセント表示のフェードアウトが終わったら、待機していたOpenContentsThreadが動きだし、mainの表示を行います。

スクリプトの流れ

1. 小さなプレビュー画面かどうか
2. ネットワークチェックとSWFの縦横サイズがゼロじゃないかのチェック
   • 2-1.ネットワークにつながってるかどうかのチェック
   • 2-2.stageWidthとstageHeightがゼロじゃなくなるまで待つ（Mac対策）
3. 外部設定ファイル読み込み
4. その他の素材読み込み
5. コンテンツビルド
6. コンテンツスタート～ループ

1.小さなプレビュー画面かどうか

fla:verでは、小さなプレビュー画面でもスクリーンセーバーの本体(swf)が再生されます。小さなプレビュー画面とは以下のものです。

• Win「画面のプロパティ→スクリーンセーバー」上の小ないプレビュー画面
  
• Mac「システム環境」→「スクリーンセーバ」上の小さなプレビュー画面
  

そのまま本体のswfを再生すると画面サイズが小さすぎて不都合が生まれることも多いので、ここで分岐をとり、プレビュー画面ならプレビュー用の画面を見せる、といったことをします。

スクリーンセーバーで再生されているとFlashvarsの"flavermode"にプレビューかどうかのstateが入ります。

trace(stage.loaderInfo.parameters["flavermode"]) //preview プレビュー
                                                 //normal  スクリーンセーバー再生時

AS3での簡易チェックコード

 public static function isPreview(stage:Stage):Boolean
 {
 	var mode:String = stage.loaderInfo.parameters["flavermode"];
 	var result:Boolean;
 	switch (mode)
 	{
 		case "normal" :
 			result = false;
 			break;
 		case "preview" :
 			result = true;
 			break;
 		default :
 			result = false;
 			break;
 	}
 	return result;
 }

補足）previewのときでもstageWidthとheightがゼロじゃないかをチェックする必要があります。Macでは初期値がゼロになります

2.ネットワークチェックとSWFの縦横サイズがゼロじゃないかのチェック

new URLRequest(url + new Date().getTime());

3.外部設定ファイル読み込み

外部の設定ファイルを読みに行きます。この設定ファイルには

• 本体となるswfが最新の状態かどうか
• 読み込む素材はどれどれ

などといったことを記述しておきます。

4.素材読み込み

外部設定ファイルに書いてある素材を読み込んでいきます。

たいていの場合、複数の素材を読み込むことになるので、まとめて読み込めるローダーを使うと便利です。僕はBulkLoaderを使ってガスガス読み込みます。BulkLoaderについてはこないだ書いたのも参考にしてください。

また、すぐに必要のない素材は少しずつ先読みしていくだけのプリローダーを裏で動かし、キャッシュ化しておくと効果的なケースもあります。ドデカいFLVとかは厳しいかもしれませんが、いずれすべて読み込むことになるのなら、ささっと読み込んじゃいましょう。

5.コンテンツビルド

素材のロードが終わり、さまざまな設定を格納したら、ページや配置する画像などの要素をビルド（生成して配置）していきます。

6.コンテンツスタート～ループ

要素の準備ができたら、やっとコンテンツをスタートできます。

スタートさせればあとはループするだけです！

mailto:でメーラー立ち上げようとすると、ブラウザまで立ち上がってしまう

winならIEも開いてしまうので、実質使えません。

「友達に教える」機能を付けるときはWebサイト側にリンクを貼って、

• 「友達に教える」フォームを用意する、もしくは
• mailtoのリンクを置く

のがベターです。

インストール時に一緒にインストールされる追加ファイルにフォルダを作れない

fla:verではどの素材も、スクリーンセーバーの本体となるswfと同じ階層に置かれてしまうので、素材の名前付けに注意しましょう。

これには前回のコメント欄で開発者さんが補足してくれました。セキュリティ的に階層がない方がいいそうです。

スクリーンセーバーを再生している途中で「ネットあり」→「ネットなし」になったら落としたほうがいいときもある

途中で設定を「ネットあり」から「ネットなし」に変更すると大変な労力が必要になることがあります。ならば、いっそのことスクリーンセーバーを強制的に落としてしまいましょう。

スクリーンセーバーが再生されている＝「PCが放置されている状況」が多いので、落としてもしばらくすると「ネットなし」としてスクリーンセーバーが立ち上がります。

ロードする状況化でIO_ERRORなどを見張っておいて、エラーがでたらスクリーンセーバーを落とすコマンドfscommand("quit");を叩くようにします。

あと、落とす前にエラー画面として

「ネットに繋がらなくなったので、落としますね」

と出すのが優しいかと思います。

Macでマウス操作などを許可しているときにブラウザを開いてもスクリーンセーバーが落ちない

マウス操作許可し、親サイトへのリンクやRSSのリンクを張ったりすることがあります。Windowsではリンクを押してブラウザが開くタイミングで、スクリーンセーバーも一緒に落ちてくれます。

このケースではMacでうまくいきません。スクリーンセーバーが落ちずに、裏でブラウザが開きます。ですので、明示的にスクリーンセーバーを落としてやる必要があります。

//リンクを押したら、落とすことも明示する
navigateURL(～～～）;
fscommand("quit"); //スクリーンセーバーを落とすコマンド
		

windows用の素材

mac用の素材

サーバサイドの処理の流れ

1. サーバサイドに接続されたら、サーバの中でアプリケーションインスタンスが生成される
2. appStartが呼ばれるので初期化
3. appConnect()で接続してきたユーザにユーザIDを発行して返す
4. appDisconnect()で切断されたユーザからユーザIDを取り出して、SharedObjectにsetしたそのユーザのプロパティを削除する

といったことをしています。

クライアントサイド（SWF）の処理の流れ

1. rtmpにコネクト
2. ユーザIDを取得
3. SharedObjectに自分のIDとデータ（マウスの座標などのプロパティ）を登録
4. SharedObjectの更新にあわせて他人のマウスカーソルを追加する
5. EnterFrameで描画の更新をする
6. 接続が切れたらサーバ側で、切断されたユーザのプロパティをSharedObjectから消す
7. SharedObjectのプロパティが削除されたイベントが飛んでくるので、それを受けて他人のマウスカーソルを除去する

といったことをしています。文字だとちょっとわかりにくいですね。

SharedObjectのSyncEventが鬼門で慣れるまでが大変ですが、けっこう簡単に作れそうな感じです。

サーバへのインストールとかはwikiで

実はひっそりとwikiを書いてたりしてました。メモなのでそこまで裏は取っていませんので間違いもあると思います。何かの役に立つかもしれませんのでそんな目でみてもらえると助かります。

• Red5まわりのこと
• SharedObjectのリモート操作
• CentOSインストール

その他わけわからん現象とか作った感想とか

マウスのロールオーバーがおかしい（追記：意味がわかった！）

マウスのロールオーバーが、左から右へマウスを移動しているときにしか利かなかったり、おかしな挙動をしています。

右上のフキダシも同様、マウスの移動方向でおかしくなってます。

追記：カーソルに色をつけたかったので、Mouse.hide()をして、カーソルのビットマップを置いているのですが、そこに問題がありました。mouseChildrenをfalseにすればokぽいのですが、衝突判定をhitTestObjectでやっていて、mouseChildrenをfalseにするとhitTestが効かなくなってしまいます。とりあえず放置！

ストーリーや目的、オチがないと、劇的につまらない

これがいわゆる出オチというやつです！

スライドを作って行かなかった

htmlをスクロールして見せてました。u-stream見てる人には文字が細すぎて見えてなかったかと思います。次はそのへんを改善します。

何をしゃべってるのかわからなかった

スライドを読み上げているだけだったなーと思います。ここが一番の失敗でした。スライドと原稿をわければよかった。

芸風がダメなんじゃないかと思った

国道43号線ネタはしばらく公の場では封印します。ポップさが圧倒的にたりませんでした。そんで新しいのを考えました。二次会で期待してください。

作ることはいいこと

「どうやって楽しませよう」とか「どうやって驚かせよう」とか、久しぶりにそういうことを考えれてよかったですし、なにより反応を間近で見れるのはいいですね。稚拙な内容でしたが、ライブ感が楽しかったです。今度はもっとクオリティをあげていきます。

スクリーンタイム（ScreenTime for Flash）

http://www.screentime.jp/

fla:ver

http://flaver.jp/

GIZMO

http://gizmo.anthill.jp/

スクリーンセーバー作成代行もしているが、基本的にはフォーマットに則ったswfを渡し、スクリーンセーバー化してもらうサービスとのことです。

Web Designing2009年 06月号のP64にHONDA INTERNAVIの事例とあわせてGIZMOのことも少し書いてありました。

まとめ　fla:verで十分、より安心感を求めるならGIZMO

案件規模にもよるでしょうが、fla:verである程度カバーできるかと思います。自動更新っぽいことも全部外部にすればなんとかなりますね。それ以上の複雑なことになればGIZMO、といったところでしょうか。

僕はこのfla:verで作るようにしています。次回はfla:verにおける制作のポイントをお話します。

あー、まじめに書いたよー、はぁーまじ疲れるわー、あー、あー、うー、う、ウコンー！！

更新することで飽きさせないスクリーンセーバーに

天下のUNIQLOCKや、オサレなHONDA INTERNAVIも、更新されるコンテンツが楽しみの一つとなっています。

UNIQLOCK

http://www.uniqlo.com/show/

HONDA INTERNAVI REALIZATION

http://www.honda.co.jp/internavi/realization/#/downloads

Play MUJI

http://www.muji.com/playmuji/

スクリーンセーバーの変更を簡単にできるようになった今、簡単に変更させずに「チャンネルはそのままで」とさせるスクリーンセーバーが求められています。せっかく好意を持ってインストールまでしてもらった優良顧客の心を、いかに引き止め、惹き付け続けるのか。ちょっとした更新性を付加することで、そういったブランドイメージを構築するに十分な媒体になりえます。

でもね、僕は頭がパッパラパーだからこれより難しいお話は頭の上に放り投げて、次の話題へ移ろうと思うんだ！アヘアヘアヘ！！

1.サーバに設定xmlを置き、更新する

サーバにあるxmlを読みに行かせ、xmlで画像を変更したり、レイアウトを変更したり、などといったことをします。

2.スクリーンセーバーの本体となるswf自体をサーバに置いて更新する

サーバに本体のswfを置きます。読み込みに時間がかかるときもありますが、不具合があってもすぐに差し替えられる安全性があります。

3.ローカルファイルを置き換えて更新する

作成ツールによってはローカルファイルを書き換えてくれるものもあります。

ローカルファイルを置き換え、中身をごっそり入れ替えることが一番いいのですが、なかなか簡単ではありません。

SWFObjectのDynamic Publishingの場合

SWFObjectで空divを起点に動的にObjectタグを埋め込むやつをすると

• IE全般
• MacのFireFox

で、一瞬だけstage.stageWidthとstage.stageHeightが0になります。

Dynamic Publishingってのは以下のjsコードで空divに埋め込むやつです

//SWFObject1.5
var so = new SWFObject("hoge.swf", "topFlash", "100%", "100%", "8", "#FFFFFF");
so.write("flashcontent");

//SWFObject2.xならDynamic Publishingと呼ばれるタイプ
swfobject.embedSWF("hoge.swf", "flashcontent", "100%", "100%", "9.0.45", "expressInstall.swf", flashvars, params, attributes);
			

サンプルでテストしてみてください。
サンプルのasはこちら

• wmodeはtransparent
• 最初にstageの中心に文字を書こうとしますが、ダメブラウザだと文字が(0,0)にきます
• swfの中心に「うんこ」と書かれたらOKブラウザ！
• 崩れてたらStageの初期サイズが0のダメブラウザ。IEかMacのFirefoxです
• traceされているテキストは以下です
  • 一発目にStageのwidthとheightをチェック
  • ENTER_FRAMEイベントと何回ENTER_FRAMEが回ったか
  • ENTER_FRAMEでStageのwidthとheightをチェック
  • stageのResizeイベント
  • stageWidthがゼロだったらADDED_TO_STAGEイベントを取得
  • それぞれのgetTimer

サンプルの結果

win

IE6～8	Firefox3	Opera9.6	Safari3	Safari4	chrome
×	○	○	○	○	○

キャプチャ

mac os10.5

Firefox3	Opera9.6	Safari3	Safari4
△	○	○	○

（崖っぷちさんとこではMacのFirefoxでもアウトでしたが私の環境ではOKでした）

ENTER_FRAMEの方がRESIZEイベントよりも速くStageのwidthが変わったことを知る

このサンプルを作っていてわかったのですが、ENTER_FRAMEでwidthとheightを監視して、ゼロじゃなくなったあと（ENTER_FRAMEのイベントハンドリングが終わったあと）にRESIZEイベントが飛んできます。なので、無意味なタイムラグが生じます。

SWFObjectでの原因

SWFObjectの原因は以前のエントリで妄想を膨らませましたが、これは間違っていると思います。詳細ご存知のかた、おしえてください！

対処法について

• Event.RESIZEよりEvent.ENTER_FRAMEの方がstageの幅高の取得が早いので、ENTER_FRAME監視がベター
• dispatchEventしてるのは入口と出口を分けないため。
  （newする前にif(stage.stageWidth * stage.stageHeight != 0)を挟めばOKブラウザをスルーできますが、OKブラウザとNGブラウザで出口がバラバラになるとややこしいのでこうしました。）

クラスとサンプル

サンプルとソースzip

StageSizeChecker.as

package com.katapad.utils
{
	import flash.display.Stage;
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.utils.getTimer;

	/**
	 * WinIEやMacFFでSWFObjectのDynamic Publishingをしたときにおこる
	 * Stage.stageWidthとstageHeightが0になる問題を
	 * EnterFrameで監視してチェックするクラス<br />
	 * Event.RESIZEが飛んでくるタイミングがEvent.ENTER_FRAMEより遅いので、
	 * EVENT.COMPLETEのついでにstageからEVENT.RESIZEも飛ばします(オプション)。
	 *
	 * @author katapad.com
	 * @version 0.1
	 * @since 2009/03/17 3:40
	 * @usage
	 * <p>MainクラスやPreloaderクラスの最初に</p>
	 * <pre>
	 * var StageSizeChecker:StageSizeChecker = new StageSizeChecker(stage);
	 * StageSizeChecker.addEventListener(Event.COMPLETE, delayInit);
	 * StageSizeChecker.start();
	 * </pre>
	 * <p>を書いて、あとはEvent.COMPLETEの受取先で</p>
	 * <pre>event.target.removeEventListener(Event.COMPLETE, delayInit);</pre>
	 * <p>すればOK</p>

	 */
	public class StageSizeChecker extends EventDispatcher
	{
		/**
		 * stage.stageWidthとstage.stageHeightが0以外になったら配信します。
		 * @eventType flash.events.Event.COMPLETE
		 */
		[Event(name = "complete", type = "flash.events.Event")]

		//----------------------------------
		//  static var/const
		//----------------------------------

		//----------------------------------
		//  instance var
		//----------------------------------
		private var _stage:Stage;
		private var _isResizeEvent:Boolean;

		/**
		 * ステージサイズを見張り、ゼロ以外ならEvent.COMPLETEを配信します。
		 * @param	stage
		 * @param	isResizeEvent	_stage.dispatchEvent(new Event(Event.RESIZE))も同時に発動させるかどうか
		 */
		public function StageSizeChecker(stage:Stage, isResizeEvent:Boolean = true)
		{
			init(stage, isResizeEvent);
		}

		private function init(stage:Stage, isResizeEvent):void
		{
			_stage = stage;
			_isResizeEvent = isResizeEvent;
		}

		//--------------------------------------------------------------------------
		//
		//  PUBLIC
		//
		//--------------------------------------------------------------------------
		public function start():void
		{
			if (isValidSize())
			{
				complete();
				return;
			}
			_stage.addEventListener(Event.ENTER_FRAME, check);
		}
		//--------------------------------------------------------------------------
		//
		//  PROTECTED
		//
		//--------------------------------------------------------------------------

		//--------------------------------------------------------------------------
		//
		//  EVENT HANDLER
		//
		//--------------------------------------------------------------------------
		private function check(event:Event):void
		{
			if (isValidSize())
				complete();
		}

		//--------------------------------------------------------------------------
		//
		//  PRIVATE
		//
		//--------------------------------------------------------------------------
		private function isValidSize():Boolean
		{
			//trace( getTimer(), "_stage.stageWidth : " + _stage.stageWidth );
			return _stage.stageWidth * _stage.stageHeight != 0;
		}

		private function complete():void
		{
			_stage.removeEventListener(Event.ENTER_FRAME, check);
			if (_isResizeEvent)
				_stage.dispatchEvent(new Event(Event.RESIZE));
			dispatchEvent(new Event(Event.COMPLETE));
			_stage = null;
		}

		//--------------------------------------------------------------------------
		//
		//  GETTER/SETTER
		//
		//--------------------------------------------------------------------------

	}

}

今回説明したサンプル

• ソース一式（wrap.phpはバスキュールさんのところから拾ってきて、上のソースを追加してください

• 動作サンプル

  redirect.php

  swf.php?what_i_need=money →hoge.swfにGETパラメータを付与して表示。ボタンを押すとgoogleにGETパラメータを受け流します。適当にGET部分を変えて表示してみてください

BulkLoaderの便利ポイントをまとめると

• まとめてロードできる
• String形式のurlをadd()するだけでロードの準備はOK。さらにvideoなのかxmlなのかjpgなのかなどを自動判別してロードしてくれる（きちんとtype指定もできるのでやったほうがいいです）
• ロードが終わったら、あらかじめBulkLoaderに渡しておいたIDやurlのstringで取得できる
• getXML()とかgetBitmapdata()などで好みのインスタンスで取得できる
• 複数ロードのパーセントや何個中何個がロードできたかを取得できる。
• ロードしたものを取得後、メモリに残したり、取得したらメモリから消したりと、メモリ管理が簡単

といったところです。ものすごく便利です。

1.ロードするときにproressイベントが発動するまで、bytesTotalが見えない問題

外部素材との接続を確立してproressイベントが発動するまではbytesTotalが見えません。下のスクリプトで確認してみましょう。

このように、progressEventが発生するまでbytesLoadedやbytesTotalはわかりません。複数ロード時にはこのへんの問題があります。

BulkLoaderのパーセント表示には2つ種類があり、そのうち強引な作りのほうを選んでしまった

次にBulkLoaderが持っている2種類のパーセント表示を見てみましょう。

1. 読み込みが完了したアイテム数 / トータルのアイテム数（BulkProgressEvent.ratioLoaded)
2. 今までに読み込んだアイテムの総bytesLoaded / トータルのアイテムの総bytesTotal（BulkProgressEvent.percentLoaded）

「1.完了数/総数」は複数ロードするときによく使われる手法ですが、2つしかロードがないときは50%ずつ増えることになるので、使いどころが難しいときもあります。
正確なパーセントを知りたいときは後者の「bytesLoadedとbytsTotalの比率」を使います。

しかし、ここが大きな落とし穴となっていました。

BulkLoaderはこのパーセント表示を強引な手法で実装しています。前述のとおり、flash.event.ProgressEventが飛んでこない限り、bytesTotalを知る術はありません。BulkLoaderでは、

1. bytesTotalを取得できたitemだけを加算し、
2. すべてのitemのbytesLoadedと上記のbytesTotalの比率からパーセントを表示します

つまり、すべてのitemのbytesTotalがわかるのは最後のitemのprogressが始まったときになのに、分母（bytesTotal）が変動する状態でパーセント表示を開始してしまうのです。

ロード直後では
800/1000（80%）
だったものが、その次のフレームで
1000/10000（10％）
となる可能性があるのです。

2009-10-06追記 ： weightPercentを使う

以下のやりかたよりもスマートな解法がありました。BulkProgressEvent.weightPercentを使うともっとまともなパーセントを取得できます。
こちらの記事に書きました。「BulkLoaderで「もう悩まない！」ための6つのtipsをまずは14日間で売上No.1！！」

1.読み込みが完了したアイテム数 / トータルのアイテム数をとる

これが一番安全ですね。パーセント表示は正確なものが期待できませんし、トータルのアイテム数が2つ3つのときはおおざっぱになるので、ごまかしの効くviewにしましょう

2.読み込み順序に優先順位をつけ、重たいものから先に読み込む

先に軽いファイルを大量に読み込むと、重たいファイルを読み込み始めた瞬間にグッと分母が上昇してしまいます。重たいファイルから読めば分母の変動が少ないので、ある程度ゴマカシが効くようになります。

//優先順位はこんな感じで設定
//addの引数でpriorityを設定。priorityが高いやつが優先的に読み込まれる。重たいファイルを優先的に指定しとく。
var bulkLoader:BulkLoader = new BulkLoader("main loading");
bulkLoader.add("めっさ重たい.flv", { priority : 1000 });
bulkLoader.add("コニシキ.flv", { priority : 1000 });
bulkLoader.add("ダイエットコーラ.xml", { priority : 0 });
bulkLoader.add("糖分ゼロ.xml", { priority : 0 });
bulkLoader.add("ふわっふわ.xml", { priority : 0 });
bulkLoader.add("納品前日に仕様変更.swf", { priority : 500000 });
bulkLoader.addEventListener(～～～);
bulkLoader.start();

addメソッドの引数はasdocで