AS3S.ORG

APMT/Bridgeに出演します

admin — Wed, 09 Sep 2009 16:34:28 +0000

今週日曜日9/13に六本木SUPER DELUXEで開催されるAPMTのイベントのひとつBridgeに出演します。

WILLCOMのプロジェクトのウェブサイトや、on the fly、another shadow まで、音楽に関してはいつも頼りにしている松井敬治さんとの初のコラボレーションライブです。

当初はプレゼンテーションの依頼だったのですが、松井さんとは前々から何かステージパフォーマンスに使える楽器を作りたいねという話をしていたこともあって、思い切ってライブの形をとることにしました。

コンセプトは、あくまで音楽が主役であること（しかけを見せるための音楽にならないように）。

そして、ちゃんと観客も見て楽しめること（やってる人にしかわからないということにならないように）。

ムービーは実験中の様子で、現在進行形のプロジェクトなので、どこまで進化させられるかわかりませんが、当日はVo+Guitarの松井さんの他に、 Guitar 永田太郎、 Cello 橋本　歩、percussion 神谷洵平という本格的なライブになると思います。

皆さん是非お越しください。

予約や詳細はこちらから！

Flex Builderでmxmlを使わずにAIRアプリをつくる

admin — Wed, 05 Aug 2009 15:54:25 +0000

Flex Builder 3を使ってAIRアプリを作成する場合、デフォルトではmxmlを使うことになりますが、以下の手順でActionScriptプロジェクトベースのAIRアプリを作成することができます。

「新規」→「Flexプロジェクト」
→アプリケーションの種類「デスクトップアプリケーション（Adobe AIRで…）」を選択して「次へ」
→出力フォルダはデフォルトのままで「次へ」
→メインアプリケーションファイルを「プロジェクト名.mxml」から「プロジェクト名.as」に変更して「終了」

これだけでは実行しても何も表示されないので、
メインのコンストラクタに、

stage.nativeWindow.activate();

の１行を追加。

これだけで（Flexコンポーネントを使わなければ）mxmlを書かずにActionScriptだけでAIRアプリを作成することができます。（AIRの機能がすべて問題なく動くかまでは確認していないので自己責任でお願いします。）

ちなみに、「Flexプロジェクト」でAIRではなく「Webアプリケーション（Flash Playerで…）」を選んだ場合には、.mxmlを.asに変えることはできません。（エラー表示になります。）

参考）AIR Application ActionScript Project with Flex Builder 3
このページの最後のコメントのように本当はADD_TO_STAGEイベントでactivate()する方が確実かもしれません。

Proxy型Tweenライブラリ ProxyTween

admin — Fri, 31 Jul 2009 09:11:19 +0000

対象オブジェクトのプロパティを直接変更する感覚でトゥイーンが実現できる
Proxy型Tweenライブラリ ProxyTween ver.0.1を公開しました。

大量のオブジェクトを動かしたり、複雑なトゥイーンには向きませんが、
ボタンのロールオーバー時のちょっとした演出などを簡単に実現できます。

今のところ、Tween関数としては、
・Tweener準拠の一般的なRobert Penner系
・org.as3s.Tween準拠の物理的なイージング
・ユーザー定義のカスタム関数
をサポートしています。

ダウンロード

Proxy型Tweenライブラリ ProxyTween ver.0.1

一番簡単な使い方

mct = new ProxyTween(mc);
mct.x = 200;

動かしたい対象のプロパティを設定する代わりに、Proxyのプロパティを設定するだけです。

Sample Code 1 (Click)

クリックイベントでProxyのx,yにマウス座標を設定しています。

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

import org.as3s.ProxyTween;

