本題は、スクリーンセーバーDL用の特設サイト作りましたよってお話。
Re-BUILD

////////////////////////////////////////////////////////////////////////////
まず最初からスクリーンセーバーを作ろうと思ったわけじゃなくって。。
以前から考えてたネタをワンダフル用に作ってたら、アレもコレもとだんだんと手がこんできたので、これスクリーンセーバーにすればいいんじゃね、と。
じゃあSWFをスクリーンセーバーにするにはどうすりゃいいの？ってことで調べてみました。

ざくっとググって以下の二つが見つかりました。

• 1)InstantStorm：winのみ
• 2)fla:ver：win/mac

1)は完全無料でいろいろかゆいとこに手が届くような感じだけどmac用は不可
とりあえずwin用にはこっちを使いました。

2）はwin/macどちらも対応で、低機能の無料版と高機能の有料版があるんだけど無料版ではOSX10.6用（64bit版）の対応はできない、と。
win用/mac用で個々にライセンスが分かれていて各ライセンスが19,800円
win/mac、まとめて買うと34,800円。
mac用にはこっちの有料版を使いました。
・・・えぇ、mac用のライセンス買いましたよ。19,800円。

////////////////////////////////////////////////////////////////////////////
あと製作に関する裏話的なこと。

もともとは数年前にみた海外のサイト（たぶん製作会社だったと思う。。）で、地平線がみえるようなシンプルなランドスケープなデザインに、ランダムに家がでてきてスクロールして流れていくようなやつをみたときに、こういうの作ってみたいなーと思ってたのが最初。
（当のサイトはググっても見つけられず。。思い出補正でぜんぜん違うものかも。。）

なんとなくChemical Brothers – Star Guitarを思い出した人もいるかも
Chemical Brothers – Star Guitar
これ、好きなんです。DVD持ってます。

あと、groovisions – GRV2196を思い出した人もいるかも
GRV2196
これ、好きなんです。DVD持ってます。

