Webを超えたFlash活用事例「Ubiq'window+ActionScript 3.0」

「Ubiq'window+ActionScript 3.0」

2008年10月に東京にてデジタルアートフェスティバル東京2008（以下、DAF2008）が開催されました。このイベントは、国内外の一流アーティストや新進クリエイターを紹介することを目的とした日本発デジタルアートの祭典です。私たち株式会社REACTORも参加し、「Ubiq'window+ActionScript 3.0」という作品を制作しました。これは、イベントに出展・参加している企業やクリエイターのプロフィールを紹介するインタラクティブコンテンツです。従来までは、参加者を紹介するツールといえばリーフレットやパンフレットのみでしたが、DAF2008では初の試みとしてインタラクティブコンテンツも提供することにチャレンジしたのです。まずは、「Ubiq'window+ActionScript 3.0」が一体どのようなものなのか、その操作模様の映像をご覧下さい。

プロデュース・制作統括：株式会社REACTOR
ディレクション：有限会社3KG
Flashコンテンツ制作：TOOL 小山健次郎 ・高橋定大

ご覧のように、「Ubiq'window+ActionScript 3.0」ではFlashコンテンツをマウス操作の代わりに手で操作することができます。近未来的な表現にこだわり、プロジェクターの映像を映せる特殊なアクリル板（完全透明）を表示画面として使用しています。そのアクリル板上にActionScript 3.0で開発した3Dコンテンツを表示させ、立体的に見えるようにしています。

コンテンツの操作方法は、ユーザビリティを考慮して、タッチディスプレイ的な仕様にしました。3D空間をゆっくりと移動する写真をタッチすると、写真が大きくなり、プロフィールが現れます。この画面内で、手を「左→右」「右→左」へと動かすと、プロフィールが水平移動して次のプロフィールが現れます。そして、再度画面をタッチすると3D空間へと戻ります。また、3D空間での写真の並び方は複数パターン用意し、プロフィール紹介から戻る際、ランダムに切り替わるようにしています。さらに、ライブ・映像・インタラクティブといったカテゴリー別に一覧表示できるようにもなっています。

Ubiq'window（ユビックウインドウ）とは

この作品名にもある「Ubiq’window（ユビックウインドウ）」とは、仏国立科学研究所の技術から生まれたインタラクティブ・ソリューションです。ショウウインドウなどのガラス面、アクリル板、空間、プロジェクター、プラズマ・液晶テレビなど、さまざまなものをタッチディスプレイ＆インタラクティブソリューションに変える画期的な装置です。Ubiq’windowの装置をWindowsマシンにUSBケーブルで接続し、各種表示媒体と繋げて使用します。

「Ubiq'window+ActionScript 3.0」では、コンテンツをFlashで制作しました。Flashはオーサリングの自由度が高く、ビジュアル的に優れたインタラクティブコンテンツを制作することが可能です。Ubiq’windowの操作特性をより引き出すことができるコンテンツの開発ツールとして、Flashはまさに最適なツールだと言えます。

Ubiq'windowとActionScriptの連携

読者の中には、「Ubiq'windowを使ってみたい」と感じた方も多いでしょう。参考までに、今回私たちが「Ubiq'window+ActionScript 3.0」制作する上で配慮したことを以下に紹介しておきます。

1）PCとの操作性の違い

Ubiq'windowでは、画面をタッチしながら操作します。ハードウェア的には、このタッチ操作はマウス操作として検知するので、Flashでもマウスイベントなどで処理することになります。しかし、PCでのマウス操作とは異なるUbiq'windowならではのちょっとした「クセ」があります。たとえば、ロールオーバー／ロールアウトのイベントとマウスダウンの共存が難しい点です。感度の調整やタッチの割り当てなど、Ubiq'window側での設定にもよりますが、基本的に「画面に指が触れるとマウスダウン」という設定にした場合、ロールオーバー／ロールアウトは指を触れた時／放した時となり、瞬間的なイベントになってしまいます。ロールオーバーやロールアウトを優先させることもできますが、その場合は別途マウスダウンとなる操作をUbiq'window側で設定する必要があります。