[SWF(width='700',height='300',backgroundColor='0xeeeeee',frameRate='60')]
public class ProxyTweenSample1 extends Sprite
{
private var sp:Sprite;
private var spt:ProxyTween;

public function ProxyTweenSample1()
{
//Target Object
sp = new Sprite();
sp.graphics.beginFill(0x333333);
sp.graphics.drawRect(-50,-50,100,100);
sp.graphics.endFill();
sp.x = 350;
sp.y = 150;
addChild(sp);

spt = new ProxyTween(sp, ProxyTween.ELASTIC);
//spt = new ProxyTween(sp, ProxyTween.EASE_IN_OUT_QUAD, 60);

spt.addEventListener(ProxyTween.COMPLETE, onTweenComplete);

stage.addEventListener(MouseEvent.CLICK, onClick);
}

private function onClick(event:MouseEvent):void {
spt.x = event.stageX;
spt.y = event.stageY;
}

private function onTweenComplete(event:Event):void {
trace("Complete!");
}

}
}

PLAIN TEXT

Sample Code 2 (RollOver/RollOut)

ロールオーバー／アウトイベントでProxyのalphaを変更しています。

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

import org.as3s.ProxyTween;

[SWF(width='700',height='300',backgroundColor='0xeeeeee',frameRate='60')]
public class ProxyTweenSample2 extends Sprite
{
private var sp:Sprite;
private var spt:ProxyTween;
private var elastic:ProxyTween;

public function ProxyTweenSample2()
{
//Target Object
sp = new Sprite();
sp.graphics.beginFill(0x333333);
sp.graphics.drawRect(-50,-50,100,100);
sp.graphics.endFill();
sp.x = 350;
sp.y = 150;
sp.alpha = 0.2;
addChild(sp);

spt = new ProxyTween(sp);

sp.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
sp.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
}

private function onMouseOver(event:MouseEvent):void {
spt.alpha = 1;
}

private function onMouseOut(event:MouseEvent):void {
spt.alpha = 0.2;
}

}
}

PLAIN TEXT

トークイベントのお知らせ

admin — Mon, 22 Jun 2009 14:07:48 +0000

以下のイベントで骨展についてお話させていただくことになりました。

■第33回Flash OOP勉強会

7月3日(金)　19:00-21:00
アドビ株式会社大崎オフィス（ゲートシティ大崎、イーストタワー 19階) 会議室
参加費無料

詳細／申込みはhttp://www.flashoop.jp/から。

■クリエイターズトーク3「バーチャルな骨」

7月4日(土)　14:00-16:00
出演：中村勇吾（THA）、五十嵐健夫、緒方壽人、中谷日出
21_21 DESIGN SIGHT B1 ロビー
参加費無料（但し、当日の入場券が必要です）

詳細／申込みはhttp://www.2121designsight.jp/bones/event_0704.htmlから。

ご参加をお待ちしております。

「骨」展@21_21 DESIGN SIGHTに参加しています

admin — Wed, 17 Jun 2009 06:39:40 +0000

5/29より六本木ミッドタウンの21_21 DESIGN SIGHTで開催中の「骨」展に参加しています。リーディング・エッジ・デザインとして展覧会の企画段階から関わっていた他、以前、山口情報芸術センター[YCAM]でも展示していたナビゲーションシステム「on the fly」の「骨」展バージョンを使った会場ナビゲーションも製作しました。

また、東京大学の五十嵐健夫先生の開発したアルゴリズムをベースにした新作「another shadow」も展示しています。

「another shadow」は、壁に映った自分の影が勝手に動き出す、という作品です。

音楽に合わせてある瞬間切り取られた影は、三角形の集まりに分割され、仮想の「骨格」が与えられます。その構造を五十嵐さんの開発したRigidというアルゴリズムを使ってリアルタイムに変形させています。

五十嵐さんは、お絵かき感覚で簡単に3DモデリングができるTeddyというソフトなどで世界的に知られるコンピュータサイエンス研究者で、Rigidというアルゴリズムも直感的なお絵かきアニメーションソフトのために開発された手法です。