++++++++++++++++++++++++++++++++++++++++++++
GRV2196はyoutubeになかったけどGRV2126を発見。
これは観てなかったのだけど、トラックの形とかそっくりだったｗ
(トラックは軽トラの側面画像を適当にトレースしてたんだけどね）

////////////////////////////////////////////////////////////////////////////
元になるソースはwonderflにアップしてあります。
（実際にスクリーンセーバーに使ってるものとはちょっと違います）
なにげに車を描画するクラスがボリュームありますｗ

Re-BUILD – wonderfl build flash online

GoogleAPIということで「はじめてのGAE(GoogleAppEngine)」というテーマで発表しました。

発表のスライドはこちら。
【初めてのGAE/てらこ14発表資料】

///////////////////////////////////////////////////////////////////////////

環境設定のざっくりとした流れ
1.Eclipseのインストール
↓
2.Eclipseの日本語化
↓
3.(Eclipseへ)Goolge Plugin for Eclipseのインストール
↓
4.(Eclipseへ)Slim3 Plugin for Eclipseのインストール

1～3.については以下に詳しく書いてありました。
Google App Engine for Java(GAE/J)プログラミング入門: 「開発環境の準備からデプロイまで」 (1/5)
※一点だけはまったのは日本語化する際に、Eclipseのインストール場所に注意
気持ち的にc:\Program Files\eclipseにインストールしたところだけど、途中のファイルパスにスペースの入ったフォルダがあるとだめみたい。
というわけで、c:\にインストールしました。

4.に関しては以下に詳しく書いてあります。
Slim3 日本語サイト(非公式)
※Eclipse3.4と3.5をサポートと書いてありますが、3.6でも一応できるようです。

///////////////////////////////////////////////////////////////////////////

実際に作ってみたサンプル
393.bz/Invader
GAEと連動してレトロアーケードゲーム的なネームエントリーによるスコア共有の仕組みを仕込んでいます。
(NAMEとSCOREをGAEのDatastore(DB的なもの)に保存し、別ドメインからアクセス）
///////////////////////////////////////////////////////////////////////////

作成したGAE/Jのプロジェクト一式はこちら
Flash2GAE(10MB)

一応invaderゲームプロジェクト一式はこちら
（やっつけ書いたのでソース汚い。。）
InvaderForGAE(1MB)

///////////////////////////////////////////////////////////////////////////

今回のポイントは、別ドメインからGAEのドメインへのアクセス。
何もしないとセキュリティポリシー引っ掛かりますが、crossdomain.xmlをGAE側においてあげれば問題ないみたい。
配置の仕方は、GAEのwarフォルダ内にcrossdomain.xmlを置いた状態でデプロイ処理(アップロード)をするだけ。

不明なところがありましたら、コメントなりどうぞ。
(というかJavaはぜんぜんよくわかってませんが…)

///////////////////////////////////////////////////////////////////////////
PS.
他の方の発表を聞いて、Python+AMFの方が楽そうだなぁと思ったのでそっちも試してみたいところ。
pyAMFというライブラリがあるみたい。
さらにもっとお手軽なのは、PREAIR。
これならJavaもPythonも書かなくてもAS3だけでGAEと連動できるサービス作れちゃう！

「Twittenorion」

タイトルどおりTweetのテキストでテノリオンするという感じです。
SEARCH WORDを入力しSEARCHボタンを押すと、入力してワードでのTwitterで検索を行い結果の20件をランダムで順番に表示さいていきます。
DRUM KITのON/OFFの際にはドラムパターンがランダムに変更されます。
BPMにあわせて流れる文字の速度が変化します。
集中したいときの作業用BGMになるかなってつもりで作りました。
　
以下からDLできますので、気になった人は試してみてくださいませ。
DownLoad : Twittenorion
　
　

またてらこでの発表資料のスライドもアップしておきます。
東京てらこ vol.9 発表資料
(キーボードのカーソルキーでスライドの操作ができます)
　
　

・キーボードから任意の文字を入力できるようにしたものをwonderflにアップしました。

Twittenorion – wonderfl build flash online

Flash初心者向けの内容で、
「Flashでのオブジェクト指向的な考え方とはなんぞや？」
という部分に的を絞って2時間ひたすらしゃべって喋りました。
自分的にはこの部分を理解するまでにかなりの時間を費やしたので、これで理解を早めるきっかけになれればいいなという思いでスライドを作りました。

本日のスライド
オブジェクト指向で考えるAS3
サンプルファイル
sample.zip

講義後のアンケートをみたかんじでは参加者12名の反応はまずまず。
まったくわからなかったという人が居なかったので一安心。
10人中、1人でも「そうだったのか」とおもってくれれば良いと思っていたけど、半分くらいの人が理解が深まったと書いてくれたのでやったかいがありました。
よかったよかった。

◆Sneak Peek of Max 2009 / Lee Brimelow
1)FLASH CS5
・コードエディタの改善：カスタムクラスのimport可能
・TLF：IDEでToolパネルができる
・DecoTool：JSでカスタムできる
・CompileErrorPanel：
・XFL：現状ライブラリ内のデータを外部化できる？
・Code Snipetts
・FBとの連携
・コンポーネントのプロパティ設定：デフォルトのToolパネルに含まれる
・FontEmbedPanel：フォントの管理
・FLVPlayBack：パブリッシュしなくても動画再生可能

・TFL
→はみ出したテキストはイラレっぽいテキストボックスの処理が可能。
→簡単にコラム化。
→文字とか縦

・iPHONE
→OpenGLとは違うエンジンでうごく。(簡単なものに向いてる)
→Winだけでも作れる

・FLASHPLAYER 10.1
→RAMの消費量半分以下に
→マルチタッチ(PCでもOK)
→向きとか加速度とか
→マイク、音声の取り込み
→uncaughtError：デバッグプレイヤでのポップアップエラー対策が可能？

・AIR2.0
→他のアプリが直接起動可能(.docとか.flaとか）
→dmg/exe形式でパブリッシュ：コマンドラインでOSにアクセス可能
→socket通信できる？
→USBKeyのイベントも取れる？
→WEBKitはHTML5、css3対応

◆Making Thing Move / Keith Peters
・書籍：Actionscript3.0アニメーションの内容
(速度、加速度、跳ね返り、バネの動きの説明)

・GoASAP：Tweenを作るツール

◆Connecting the Dots / Mario Klingemann
・素数の音楽：書籍
・MathGraphics：書籍
・wolfram alpha：数学のwiki
・オートマトン：ライフゲーム
・ボロノイ図
・ランダム値でテストするときはランダム値を保存できる仕組みを用意する

◆Quick as a Flash / Grant Skinner
http://gskinner.com/talks/quick/
最適化の話
・uint/int/Numberについて
→FP9：uintが一番遅い
→FP10：uintが一番早い
・デバッグツール
→PerformanceTest.as：framework
→FlexProfiler:おすすめ

・CodeOprimize
1)syntactical(文法的)
・前提
→リリースビルドでパブリッシュすること(デバッグビルドは遅い)
→TAAS：SWFを最適化してコンパイルしなおす
・計算はさせない：a = 10+5;よりa=15;
・割り算(/)より掛け算(*)を使う
・ビット演算を使う。Math.floor(num)の代わりにnum|0
・型指定を的確に
・ifを使う場合は処理の順番に注意
・インスタンスメソッドを使う
・myClass.hoge()とかは遅い

2)archtectual(設計的)
・インスタンス化を減らす
・ディープアクセスを減らす
・funtionは遅い
・dispatchEventよりもcallbackを使う
・collectionについて
→それぞれ向き不向きがある

