こんばんわ。USKです。

というわけで、てらこ、行ってきました。
なんだかんだで二ヶ月ぶり。

今回のお題は、「戻るボタンアワードに挑戦！」
以下、引用。

今回は、いつもお世話になっております、ペパボさんが開催する『戻るボタンアワード』にみんなで挑戦しようぜっていうことになりました。（みなさんお忙しいので別に無理して挑戦しなくてもいいよ。ゆるーくいこう。ていう言い訳を先に用意しておきマス）

戻るボタンアワードについては下記参照のこと

* レンタルサーバー「heteml」 – 戻るボタンアワード
* ペパボクリエイターズコンテスト（ペパコン2009）

大阪てら子 25 「戻るボタンアワードに挑戦！」 : ATND

そんなわけで今回はアワードの関係上、非公開の作品に限るだろう、という配慮のもと、
Ustreamでの中継もありませんでした。
そして、受付期間は終わったけれども、まだ結果が発表されていないという事で、
ここでみなさんの発表されたものの紹介も自重しておきます。すいません。
決して手抜きとかではありません。

というわけで、自分が発表したものを晒しておきますよ、と。

発表したやつ

さっそくですが、成果物です。

こちら

少しすると真ん中らへんに色のついた矢印が現れると思います。
（接続状況によりなかなか現れないかもしれません。そんな時はリロードでお願いします。）
それを押すと、、、はい、戻りましたね。

あまりの内容のなさに、発表時にも、「え！？」という驚きの声が続出しました。
、、、ほんとうに内容なくてすみません。

解説

で、解説します。

今回は、_level0.KAYACさんで書かれていた、kuler、というサービスのAPIを使用させて頂いています。
【flash時計】kulerで色をつける時計 | エントリー | _level0.KAYAC

この、kulerというサービスは、僕も知らなかったのですが、
人気のある色の組み合わせや、面白い組み合わせなど、様々な色の組み合わせを
登録、編集、利用出来るという、素敵なサービスです。
このサービスでは非商用であれば無料でAPIが使え、様々な色の組み合わせを楽しめる！ということで、
使ってみたかったのです。

そんな経緯で、無理矢理戻るボタンにはめ込んで、使ってみました。

ソース的には_level0.KAYACさんが書かれてる内容、ほぼそのままです。
ですが、書かれているソースをそのまま使ってみると、XMLのパース時になんとも上手くいきませんでした。

名前空間

どうにかこうにか色々調べてみると、どうやら名前空間というものを指定してやらねばならないよう。
この名前空間、というのがイマイチよくわかりませんが、
XMLは独自でタグを決めれる反面、タグの名前が被ってしまうことがある。ので、
それが被っても大丈夫なように、このタグはこの名前空間に属していますよ、という風に使うそう。
ASで言う、クラスのパッケージのようなものだそう。
と、言う事を、てらこで教えていただきました。

というわけで、XMLをパースする時にも、その名前空間を指定してやらないと、
どれに属するタグかを見分けてくれないので、指定してやらないと上手くいかない、のだそう。
（※あまりにもざっくりとした説明＆中途半端な理解度なのでこのまま鵜呑みにしてしまうと危険かと思います。。）

それで、今回使用させていただく、kulerのXMLを見てみると、XMLの宣言部分には次のように書かれています。

<rss version="2.0" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:kuler="http://kuler.adobe.com/kuler/API/rss/" xmlns:rss="http://blogs.law.harvard.edu/tech/rss">

この、xmlns:hogeのhogeの部分が名前空間の指定、となっているよう。
さらに今回必要な色の指定の部分を一部抜粋すると、

<kuler:swatch>
  <kuler:swatchHexColor>F0F0F2</kuler:swatchHexColor>
  <kuler:swatchColorMode>rgb</kuler:swatchColorMode>
  <kuler:swatchChannel1>0.941176</kuler:swatchChannel1>
  <kuler:swatchChannel2>0.941176</kuler:swatchChannel2>
  <kuler:swatchChannel3>0.94902</kuler:swatchChannel3>
  <kuler:swatchChannel4>0.0</kuler:swatchChannel4>
  <kuler:swatchIndex>0</kuler:swatchIndex>
</kuler:swatch>

と、ほとんどの箇所で、kuler:hoge、となっています。
というわけで、名前空間は「kuler」を指定してやればいいんだろう、と予測。
以下のように指定してやります。

var kuler:Namespace = xml.namespace("kuler");

で、パースしてやる箇所で、名前空間::タグ名、という風に、コロン二つでつないでやります。
（コロン一つだとコンパイルエラーになる）

for each(var swatch:XML in items.kuler::themeItem[0].kuler::themeSwatches[0].kuler::swatch) {
	var colorStr:String = swatch.kuler::swatchHexColor[0];
	arr.push(Number("0x" + colorStr));
}

そんなこんなで色が取得出来るってわけです。

ちなみに今回の記事の一番上にあるのは、これを使って色をつけただけです。

まとめ

結局、アワードには応募はしませんでした。
アワードの説明にも書いてあるように、内部的な事よりも、見た人があっと驚く、面白い、斬新な、演出が求められていたようでしたので。
ここからもっと詰めて、触って面白いものに出来ればよかったなー、と思います。
これじゃーあまりにも何もなさすぎです。。

とりあえず、今回のコードをアップしておきます。
ASファイル一つだけ、です。
teraco25.zip (Index.as) – 1.7KB