http://www-ui.is.s.u-tokyo.ac.jp/~takeo/research/rigid/index-j.html
http://www-ui.is.s.u-tokyo.ac.jp/~takeo/papers/rigid.pdf （論文）

普通、このようなアニメーションを行うには、インバースキネマティクスと呼ばれるような、関節の回転やバネ運動などを利用した物理シミュレーションが使われますが、ロボットのような動きになってしまったり、動きがなかなか収束しなかったりします。

五十嵐先生のアルゴリズムは、このような物理シミュレーションを一切使わず、幾何学的な計算のみを使ったアルゴリズムで、実際の人間の構造とはまったく違うにも関わらず、とてもいきいきとした面白い動きを見せてくれます。

ちなみに、当初Flashでプロトタイプを作っていたのですが、このアルゴリズムでは形に構造を与える（影を切り取る）瞬間に、要素数が万単位の行列を解く必要があり、膨大な計算が必要なため、Flash(ActionScript)では処理が到底間に合わず（AS3ではキャプチャ時の行列計算に20秒近くかかりました）、Alchemyなどの新しい技術を試したり試行錯誤の結果、結局C++（OpenCV + Open GL）のみで開発しました。

音楽はon the flyに引き続き、松井敬治さんにお願いしました。
すべての音がサンプリングされた生音から出来ていて温かみのあるサウンドに仕上がりました。

技術的な話はともかく、子どもたちが楽しんでくれているのを見るのはうれしいですね。

「骨」展は、他にもTHA/中村勇吾さんの作品や、takramのロボット、からくり人形、明和電気の新作、などなど、動いたり、インタラクティブな展示がたくさんあるので、是非、写真や動画ではなく会場で実物を体験していただければと思います。

Flash CS4対応 EmEditor用 ActionScript3.0構文ファイル

admin — Mon, 01 Dec 2008 12:40:15 +0000

EmEditor用ActionScript3.0構文ファイルをアップデートし、Flash CS4に対応しました。
ダウンロードはこちら。

EmEditor用 ActionScript3.0構文ファイル　（Flash CS4対応）

ちなみに、Flash CS4体験版のシンタックスハイライト定義ファイルを見てみると、Flash Player 10 betaの途中で行われた、Dynamic Sound API関連（「Event.SAMPLE_DATA」→「SampleDataEvent.SAMPLE_DATA」など）の仕様変更が反映されていないようです。
今回作成したEmEditor用ActionScript3.0構文ファイルは、最終仕様に対応しています。

また、CS3バージョンの定義ファイルも引き続きダウンロード可能です。

Flash CS4日本語ヘルプ＆リファレンス

admin — Tue, 18 Nov 2008 05:33:51 +0000

Adobe® Flash® CS4 Professional
http://help.adobe.com/ja_JP/Flash/10.0_Welcome/

Adobe ActionScript 3.0 のプログラミング
http://help.adobe.com/ja_JP/ActionScript/3.0_ProgrammingAS3/

ActionScript 3.0 言語およびコンポーネントリファレンス
http://help.adobe.com/ja_JP/AS3LCR/Flash_10.0/

on the fly @ minimum interface

admin — Tue, 04 Nov 2008 13:53:19 +0000

山口情報芸術センターYCAMで11/1から開催中の「ミニマムインターフェース」展で
会場のナビゲーションデザインを担当しました。

「ミニマムインターフェース」展では、ナビゲーションデザインを、展示に対するメタ・インターフェースの意味で、作品と鑑賞者の新しい関係性を築く手がかりとして位置づけています。多種多様なメディアが混在・競合する現在、「紙」という原初的なメディアが持つ存在感や直感性を改めて見直し、最新の情報技術と組み合わせることによって、展覧会の新たなナビゲーションの可能性を試みています。

"on the fly"