・WEBCAM
→フレームレートを独立して変更可能

graphicsについて
・rendering関係
→マスクはさける
→ベクターデータは形の単純化
→色、アンチエイリアス
→ビットマップにする
→DisplayObject.z = 0でビットマップキャッシュの保持
→biltting：ビットマップ分割

・filter関係
→領域に注意(空白領域を削る)
→alpha:0< visible：false < removeChild()

・composite関係
→blendMode

・GC
→newを減らしてGCさせないように
→ObjectPoolを利用(使いまわし）

・Janitor.as：イベントを登録して、削除とかできる

◆BigSpaceship:Digital Creative Agency / Joshua Hirsch
・プロジェクトはチーム単位で
・チームにはリーダーは特になし(フラットな関係)
・全員がクリエイティブ
・クライアントワークと同じくらいプライベートワークにも力を入れる(作りこみ)
・プライベートワークでジッケンしたものをクライアントワークに反映
・最終的にはデジタルでもアナログ的なアプローチで製作

「on the fly」
原理概要
・projectorにて投影した映像をIRカメラで画像認識
・投影面にはRetroReflective Materialというものを使用
（入射角と反射角が同じにする性質があるものらしい→高価）
・IRカメラには、OptiTrackを使用
・soft ImageProccesing OpenCV

YCAMでの展示と、骨展での展示では、紙の認識方法が違う
・YCAM ver：紙内の穴で紙の向きを認識。
・骨展 ver：手の影も踏まえて紙の向きを認識
（手の影から一番遠い頂点→隣の頂点から2辺を抽出→四角を認識)

計算部分はC++、描画部分はFLASHを使用
通信方法は、ExternalInterface
現実空間と映像の同期には遅延が致命的なためネットワーク経由での通信では駄目だった。
（Socket、LocalConnectionとか）

「another shadow」
原理概要は「on the fly」と同じ
アルゴリズムは影を三角形に変換して三角形の塊として考える。

三角形分割
・影の輪郭から領域を三角形に分割
（有限要素法、ドロネー分割、ボロノイ図）

制御点を決めて、アニメーションさせる。（頭、手、足、胴体中心等に）
制御点は、グラフ理論の考え方で設定
（三角形の辺の中点をとり、そこに線を引くような感じ）

