パンダゼロと覚える ActionScript3.0

• 謎の生物との出会いとAS3の環境整備
• いちばん簡単なプログラムハローワールドを学ぶ
• Flashと表示リスト

本連載では、Flash/Flex/AIR と言った注目の技術で使われるスクリプト言語「ActionScript3.0」を気軽に学習できることを目標にしています。予備知識ゼロ、所持金ゼロ、やる気ゼロという方にも気軽に楽しみながら覚えてもらえるように、会話形式で読み進められるものになっています。謎の生物「パンダゼロ」と一緒にActionScript3.0を覚えましょう。

今、覚えると楽しいプログラミング言語をあげると、ActionScript3.0をあげることができます。ActionScript3.0を覚えることで、Adobe Flash/Flex/AIRと言った注目の技術で利用することができます。

しかも、Adobe が SDK を無料で提供しているので、やる気さえあればゼロ円で始めることができます。本連載では、予備知識ゼロ、所持金ゼロ、やる気ゼロの人でも、気軽に楽しめるプログラミング講座を目指しています。

登場人物の紹介

	謎の生物「パンダゼロ」	謎の生命体、全てが謎に包まれているが、なぜか、ActionScript3.0が得意。
	やる気ゼロの女の子「ふみかちゃん」	プラス思考ながら難しい事が苦手な女の子。

プロローグ～出会い

ある日の夕暮れ。ここは、小ざっぱりしたワンルームマンションの１室。自由気ままなひとり暮らしをしている女の子「ふみかちゃん」の部屋です。ふみかちゃんは、Flash で作られたミニゲームで遊んでいました。

ふみか「Flashで、できたページってかっこいいな～。私も何か作ってみたいな～。でも、Flashって買わないといけないんだよね。今月も、よくパスタ屋さん行ったから、Flash買う余裕なんてないんだよね。」

そうです。ふみかちゃんもFlashで何か作ってみたいと思っているのに、なかなか、行動に移せないでいました。

ふみか「同じ部署のＫ君は、Flashでバリバリ仕事しててかっこいいなぁ。私も何か作ってみたいんだけど、何から始めていいか分からないし。」

そんな時です。「ボトリ・・・」。天井から、ふみかちゃんの上に何かが落ちてきました。

ふみか「キャーーー何、これ？！」

ボールくらいの大きさの奇妙な丸い物体が落ちてきたのです。そして、その丸い物体は、落ち付いた声でふみかちゃんに話しかけます。

パンダゼロ「こんにちは。お嬢さん。僕はパンダゼロと言います。よろしく。」

ふみか「ぎゃーーー、しゃべった！！」

パンダゼロ「まぁまぁ、そんなに慌てないで！僕は、あなたの願いを叶えるために、ActionScriptの星からやってきたのです。」

しばらくの沈黙があって、だいぶ状況が掴めてきたふみかちゃんは、小さな声で言いました。

ふみか「何？！信じられない！！どんな願いを叶えてくれるの？」

そんな声に、パンダゼロは、ハキハキ答えました。

パンダゼロ「はい。あなたの願い通り、Flashで使われているActionScript3.0をマスターすることができます。」

そして行動開始

そんなこんなで、よく分からないままに、ふみかちゃんは、謎の生物「パンダゼロ」から、ActionScript3.0を教えてもらうことになってしまいました。

パンダゼロ「まずは、ActionScript3.0の開発環境を整えましょうか。」

ふみか「でも、私、お金ないよ。パンダゼロが買ってくれるの？」

パンダゼロ「そうしてあげたいのは、やまやまなのですが、実は私も地球に来たばかりで、所持金がないのです。」

ふみか「じゃぁ、できないじゃん！」

パンダゼロ「でも、大丈夫です。Adobe のサイトから、無料の SDK がダウンロードできるようになっているんです。」

ふみか「え？！タダなの？」

パンダゼロ「そうです。ただし、無料で提供されているのは、ActionScript3.0のコンパイラだけなので、ちょっと設定する必要があるんですけど。」

ふみか「うん、うん、パンダゼロが教えてくれるなら、ちょっとの設定も気にならないよね？じゃあ、それダウンロードしようよ。」

こうして、ふみかちゃんは、Adobe のページに行って、Flex SDK をダウンロードします。（場合によっては、Adobe にユーザー登録を求められるかも。）

• Download Adobe Flex 3
• http://www.adobe.com/go/flex3_sdk

このページの下のほうにある、FLEX 3.0 SDK をダウンロードします。その時、ライセンスに同意しないとリンクが有効にならないので、チェックボックスをチェックします。

ふみか「ダウンロードに時間がかかるよ。78MBもあるね。」

SDK って何？

ふみか「ところで、SDKって何？エスディーカードの仲間？」

パンダゼロ「SDKって言うのは、Software Development Kitの略で、ソフトウェアを開発する際に、必要となる開発ツールのことです。」