本展フライヤーは、必要最低限の文字情報のみを掲載し、フライヤーそのものがナビゲーションツールとして、ミニマムなインターフェースとなる仕組みをもっています。16個の穴があいたフライヤーを、会場内の3ヶ所に設置されたナビゲーションテーブルに載せ、それぞれの穴をふさぐことによって、展覧会や作品の情報が表示される仕組みになっています。このシステムは「on the fly（＝「その場で」「動的に」「即興で」の意）」と名づけられ、高精度の形態検出技術が組み込まれることによって、フライヤーがテーブルのどの位置に置かれても作動し、インタラクションを楽しみながら展示データを表示することができます。

（展覧会ウェブサイトより）

インターフェースがテーマの展覧会なので、会場ナビゲーションのインターフェースも今までにないようなものにしたい、ということで依頼を受けました。
我々LEADING EDGE DESIGNとgood design companyの水野学さん、そしてYCAMチームで議論を進める中で最初に水野さんが穴のあいたフライヤーというアイデアを提案されて（実はフライヤーのグラフィックとしてもこの穴にはシカケがあるんです）、そこから穴をスイッチにしてフライヤー自体をナビゲーションに使おう、というアイデアが生まれました。

フライヤーには情報が表示されるだけでなく、作品の展示場所の方向を矢印で示し、さらにその先の展示作品脇にあるキャプションボードにスポットライトが当たったりします。また穴にはそれぞれ異なる音色が割り当てられているので、手をかざして楽器のようにも楽しめます。

バックエンドとしては、モーショントラッキング用の少し特殊なカメラを使い、画像認識部分のプログラムはVC++で開発していますが、フロントエンドはFlashをフルHDで表示しています。
認識精度とレスポンスの良さが肝なので、画像認識のアルゴリズムをいかに精度を落とさずに軽くつくるかと、FlashとVC++のやりとりの高速化で苦労しました。

山口で東京からは少し遠いのですが、他の展示作品も日本初公開のReacTableをはじめ充実した内容ですし、５周年ということで近くの湯田温泉という温泉街でもメディアアートが展示されたりと、面白い試みが行われますので、今ままで気になりながらも足を運んでいなかった方はこの機会にぜひどうぞ。

ミニマムインターフェース展
http://minimum.ycam.jp/
（このトップページもつくりました）

ナビゲーションデザイン：LEADING EDGE DESIGN
グラフィックデザイン：good design company
サウンドデザイン：Keiji Matsui

サウンドデザインを担当していただいた松井敬治さんのブログ（＆開発中ムービー）
http://idream.exblog.jp/9780364/

Flex Builder 3をFlash Player 10に対応させる

admin — Fri, 17 Oct 2008 02:41:57 +0000

【追記】
Flex Builder 3.0.2 日本語版が公開されました。
スタンドアローン版 | eclipseプラグイン版
Flex Builder 3.0.2をインストールするとデフォルトでFlex SDK 3.2が適用されますので、コンパイラの設定のみでFlash Player 10に対応させることができます。

Flash Player 10が正式に公開されました。
2008/10/17現在、最新バージョンは　10.0.12.36 です。

Flex Builder 3でFlash Player 10対応のSWFをビルドするには以下のように設定します。

1. デバッグ版Flash Playerのダウンロード

まずは、デバッグ版Flash Playerを以下のサイトからダウンロードします。
http://www.adobe.com/go/tn_14266
ブラウザでデバッグを行う場合は、プラグインやActiveXをインストールします。
スタンドアローンでデバッグを行う場合は、Playerを一度起動しておきます。

2. Flex SDKのダウンロード

【追記】Flex Builder 3.0.2では必要ありません。なお、手動でFlex SDK 3.2をダウンロードする場合は、
下記サイトからMileStoneビルド(3.2.0.3958)をダウンロードしてください。

次に、Adobe Open Source のサイトからFlex SDKをダウンロードします。
Flex SDKには、次期メジャーバージョンのFlex4(コードネーム：Gumbo)と、現行のFlex3がありそれぞれのダウンロードページが分かれています。

Gumbo
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4
Flex 3
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3