処理の順番（計算処理はC++)
・輪郭抽出
・三角形分割
・制御点決定
・事前計算
・描画
※C++のPoco というライブラリがJAVAライクでお勧め

まとめ
DesignEngineering→新しくて使えるものを作る
Usable + Innovative = Interactive Art
技術的にはスピードとレスポンス感を大切に
あとは使うシチュエーション（シナリオ）を合致させる。
つまりはプレゼントを作る
→（ユーザーが）欲しい物を考える
→サプライズ要素も忘れない

Q&A
Q：苦手な人へのアルゴリズムとかの効率的な勉強方法は？
A：とりあえず仕事で受けて必死にやる（笑）
あとは過去の遺産の見直すことも大切

◆Gumbo、Catalystを中心としたAdobe Labsの技術紹介
上条 晃宏さん（アドビ システムズ）

・Alchemy
C#並みの演算速度をAS3で利用するためのフレームワーク
FLASHでスーパーマリオ、Webブラウザ(WebKit）の移植が可能になるらしい
ただし、AS3でできなかったことがこれでできるというわけではない。
プログラムサイズも大きくなる。
変換処理には、Gluegen：AS3←→C
コードをまとめて書いてあるものを変換したほうが良い。
（毎回変換処理させると遅くなる）
Cではメモリ開放は手動だから気をつける。

・Struts
P2Pさせるための橋渡しというか準備みたいなもの。
ただし、お互いのIDを知るための仕組みを別途用意しないと駄目。
FLASH COLLABORATION SERVICEなら、IDの仕組みも組み込まれてる。(Flexのみ）

・FLASH Catalyst
デザイナー向けツール
ASなしにインタラクションがつけれる

・FlashBuilder
年内には正式リリース予定
デバッグにプロファイルとデータとサービスが便利そう
日本語版Betaテスター募集中

参加メモ

◆ADOBE CS4紹介 西村
ガイドに沿って移動
→鉛筆ツール等で線を書く→コピー→移動対象のオブジェクトのあるレイヤーにペースト

◆ScaleForm紹介 阿部
3Dゲームの2D的な部分
→パネル系、MENU、ゲーム内のミニゲームとか

ベクターグラフィックをテッセレートしてGPUでレンダリング
→高速・低不可

EddgeAA エッジだけアンチエイリアス
クロスプラットフォーム（wii Ps3,Xbox)
ベクターテキスト使える。

メモリ管理が最重要
リッチなSTATS有（AMP)
GFx CLIKのソースは見れる。

ScaleFormVideo
→ビデオ対応、FLASHに張れる

ScaleForm IME
IMEのUIデザイン（スキン変更容易）

◆ホームメディア事例「あいうえ おーちゃん」
ハードウェアとScaleFormを連携させるエンジンを自作
→一番大変

◆Q&A
IPHONE対応は？
→いずれ（ScaleＦｏｒｍ)

SWFをgfx対応は簡単？
→簡単らしい(ホームメディア）

NetConnectionとかサーバーにアクセスするのは不可？
→ScaleFormでは不可（ScaleＦｏｒｍ)

FLASHERがゲーム開発するには
→ゲーム会社に入るのが一番早い（でもMenuとかだけになっちゃうかも）（ScaleＦｏｒｍ)
→業界にAserは少ないみたい。
→FLASH部分の外注ということは一般的ではない
(日本は内向的）

インターフェース部分の互換について
→MainProgramにて変換処理をマッピング（ホームメディア）
→Flash側はいつもどおりに作ればOKにする

FLASHコンテンツ、SDKのライセンス問題
→特に公式にライセンス取り交わしてないけど、ADOBEとは話は通してある。（好意的）
→レンダリングエンジンとか作っても特に問題ないよ

開発コストどれくらい削減できました？
→答えられないけど、もっとも大変なのは、MainProgram（ホームメディア)
→C++で5万行くらい
→ScaleFormを使わなかったら10倍くらい？

