2007.11.10 ActionScript 3.0で行かナイト！

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

最終更新日：2013.07.02

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

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

demo1:こんなに便利！Framework

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

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

AS2系
AS3系
超絶系

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

ウェブカメラが映像を捉える
Flashでウェブカメラの映像を取得し、ActionScriptで書かれた動体検知プログラムを元に、映像内に動くものがないかどうか判定する
動くものがあれば、警報モードに入り、GAINERを通してクマのおもちゃが太鼓を叩き出す！
↑で捉えた不審者の様子を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の映像と比べてしまい、見劣りしがち……

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 Desktop、Kuler（配色作成）、NHK時計、micon（アイコン抽出 ※注意:AIR Beta1用）、斉藤委員長（サイト更新チェッカー）、AIR iPhone 等々…
独自のウィンドウ描画も可能なデスクトップアプリが作れる

Adobe AIRについて

AIRとは？なぜAIR？ランタイムって何？

前はApolloって呼んでました。大人の事情で Adobe Integrated Runtime (AIR) と改名
AIRとは、Web標準のメディア・アプリケーション技術だけで Win/Mac対応のデスクトップアプリケーションを開発・配布するためのランタイム
なぜいまさらデスクトップ？

直接アクセスできる（ダブルクリックで起動）
ブラウザ制限を打破（ファイルへのアクセス、OSサービス、ドラッグ＆ドロップ等）
オフラインでも稼動する
それと…おっきなアイコンとかつけられてカッコイイから

AIRランタイムとAIRアプリのインストール

ランタイムとは、多様なアプリがその上で走る実行環境。１回だけ最初にインストールしないといけない
同様のランタイムである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のガワだけを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に相当するイベントはない。

mouseDownを監視するイベントリスナーを登録。
ボタン用インスタンスとステージの両方に対して、mouseUpを監視するイベントリスナーを登録。
ボタン用インスタンスの上でmouseUpが起きたら、（ステージのイベントリスナーに優先して）ボタン用インスタンスに登録されたイベントリスナーが反応。
ボタン用インスタンスの外でmouseUpが起きたら、ステージに登録されたイベントリスナーが反応。
リスナー関数を削除してリセット。次のmouseDownまで待機。

イベントリスナーから関数を削除するには、removeEventListener()メソッドを用いる。引数は、addEventListener()メソッドと変わらない。

二次会

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

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

F-site