ふみか「そうなんだ。じゃぁ、さっそく設定しようよ。どうやるの？」

SDKにパスを通す

パンダゼロ「はじめに、ダウンロードしたＳＤＫを解凍してください。ここでは、Windows XP/Vista と Mac OS Xでの方法を紹介します。」

ふみか「私のパソコンVistaだよ。XPもMac OS Xも要らないよ。」

パンダゼロ「そう言わず、聞いてください（＾ｖ＾；」

[Windows XP の場合]

• (1) 解凍した flex_sdk_3 をCドライブにコピーします。
• (2) 次に、環境変数のPATHを設定します。コントロール・パネルの［システム］のアイコンを起動し、表示される［システムのプロパティ］ダイアログの［詳細設定］タブ（Windows 2000では［詳細］タブ）をクリックし、［環境変数］ボタンをクリックします。
• (3) 環境変数のダイアログが開いたら、システム環境変数の中から「Path」の項目を探して、[編集]ボタンをクリックします。すると、Path の編集画面が出るので、ここに「;C:\flex_sdk_3\bin」と記入して[OK]ボタンをクリックします。

[Windows Vista の場合]

• (1) 解凍した flex_sdk_3 をCドライブにコピーします。
• (2) 次に、環境変数のPATHを設定します。スタートメニューの[コンピューター]を右クリックし、[プロパティ]をクリックします。
• (3) 画面左側の「システムの詳細設定」をクリックします。
• (4) システムのプロパティにある[詳細設定]のタブを開き、その一番下にある[環境変数]のボタンをクリックして、環境変数の設定画面を開きます。
• (5) 環境変数のダイアログが開いたら、システム環境変数の中から「Path」の項目を探して、[編集]ボタンをクリックします。すると、Path の編集画面が出るので、ここに「;C:\flex_sdk_3\bin」と記入して[OK]ボタンをクリックします。

[Mac OS Xの場合]

• (1) ダウンロードしたZIPファイルを解凍します。そして、解凍したアーカイブを「/Developer/SDKs/flex_sdk_3/」に移動します。
• (2) 次に、Terminalからコンパイルができるようにパスを通します。アプリケーションディレクトリ(/Application)にある Terminalを起動します。パスを通すには、まずユーザーのホームディレクトリにある.bash_profileというファイルに、以下の一行を追記します。

export PATH=$PATH:/Developer/SDKs/AdobeAIRSDK/bin/

• (3) 書き終えたら、設定を反映させるために、一度Terminalを終了して、再度、Terminalを起動し直します。

ドットから始まるファイルの編集

Mac OS XのFinderでは、"."(ドット)から始まるファイルは編集したり見る事ができないように設定されていますので、vi や emacsなどのエディタを利用して編集を行います。もっとも、これらのエディタを利用したことがない方には、picoというシンプルなエディタを利用すると良いでしょう。Terminalから、以下のように入力します。

pico ~/.bash_profile

その後、パスの設定を記述したら、[Ctrl]+[X]を押します。すると、保存するかどうか尋ねられますので[Y]を入力します。そして、次に、どのファイルに保存するのか尋ねられますので、ファイル名に、「/Users/(ユーザー名)/.bash_profile」となっていることを確認して、Enterキーを押すと保存できます。

正しく設定できたか確認

ふみか「ふぅ。けっこう面倒くさい・・・。」

パンダゼロ「タダより高いものはないと言いますが、面倒だと思う人は、バーンと有償の Flex Builder を買うのも手かと思います。その方が、生産性も高いですし、おススメです。」

ふみか「それも手ね。いやいや！私はゼロ円にこだわってやりたいの！！」

パンダゼロ「そうですか。・・・それでは、正しく設定できているか確認してみましょう。」

パンダゼロ「以下のプログラムを Test.as という名前で保存してください。ここでは、Cドライブに"AS3"という名前のフォルダを作って、そこに保存したことにします。(Windowsの場合)」

↓Test.as という名前で保存。(c:\AS3\Test.as)

package {
  import flash.display.*;
  public class Test extends Sprite {
    public function Test() {
      var g:Graphics = this.graphics;
      g.lineStyle(0, 3);
      g.drawCircle(200,200,100);
    }
  }
}

そして、[Windows]キーと[R]キーを押して、cmd と入力します。すると、真黒なコマンドプロンプトが表示されいます。ここに次のように入力します。(「>」の記号は入力不要です。)

> cd c:\AS3
> mxmlc Test.as

すると、コンパイルが始まり、しばらくすると、Test.swf というファイルができます。これを、Web ブラウザにドラッグすると、以下のような円が描画されます。

パンダゼロ「円が描画されたら、設定がうまくされているということになります。うまく実行できない場合は、設定からやり直してください。」

ふみか「今日は、ここまでにしよう。もう、なんか疲れたよ。また、明日仕事から帰ってきたら教えてよ、」

パンダゼロ「そうですね。続きは、また来週ということで。」