FLASHをUVマップできるか？
→できる

PUBLIC/IMAGE.METHOD
2009/5/16 14:00～20:15

◆session01：TEAM★LAB × タナカカツキ
スケッチピストン
idu+plus

スケッチピストン×タナカカツキ
→偶然の産物が面白い
→絵が下手な人でも楽しめるスケッチブック
→漫画的

プレゼン入試
→デザイン的大喜利
→面接＋実技＋プレゼン力をまとめて観れるという発想

漫画的な発想→くだらないことの面白さ
Why的な視点（B DASH/きのこ）

◆session02：FUGAHUM × 田島一成
田：ツールありきではなく、表現があってのツール
F：インスタント化への危機感、インスタントではない個
田：勢いとベーシックのバランス（足し算、引き算）

◆session03：I AM ROBOT AND PROUD × 真鍋大度
プログラム言語→動作ではなく、動作→プログラム言語的な発想

◆session04：辻川幸一郎 × 伊藤誠
伊：インタラクティブの自由さと演出効果とのジレンマ(反比例的)
演出家の考えるインタラクティブとは
→辻：インタラクティブの中に制限をうまく盛り込むことが大切
→伊：お化け屋敷的なコンテンツ（制限：入り口、出口、ルート。。。)

ヒッチコック「裏窓」的なサイト、HBO Voyeu
神様視点は面白い（シムシティ的）

制限には予算も含まれる。
制限の中から新しいアイデアが生まれる。

◆session05：中村勇吾× 富野由悠季
富：ツールの発達による敷居の低下（才能が無い人への学校によるだまし）
　　物作りへの責任性の欠如
　　スタジオワークについては、それぞれの役割をあたえる。
　　（全員天才ではなりたたない）
　　イーストウッドの初期作品→最近の作品の違い
中：作品のHowToは伝える必要はない。
　　ツールには振り回されたくない
富：ツールの癖によるオリジナリティの欠如
　　絵心の無い人はどれだけディテールを詰めても駄目なものは駄目。
　　CGの使い方：アメリ◎、レッドクリフ：×
中：アニメ、映画は動きのサンプル収集（ストーリーとか興味ない）
中：新しいアウトプット
　　→インテリアデザインとしての動画（非常灯など）
富：動く画としての性能
　　→他人が見やすいもの
　　→カット切り替えでは、通常は画面中央に目が行く
　　→同じようなスピード感に疑問（ハリウッド映画とか）
　　→かみて、しもての演技（原理原則）
★人の育て方
中：各個人の感性を伸ばそうとするよりも教えた方が早い
富：才能がある人は育つ、無い人は育たない
　　→基礎学力は必須
　　→でもいつ才能の芽がでるかはわからない（自分がそう）

富：動画製作には、物語性がないとだめ（コンセプト）

パネル自体は4万円程度で出来るらしい。
タッチパネル原理はFTIRという技術。
簡単に書くと
1.アクリル板の側面から赤外線を照射
2.アクリル板内を赤外線が全反射状態
3.アクリル板を触れると指で触れた部分が光が散乱
4.その状態を赤外線カメラで計測。
5.カメラからのビデオアウトをPCに取り込み
6.tbetaというソフトで解析
7.TUIOというプロトコルでFlashにデータ送信
8.Flashで処理して画面更新

・アクリル板は専門店で2万円くらい。
→側面は鏡面仕上げ的な加工
・赤外線カメラにはWEBカメラを改造してしよう。
→通常WEBカメラは赤外線カットフィルタがあるのでそれを除去。
→さらに赤外線だけを拾うように赤外線フィルターを装着
・TUIOは自作
→これはオープンサウンドコントロール(OSC)プロトコルがベース
→フラッシュ用OSCのは既にある→FLOSC(FlashOSC)
→でもAS2用なので、バイナリソケット通信ができない(XMLソケットのみ)
→パフォーマンスが落ちる。
→よってAS3用のものを新たに開発(JAVA)

