今やなくてはならないWebコンテンツの一種です。 アニメーション、動画の再生、ゲームなど様々な動的コンテンツで活用されています。 元はMacromedia社が開発しましたが、Adobe社に吸収されてしまいました。 サードパーティ製のFlash作成ソフトもありますが、大抵はAdobeのものを使うことになるでしょう。 AdobeはPhotoshopに代表されるプロ用デザインツールの大御所で、どのソフトも馬鹿高いのが特徴です。
Flashコンテンツの作成手順を大雑把に切り分けると、「デザイン」と「プログラミング」の２つの領域になります。 イラストを描くのが「デザイン」、そのイラストを動かすのが「プログラミング」だと思ってください。 ActionScriptは、その「プログラミング」の部分にあたる、プログラミング言語です。 Flashで、アニメーションをさせる、ボタンをクリックなどの動的な動作はすべてActionScriptで記述します。 また、直線を描くとか円を描くとかの機械的な作業は得意なのですが、漫画のような複雑な線はとても描けません。 「デザイン」に関しては別分野になります。
この講座で解説するActionScript3.0はFlash 9というバージョンから使われていて、よりオブジェクト指向に近くなりました。 いままでごっちゃだった「デザイン」と「プログラミング」が切り分けられたと言えばわかりやすいでしょうか。 プログラマーからは喜びの声が聞こえてきますが、デザイナーからはどうやらブーイングもののようです。 「難しくなったから」らしいのですがそんなことはないですよ？
ActionScript3.0で遊ぶ?には専用のソフトが必要です。 どのようなものが必要なのかざっと見ていきましょう。
テキストエディタプログラムを記述するために使います。 Windowsのメモ帳でもokですが、それだとプログラミングにはむいてないので別のものを用意します。 有料のものから無料のものまで色々ありますが、無料のもので十分です。 このページの最後の方でインストールします。 ちなみにWordや一太郎などのワープロソフトではダメです。
コンパイラ書いたプログラム(ソースコード)をパソコンが実行できるように変換するソフトのことです。 必要なのはActionScript3.0のソースコードからFlashの.swfファイルを生成するコンパイラです。 主にAdobe社の製品を使うことになります。 基本的にどの製品を使ってもActionScriptの書式は同じなので気に入ったものでいいのですが、 Adobeはどれも高いので最初は無料のものを使うのがいいでしょう。
なんとびっくりAdobeが無料で提供しているActionScript3.0のコンパイラ+αです。 無料で使い放題なのでインストール例ではこれを使います。 「デザイン」と「プログラミング」でいうなら「プログラミング」オンリーです。 その上、便利な機能はほとんどついてないので、必要なものを別途インストールする必要があります。
Flex 2 SDKが統合開発環境になったようなシロモノです。 eclipseという有名なエディタ(無料)があるのですが、そのプラグインとして提供されています。 これもやはり「プログラミング」オンリーです。 30日間の体験版があります。 製品版はAdobeストアで64,900円します。個人的に無料のものに+αのプラグインつけてこの値段ってどうなのよ？という感じです。
大抵の人がイメージするようなFlashを作るならこのソフト一択です。 Flash作成に必要な「デザイン」と「プログラミング」の要素をほぼ完璧に併せ持っています。 かなりプロ仕様の(というかAdobeの製品はすべてプロ用ですが) デザイン系ツールとActionScript系等、Flash作成に必要なものが統合されています。 実はActionScriptを知らなくてもそこそこ動きのあるFlashが作れるような環境にもなっています。 もちろんActionScriptを知っていれば百人力です。……使いこなせればですが。 値段もAdobeの本領発揮。Adobeストアで88,000円もします。学生ならアカデミック版が33,600円で買えます。 アカデミック版は卒業してからも制限なしで使えるので学生のうちにぜひおすすめです。 Flex Builder 2より高いですが、まかり間違っても買うならこちらを買いましょう。 Windows版とMac版を間違えないように。30日間の無料体験版もあります。
Adobe Creative Suite 3 Web Premium
Adobe Creative Suite 3 Web Standard
基本的にFlash CS3で文句はありえません。 でももっと3Dでゴリゴリ書いたやつをグリグリ動かしたいんじゃーという超上昇志向or無謀さんはこちらをどうぞ。 かの有名なPhotoshopやIllustrator、その他Web系に必要なソフトがバンドルされています。 Flash CS3単体では3D系のデザインは難しいのですが、もはやPhotoshopやIllustratorがついてできないことなどありません。 Flash "CS3"となっているようにCreative Suiteシリーズになったため、 これらのソフトとデータの連携がしやすくなりました。 AdobeストアでWeb Premium版が226,000円、Web Standard版が126,000円です。 アカデミック版はそれぞれ98000円、47000円です。 卒業後にプログラミングやWeb系デザイナーになるなら買っておいて損はないです。 私は卒業2ヵ月後にCS3が発売されて20万出しましたorz
これからのインストール作業は、ソフトがWindows、Macの両方対応しているのでインストールの方法はどの環境でも基本的に同じです。 ですが筆者はWindows環境なので説明がMacの方にとっては中途半端な解説になるかもしれません。
また、インストールするソフトや設定項目が多すぎると感じる人は製品版を買ってしまうのも手です。 Flash CS3あたりを買ってしまえば、Java SDKもFlex 2もテキストエディタもインストールする手間はないし、 コマンドラインなんてめんどくさい方法でコンパイルする必要もありません。「デザイン」もできます。 なにより失敗がないのがいいです。
そして最後に、これらのソフトのインストール、設定、実行を行って、 いかなる損害を被ったとしても筆者は責任をとりません。とれません。 ご了承をお願いいたします。
ではさっそく、色々設定していきましょう。
拡張子を知っている方はこの節を飛ばしてOKです。 Macの方は拡張子がありませんが、Web系デザインやプログラミングを学ぶなら必要ですので 読んでおいたほうがいいかもしれません。
拡張子とはWindowsでファイルを識別するための名前です。 例えば、「readme.txt」という名前のファイルがあるなら「.txt」が拡張子です。 「.txt」はテキストファイルを表します。 実行ファイルなら「.exe」ですし、 ワープロソフトのWordのファイルなら「.doc」、 ホームページの記述に使うHTMLファイルなら「.html」や「.htm」になります。
なぜこのようなものが名前に必要かというと、これで実行するソフトウェアを識別しています。 「.doc」ファイルをダブルクリックするとWordが起動しますし、 「.html」ファイルをダブルクリックするとInternet ExplorerなどのWebブラウザが起動します。 ですので、「.html」を「.doc」に名前を変更すれば、本当は「.html」なのにWordが開きます。 ただし、Wordが正しくそのファイルを開けるかはわかりません。もとはhtmlファイルですから。
Macでは別の方法でファイルを識別しているのでいらないのですが、 Webにコンテンツを作成するならMacの人も拡張子をつける必要があります。 MacもWindowsもごちゃまぜで利用するのがWebの特徴ですし、 Webサーバも拡張子でファイルを判断しています。
Windowsでは、初めは拡張子を表示しない設定になっています。 これを表示する設定にしましょう。 なんでもいいので適当なフォルダを開いてください。 するとメニューに「ファイル 編集 表示 …」と並んでいるはずですので、 「ツール」→「フォルダオプション」を選択してください。 「表示」タブを開き「登録されている拡張子は表示しない」のチェックを外します。 あとは「OK」を押して閉じてください。これで設定はおしまいです。
表示されているかどうか実験してみましょう。 デスクトップを右クリックして「新規作成」→「テキストドキュメント」を選択します。 これで新しく作成されたファイルが「新規テキスト ドキュメント.txt」と表示されたならOK 「新規テキスト ドキュメント」となっていたら表示されていません。 もう一度設定をやり直してみてください。
無事表示できたら、せっかくなので拡張子を変更したときの挙動を確かめてみましょう。 先ほど作った「新規テキスト ドキュメント.txt」をダブルクリックしてメモ帳で開きます。 そこに次のように入力してください（コピペでかまいません）
<html><body> <h1>HTMLドキュメントです</h1> </body></html>
これを上書き保存して終了します。 次に名前を変更して「新規テキスト ドキュメント.html」としてください。 「拡張子を変更すると～」という警告がでますが、気にせず「はい」を選択します。 するとアイコンが変わるはずです。Windowsがこれはhtmlファイルであると認識しました。 そしてダブルクリックすると、IEが開いてでかでかと「HTMLドキュメントです」と表示されるはずです。
HTMLドキュメントです
実はhtmlの中身はテキストファイルで、メモ帳などでhtmlの書式に従って記述します。 それをWebブラウザで見ると、記述したとおりに文字を大きくしたり、色をつけたりして表示してくれるわけです。
プログラミングもテキストエディタ（メモ帳もその一種です）でプログラムを記述します。 ただメモ帳ではActionScriptを記述するには不便なので他のテキストエディタをインストールしたほうがいいでしょう。 エディタのインストールも後々行います。 ちなみにWordや一太郎のワープロソフトではプログラミングはできません。 .docファイルを.txtに直してメモ帳で開くとわかりますが、なんだか色々な情報が付け加えられていると思います。 これではプログラミングはできませんのであしからず。
Java SDKはこのあとインストールするFlex 2を動かすために必要です。 大抵の環境にインストール済みですが、念のため最新のものをインストールしましょう。
Windowsの人
http://java.sun.com/j2se/1.4.2/ja/download.html
から「J2SE SDK のダウンロード」をクリック 開いたページに「Accept」というラジオボタンがあるのでこれをクリック これでダウンロード規約に同意したことになります。 「Windows Platform - Java(TM) 2 SDK, Standard Edition」の欄からexeファイルをダウンロードします。 私は「j2sdk-1_4_2_15-windows-i586-p.exe」というファイルでした。 1_4_2_15というバージョンはダウンロードの時期により異なります。 ダウンロードしたファイルをダブルクリックしてインストールしましょう。設定は特に必要ありません。 利用規約に同意し「次へ」ボタンを押していきましょう。 これでJava SDKのインストールは終わりです。
Macの人
筆者の環境にMacがないため不確かですが、
http://developer.apple.com/java/
の「Java Downloads」から自分の環境にあったものを選択してください。 インストールもおそらく難しくはないでしょう。
WindowsとMac共通です
http://www.adobe.com/jp/downloads/
の体験版ダウンロードから「Flex 2」を選びます。 恐らく、アカウントIDがないなら作成してくれと出るので、無い方は作成してください。
作成してログインするとダウンロードするソフトの選択画面になりますので、 「Flex 2 SDK （無償）と日本語パック」の欄にある、 「Flex SDK」と「Flex Language Pack」をダウンロードします。
「flex_sdk_2.zip」と「flex_sdk_2_ja.zip」がダウンロードされるはずです。 2つのファイルを解凍すると「flex_sdk_2」と「flex_sdk_2_ja」の2つのフォルダができます。 「flex_sdk_2」ディレクトリの中に、「flex_sdk_2_ja」の中身をすべてドラッグ＆ドロップして上書きします。 これで「flex_sdk_2」の準備が整いました。
ここからWindowsの設定になります。Macの人は適宜読み替えてください。
この「flex_sdk_2」はどこに置いてもいいのですが、できるだけ浅いディレクトリ(フォルダのこと)の方が使い勝手がよいでしょう。 Cドライブ直下の「C:\」に置くことにします。これでインストールは終わりです。 これからの説明は「C:\flex_sdk_2」にインストールされているものとして解説します。 (ブラウザ上で'\'が円マークでなくバックスラッシュになっているなら、 円マークに読み替えてください。どちらも同じです)
こんな感じになりましたでしょうか？
Pathを設定することを、「パスを通す」といいます。これからパスを通す作業を行います。 なぜこの作業が必要かというと「C:\flex_sdk_2\bin」ディレクトリにある「mxmlc」を実行したいとき、 自分が「C:\flex_sdk_2\bin」ディレクトリにいるなら「mxmlc」と打ち込むだけで実行できますが、 別のディレクトリにいるときは「C:\flex_sdk_2\bin\mxmlc」とフルパスで打ち込まなければいけません。 これではめんどくさいので、どのディレクトリにいても「mxmlc」と打ち込むだけで 「C:\flex_sdk_2\bin\mxmlc」が実行されるようにします。それがPathの設定です。
Windows XPでの設定方法を解説します。
「コントロールパネル」→「システム」→「詳細設定」→「環境変数」と開いていってください。 「システム環境変数」という欄を下に見ていくと「Path」という項目があるはずです。 この項目をクリックして、「編集」ボタンを押します。 出てきたダイアログの「変数値」に文字列が書かれていると思いますが（人によって違います）、 この文字列の終わりに「;C:\flex_sdk_2\bin\」という文字列を書き足してください（'\'がバックスラッシュで表示されている人は円マークに置き換えてください）。 元の文字列を消してはいけません。「書き足し」ます。 終わったら「OK」を押して設定完了です。
こんな感じで追加します。追加前の文字列はパソコンによって違いますので気にしないでください。
その他のWindowsやMacの方は「Windows 98 パスを通す」などで検索すれば出てくるはずです。
Flash Playerは作成したFlashを実行させるソフトです。
インストールは「C:\flex_sdk_2\player\debug」にある「Install Flash Player 9.exe」を実行します。 言語選択になりますが、残念ながら日本語がないので「U.S. English」あたりを選んでおきます。 あとは「OK」を選んで進んでください。これで終わりです。
Macの人は このへんからダウンロードすることになるんでしょうか。
インストールはこれで最後。エディタのインストールです。 UTF-8という文字コードの扱えるエディタなら何でもかまいません（メモ帳でも）。 ここでは無料で高機能な「サクラ エディタ」をインストールします。 Macの方は「Mac エディタ」あたりで検索してみてください。
http://sakura_editor.at.infoseek.co.jp/
上のページから、「パッケージダウンロード」をクリック、開いたページから最新版をダウンロードしてください。 あとは例によって、実行してインストールするだけです。 サクラエディタは高機能なので性能をフルに発揮するには色々設定が必要なのですが、 筆者はフルに発揮させていないので、設定がわかりません。ごめんなさい。 それでも使い勝手はとてもいいです。
なぜだか知りませんが、どのプログラミング言語でも最初に動かすプログラムは "Hello, world!"と相場が決まっています。 このプログラムは画面に「Hello, world!」と表示するだけです。
まずはHello, world!のプログラムを置く場所を決めましょう。 どこでもいいのですが、パスが浅いほうが楽なので 「C:\」直下に「action_script」というディレクトリを作成します。 この中に作ったプログラムを入れることにします。
先ほどインストールした「サクラエディタ」を起動して（なんならメモ帳でもいいです） 次のように入力(コピペ)してください。
package {
import flash.display.*;
import flash.text.*;
public class HelloWorld extends Sprite {
public function HelloWorld() {
var textField:TextField=new TextField();
textField.text="Hello, world!";
addChild(textField);
}
}
}
そして「名前をつけて保存」するのですが、このとき保存する場所を「C:\action_script」、 ファイル名を「HelloWorld.as」、文字コードを「UTF-8」としてください。 保存場所は説明上そうするだけなのでどこでもいいのですが、 ファイル名と文字コードは必ず指定したものにしてください。
次にコマンドプロンプトを起動します。 WindowsXPの場合「スタート」→「すべてのプログラム」→「アクセサリ」→「コマンドプロンプト」です。 ショートカットをデスクトップに作っておくといいかもしれません。よく使います。 Mac Xの場合は「シェル」と呼ばれているのではないでしょうか。たぶん。
コマンドプロンプトには恐らく「C:\なんちゃら>」と表示されている先でカーソルが点滅していると思います。 そこに次のように打ち込んでください。
>cd C:\action_script
あ、最初の">"は打ち込まないでください。 これはコマンドプロンプトであることを表します。 打ち込んでエラーがでないなら、「C:\なんちゃら>」から「C:\action_script>」に表示が変わったはずです。 これで現在位置（カレントディレクトリといいます）がC:\action_scriptに移動しました。
次に先ほど作った、HelloWorld.asからFlashのファイル.swfを作ります。 これをコンパイルといいます。次のように打ち込んでください(長いのでコピペでもいいですが)。
>mxmlc -default-size 240 240 -default-frame-rate=30 -default-background-color=0xFFFFFF HelloWorld.as
特にエラーの出ることなく終わりましたか？筆者の環境では
設定ファイル "C:\flex_sdk_2\frameworks\flex-config.xml" をロードしています C:\action_script\HelloWorld.swf (614 bytes)
と出てとまりました。 環境によって多少メッセージは違うかもしれません。 「C:\action_script」に「HelloWorld.swf」ができていればコンパイル終了です。
できていなければエラーメッセージを頼りに原因を追求してみてください。 「'mxmlc'は内部コマンドまたは～」と出るならFlex 2 SDKがインストールされていないか、パスが通っていません。 なにか別のエラーが出るなら、プログラムの書き間違いの可能性が高いでしょう。 ファイル名が「HelloWorld.as」になっているか、ディレクトリを間違えていないか、文字コードが「UTF-8」になっているかも確認してください。
今後違うファイルをコンパイルしたいときは、 「mxmlc ～うんちゃら～ HelloWorld.as」の「HelloWorld.as」 をコンパイルしたいファイル名にすればokです。
これでFlashはできたのですが、ブラウザで表示させるためにhtmlファイルを作りましょう。 先ほど「HelloWorld.as」を作ったのと同じ手順で
<html> <body> <embed src="HelloWorld.swf" width="240" height="240"></embed> </body> </html>
をファイルに書き込みます。 保存場所は「HelloWorld.swf」と同じ場所「C:\action_script」。ファイル名は「HelloWorld.html」、文字コードは「UTF-8」です。
ついにすべての作業が整いました。 「HelloWorld.html」をダブルクリックして開いてみてください。こんなのが表示されるはずです。
もしかしたら空気読まないIEが「セキュリティ保護のため～」とかメッセージを出しているかもしれません。 そのときはメッセージをクリックして「ブロックされているコンテンツを許可」を選択します。 どうですか？表示されたならおつかれさまでした。ActionScript3.0最初のプログラムの完成です。
これでもうめんどくさい設定はありません。 ActionScript3.0の学習準備は整いました。がんばって学習しましょう！
swfファイルはできているのに動かない場合は、Flash Player 9がインストールされていないか、 htmlが間違っているかです。 htmlファイルをswfファイルと同じフォルダに置いていますか？誤字や脱字はありませんか？見直してみてください。