ActionScriptによるWebの3Dグラフィックス再入門

フリーの開発環境のセットアップと簡単なデモまで

Step 1 － 三角形を描く

プロジェクトを作る

　まずは三角形を描くだけのプログラムを作ります。いきなり3Dプログラミングを始めると話がややこしくなるので、ここでは2Dで三角形を描きます。

　FlashDevelopでFlashを作るときは最初に「プロジェクト」を作成します。FlashDevelopのメニューの［Project］から［New Project...］を選択します。

新規プロジェクト作成画面

　プロジェクトの種類がいろいろ出てきますが、この中から「ActionScript 3 - DefaultProject」を選択してください。ここでの設定項目は以下の表のとおりです。

New Projectの設定項目

設定項目	内容
Name	プロジェクトの名前です。
Location	プロジェクトを保存する場所です。下の［Create directory for project］にチェックを入れると、この場所の下に、Nameで指定した名前のフォルダが作られます。

　今回は名前（Name）を「Wireframe」としてプロジェクトを作ります。

プログラムを書く

　次はActionScriptを編集します。プロジェクトを作ると自動的にフォルダやファイルが作成され、右側の［Project］に表示されます。メインとなるプログラムは「classes」の下の「Main.as」です。これをダブルクリックして開いてください。

Project

　「Main.as」を開くと、最低限のFlashを作るためのActionScriptが表示されます。Mainメソッド（コンストラクタ）を次のように書き換えてみてください。

public function Main():void
{
    // 線の太さを5に、色を0x8888FFに設定
    graphics.lineStyle(5, 0x8888FF);
    
    // 線を引く
    graphics.moveTo(150, 50);
    graphics.lineTo(250, 250);
    graphics.lineTo(50, 250);
    graphics.lineTo(150, 50);
}

　これを実行するには［F5］キーを押すかメニューの［Project］から［Test Movie］を選択してください。無事にコンパイル、実行できれば「Wireframe.swf」というタブが現れ、水色の三角形が描かれます。

実行結果

　プログラムの内容ですが、まずgraphics.lineStyleで線の太さと色を設定します。次に、graphics.moveToで線を引き始める位置を設定します。(150,50)というのは、三角形の上の点です。そして、そこから時計回りにgraphics.lineToで線を引きます。graphicsやlineToなどについての詳細な説明はFlex SDKのリファレンスを参照してください。

　ちなみに、ここで使用したプログラムは添付資料のStep1フォルダに入っています。以降のステップについても同様です。