[Event][AS] Airアプリ「Twittenorion」

先日、東京てらこ 9に参加してきました。
Twitterで何かつくろうってテーマだったのAirアプリを作ってみました。

「Twittenorion」

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

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

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

Twittenorion – wonderfl build flash online

 
 

[EV] FlashOOP勉強会#33

イベントメモ
◆「on the fly」「another shadow」の技術的な話
緒方 壽人さん(リーディング・エッジ・デザイン)

「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テスター募集中

[EV]FlashOOP 第31回勉強会

「FlashとDIYで作る、自作マルチタッチディスプレイ」
浦野大輔さん、名村卓さん、切通伸人さん

パネル自体は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で、今回のタッチパネル用に用意したクラスは3つ
・TouchManagerクラス→基本となるクラス
・TouchEventクラス→カスタムイベントクラス
・Fingerクラス→カスタムイベントが持つもの?

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

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

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

[EV]spark project 勉強会#7

◆spark project 勉強会#7
2008/02/23

◆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より早い!)

[EV]F-site 2009/1/31  

f-siteでのメモ

◆trick7寺井さんのお話
日々の疑問や面白いと思ったことをFlash化
ex)
・コーヒーカップの動き
・コジマヨシーケンサ
・走行中の車から見える道路の白線
・3の倍数のアホ時計

技術課題を踏まえた習作を作る
(製作のモチベーションはそのアイデア)

GoogleAnalytics for Flashの活用例
ボタンのクリック率とかの調査が簡単に行える

[EV]AdobeMAX 2009/1/30 ◆A-6 [Flash]アイデアの実装:コントロールと最適化

覚え書きメモ

◆Adobe MAX 2日目
2009/1/30 14:20~15:20

◆A-6 [Flash]アイデアの実装:コントロールと最適化
Roxik 城戸雅行さん

▼ムービークリップの制御について
モノを動かす、ではなく視線を動かすという考え方。
PointとRender
直接、mc.xやmc.yを制御せずに頂点(Point)データを定義して代入(Rendering)

▼最適化について
・見えないところは計算しない
・ビットマップ化してコマアニメ
・補間を使う

[EV]AdobeMAX 2009/1/30 ◆C-5 Flash CS4 Professionalを使ったアクセシビリティ対応コンテンツの構築

ほとんど意味がわからなかったセッション(汗)
ノートに残ってたメモ。

◆Adobe MAX 2日目
2009/1/30 13:00~14:00

◆C-5 Flash CS4 Professionalを使ったアクセシビリティ対応コンテンツの構築
Matt Mayさん

▼NonTextContent
Accessibility Toolパネル
(ASで制御も可)
同時設定の場合の優先順位はASの方が上
discrptionは書かなくてもいいんじゃない。
updateも重要です。

▼Time-Based
字幕:FLVPlayBackCaptioning
自分でCueポイントを打つ
DFXPで字幕作るのがいいよ。
FLVPlayBackにデフォルトで搭載

▼Meaningful Sequence
FlashはHTMLと違って情報の記述の順番わかんないよね。
なのでTABインデックスを使うよ。
座標をあるアルゴリズムで解析?

▼ResizeText

▼Minimum Contrast
読みやすさにはコントラストが重要
1:5→BG:TEXT
ColorContrastAnalyser

[EV]AdobeMAX 2009/1/30 ◆L-4 失敗事例に学ぶFlexプロジェクトの第一歩

若干うろ覚えの覚え書きmemo

◆Adobe MAX 2日目
2009/1/30 11:40~12:40

◆L-4 失敗事例に学ぶFlexプロジェクトの第一歩
NECシステムテクノロジー株式会社 坂田泰平さん

Flexの特性
・UI上、全ての描画OBJ、コンポーネントはインスタンス化される
・コンポーネントによって重さが違う
・非同期
・データはポイント渡し

失敗プロジェクト(QCD)とは
1)コスト
色々できるからハードルがあがる
→仕様変更→費用アップ→遅延
→画面仕様が未定義(性能問題にも繋がる)
2)品質
Flexでなんとなくできちゃう(スクリプトも楽)
→ちゃんとわかってないとトラブルに対応できない
→遅延→初心者にありがち(性能問題にも)
3)納期
1)2)の原因がそのまま
既存のシステムの置き換えの場合の見積もりの甘さ
→性能問題にも繋がる