次回てらこは9/26(土）予定だそうです。
残念ながら僕はいけそうにないですが、、。

参考リンク

・kulerのディベロッパーサイト
Home – Kuler – Adobe Learning Resources
・解説（英語）
B. Feeds – Kuler – Adobe Learning Resources
・Adobe製品にはkulerのカラーピッカーパネルを入れれます。
[Adobe]kulerパネル | blog ViolentCoding

こんばんわ。USKです。

さて、先週土曜に行われたてらこに今回も行って来ました。
今回は奇麗になったAID-DCCさんのところにお邪魔しました。

今回のテーマは、「WEBカメラ」です。
箇条書き風にまとめってかメモっておきます。

やまぢーさん

15面パズルの画像をカメラで取り込んだ画像で。
4時間で作ったそうです。しかもAIR。
カメラの画像を全フレームビットマップにdrawしてるから、
その処理の部分がやたらと重い。

ちなみに、15面パズルでは絶対に解けないパターンが存在します。
・１５パズルで数学しよう！ 〜１〜

ご本人様による解説記事

みのんさん

毎度おなじみの顔認識。
Sparkに上がっている、「Marilena」という顔認識のライブラリを使ってます。
詳しくは以前に書いたのでそちらでどうぞ。
で、さらにその「Marilena」をビデオ向けに高速化したものが最近アップされてたよう。
（見つけれなかった。。）

・マスク（フルフェイスのいかついやつ）をかぶせるのん
・二人並んだ顔を入れ替えるのん
・（顔認識じゃないけど）簡単にストップモーションアニメが作れるのん
三番目に書いたのが技術的にはいたってシンプルだけど、アイデアが逸品で目から鱗でした。

パンツカムヨさん

毎回独特の世界を披露して下さるパンツカムヨさんですが、
最近は「y_tti」の名前の方に統一していきたいそうです。

カメラで撮った画像を保存させる仕方の勉強。
adobeが公開してる、PNGEncoderでバイナリデータを送信出来ます。
で、それをサーバー側で画像に再構築する、と。（合ってる？）
サーバー側のプログラムはamfphpというFlashとは相性がよくて、かつ、簡単なものをほぼそのまま使った、とか。
画像保存はFlash10からはFlashのみでも出来るよ（by さくーしゃ先生）
Mikan | wonderfl build flash online

で、作品。
カメラの画面をクリックで、画面をキャプチャ→ハエの絵に顔を合成→画面上にいっぱい飛ばして→手で追い払える。
いやはや、気持ち悪いです。

手で追い払う部分は簡単な動体検知を行っていて、
ビットマップでキャプチャした1フレーム前の画像と今の画像を比べて、
誤差の大きい場所を調べ、その差をスピードに反映させ、ハエ達を動かしている、ようです。

ご本人様による解説

kimuさん

みのんさんのストップモーションを簡単に作るやつ、をさらに発展させた版。
wiiのコントローラーを使って簡単に色々な制御が出来る。

ボタンを押すことでキャプチャが撮れたり、削除できたり、
コントローラーを振る事で再生や早送り、逆再生が出来たり、と、とにかく高機能。
kimuさんはVJをされているそうなのです。
なので、いちいちPCを触らなくていいし、リズムに合わせて振ったりできるので、その辺wiiのコントローラーってのはかなりいいんじゃないかと。
よく考えられてます。

wiiのコントローラーはFlashと連携させて使うのはそんなに難しいことじゃないよう。
ライブラリ等が公開されてます。
WiiFlash : Wiimote and Flash
また、詳しいやり方がFlashOOPに載ってました。
WiiリモコンとAS3 – Flash OOP Japan

以前のてらこでも、trick7さんがローソクの炎で画面の中の地図を照らし出す、ってのをwiiを使ってやっておられました。
（以前の自分のログ）

wii本体がなくてもコントローラーだけでも結構遊べそうな気がしました。

トンカさん

コンセプトはマイノリティリポートのやつ。

カメラの前で自分の動きでポインタを操作。
二つのポインタがあって、それによって、写真の両端を掴めたりします。
ただし、動体検知しているので、指先は常に動かしとかないといけません。
その辺がまた良い感じに雰囲気を出してました。

ご本人様による解説

myantaさん

webカメラを使った案件の紹介。
webカメラを使った案件ってあんまりないよね、と。大変そうだけうらやましい。
みんなのWeb面接
求人サイトで、自分の自己PRを登録しておくことによって、採用担当の人がスカウトを行ったり、
そのままその場で面接も出来たりするよう。
テレビ電話ではなくて、事前に決められた質問内容に答える自分の様子を録画して、
担当の人に見てもらう、ってことのようです。

サーバは、Red5っていうFlashストリーミングサーバを使っているそうです。
GIGAZINEに記事が。
無料で利用できるFlashストリーミングサーバ「Red5」 – GIGAZINE

ちゃぶ台さん

FLARToolKit
マーカーから物体が現れるんじゃなくて、マーカーの位置に物体を移動させたい。
（ご本人様による解説）
その物体とは、BigDog！
このアニメーションの方が時間がかかっているのではないかと。
モデリングはLightWaveで、アニメーションはMaya、という豪華仕様。
というのも、Flashの3Dではよく使われている（無料だし）Blenderっていう3Dソフトだと、ホーンアニメを書き出せないそう。
なので、Maya。体験版。

FLARToolKitでは、x,yの座標は普通に取れるけど、角度がちゃんと取れない。どうするの？
それは良く聞かれる。から、gihyoの連載で書いたよ（by さくーしゃ先生）
FLARToolKitを使ったAR系Flashの作り方：第3回　マーカーの位置や回転，向きなどを取り出す｜gihyo.jp … 技術評論社

マトリクスの話でも質問がでたので、さくーしゃ先生が答えてくださいました。
参考リンク：
[as]Matrixによる変形のこと [NUTSU]
Matrixクラス － 変換行列 | デベロッパーセンター
いきなり3Dでは難しいので、2Dで理解して、それにZ軸が加わった、と考えるといいよ、とのこと。

シナチクさん

画像をアスキーアートみたいにしてくれるライブラリがあったから使ってみました。
ライブラリの紹介。
Oaxoa Blog » Asciify – Actionscript 3 (as3) Ascii Art class
ご本人様による紹介

「あこがれのあの子とツーショット写真を撮ろう！」
タイトル通り、写真が撮れます。
ご本人様による解説記事が詳しいです。
シャッター音が小気味よい。

挙動不審カメラ
これをそのまま作ろうとしたけどなんだかよくわからなかったので、恒例の質問タイムへ。
さくーしゃ先生がwonderflにてさくっと作ってくれました。

さくーしゃさん

紙に引いた線をカメラに写して、それで音を制御する。
線が上がってたら高音、下がってたら低音、みたいな。
紙にかいただけで音を制御できるよ、とのこと。
他のみなさんが発表されている合間にさくっと作っておられました。さすがです。

まとめ的な

今回は発表者も多く、内容もそれぞれレベルの高いものとなり、
非常に面白く、勉強になりました！
二次会でも非常に濃いお話を聞かせて頂きました。

それにしても、相変わらず長い文章になってしまいました。。
もっとまとめれるように努力します。

発表者、参加者のみなさん、お疲れさまでしたー。
来月は、6/27予定だそうです。（未定）

どうも、USKです。

さて、てらこに行ってきました。
てらこレポ書くのも久々な気もします。
（まぁ、まともに勉強してなかったし、、、）

———————————————————————
って、記事を帰ってすぐに書き始めてたんだけど、
そのあと放置してて、投稿するタイミングを逃していました。。。
なんで、今更感がかなりありますが、とりあえず公開だけしときます。
———————————————————————

今回は「AS3教えて！えらい人」ってわけで、
「AS3についての質問大会」でした。
(ATNDにみなさんから募集した質問が載っています）

かく言う僕もAS3はまだまだほとんど触ったことなくて、全然わかってないので、今回の企画はほんと勉強になりました。
そんなわかってない人がわかってないなりに書いてきます！

以下、箇条書きで。

1.class内でparentとrootを多用しちゃわないような、うまい書き方のコツなどあれば教えてください。それがSingletonってやつのことですか？（byシナチク）

・やっぱりparentとかrootを多用しちゃうような書き方はよくない。
・考え方にMVCってのがある。簡単に書くと、
Model – アルゴリズムや計算部分
View – 表示に関する部分
Contoroller – それらを繋ぐもの
【参考】
Model View Controller – Wikipedia
trick7 – FlashとMVCパターン
コリン・ムック氏のたまごっちのサンプルがMVCの勉強にはいいんじゃない？
SSAW06 » Flash ActionScript2.0 実践講座3：Flash OOP詳細
AS3版は本が出ています。
詳説 ActionScript 3.0

2.classがdynamicってどういうこと？じゃあstaticって？（byシナチク）

//エラーなし
public dynamic class teraco extends Sprite{
	public function teraco(){
		this.hoge = "hoge";
	}
}
//エラーあり
public class teraco extends Sprite{
	public function teraco(){
		this.hoge = "hoge";
	}
}

・型宣言なしでもエラーが出なくなる。なんでもあり？
・そのかわり間違ったものを代入してもエラーが出ないのでわかりにくい。
（AdobeMAXで野中さんも型宣言はしたほうが軽くなるよ！って言ってた）
・じゃあどういう時に使うの？
・例えばAS2だと、FuseKitで使うよ！

3.タイムラインにASは書く？クラスに書く？(by j.iida)

・クラスに書く派！
・じゃあ、スクリプトとタイムラインアニメーションだと？
・タイムラインアニメーションを使いたい時ってどうしてる？
・MC内にタイムラインアニメーションを作っておいて、それをリンケージしておくとか。

4.FlexとFlashの違いは？(by シナチク）

・結局同じのもなのでは。
・Flexにはmxmlがある。
・MVCで言えばViewの部分はmxmlで書いて、残りはASで書く。
・けど、mxmlも最終的にはASに変換されるから結局一緒。
・Flexって結局フレームワークだから。

5.AS書く時、何で書いてますか？ ・（by j,iida）

・Winだと、FlashDevelop。MacだとFlex Builder、で決まり！？

休憩：パノラマ屋さん二宮さんの自己紹介タイム

AppBankで二宮さんの記事を読んだばっかりだったので、ちょっとびっくりしました！
iPhoneアプリ(直接iTunesが開きます）もダウンロードしてました！

京都・日本・世界の最新パノラマムービー情報：QTVR Diary

なんと今回のてらこの模様を撮影もしてくれました！
写真もさっそく公開されてます。（全員目線入りで超あやしいですがw）

効率の良いデバッグの方法。（byシナチク）

・サンダーボルト
・Flash、Flex標準のデバッガー
【参考】
【デバッグ強化週間】3分でできるデバッグ環境！ ThunderBolt AirConsoleまとめ｜_level0.KAYAC

・デバッグといえば、メモリ関連の管理で「Hi-ReS! Stats」使ってるよ。
・メモリ関連といえば、ビットマップでメモリの処理が軽くなる話があったけど、これってどういうこと？

ごみ漁り関係（ガベージコレクション関係）を教えてほしいっす。 ステキなクラス設計を。（by ギリギリツーリスト)

・そもそもガベージコレクションってなに？
ガベージコレクション – Wikipedia
・wikipediaの説明じゃわからん！
・びんたさんの説明がわかりやすい！
BeInteractive! [Spark project 勉強会 #06 ありがとうございました]
・System.gc(); で、強制的にガベージコレクションを発動してくれる。けど、これはデバッグプレーヤーでしか動かない。
（FP10からは通常のプレーヤーでも動くようになった？？）
・基本、使ったものは片付ける。
– イベントをリッスンしてるものは消す
– addChildしてるやつは消す。
– 参照もってるやつはnullを入れて消す。
・これらを基本的に考えながら作ってやらないとメモリリーク（メモリが漏れてる）が発生しちゃう。

こんばんわ。
どうも最近てらこに行ってきた記事しか書いてないような気がしますが、、、。
頑張ります。

とにかく。
大阪てらこ17に行ってきました。
お題は「時計」です。

東京てらこのテーマが時計ってことで、それに相乗りした形で大阪でも時計がテーマに。
しかも大阪がパクったのに大阪のほうが先に開催。
そもそも、yugopさんの展覧会が開かれて、それが時計にまつわるネタが多く、
それに触発されたりして、trick7のteraさんが自作のライブラリ、TeraClockを作られて、それを使った色々なものが見たい！ってのもあって、時計がテーマ、となったようです。（割愛、推察あり）

今回idoさんが案件爆発ってことで、
会場が急遽COLORSさんから、AID-DCCさんに変更。
初上陸してきましたが、キレイなオフィスでした。

あまりメモをとらなかったので、覚えている範囲で勢いで書きます。
間、抜けてたりしたらスミマセン、、。

シナチクさん

ご本人さんによる解説記事

シナチクさんは私用のため来られなかったのですが、作品はしっかりと作っていて、
それを代わりにちゃぶだいさんが発表。

写真と時計を組み合わせることによって色々な効果が出るんじゃないかってことで、
写真をバックに色々が時計（とか、時間のカウントなどが）出るようなものが計三つ。

オーソドックスな感じでしたが、キレイに作られてました。

みのんさん

ご本人さんによる解説記事

前々回くらいで使っていた、Marilenaのライブラリを使って、顔検出再び。

yugopさんの展覧会であった、顔をキャプチャして、写真の顔をキャプチャした顔にすり替える、
ってコンテンツの時計版、といった感じ。

５０人分くらいキャッシュがとれるようですが、一人でやってるとかなり虚しかったとのこと。

ノブヒデさん

ご本人さんによる解説記事

時計っぽくない時計を！がテーマ。
時計ってのはデジタル時計だと数字で、アナログ時計だと針があって、と、
結構フォーマットが決まってる、と。
それを全て取っ払って、時計っぽくないものを作りたくて作られたそうです。

なんだかぼーっと見てられるような感じで面白かったです。

パンツカムヨさん

ご本人さんによる解説記事

発表前の自己紹介スライドが凝ってました。
せんとくんとか面白い。

時計、ではないけれど、リズムマシーンを作られていました。
時間に関係して。

音に合わせて動くロボットのようなものの動きがコミカル（？）で面白かったです。

パンカムさんの細かいあしらいとかは結構すきです。

ちゃぶだいさん

ご本人さんによる解説記事

純タイムラインアニメーション、といった趣き。
最近変わったTwitterのアイコン、「honehoneちゃん」を使って、もじもじくんのような時計を。
0〜9までの数字をhonehoneちゃんが体を使って表現してくれるんですが、
その動きを全てタイムラインのアニメーションでされてました。

腕や足や顔といったパーツごとにかなり細かい動きをつけていて、
タイムラインがかなりすごいことになってました。

ちゃぶだいさん曰く、タイムラインの場合だと、時間をかければいいものが出来る！
階段を上るように完成度があがっていくのが明確に見えていい、とのこと。

スライドを駆使したタイムラインアニメーションのすすめ、が印象的でした。
なるほど。

ブログパーツになったよ！！

ここに貼付けてみます。

面白い、、。

カッシーさん

ご本人さんによる解説記事

デジタル時計。
テキストをビットマップに変換して回転させる練習につくってたコンテンツだとか。

別のswfを立ち上げてそこにテキストをうてば、時計の部分がその文字に変わります。
ローカルコネクション（っていったかな？）を使っているそうです。

別々のswf同士がリンクしてて面白い。

さくーしゃさん

ご本人さんによる解説記事

FlashPlayer10からの新機能、swfで音を生成する機能を使っての時計。

時計の数字をビットマップにして、それを音と波形としてFlashPlayerで再生。
そしてそれを音の波形を見れるソフトで見てみると、見事、数字になってるってもの。
（説明あってるのか？？）

元ネタはIAMASの卒展で発表されていた、sonicodeってのだそうです。（動画）

技術的にはなにがなんだか、って感じですけど、見た目と音のインパクトが面白い。
また、パラメータの調整をiPhoneで無線で操作されてました。

hoehoeさん

アナログ時計をデジタル時計に変換。

実際のアナログ時計をwebカムで写して、その針の傾きから何時かを取得、数字に変換するって感じのよう。
まだ作りかけの段階らしく、きちんと動くところが見れなかったのが残念でした。

Hough(ハフ）変換、なるものを使って計算しているようです。

CodeZineのサイトに解説記事が載っていて、そこにJavaのコードがあるので、
それをAS3に移植して、、、という手順だそうです。

slnsyndicateさん

スクリーンセーバー。
一秒ごとに音が鳴るんだけれど、一分ごとに２４時間全て音が違う、ってもの。
音を聞くだけで何時か、ってのが直感的にわかるように。

アナログ時計ってのはだいたいの針の間隔で、感覚的に何分くらいたった、あと何分だ、ってのがわかるので、
それを音でも出来ないか、ってのがそもそもの始まりなんだとか。

席をはずして帰ってくると音がかわっていて、それで時間がたったってのがわかる、みたいな。

その後

その後は、ケンタロウさんによる、FICCの話、や、さくーしゃさんのフィード消化をしながらネットサーフィン、と、
まったりとした感じでした。

二次会は「麹」へ。
すごいおしゃれなところでした。

二次会の方が内容的には濃かったような感じでした。
非常に有意義でためになる、また考えさせられる話が満載で、もうおなかがいっぱいです。
ケンタロウさんのパワーはすごいです。

次回は、Progressionの勉強会になる予定、だとか。
まだ未定なようですが。

そんな感じで、
皆さん、お疲れさまでしたー。

どうも、お久しぶりです。

ほんとに久々のエントリーで、気づけば最後のエントリーから一ヶ月どころか二ヶ月が過ぎよう
していますね、、、。
一度さぼりぐせがついてしまうととことん書かなくなってしまう質なので、気をつけていかねば。

さて。

この前の週末に行ってきた、参加してきたものをかるーくレポート。

NOW UPDATING…

まずは、東京と大阪で開催中の、
「NOW UPDATING…THA／中村勇吾のインタラクティブデザイン」へ。
大阪は心斎橋にある、DNP Galleryで開催中。

感想としては、やっぱりすごかったです。
ほとんどの作品をweb上で見た事があったけれど（ひとつ二つ知らないのがあった）、
あらためて大画面でいくつも並べられた中見るとまた違った気分で見れて面白い。

基本全てユーザの操作が可能なインタラクティブなのものなんだけど、
単に眺めているだけでも飽きずに見れてしまうところがすごいと思った。

ただし、trick7さんのところのレポートを読む限り、東京の方がやっぱり規模が大きかったみたい。
大阪はワンフロア、しかも結構小スペースな展示となっていました、、。

東京のほうのも行ってみたかったけど、さすがに、ね、、。
28日までだし。

ぷちてらこ

その後、すぐ近くの場所で開催されたぷちてらこへ。
今回はなんと、スペシャルゲストにカヤックの道家さんをお迎えしての開催。

ただし、テーマは何もなく、さらに、何かを作ってきた人もいない、という中（かくいう僕もなにも作ってない、、）
いつもに増してのぐだぐだ感全開な感じでしたw

けど、道家さんの話は面白かったし、みなさんが色々な質問を持ってきていて、それに強者達が答える、
という質問会形式に（突如）なったりしたので、中々に有意義でした。

以下、簡単にメモを箇条書き。

・ECMA Scriptの4が正式になくなっちゃうけど、どうなの？
結局どうなろうと、ツールに縛られる事はないんだから、どっちになってもあんま変わらんのでは？
（byさくーしゃさん）
参考：BeInteractive! [ECMAScript Harmony と ActionScript]
akihiro kamijo: ECMAScript Harmony/ES3.1 と ActionScript

・CAM Twistを使ってwebcamの映像を簡単にいじる

・シナチクさんの質問コーナー
Flex SDKを使ってFlashソフトなしにコンパイルする方法、とか。

・GYOROLの仕組みってどうなってるの？？
とりあえず、みんなで遊ぶ。ほんと、すごい。
みなさん色々推察しておられましたが、全くついていけませんでした、、。

・Flash作るときは一人？複数人？どっちがいい？
基本、結構一人で、って人が多かった印象。
複数人でやる場合には、呼び名の統一など、細かい仕様決めが必要。
swf単位でお互い被らないようにしてやれば結構楽？

などなど、今回は多岐にわたる貴重なお話でした。

関連リンク：
崖っぷちWEBデザイナーブログ | プチTERACO 8月23日土曜

PIECE OF PEACE

で、次の日。（日曜日）

前の日のぷちてらこの二次会の席で、ahchangさんが行ったという、レゴの世界遺産展の写真をiPhoneで見せてもらったのですが、
前から開催されてるのは知ってたけれど、その写真を見て見に行くことを決意。
入場料が300円と聞いたのも決め手w
梅田に行く用事もあったので一石二鳥。

で、感想としてはすごいの一言。
結構広い（天井も高い）ところでやっていて、思ったよりお客さんも多かった。
その後帰り道とかでビルとかを見ると、全部レゴに見えてしょうがなかったw

ちょっと調べてたら、結構古い話題だけど、こんなのもありました。
レゴの世界をパソコンでも体験できる：涙が出るほど役立つ ピリ辛ソフト
PCでレゴをシュミレートできるソフト。
レゴ公式のものらしく、アメリカ等からだと、作ったものをそのまま発注できたりするらしい。
（残念ながら日本は未対応のよう）

まとめ

色々見たり聞いたり、ほんと刺激を色々受けた週末でした。

もっと色々見に行ったり参加したりして、色々な方面の物事を吸収していきたいですね。

に、行ってきました。

今回からロゴも一新。
なんと今月(7月)のWebdesigningでも紹介され、7/19には、
「ごはんとFlash ～おいでやす京都～」
の開催も決定するなど、盛りだくさんなてらこに行ってきました。

さらっとながらレポートを。

今回のテーマはタイトルの通り「アイドル」でした。

テーマは前回のてら子で話に出ていたように「アイドル」です。なんでもいいので「アイドル」ネタでなんか作ってきてください。女性アイドルでも男性アイドルでも、はたまた「アイドル」の語源を探ってみたりなんかしてもいいですね。もちろんクオリティなんて誰も気にしてないので気軽に思いついたネタを発表してください。
mixiのてらこコミュより

卓袱台さん

ほぼ開始時間ちょうどに到着したにもかかわらず、すでに始まっていて、半分くらい？聞けず、、。

内容は、卓袱台さんのブログでも連載されている、FLARToolkitを使ったものでした。

前半はほぼ聞けずだったのであれなんですが、最後は、自分の肩にガイコツ(?)を乗せていました。
次の目標はガイコツを踊らせること、だそうです。

モデリングはメタセコイアを使用。
メタセコイアは色々ある3Dソフトの中でも敷居が(まだ)低いそうです。
インターフェイスが日本語ってのもわかりやすい一因。
無料で高機能のBlenderってソフトもあるけれど、使いにくい。
（使ったことありますが、高機能すぎてついていけない面が、、）
ただし、アニメーションはつけれないそう。
その辺の詳しい解説は、ご本人さんのブログが詳しいです。

みのんさん

Marilena Object Detection in AS3を使用して、webカムでの顔認識。

まずは動画で顔認識が出来るようにし、その認識した部分に、アイドルの顔をのせるってもの。
これで誰でもアイドルになれる！
要するに、お面。
これが結構違和感なくはまってて、その気持ち悪さが抜群でした。

さらに、そのアイドルをシナチクさんの顔に変えて、誰でもシナチクになれる！となってました。
何人ものシナチクさんが画面に映し出される様はまさにキモイの一言でした。

ご本人さんのブログで公開されています。

自分

今回はついに初発表させてもらいました。
ネタが、というか、メインの技術が、みのんさんと被ってしまって、
「Marilenaを使って、顔認識をしました。」と言われた時はかなりびびりましたが、幸いネタは被らずにすみました。

というか、技術的な話をみのんさんにして頂いていたので、かなりさらっと流し気味にしてしまいました（すみません、、）。
緊張で何しゃべったかもあまり覚えてませんが、詳しくはまた後日まとめます。

パンツカムヨさん

Box2DFlashAS3を使った作品。
選択したアイドルたちを一緒に戯れれます。
主人公はゴルゴです。

詳しくはご本人さんのブログで解説されています。

hoehoeさん

バーチャルアイドルの中の人になろう！
がテーマだそうです。

耳元にLEDをつけて、それをwebカムから認識し、その認識されたデータを、Flashに読み込み、Papervisionに渡して、
自分が首を振ったりすると、Flash内のモデルも首を振る、となるはずだったそうなのですが、
何故かwebカムが認識されない、という根本的なところでのトラブルが発生したらしく、あえなく断念。

けれど、デモでは動かせる、とのことで、そのデモを見せていただきつつ、技術的な解説もしていただきました。

が、もはやどこにFlashを使っているんだ、というくらい範囲が広く、全くついていけませんでした、、。

たぶん、ですが、簡単に言うと、
webカムでLEDを認識してそのデータを取得してくれるものはフリーのソフトであるようです。
（ヘッドトラッキング、という技術だそうです。）
そのデータをJavaで受け取って、（間にゲートウェイを挟んで？）JavaからFlashにデータを渡しているようです。
で、その渡されたデータを元に、Papervisionで作ったモデリングデータを動かす、と。

いやー、、、わかりません。

シナチクさん

アイドルの画像が次から次へと湧いて出てくる、ようなものを作りたかったそうです。
が、AS3の罠にはまり、途中で挫折、、。
急遽、大添削大会＆さくーしゃ先生によるAS3講座の時間へと変貌しました。

けれど、これはこれでかなり勉強になりました。

僕的には、removeChildの使い方が勉強になりました。
AS2では、
this.removeMovieClip();
で、自身を消せていたにも関わらず、AS3だとできない。
というのも、removeChileは、読んで時のごとく、Childeを消す、なので、
自分じゃなく、自分の子供を消す命令なのです。
なので、
this.removeChile();
だと、自身ではなく、自身の子供を消すことになる。
では、自分を消すにはどうすればいいのか、とうと、いたって簡単で、
this.parent.removeChile();
と、一階層上に上がってから、消す、要するに、自分の親に自分を消してもらう、とすればいい、ようです。

少し逸れましたが、
と、まぁ、こんな感じで、少しぐだぐだと（これでこそてらこ、という声も）なっていましたが、勉強になりました。

ご本人さんの解説がアップされています。

j.iidaさん

アイドルといえば、栗山千明ということ(?)で、
そのさらさらの髪をさらさらする、という作品。
構想では、髪をさらさらと、すると、その髪の毛一本につき一通、自分の携帯に栗山千明からメールが届く！というものだったそうですが、
その髪の毛が最大、110本ほどもあり、それだけのメールを携帯に送ろうとするとエラーになる、というか、
止められてしまうようです。（迷惑メールとして引っかかるのかも）

そのさらさらの動きは奇麗でした。

さくーしゃさん

ここまでの他の方々が発表をしている間にその場で作ったものだったようです。

写真上でマウスをドラッグして囲まれた範囲のところを、ウニウニと動かす、というもの。
アイドルの水着写真のおっぱいの部分を囲み、かなり際どい映像となっていました。

技術的な解説はなかったのですが、DisplacementMapFilterを使ってやってるんですかね？（こんな感じ）

ツチヤさん

Flashとは全然関係ないのですが、おもしろいものを持ってきたってことで、飛び入りで発表。

人力ボーカロイドマシン、だそうです。

今流行のPerfume等が使っている表現だそう。
ご本人さんのブログの方で、ロボットボイス、として詳しく解説がされています。

ホワイトボードも使って、と、まるで大学の講義のような時間でしたが、面白かったです。

感想

さらっと、とか言っておきながら、結構長くなってしいましたが、
これでもかなり割愛かつ、適当なことしか書いていないと思います。
なにか間違い等あれば、ご指摘いただければありがたいです。

みなさん本当に色々なアプローチでそれぞれのアイドル持ってこられてて、ほんと、面白かったです。
やっぱりこういう風にテーマが決まってて、みんなで発表ってすると、色々楽しめて面白い。
初めての発表もなんとか出来て、満足しました。

みなさん、おつかれさまでしたー。

大阪てら子 15 「題名のない Flash 会」に行ってきました。

以下、メモ書き。

今回は、「題名のない Flash 会」と銘打って、発表内容に特にしばりを設けず、
てらこ特有のゆるゆるとした素敵な雰囲気で進められました。

idoさん

Progressionを使えないAS2ユーザーに送る
「SingletonとdispatchEventとDelegateで実現するページ遷移管理術」

自分的には、Delegateクラスのスコープの参照ネタがかなり嬉しかったです。
Tweenerを使っててonCompleteした時に関数を実行したりすると、スコープがどこにあるかわからんってなって、よく、trace(this)ってしてました、、。
それが、このDelegateクラスを使うと、その辺の制御がすっきり出来るってことでした。
まだ試してないので試してみます。
（Tweenerに限っていうと、onCompleteScopeってパラメータがあるけど、、DelegateだとTweener以外にも使えるし、、と）

あと、シングルトンや、デザインパターン、の説明等もされていました。
（詳しくはわかりません、、）

そして、それらを組み合わせて、実際に簡易なフルFlashのWebサイトを作り、それらのページ遷移の管理等を、簡単に行えるようにしていました。
要するに、シングルトンをコアにして、ディスパッチとデリゲートを組み合わせて、シーン管理を楽にする、ということ、らしいです。

詳しくは、ソーストとももにご本人様が解説をしてくださるみたいなので、その辺に期待、です。

追記：idoさんがまとめてアップしてくれました！ありがたいー。

さくーしゃさん

先日、ご本人さんのブログで発表された、ARToolKitをFlashに移植した、ってものの、実演をしていただきました。
あと、さくっと解説。

もともとはCで作られたものらしいけれど、それをJavaに移植したNyARToolKitをさらにAS3に移植したもの、みたい。
なんだかよくはわからないけれども、とにかくすごいです。
これがなんなのかは見て見るのが一番わかりやすい。百聞は一見にしかず。
このビデオを見て、一人で夜中に爆笑しましたww

あとは、Progressionのプチ解説。
コンポーネントベース。
さくーしゃさんはkatamariのサイトを作る際にはクラスベースでの開発をしていたので、コンポーネントベースで触るのは今回が始めてだったよう。
なので、このチュートリアルビデオを参考に、即興でライブコーディング。

僕も実際に少し手を動かしながら聞いていたのですが、触ってみると本当に簡単。
シーンを作って、ボタンを作って、ボタンにコンポーネントを割り当てて、、、としていくだけで、すぐに簡単なものならできてしまいます。
しかも勝手にディープリンクまでつく。
すごいです。

次回てらことかごはんとFlashとか

いつもは二次会の席で次回てらこの日付と内容が（だいたい）決定されるのですが、
今回は珍しく、勉強会の途中に時間をとって、少し話し合いをしようか、と、なりました。
（結局決定は二次会に持ち越されましたが、、、w）

その中でのアイデアとして、先日鎌倉で開催された、ごはんとFlashに触発されて、それの関西版をやろうじゃないか！と、盛り上がりました。
「ごっふぁんとFlash in KYOTO」（仮）
大阪よりも京都のほうがいいんじゃないか、誰々を呼んだら盛り上がるのでは、イベント内容は本家のをパクったらいいんじゃないか、会場はお寺にしようか、などなど、
とても有意義で面白そうなアイデアが出ていました。
是非、実現して欲しいです。

二次会など

勉強会終了後はいつものように二次会。
ここでも色々面白いお話を聞かせて頂きました。
j,iidaさんが構想中のアイデアがとても面白かったです。
夏までには実現したい、と言っておられたので楽しみにしています。

また、次回てらこの発表テーマがアイドルに仮決定した模様です。
次回こそは出来れば何かを作っていきたいものです。
（アイドルをテーマにw）

まとめ

今回はいつも以上にてらこ独特のゆったりとした雰囲気でしたが、とても楽しく有意義な時間が過ごせました。

次回も楽しみです。

※間違い等ありましたら知らせていただけますと助かります。

季節は春。
そんなわけで、FlexUG勉強会 お花見会に行ってきました。
今回はなんと外でプロジェクター使用のもと勉強会、と、なんともすごかったです。

写真は撮ったんですが、あまり上手く映ってなかったので、トップには載せませんでした。
（一応、こんな感じ。よくわからないと思いますが、、。）

今回の勉強会は,
FxUG@大阪、てら子、関西ライフハック研究会、名古屋WCAN、オブジェクト倶楽部、PFP関西、等々、と、
いくつかのコミュニティ合同のもと行われました。

開始前から各人自由気ままにビールなんかを飲みながら、でしたので、勉強会！といった雰囲気ではなく、まったーりとスタート。
色々なコミュニティが参加していることもあって、Flash以外の話とかも聞けて面白かったです。
それにしても公園のど真ん中でプログラミング画面をプロジェクタで投射している光景は、なかなか怪しくて素敵でしたw
てらこからは、シナチクさんと、なぎまぐさんが飛び入りで発表されていました。
あとは、最近「受託開発の極意」という本を出されたという、岡島幸男さん、
名古屋からの有志、ll_koba_llさん、FlexUGのhirossyさん、
ファシグラについてのお話や、3日で作るAir入門等々、盛りだくさんな内容でした。

いかんせん酒を飲みながらぐだぐだと、だったので、細かい内容はあまり覚えてない、、。（おいw）

それでも色々な世界が垣間みれて楽しかった。勉強になるし、刺激になりました。

最後に、間違い、クレーム等、ありましたら、ご連絡いただけると幸いです。

関連リンク：
minomix blog – 色々コミュのお花見勉強会に行ってきた
なぎまぐのブログ – お花見にいってきました！
eXtreme Gadget – 野外で勉強会を楽しむ方法
ちゃぶ台メモ – 桜の咲いてないお花見勉強会へ行って来ました

大阪てら子 13 「忘れたい過去を燃やし尽くす会」

に、行ってきました。
てら子3回目。

忘れないうちにメモしておきます。

分からない人がわからない感じで書いてますので、悪しからず。

（いままでのてら子のまとめはこちらから）

今回は、「忘れたい過去を燃やし尽くす会」ということで、
火、がテーマ。
（結局だれも忘れたい過去は燃やしてなかった気が、、）

各人がそれぞれのアプローチで炎を作ってきていました。

archangさん

事の発端であるというarchangさんから。
過去の卒制が、燃やす事をテーマにしていたのに、全くといい程燃やせていなかったので、今回、再度挑戦。

基本はタイムラインベースでしたが、炎の部分のみASで書かかれていました。
どこかのサンプルサイトのを使った、ということでしたが、上手く燃えていました。

グローフィルターで作られているらしいです。
それをランダムな大きさ、位置でduplicateして、ゆらゆらさせているそうです。（これが炎の表現の基本形？）

理想はこれだそうです。

れんさん

テーマは消したくても消せない、Flashに対する情熱の炎、だそうです。

やっている内容的には、archangさんと同じ感じみたいですが、それを全てタイムラインでやっていました。レイヤーの数がすごい事になっていました。

作りとしては、赤の円を描く→その円を加算で重ねる→それをぼかしてゆらゆらさせる（この辺はよくわかりません。要検証）

さらにこれプラス、スクリプトでも炎をかいておられました。
そしてそれをwebCamの映像と連動させて、画面上にある炎をつかまえようとするけど逃げられる→消したくても消せない、という事をされていました。

卓袱台次郎さん

なんとIEやら、デスクトップのアイコンが燃える。

タネを明かせばIEに見えたのはIEではなく、mProjectorで作ったデスクトップアプリだそうで、単なる静止画を燃やしているだけ、だそうです。
アイコンも、燃えてるアニメーションと、燃えたあとの焦げた画像を上から重ねているだけで、実際は透過しているフルスクリーンのデスクトップアプリ上で燃えている感じ。
僕を含め、みなさん見事に騙されていました。

このmProjectorは、ちょっとしたデスクトップアプリを作るのにはすごく便利だそう。
AIRに押されてあまり認知はされなかったようですが。
炎のアニメーションはAfter Effectsを使ってられました。
実際に５分程で炎をライブコーディングさながらに作ってくれました。かなり手際が良かったです。
ここを参考にされたそうです。

03/25:追記 – ご本人のブログで詳しく紹介されています。
アプリのダウンロードも出来ます！

シナチクさん

タイムライン。
小さい炎から大きい炎になり、最後は煙になる、という流れを3パターン作り、それを、大きさ位置、透明度をランダムにして発生させ、炎の表現を作っていました。

単に白バックで燃やすだけでは味気ない、ということで、淀川河川敷の写真に炎をのせて、たき火のようにしていました。
さらにその炎は対岸に飛ばせたり、と、アイデアが面白かったです。

もう一つの作品でもトーマス（？）が煙をあげて走ったり、とかなり変わった内容ながら、今回の中で一番笑いを取っていたのではないでしょうか。

ご本人さんのブログに作品がアップされています。

アイデアリソースはこちらだそうです。
技術ばかりを追求するアプローチもいいが、こういうアイデアありきのものもいいのでは（違う？）、とおっしゃってました。

teraさん

東京から創始者が来てくれました！

今回はwiiとの連動で、ロウソクの炎（実際の炎）で、画面上の地図を照らす、という事をされていました。

基本的な仕組みは、こちら、だそうです。
要するに、wiiの赤外線通信してるコントローラーの赤外線を操って、パソコンのマウスを動かしてしまおう、という事（かな？）。

で、ロウソクの火からは赤外線が出てるので（知らなかった！）、それをマウス代わりに使える、という事みたい。

で、もう一つ、炎の表現もスクリプトで書かれていました。
このサイトのをFlashに移植したそうです。
（このサイトのはFlexベースだそうです。）

詳しくは後日teraさん自身がブログの方でビデオチュートリアルとしてまとめてくださる予定、だそうです。期待。

記念に赤外線LEDを頂きました。ゲイナーでも使えますよね？

3/30:追記 – ブログで詳しい解説がアップされました！

なぎまぐさん

スクリプトで。
webcamの映像を動体検知して、動いているところを燃やす、ということをされていました。
燃やしている部分は前回発表されていた、DisplacementMapFilterを使用。
色はColorTransformクラスで。
赤の色の部分にsinをかけることによって、赤みに変化をつけていたり、と、理系な感じでした。

DisplacementMapFilterのPerlin Noiseを使っているようです。

03/26：追記 – ご本人さんのブログにアップされました！

hoehoeさん

Nintendo DSとFlashの連携、という（僕は）聞いた事のない事をされていました。

DSのタッチパネルをごしごしとこすると、画面上に火が起こる！、、予定が、時間がなく、煙までになってしまったようです。
（炎を出すと落ちてしまった、と後でおっしゃってもいました。）

あと、DSには音声入力もついているので、マイクに息を吹きかけると煙が風に吹かれたり、
DSに加速度センサーをつけて、本体を振ると、風が起こせたりしてました。

内部的には、DSで自作ソフトを走らせ、Wi-Fi(Wikipedia)接続でPCに飛ばし、それをJAVAで作ったチャットサーバに読み込ませ、それをFlashで解析、という感じ（だと思います）。
もはやFlashの範疇を超えていると思われます。
が、ご本人は全く難しい事はしてない、とおっしゃってました。すごい。

ご本人さんの解説が詳しいです。

さくーしゃさん

ここの考え方を基本に（かなり昔からある考え方のようです）、スクリプトでガリガリとされていました。

ここで僕が説明するよりも、ご本人のブログを見た方が、確実でわかりやすいと思われます。

[Saq.]大阪てら子 13 でつくったやつ。

発表中、話題になっていた、「ペロリンノイズ」ですが、カタカナ表記だと、「パーリンノイズ」になるようです。
辞書にない英語
WikiPedia

けど、いいです、ペロリンw
２ペロリン（パーリンノイズを二枚重ねること）とか使っていきます。

今回のてら子のまとめ記事も書いてくれてます。
こっち見たほうが早いかも、、。

Idoさん

これを、Flashに移植、AIRアプリにする、、、予定だったそうですが、
AIRに移植する段階でつまずいたそうです。

FlashのコンポーネントがFlexで動かない？とかなんとか、だそうで、解決方法はもちろん、問題点すら理解していません、、。

まとめとか

今回は火を使ってなんか、というようにテーマがあったのですが、
本当に皆さんそれぞれのアプローチをされていて、Flashの幅の広さ、楽しさ、面白さといったところを再認識させられた勉強会でした。
自分もなにかしらでもいいから発表したらよかったかな、とちょっと後悔したり。

二次会以降も、貴重のお話の数々、楽しかったです。
teraさんがガンダムネタで急に元気になったのには笑いました。
ファンネルの動きをイーズアウトって言う人なんて初めてみたw

最後に、冒頭にも書いた通り、わからない人がわからないなりに書いていますので、
間違っているところ等が多々あると思われます。
そんな場合は指摘してもらえればうれしいです。
また、これはいっちゃいかんよ！とかいうようなのがあればそれも言って下さい。