Flash Player 10に対応させるには、どちらのバージョンでも構いませんが、開発中のNightly Buildsのリストから最新版をダウンロードする必要があります。（Flex 3では、3.2系）

また、ダウンロードファイルは、MPLライセンスのOpen Source Flex SDKと、Adobe Flex SDKライセンスのAdobe Add-onsに分かれており、それらを統合したものがAdobe Flex SDKとなっています。
AIRの開発などを行うには Adobe Flex SDKが必要ですが、そうでなければOpen Source Flex SDKで構いません。

ダウンロードしたSDKを、Flex Builder 3のデフォルトSDKのあるフォルダなどに移動しておきます。
（WinならC:\Program Files\Adobe\Flex Builder 3 Plug-in\sdks\ ）

3. SDKの追加

【追記】Flex Builder 3.0.2では必要ありません。

Flex Builder 3を起動して、プロジェクトのプロパティから、「ActionScript コンパイラ」を開き、
「Flex SDKの設定」をクリックし、開いたウィンドウで「追加」ボタンで先ほどダウンロードしたSDKフォルダを指定します。
「ActionScript コンパイラ」の画面に戻ったら「Flex SDKのバージョン」で設定したSDKを指定します。

4. コンパイラの設定

続いて、同じく「ActionScript コンパイラ」の画面で、Flash Playerの対象バージョンを10に指定します。
スタンドアローンの場合は、「追加コンパイラ引数」に「-target-player=10.0.12」を追加します。
ブラウザの場合は、「HTMLラッパー」の「必要なFlash Player バージョン」を「10.0.12」とします。
10.0.0でもよいのですが、10.0.12でサウンド関係のイベント名などが変更になっているので10.0.12としておいた方がよいと思います。

5. ビルドパスの設定

【追記】Flex Builder 3.0.2では必要ありません。

「ActionScriptビルドパス」から「ライブラリパス」のタブを開きます。
デフォルトでは、Flash Player 9用のplayerglobal.swcが指定されていますので、これを削除します。
「SWCの追加」でFlash Player 10用のplayerglobal.swcを追加します。
（{SDK Path}\frameworks\libs\player\10\playerglobal.swc にあります。）
追加したplayerglobal.swcのリンクタイプを「外部」に変更します。

以上で、Flash Player 10に対応したSWFの開発をFlex Builder 3で行えるようになります。

参考：Targeting Flash Player 10 Beta (UPDATED for FB 3.0.2)

伊東豊雄×takram「風鈴」展

admin — Wed, 06 Aug 2008 04:44:11 +0000

Flashとは直接関係ないですが、おすすめの展覧会をご紹介します。

赤坂にあるホテルニューオータニのオカムラショールームで開催中の伊東豊雄×takramによる「風鈴」展です。

天井から吊り下げられた約300個の風鈴が、人の動きに応じて涼やかな音と光を放ちます。
蛍の群れの明滅の同期現象が、個々の蛍の相互作用によってもたらされるように、takramが作ったこの風鈴もセンサーネットワークによってそれぞれの風鈴の光と音のリズムが近接する他の風鈴と影響を及ぼし合うことで空間全体に様々なリズムやパターンを生み出します。

また、自然界のリズム現象がちょっとした外乱でカオス状態に陥るのと同じように、ネットワークに生じるノイズなどの影響で予期しない現象が発生したりと、設営では様々な苦労があったそうです。

土日とお盆はクローズで場所も少し行きづらいですが、是非ゆっくり体験してみてください。

ココカラハジマル : 伊東豊雄 × takram「風鈴」展

p.s.
ここに来る方には言うまでもないと思いますが、昨日から開催中の「NOW UPDATING… THA／中村勇吾のインタラクティブデザイン」もおすすめです。新作だけでなく、見慣れた作品も大型ディスプレイや小気味のよい演出で新鮮に感じられます。こちらも日曜・祝祭日休館なのでご注意を。