失敗事例
CASE1:デモでの執着が命取り
描画での性能問題(インスタンス化における)
→Flexの振る舞いの知識不足
データが多すぎて描画できないとか

CASE2:RPQは続くよ
画面の仕様変更がころころ変わる
→性能が悪くなる

CASE3:基本的な知識不足
描画における性能問題
→納期遅延

CASE4:見た目はOKなのに
重いクラスを使用しており描画が遅い、レスポンス悪い
→性能問題

まず何をしたいのか、何をどう見せたいのかを明確にする。

チェック項目
用件定義
・実現性の検証:モック等
・標準化作業:コーディング規約の設定
・設計:性能に問題はないか。
製造
・mxml/ASメモリリーク(参照の強弱)
・ツール、デバッガを使った検証
評価
・評価ツールの適用
・トラブルシューティング

まとめ
Flexの経験が浅いときは上級者に仰ぎましょう。

[EV]AdobeMAX 2009/1/29 ◆スペシャルイベント Technology Sneak Peek

若干うろ覚えの覚え書き

◆Adobe MAX 1日目
2009/1/29 18:40~20:40

◆スペシャルイベント Technology Sneak Peek

7つのプロトタイム的なもの

★1.サーバーサイドで動くAS
TOMCAT使うらしい
ASにSQL書いて実行みたいな
(具体的に何してるか良くわからなかった・・・)

★2.FLVのMETAデータを超便利につかう
・カラースキーマ
・アクティビティレベル、ライトニングレベル
・顔認識
・音声をTEXT化し、出来た単語を使ってインタラクティブなこと
(Pr CS4の機能みたいな感じ)
→上記をリアルタイムで色々判定できる

★3.FLASHでP2P
つながるみたい

★4.AIRでいろいろDrag&Drop
LiveCompornentのDrag&Drop
ブラウザのDrag&Drop
SwfのDrag&Drop
FlexコンポーネントのDrag&Drop
→何も設定しなくてもそれぞれ同期してるみたいな

★5.LiveCylce+CreativeSuites
動画をLiveCycleにアップすると他のPCからその動画にアクセスできてコメントとか入れれる。
Prで開いてもコメントデータが残ってる

★6.DWでのAJAX簡単利用
簡単にAJAX
FrameWorkごとに使い方が違うから覚えるの大変
→OpenAJAXAllianceでajaxの内容をxmlにする感じ?
widgetで設定決めて簡単にhtmlに設置できちゃうみたい

★7.たくさんの写真を使ったモーフィング的なこと
10000枚用意して、その写真の任意の2毎を奥行きだったり横方向だったりスムーズに繋ぐ
(上手く説明できない)

[EV]AdobeMAX 2009/1/29 ◆E-4 CATMAN作者が語るFLASHアニメ最新情報

若干うろ覚えの覚え書き

◆Adobe MAX 1日目
2009/1/29 17:10~18:10

◆E-4 CATMAN作者が語るFLASHアニメ最新情報
青池 良輔さん

FLASHでのアニメ製作の利点
・プレビューが早い
・AEとかと連携できる
・ファイル共有しやすい(シンボルだけ送るとか)
・多媒体への展開がしやすい

FLASHでのアニメするには
→トゥイーン、コマアニメ、スクリプト

このへんで奥さんから電話
声が冷たかったらしい。

シンボルは断然グラフィックシンボルがよい。
→プレビューしなくても動きが確認できるから

コツ的なもの
絵コンテをFLASHに反映させた時点でそれなりに骨組みは作りこんでおく。
→時間的なタイミングとか
絵コンテみながら動かすところの方法を決める
→コマアニメorトゥイーンとか
Fl→AEは連番PNGの方が間違いが起きない
→movとか怪しい

★CS4での製作事例
▼「THE FLEA」 MTV ITALY用
ワークフロー
1.イラレでキャラ作成
2.Flにインポート
3.IK(ボーン)を設定
4.オブジェクトベースにアニメつける

▼実写ドラマとアニメをまざったもの
実写+Flは
実写をAEでなんとなくエフェクトつけて、XFLで書き出し
XFLをFlで読み込んでなんとなくエフェクトを下敷きにFl編集

まとめ
・CS4はモーション系のアニメーター、デザイナーには可能性の拡大
・アニメーションもオブジェクト指向
・可能性+効率で創意工夫を頑張る!と。

おまけ
CATMANのDVDに実際のアニメ(1分くらい)のFlaファイルと解説ついてるよ。