AS3で、今回のタッチパネル用に用意したクラスは３つ
・TouchManagerクラス→基本となるクラス
・TouchEventクラス→カスタムイベントクラス
・Fingerクラス→カスタムイベントが持つもの？

デバッグについて、
毎回実機でやるのは準備が大変なのでPCだけでもできるように。
1.マウスでの操作も有効化するできるようにした。
→この場合、シングルタッチのみしか使えない。
2.tbetaでは動画ファイルを再生可能なので、デバッグ操作となる画像を用意して再生
→動画を用意するのが大変
3.TUIOsimulatorという専用アプリを仕様
→マウス操作だが、特定の操作によって擬似マルチタッチも可能。

課題
・FILRの制度を上げる
→1mmのシリコンを塗ると反射率の関係？で制度があがるらしい。
・台がぐらぐらする。
→もうすこし安定度の高い台を用意する。

次回のOOP勉強会は4月予定。
IAMASの卒業生のサンプル紹介的な内容になる予定。

◆ADOBEからの最新情報、というかお願い。
・西村さん
★Adobe EDGE Now!
・何かネタがあったら連絡ください。
★Adobe Flashデベロッパーセンター
・何かネタがあったら気軽に記事寄稿してください。
・ビギナー的な内容も大歓迎。
★米Flash開発チームもまた呼ぶかもだから質問とかあったら考えておくといいかも。
★CS4の紹介サイト
・みてね。
・冊子もあるよ。
★FP10での製作事例も募集中。
★Adobe Records
・ご応募まってます！

◆spark近況
・yossyさん
・Adobe MAXでスパークした！
・サイトもリニューアルした！
・4/25～28のFITCイベント、日本人は入場料無料にできるよ。
→sparkも話します！(yossyさん、saqooshaさん)
・FLARToolKit、商用ライセンスできました。

◆MAXレポートの裏側
・flabakaさん
人と同じ形式で書いても読んでもらえない。
漫画、落語、漫才形式だと面白そう。
そんな感じで作ったレポートでした。
sparkの導入ドキュメントもこんな感じで作ったら敷居が下がる？

◆簡単なSVG的ななにか
・nutsuさん
SVG：ベクターグラフィック言語（XML)
IE以外のブラウザなら大体対応
(JAVA、ASと連携でアニメーションとか)
Frocessingでも扱えるようにした。
トラのグラフィックがパスデータ単位でぐるんぐるんするDEMO

◆勉強会について思うことと、自前で3Dについて
・道家さん
勉強会で聞くだけではわからないよね。
聞いて→実行して初めて勉強したことになるよね。
で、聞くだけよりも発表する側に回った方がもっと勉強になるよね。
呑み会と勉強会は切り分けて考えた方がいいよね。
→ごはんとFLASHよろしく。
3Dに見せるには、一番大事なのは奥行きがつくこと。
奥行き的な表現つけば最低限の3Dなかんじに。
奥行きな公式
パース = 視点距離 / (z ＋視点距離)
あとは回転させたいときは行列で。
行列はAS3(FP10)ならMatrix3Dで。
中の計算はFLASHがやってくれます。

◆女子的FLASHデザイン
・中野さん
1.progression初めて使ってみました的なお話。
2.女子的カワイイモノとは、
→派手、丸い、光り物、ビビッド、色いっぱい
3.ごはんとFlash女性限定版やりたい。

◆BetweenAS3途中経過
・yossyさん
Tweener使ってるけど、ちょっとアレなのでじゃあ次はこれ的な位置づけを目指す。
BetweenAS3の特徴
1.柔軟なパラメータ可能
・開始値とか、相対値も対応
2.グループ化可能
・パラレルとかシリアルとか
3.加工できる
・reverseとか、returnとかsliceとか
4.制御可能
・playとかstopとか
5.イベントも使える
・IEventDispatcherをついてる
6.高速で軽量
・目標はTweensyで最低TweenMaxは超える
(現状ではTweensyより早い！)