2007.11.10 ActionScript 3.0で行かナイト! [Edit]

demo1「こんなに便利!Framework」 講師:むらけん
demo2「Adobe AIRをはじめよう!」 講師:太田禎一@Adobe社
demo3「イベントを制する者、ActionScript 3.0を制す」 講師:野中文雄

司会:A.e.Suck 特別コメンテーター:森巧尚

demo1:こんなに便利!Framework

講師:むらけん
デモを交えながら、制作に役立つFrameworkやライブラリをご紹介いただきました。
当日披露されたFuseKit&CASA Frameworkのデモ(FLA付き)はこちら

今日紹介するFramework&ライブラリ

  1. AS2系
  2. AS3系
  3. 超絶系

AS2系

FuseKit(http://www.mosessupposes.com/Fuse/
  • Tween補助&足回り効率化ライブラリ
  • 豊富なMovieClipの拡張プロパティ
  • 簡単なTweenを補助する拡張function群&ZigoEngine
  • 動作をストックし、順に(同時に)実行できるFuse
CASA Framework(http://casaframework.org/
  • 足回り効率化ライブラリ
  • Load系、String、Numberなどの補助、xmlToObject()、StringUtil.replace()、new LoadGroup()など
GAINER(http://gainer.cc/
  • Flashでリアルデバイスライブラリ
  • input→Flash→output(矢印の部分がGAINER。input+Flash、Flash+outputという使い方も可能)
  • 「FlashでTVのチャンネルを変えたい!」「Flashでご飯を作りたい!」など夢が広がる
  • AS3ライブラリもあるよ
input
各種センサー等の入力デバイス
Flash
inputの値を取得表示
output
リアルデバイス
  • 会場では、実際にGAINERとAIRを使ったデモ(Flash+outputの例)が披露されました。仕組みは以下の通りです。
  • DEMOを再現した動画http://www.youtube.com/watch?v=6ChMiDzfNPM
  1. ウェブカメラが映像を捉える
  2. Flashでウェブカメラの映像を取得し、ActionScriptで書かれた動体検知プログラムを元に、映像内に動くものがないかどうか判定する
  3. 動くものがあれば、警報モードに入り、GAINERを通してクマのおもちゃが太鼓を叩き出す!
  4. ↑で捉えた不審者の様子をFLVファイルとしてHDDに保存する

AS3系

Tweener(http://code.google.com/p/tweener/
  • AS3のTween補助はこれ
  • FuseKitよりシンプルで機能は少ない
Papervision3D(http://papervision3d.org/
  • AS3の処理速度を生かした3Dライブラリ
  • 初めての人にも理解しやすい3D
  • MLに入ると、よくおもしろいデモが流れてくるのでオススメ!(英語がわからなくてもデモなので見れば分かる)
  • 直感的にBitmapを扱う手段としても使える
  • 3Dを扱う分、普段見慣れているPS3、Xbox 360の映像と比べてしまい、見劣りしがち……
APE(http://www.cove.org/ape/
  • 仮想物理エンジン(でも更新停滞中)
Progression Framework 2(http://progression.libspark.org/trac/
  • 状態遷移機能、コマンド機能、ブラウザ連携機能をそなえた和製Framework
  • AS2版も開発中

超絶系

swfassist(http://swfassist.libspark.org/trac/
  • これはすごい(SWFをByteArrayで読み込み解析)
  • SWFのベクターデータを取得して、アウトラインだけ表示するデモ
popforge(http://www.andre-michelle.com/
  • これはすごい(SWFでリアルタイムに音を生成&再生&エフェクト!)

まとめ

  • Load系クラスはこれからバンバン出てくると思う
  • Util系クラスはとりあえず使い
  • 便利なクラスがいっぱい出てくるが、あくまで保証はないので頼りすぎは注意(バージョンによって挙動が違う点も要注意)
  • 時間があるときに、ソースを見て勉強した方がいい
  • 興味を持ったらまずは弄ってみましょう

demo2:Adobe AIRをはじめよう!

講師:太田禎一氏
アドビシステムズ株式会社 テクニカルエバンジェリスト
AIRアプリの概要からはじまり、アドビ各製品によるAIRアプリの作成方法まで、わかりやすくお話しして頂きました。
資料PDFはこちら

AIRアプリいくつかご紹介

  • AIRに何を期待する?(会場の参加者に質問)
    • 「AS3でできるDirector」
    • 「珍しいアプリが作れる」
  • 実際のAIRアプリを色々とご紹介(リンク先で実際にAIRアプリをDLできます)
    EBay DesktopKuler(配色作成)、NHK時計micon(アイコン抽出 ※注意:AIR Beta1用)、斉藤委員長(サイト更新チェッカー)、AIR iPhone 等々…
  • 独自のウィンドウ描画も可能なデスクトップアプリが作れる

Adobe AIRについて

AIRとは?なぜAIR?ランタイムって何?
  • 前はApolloって呼んでました。大人の事情で Adobe Integrated Runtime (AIR) と改名
  • AIRとは、Web標準のメディア・アプリケーション技術だけで Win/Mac対応のデスクトップ アプリケーションを開発・配布するためのランタイム
  • なぜいまさらデスクトップ?
    • 直接アクセスできる(ダブルクリックで起動)
    • ブラウザ制限を打破(ファイルへのアクセス、OSサービス、ドラッグ&ドロップ等)
    • オフラインでも稼動する
    • それと…おっきなアイコンとかつけられてカッコイイから
AIRランタイムとAIRアプリのインストール
  • ランタイムとは、多様なアプリがその上で走る実行環境。1回だけ最初にインストールしないといけない
  • 同様のランタイムであるJavaや.NETフレームワークと比較して、AIRはインストールがスムーズなのが特長
    • ブラウザからワンクリックでインストールを開始
    • AIRアプリをインストールするとき、AIRが未インストールの場合はランタイムも同時にインストールしてくれる
AIRアーキテクチャ・AIRアプリ解剖
  • 既存のWeb技術を活かした開発
    • Flashベース、HTMLベースのどちらかを選択可能
  • クロスプラットフォーム=同じインストーラパッケージでWin/Mac両対応
  • 既存のWeb制作で用いる各種ファイルと、APP.XML(AIR用記述ファイル)
  • これらがZIP圧縮でパッケージ化される
  • インストール時にパッケージが自動展開され、ランタイム上で実行される

AIRアプリの作り方:基礎編

  • CS3と無料のエクステンションで作成可能。Flex Builder、Dreamweaver、FlashのどれでもOK
    • 無料のコマンドラインツール(SDK)とAPP.XMLを自分で用意すればコンパイルできるけどちょっと面倒
30秒で、FlashでAIRアプリを作る
  • Flashのプレビューと同じようにAIRアプリもプレビュー可能
  • パブリッシュ設定をしておくだけ。すぐ作れる
  • Windowスタイルで"customchrome(transparent)"を選ぶと自由な形状のウィンドウが作れる
  • ビデオを表示するアプリとかもカンタンに作れる
今回ご用意したサンプル"Hello World"

※以下の内容に関する実際のコードは冒頭の資料PDFに載っています

Flex Builder3 Beta2の場合
  • ベータ期間中は無料で使えます
  • すぐAIRプロジェクトが生成できる
    • MXML(コンパイルされてswfになる)
    • APP.XMLが自動生成される
  • 少しスクリプト書き換えるだけで色々出来る(詳細は資料PDFを参照)
    • systemChrome を none、transparent を true に設定、onMouseDownに"window.nativewindow.startMove()"などファンクションを割り当てる
Dreamweaver CS3+AIR Extensionの場合
  • サイト全体がAIRアプリケーションになるイメージ
  • ID割り振ってCSS設定。あとはFlexと似たようなもの(詳細は資料PDFを参照)
  • HTML上ではIMEからの日本語入力は現状NG(まだBeta版なので)。Flash/Flex上では問題なし
Flash Professional CS3+AIR Updateの場合
  • MCにaddEventListenerする。あとは他の例と同じように設定(詳細は資料PDFを参照)
  • パブリッシュ設定を「AIR1.0」にすると、スクリプトはAS3で書かないといけない
    • AS1/AS2を含むムービーは、AS3にUILoaderで読み込んで利用することが可能
    • 既存のものを手軽にAIRにできる
    • つまりAIRのガワだけをAS3で作って、中身はAS1/AS2のムービーを配置すると
    • ただしAS1/AS2を読み込んだ部分とAS3側とのコミュニケーションは取れない
AIRインストーラパッケージの作成
  • 認証ファイルによるデジタル書名が必須
  • 自分で認証ファイルを作成することもできる(当然第三者機関による証明書ほど信頼されない)
  • アイコン、ちゃんと作りましょう
    • 128, 48, 32, 16px のPNG32(透過)を用意
    • FWでシンボル作って、サイズかえて配置して、スライス書き出し、ですぐ4種類作れます

質問

FlashCS3でのAIR用の設定をファイル化して使いまわすことは可能か
Use custom app file 項目で外部のファイルを読み込めるので、Flexで設定ファイル作って流用とかは可能
Adobeから将来AIRでアプリをリリースすることは?
PhotoshopやFlashのようなものをAIRで作ることはないが、なんらかのサービス向けのAIRアプリをリリースすることはある

demo3:イベントを制する者、ActionScript 3.0を制す

講師:野中文雄氏
ActionScript 3.0になり、イベントの扱い方や考え方が以前と大きく変わりました。今回はマウスイベントを例にとり、AS3におけるイベントの考え方を、AS1/AS2との比較を交えてご紹介いただきました。

本セミナーをまとめた野中氏の詳しいレジュメは、下記でご覧いただけます。サンプルファイルもダウンロードできます。
http://www.fumiononaka.com/Sample/F-site/FF071110.html

マウスイベントを受け取る

  • AS1では、MCにスクリプトを記述、on()でマウスイベントを受取る。
  • AS3では、フレームにスクリプトを記述する。addEventListener()を使ってMCインスタンスに登録し、リスナー関数を定義する。
  • MCインスタンスをボタンとしてふるまわせるには、buttonModeプロパティをtrueに設定する必要がある。

ダブルクリックを受け取る

  • AS3のマウスイベントには、ダブルクリックが加わった(doubleClick(MouseEvent.DOUBLE_CLICK))。ただし、インスタンスのdoubleClickEnabledをtrueにする必要がある。

イベントは誰に対して発生するか

  • AS3では、ひとつひとつのインスタンスがイベントを受取る。イベントを処理するスクリプトが書かれているかどうかは問わない。対して、AS1/AS2では、イベントハンドラが設定されていないMCインスタンスは、マウスイベントを受取らない。
    したがって、別のMCインスタンスを前面に置くと、背後のインスタンスにはイベントが渡らなくなる。
  • 前面のMCインスタンスにマウスイベントを受取らせないようにするためには、そのインスタンスのmouseEnabledをfalseに設定する。
  • マウスポインタを動かしたときのmouseMove(MouseEvent.MOUSE_MOVE)イベントをステージ全体について受取りたい場合、イベントリスナーはstageプロパティをターゲットにして登録する。
  • AS1/AS2のイベントには、発生したインスタンスに対するものと、インスタンスを問わないものがある。例えば、onClipEvent(mouseMove)はイベントの発生したインスタンスを問わない。
  • イベントオブジェクトのtargetプロパティにより、イベントが発生したインスタンスを取得できる。イベントの発生したインスタンスとイベントを処理する(リスナー関数を登録した)インスタンスとは、必ずしも一致しない。

イベントの発生と処理

  • AS3のイベントは、発生したインスタンス自身に加えて、表示階層(ディスプレイリスト)の親が受取って処理できる。特にマウスイベントでは、誰に発生したイベントを、誰が処理するのか考えなければならない。
  • mouseOver(MouseEvent.MOUSE_OVER)とrollOver(MouseEvent.ROLL_OVER)のイベントでは、それが発生したインスタンスの捉え方が異なる。イベントを処理しているインスタンスは、イベントオブジェクトのcurrentTargetプロパティで調べることができる。
  • MCシンボル内のインスタンスについて、mouseEnabledプロパティをfalseに設定すれば、マウスイベントは独立して発生しなくなる(イベントリスナーを登録したインスタンスについて発生したイベントとみなされる)。
  • MCシンボル内のすべてのインスタンスについて独立したマウスイベントを発生させないようにするには、mouseChildrenをfalseに設定する。

親子によるイベントの連携処理

  • mouseUp(MouseEvent.MOUSE_UP)イベントは、clickとは異なり、マウスボタンを放す操作だけに注目する。したがって、インスタンスの外でマウスボタンを押した場合も、インスタンス上で放せばイベントが呼出される。
  • 他方、clickイベントは、リスナーを登録したインスタンス内であっても、マウスボタンを押した子のインスタンスと放したインスタンスとが異なれば発生しない。
  • mouseUpイベントは、インスタンス上でマウスボタンを押すmouseDown(MouseEvent.MOUSE_DOWN)と組合わせて使われる場合が多い。ひとつのインスタンスに対するイベントを子と親で連携して扱うことができる。
  • AS1/AS2のreleaseOutsideイベントを、AS3で実装してみる。AS3には、AS1/AS2のreleaseOutsideに相当するイベントはない。
  1. mouseDownを監視するイベントリスナーを登録。
  2. ボタン用インスタンスとステージの両方に対して、mouseUpを監視するイベントリスナーを登録。
  3. ボタン用インスタンスの上でmouseUpが起きたら、(ステージのイベントリスナーに優先して)ボタン用インスタンスに登録されたイベントリスナーが反応。
  4. ボタン用インスタンスの外でmouseUpが起きたら、ステージに登録されたイベントリスナーが反応。
  5. リスナー関数を削除してリセット。次のmouseDownまで待機。
  • イベントリスナーから関数を削除するには、removeEventListener()メソッドを用いる。引数は、addEventListener()メソッドと変わらない。

二次会

今回のセミナーも無事終了いたしました。講師、並びにご来場の皆さん、本当にありがとうございました。 二次会は久々の石狩川。前回よりこぢんまりとした宴会でしたが、いつも通り盛り上がりました。


レポート作成
沖良矢、門田有、五十嵐武志
写真
桜井和貴、小野田智

コメント

この記事にコメントを書く

記事に対するテクニカルな質問はご遠慮ください(利用規約)。

トラックバック

この記事へのトラックバック

  1. F-site のセミナーに行ってきました(4)[了](2008年01月24日 21:25)

    F-site セミナー「そろそろ…、ActionScript 3.0で行かナイト!」の第3部「イベントを制する者、ActionScript 3.0 を制す」についての最終回は、自分なりのまとめです。...
    from 閃光的網站・弛緩複合体 -Review Division-

その他の記事