今回のコンテンツでは、「3D空間上の写真に触れると、ポンっと大きくなって音が鳴り、画面をなぞれば次々に写真が大きくなっていく」という仕様を実装したかったので、ロールオーバー／ロールアウトはどうしても使う必要がありました。また、「写真を選択するとプロフィール画面へと切り替わる」ということも仕様上必要な機能でした。そこで、「写真に触れた時→ROLL_OVER」「写真を選択した時→CLICK」というようにマウスイベントを割り振って対処しました。CLICKを使った理由は、MOUSE_DOWNだと触れたタイミングで即座に反応してしまい、ROLL_OVERを認識できないからです。ただし、CLICKは「画面から指を離した時」に実行されるものなので、このままではROLL_OUTのマウスイベントが使えません。

とはいえ、ロールオーバー時に大きくなった写真をロールアウト時に元のサイズに戻すといった「ユーザーが画面に触りたくなる演出」はどうしても必要でした。そこで、ラジオボタンの仕様（1つを選択すると、他は非選択状態になる）を参考に、「写真のいずれかに指が触れて大きくなれば、他のものは元の大きさに戻る」というやり方で似たような効果を演出しました。

このようにUbiq’windowならではの「クセ」を見越してFlashの仕様設計を行い、ユーザー操作にストレスが生じないよう注意する必要があります。

その他に操作面で気をつけることとして、タッチできるオブジェクトには限界があるということです。これはUbiq’windowに限らず他のインターフェイスにも言えることですが、タッチするオブジェクトがあまりに小さいと、それらを高速で動かした場合にとらえることが難しくなりタッチできません。ボタンのようにタッチされることを目的としたオブジェクトは経験上、最低でも実機上のサイズで5×5cmぐらいはあった方がよさそうです。

2）「直接触れて動かす」ということ

実際にUbiq'windowに触ってみると分かるのですが、手で触れて操作するためか、PCで操作するよりも「自分が触れて動かしている」感が強く出ます。小さいオブジェクトを動かす時は軽く、大きいオブジェクトを動かす時は重たく感じます。そのため、見た目にも操作的にも気持ちよい動きを目指すとUbiq’windowの特性をより生かせると思います。

先程も説明しましたが、「Ubiq'window+ActionScript 3.0」では、3D空間の写真をチョンっと押すと勢いよく写真が奥へ飛んで行きプロフィール画面へと切り替わります。またプロフィール画面では左右にドラッグするように画面をなぞると、放り投げられたように作品写真と説明文が飛んでいき、新たに次のものが現れるといった動きをします。これらの動きを作る際にActionScript 3.0の外部ライブラリである「Tweener」を大いに利用しています。Tweenerは「どこからどこまでの範囲を何秒で移動」といった動きを簡単な記述で行うことができる、非常に便利なライブラリです。また、全体の3D的デザインに「Paprevision3D 2.0」ライブラリを使用しています。Paprevision3Dを使うのは今回が初めての案件でしたが、サンプルなども充実しているので特に大きな問題もなく使用することができました。

MEMO：余談ですが、数年前にも「Director」のShockwave3DやJava3D、VRMLといったWeb上での3D表現はありました。しかし当時のマシンスペックが低かったことや魅力的な用途を見いだせなかったこともありそれ程振るいませんでした。しかし、ここに来てやっと時代が追いついた感があります。今後のFlashによる3D表現の展開が非常に楽しみです。

3）長時間の利用を念頭にする

「Ubiq'window+ActionScript 3.0」はDAFの会場に常駐設置されるインターフェイスとして制作を行いました。Webコンテンツとの大きな違いの一つは「長時間運用される」ということです。開場時間である11時から21時の間、一度も再起動させることなくコンテンツを動かし続ける必要があります。ここで念頭に置いたことは次の2つです。

