株式会社ビープラウド主催の勉強会「Desinger×Engineer勉強会#2」でスピーカーを担当させていただいた。
今回テーマはFlashということだったので、Flashの歴史を振り返ることでバージョンごとの違いを明らかにし、Flashプログラミングの特長、懸念される問題点、現在どのような制作方法があるかなどについて述べてみた。
せっかくFlashの勉強会なので、参加者の方とFlashを使って面白いコミュニケーションが出来たらいいなと思い、trick7氏制作の「パパパコメント」を利用させていただいた。うまくいくか心配だったが、参加してくれたみなさんが面白がってコメントしてくれたので、ニコニコ動画のようなインタラクティブ感が演出できて本当に良かった。このプレゼンのために少しアプリに手を入れてくださったtrick7氏には非常に感謝している。
スライドの内容に関しては、自分の知識や記憶をベースに、AdobeのサイトやWikipediaを参照しながら組み立てたため、勘違いや間違いもあるかと思われる。以下に原稿を掲載するので、何かお気づきのことがあればご指摘いただけると嬉しい。
━━━━━━━━━━━━━━━
Flashいまむかし
━━━━━━━━━━━━━━━
● はじめに
Flashはラスター（ビットマップ）画像だけでなくベクター画像も扱うことができるため、少ないファイルサイズで美しい映像を表示できた。これが貧弱なインターネットインフラしか無かった時代に非常に高く評価され普及した。
また、年々スクリプト言語で制御できる分野が広がり、音だけでなく動画の再生やカメラ連動なども行えるようになったため、インタラクティブなWebサイトを作成するのに重宝されている。
このプレゼンテーションではFlashの歴史を振り返ることで、バージョンごとの違いやFlashプログラミングの特長、懸念される問題点、現在どのような制作方法があるかなどについて述べてみたい。
━━━━━━━━━━━━━━━
● バージョンアップの歴史
◎ 1985年 MacroMind VideoWorks（Director）
Flashの歴史を語る上で外すことのできない、マルチメディアコンテンツ制作ソフトウェア「Director」は、もともとMac OS専用のアプリケーションとして開発された。当初の名前は「VideoWorks」で、1988年に「Director」に名称変更されている。
◎ 1993年 Macromedia Director
MacroMindがAuthorwareと合併しMacromedia設立。Web上での配信をもっと容易にしようと、1995年12月に「Shockwave」プラグインをリリースした。
◎ 1996年 FutureSplash Animator／Macromedia Flash 1
FutureWave Softwareが動画としては非常にデータ量が小さいベクターイメージでアニメーションを作成するソフト「FutureSplash Animator」と再生プラグイン「FutureSplash Player」を開発。FutureWave SoftwareをMacromediaが買収し、規格は「Shockwave Flash」、作成ソフトは「Macromedia Flash」に改名された。（「Flash」は「FutureSplash」 を略したものとも言われている）
◎ 1997年 Macromedia Flash 2
ボタン機能やフレームアクションを搭載。getURL()やgotoAndPlay()などが使えるようになり、ただのアニメーションではない、インタラクティブなものが作れるようになる。
◎ 1998年 Macromedia Flash 3
SWFの仕様をオープン・スタンダード化する事が発表される。複数のスクリプトの記述が可能になり、loadMovie()やfscommand()を実装。Shockwave FlashプラグインがNetscape Navigatorに標準搭載された。
◎ 1999年 Macromedia Flash 4
多くの企業サイトで採用され、一般ユーザーに広くFlashが認知されるようになった時期。いわゆるMADムービーの制作ツールとして利用され始める。アクション機能に変数、四則演算、文字列処理、条件分岐などが追加されたが、関数呼び出しに相当するのはフレームの移動（call()）だった。携帯機器向けのFlash Lite 1.0はこのFlash 4をベースにしている。
◎ 2000年 Macromedia Flash 5／Adobe LiveMotion
「Flash 5」ではECMAScriptベースの「ActionScript」が搭載され、関数が作れるなどプログラミング機能が大幅に強化された。独自仕様のスラッシュシンタックスや、tellTarget()を使用したムービークリップへのアクセスとオサラバできた記念すべきバージョンアップ。
同時期にAdobeが動画の扱いが得意なFlash風ソフト「LiveMotion」を発売したが、2003年にバージョン2で撤退している。
◎ 2002年 Macromedia Flash MX (Ver.6)／Macromedia Flash Communication Server MX
「Flash MX」からFlash Video（Sorenson H.263の調整版）がサポートされ動画が扱えるようになった。これが後々、インターネットの在り様を変えるほど大きく影響を及ぼすことになる。MP3やJPEGなどの外部読み込みにも対応。
同年「Flash Communication Server MX」が登場。動画のストリーミング配信や、三者以上での相互通信などをFlashに組み込めるようになった。
◎ 2003年 Macromedia Flash MX 2004 (Ver.7)／Macromedia Flash Communication Server MX 1.5
「Flash MX 2004」ではオブジェクト指向のスクリプト言語「ActionScript 2.0」が搭載され、Flash Video（FLV）が「Flash Communication Server」が無くても使用可能になった。Flash Lite 2.0のベース。
「Flash Communication Server MX 1.5」はHTTPトンネリングとSSLに対応したことによって、コンテンツやメッセージをファイアウォールやプロキシー経由でも安全に送受信できるようになった。
◎ 2004年 Macromedia Flex
Flash を使用したWebサイトを開発できるサーバー管理ソリューションとして「Macromedia Flex」が登場。「MXML（Macromedia Flex Markup Language）」というXMLベースの言語とActionScriptを用いてRIA製品を簡単に作成できる。開発環境である「Macromedia Flex Builder」に1年サポートが付いて227万円という価格に加え、生成するFlashが遅かったので、市場での普及率はいま一歩だった。
◎ 2005年 Macromedia Flash 8／Macromedia Flash Media Server 2／Macromedia Flex 2／Adobeによる買収
「Flash 8」はユーザー層を広げるため機能制限版の「Basic」と全部入りの「Professional」2種類で発売されたが、「Basic」は不人気だったのか以降「Professional」のみとなる。ぼかし、ドロップシャドウ、グローといったフィルタエフェクトの利用が可能に。
「Flash Communication Server MX」から名称変更となった「Flash Media Server 2」とともに、VP6コーデックでの動画エンコードをサポート。
Flash 作成経験をまったく持たないプログラマーが取り組みやすいよう、オープンソースの開発環境「Eclipse」をベースとした「Flex 2」も同時期にリリースされた。先代とは完全に別物で、価格も1/20くらいになっている。無償提供の「Flex SDK」を使用しても開発可能。
2005年4月にMacromediaはAdobeに買収され、プレイヤーは「Adobe Flash Player」に改名された。なお、Flash Lite 3.0はFlash 8をベースとしている。
◎ 2007年 Adobe Flash CS3 Professional (Ver.9)／Adobe Flash Media Server 3
「Adobe Creative Suite 3」に組み込まれて「Adobe Flash CS3 Professional」に改名された。より大規模開発に適したクラスベースのオブジェクト指向言語「ActionScript 3.0」を搭載し、ムービークリップやボタンへのActionScript記述は禁止された。バイナリ読み込みにも対応し、ケータイのシミュレーションも可能になっている。
「Flash Media Server 3」とともにH.264を正式サポートしたHD動画配信などにも対応している。「Flex SDK」のオープンソース化も発表。
同年、Microsoft Silverlight 1.0がリリースされた。
◎ 2008年 Adobe Flash CS4 Professional (Ver.10)／Adobe AIR 1.0／Adobe Flex 3
「Adobe AIR」はオン／オフラインでRIAの利用を可能にするランタイム環境。FlashやHTML、CSS、Ajaxの処理系を備えるほか、Safariにも採用されているレンダリングエンジン「WebKit」を内包。AIRランタイムがインストールされた環境であれば、OSやブラウザの違いに関係なく共通のアプリを利用できる。「Adobe Flex 3」も同時公開。
「Flash CS4」は3D回転、ボーンアニメ、H.264のエンコード、XFLサポートによるAfterEffectsプロジェクトの読み込みサポートなど、主にアニメーションツールとして進化。
同年、HD解像度対応のMicrosoft Silverlight 2.0がリリース。
◎ 2009年～ Adobe Flash Catalyst 1／Adobe Flash Builder 4／Adobe Flex 4
ツールは「Flash」ブランドに統一し、「Flex」ブランドはフレームワークに対するものと定義付けられたため、「Flex Builder」から「Flash Builder」に名称が変更された。
デザイナが「Flash Catalyst」を導入することにより、プログラムのコードをいっさい書くことなくインタラクティブなUIを実装することができるようになる、らしい。
━━━━━━━━━━━━━━━
● ActionScript 記述方法の変遷
◎ ActionScriptをどこに書くのか
Flashでは「フレームアクション」「ボタンアクション」「ムービークリップアクション」といった感じで、いろいろな場所にスクリプトを記述することができる。プログラマには馴染みづらいこの実装は、いい面もあるが悪い面もあった。
【長所】
・スクリプトとグラフィックパーツが一体化される
（グラフィックを流用すると、自然とスクリプトも付いてくる）
・スクリプトが細かく分かれる傾向にあり、デザイナーが理解しやすかった
【短所】
・スクリプトの記述場所が分散化するため、大規模開発には不向き
◎ Flash 4以前のアクション機能
昔のFlashは自由にプログラムを記述することはできず、以下のようにメニューからメソッドを選択して挿入し、移動先のフレーム番号などの値を設定していた。
◎ ボタンシンボルとFlash4以前のボタンアクション記述例
Flashが重宝された理由の一つに、インタラクティブなボタンが簡単に作れた点が挙げられる。
ボタンシンボルを作成すると、自動的に「アップ」「オーバー」「ダウン」「ヒット」というフレームが作成され、そこに絵を入れるだけでマウスに反応して絵が変わるボタンを作ることができ、スクリプトはボタンがクリックされた時の動作のみ書けば良かった。
On (Release)
Begin Tell Target (“/”)
Go to and Stop (777)
End Tell Target
End On
◎ ActionScript 1.0（Flash 5以降）
「フレームアクション」「ボタンアクション」「ムービークリップアクション」どれでもOK。
ボタンアクション
on(release){
_root.gotoAndStop(777);
}
フレームアクション
button.onRelease = function(){
_root.gotoAndStop(777);
};
◎ ActionScript 2.0（Flash MX 2004以降）
クラスベースのプログラミングスタイルを採用し、関数や変数に型指定ができるようになる。だが、SWFに書き出されるバイトコードはActionScript 1.0と同じなため、動作速度などは改善されなかった。
button.onRelease = function():Void {
_root.gotoAndStop(777);
};
◎ ActionScript 3.0（Flash CS3以降）
フレームアクションと外部ファイルのみが利用可能に。ボタンシンボルにアクションを割り当てることが出来なくなったため、ボタンを作る場合はMovieClip（またはSprite）を作成し、イベントリスナーを設定する必要がある。
button.buttonMode = true; //ボタンモード
button.useHandCursor = true ; //ハンドルを手にする
button.mouseEnabled = true; //ボタンの有効、無効
button.mouseChildren = false; //子要素に対してのイベントの有効、無効
button.addEventListener(MouseEvent.ROLL_OVER, rollOverEvent);
button.addEventListener(MouseEvent.ROLL_OUT, rollOutEvent);
button.addEventListener(MouseEvent.CLICK, onClick);
private function rollOverEvent(event:MouseEvent) {
event.currentTarget.gotoAndPlay(“_over”);
}
private function rollOutEvent(event:MouseEvent) {
event.currentTarget.gotoAndPlay(“_up”);
}
private function onClick(event:MouseEvent):void {
MovieClip(root).gotoAndStop(777);
}
◎ AVM（ActionScript Virtual Machine）
Flash Playerの機能の一つである、ActionScriptを処理するための仮想コンピューターをAVM（ActionScript Virtual Machine）と呼ぶ。
Flash Player9からは、従来のAVMとは別にActionScript3.0を処理することができる、より高速なAVM2が搭載された。そのため、ActionScript3.0はこれまでのActionScriptとは全く互換性が無い。
したがって開発者は、どちらの言語で開発するのかを予め決めておく必要がある。
なお、ActionScript 1.0または2.0で作成されたSWFファイルをActionScript 3.0のSWFファイルにロードした場合、親SWFファイルはロードされたSWFのプロパティ、メソッド、またはオブジェクトにアクセスすることはできない。
━━━━━━━━━━━━━━━
● 現在のFlash制作に関するもろもろ
ActionScript 3.0が主流になりつつある現在、デザイナー達の心は折れかかっている。参考書やどこかのサイトにあるスクリプトをコピペするだけで済ませていた人達にとっては、AS3プログラミングは正直しんどいようだ。
それとは真逆の動きとして、AdobeはFlashの機能をより高め増やす方向に向かっている。これらの機能をフル活用するのはエンジニアであっても大変なので、Flash制作環境を少しでも良くしようという動きがデベロッパの間で広まりつつある。
◎ デザイナー向け Adobe Flash CS4 Professional
・業界標準のオーサリングソフト
・グラフィックおよびアニメーションを作成するための環境が用意されている
・Flashビデオを扱う場合も持っておいた方が良い（Adobe製のFLVエンコーダが付属する）
・携帯電話向けのFlash制作環境も用意されているため、Flash Lite開発にも必須
・参考資料が非常に豊富
・さまざまなバグフィックスがあるため最新版を使うのが理想的だが、CS4は極端に重い
・FlashDevelopなど外部エディタを利用したり、拡張機能を入れるケースも増えている
「Progression」というフレームワークを利用すると、画面遷移やディープリンク、右クリックメニュー、マウスホイール対応など、Flashサイトでよく求められる基本的なシステム部分を全て担ってくれる。
「Spark project」というActionScriptのオープンソースプロジェクトも国内で発足し、ソースコードやノウハウを共有しようという動きが広まっている。
◎ エンジニア向け Adobe Flex 3
・Flashアプリケーションを構築するオーサリングソフト
・Eclipseベースの開発ツール「Flex Builder 3」が付属
・既成のコンポーネントライブラリを利用できる
・視覚的な操作でUIをレイアウトできる環境を提供（MXMLを使用）
・Flashで制作したアニメーションコンテンツも読み込める
◎ 趣味で試してみたいエンジニア向け FlashDevelop 3 ＋ Flex 3 SDK
・Flexアプリはオープンソースで提供されている「Flex SDK」を使用して開発可能
・「FlashDevelop」というActionScriptエディターを組み合わせるのが定番
（ソフトが軽く、強力なコードヒント機能を備えている）
・「FlashDevelop」はWindows専用であり、Macでは他のエディターを使うしかない
・Adobe AIRも「FlashDevelop」が生成するバッチを実行したりすれば作れる
・資料はオンラインにあるもののみ
◎ 趣味で試してみたいエンジニア向け wonderfl
・面白法人カヤックが提供している無料のWebサービス
・ブラウザさえあればFlashをつくることができる
・ActionScript3のみ対応
・サーバサイドでコンパイル
・コードに変更があり、キー操作が一定期間無い場合に自動的にコンパイルされる
・0からコードを書き始める場合は「Build from scratch」を選択
・他のユーザーのコードに機能を追加して発展させたい場合は「Fork」を選択
◎ デザイナーとエンジニアの共同作業向け Flash Catalyst（未発売）
・デザイナーがMXMLやActionScriptの知識がなくてもFlexアプリケーションのView部分を作成可能
・XMLベースのグラフィックフォーマット「FXG（Flash XML Graphics format）」を採用
・Photoshop、Illustrator、Fireworksから書き出された画像ファイルを直接読み込むことができる
・アートワークを簡単な操作でFlexコンポーネントに変換
（ボタンにしたい場合は、Buttonコンポーネントを設定）
━━━━━━━━━━━━━━━
● おわりに
最近特に「Flash難しそう」という声を聴く。おそらくAS3が登場したためだと思われるが、難しいと思われてFlashが敬遠されるのは残念なことだ。
人に伝えるプラットフォームとしては、今現在Flashはとても有効なツールであるし、少なくとも今後数年間は現役であり続けると思われる。元々はただのアニメーション作成ツールなのだし、デザイナーにとってもエンジニアにとっても面白く思える要素があるので、あまり構えずにゆるくチャレンジしてもらいたい。
何より伝えたいのは「Flashって楽しい！」ということだ。今ではソフトを購入せずにFlashを作ることもできる環境が整ってきているので、ぜひ自分の思うものを形にしてみてほしい。
━━━━━━━━━━━━━━━