• 長時間動かし続けてもフリーズしたり、挙動がおかしくならないようにする
• 何も操作をしていない時も飽きないように変化をつける

1つ目は運用上特に注意すべき部分です。途中で動きがもたついたり、フリーズしてマシンを再起動となっては目も当てられません。また、コンテンツの内容上、作品などの画像枚数が大小合わせて200枚近くあり、Papervision3Dのコンテンツはマシンに負荷のかかるため、さらに注意が必要です。

そこでプログラム全体とフローを注意深く見直して一覧化し、作成した変数やイベントは役目を終えたら確実に削除、「alpha=0」のものは非表示化するなどして、動作の安定化と軽量化を徹底しました。その結果、実機でFPS60前後、使用メモリを40MB以下にまで抑えることができ、10時間の運用でも十分耐えられるものとなりました。また、万が一に備えて、Flashプロジェクタを閉じなくても済むよう、違和感なく全てのオブジェクトをクリアして再設定を行うリセット機能も付けました（結局使うことはありませんでしたが）。

2つ目ですが、常時設置していると、「操作した後、トップ画面の3D空間に戻さずにそのまま放置される」「しばらくの間、誰も触らない」ということもあります。当日は説明スタッフが常駐していましたので手動で元に戻すこともできましたが、「一定時間操作がなければ3D空間に戻る」「3D空間の写真配置を自動的に変更する」といった機能も付けました。

これら2点は、同一ユーザーの閲覧時間が比較的短く、ユーザーごとにコンテンツのトップを表示させることができるWebコンテンツではさほど重要視されない部分かもしれません。しかし、Ubiq'windowに限らず、常駐設置のコンテンツを制作するときには念頭に入れておく必要があるでしょう。

4）キオスク端末としてのデザイン

WebサイトのようなPC上でのコンテンツでは、一般的に左上にメニューなどの注目してほしいものを配置するのがセオリーです。しかし、実際に触れるコンテンツととなると、その性質上、レイアウトやデザインは少し異なってきます。たとえば、D「Ubiq'window+ActionScript 3.0」では検索して調べる際に使用するカテゴリメニューを画面下に配置して小さい子供でも選択できるようにしています。またプロフィール画面から3D空間に戻る場合は、画面上のどこをタッチしても戻れるようにしています。ただし、何でもかんでも下に配置すれば良いというわけではなく、逆に見づらくなる場合もあります。ユーザー対象を念頭におき、レイアウトにこだわらないインタフェイスデザインを心がけることが重要です。

このように、Ubiq’windowのようなキオスク端末を制作する場合は、PC上で動かすコンテンツとは異なる仕様であることに十分注意し、実機による入念なテストも行う必要があります。

Ubiq'window+Flashの可能性

Ubiq’windowは「触る」という行為の面白さを最小80ｃｍから最大2ｍの範囲で制作することができます。装置が提供するインタラクティブな特性上、Flashでコンテンツが制作されることが多いようです。「Ubiq'window+ActionScript 3.0」のようなプロフィール紹介のほかに、絵を書く、鍵盤を表示させ音楽を作る、プリントボタンを設定して印刷出力、インターネット回線を通じてデータを送受信するなど、インタラクティブツールとして制作するコンテンツにより可能性は無限大です。さらに双方向のコミュニケーションをさせることにより、面白さは格段にあがります。

たとえば、ショーウインドウにUbiq’windowとカメラを設置し、操作する人の顔を撮影して髪型を変える・めがねをかけるといった使い方をすると、操作する人との距離感がグッと縮まりコミュニケーションの質が上がります。現在、弊社ではそのようなツールの開発を進めています。完成後には、弊社サイトで紹介したいと思っています。

Ubiq'windowを使いたいという場合は、弊社もしくはLM3LABSにお問い合わせ下さい（なお、弊社では、Ubiq'windowセンサーだけの販売はしておりません。ハードとソフトの両方に専門的な知識が必要とされるので、コンテンツ制作を含めた形で販売をしております）。